/* laconia.ch – dunkel, knapp. Geist selbst gehostet (SIL OFL). */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-100_900-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-100_900-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{--grund:#0e0f10;--tinte:#d6d7d9;--hell:#f3f3f4;--leise:#8b8e93;--schatten:#3b3d42;--linie:#25272b;--licht:150 156 255;--status:226 180 90;--rand:clamp(16px,4vw,56px);--weich:cubic-bezier(.16,1,.3,1);color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--linie) var(--grund);caret-color:var(--hell)}
::selection{background:var(--hell);color:var(--grund)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;padding-inline:var(--rand);overflow-x:clip;background:var(--grund);color:var(--tinte);font:400 1.0625rem/1.55 "Geist",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--leise);transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--hell);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--hell);outline-offset:3px;border-radius:2px}
.springen{position:absolute;left:-9999px}
.springen:focus{left:var(--rand);top:12px;background:var(--hell);color:var(--grund);padding:8px 12px;z-index:2}

/* Kopf und Fuss: winzig, mit Unterstrich, der sich beim Zeigen aufbaut */
.kopf{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-block:clamp(20px,3vw,32px)}
.marke{font-size:1.125rem;font-weight:500;letter-spacing:-.015em;text-decoration:none;color:var(--hell)}
.kopf nav{display:flex;gap:clamp(18px,3vw,36px);font-size:.9375rem}
.kopf nav a,.fuss a,.strich{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .2s,background-size .45s var(--weich)}
.kopf nav a,.fuss a{color:var(--leise)}
.kopf nav a:hover,.fuss a:hover,.strich:hover,.kopf nav a[aria-current=page],.fuss a[aria-current=page]{color:var(--hell);background-size:100% 1px}
main{flex:1}

/* Bühne: «If.» unten links, Unterzeile unten rechts, ein Lichtschein folgt dem Zeiger */
.buehne{position:relative;isolation:isolate;min-height:calc(100svh - 96px);display:grid;align-content:end;gap:28px;padding-bottom:clamp(36px,6vw,88px)}
.buehne::before{content:"";position:absolute;inset:-120px calc(var(--rand) * -1) 0;z-index:-1;pointer-events:none;background:radial-gradient(760px circle at var(--lx,82%) var(--ly,78%),rgb(var(--licht) / .07),rgb(var(--licht) / .035) 30%,rgb(var(--licht) / .012) 55%,transparent 78%);opacity:.7;transition:opacity .8s var(--weich)}
.buehne.licht::before{opacity:1}
.titel{margin:0;font-size:clamp(4rem,24.5vw,26rem);font-weight:200;line-height:.82;letter-spacing:-.04em;color:var(--hell);white-space:nowrap}
.titel .punkt{display:inline-block}
.titel.tippt .punkt{animation:blinken .8s infinite}
.titel.tippt.schreibt .punkt{animation:none}
@media (max-width:599px){.titel{font-size:29.5vw}}
@keyframes blinken{0%,49.9%{opacity:1}50%,100%{opacity:0}}
/* Intro: Zähler 000 bis 100, bevor der Name getippt wird */
.zaehler{position:absolute;left:0;bottom:clamp(36px,6vw,88px);margin:0;font-size:clamp(3rem,10vw,9rem);font-weight:200;line-height:.82;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--leise);opacity:0;transition:opacity .3s}
.zaehler.laeuft{opacity:1}
.unterzeile{display:grid;gap:6px;align-content:end;font-size:.9375rem;color:var(--leise)}
.unterzeile p{margin:0}
.unterzeile p:first-child:not(.uhr){color:var(--tinte)}
.unterzeile a{color:var(--tinte)}
.uhr{font-variant-numeric:tabular-nums;white-space:nowrap}
.uhr.rollt{display:flex;line-height:1.25em}
.uhr.rollt>span{display:block;height:1.25em}
.uhr .ort{margin-right:.4em}
.rolle{overflow:hidden}
.rolle>span{display:block;transition:transform .5s var(--weich)}
.rolle>span>span{display:block}
@media (prefers-reduced-motion:reduce){.rolle>span{transition:none}}
@media (min-width:1200px){.buehne{grid-template-columns:1fr auto;align-items:end}.unterzeile{justify-items:end;text-align:right;padding-bottom:.9em}}
@media (prefers-reduced-motion:no-preference){.unterzeile{animation:zeigen .8s .9s var(--weich) both}}
@keyframes zeigen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Über: der Satz wird beim Lesen Wort für Wort hell */
.ueber{position:relative;padding-block:clamp(56px,10vw,144px)}
.ueber .gross{max-width:none}
.gross{margin:0;max-width:24ch;font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:300;line-height:1.2;letter-spacing:-.02em;color:var(--tinte);text-wrap:balance}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .lesen .wort{animation:aufhellen linear both;animation-timeline:view();animation-range:entry 15% cover 42%}
  }
}
@keyframes aufhellen{from{color:var(--schatten)}to{color:var(--tinte)}}

/* Reihen: Produkte und Kontakt */
.reihe{position:relative;display:grid;gap:20px;padding-block:clamp(40px,7vw,96px)}
.ueber::before,.reihe::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linie);transform-origin:0 50%}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ueber::before,.reihe::before{animation:ziehen linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
}
@keyframes ziehen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:900px){.reihe{grid-template-columns:minmax(180px,1fr) 3fr;gap:32px}}
.etikett{margin:0;font-size:.9375rem;font-weight:400;color:var(--leise)}
.produkte{list-style:none;margin:0;padding:0}
.produkt{display:grid;gap:6px;padding-block:0 24px}
.produkt+.produkt{border-top:1px solid var(--linie);padding-top:24px}
.produkt h3{margin:0;font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:400;letter-spacing:-.015em;color:var(--hell)}
.produkt h3 a{text-decoration:none}
.pfeil{width:.55em;height:.55em;margin-left:.3em;vertical-align:.05em;transition:transform .3s var(--weich)}
.produkt h3 a:hover .pfeil{transform:translate(3px,-3px)}
.produkt p{margin:0;max-width:52ch}
.stand{display:flex;align-items:center;gap:10px;color:var(--leise);font-size:.9375rem}
.lampe{flex:none;width:6px;height:6px;background:rgb(var(--status))}
@media (prefers-reduced-motion:no-preference){.lampe{animation:pulsieren 2.4s var(--weich) infinite}}
@keyframes pulsieren{0%{box-shadow:0 0 0 0 rgb(var(--status) / .45)}70%,100%{box-shadow:0 0 0 7px rgb(var(--status) / 0)}}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 8px;font-size:clamp(1.5rem,4vw,3rem);font-weight:300;letter-spacing:-.02em}
.mail a{color:var(--hell);text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s var(--weich)}
.mail a:hover{background-size:0 1px;background-position:100% 100%}
.kopieren{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--linie);border-radius:999px;background:transparent;color:var(--leise);font:400 .8125rem/1 "Geist",system-ui,sans-serif;letter-spacing:0;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.kopieren[hidden]{display:none}
.kopieren:hover{color:var(--hell);border-color:var(--leise)}
.kopieren:active{background:var(--linie)}
.kopieren.ok{color:var(--hell);border-color:var(--hell)}
.kopieren svg{width:14px;height:14px}
.leise{margin:0;color:var(--leise)}

/* Fuss */
.fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:28px;border-top:1px solid var(--linie);font-size:.875rem;color:var(--leise)}
.fuss p{margin:0}
.fuss nav{display:flex;flex-wrap:wrap;gap:20px}

/* Textseiten: Support, Privacy, Legal */
.text{max-width:68ch;padding-block:clamp(32px,6vw,96px)}
.text h1{margin:0 0 clamp(24px,4vw,48px);font-size:clamp(2.75rem,8vw,5.5rem);font-weight:250;line-height:1;letter-spacing:-.04em;color:var(--hell);text-wrap:balance}
.text h2{margin:2.4em 0 .5em;font-size:1.0625rem;font-weight:500;color:var(--hell)}
.text p{margin:0 0 1em}
.text .gross{margin-bottom:1.4em}
.angaben{margin:2em 0}
.angaben div{display:grid;grid-template-columns:minmax(9rem,1fr) 2fr;gap:16px;padding-block:14px;border-top:1px solid var(--linie)}
.angaben dt{color:var(--leise)}
.angaben dd{margin:0}
@media (max-width:520px){.angaben div{grid-template-columns:1fr;gap:2px}}
.liste{padding-left:1.1em}
.liste li{margin-bottom:.4em}
.offen{color:var(--leise);font-style:italic}

/* Zeiger: ein kleines Quadrat folgt der Maus, über Links und Knöpfen wird es gross und kehrt die Farben um */
.zeiger{position:fixed;left:0;top:0;z-index:50;width:10px;height:10px;margin:-5px 0 0 -5px;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .2s,width .3s var(--weich),height .3s var(--weich),margin .3s var(--weich)}
.zeiger.da{opacity:1}
.zeiger.gross{width:40px;height:40px;margin:-20px 0 0 -20px}
html.mit-zeiger,html.mit-zeiger a,html.mit-zeiger button{cursor:none}