/* ============================================================================
   Mobile-Overrides für Kaffeehaus Gräfe (Con-Kit Framework)
   Version 3 — gezielte Selectors für die echten Layout-Container
   ============================================================================ */

/* Globale Sicherheitsnetze */
html { scroll-behavior: smooth; }
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
img, video, iframe, picture { max-width: 100%; height: auto; }
/* Marquee-Bilder dürfen NICHT auf max-width: 100% gequetscht werden —
   sie brauchen ihre natürliche Breite (auto bei fixierter height von 308px).
   Gilt sowohl für Desktop als auch für Mobile. */
.con-kit-component-marquee .con-kit-component-image[data-type="autoheight"] .con-kit-fade-box,
.con-kit-component-marquee .con-kit-component-image[data-type="autoheight"] img {
  max-width: none !important;
  width: auto !important;
}

/* Anchor-Scroll Offset für Sticky-Header */
[id="stellen"], [id="ausbildungen"] { scroll-margin-top: 80px; }

/* ============================================================================
   Megamenu Glitch-Fix: Default-Position off-screen statt (0,0)

   Con-Kit setzt Megamenü-Positionen via Inline-Style (top/left).
   Beim Deaktivieren entfernt React den Inline-Style → CSS-Fallback
   .con-kit-megamenu--absolute { top: 0px; left: 0px } greift.
   Da die opacity-Transition 300ms dauert, ist das Menü kurz bei (0,0)
   sichtbar → Glitch oben links.

   Fix: CSS-Default auf off-screen setzen. Inline-Styles von React
   (position: absolute; top: 86px; left: 427px) überschreiben das immer,
   da Inline > externe CSS (ohne !important).
   ============================================================================ */
.con-kit-megamenu--absolute {
  top: -200vh;
  left: -200vw;
}

/* ============================================================================
   Hero-Cover-Padding: Mapping --section-padding-top → --layout-padding-top
   Con-Kit setzt das nur, wenn die Cover-Section die Klasse
   .con-kit-section--has-prev-header-overlay hat. Die wird nur auf der
   Homepage generiert. Auf allen Unterseiten fehlt sie → ohne diese Regel
   landet das vom Builder gesetzte --section-padding-top: 230px im Nichts
   und der Hero-Inhalt klebt am Section-Top hinter dem Overlay-Header.
   ============================================================================ */
.con-kit-section--type-header + .con-kit-section .con-kit-frame,
.con-kit-section.cover .con-kit-frame {
  --layout-padding-top: max(var(--tlm-cover-min-padding-top, 0px), var(--section-padding-top)) !important;
  --layout-padding-bottom: var(--section-padding-bottom) !important;
}

/* Funktionales Positions-Dropdown im OnePage-Stil */
.tlm-position-dropdown {
  position: relative;
  width: 100%;
}
.tlm-position-dropdown .con-kit-component-dropdown__control {
  cursor: pointer;
}
.tlm-position-dropdown.tlm-position-open .con-kit-component-dropdown__control {
  border-color: rgba(var(--color-border, 214,173,71), var(--alpha-border, 1)) !important;
}
.tlm-position-dropdown .con-kit-component-dropdown__single-value {
  color: rgb(var(--color-text, 17,17,17));
  line-height: 1.35;
}
.tlm-position-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 100001;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(var(--color-border, 214,173,71), 0.55);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
}
.tlm-position-option {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  color: #111;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.tlm-position-option:hover,
.tlm-position-option:focus {
  background: #F4F4EA;
  outline: none;
}
.tlm-position-option.tlm-position-selected {
  color: #003320;
  font-weight: 600;
}
.tlm-position-native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================================
   ≤768px — Tablet & Phone (das Kerngeschäft)
   ============================================================================ */
@media (max-width: 768px) {

  /* Highlight-Underline-SVGs: mobil an die echte Textbreite koppeln */
  .highlight-container,
  [class*="highlight-effect-hand-underlined"],
  .highlight-effect-brush-underline {
    display: none !important;
  }
  span[data-highlight-id],
  .con-kit-quark-highlight[data-highlight-id] {
    display: inline-block !important;
    position: relative !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
  }
  span[data-highlight-id] > svg,
  .con-kit-quark-highlight[data-highlight-id] > svg {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: -0.18em !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 0.22em !important;
    transform: none !important;
  }
  span[data-highlight-id] > svg path,
  .con-kit-quark-highlight[data-highlight-id] > svg path {
    stroke: rgb(var(--color-border, 214,173,71)) !important;
    fill: none !important;
  }
  span[data-highlight-type="brush-underline"] > svg,
  .con-kit-quark-highlight[data-highlight-type="brush-underline"] > svg {
    bottom: -0.1em !important;
    height: 0.16em !important;
  }
  span[data-highlight-type="brush-underline"] > svg path,
  .con-kit-quark-highlight[data-highlight-type="brush-underline"] > svg path {
    fill: rgb(var(--color-border, 214,173,71)) !important;
    stroke: none !important;
  }

  /* === HEADER / NAVIGATION === */
  /* Original Desktop-Nav komplett ausblenden — wir zeigen den eigenen Hamburger */
  .con-kit-atom-menu-v2--in-header,
  .con-kit-section--type-header .con-kit-atom-menu-v2[data-kit-direction~="horizontal"] {
    display: none !important;
  }
  /* Megamenu-Dropdowns auch */
  .con-kit-megamenu.con-kit-megamenu--location-item,
  .con-kit-megamenu--absolute,
  .con-kit-megamenu-prerender {
    display: none !important;
  }

  /* === MARQUEE → vollbreites Bild-Slide-Karussell (Mobile) === */

  /* 1. Breche aus dem Container aus: Marquee soll Viewport-breit sein,
        nicht auf die ~345px des padded Containers beschränkt. */
  .con-kit-component-marquee {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Volle Viewport-Breite, auch wenn Container Padding hat */
    width: 100vw !important;
    max-width: 100vw !important;
    /* Negatives Margin hebt das Container-Padding auf */
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    /* Scroll-Snap: jedes Bild rastet ein */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .con-kit-component-marquee::-webkit-scrollbar { display: none !important; }

  /* 2. Original-Animation abschalten – JS übernimmt das Auto-Advance */
  .con-kit-component-marquee__content {
    animation: none !important;
    transform: none !important;
  }

  /* 3. __repeat aus position:absolute holen damit Items scrollbar sind */
  .con-kit-component-marquee .con-kit-component-marquee__repeat {
    position: static !important;
    transform: none !important;
  }

  /* 4. Jedes Item = genau 1 Viewport-Breite → snap point */
  .con-kit-component-marquee-gallery-item {
    width: 100vw !important;
    max-width: 100vw !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
  }

  /* 5. Bild füllt Item-Breite aus */
  .con-kit-component-marquee .con-kit-component-image[data-type="autoheight"] {
    width: 100% !important;
  }
  .con-kit-component-marquee .con-kit-component-image[data-type="autoheight"] .con-kit-fade-box,
  .con-kit-component-marquee .con-kit-component-image[data-type="autoheight"] img {
    width: 100% !important;
    height: 220px !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }

  /* Edge-Fade auf Mobile abschalten */
  .con-kit-component-marquee--fade-edge {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* === KRITISCH: Grid-List-Items auf 100% Breite === */
  /* Das ist der echte Container der 3-Spalten-Layouts (Bullet-Points, Cards, Testimonials, Form-Felder) */
  .con-kit-component-grid-list[class*="--columns-"] {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    --one-kit-component-grid-list-horizontal-space: 0px !important;
  }
  .con-kit-component-grid-list[class*="--columns-"] .con-kit-component-grid-list-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  /* === Typografie: Inline-Styles brauchen !important === */
  h1, [class*="con-kit"] h1, .con-kit-quark-paragraph h1 {
    font-size: clamp(28px, 6.5vw, 44px) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
  }
  h2, [class*="con-kit"] h2 {
    font-size: clamp(22px, 5vw, 34px) !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
  }
  h3, [class*="con-kit"] h3 {
    font-size: clamp(18px, 4vw, 24px) !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  /* Paragraph-Texte normal brechen */
  .con-kit-quark, .con-kit-quark-paragraph, p, span, .con-kit-component-text {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
  }

  /* === Section-Padding reduzieren === */
  [data-kit-organism-padding] {
    --section-padding-top: 40px !important;
    --section-padding-bottom: 40px !important;
    --section-padding-left: 16px !important;
    --section-padding-right: 16px !important;
  }
  .con-kit-section > .con-kit-layer > .con-kit-organism-background1 {
    --section-padding-top: 40px !important;
    --section-padding-bottom: 40px !important;
  }
  /* Header: kompakt → Logo oben links auf gleicher Höhe wie Hamburger */
  .con-kit-section--type-header > .con-kit-layer > .con-kit-organism-background1,
  .con-kit-section.header > .con-kit-layer > .con-kit-organism-background1,
  .con-kit-section--type-header [data-kit-organism-padding],
  .con-kit-section.header [data-kit-organism-padding] {
    --section-padding-top: 18px !important;
    --section-padding-bottom: 18px !important;
  }
  /* Hero/Cover: garantiertes Mindest-Padding, damit H1 nicht hinter Overlay-Header rutscht.
     --tlm-cover-min-padding-top wird im obigen Mapping mit max() gegen den
     Builder-Wert kombiniert → Builder-Werte (z.B. 230px) werden nie reduziert. */
  .con-kit-section--type-header + .con-kit-section,
  .con-kit-section.cover {
    --tlm-cover-min-padding-top: 170px;
  }

  /* === Container voll === */
  .con-kit-container,
  .con-kit-row,
  .con-kit-rows,
  .con-kit-row__container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === Buttons: fingerfreundlich === */
  .con-kit-component-button {
    min-height: 44px !important;
    --one-kit-padding-vertical: 12px !important;
    --one-kit-padding-horizontal: 20px !important;
    --button-size: 15px !important;
    --one-kit-height: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
  .con-kit-component-button__text {
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* === Form-Inputs: 16px verhindert iOS-Auto-Zoom === */
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  textarea, select {
    font-size: 16px !important;
    min-height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
  }
  textarea { min-height: 100px !important; }

  .tlm-position-native {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
  }

  /* === Cookie-Banner mobiler === */
  #tlm-cookie-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 16px !important;
  }
  #tlm-cookie-banner h3 { font-size: 14px !important; }
  #tlm-cookie-banner p  { font-size: 12.5px !important; }
  #tlm-cookie-banner .tlm-cb-btns { gap: 6px !important; }
  #tlm-cookie-banner button {
    flex: 1 !important;
    padding: 10px !important;
    font-size: 13px !important;
    min-height: 40px !important;
  }
}

/* ============================================================================
   HAMBURGER + OVERLAY-MENÜ (nur auf Mobile sichtbar)
   ============================================================================ */
#tlm-burger { display: none; }
#tlm-mobile-menu { display: none; }

@media (max-width: 768px) {
  /* Hamburger-Button: oben rechts, fixed — gleiche Höhe wie das Logo links */
  #tlm-burger {
    display: flex !important;
    position: fixed;
    top: 23px;
    right: 16px;
    z-index: 100000;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: background 0.15s;
  }
  #tlm-burger:hover, #tlm-burger:active { background: #fff; }
  #tlm-burger span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: #003320;
    border-radius: 2px;
    transition: transform 0.2s;
  }

  /* Overlay-Menü: Vollbild von rechts einschiebend */
  #tlm-mobile-menu {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999;
    background: #fff;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
  }
  #tlm-mobile-menu.tlm-mm-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  .tlm-mm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0e9d9;
    flex-shrink: 0;
  }
  .tlm-mm-logo {
    display: flex;
    align-items: center;
  }
  .tlm-mm-logo a {
    pointer-events: auto;
    cursor: pointer;
  }
  /* Logo-Größe im Menü begrenzen */
  .tlm-mm-logo .con-kit-component-logo,
  .tlm-mm-logo > * {
    --component-logo__size: 56px !important;
    max-height: 64px;
    max-width: 140px;
  }
  .tlm-mm-close {
    background: none;
    border: none;
    width: 44px;
    height: 44px;
    font-size: 32px;
    line-height: 1;
    color: #003320;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
  }
  .tlm-mm-close:hover { background: #f4f4ea; }

  .tlm-mm-nav {
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    flex: 1;
    gap: 0;
  }
  .tlm-mm-nav a,
  .tlm-mm-toggle {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 18px 0 !important;
    color: #111111 !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f4f4ea !important;
    transition: color 0.15s;
    width: 100%;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    cursor: pointer;
    text-align: left;
  }
  .tlm-mm-nav a:last-child,
  .tlm-mm-group:last-child > a,
  .tlm-mm-group:last-child > .tlm-mm-toggle { border-bottom: none !important; }
  .tlm-mm-nav a:hover,
  .tlm-mm-nav a:active,
  .tlm-mm-toggle:hover,
  .tlm-mm-toggle:active { color: #D6AD47 !important; }
  .tlm-mm-arrow {
    color: #D6AD47;
    font-size: 22px;
    font-weight: 400;
    margin-left: 12px;
    transition: transform 0.2s ease;
  }
  .tlm-mm-group.tlm-mm-expanded .tlm-mm-arrow {
    transform: rotate(90deg);
  }
  .tlm-mm-subnav {
    display: none;
    padding: 0 0 8px 14px;
    border-bottom: 1px solid #f4f4ea;
  }
  .tlm-mm-group.tlm-mm-expanded .tlm-mm-subnav {
    display: block;
  }
  .tlm-mm-subnav a {
    padding: 12px 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
    border-bottom: 0 !important;
  }

  /* Logo im Header: harte Höhe damit es exakt mit Hamburger fluchtet (beide 48px) */
  .con-kit-section--type-header .con-kit-component-logo {
    --component-logo__size: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    align-items: center !important;
  }
  .con-kit-section--type-header .con-kit-component-logo .con-kit-fade-box {
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
  }
  .con-kit-section--type-header .con-kit-component-logo img,
  .con-kit-section--type-header .con-kit-component-logo .con-kit-component-logo__image {
    height: 48px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }
  /* Spacer im Logo-Atom hat sonst Höhe → Logo wird größer; auf Mobile ausblenden */
  .con-kit-section--type-header [data-atom="logo"] .con-kit-component-spacer {
    display: none !important;
  }
}

/* Desktop (≥769px): KEIN Override für die Marquee — Original-Con-Kit-Animation
   im inline <style> aus marquee.css übernimmt (animation: marquee 0%→-100%,
   __repeat: position: absolute mit translateX(N*100%)). Das funktioniert
   pixelgenau, weil 100% genau einer Galerie-Breite entspricht. */

/* ============================================================================
   ≤480px — Phones (zusätzliche Verfeinerung)
   ============================================================================ */
@media (max-width: 480px) {
  h1, [class*="con-kit"] h1 {
    font-size: 28px !important;
  }
  h2, [class*="con-kit"] h2 {
    font-size: 22px !important;
  }

  [data-kit-organism-padding] {
    --section-padding-top: 28px !important;
    --section-padding-bottom: 28px !important;
    --section-padding-left: 12px !important;
    --section-padding-right: 12px !important;
  }

  /* Header bleibt kompakt */
  .con-kit-section--type-header > .con-kit-layer > .con-kit-organism-background1,
  .con-kit-section--type-header [data-kit-organism-padding] {
    --section-padding-top: 16px !important;
    --section-padding-bottom: 16px !important;
  }
  /* Auf sehr kleinen Phones leicht weniger Mindestpadding (Builder-Werte
     bleiben durch max() im Mapping unangetastet, falls sie höher sind). */
  .con-kit-section--type-header + .con-kit-section,
  .con-kit-section.cover {
    --tlm-cover-min-padding-top: 150px;
  }
}