/* Ancora Football · Stylesheet
   Teil 1: Schriften und Farbrollen aus dem Design-System (tokens/football.css).
   Teil 2: website/site.css aus Claude Design, unveraendert.
   Teil 3: Ergaenzungen fuer die statische Astro-Fassung (am Ende). */
@font-face{font-family:"Borna";src:url("/fonts/Borna-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Borna";src:url("/fonts/Borna-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Borna";src:url("/fonts/Borna-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
:root {
  /* ---- Football brand palette (raw) ------------------------------------ */
  --af-magenta:   #FF136D; /* aus dem Wortmarken-Lockup — Sub-Brand-Akzent */

  /* ---- Magenta ramp ---------------------------------------------------- */
  --magenta-700: #B8004C;
  --magenta-600: #E00A5D;
  --magenta-500: #FF136D; /* = Football magenta */
  --magenta-400: #FF4A8E;
  --magenta-300: #FF80AF;
  --magenta-200: #FFB4CE;
  --magenta-100: #FFE2EC;

  /* ---- Vitrine: dunkle Flächen, kühl-neutral, nie schwarz-schwarz ------ */
  --vitrine-page:    #0A0E13; /* tiefste Ebene — Seitengrund */
  --vitrine-card:    #101820; /* = Ancora rich black — Objektkarte */
  --vitrine-raised:  #181F28; /* gehobene Fläche, Panels */
  --vitrine-sunken:  #060A0E; /* Bildbühne hinter dem Objekt */
  --vitrine-hairline: rgba(242,240,234,0.11);
  --vitrine-hairline-strong: rgba(242,240,234,0.22);

  /* ---- Ink auf Vitrine ------------------------------------------------
     Reines Weiss trägt das Lockup („ncora" gegen Magenta). Bone ist der
     wärmere Lauftext-Ink darunter — Matchday-Papier statt Bildschirmweiss. */
  --af-ink:         #FFFFFF; /* Lockup, Display-Headlines */
  --bone:           #F2F0EA;
  --bone-muted:     rgba(242,240,234,0.62);
  --bone-faint:     rgba(242,240,234,0.55); /* 5.0:1 auf #0A0E13 — nicht tiefer, sonst fällt 10–11px-Text unter 4.5:1 */

  /* ---- Verifikations-Signal --------------------------------------------
     Das EINZIGE Lime im Football-System. Nur für bestätigte Provenienz
     (Match-Worn / Match-Issued belegt). Nie dekorativ, nie als Fläche.
     #B8FF2E ist das brand-Lime auf Schwarz aufgehellt (Lesbarkeit bei 11px). */
  --af-verified:      #B8FF2E;
  --af-verified-base: #93D500; /* brand-Lime, für hellen Grund */
  --af-verified-tint: rgba(184,255,46,0.12);

  /* ---- Display ----------------------------------------------------------
     Eine Familie. Borna trägt Copy UND Display; die Auszeichnung läuft über
     Gewicht, Versalien und engen Satz, nicht über eine zweite Schrift.
     Der Alias bleibt bestehen, damit bestehende Regeln weiterlaufen. */
  --font-condensed: "Borna", "Helvetica Neue", Arial, system-ui, sans-serif; /* @kind font */
}
:root {
  --af-surface-page:   var(--vitrine-page);   /* Seitengrund */
  --af-surface-card:   var(--vitrine-card);   /* Eingabefelder, Klapplisten-Knopf */
  --af-surface-raised: var(--vitrine-raised); /* geöffnete Klappliste, Panel */
  --af-surface-stage:  var(--vitrine-sunken); /* Bildbühne hinter jedem Trikot, Footer */
  --af-surface-hover:  rgba(242,240,234,0.06);/* Hover auf dunkler Fläche */
  --af-surface-chip:   rgba(242,240,234,0.08);/* aktive Filter-Pille */
  --af-scrim:          rgba(10,14,19,0.9);    /* Header, Overlay auf Foto */

  --af-text-strong: var(--af-ink);            /* Headlines */
  --af-text:        var(--bone);              /* Fliesstext, Labels aktiv */
  --af-text-muted:  rgba(242,240,234,0.84);   /* Lede, Beschreibungen */
  --af-text-subtle: var(--bone-muted);        /* Meta, Labels, Anzahl */
  --af-text-on-light: var(--vitrine-page);    /* Text auf Bone / Magenta / Lime */

  --af-line:        rgba(242,240,234,0.12);   /* Trennlinie */
  --af-line-strong: rgba(242,240,234,0.24);   /* Rahmen von Bedienelementen */
  --af-line-focus:  var(--bone);              /* Fokus, Hover-Rahmen */

  --af-accent:      var(--af-magenta);        /* CTA-Fläche, aktive Reiter-Linie, Eyebrow, Auswahlpunkt — nie als Text */
  --af-on-accent:   var(--vitrine-page);
  --af-accent-hover:var(--bone);              /* CTA-Hover: Bone, kein zweites Rot */

  --af-signal:      var(--af-verified);       /* Match-Worn / Match-Issued — ausschliesslich */
  --af-signal-line: rgba(184,255,46,0.45);

  --af-shadow-pop:  0 18px 40px rgba(0,0,0,0.45); /* nur für Klapplisten */
}

*{box-sizing:border-box}
:root{--pg:var(--af-surface-page);--card:var(--af-surface-card);--raised:var(--af-surface-raised);--stage:var(--af-surface-stage);--tx:var(--af-text);--b84:var(--af-text-muted);--b62:var(--af-text-subtle);--hl:var(--af-line);--hl2:var(--af-line-strong);--mg:var(--af-accent);--lime:var(--af-signal);--white:var(--af-text-strong);--gut:clamp(20px,4.4vw,56px)}
html,body{margin:0;background:var(--pg)}
body{color:var(--tx);font-family:Borna,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}
a{color:var(--tx);text-decoration:none}a:hover{color:var(--white)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
img{display:block;max-width:100%}
h1,h2,h3{color:var(--white);margin:0;font-weight:600;text-transform:uppercase;letter-spacing:-.015em;overflow-wrap:break-word;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.w{max-width:1400px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.lab{font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--b62)}
.eb{font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--b62);background:none;padding:0;border-radius:0;display:inline-block;align-self:flex-start}
.cta{display:inline-flex;align-items:center;font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--af-on-accent);background:var(--mg);padding:15px 26px;border-radius:2px;white-space:nowrap}
.cta:hover{background:var(--af-accent-hover);color:var(--af-on-accent)}
.cta.sm{font-size:11.5px;padding:9px 14px}
.cta.off{color:var(--b62);background:none;border:1px solid var(--hl2);cursor:default}
.ul{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--tx);border-bottom:1px solid var(--mg);padding-bottom:4px;align-self:flex-start}
.ul:hover{color:var(--white);border-bottom-width:2px;padding-bottom:3px}
.ul2{font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--b84);border-bottom:1px solid var(--hl2);padding-bottom:3px}
.fit{position:absolute;height:auto;max-width:none}
/* header */
.hdr{position:sticky;top:0;z-index:20;background:var(--af-scrim);backdrop-filter:blur(14px);border-bottom:1px solid var(--hl)}
.hdr .w{height:76px;display:flex;align-items:center;gap:28px}
.hdr .logo img{height:36px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--b62);padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--tx)}
.nav a.on{color:var(--tx);border-bottom-color:var(--tx)}
.nav .cta{color:var(--pg);border:0;padding:9px 14px}
.lang{display:flex;gap:10px}
.lang button{font-weight:600;font-size:10.5px;letter-spacing:.12em;color:var(--b62);padding:4px 0}
.lang button.on{color:var(--tx);box-shadow:inset 0 -1px 0 var(--tx)}
.burger{display:none;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.13em;margin-left:auto;padding:8px 0}
@media(max-width:980px){.burger{display:block}.hdr .w{flex-wrap:wrap;height:auto;padding-top:18px;padding-bottom:18px}.nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:0;margin:0;padding-top:10px}.nav.open{display:flex}.nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--hl)}.nav a.on{border-bottom-color:var(--hl)}.nav .lang{padding:16px 0}}
/* hero */
.hero{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,5vw,88px);align-items:center}
@media(max-width:760px){.hero{grid-template-columns:1fr}}
.htxt{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:end;margin-top:clamp(36px,4vw,56px)}
@media(max-width:860px){.hrow{grid-template-columns:1fr}}
.hero h1{hyphens:manual;font-size:clamp(42px,5.8vw,100px);line-height:.9;margin-top:30px;max-width:12ch}
.hero .lede{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--b84);max-width:44ch;margin-top:28px}
.hero .acts{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:36px}
.hero .img{position:relative;display:block;color:inherit}
.hero .img .st{position:relative;aspect-ratio:4/5;background:var(--stage);border-radius:3px;overflow:hidden}
.hero .img .cap{display:flex;justify-content:space-between;gap:16px;padding-top:16px;flex-wrap:wrap}
.hero .img .cap b{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx)}
.stats{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap;border-top:1px solid var(--hl);padding-top:28px;padding-bottom:clamp(56px,7vw,96px)}
.stats .n{font-weight:600;font-size:clamp(32px,3.4vw,48px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--white)}
.stats .lab{margin-top:10px}
/* catalogue */
.cat{padding-top:clamp(48px,6vw,88px);border-top:1px solid var(--hl)}
.cat .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cat h2{font-size:clamp(34px,4.4vw,64px);line-height:.92}
.modes{display:flex;gap:clamp(18px,2.6vw,34px);row-gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--hl);margin-top:clamp(32px,4vw,48px)}
.modes button{margin-bottom:-1px;padding:0 0 15px;font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--b62);border-bottom:2px solid transparent}
.modes button:hover{color:var(--tx)}
.modes button.on{font-weight:600;color:var(--tx);border-bottom-color:var(--mg)}
.modes small{font-weight:500;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--b62);margin-left:8px}
.mnote{font-size:13.5px;line-height:1.55;color:var(--b62);max-width:56ch;margin-top:18px}
.filters{padding-top:26px;display:grid;gap:12px}
.frow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:baseline}
@media(max-width:640px){.frow{grid-template-columns:1fr;gap:8px}}
.chips{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center}
.chip{font-weight:500;font-size:12px;letter-spacing:.02em;color:var(--b62);padding:3px 0;border-bottom:1px solid transparent;white-space:nowrap}
.chip:hover{color:var(--tx)}
.chip.on{color:var(--tx);border-bottom-color:var(--tx)}
.chips .div{width:1px;height:12px;background:var(--hl2)}
.chips select{font:inherit;font-size:12px;color:var(--b62);background:transparent;border:0;border-bottom:1px solid var(--hl2);padding:3px 18px 3px 0;border-radius:0}
.chips select option{background:var(--pg)}
.bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px;padding:14px 0;border-top:1px solid var(--hl);border-bottom:1px solid var(--hl)}
.srch{flex:1 1 260px;font:inherit;font-size:14px;color:var(--tx);background:transparent;border:0;padding:4px 0;min-width:0}
.srch:focus{outline:none}
.srch::placeholder{color:var(--b62)}
.bar select{font:inherit;font-size:12px;color:var(--b84);background:transparent;border:0;padding:4px 0}
.bar select option{background:var(--pg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:clamp(36px,4vw,56px) clamp(18px,2.2vw,32px);padding:clamp(32px,4vw,48px) 0 clamp(88px,10vw,140px)}
.card{display:flex;flex-direction:column;gap:16px;color:inherit}
.card:hover{color:inherit}
.bay{background:var(--stage);aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:3px}
.bay img{transition:opacity .3s,transform .5s}
.bay img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bay img.b{opacity:0}.card:hover .bay img.b{opacity:1}.card:hover .bay img.hb{opacity:0}
.bay .state{position:absolute;top:14px;left:14px;font-weight:600;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--b84);background:var(--af-scrim);border-radius:2px;padding:4px 8px}
.bay .noimg{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--b62)}
.card .bd{display:flex;flex-direction:column;gap:8px;flex:1}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card .t{font-weight:600;font-size:18px;line-height:1.15;letter-spacing:-.004em;text-transform:uppercase;color:var(--tx)}
.card .s{font-size:13.5px;line-height:1.5;color:var(--b62);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.card .ft{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.price{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;color:var(--tx)}
.price.m{font-weight:500;color:var(--b62)}
.card .mt{font-size:12.5px;color:var(--b62);margin-left:auto}
.pv{font-weight:600;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;border-radius:2px;padding:4px 7px;display:inline-block;white-space:nowrap}
.pv.worn{color:var(--pg);background:var(--lime)}
.pv.issued{color:var(--lime);box-shadow:inset 0 0 0 1px var(--af-signal-line)}
.pv.plain{color:var(--b62);box-shadow:inset 0 0 0 1px var(--hl2)}
.none{padding:48px 0 120px;color:var(--b84)}
.none button{color:var(--tx);border-bottom:1px solid var(--mg)}
/* gallery */
.gal{padding-top:clamp(88px,10vw,150px);padding-bottom:clamp(88px,10vw,150px);border-top:1px solid var(--hl)}
.gal .hd{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
@media(max-width:860px){.gal .hd{grid-template-columns:1fr}}
.gal h2{font-size:clamp(36px,5vw,76px);line-height:.92;margin-top:22px}
.gal .hd p{font-size:16px;line-height:1.7;color:var(--b84);max-width:46ch}
.gal .g{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:end}
@media(max-width:860px){.gal .g{grid-template-columns:1fr}}
.gal figure{margin:0;display:flex;flex-direction:column;gap:14px}
.gal figure>div{background:var(--stage);border-radius:3px;overflow:hidden}
.gal figure img{width:100%;height:auto;max-height:620px;object-fit:cover}
.gal figure.sm img{max-height:420px}
.gal figcaption{font-size:12.5px;line-height:1.55;color:var(--b62);max-width:52ch}
.gal figcaption b{font-weight:600;color:var(--tx)}
.gal figcaption b.l{color:var(--lime)}
.gal .side{display:flex;flex-direction:column;gap:40px}
.quote{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--hl);padding-top:24px}
.quote .h{font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.1;text-transform:uppercase;color:var(--white)}
.quote p{font-size:14.5px;line-height:1.7;color:var(--b84)}
/* detail */
.back{display:inline-block;padding-top:36px;font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--b62)}
.back:hover{color:var(--tx)}
.det{padding-top:28px;padding-bottom:clamp(72px,9vw,120px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,5vw,96px);align-items:start}
@media(max-width:900px){.det{grid-template-columns:1fr}}
.gcol{position:sticky;top:104px}
@media(max-width:900px){.gcol{position:static}}
.main{background:var(--stage);border-radius:3px;aspect-ratio:4/5;position:relative;overflow:hidden}
.main img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.thumbs button{position:relative;width:72px;aspect-ratio:4/5;background:var(--stage);border-radius:2px;overflow:hidden;opacity:.6}
.thumbs button:hover{opacity:1}
.thumbs button.on{opacity:1;box-shadow:inset 0 0 0 1px var(--tx)}
.thumbs button img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.det .meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.det h1{font-size:clamp(34px,4.4vw,64px);line-height:.94;color:var(--white);margin-top:22px}
.det .sub{font-size:17px;line-height:1.55;color:var(--b84);margin-top:20px;max-width:46ch}
.buy{margin-top:40px;padding:26px 0;border-top:1px solid var(--hl);border-bottom:1px solid var(--hl);display:flex;align-items:flex-end;gap:24px;row-gap:20px;flex-wrap:wrap}
.buy .price{font-size:36px;line-height:1;letter-spacing:-.015em}
.buy .price.m{font-size:22px}
.buy .r{margin-left:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.buy .acts{display:flex;gap:22px;row-gap:12px;align-items:center;flex-wrap:wrap}
.buy .note{font-size:12px;line-height:1.55;color:var(--b62);max-width:340px}
.blk{margin-top:56px}
.blk>.lab{display:block;margin-bottom:18px;color:var(--tx)}
.blk p{font-size:15px;line-height:1.7;color:var(--b84);max-width:60ch}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:22px;border-top:1px solid var(--hl)}
@media(max-width:560px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tiers div{padding:14px 14px 0 0;border-top:2px solid transparent;margin-top:-1px}
.tiers div.on{border-top-color:var(--tx)}.tiers div.on.l{border-top-color:var(--lime)}
.tiers b{display:block;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--b62);margin-bottom:6px}
.tiers div.on b{color:var(--tx)}.tiers div.on.l b{color:var(--lime)}
.tiers span{font-size:11.5px;line-height:1.45;color:var(--b62)}
.tiers div.on span{color:var(--b84)}
.spec{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--hl)}
@media(max-width:520px){.spec{grid-template-columns:1fr}}
.spec:first-of-type{border-top:1px solid var(--hl)}
.spec .k{font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--b62);padding-top:3px}
.spec .v{font-size:15px;line-height:1.5;color:var(--tx)}
.conds{display:flex;gap:0;margin-bottom:16px;border-top:1px solid var(--hl)}
.conds span{flex:1 1 0;font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--b62);padding:12px 8px 0 0;border-top:2px solid transparent;margin-top:-1px}
.conds span.on{font-weight:600;color:var(--tx);border-top-color:var(--tx)}
.rel{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(88px,10vw,140px);border-top:1px solid var(--hl)}
.rel .g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:clamp(18px,2.2vw,32px);margin-top:28px}
/* pages */
.pg{padding-top:clamp(64px,9vw,132px)}
.pg h1{font-size:clamp(42px,6.6vw,108px);line-height:.92;max-width:14ch;margin-top:30px}
.pg .lede{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--b84);max-width:560px;margin-top:34px}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(28px,4vw,64px);padding-top:clamp(64px,8vw,112px)}
.svc>div{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--hl);padding-top:24px}
.svc h3{font-size:clamp(24px,2.2vw,30px);line-height:1.04}
.svc p{font-size:15px;line-height:1.7;color:var(--b84)}
.svc .ul{margin-top:auto}
.svc .sis{margin-top:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--b62)}
.svc .sis img{height:16px;width:auto}
.prose{max-width:720px;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(88px,10vw,140px);display:grid;gap:20px}
.prose p{font-size:16px;line-height:1.7;color:var(--b84)}
.ph{border:1px dashed var(--hl2);border-radius:3px;padding:16px 18px;font-size:13px;color:var(--b62)}
.form{display:grid;gap:22px;max-width:680px;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(88px,10vw,140px)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.fl{display:grid;gap:8px}
.fl input,.fl select,.fl textarea{font:inherit;font-size:16px;color:var(--tx);background:transparent;border:0;border-bottom:1px solid var(--hl2);border-radius:0;padding:8px 0 10px}
.fl select option{background:var(--pg)}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;border-bottom-color:var(--tx)}
.fl textarea{min-height:140px;resize:vertical}
.ref{font-size:13px;color:var(--b84);border-left:1px solid var(--hl2);padding:2px 0 2px 14px}
.ok{margin-top:48px;margin-bottom:140px;max-width:620px;border-top:1px solid var(--hl);padding-top:22px;font-size:16px;color:var(--b84)}
/* footer */
.ftr{border-top:1px solid var(--hl);background:var(--stage)}
.ftr .a{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(48px,6vw,80px)}
@media(max-width:1100px){.ftr .a{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ftr .col .lab,.ftr .col .ul{white-space:nowrap}
@media(max-width:520px){.ftr .a{grid-template-columns:1fr}}
.ftr .claim{display:flex;flex-direction:column;gap:26px}
.ftr .claim .h{font-weight:600;font-size:clamp(24px,2.4vw,34px);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;color:var(--white);max-width:14ch}
.ftr .col{display:flex;flex-direction:column;gap:11px}
.ftr .col .lab{margin-bottom:6px}
.ftr .col a,.ftr .col span{font-size:14px;color:var(--b84)}
.ftr .col a:hover{color:var(--white)}
.ftr .b{display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap;border-top:1px solid var(--hl);padding-top:24px;padding-bottom:28px}
.ftr .b img.lk{height:22px;width:auto}
.ftr .b span,.ftr .b a{font-size:12px;color:var(--b62)}
.ftr .b a:hover{color:var(--tx)}
.ftr .b .lg{display:flex;gap:22px;flex-wrap:wrap}
.ftr .b .sb{margin-left:auto;display:flex;align-items:center;gap:10px}
.ftr .b .sb img{height:14px;width:auto;opacity:.8}

.sh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--hl);padding-top:20px}
.hl{padding-bottom:clamp(72px,9vw,128px)}
.hlg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(18px,2.4vw,36px);margin-top:28px}
@media(max-width:900px){.hlg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.hlg{grid-template-columns:1fr}}
.hlg .card .t{font-size:clamp(20px,1.8vw,26px)}
.tiles{padding-bottom:clamp(72px,9vw,128px)}
.tg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:28px}
@media(max-width:1000px){.tg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.tg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:12px;color:inherit}
.tile:hover{color:inherit}.tile:hover .bay{box-shadow:inset 0 0 0 1px var(--hl2)}
.tile .bd{display:flex;flex-direction:column;gap:4px}
.tile .t{font-weight:600;font-size:15px;line-height:1.15;text-transform:uppercase;color:var(--tx)}
.tile .s{font-size:12.5px;color:var(--b62)}
.cat .stats{border:0;padding:0;gap:clamp(20px,3vw,44px)}
.cat .stats>div{display:flex;flex-direction:column}
.cat .stats .n{font-size:clamp(22px,2vw,30px)}
.cat .stats .lab{margin-top:6px}
.legal h2{font-size:13px;letter-spacing:.12em;margin-top:18px}
.legal ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--b84);font-size:16px;line-height:1.7}
.legal b{color:var(--tx);font-weight:600}

.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wall .bay{border-radius:2px}
.wall .bay:nth-child(3n+2){transform:translateY(28px)}
@media(max-width:1000px){.wall{max-width:640px}.wall .bay:nth-child(n+7){display:none}}
.quick{margin-top:44px;border-top:1px solid var(--hl);padding-top:20px;display:grid;gap:12px}
.qp{display:flex;flex-wrap:wrap;gap:8px}
.qbtn{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:13px;color:var(--tx);border:1px solid var(--hl2);border-radius:999px;padding:8px 14px;transition:border-color .15s,background .15s}
.qbtn:hover{border-color:var(--tx);background:var(--af-surface-hover)}
.qbtn small{font-size:11px;color:var(--b62);font-variant-numeric:tabular-nums}
.fbar{display:flex;flex-wrap:wrap;gap:10px;padding-top:28px}
.dd{position:relative}
.ddb{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:13px;color:var(--tx);background:var(--card);border:1px solid var(--hl2);border-radius:2px;padding:11px 14px}
.ddb:hover{border-color:var(--tx)}
.ddb i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.dd.open .ddb{border-color:var(--tx)}.dd.open .ddb i{transform:rotate(-135deg) translateY(-1px)}
.ddb.set{background:var(--tx);color:var(--pg);border-color:var(--tx)}
.ddb em{font-style:normal;font-size:10.5px;font-weight:600;background:var(--pg);color:var(--tx);border-radius:999px;min-width:18px;height:18px;display:inline-grid;place-items:center}
.ddm{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:260px;max-height:340px;overflow:auto;background:var(--raised);border:1px solid var(--hl2);border-radius:3px;padding:6px;box-shadow:var(--af-shadow-pop)}
.ddo{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-size:13.5px;color:var(--b84);padding:9px 10px;border-radius:2px}
.ddo:hover{background:var(--af-surface-hover);color:var(--tx)}
.ddo .rd{width:14px;height:14px;border:1.5px solid var(--hl2);border-radius:50%;flex:none}
.ddo.on{color:var(--white)}.ddo.on .rd{border-color:var(--mg);background:radial-gradient(circle,var(--mg) 0 3.5px,transparent 4px)}
.ddo small{margin-left:auto;font-size:11.5px;color:var(--b62);font-variant-numeric:tabular-nums}
.active{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx);background:var(--af-surface-chip);border-radius:999px;padding:6px 8px 6px 12px}
.pill b{font-weight:500;font-size:14px;line-height:1;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--af-line)}
.pill:hover b{background:var(--mg);color:var(--pg)}
.clr{font-size:12px;color:var(--b62);border-bottom:1px solid var(--hl2);margin-left:6px}
.clr:hover{color:var(--tx)}

.quick{margin:0;border:0;padding:24px 0 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.qbtn.on{background:var(--tx);color:var(--pg);border-color:var(--tx)}.qbtn.on small{color:var(--pg)}

.hero{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)!important;gap:0!important;align-items:end!important}
.htxt{position:relative;z-index:2;padding-bottom:clamp(8px,2vw,28px)}
.hero h1{max-width:none;width:128%;margin-right:-28%;text-shadow:0 2px 24px rgba(6,10,14,.55)}
.hfig{margin:0;position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.hpic{position:relative;aspect-ratio:640/852;width:100%;background:var(--stage);border-radius:3px;overflow:hidden}
.hpic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,19,.72) 0%,rgba(10,14,19,0) 42%);pointer-events:none}
.hpic image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;--object-position:50% 0%}
.hfig figcaption{font-size:12.5px;line-height:1.5;color:var(--b62);max-width:44ch}
@media(max-width:760px){.hero{grid-template-columns:1fr!important}.hfig{order:-1}.hpic::after{background:linear-gradient(0deg,var(--af-scrim) 0%,rgba(10,14,19,0) 45%)}.hero h1{margin-right:0;width:auto}.htxt{padding-top:36px}}

.story{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);border-top:1px solid var(--hl);padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(64px,8vw,104px);align-items:start}
@media(max-width:1000px){.story{grid-template-columns:1fr}}
.story .sy{display:flex;flex-direction:column;gap:8px}
.story .sy .n{font-weight:600;font-size:clamp(40px,4.4vw,64px);line-height:.9;letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums}
.story .stx{display:grid;gap:16px}
.story h2{font-size:clamp(22px,2.2vw,30px);line-height:1.05}
.story p{font-size:15.5px;line-height:1.7;color:var(--b84)}
.sfig{margin:0;display:flex;flex-direction:column;gap:12px}
.sfig>div{border-radius:3px;overflow:hidden;border:1px solid var(--hl)}
.sfig img{width:100%;height:auto}
.sfig figcaption{font-size:12.5px;color:var(--b62)}

::selection{background:var(--mg);color:var(--pg)}
*{-webkit-tap-highlight-color:transparent}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:none}
a:focus-visible,button:focus-visible,select:focus-visible{outline:1px solid var(--tx);outline-offset:3px}
.cta:visited,.cta:active,.cta:focus{color:var(--pg)}
.nav a:visited{color:var(--b62)}.nav a.on:visited{color:var(--tx)}

.eg{padding-bottom:clamp(56px,7vw,96px)}
.et{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;margin-top:28px;border-top:1px solid var(--hl);border-left:1px solid var(--hl)}
.ei{border-right:1px solid var(--hl);border-bottom:1px solid var(--hl);padding:24px 22px;display:flex;flex-direction:column;gap:12px}
.ei .eh{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ei p{font-size:14.5px;line-height:1.65;color:var(--b84);margin:0}
.ei .ev{font-size:13px;color:var(--b62)}.ei .ev b{color:var(--tx);font-weight:600}
.es{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px;margin-top:28px}
.es b{display:block;font-weight:600;font-size:15px;text-transform:uppercase;color:var(--white);margin-bottom:8px}
.es p{font-size:14px;line-height:1.6;color:var(--b84);margin:0}
.er{margin:28px 0 0;padding:0;list-style:none;counter-reset:r;max-width:760px}
.er li{counter-increment:r;display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-bottom:1px solid var(--hl);font-size:16px;line-height:1.55;color:var(--tx)}
.er li::before{content:counter(r,decimal-leading-zero);font-weight:600;font-size:12px;color:var(--b62);padding-top:4px;font-variant-numeric:tabular-nums}
.chk{display:flex;flex-wrap:wrap;gap:8px}
.chk label{cursor:pointer;position:relative}.chk input{position:absolute;opacity:0;pointer-events:none}
.chk span{display:inline-flex;font-size:13px;font-weight:500;color:var(--tx);border:1px solid var(--hl2);border-radius:999px;padding:8px 14px}
.chk label:hover span{border-color:var(--tx)}
.chk input:checked+span{background:var(--tx);color:var(--pg);border-color:var(--tx)}
.chk input:focus-visible+span{outline:1px solid var(--tx);outline-offset:3px}

.abh{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,380px);gap:clamp(28px,5vw,80px);align-items:end;padding-bottom:clamp(40px,5vw,72px)}@media(max-width:860px){.abh{grid-template-columns:1fr}.abp{order:-1;max-width:320px}}.abp{margin:0;border-radius:3px;overflow:hidden;border:1px solid var(--hl)}.abp img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%}.abq{border-top:1px solid var(--hl);padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}.abq blockquote{margin:0;max-width:26ch;font-size:clamp(26px,3.4vw,52px);line-height:1.08;font-weight:600;letter-spacing:-.01em;color:var(--white);text-wrap:balance}.sfs{display:grid;gap:20px;align-content:start}.story .sy .lab{margin-top:4px}

.bgal{padding-top:0;padding-bottom:clamp(40px,5vw,72px)}.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:28px 20px}.gg figure{margin:0;display:grid;gap:10px;align-content:start}.gg figure div{aspect-ratio:4/5;background:var(--af-surface-stage);border:1px solid var(--hl);overflow:hidden;position:relative}.gg img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}.gg figcaption{font-size:13px;line-height:1.45;color:var(--af-text-subtle)}.gg figcaption b{display:block;font-size:15px;color:var(--af-text-strong);font-weight:600;margin-bottom:2px}
.gn{margin:28px 0 0;max-width:80ch;font-size:12px;line-height:1.6;color:var(--af-text-subtle)}.gn a{color:var(--af-text);text-decoration:underline;text-underline-offset:2px}.gn a:hover{color:var(--af-accent)}
.gal .g{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;max-width:980px}@media(max-width:860px){.gal .g{grid-template-columns:1fr}}.gal figure img,.gal figure.sm img{display:block;max-height:none;height:auto;width:100%}.gal .side{display:block}
.hcar .hpic{aspect-ratio:4/5}.hcar .hpic::after{display:none}.hcar .hs{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;display:block}.hcar .hs.on{opacity:1;pointer-events:auto}.hcar .hs .bay{position:absolute;inset:0;aspect-ratio:auto;background:none;border-radius:0}.hcar figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px}.hcar .hcn{font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx)}.hcar .hcn:hover{color:var(--af-accent)}.hcar .hdots{display:flex;gap:8px}.hcar .hdots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--hl2);cursor:pointer}.hcar .hdots button.on{background:var(--af-accent)}
.hero{position:relative;grid-template-columns:1fr!important;align-items:center!important;min-height:clamp(540px,76vh,780px);isolation:isolate}.hero h1{width:auto;margin-right:0;max-width:13ch}.hero .htxt{padding-bottom:0}.hband{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;z-index:-1;background:var(--af-surface-stage)}.hband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,19,.95) 0%,rgba(10,14,19,.84) 55%,rgba(10,14,19,.74) 100%);pointer-events:none}.btr{display:flex;height:100%;width:max-content;animation:hband 70s linear infinite;animation-play-state:paused}.hero:hover .btr{animation-play-state:running}.bt{flex:none;height:100%;aspect-ratio:4/5;position:relative;display:block}.bt .bay{position:absolute;inset:0;aspect-ratio:auto;background:none;border-radius:0}.bt .bay img{filter:brightness(.7)}@keyframes hband{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.btr{animation:none}}@media(max-width:760px){.hero{min-height:520px}}

/* ===== Teil 3: Ergaenzungen fuer die statische Fassung ================= */
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:16px;top:12px;z-index:50;background:var(--mg);color:var(--af-on-accent);padding:10px 14px}
/* Filter als native Auswahllisten: zugaenglich, ohne eigenes Klappmenue */
.fsel{display:inline-flex;flex-direction:column;gap:6px;min-width:0}
.fsel select{font:inherit;font-size:13px;color:var(--tx);background:var(--card);border:1px solid var(--hl2);border-radius:2px;padding:10px 32px 10px 12px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;max-width:260px}
.fsel select:hover,.fsel select:focus{border-color:var(--tx);outline:none}
.fsel select.set{background-color:var(--tx);color:var(--pg);border-color:var(--tx)}
.nojs{font-size:13px;color:var(--b62);margin-top:18px}
.js .nojs{display:none}
.modes a{margin-bottom:-1px;padding:0 0 15px;font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--b62);border-bottom:2px solid transparent}
/* Detail: Vorschaubilder sind Links (funktionieren ohne JS) */
.thumbs a{position:relative;display:block;width:72px;aspect-ratio:4/5;background:var(--stage);border-radius:2px;overflow:hidden;opacity:.6}
.thumbs a:hover,.thumbs a.on{opacity:1}.thumbs a.on{box-shadow:inset 0 0 0 1px var(--tx)}
.thumbs a img.photo,.main img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.det .hint{font-size:12.5px;color:var(--b62);margin-top:14px}
/* Kontakt per E-Mail */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(24px,3vw,48px);padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(88px,10vw,140px)}
.ways>div{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--hl);padding-top:22px}
.ways h2{font-size:clamp(20px,1.8vw,24px);line-height:1.08}
.ways p{font-size:15px;line-height:1.65;color:var(--b84)}
.ways .ul{margin-top:auto}
.mailbig{display:inline-block;margin-top:28px;font-weight:600;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.01em;color:var(--white);border-bottom:2px solid var(--mg);padding-bottom:4px}
.mailbig:hover{color:var(--white);border-bottom-color:var(--white)}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--b84)}
.legal a{border-bottom:1px solid var(--mg)}
.lang a{font-weight:600;font-size:10.5px;letter-spacing:.12em;color:var(--b62);padding:4px 0}
.lang a.on{color:var(--tx);box-shadow:inset 0 -1px 0 var(--tx)}
.ftr .col .lang a{font-size:10.5px}
.cat[data-akt="collection"] .card[data-g="collection"] .state,.cat[data-akt="available"] .state,.cat:not([data-akt]) .card[data-g="collection"] .state{display:none}
.cat[data-akt="all"] .card[data-g="collection"] .state{display:inline-block}
/* Haeufige Fragen */
.faq{max-width:860px;margin-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,8vw,120px)}
.fq{border-top:1px solid var(--hl)}
.fq:last-child{border-bottom:1px solid var(--hl)}
.fq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0}
.fq summary::-webkit-details-marker{display:none}
.fq summary h2{font-size:clamp(17px,1.5vw,21px);line-height:1.35;font-weight:600;color:var(--af-text-strong)}
.fq summary::after{content:"+";flex:none;font-size:22px;line-height:1;color:var(--af-magenta);transition:transform .2s}
.fq[open] summary::after{transform:rotate(45deg)}
.fq summary:focus-visible{outline:2px solid var(--af-magenta);outline-offset:4px}
.fq p{font-size:16px;line-height:1.65;color:var(--af-text-muted);max-width:68ch;padding:0 0 26px}
@media (prefers-reduced-motion:reduce){.fq summary::after{transition:none}}