/* AV Website Solutions — Gestaltungsgrundlage „Obsidian“.
   Dunkle Flächenhierarchie (Grund → Fläche → Erhöht → Interaktiv → Hervorgehoben), ein Akzent (Champagnergold als LICHT, nicht als Fläche),
   Schrift: Bricolage Grotesque (Anzeige, variabel 200–800) + Figtree (Text), System-Mono für Etiketten. Kein Inline-Code (strikte CSP).
   Gemeinsam für Startseite, Paketseite und Impressum; Startseite: start.css, Paketseite: pakete.css. */

@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  /* Flächenhierarchie: Grund → sekundär → erhöht → interaktiv → hervorgehoben (Stahlblau-Unterton) */
  --f0:#06080c; --grund:#0a0d13; --f1:#0e121a; --f2:#141924; --f3:#1b2230; --f4:#252e42;
  --text:#eef2f8; --text-2:#b6c1d2; --text-3:#8d99ad;
  --linie:rgba(150,172,206,.12); --linie-2:rgba(150,172,206,.22); --linie-3:rgba(150,172,206,.4);
  /* Akzent: Champagnergold — Licht, Kanten, Zahlen, Knöpfe. Nie als große Fläche. */
  --gold-hell:#ffe6aa; --gold:#e9c274; --gold-tief:#b98d45; --gold-dunkel:#2e2410;
  --gold-verlauf:linear-gradient(135deg,#ffe9b4 0%,#e9c274 34%,#c99c52 68%,#f3d99e 100%);
  --fehler:#ff9a8d; --erfolg:#7fe3ab;
  --anzeige:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --fliess:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  /* Eine Bewegungssprache: kontrollierte Verzögerung am Ende (--ease), Überblendungen (--ease-io) */
  --ease:cubic-bezier(.2,.75,.1,1); --ease-io:cubic-bezier(.65,0,.25,1);
  --t-schnell:.22s; --t-mittel:.5s; --t-lang:.95s;
  --kopf-h:68px; --seite:clamp(1.15rem,4.2vw,2.75rem); --breite:1260px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 12px);background:var(--grund);color-scheme:dark}
body{margin:0;font:400 1.0625rem/1.65 var(--fliess);color:var(--text);background:var(--grund);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--anzeige);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance;overflow-wrap:break-word}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:#1a1205}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:12px;top:-90px;z-index:200;background:var(--gold);color:#1a1205;padding:.8em 1.2em;font-weight:700;text-decoration:none;border-radius:2px}
.sprung:focus{top:12px}

.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--seite)}
.abschnitt{position:relative;padding-block:clamp(5rem,10vw,9rem)}
.flaeche{background:var(--f1)}
.tief{background:var(--f0)}

/* ---------- Schriftrollen: jeder Ebene ihre eigene Stimme ---------- */
.etikett{display:flex;align-items:center;gap:.9rem;font:500 .72rem/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.etikett::before{content:"";flex:none;width:2.4rem;height:1px;background:var(--gold-verlauf)}
.etikett b{font-weight:500;color:var(--gold)}
.titel{font-weight:300;font-size:clamp(2.35rem,5.6vw,5rem);line-height:.98;letter-spacing:-.04em}
.titel strong,.anzeige strong{font-weight:780;color:var(--text)}
.titel em,.anzeige em{font-style:normal;font-weight:400;color:var(--gold)}
.lead{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.6;color:var(--text-2);max-width:38em}
.klein{font-size:.875rem;line-height:1.55;color:var(--text-3)}
.mono{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.naht{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-tief) 80%,transparent);opacity:.7}

/* Wiederkehrendes Merkmal: Sucherecken (Fokusklammern) an Medienrahmen */
.ecken{position:relative}
.ecken::after{content:"";position:absolute;inset:-9px;pointer-events:none;z-index:3;
  background:
    linear-gradient(var(--gold),var(--gold)) 0 0/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 0/1px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 0/1px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 100%/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 100%/1px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 100%/1px 16px no-repeat;opacity:.85}

/* Körnung nur dort, wo große dunkle Verläufe liegen (verhindert Streifenbildung, gibt Tiefe) */
.korn::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("korn.webp");background-size:160px;opacity:.07;z-index:0}

/* ---------- Knöpfe: Text + Pfeilkachel, Gold als Licht ---------- */
.btn{position:relative;display:inline-flex;align-items:center;min-height:52px;padding:0;border:0;border-radius:2px;background:none;cursor:pointer;text-decoration:none;font:650 .95rem/1.2 var(--fliess);letter-spacing:.01em;color:#1a1205;isolation:isolate;text-align:left}
.btn-primary{background:var(--gold-verlauf);background-size:220% 100%;background-position:0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(90,60,10,.35),0 14px 34px -14px rgba(233,194,116,.55);
  padding:0 0 0 1.4rem;transition:background-position var(--t-mittel) var(--ease),box-shadow var(--t-mittel) var(--ease),transform var(--t-schnell) var(--ease)}
.btn-primary::after{content:"";flex:none;align-self:stretch;width:52px;margin-left:1.2rem;border-left:1px solid rgba(60,40,5,.28);
  background:currentColor;-webkit-mask:url("pfeil-r.svg") center/18px no-repeat;mask:url("pfeil-r.svg") center/18px no-repeat;
  transition:transform var(--t-mittel) var(--ease)}
.btn-primary:hover{background-position:100% 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(90,60,10,.35),0 18px 44px -12px rgba(233,194,116,.7)}
.btn-primary:hover::after{transform:translateX(4px)}
.btn-primary:active{transform:translateY(1px)}
.btn-rand{padding:0 1.5rem;color:var(--text);border:1px solid var(--linie-3);background:rgba(255,255,255,.015);transition:border-color var(--t-schnell),background var(--t-schnell),color var(--t-schnell)}
.btn-rand:hover{border-color:var(--gold);background:rgba(233,194,116,.07);color:var(--gold-hell)}
.btn-klein{min-height:46px;font-size:.9rem}
.btn-klein.btn-primary{padding-left:1.15rem}
.btn-klein.btn-primary::after{width:44px;margin-left:1rem}
.link-pfeil{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;font-weight:600;color:var(--text);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size var(--t-mittel) var(--ease),color var(--t-schnell)}
.link-pfeil::after{content:"";width:18px;height:18px;background:var(--gold);-webkit-mask:url("pfeil-r.svg") center/contain no-repeat;mask:url("pfeil-r.svg") center/contain no-repeat;transition:transform var(--t-mittel) var(--ease)}
.link-pfeil:hover{background-size:100% 1px;color:var(--gold-hell)}
.link-pfeil:hover::after{transform:translateX(4px)}

/* ---------- Wortmarke: AV-Zeichen (Zickzack mit Goldbalken) + Name ---------- */
.marke{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text);min-height:44px}
.marke-zeichen{width:44px;height:33px;flex:none;overflow:visible}
.marke-zeichen polyline{fill:none;stroke:var(--text);stroke-width:3.6;stroke-linejoin:miter}
.marke-zeichen line{stroke:var(--gold);stroke-width:3.4}
.marke-name{display:flex;flex-direction:column;gap:.2rem;line-height:1}
.marke-name b{font:800 1.22rem/1 var(--anzeige);letter-spacing:-.03em}
.marke-name b i{font-style:normal;font-weight:300}
.marke-name span{font:500 .58rem/1 var(--mono);letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}

/* ---------- Kopf und Navigation: Instrumentenleiste, kein Milchglas ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--kopf-h);transition:background var(--t-mittel) var(--ease-io)}
.kopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--linie-2) 12%,var(--linie-2) 88%,transparent);opacity:0;transition:opacity var(--t-mittel)}
.kopf-fest{background:var(--grund)}
.kopf-fest::after{opacity:1}
.kopf-in{height:100%;display:flex;align-items:center;gap:1.5rem}
.nav{margin-inline:auto}
.nav ul{display:flex;gap:.2rem}
.nav li a{position:relative;display:flex;align-items:center;gap:.55rem;min-height:44px;padding:0 .85rem;text-decoration:none;font:500 .9rem/1 var(--fliess);color:var(--text-2);transition:color var(--t-schnell)}
.nav li a .n{font:500 .62rem/1 var(--mono);letter-spacing:.1em;color:var(--text-3);transition:color var(--t-schnell)}
.nav li a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:6px;height:1px;background:var(--gold-verlauf);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mittel) var(--ease)}
.nav li a:hover,.nav li a[aria-current]{color:var(--text)}
.nav li a:hover .n,.nav li a[aria-current] .n{color:var(--gold)}
.nav li a:hover::after,.nav li a[aria-current]::after{transform:scaleX(1)}
.nav-fuss{display:none}
.kopf-in>.btn:last-child{margin-left:auto}
.kopf-cta .cta-kurz{display:none}
.kopf-cta{white-space:nowrap}
/* mittlere Breiten (Tablet quer, kleine Laptops): kurze Beschriftung, damit der Knopf nicht umbricht */
@media (min-width:861px) and (max-width:1180px){.kopf-cta .cta-lang{display:none}.kopf-cta .cta-kurz{display:inline-flex;align-items:center}}
/* sechs Menüpunkte (seit 18.10.2026: + „Einrichtung“): zwischen Tablet hochkant und kleinem Laptop ohne Ziffern und mit engerem Abstand, damit der Anfrage-Knopf im Fenster bleibt (vorher war er unter ca. 930 px abgeschnitten) */
@media (min-width:861px) and (max-width:1099px){.nav li a{padding:0 .6rem;gap:0}.nav li a .n{display:none}.nav li a::after{left:.6rem;right:.6rem}}
@media (min-width:861px) and (max-width:899px){.kopf-in{gap:.7rem}.nav li a{padding:0 .45rem}.nav li a::after{left:.45rem;right:.45rem}}
.nav-toggle{display:none}

@media (max-width:860px){
  :root{--kopf-h:60px}
  .kopf-in{gap:.6rem}
  .marke-zeichen{width:38px;height:28px}
  .marke-name b{font-size:1.05rem;white-space:nowrap}
  .marke-name span{letter-spacing:.34em;font-size:.54rem}
  .marke{gap:.55rem}
  .kopf-cta.btn-klein.btn-primary{padding-left:.9rem}
  .kopf-cta.btn-klein.btn-primary::after{width:38px;margin-left:.7rem}
  .kopf-cta{margin-left:auto}
  .kopf-cta .cta-lang{display:none}
  .kopf-cta .cta-kurz{display:inline-flex;align-items:center}
  .nav-toggle{display:inline-flex;align-items:center;gap:.6rem;min-height:46px;padding:0 .2rem 0 .9rem;background:none;border:0;border-left:1px solid var(--linie-2);cursor:pointer;font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
  .nav-toggle::after{content:"";width:20px;height:9px;border-top:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transition:transform var(--t-mittel) var(--ease)}
  .nav-offen .nav-toggle::after{transform:scaleY(.2)}
  .nav{position:fixed;inset:var(--kopf-h) 0 0 0;margin:0;background:var(--f0);display:flex;flex-direction:column;justify-content:space-between;padding:2rem var(--seite) calc(2rem + env(safe-area-inset-bottom));overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--t-mittel) var(--ease-io),transform var(--t-mittel) var(--ease),visibility 0s linear var(--t-mittel)}
  body.nav-offen{overflow:hidden}
  .nav-offen .kopf{background:var(--f0)}
  .nav-offen .nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav ul{flex-direction:column;gap:0}
  .nav li{border-bottom:1px solid var(--linie)}
  .nav li a{min-height:72px;padding:0;gap:1.1rem;font:300 clamp(2.1rem,9.5vw,3rem)/1 var(--anzeige);letter-spacing:-.035em;color:var(--text)}
  .nav li a .n{font-size:.7rem;color:var(--gold);width:1.6rem}
  .nav li a::after{display:none}
  .nav li a[aria-current]{font-weight:700}
  .nav-fuss{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding-top:2rem}
  .nav-fuss p{font:500 .72rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
  .nav-mail{color:var(--text-2);min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- Fuß ---------- */
.fuss{position:relative;background:var(--f0);border-top:1px solid var(--linie);padding:clamp(3.5rem,7vw,6rem) 0 2rem;overflow:clip}
.fuss::before{content:"AV";position:absolute;right:-.04em;bottom:-.28em;font:800 clamp(14rem,34vw,30rem)/1 var(--anzeige);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(150,172,206,.09);pointer-events:none;user-select:none}
.fuss .wrap{position:relative}
.fuss-raster{display:grid;grid-template-columns:1.1fr 1.4fr;gap:3rem;padding-bottom:3.5rem}
.fuss-claim{margin-top:1.2rem;max-width:22em;color:var(--text-2);font:300 1.5rem/1.2 var(--anzeige);letter-spacing:-.02em}
.fuss-spalten{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.fuss nav h2{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.fuss nav a{display:flex;align-items:center;min-height:44px;color:var(--text-2);text-decoration:none;transition:color var(--t-schnell)}
.fuss nav a:hover,.fuss nav a[aria-current]{color:var(--text)}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding-top:1.5rem;border-top:1px solid var(--linie);font:400 .8rem/1.5 var(--mono);letter-spacing:.04em;color:var(--text-3)}
.fuss-unten a{color:var(--text-2);min-height:44px;display:inline-flex;align-items:center}
@media (max-width:860px){.fuss-raster{grid-template-columns:1fr;gap:2rem}}
@media (max-width:520px){.fuss-spalten{grid-template-columns:1fr}}

/* ---------- Rechtstexte: ruhig und gut lesbar, erbt nur Schrift, Flächen und Gold ---------- */
.recht{padding-top:calc(var(--kopf-h) + clamp(3rem,7vw,6rem))}
.recht-text{max-width:46rem}
.recht h1{font-weight:300;font-size:clamp(2.4rem,6vw,4.4rem);margin-bottom:3rem}
.recht h2{font:700 clamp(1.6rem,3vw,2.1rem)/1.1 var(--anzeige);margin:4rem 0 1.4rem;padding-top:1.4rem;position:relative}
.recht h2::before{content:"";position:absolute;top:0;left:0;width:3.2rem;height:2px;background:var(--gold-verlauf)}
.recht h3{font:600 1.08rem/1.3 var(--fliess);letter-spacing:0;margin:2.2rem 0 .5rem;color:var(--text)}
.recht p{color:#cdd5e2;line-height:1.75;margin:.8rem 0}
.recht a:not(.btn){color:var(--gold-hell);text-underline-offset:.2em;text-decoration-thickness:1px}
.recht a:not(.btn):hover{color:var(--gold)}
.recht .weiter{margin:1.6rem 0 0}
.recht .weiter a{display:inline-flex;align-items:center;min-height:44px}
.recht strong{color:var(--text)}
.anschrift{margin:1.4rem 0;padding:1.4rem 1.6rem;background:var(--f2);border:1px solid var(--linie-2);border-left:2px solid var(--gold)}
.anschrift p{margin:.3rem 0}
.stand{margin-top:3rem;font:500 .8rem/1.4 var(--mono);letter-spacing:.06em;color:var(--text-3)}

/* ---------- Einblenden: kontrolliertes Aufsteigen (nur mit Skript; ohne Skript ist alles da) ---------- */
.js .zeigen{opacity:0;transform:translate3d(0,30px,0);transition:opacity var(--t-lang) var(--ease),transform var(--t-lang) var(--ease)}
.js .zeigen.da{opacity:1;transform:none}
.js .zeigen.d1{transition-delay:.08s}.js .zeigen.d2{transition-delay:.16s}.js .zeigen.d3{transition-delay:.24s}.js .zeigen.d4{transition-delay:.32s}

@media (max-width:350px){.kopf-cta{display:none}}

@media (prefers-reduced-motion:reduce){
  html:not(.bewegung-an){scroll-behavior:auto}
  html.js:not(.bewegung-an) .zeigen{opacity:1;transform:none;transition:none}
  html:not(.bewegung-an) *, html:not(.bewegung-an) *::before, html:not(.bewegung-an) *::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
}