/* =========================================================================
   responsive.css  —  Responsive-Ebene fuer das feste 960er fittkau-Template
   Wird ZULETZT geladen und ueberschreibt gezielt per @media.
   Desktop (>= 980px) bleibt vollstaendig unveraendert.
   ========================================================================= */

/* Hamburger-Button + Fly-out-Overlay: auf Desktop unsichtbar, nur mobil eingeblendet */
.nav-toggle, .nav-overlay { display: none; }

/* Leistungs-/Jahr-Dropdowns nur mobil (Desktop unveraendert) */
.de-leistung-dropdown, .de-jahr-dropdown { display: none; }

@media (max-width: 979px) {

  /* ---- Fluide Basis statt festem 960px-Raster ---- */
  html, body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
  }
  .container_16 {
    width: 100% !important;
    box-sizing: border-box;
  }
  /* Alle Rasterspalten stapeln, volle Breite */
  [class*="grid_"] {
    float: none !important;
    display: block !important;
    width: auto !important;
    left: 0 !important;
  }
  [class*="prefix_"] { padding-left: 0 !important; }
  [class*="suffix_"] { padding-right: 0 !important; }
  [class*="push_"], [class*="pull_"] { left: 0 !important; }

  /* ---- Kopf: aus position:fixed loesen, damit er normal fliesst ---- */
  #topmenu {
    position: relative !important;   /* relative statt static: z-index bleibt wirksam, liegt ueber der Slideshow */
    z-index: 5000 !important;
    height: auto !important;
    padding: 6px 10px !important;
    box-sizing: border-box;
    background: #003056 !important;   /* dunkleres Markenblau fuer die obere Leiste */
    color: #cfe0ee !important;
  }
  #topmenu a, #topmenu a:link, #topmenu a:visited { color: #cfe0ee !important; }
  #topmenu #inner { width: 100% !important; }
  #topmenu #inner ul { float: none !important; display: inline-block; margin-right: 6px; }
  #topmenu #inner ul li { display: inline-block; }

  #top {
    position: relative !important;   /* relative statt static: z-index bleibt wirksam, liegt ueber der Slideshow */
    z-index: 8000 !important;        /* ueber Footer(6000)/Topmenu(5000): Fly-out liegt sonst darunter */
    top: auto !important;
    height: auto !important;
    background-image: none !important;
    background-color: #00416d !important;   /* Markenblau wie Live-Mobil */
    padding: 10px 0 14px !important;        /* mehr Luft nach unten zum Bild */
  }
  #top #innertop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;                    /* Logo, Burger + Unterzeile vertikal mittig ausbalanciert */
    min-height: 78px;
  }

  /* ---- Logo (ca. 25% groesser) ---- */
  #top a#home {
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    width: 250px !important;
    height: 72px !important;
    margin: 0 10px !important;
    flex: 1 1 auto;
    /* PNG hat 35px Weissraum oben, 2px unten -> sichtbares Logo sitzt tief.
       ~13px anheben, damit es optisch mit dem Burger auf einer Mitte liegt. */
    transform: translateY(-13px);
  }

  /* ---- Foto-Tooltip (Kamerasymbol oben rechts) mobil ausblenden ---- */
  #tooltipp, .grid_1.prefix_15 { display: none !important; }

  /* ---- Navigation: Burger rechts neben Logo + Fly-out von rechts ---- */
  #navigation {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;               /* gegen [class*="grid_"] { left:0 } */
    height: 100vh !important;
    height: 100dvh !important;           /* echte Sichthoehe auf Mobil */
    width: 82% !important;               /* gegen [class*="grid_"] { width:auto } */
    max-width: 320px !important;
    margin: 0 !important;
    padding: 46px 0 24px !important;     /* Luft oben, erster Punkt frei */
    background: #00416d !important;      /* Markenblau */
    transform: translateX(100%) !important;   /* geschlossen: rechts ausserhalb */
    transition: transform 0.28s ease;
    z-index: 7000 !important;            /* im 8000-Kontext von #top: ueber Overlay */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -4px 0 18px rgba(0,0,0,0.35);
  }
  #navigation.open { transform: translateX(0) !important; }   /* aufgeklappt: eingeschoben */

  /* Overlay hinter dem Fly-out (Klick schliesst) */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 6900;
  }
  .nav-overlay.open { display: block; }

  /* Burger rechts neben dem Logo, "Menue" klein darunter */
  .nav-toggle {
    display: flex;
    flex-direction: column;             /* Icon oben, Label darunter */
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto;
    margin-left: auto;                  /* schiebt den Button an den rechten Rand */
    margin-right: 6px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 4px 8px;
    cursor: pointer;
    flex: 0 0 auto;
    order: 2;
    position: relative;
    z-index: 10;                        /* unter Fly-out(7000) + Overlay(6900): Panel deckt Burger zu */
  }
  .nav-toggle:hover .nav-toggle-icon span { background: #cfe0ee; }
  .nav-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    flex: 0 0 auto;
  }
  .nav-toggle-icon span {
    display: block;
    height: 3px;
    width: 100%;
    background: #ffffff;
    border-radius: 1px;
  }
  .nav-toggle-label {
    font: italic 11px/1 Arial, sans-serif;   /* kleine Schrift "Menue" */
    letter-spacing: 0.03em;
    color: #ffffff;
  }

  /* Fly-out steuert Sichtbarkeit ueber #navigation-Transform; Liste selbst immer da */
  #navigation ul.menumain { display: block; }

  ul.menumain {
    position: static !important;
    width: 100% !important;
    background: transparent;             /* Panel ist blau */
    margin: 0 !important;
    padding: 0 !important;
  }
  ul.menumain > li,
  ul.menumain li {
    float: none !important;
    width: 100% !important;
    position: static !important;
    height: auto !important;             /* feste 110px-Desktop-Hoehe loesen (sonst Ueberlappung) */
    min-height: 0 !important;
    line-height: normal !important;
    border: 0 !important;                /* keine Linien auf jedem li (sonst doppelt) */
  }
  /* Nur EINE Trennlinie je Hauptpunkt-Gruppe (nicht zusaetzlich unter jedem Unterpunkt) */
  ul.menumain > li { border-bottom: 1px solid rgba(255,255,255,0.15) !important; }
  ul.menumain a {
    display: block !important;
    padding: 7px 18px !important;        /* Hauptpunkt (ohne Subline) */
    height: auto !important;
    line-height: 1.15 !important;
    background: none !important;
    width: auto !important;
    color: #ffffff !important;
  }
  /* Erklaertext unter dem Menuepunkt entfernt -> mehr Platz */
  ul.menumain a span.subtitle { display: none !important; }
  /* Untermenues sichtbar inline (superfish setzt sie sonst visibility:hidden / -999em) */
  ul.menumain li ul {
    position: static !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;      /* gegen superfish visibility:hidden */
    background: rgba(0,0,0,0.15);
  }
  ul.menumain li ul li,
  ul.menumain li ul li a { visibility: visible !important; }
  ul.menumain li ul li a { padding: 5px 18px 5px 34px !important; font-size: 13px; color: #dfeaf3 !important; }
  /* superfish-Pfeile ausblenden */
  .menumain .sf-sub-indicator { display: none !important; }

  /* Hover-/Tap-Effekt fuer ALLE Punkte. Hohe Spezifitaet (#top #navigation) noetig,
     weil screen.css den ersten/letzten Punkt (.clearbackgroundfirst/last) per Zwei-ID-Regel
     mit background:none !important blockiert. */
  #top #navigation ul.menumain a:hover,
  #top #navigation ul.menumain a:focus,
  #top #navigation ul.menumain a:active,
  #top #navigation ul.menumain li.clearbackgroundfirst a:hover,
  #top #navigation ul.menumain li.clearbackgroundfirst a:focus,
  #top #navigation ul.menumain li.clearbackgroundfirst a:active,
  #top #navigation ul.menumain li.clearbackgroundlast a:hover,
  #top #navigation ul.menumain li.clearbackgroundlast a:focus,
  #top #navigation ul.menumain li.clearbackgroundlast a:active {
    background: rgba(255,255,255,0.14) !important;
  }

  /* Hauptpunkte als klickbare Seite kennzeichnen: Chevron rechts + Unterstreichung bei Hover */
  ul.menumain > li > a {
    position: relative;
    padding-right: 40px !important;      /* Platz fuer den Chevron */
  }
  ul.menumain > li > a::after {
    content: "\203A";                    /* › : signalisiert "fuehrt zu einer Seite" */
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 20px;
    line-height: 1;
  }
  #top #navigation ul.menumain > li > a:hover { text-decoration: underline !important; }

  /* ---- Hauptbereich: reservierten Footer-Platz zuruecknehmen ---- */
  #main {
    padding-bottom: 24px !important;
  }
  /* Header fliesst auf Mobil -> die 204px Desktop-Freiraum (fixer Header) + JS-+85px
     zuruecknehmen. !important schlaegt auch das per JS gesetzte Inline-padding. */
  #content { padding-top: 20px !important; }            /* Ueberschrift zwischen Header und Inhalt vermitteln */
  #inner-content { padding-top: 30px !important; }      /* Meldung -> Adressblock: ~40px */

  /* Referenzseiten mit Dropdowns: "Projekte JJJJ" + Dropdowns als kompakter, ausgewogener Block.
     oberhalb ~gleich wie unterhalb, Ueberschrift naeher an den Dropdowns. */
  #content.de-refpage { padding-top: 32px !important; }                          /* oberhalb Projekte: +20 */
  #content.de-refpage .componentheading { padding-bottom: 0 !important; margin-bottom: 25px !important; }  /* unterhalb Projekte: -20 (naeher an Dropdowns) */
  #content.de-refpage .de-ref-filter { margin-top: 0 !important; margin-bottom: 30px !important; }         /* unterhalb Dropdowns: 30 */

  /* Metallgestaltung-Leistungsliste als Dropdown (mobil) statt Sidebar-Liste */
  .de-leistung-dropdown {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0 18px;
    padding: 8px 28px 8px 11px;
    font-size: 13px;
    line-height: 1.2;
    color: #ffffff;
    background-color: #00416d;   /* Markenblau */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='white'%20stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    border: 1px solid #00416d;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Original-Metallgestaltung-Modul mobil ausblenden (durch Dropdown ersetzt) */
  #inner-content .moduletable.rightfirst_related { display: none !important; }

  /* Referenzen: Jahr- und Leistung-Dropdown strikt nebeneinander (mobil) */
  .de-ref-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    margin: 8px 0 18px;
  }
  .de-ref-filter .de-leistung-dropdown { margin: 0; flex: 1 1 0; min-width: 0; }
  .de-jahr-dropdown {
    display: block !important;   /* selectToUISlider hatte das Original inline versteckt */
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 28px 8px 11px;
    font-size: 13px;
    line-height: 1.2;
    color: #ffffff;
    background-color: #00416d;   /* Markenblau */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='white'%20stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    border: 1px solid #00416d;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
  }

  /* ---- Zitat ---- */
  div.cite {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 24px !important;
    margin: 30px 10px 0 !important;
    padding: 8px 10px 24px 56px !important;
  }
  div.cite p.author { position: static; display: block; text-align: right; margin-top: 8px; }

  /* ---- Footer: Sticky loesen, Teaser stapeln ---- */
  #sticky-footer {
    position: relative !important;   /* relative statt static: z-index bleibt wirksam, liegt ueber der Slideshow */
    z-index: 6000 !important;
    margin-top: 0 !important;
    height: auto !important;
  }
  #sticky-footer #footer #footer-middle .fm-newsflash-footer-section .fm-newsmod-wrap-block {
    display: block !important;
  }
  #sticky-footer #footer #footer-middle .fm-newsflash-footer-section .fm-newsmod-wrap-block .fm-newsmod-wrap {
    width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 14px;
  }
  #sticky-footer #footer #footer-middle .fm-newsflash-footer-section .fm-newsmod-wrap-block .fm-newsmod-wrap a.fm-newsmod-intro-img-link {
    background-size: cover !important;
    height: 170px !important;
  }
  .fm-newsmodul-titel { white-space: nowrap !important; overflow: hidden !important; }
  /* Blaue Fuss-Adressleiste: randlos bis zum Displayrand, Text bleibt im Blau,
     waechst bei 2 Zeilen mit (Hoehe auto). Schriftgroesse bleibt unveraendert. */
  #sticky-footer .grid_16 { margin-left: 0 !important; margin-right: 0 !important; }
  #footerbottom_right, #footerbottom_left {
    text-align: center;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;            /* statt fester 18px -> waechst mit dem Text */
    min-height: 18px;
    padding: 8px 16px !important;       /* Innenabstand, Text nicht abgeschnitten */
    background-repeat: repeat !important; /* Blau fuellt die volle, ggf. hoehere Flaeche */
    overflow: visible !important;
  }
}

/* Sehr schmale Geraete: Schrift/Abstaende etwas kleiner */
@media (max-width: 480px) {
  div.cite { font-size: 20px !important; padding-left: 48px !important; }
  #top a#home { width: 206px !important; height: 60px !important; }
}

/* ---- Nachtrag: fluide Bilder + Referenzen-Jahresseiten (Slider/Galerie) ---- */
@media (max-width: 979px) {
  /* Bilder nie breiter als der Container */
  #main img, #content img, #mainbody img, .articledefault img,
  .moduletable img, .items-row img, table img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  /* Bild+Text: gefloatete Inhaltsbilder mobil nicht floaten -> Text beginnt UNTER dem Bild
     (statt gequetscht daneben). Gilt fuer Fliesstext-Bilder in Content/Artikel. */
  #content img, #inner-content img, .articledefault img, .item img,
  #content h3 img, #content p img {
    float: none !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }
  /* Jahres-Slider (mod_quickjump) mobil komplett aus -> ersetzt durch Jahr-Dropdown */
  .moduletable.slider { display: none !important; }
  .ui-slider, .ui-slider-labels, .ui-slider-tooltip, .ui-slider-handle { display: none !important; }
  /* Projektzeilen (Bild links / Text rechts) stapeln */
  .items-row, .item, .leading-0, [class*="leading-"], [class*="column-"] {
    display: block !important;
    width: auto !important;
    float: none !important;
  }
  .items-row .left, .items-row .right, .item .left, .item .right {
    float: none !important;
    width: auto !important;
  }
}

/* ---- Nachtrag 2: Projekt-Spalten (.left/.right) mobil fluide ---- */
@media (max-width: 979px) {
  #main .left, #main .right, #content .left, #content .right,
  .leftfull, div.left, div.right {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}

/* ---- Nachtrag 3: iframes fluide, lange Links umbrechen ---- */
@media (max-width: 979px) {
  #main iframe, #content iframe, .articledefault iframe, .item iframe {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #main, #content, .articledefault, .item, #main p, #main li, #main a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ---- Nachtrag 4: <video> fluide, .intro-Spalte stapeln ---- */
@media (max-width: 979px) {
  #main video, #content video, .articledefault video, video {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  #main .intro, #content .intro, .intro {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}

/* ---- Nachtrag 5: Startseite mobil — Hero seitenfuellend, Zitat mittig, News hoch ---- */
@media (max-width: 979px) {

  /* Hintergrundgalerie (Vegas-<img>) seitenfuellend statt schmaler Streifen */
  .vegas-background {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    object-fit: cover !important;   /* Bild deckt Flaeche, ohne Verzerrung */
  }

  /* Sticky-Footer-Stretch der Startseite loesen — sonst riesige Luecke bis zum News-Block.
     body > #mainwrapper { min-height:100% } zieht den Footer sonst an den Viewport-Boden. */
  .startseite #mainwrapper {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Zitat mittig zwischen Header und News; Abstand oben und unten je ~8 cm.
     Beide Werte sind der Justier-Hebel: groesser = mehr Abstand. */
  .startseite .cite {
    margin-top: 40px !important;   /* Header -> Zitat: Zitat weit oben */
  }
  .startseite #main {
    padding-bottom: 120px !important;   /* Zitat -> News-Block: News noch im ersten Screen */
  }
}

/* ---- Nachtrag 6: Colorbox-Lightbox (Referenz-Fotos) — Bildunterschrift vollstaendig ---- */
@media (max-width: 979px) {
  #cboxContent { background: #fff !important; }
  /* Platz unter dem Bild fuer mehrzeiligen Titel + Button-Reihe reservieren */
  #cboxLoadedContent { margin-bottom: 92px !important; }
  /* Fotografen-/Titeltext: komplett auf Weiss unter dem Bild, UEBER den Buttons, umbrechend */
  #cboxTitle {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 32px !important;            /* liegt ueber der 25px-Button-Reihe */
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 4px 6px !important;
    background: #fff !important;
    color: #000 !important;
    font: bold 13px/1.3 Arial, sans-serif !important;
    white-space: normal !important;
    text-align: center !important;
    overflow: visible !important;
  }
  /* Vor/Zurueck/Schliessen unten fixiert -> Text kreuzt sie nicht */
  #cboxPrevious, #cboxNext, #cboxClose { bottom: 2px !important; }
}

/* ---- Nachtrag 7: Job-Detailseite mobil komplett einspaltig ---- */
@media (max-width: 979px) {
  /* Header: Banner-Bild oben (im :before), darunter blaue Flaeche mit Titel + Intro */
  .articledefault.job .header {
    background: #00416d !important;
  }
  .articledefault.job .header:before {
    background-image: url(../images/fittkau_stellen_header.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding-top: 52% !important;         /* Banner-Hoehe */
  }
  .articledefault.job .header .job,
  .articledefault.job .header .intro {
    position: static !important;         /* raus aus dem Off-Screen-Absolut-Layout */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
  }
  .articledefault.job .header .job {
    font-size: 22px !important;
    line-height: 1.2 !important;
    padding: 14px 16px 6px !important;
  }
  .articledefault.job .header .intro {
    padding: 0 16px 16px !important;
  }
  .articledefault.job .header .intro p { padding: 0 !important; }

  /* Inhalt: eingerueckte Bloecke (215px Desktop-Rand) auf volle Breite */
  .articledefault.job .content { padding: 16px !important; }
  .articledefault.job .content .company,
  .articledefault.job .content .abschluss {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Zweispaltige Boxen (Aufgaben | Wir bieten) untereinander stapeln */
  .articledefault.job .content .boxes { display: block !important; }
  .articledefault.job .content .boxes .lbox,
  .articledefault.job .content .boxes .rbox {
    margin: 0 0 14px 0 !important;
    box-sizing: border-box;
  }
}