/* ------------------------------------------------------------------
   Robert Krinninger · Berg- und Skischule Garmisch-Partenkirchen
   Gestaltung: Entwurf A, dunkle Variante
   ------------------------------------------------------------------ */

/* --- Schriften, lokal auf dem Server. Keine Verbindung zu Google. ---
   Variable Fonts, Gewichtsachse 200–800, Zeichensatz Latin.
   Lizenz: SIL Open Font License 1.1 (siehe assets/fonts/LICENSE-*.txt) */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/archivo-variable-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("fonts/newsreader-variable-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";
  font-style:italic;
  font-weight:200 800;
  font-display:swap;
  src:url("fonts/newsreader-variable-latin-italic.woff2") format("woff2");
}

:root{
  --ground:#12161C; --surface:#181D25; --surface-2:#1F252E;
  --ink:#EDEFF2; --muted:#98A2B0; --line:#262E38;
  --mark:#E7E617; --mark-ink:#1C232F; --accent-text:#E7E617;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 20px 54px -22px rgba(0,0,0,.85);
  --maxw:1220px; --head:92px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
picture{display:contents}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:"Newsreader",Georgia,"Times New Roman",serif; font-weight:300;
  line-height:1.14; margin:0; letter-spacing:-.01em; text-wrap:balance}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.narrow{max-width:760px}
.eyebrow{display:flex; align-items:center; gap:12px; font-family:"Archivo",sans-serif;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--muted); margin:0}
.eyebrow::before{content:""; width:22px; height:3px; background:var(--mark); flex:0 0 auto}
.lede{font-size:20px; line-height:1.6; color:var(--muted); max-width:62ch}
.inline{text-decoration:none; font-weight:600; color:var(--accent-text);
  border-bottom:2px solid var(--mark); padding-bottom:2px}
.inline:hover{background:rgba(231,230,23,.16)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--mark);
  color:var(--mark-ink); padding:12px 20px; font-weight:600}
.skip:focus{left:0}

/* ---------- Kopfzeile ---------- */
.top{position:sticky; top:0; z-index:60; border-bottom:1px solid transparent; background:transparent;
  transition:background .4s ease, border-color .4s ease}
.top.solid{background:rgba(18,22,28,.92); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.top-in{display:flex; align-items:center; gap:30px; height:var(--head);
  max-width:var(--maxw); margin:0 auto; padding:0 28px}
.brand{margin-right:auto; display:flex; align-items:center}
.brand img{height:58px; width:auto}
nav.main{display:flex; align-items:center; gap:4px}
nav.main > div{position:relative}
nav.main a, nav.main button{font:inherit; font-family:"Archivo",sans-serif; font-size:14.5px;
  font-weight:500; color:inherit; background:none; border:0; padding:10px 13px;
  text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
nav.main > div > a, nav.main > div > button{position:relative}
nav.main > div > a::after, nav.main > div > button::after{content:""; position:absolute;
  left:13px; right:13px; bottom:4px; height:2px; background:var(--mark);
  transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.2,1)}
nav.main > div:hover > a::after, nav.main > div:hover > button::after,
nav.main > div:focus-within > a::after, nav.main > div:focus-within > button::after,
nav.main > div > a[aria-current]::after{transform:scaleX(1)}
.caret{width:8px; height:8px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); opacity:.55}
.menu{position:absolute; top:calc(100% + 4px); left:0; min-width:252px; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.22s ease}
nav.main > div:hover .menu, nav.main > div:focus-within .menu{opacity:1; visibility:visible; transform:none}
nav.main .menu a{display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  justify-content:flex-start; gap:2px; padding:10px 12px; width:100%}
.menu a small{font-size:12.5px; color:var(--muted); font-weight:400}
.menu a:hover{background:var(--surface-2)}
.tel{display:inline-flex; align-items:center; gap:9px; font-family:"Archivo",sans-serif;
  font-size:14.5px; font-weight:600; text-decoration:none; border:1px solid var(--line);
  padding:10px 16px; white-space:nowrap; background:rgba(255,255,255,.05)}
.tel:hover{border-color:var(--mark); box-shadow:inset 0 -2px 0 var(--mark)}
.burger{display:none}
.mobile-nav{display:none; border-top:1px solid var(--line); background:var(--surface); padding:10px 28px 22px}
.mobile-nav[hidden]{display:none !important}
.mobile-nav a{display:block; padding:13px 0; text-decoration:none;
  border-bottom:1px solid var(--line); font-weight:500; text-align:left}

/* ---------- Hero ---------- */
.hero{position:relative; display:grid; overflow:hidden;
  margin-top:calc(var(--head) * -1); background:var(--surface-2)}
.hero-folie{grid-area:1/1; position:relative; display:flex; align-items:flex-end;
  overflow:hidden; opacity:0; visibility:hidden;
  transition:opacity 1s ease-in-out, visibility 1s}
.hero-folie.ist-aktiv{opacity:1; visibility:visible}
.hero-start .hero-folie{min-height:min(94vh,880px); padding:160px 0 68px}
.hero-seite .hero-folie{min-height:min(64vh,560px); padding:150px 0 56px}
.hero-schmal .hero-folie{min-height:min(44vh,400px); padding:140px 0 44px}
.hero-bg{position:absolute; inset:-12% 0 -16% 0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 50%}
@media (prefers-reduced-motion: reduce){
  .hero-folie{transition:none}
}

/* Saisonwähler im Hero */
.hero-punkte{grid-area:1/1; z-index:6; align-self:end; justify-self:end;
  display:flex; gap:10px; margin:0 28px 26px}
.hero-punkte button{width:40px; height:26px; padding:0; border:0; cursor:pointer;
  background:none; position:relative}
.hero-punkte button::before{content:""; position:absolute; left:0; right:0; top:50%;
  height:5px; transform:translateY(-50%); background:rgba(255,255,255,.45);
  transition:background .3s ease, height .3s ease}
.hero-punkte button:hover::before{background:rgba(255,255,255,.8)}
.hero-punkte button.ist-aktiv::before{background:var(--mark); height:8px}
.hero-veil{position:absolute; inset:0; z-index:1; background:linear-gradient(to top,
  rgba(8,11,15,.88) 0%, rgba(8,11,15,.42) 46%, rgba(8,11,15,.14) 100%)}
.hero .wrap{position:relative; z-index:2; width:100%}
.hero .eyebrow{color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.7)}
.hero h1, .hero .hero-titel{margin:22px 0 0; line-height:1.03;
  font-family:"Newsreader",Georgia,"Times New Roman",serif; font-weight:300;
  letter-spacing:-.01em; text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-start h1, .hero-start .hero-titel{font-size:clamp(2.6rem,5.4vw,4.4rem); max-width:17ch}
.hero-seite h1, .hero-schmal h1{font-size:clamp(2.4rem,4.8vw,4rem); max-width:18ch}
.hero h1 em, .hero .hero-titel em{font-style:italic; color:var(--mark)}
.hero .lede{margin-top:24px; color:rgba(255,255,255,.92); text-shadow:0 1px 16px rgba(0,0,0,.55)}

.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:"Archivo",sans-serif; font-size:15px; font-weight:600; padding:15px 26px;
  border:1px solid transparent; transition:.2s ease}
.btn-fill{background:var(--mark); color:var(--mark-ink); border-color:var(--mark)}
.btn-fill:hover{filter:brightness(1.07)}
.btn-ghost{border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.06)}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.14)}
.btn-line{border-color:var(--line); color:var(--ink)}
.btn-line:hover{border-color:var(--mark); color:var(--mark)}

/* ---------- Abschnitte ---------- */
section{padding:clamp(64px,8vw,116px) 0}
section.eng{padding-top:0}
.sec-head{display:flex; flex-direction:column; gap:18px; max-width:70ch}
.sec-head h2{font-size:clamp(2rem,3.6vw,3rem)}
hr.rule{height:1px; background:var(--line); border:0; margin:0}

/* Fließtext */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.8rem,3vw,2.5rem); margin:0 0 18px}
.prose h3{font-size:clamp(1.35rem,2vw,1.7rem); margin:44px 0 12px}
.prose p{margin:0 0 18px; color:var(--muted); font-size:17.5px}
.prose p strong, .prose li strong{color:var(--ink); font-weight:600}
.prose ul{margin:0 0 20px; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.prose ul li{display:flex; gap:14px; align-items:flex-start; color:var(--muted)}
.prose ul li::before{content:""; flex:0 0 auto; width:12px; height:4px; margin-top:11px; background:var(--mark)}
.prose a{color:var(--accent-text); text-decoration:none; border-bottom:2px solid var(--mark)}
.prose > :first-child{margin-top:0}

/* Merkmale */
.claims{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:52px}
.claim{background:var(--ground); padding:34px 30px}
.claim b{display:block; font-family:"Newsreader",serif; font-weight:400; font-size:25px; margin-bottom:8px}
.claim p{font-size:15px; color:var(--muted)}

/* Karten */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:34px; margin-top:52px}
.cards-3{grid-template-columns:repeat(3,1fr); gap:28px}
.card{background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column;
  overflow:hidden; transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.card-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)}
.card-img img{width:100%; height:100%; object-fit:cover; transform:scale(1.02);
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.07)}
.card-label{position:absolute; top:0; left:0; z-index:2; font-family:"Archivo",sans-serif;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  background:var(--mark); color:var(--mark-ink); padding:7px 13px}
.card-body{padding:30px 30px 32px; display:flex; flex-direction:column; gap:15px; flex:1}
.card-body h3{font-size:27px}
.card-body p{color:var(--muted); font-size:16px}
.sublinks{list-style:none; margin:auto 0 0; padding:14px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column}
.sublinks a{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; text-decoration:none; font-weight:500; font-size:15.5px; border-bottom:1px solid var(--line)}
.sublinks li:last-child a{border-bottom:0}
.sublinks a:hover{box-shadow:inset 0 -2px 0 var(--mark)}
.arrow{transition:transform .3s ease; color:var(--accent-text); opacity:.7}
.sublinks a:hover .arrow{transform:translateX(5px); opacity:1}

/* Zitat-/Bildband */
.band{position:relative; overflow:hidden; padding:clamp(90px,13vw,170px) 0; color:#fff}
.band-bg{position:absolute; inset:-16% 0; z-index:0}
.band-bg img{width:100%; height:100%; object-fit:cover}
.band::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(95deg, rgba(10,14,18,.82) 12%, rgba(10,14,18,.38) 78%)}
.band .wrap{position:relative; z-index:2}
.band blockquote{margin:0; max-width:21ch; font-family:"Newsreader",serif; font-weight:200;
  font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.16; letter-spacing:-.015em}
.band cite{display:block; font-style:normal; margin-top:24px; font-family:"Archivo",sans-serif;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.7)}

/* Preistabellen */
.preise{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 56px; margin-top:12px}
.preisblock{margin-bottom:38px}
.preisblock h3{font-family:"Archivo",sans-serif; font-size:12px; letter-spacing:.17em;
  text-transform:uppercase; font-weight:600; color:var(--muted); margin:0 0 4px;
  padding-bottom:13px; border-bottom:1px solid var(--mark)}
.preis{display:flex; align-items:baseline; gap:16px; padding:15px 0; border-bottom:1px solid var(--line)}
.preis span:first-child{flex:1; font-size:16px}
.preis span:last-child{font-variant-numeric:tabular-nums; font-weight:600; font-size:16px; white-space:nowrap}
.preis small{display:block; color:var(--muted); font-size:13.5px; font-weight:400}
.tabelle-scroll{overflow-x:auto}
table.preistabelle{width:100%; border-collapse:collapse; font-size:15.5px; min-width:480px}
table.preistabelle th, table.preistabelle td{text-align:right; padding:13px 10px;
  border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap}
table.preistabelle th:first-child, table.preistabelle td:first-child{text-align:left; white-space:normal}
table.preistabelle thead th{font-family:"Archivo",sans-serif; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom-color:var(--mark)}

/* Hinweiskasten */
.hinweis{border-left:3px solid var(--mark); background:var(--surface); padding:24px 28px;
  margin:34px 0; display:flex; flex-direction:column; gap:8px}
.hinweis b{font-weight:600}
.hinweis p{color:var(--muted); font-size:16px}

/* Steckbrief / Fakten */
.fakten{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin:34px 0}
.fakt{background:var(--ground); padding:22px 24px}
.fakt b{display:block; font-family:"Newsreader",serif; font-weight:400; font-size:22px}
.fakt span{font-family:"Archivo",sans-serif; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600}

/* Tourenliste */
.touren{border-top:1px solid var(--mark); margin-top:8px}
.tour{display:grid; grid-template-columns:1fr auto; gap:14px 24px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line)}
.tour h3{font-size:22px; font-family:"Newsreader",serif; font-weight:400}
.tour p{grid-column:1/-1; color:var(--muted); font-size:15.5px; max-width:70ch; margin-top:-6px}
.tour .marke{font-family:"Archivo",sans-serif; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:4px 10px; white-space:nowrap}

/* Bildpaar */
.bildpaar{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin:44px 0}
.bildpaar figure{margin:0}
.bildpaar img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4}
.bildpaar figcaption{font-size:13.5px; color:var(--muted); margin-top:10px}

/* Über mich / Porträt */
.split{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,76px); align-items:center}
.split-oben{align-items:start}
.portraet{position:relative; overflow:hidden; background:var(--surface-2)}
.portraet img{width:100%; aspect-ratio:3/4; object-fit:cover}
.quali{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:11px}
.quali li{display:flex; gap:14px; align-items:flex-start; font-size:16px}
.quali li::before{content:""; flex:0 0 auto; width:12px; height:4px; margin-top:11px; background:var(--mark)}

/* Verbandslogo */
.verband{display:flex; align-items:center; gap:26px; margin-top:44px; padding-top:28px;
  border-top:1px solid var(--line); flex-wrap:wrap}
.verband img{width:auto; flex:0 0 auto}
.verband img.ivbv{height:62px}
.verband img.dslv{height:42px}
.verband p{font-size:14.5px; color:var(--muted); max-width:40ch}

/* Kontakt */
.kontaktflaeche{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.kontakt-in{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(36px,6vw,76px); align-items:start}
.kontaktliste{display:flex; flex-direction:column; margin-top:30px}
.kontaktliste a, .kontaktliste div{display:flex; gap:18px; align-items:baseline; padding:15px 0;
  border-bottom:1px solid var(--line); text-decoration:none}
.kontaktliste b{flex:0 0 108px; font-family:"Archivo",sans-serif; font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:600}
.kontaktliste span{font-size:18px}
.kontaktliste a:hover span{box-shadow:inset 0 -2px 0 var(--mark)}

/* Fußzeile */
footer{padding:72px 0 120px; font-size:15px}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:42px}
.foot-grid img.logo{height:52px; width:auto; margin-bottom:16px}
.foot-grid h2{font-family:"Archivo",sans-serif; font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); margin:0 0 18px; font-weight:600}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot-grid a{text-decoration:none; color:var(--muted)}
.foot-grid a:hover{color:var(--ink); box-shadow:inset 0 -2px 0 var(--mark)}
.foot-grid p{color:var(--muted)}
.foot-bottom{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
.foot-bottom a{color:var(--muted); text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}

/* Mobiler Anrufbalken */
.callbar{display:none}

/* Zurück nach oben */
.nach-oben{position:fixed; right:22px; bottom:26px; z-index:65; width:50px; height:50px;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  background:var(--mark); color:var(--mark-ink); border:0; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.nach-oben.sichtbar{opacity:1; visibility:visible; transform:none}
.nach-oben:hover{filter:brightness(1.08)}
.nach-oben svg{width:20px; height:20px; display:block}

/* Video erst nach Klick (Zwei-Klick-Lösung) */
.videoblock{margin:40px 0}
.video{position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden;
  border:1px solid var(--line)}
.video img{width:100%; height:100%; object-fit:cover; opacity:.55}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-start{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; background:rgba(10,14,18,.45); border:0; cursor:pointer;
  color:#fff; font-family:"Archivo",sans-serif; padding:24px; text-align:center}
.video-start:hover .video-knopf{transform:scale(1.06)}
.video-knopf{width:72px; height:72px; background:var(--mark); color:var(--mark-ink);
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease}
.video-knopf svg{width:26px; height:26px}
.video-start b{font-size:17px; font-weight:600}
.video-start span{font-size:13.5px; color:rgba(255,255,255,.8); max-width:46ch; line-height:1.5}
.video-hinweis{font-size:13.5px; color:var(--muted); margin-top:12px}

/* Animation */
.reveal{opacity:0; transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
}
:focus-visible{outline:3px solid var(--mark); outline-offset:3px}

/* ---------- Umbrüche ---------- */
@media (max-width:1000px){
  .claims{grid-template-columns:1fr}
  .cards, .cards-3{grid-template-columns:1fr; gap:24px}
  .preise{grid-template-columns:1fr; gap:0}
  .split{grid-template-columns:1fr; gap:34px}
  .kontakt-in{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:760px){
  :root{--head:78px}
  body{font-size:16px}
  nav.main, .tel{display:none}
  .burger{display:inline-flex; align-items:center; margin-left:auto; font:inherit;
    font-family:"Archivo",sans-serif; font-size:14px; font-weight:600;
    background:rgba(255,255,255,.05); border:1px solid var(--line); padding:10px 15px;
    cursor:pointer; color:inherit}
  .brand img{height:46px}
  .mobile-nav{display:block}
  .hero-start .hero-folie{padding-top:122px; min-height:78vh}
  .hero-seite .hero-folie{padding-top:116px; min-height:52vh}
  .hero-schmal .hero-folie{padding-top:112px; min-height:38vh}
  .hero-punkte{margin:0 28px 20px}
  .hero-veil{background:linear-gradient(to top, rgba(8,11,15,.9) 0%, rgba(8,11,15,.56) 58%, rgba(8,11,15,.3) 100%)}
  .bildpaar{grid-template-columns:1fr}
  .tour{grid-template-columns:1fr}
  .tour .marke{white-space:normal; justify-self:start}
  .kontaktliste b{flex-basis:84px}
  .callbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    border-top:1px solid var(--line)}
  .callbar a{flex:1; text-align:center; padding:16px; text-decoration:none;
    font-family:"Archivo",sans-serif; font-weight:600; font-size:15px;
    background:var(--surface); color:var(--ink)}
  .callbar a.primary{background:var(--mark); color:var(--mark-ink)}
  footer{padding-bottom:108px}
}
@media (max-width:460px){
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- Druck ---------- */
@media print{
  .top, .callbar, .hero-bg, .hero-veil, .band-bg{display:none}
  body{background:#fff; color:#000}
  .hero{min-height:0; margin:0; padding:20px 0}
  a{color:#000}
}