/* BOFF. · gemeinsame Gestaltung (System von miraki.ch, aber schwarz)
   Schwarz-Weiss. Einzige Farbe: das leise Prisma hinter WE NEVER DO BORING (boff-prism.js).
   Patron Black nur im Logo (assets/boff-logo.svg, als Pfad – keine Schriftdatei nötig).
   Albert Sans 400/600 für alles andere, grosse Zeilen 400 eng gesetzt wie bei miraki. Selbst ausgeliefert, keine Anfrage an Google. */

/* Albert Sans 400–600 (SIL OFL, fonts/OFL.txt) */
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/albertsans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/albertsans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#0A0A0A;            /* Grund */
  --fg:#F3F1EC;            /* Schrift, warmes Weiss */
  --mute:#8C8983;          /* Nebentext */
  --soft:#C9C6BF;          /* Fliesstext in Antworten */
  --line:#2A2926;          /* feine Trennlinien */
  --surface:#161616;       /* Flächen (Platzhalter, Bild lädt) */
  --text:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --m:40px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--text);font-weight:400;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p{margin:0;font-weight:400}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.pad{padding-inline:var(--m)}
.lbl{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.lbl > h2{font:inherit;letter-spacing:inherit}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:15px;text-decoration:none}
.skip:focus{top:16px}   /* «Zum Inhalt springen» erscheint nur mit der Tastatur */   /* Abschnittstitel als echte H2, sieht aus wie das Label */
.mute{color:var(--mute)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logo: immer assets/boff-logo.svg (Patron Black als Pfad), eingefärbt mit der Schriftfarbe */
.logo{display:inline-block;height:1em;aspect-ratio:2766/724;background:currentColor;
  -webkit-mask:url(assets/boff-logo.svg) center/contain no-repeat;mask:url(assets/boff-logo.svg) center/contain no-repeat}

/* Navigation: fix über der Seite, links und rechts um den doppelten Seitenrand eingezogen (wie bei miraki).
   Über dem Film ohne Fläche, über der Seite schwarz. Die Kante ist genau die Unterkante des Films (--e setzt boff-site.js). */
.nav{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;padding-inline:calc(var(--m) * 2);color:var(--fg)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);clip-path:inset(var(--e,0px) 0 0 0)}
.nav .home{display:block;line-height:0;text-decoration:none}
/* Startseite: das Logo erscheint erst, wenn die grosse Marke im Hero halb weg ist (boff-site.js) */
.nav .home{transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
.nav .home.away{opacity:0;pointer-events:none}
.nav .logo{height:22px}
.nav nav{display:flex;gap:32px;font-size:19px;margin-left:auto}
.nav nav a{text-decoration:none;text-underline-offset:6px;text-decoration-thickness:1px}
.nav nav a:hover{text-decoration-line:underline}
/* «Lass uns reden»: feine Kontur rechts in der Navigation, füllt sich beim Darüberfahren (Yves: nicht reisserisch) */
.nav .cta{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;border:1px solid rgba(243,241,236,.55);color:var(--fg);font-size:18px;line-height:1;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.nav .cta:hover,.nav .cta[aria-current]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.nav .cta:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.burger{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:50%;background:var(--fg);display:none;place-content:center;gap:5px;cursor:pointer;flex:none}
.burger i{display:block;width:16px;height:1.5px;background:var(--bg);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.burger:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* Buttons: runde Kapsel mit Text und runder Taste am Ende. Auf Schwarz weiss, die Taste schwarz. */
.b1,.playbtn{display:inline-flex;align-items:center;gap:16px;background:var(--fg);color:var(--bg);border:0;border-radius:999px;font:inherit;font-size:16px;line-height:1.15;cursor:pointer;padding:5px 5px 5px 22px;text-decoration:none;text-align:left;transition:background .2s}
.b1:hover,.playbtn:hover{background:#fff}
.b1 > i,.playbtn > i{display:grid;place-items:center;font-style:normal;flex:none}
/* nur in den Kapseln: .svp .key gehört dem Player */
.b1 .key,.playbtn .key{width:44px;height:44px;display:block}
.b1 .key circle,.playbtn .key circle{fill:var(--bg)}
.b1 .key path,.playbtn .key path{fill:var(--fg)}
.b1 .key path.ar,.playbtn .key path.ar{fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b1:hover .key circle,.playbtn:hover .key circle{fill:#2A2A2A}

/* Blur-Reveal der grossen Texte beim Scrollen (wie miraki) */
.wd{transition:filter .9s cubic-bezier(.2,.8,.2,1),opacity .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.pre .wd{filter:blur(12px);opacity:0}
@media (prefers-reduced-motion:reduce){.wd{transition:none}.pre .wd{filter:none;opacity:1}}

/* Fragen: ruhig, aufklappbar, keine Kästen. Plus/Minus als Vektor. */
.faq__k{flex:none;width:28px;height:28px;background:center/28px 28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23F3F1EC' stroke-linecap='round'%3E%3Ccircle cx='14' cy='14' r='13.4' stroke-width='1.2'/%3E%3Cpath d='M9 14h10M14 9v10' stroke-width='1.4'/%3E%3C/svg%3E")}
details[open] > summary .faq__k,[aria-expanded=true] > .faq__k{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23F3F1EC' stroke-linecap='round'%3E%3Ccircle cx='14' cy='14' r='13.4' stroke-width='1.2'/%3E%3Cpath d='M9 14h10' stroke-width='1.4'/%3E%3C/svg%3E")}

/* Footer: Leistungen und Studio verlinkt (interne Verlinkung), Rechtliches klein darunter */
.ft{border-top:1px solid var(--line);padding-block:56px 32px;font-size:15px}
.ft__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px}
.ft__logo{grid-column:1/span 3;line-height:0;align-self:start;color:var(--fg)}
.ft__logo .logo{height:26px}
.ft__col{grid-column:span 3;display:grid;gap:14px;align-content:start}
.ft__col .lbl{color:var(--mute)}
.ft__col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft__col li:not(.ft__x) + .ft__x{margin-top:10px}
.ft__x a{color:var(--mute)}
.ft a{text-decoration:none;color:var(--soft)}
.ft a:hover{color:var(--fg)}
.ft address{font-style:normal;line-height:1.7;color:var(--soft)}
.ft__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.ft__bot a{color:var(--mute)}

.nav nav a[aria-current]{text-decoration-line:underline}
@media (max-width:1100px){.ft__logo{grid-column:1/-1}.ft__col{grid-column:span 4}}
@media (max-width:900px){.ft__col{grid-column:1/-1}}

/* Footer alt (eine Zeile) */
.foot{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;padding-block:30px 28px;border-top:1px solid var(--line)}
.foot .logo{height:20px}
.foot .small{font-size:13.5px;color:var(--mute);display:flex;align-items:center;gap:6px 24px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--fg)}

@media (max-width:900px){
  :root{--m:20px}
  .nav nav{gap:18px;font-size:16px}
  .foot{align-items:flex-start;flex-direction:column;gap:18px}
}
/* Handy: Menü-Taste statt Links; sie klappt die Links als schwarze Fläche auf */
@media (max-width:480px){
  .nav{padding-inline:var(--m);height:68px}
  .nav .logo{height:19px}
  .nav nav{display:none}
  .nav .cta{margin-left:auto;height:44px;padding:0 16px;font-size:15px}
  .burger{display:grid}
  .nav.menu::before{clip-path:none}
  .nav.menu .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav.menu .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .nav.menu nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:4px var(--m) 28px;font-size:30px;line-height:1.2;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
  .nav.menu nav a{padding:7px 0}
}