/* ================================
   FRAGMENTS (single source, variable-driven)
   Section: #fragmente
   ================================ */

/* =======================================
   DESKTOP · Default-Variablen (≥1025px)
   ======================================= */
:root{
  /* Container / Section */
  --frag-section-pad-bottom: 100px;  /* Abstand Fragmente → nächste Section */
  --frag-headline-top:       100px;  /* Abstand Buttons → Fragmente-Headline (h2) */

  /* Text → Hero */
  --frag-gap-text-hero:      50px;   /* Intro/Fließtext → Hero (Desktop) */

  /* Hero (Desktop) */
  --frag-hero-max:           1000px; /* Breite */
  --frag-hero-h:             620px;  /* Höhe */
  --frag-hero-focus-y:       50%;    /* 50% = Mitte */

  /* Caption-Abstände */
  --frag-hero-cap-gap:       20px;   /* Hero → Caption */
  --frag-cap-grid-gap:       50px;   /* Caption → Grid */

  /* Grid (Desktop) */
  --frag-grid-col-w:         383px;  /* Kachelbreite */
  --frag-grid-col-gap:       55px;   /* Spaltenabstand */
  --frag-grid-row-gap:       70px;   /* Zeilenabstand */

  /* Hover-Balken */
  --frag-hover-h:            30px;   /* Desktop */
  --frag-hover-h-mobile:     30px;   /* Mobile */

  /* Sonstiges */
  --frag-radius:             8px;
  --frag-mobile-hero-height: clamp(340px, 70vw, 520px); /* nur Mobile */
}

/* =======================================
   TABLET · Variablen-Overrides (642–1024px)
   ======================================= */
@media (min-width:642px) and (max-width:1024px){
  :root{
    --frag-section-pad-bottom: 70px;
    --frag-headline-top:       100px;
    --frag-gap-text-hero:       70px;

    --frag-hero-max:           1020px;
    --frag-hero-h:              380px;
    --frag-hero-focus-y:        14%;

    --frag-grid-col-gap:        30px;
    --frag-grid-row-gap:        70px;
  }
}

/* =======================================
   MOBILE · Variablen-Overrides (≤640px)
   ======================================= */
@media (max-width:640px){
  :root{
    --frag-section-pad-bottom: 50px;
    --frag-headline-top:        50px;
    --frag-gap-text-hero:       50px;

    --frag-hero-max:          min(90vw, 480px);
    --frag-hero-focus-y:        18%;
    --frag-grid-row-gap:        40px;
  }
}

/* =======================================
   SECTION · Basis & Abstand nach unten
   ======================================= */
#fragmente{
  margin: 0 auto;
  padding: 0;
  padding-bottom: var(--frag-section-pad-bottom);
  box-sizing: border-box;
}

/* historische Kappen neutralisieren (falls vorhanden) */
#fragmente.portfolio-info{
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* =======================================
   TEXTBLOCK (Überschrift + Intro)
   ======================================= */
@media (min-width:642px){
  #fragmente > h2,
  #fragmente > p{
    width: 90vw;
    max-width: var(--frag-hero-max);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Abstand Buttons → Headline */
#fragmente h2{ margin-top: var(--frag-headline-top); }

/* =======================================
   HERO
   ======================================= */
#fragmente .frag-hero{
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--frag-hero-max);
  margin: var(--frag-gap-text-hero) auto 0;
}
#fragmente .frag-hero .teaserbox{
  position: relative;
  width: 100%;
  height: var(--frag-hero-h);
  border-radius: var(--frag-radius);
  overflow: hidden;
}
#fragmente .frag-hero .teaserbox > img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% var(--frag-hero-focus-y);
  display: block;
  border-radius: var(--frag-radius);
}
/* Caption unter Hero (steuert Hero→Caption und Caption→Grid) */
#fragmente .frag-hero .teaser-caption{
  display: block;
  margin: var(--frag-hero-cap-gap) 0 var(--frag-cap-grid-gap) 0;
  text-align: left;
}

/* =======================================
   MOBILE · Container + Hero
   ======================================= */
@media (max-width:640px){
  #fragmente{
    width: 90vw;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
  }

  #fragmente > h2,
  #fragmente > p{
    width: 100%;
    max-width: var(--frag-hero-max);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  /* Hero folgt Container */
  #fragmente .frag-hero{
    width: 100%;
    margin: var(--frag-gap-text-hero) auto 0;
  }
  #fragmente .frag-hero .teaserbox{
    height: var(--frag-mobile-hero-height);
  }
}

/* =======================================
   GRID + CARDS
   ======================================= */
#fragmente .teaser-grid.frag-grid{
  display: grid;
  grid-template-columns: repeat(2, var(--frag-grid-col-w));
  column-gap: var(--frag-grid-col-gap);
  row-gap: var(--frag-grid-row-gap);
  width: calc(2 * var(--frag-grid-col-w) + var(--frag-grid-col-gap));
  margin: 0 auto;
  padding: 0;
  justify-items: center;
  align-items: start;
}
#fragmente .teaser-grid.frag-grid > .teaser-item,
#fragmente .teaser-grid.frag-grid .teaserbox{
  width: var(--frag-grid-col-w);
}
#fragmente .teaser-grid.frag-grid .teaserbox{
  height: var(--frag-box-h);
  border-radius: var(--frag-radius);
  overflow: hidden;
  position: relative;
  background: #f3f3f3;
}
#fragmente .teaser-grid.frag-grid .teaserbox > img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--frag-radius);
}
#fragmente .teaser-grid.frag-grid .teaser-caption{
  display: block;
  margin-top: 20px;
  text-align: left;
}

/* =======================================
   TABLET · Kanonischer Block (642–1024px)
   ======================================= */
@media (min-width:642px) and (max-width:1024px){
  #fragmente,
  #fragmente > h2,
  #fragmente > p,
  #fragmente .frag-hero,
  #fragmente .teaser-grid.frag-grid{
    width: 90vw !important;
    max-width: var(--frag-hero-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  #fragmente .teaser-grid.frag-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: var(--frag-grid-col-gap) !important;
    row-gap: var(--frag-grid-row-gap) !important;
    justify-items: stretch !important;
  }

  #fragmente .teaser-grid.frag-grid .teaser-item{ width: 100% !important; }
  #fragmente .teaser-grid.frag-grid .teaserbox{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: var(--frag-radius) !important;
    overflow: hidden !important;
    position: relative !important;
  }
  #fragmente .teaser-grid.frag-grid .teaserbox > img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--frag-radius) !important;
  }

  /* Hover-Balken: flacher & einzeilig auf Tablet */
  #fragmente .teaserbox .teaserbox-hover{
    height: 36px !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
  }
}

/* =======================================
   MOBILE · Grid
   ======================================= */
@media (max-width:640px){
  #fragmente .teaser-grid.frag-grid{
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0 auto;
    row-gap: var(--frag-grid-row-gap);
    justify-items: center;
  }
  #fragmente .teaser-grid.frag-grid .teaser-item{ width: 100%; }
  #fragmente .teaser-grid.frag-grid .teaserbox{
    width: 100%;
    height: auto;
    aspect-ratio: 322 / 294;
  }
}

/* =======================================
   HOVER-LAYER (Default Desktop)
   ======================================= */
#fragmente .teaserbox .teaserbox-hover{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--frag-hover-h);
  padding: 6px 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff;
  font-size: 14px; line-height: 1.4; text-align: center;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
  border-bottom-left-radius: var(--frag-radius);
  border-bottom-right-radius: var(--frag-radius);
}
@media (hover:hover) and (pointer:fine){
  #fragmente .teaserbox:hover .teaserbox-hover{ opacity: 1; }
}

/* Mobile: permanenter Balken unten */
@media (max-width:640px){
  #fragmente .teaserbox{ position: relative; overflow: hidden; border-radius: var(--frag-radius); }
  #fragmente .teaserbox .teaserbox-hover{
    top: auto; bottom: 0;
    height: var(--frag-hover-h-mobile);
    opacity: 1; pointer-events: none;
  }
}

/* Touch-Sicherheit (Hover simuliert) */
@media (hover:none){
  #fragmente .teaserbox .teaserbox-hover{ opacity: 1; }
}

/* Debug-/Badge ausblenden (falls existiert) */
#frag-patch-badge, .frag-patch-badge,
#frag-patch, .frag-patch, .frag-badge,
[id*="frag-patch"], [class*="frag-patch"]{
  display: none !important;
  visibility: hidden !important;
}

/* =======================================
   Abstand Fragmente → nächste Section via ::after
   ======================================= */
@media (min-width:1025px){
  #fragmente{ padding-bottom: 0 !important; }
  #fragmente::after{
    content: ""; display: block; height: 100px;
  }
}
@media (min-width:642px) and (max-width:1024px){
  #fragmente{ padding-bottom: 0 !important; }
  #fragmente::after{
    content: ""; display: block; height: 70px;
  }
}
@media (max-width:640px){
  #fragmente{ padding-bottom: 0 !important; }
  #fragmente::after{
    content: ""; display: block; height: 50px;
  }
}

/* Anker-Offsets (falls fixierte Navbar) */
#fragmente, #frag-hero, #frag-boxen{ scroll-margin-top: 100px; }

/* =======================
   Lightbox (Fragmente + Portfolio) – Grid Breakpoints
   ======================= */
@media (min-width:1024px){
  #fragmente .teaser-grid.frag-grid{
    display:grid!important;
    grid-template-columns:repeat(2,383px)!important;
    column-gap:55px!important;
    row-gap:40px!important;
    width:821px!important;
    margin:0 auto!important;
    justify-items:center!important;
  }
  #fragmente .teaser-grid.frag-grid .teaserbox{
    width:383px!important; height:351px!important;
  }
}
@media (min-width:642px) and (max-width:1023px){
  #fragmente .teaser-grid.frag-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    column-gap:30px!important;
    row-gap:70px!important;
    width:90vw!important; max-width:1020px!important;
    margin:0 auto!important;
  }
  #fragmente .teaser-grid.frag-grid .teaserbox{ aspect-ratio:1/1!important; }
}
@media (max-width:641px){
  #fragmente .teaser-grid.frag-grid{
    grid-template-columns:1fr!important;
    width:min(90vw,480px)!important;
    margin:0 auto!important;
    row-gap:35px!important;
  }
  #fragmente .teaser-grid.frag-grid .teaserbox{ aspect-ratio:322/294!important; }
}

/* Fragmente – Caption-Optik */
#fragmente .teaser-caption{
  text-align: left !important;
  margin: 8px 0 0;
}
#fragmente .teaser-caption strong{
  display: block;
  font: 600 17px/1.4 "Work Sans", sans-serif;
  margin: 0;
}
#fragmente .teaser-caption em{
  display: block;
  font: 300 13px/1.5 "Work Sans", sans-serif;
  font-style: italic;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

/* =========================================================
   LIGHTBOX — FINAL CLEAN BLOCK (einzige Quelle für Lightbox)
   ========================================================= */

/* Container (startet versteckt; JS setzt bei Öffnen auf flex) */
#lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;                           /* WICHTIG: kein weiteres display:flex */
  background: rgba(0,0,0,.92);

  /* greifen erst, wenn JS auf flex stellt */
  flex-direction: column;
  justify-content: flex-start;                 /* mittig, solange nichts überläuft */
  align-items: center;

  padding: 16px 12px calc(22px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: auto;                          /* bei Überhöhe scrollen */
  -webkit-overflow-scrolling: touch;
}

/* Bild */
#lightbox #lightbox-img{
  display: block;
  max-width: 92vw;
  height: auto;
  max-height: 60svh;                       /* Default-Deckelung */
  object-fit: contain;
  margin: 0 auto 12px;
  box-shadow: 0 0 20px #000;
}

/* Typografie exakt wie im Archiv */
#lightbox #lightbox-title{
  font-family: "Work Sans", Arial, sans-serif;
  font-weight: 400;                        /* Archiv: nicht extra fett */
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
  margin-top: 16px;
  text-align: center;
}
#lightbox #lightbox-desc{
  font-family: "Work Sans", Arial, sans-serif;
  font-weight: 300;                        /* dünner */
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  max-width: 700px;
  margin-top: 12px;
  text-align: center;
}
#lightbox #lightbox-desc p{ margin: 0 0 10px; }

/* Varianten-Pills (kompakt, zentriert wie im Archiv) */
#lightbox #lightbox-variants{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
}
#lightbox #lightbox-variants .variant-btn{
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 6px 10px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  opacity: .95;
}
#lightbox #lightbox-variants .variant-btn.is-active{
  background: #fff; color: #000;
}

/* Preis-Pill: schmal & leicht transparent – ident zur Archiv-Optik */
#lightbox #lightbox-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}
#lightbox #lightbox-actions .price-btn{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: auto;               /* keine Mindestbreite */
  min-width: 0;
  padding: 6px 10px;         /* wie die Varianten */
  font-size: 13px;
  line-height: 1.2;
  font-weight: 400;
  background: rgba(11,175,182,.60);
  border: 1px solid #0BAFB6;
  color: #fff;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: none;
}
#lightbox #lightbox-actions .price-btn:hover{
  background: rgba(11,175,182,.80);
}

/* Close-X */
#closeLightbox{
  position: fixed;
  top: 16px; right: 16px;
  font-size: 34px; line-height: 1;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,.8);
  z-index: 9999;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#closeLightbox:hover{ color:#ff4444; }

/* ===== Mobile (≤640px) ===== */
@media (max-width:640px){
  #lightbox{ justify-content: flex-start; }  /* oben beginnen */
  #lightbox #lightbox-img{ max-height: 52svh; }

  #lightbox #lightbox-title,
  #lightbox #lightbox-desc,
  #lightbox #lightbox-variants,
  #lightbox #lightbox-actions{ max-width: 92vw; }

  #lightbox #lightbox-variants{ margin-bottom: 6px; }
  #lightbox #lightbox-actions{  margin-top: 8px; }

  /* Pfeile mobil ausblenden */
  #lightbox > #lb-prev,
  #lightbox > #lb-next{ display: none !important; }
}

/* Sehr kleine Phones Portrait */
@media (max-width:430px) and (orientation:portrait){
  #lightbox #lightbox-img{ max-height: 50svh; }
}

/* ===== Tablet/Desktop (≥641px) ===== */
@media (min-width:641px){
  #lightbox #lightbox-img{ max-height: 65vh; }

  /* Pfeile im Archiv-Stil */
  #lightbox > .lb-nav{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 26px; line-height: 1;
    z-index: 3002;
    cursor: pointer;
    box-shadow: 0 2px 18px rgba(0,0,0,.35);
    transition: background .2s, transform .1s;
  }
  #lightbox #lb-prev{ left: 24px; }
  #lightbox #lb-next{ right: 24px; }
  #lightbox > .lb-nav:hover{
    background: rgba(0,0,0,.92);
    border-color: rgba(255,255,255,.5);
  }
}

/* === Lightbox – Tablet & iPad Pro Sizing ======================= */

/* 1) Tablet (642–1024px): Bild etwas kleiner */
@media (min-width: 642px) and (max-width: 1024px){
  #lightbox #lightbox-img{ max-height: 64svh; }
}

/* 2) iPad Pro 12.9"/13" PORTRAIT (1024 × 1366): Bild größer */
@media (width: 1024px) and (height: 1366px) and (orientation: portrait){
  #lightbox #lightbox-img{ max-height: 74svh !important; }
}
/* FRAGMENTS · Kadenz (4 Zeilen): eingerückt & ohne Absatzabstände */
#fragmente p.frag-cadence{
  margin: 0 !important;                 /* keine Abstände oben/unten */
  padding-inline-start: 1.25rem !important;  /* Einzug links (LTR/RTL-sicher) */
  padding-left: 1.25rem !important;          /* Fallback */
  font-style: italic;                    /* kursiv */
  line-height: 1.55;                     /* angenehmes Zeilenbild */
}

/* Auf großen Screens etwas stärkerer Einzug (optional) */
@media (min-width: 1024px){
  #fragmente p.frag-cadence{
    padding-inline-start: 1.75rem !important;
    padding-left: 1.75rem !important;
  }
}

/* Fragmente: statische Kachel ohne Hover & ohne Klick */
#fragmente .teaserbox.is-static{
  pointer-events: none;   /* nicht klickbar */
  cursor: default;
}
#fragmente .teaserbox.is-static .teaserbox-hover{
  display: none !important; /* Hoverlayer aus */
}

/* === Lightbox: Preis-Button kleiner & neue Farbe (FINAL OVERRIDE) === */
body #lightbox #lightbox-actions .price-btn{
  /* ~20% kleiner */
  font-size: 9px !important;      /* vorher 13px */
  padding: 4px 7px !important;      /* vorher 6px 10px */
  border-radius: 9999px !important;

  /* Farbe – hier anpassen */
  background: rgba(180, 163, 140,.60) !important; /* z.B. Blau; ändere nach Wunsch */
  border-color: #8E8379 !important;
  color: #F8F6F2 !important;
}

body #lightbox #lightbox-actions .price-btn:hover{
  background: rgba(180, 163, 140,.80) !important; /* gleiche Farbe, nur weniger transparent */
}
/* RESIDUEN: 2 Kacheln mittig */
.teaser-grid.residuen-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 360px));
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
}

@media (max-width: 820px){
  .teaser-grid.residuen-grid{
    grid-template-columns: 1fr;
  }
  .teaser-grid.residuen-grid .teaser-item{
    max-width: 360px;
    margin: 0 auto;
  }
}
.logo a,
.logo a:visited,
.logo a:hover,
.logo a:active{
  color: inherit !important;
  text-decoration: none !important;
}
/* =========================================================
   NAV / HAMBURGER – SINGLE SOURCE (TOUCH vs DESKTOP)
   ==> GANZ ans ENDE von style-frag-v02.css
   ========================================================= */

/* ---------- DESKTOP (Mouse/Trackpad) ---------- */
@media (hover: hover) and (pointer: fine){
  header.topbar .nav-toggle{ display: none !important; }

  header.topbar nav.primary-nav{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 36px;                 /* Desktop-Abstand HIER drehen */
  }

  header.topbar nav.primary-nav a{
    margin: 0 !important;
    white-space: nowrap;
  }
}

/* ---------- TOUCH (iPhone + iPad) ---------- */
@media (hover: none) and (pointer: coarse){
  header.topbar .topbar-container{ flex-wrap: wrap; }

  /* Hamburger sichtbar */
  header.topbar .nav-toggle{
    display: inline-flex !important;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;

    background: transparent;
    border: 0;
    cursor: pointer;

    font-size: 28px;           /* falls irgendwo noch ☰ drin ist: bleibt sichtbar */
    line-height: 1;
    color: #000;

    -webkit-tap-highlight-color: transparent;
  }

  /* falls Spans verwendet werden: 3 Balken sauber */
  header.topbar .nav-toggle span{
    display: block;
    width: 24px;
    height: 2px;
    background: #000;
    border-radius: 2px;
    margin: 0 !important;
  }

  /* NAV zu */
  header.topbar nav.primary-nav{
    display: none !important;
    width: 100%;
    padding-top: 12px;
  }

  /* NAV offen: untereinander + zentriert */
  header.topbar nav.primary-nav.is-open{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    width: 100%;
    padding: 14px 0 6px;
  }

  header.topbar nav.primary-nav.is-open a{
    margin: 0 !important;
    display: inline-block;
    padding: 6px 0;
    text-align: center;
  }
}

/* Fallback: wenn ein Browser pointer/hover nicht sauber liefert */
@media (max-width: 900px){
  header.topbar .nav-toggle{ display: inline-flex !important; }
  header.topbar nav.primary-nav{ display: none !important; }
  header.topbar nav.primary-nav.is-open{ display: flex !important; }
}


/* iPad (Landscape): Hero niedriger + Overlay kleiner & exakt mittig */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){

  .header-img-wrapper{
    margin-top: 12px !important;
  }

  .header-img{
    height: 58svh !important;      /* ggf. 52–65svh */
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Overlay wieder sauber mittig */
  .header-overlay{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(720px, 88vw) !important;
    padding: 0 10px !important;
    text-align: center !important;
  }

  /* Overlay-Typo kleiner */
  .header-overlay h1{
    font-size: 46px !important;    /* ggf. 40–52 */
    line-height: 1.05 !important;
    letter-spacing: 4px !important;
    margin: 0 0 10px 0 !important;
  }

  .header-overlay h2{
    font-size: 18px !important;    /* ggf. 16–22 */
    line-height: 1.25 !important;
    letter-spacing: 2px !important;
    margin: 0 0 16px 0 !important;
  }

  /* CTA kleiner, bleibt mittig */
  .cta{
    width: 320px !important;       /* ggf. 280–360 */
    height: 46px !important;
    line-height: 46px !important;
    font-size: 16px !important;
    border-radius: 26px !important;
  }
}

/* === HERO/HEADER: auf großen Screens niedriger (Desktop) === */
@media (min-width: 1400px){
  .header-img-wrapper{
    height: 70vh;        /* <— HIER drehen: z.B. 60–75vh */
    max-height: 760px;   /* Sicherheitskappe */
  }
  .header-img{
    height: 100%;
    object-fit: cover;
  }
}

/* === iPad (Portrait) soll wie Desktop wirken: Burger weg, Navi sichtbar === */
@media (width: 1024px) and (orientation: portrait){

  .nav-toggle{
    display: none !important;
  }

  .primary-nav{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
  }

  .topbar-container{
    flex-wrap: nowrap !important; /* verhindert “mobile wrap” */
  }

  .primary-nav.is-open{
    /* falls JS noch .is-open setzt: egal – bleibt Desktop */
    flex-direction: row !important;
  }
}
/* ANKLÄNGE: Hero-Breite + Höhe zentral einstellbar */
:root{
  --anklaenge-hero-w: 900px; /* <- NUR HIER drehen */
  --anklaenge-hero-h: 450px;  /* <- NUR HIER drehen */
}

.anklaenge-hero{
  max-width: var(--anklaenge-hero-w);
  margin: 40px auto 60px;
}

.anklaenge-hero .teaserbox > img{
  height: 420px;           /* Hero-Höhe -> kleiner */
  object-fit: cover;
}

/* 2×2 Grid erzwingen */
#teaser.teaser-grid{
  max-width: 1050px;
  margin: 0 auto 80px;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 60px 60px !important;
}

/* ANKLÄNGE – Grid + Cards (1:1 aus Fragmente, nur Prefix geändert) */
#teaser.teaser-grid.frag-grid{
  display: grid;
  grid-template-columns: repeat(2, var(--frag-grid-col-w));
  column-gap: var(--frag-grid-col-gap);
  row-gap: var(--frag-grid-row-gap);
  width: calc(2 * var(--frag-grid-col-w) + var(--frag-grid-col-gap));
  margin: 0 auto;
  padding: 0;
  justify-items: center;
  align-items: start;
}
#teaser.teaser-grid.frag-grid > .teaser-item,
#teaser.teaser-grid.frag-grid .teaserbox{
  width: var(--frag-grid-col-w);
}
#teaser.teaser-grid.frag-grid .teaserbox{
  height: var(--frag-box-h);
  border-radius: var(--frag-radius);
  overflow: hidden;
  position: relative;
  background: #f3f3f3;
}
#teaser.teaser-grid.frag-grid .teaserbox > img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--frag-radius);
}
#teaser.teaser-grid.frag-grid .teaser-caption{
  display: block;
  margin-top: 20px;
  text-align: left;
}

/* ANKLÄNGE: Abstand UNTER dem 2×2-Grid vor Kontakt */
#teaser.teaser-grid{
  margin-bottom: 100px !important;
}

/* =========================================
   ANKLÄNGE – MOBILE: Text links korrigieren + Kacheln schmäler
   ========================================= */
@media (max-width: 600px){

  /* Einleitungstext Anklänge: links bündig wie Kacheln */
  #anklaenge.portfolio-info{
    width: min(88vw, 360px) !important;   /* gleiche Breite wie Grid */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;          /* kein „Reinrutschen“ */
    padding-right: 0 !important;
  }

  /* Grid (die 4 Kacheln): 1 Spalte + schmäler */
  #teaser.teaser-grid.frag-grid{
    grid-template-columns: 1fr !important;
    width: min(88vw, 360px) !important;  /* ✅ schmäler */
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: center !important;
  }

  #teaser.teaser-grid.frag-grid > .teaser-item,
  #teaser.teaser-grid.frag-grid .teaserbox{
    width: 100% !important;
  }

  /* Hero oben: gleiche Breite wie Grid */
  .anklaenge-hero{
    width: min(88vw, 360px) !important;  /* ✅ schmäler */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .anklaenge-hero .teaserbox{
    width: 100% !important;
  }
}