/*
 * bittner.de – Contao-5-Ergänzungen zum Original-Stylesheet files/assets/pb/css/pb.css
 *
 * Ersetzt, was in Contao 3.1 von Erweiterungen/Core kam:
 *  1. Raster "responsive-1140-16-percent.css" (BugBuster, grid_16_columns) – nur die
 *     tatsächlich wirksamen Regeln, gleiche Maße
 *  2. Subcolumns (YAML3 subcols.css) – als CSS-Grid mit denselben Spaltenpositionen
 *  3. FlexSlider-1.8-Optik für den Contao-5-Slider (Swiper)
 *  4. Mobile Absicherung (nur schmale Viewports, Desktop unverändert)
 * Reihenfolge im Layout: contao5.css VOR pb.css laden (wie früher Framework vor pb.css).
 */

/* ---------- 1. Rasterersatz (gleiche Maße wie responsive-1140-16-percent) ---------- */
#wrapper { width: 1140px; margin: 0 auto; }          /* pb.css überschreibt auf 1600px */
.mod_article *[class*="ce_"],
.mod_article *[class*="mod_"] { margin-left: 1%; margin-right: 1%; }

/* ---------- 2. Subcolumns -> CSS-Grid (siehe auch out/subcolumns-grid.css) ---------- */
.subcolumns { width: 100%; overflow: hidden; display: grid; align-items: start; }
.subcolumns > div { width: auto !important; margin: 0 !important; float: none; min-width: 0; }
/* 50/50: Spalte 1 = 0–50 %, Spalte 2 = 40 % breit, rechtsbündig mit 1 % Rand (wie float:right + pb.css width:40%) */
.subcolumns.colcount_2 { grid-template-columns: 50% 9% 40% 1%; }
.subcolumns.colcount_2 > .col_1 { grid-column: 1; }
.subcolumns.colcount_2 > .col_2 { grid-column: 3; }
/* 4 Spalten: 25 % | 1 % | 22 % | 2 % | 22 % | 2 % | 25 % | 1 % (wie YAML-Floats + pb.css 22 %) */
.subcolumns.colcount_4 { grid-template-columns: 25% 1% 22% 2% 22% 2% 25% 1%; }
.subcolumns.colcount_4 > .col_1 { grid-column: 1; }
.subcolumns.colcount_4 > .col_2 { grid-column: 3; }
.subcolumns.colcount_4 > .col_3 { grid-column: 5; }
.subcolumns.colcount_4 > .col_4 { grid-column: 7; }
.subcl, .subc, .subcr { padding: 0; }

/* ---------- 3. Slider im FlexSlider-Look (Code/Bild aus FlexSlider 1.8, MIT-Lizenz, WooThemes) ---------- */
.flex-container { position: relative; zoom: 1; }
.flexslider { width: 100%; margin: 0; padding: 0; background: #fff; border: 4px solid #fff; position: relative;
  border-radius: 5px; box-sizing: content-box; }
.flexslider.swiper { overflow: hidden; }
.flexslider .slides { margin: 0; padding: 0; list-style: none; }
.flexslider .slides > li { margin: 0; padding: 0; }
.flexslider .slides img { max-width: 100%; height: auto; display: block; }
.flex-direction-nav { margin: 0; padding: 0; list-style: none; height: 0; }
.flex-direction-nav li a { width: 52px; height: 52px; margin: -13px 0 0; display: block;
  background: url(img/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer;
  text-indent: -999em; overflow: hidden; z-index: 10; }
.flex-direction-nav li .next { background-position: -52px 0; right: -25px; }
.flex-direction-nav li .prev { left: -17px; }
.flex-direction-nav li .swiper-button-disabled { opacity: .3; cursor: default; }

/* ---------- 4. Schmale Bildschirme (Abweichung vom Original: dort gab es keinen Viewport-Meta) ---------- */
@media (max-width: 899px) {
  #wrapper, #container { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; position: static !important; }
  #left { position: static !important; float: none !important; width: auto !important; margin: 10px !important; z-index: auto !important; }
  #main { float: none !important; width: auto !important; margin: 0 10px !important; }
  #right { float: none !important; display: block !important; width: auto !important; margin: 60px 10px 0 !important; }
  div#links, div#impressum, div#mitte { position: static !important; float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
  #links #impressum p a { float: none !important; margin-top: 0 !important; }
  #type { margin-top: 0 !important; }
  img { max-width: 100% !important; height: auto !important; }
  .ce_gallery, .ce_gallery ul, .ce_gallery li { width: auto !important; }
  .subcolumns { display: block !important; padding: 0 !important; }
  .subcolumns > div { width: auto !important; padding: 0 !important; }
  #wrapper .ce_gallery, #wrapper .ce_gallery ul, #wrapper .ce_gallery li { width: auto !important; } /* pb.css setzt hier 100vw -> Überlauf */
  #introtext { width: auto !important; left: 0 !important; right: 0 !important; overflow-wrap: anywhere; }
  .mod_article *[class*="ce_"], .mod_article *[class*="mod_"] { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; box-sizing: border-box; }
  #introtext { font-size: 22vw !important; line-height: 1.05 !important; padding: 40px 0 0 !important; }
  #impressum_text { font-size: 12vw !important; line-height: 1.05 !important; left: 10px !important; top: 10px !important; }
  .tdc_logo, .logo_a, .logo_b, .logo_c, .logo_d { position: static !important; display: inline-block !important; margin: 10px 10px 0 0 !important; left: auto !important; }
  div#abschluss, div#abschluss_mitte, div#abschluss_rechts { width: auto !important; float: none !important; margin-left: 0 !important; }
  #abschluss_mitte span.bis_bald { margin-right: 0 !important; }
  div#abschluss_rechts span.b_zeichen { font-size: 40vw !important; }
  #lehrauftrag, #diplominfo, #auszeichnungen, div#whois { margin-top: 40px !important; }
  .flex-direction-nav li .prev { left: 0; } .flex-direction-nav li .next { right: 0; }
}