/* Vitren · Werkzeug-Seiten (#902): Link-Seite /links und alle Test-Seiten (/website-check, später /ssl-check …).
   Welt der Hauptseite (index.html): Travertin, Tinte, Lapis, Ochsenblut, Messing; Archivo (Expanded für Display), Ruthie für einzelne Wörter;
   Pillen-Knöpfe, Siegel mit Textring. Unterschied zur Hauptseite: keine 3D-Szene, kein Scroll-Theater, die Antwort kommt sofort. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100% 125%;font-display:swap;src:url(fonts/archivo-v25-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}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100% 125%;font-display:swap;src:url(fonts/archivo-v25-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Ruthie';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ruthie-v28-latin.woff2) format('woff2')}

:root{
  --travertin:#EEE7DB; --travertin-2:#E4DACA; --travertin-3:#D8CCB8;
  --tinte:#17171A; --tinte-2:#46433D; --tinte-3:#5E5850;
  --lapis:#1E3B87; --lapis-tief:#132A66; --glas:#D5DFE4;
  --ochsenblut:#4A1523; --ochsenblut-2:#7A2236;
  --creme:#F7F2E9; --messing:#C9A45C; --messing-tief:#8D6B2F;
  --linie:rgba(23,23,26,.14); --linie-2:rgba(23,23,26,.26);
  --ease:cubic-bezier(.16,1,.3,1);
  --rand:clamp(20px,5vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;background:var(--travertin);color:var(--tinte);-webkit-text-size-adjust:100%;scrollbar-color:var(--tinte-3) var(--travertin-2);scrollbar-width:thin}
body{font:400 17px/1.55 'Archivo',system-ui,sans-serif;font-stretch:100%;min-height:100svh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(70% 46% at 50% 0%,#FBF7EF 0%,rgba(251,247,239,0) 70%),radial-gradient(60% 40% at 100% 100%,rgba(216,204,184,.55),rgba(216,204,184,0) 70%),var(--travertin);background-attachment:scroll}
::selection{background:var(--lapis);color:var(--creme)}
:focus-visible{outline:2px solid var(--lapis);outline-offset:4px;border-radius:10px}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:var(--travertin-2)}::-webkit-scrollbar-thumb{background:var(--tinte-3);border-radius:9px}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums lining-nums}
.d{font-stretch:125%;font-weight:500;text-transform:uppercase;letter-spacing:-.025em;line-height:.94}
.schrift{font-family:'Ruthie',cursive;font-weight:400;text-transform:none;letter-spacing:0;font-stretch:100%;line-height:1;color:var(--lapis)}
.leise{color:var(--tinte-3)}

/* Siegel: Vitren-Zeichen im Textring, wie oben links auf der Hauptseite */
.siegel{position:relative;display:block;width:var(--s,88px);aspect-ratio:1;text-decoration:none;color:var(--tinte)}
.siegel svg{position:absolute;inset:0;width:100%;height:100%}
.siegel__ring text{font:600 8.4px 'Archivo',sans-serif;font-stretch:125%;letter-spacing:.12em;fill:currentColor}
.siegel__ring{animation:drehen 40s linear infinite}
.siegel__zeichen{fill:currentColor}
@keyframes drehen{to{transform:rotate(360deg)}}
.siegel__ring{transform-origin:50% 50%}

/* Pillen-Knöpfe (Hauptseite .pille): Fläche schiebt sich beim Hover von unten herein */
.pille{--pf:var(--tinte);--pt:var(--creme);--ph:var(--lapis);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;height:56px;padding:0 1.35rem 0 1.6rem;border-radius:999px;background:var(--pf);color:var(--pt);text-decoration:none;font-weight:500;font-size:1rem;letter-spacing:.005em;overflow:hidden;isolation:isolate;white-space:nowrap;transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 12px 30px -16px rgba(23,23,26,.55)}
.pille::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ph);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
.pille:hover::before,.pille:focus-visible::before{transform:none}
.pille:active{transform:scale(.98)}
.pille .pfeil{width:30px;height:30px;border-radius:50%;background:var(--pt);color:var(--pf);display:grid;place-items:center;flex:none;overflow:hidden;transition:background .5s var(--ease)}
.pille .pfeil svg{width:13px;height:13px}
.pille:hover .pfeil svg{animation:pfeil .6s var(--ease)}
@keyframes pfeil{0%{transform:none}45%{transform:translateX(130%)}46%{transform:translateX(-130%)}100%{transform:none}}
.pille--lapis{--pf:var(--lapis);--ph:var(--lapis-tief)}
.pille--hell{--pf:var(--creme);--pt:var(--tinte);--ph:#fff;box-shadow:inset 0 0 0 1px var(--linie),0 10px 26px -18px rgba(23,23,26,.5)}
.pille[disabled]{cursor:progress}

/* Prüf-Feld: eine Zeile, Eingabe + Knopf in einer Fassung (wie eine Messing-Plakette auf Stein) */
.feld{position:relative;display:flex;align-items:center;gap:8px;padding:7px 7px 7px 22px;border-radius:999px;background:var(--creme);
  box-shadow:inset 0 0 0 1px var(--linie-2),inset 0 2px 6px rgba(23,23,26,.06),0 22px 44px -30px rgba(23,23,26,.55);transition:box-shadow .35s var(--ease)}
.feld:focus-within{box-shadow:inset 0 0 0 1.5px var(--lapis),0 0 0 5px rgba(30,59,135,.12),0 22px 44px -30px rgba(23,23,26,.55)}
.feld input{flex:1;min-width:0;height:50px;border:0;background:transparent;font:500 18px/1 'Archivo',sans-serif;color:var(--tinte);caret-color:var(--lapis);outline:none}
.feld input::placeholder{color:#857D71}
.feld .pille{height:50px;padding:0 1.1rem 0 1.35rem;flex:none}
.feld__lauf{position:absolute;left:28px;right:28px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .2s}
.feld__lauf::after{content:"";position:absolute;inset:0;width:38%;background:linear-gradient(90deg,transparent,var(--messing),transparent);animation:lauf 1.1s var(--ease) infinite}
.laeuft .feld__lauf{opacity:1}
@keyframes lauf{from{transform:translateX(-100%)}to{transform:translateX(270%)}}
.feld-hinweis{min-height:1.4em;margin:10px 4px 0;font-size:14px;color:var(--ochsenblut-2)}

/* Status-Zeichen (gezeichnet, nie nur Farbe: immer mit Wort daneben) */
.zeichen-s{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.zeichen-s svg{width:12px;height:12px}
.zeichen-s--gut{background:var(--lapis);color:var(--creme)}
.zeichen-s--achtung{background:transparent;color:var(--messing-tief);box-shadow:inset 0 0 0 2px var(--messing-tief)}
.zeichen-s--fehlt{background:var(--ochsenblut);color:var(--creme)}

/* Gespräch: Esteban mit Siegel, drei Wege */
.person{display:flex;align-items:center;gap:16px}
.person__bild{position:relative;flex:none;width:84px;height:84px}
.person__bild img{position:absolute;inset:13px;width:58px;height:58px;border-radius:50%;object-fit:cover}   /* #910 Esteban: kein Goldring zwischen Textring und Bild */
.person__bild svg{position:absolute;inset:0;width:100%;height:100%;animation:drehen 50s linear infinite reverse}
.person__bild text{font:600 7.6px 'Archivo',sans-serif;font-stretch:125%;letter-spacing:.1em;fill:var(--tinte-2)}
.person__name{font-weight:600;font-stretch:112%;font-size:19px;line-height:1.2}
.person__srf{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:var(--tinte-3)}
.person__srf img{height:17px;width:auto}
.wege{display:grid;gap:10px;margin-top:18px}
.weg-haupt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;border-radius:22px;background:var(--tinte);color:var(--creme);text-decoration:none;box-shadow:0 22px 40px -26px rgba(23,23,26,.75);transition:transform .45s var(--ease),background-color .3s}
.weg-haupt:hover{background:var(--lapis-tief)}
.weg-haupt:active{transform:scale(.985)}
.weg-haupt small{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-stretch:125%;opacity:.72}
.weg-haupt b{display:block;margin-top:4px;font-weight:500;font-stretch:112%;font-size:clamp(24px,7vw,30px);letter-spacing:-.01em}
.weg-haupt .pfeil{width:44px;height:44px;border-radius:50%;background:var(--creme);color:var(--tinte);display:grid;place-items:center;flex:none}
.weg-haupt .pfeil svg{width:18px;height:18px}
.weg{display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;border-radius:18px;background:var(--creme);box-shadow:inset 0 0 0 1px var(--linie);text-decoration:none;text-align:left;transition:box-shadow .3s,transform .45s var(--ease)}
.weg:hover{box-shadow:inset 0 0 0 1.5px var(--tinte)}
.weg:active{transform:scale(.985)}
.weg__ikon{width:40px;height:40px;border-radius:50%;background:var(--travertin-2);display:grid;place-items:center;flex:none}
.weg__ikon svg{width:20px;height:20px}
.weg__text{flex:1;line-height:1.25}
.weg__text small{display:block;font-size:13px;color:var(--tinte-3)}
.weg__text b{font-weight:600;font-size:16px}
.weg > svg{width:13px;height:13px;flex:none}

.rueckruf{display:grid;gap:10px;margin-top:4px;padding:18px;border-radius:18px;background:var(--creme);box-shadow:inset 0 0 0 1px var(--linie)}
.rueckruf[hidden]{display:none}
.rueckruf label{font-size:14px;color:var(--tinte-2)}
.rueckruf input{width:100%;height:52px;margin-top:5px;padding:0 15px;border-radius:13px;border:1px solid var(--linie-2);background:#fff;font:inherit;color:var(--tinte);caret-color:var(--lapis)}
.rueckruf input:focus{outline:none;border-color:var(--lapis);box-shadow:0 0 0 4px rgba(30,59,135,.12)}
.rueckruf .fax{position:absolute;left:-9999px}
.rueckruf .pille{width:100%;margin-top:4px}
.rueckruf__hinweis{min-height:1.3em;font-size:14px;color:var(--ochsenblut-2)}
.danke{padding:20px;border-radius:18px;background:var(--lapis);color:var(--creme)}
.danke b{display:block;font-stretch:118%;font-weight:600;font-size:19px}
.danke[hidden]{display:none}


/* Fuss */
.fusszeile{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:36px var(--rand) max(30px,env(safe-area-inset-bottom));font-size:14px;color:var(--tinte-3)}
.fusszeile a{text-decoration:none}
.fusszeile a:hover{color:var(--tinte);text-decoration:underline}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* #910 Esteban «von der Link-Seite wächst es zur Test-Seite»: fliessender Übergang zwischen den Seiten (Chrome, Edge, Safari 18.2+;
   sonst normales Laden). Das Prüf-Feld gleitet an seinen neuen Platz, die scharfe Wand blendet in die weiche über. */
@view-transition{navigation:auto}
.platte--held .feld,.gl__form .feld{view-transition-name:pruef-feld}
.hg,.gl__wand{view-transition-name:wand}
::view-transition-group(pruef-feld){animation-duration:.75s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(wand),::view-transition-new(wand){animation-duration:.9s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}