/* Anmeldeseite von czek. Gleiche Gestaltung wie die App (app/static/style.css): Papier, Tinte, Marker-Gelb, Buchschrift.
   Die Tür ist die eine Stelle, an der die Marke laut sein darf: Am Rechner steht links eine Bühne in der Gegenfarbe.
   Keine Logik hier, anmeldung.js kennt nur die Kennungen (id) der Schritte. */
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(schrift/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(schrift/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(schrift/inter-600.woff2) format("woff2")}
@font-face{font-family:"Bonum";font-weight:400;font-style:normal;font-display:swap;src:url(schrift/bonum-400.otf) format("opentype")}
@font-face{font-family:"Bonum";font-weight:700;font-style:normal;font-display:swap;src:url(schrift/bonum-700.otf) format("opentype")}
:root{
  color-scheme:dark;
  --bg:#141413;--hoch:#1b1b19;--line:#272725;--line2:#343431;--t0:#efeee8;--t1:#c4c3bb;--t2:#8d8c84;--t3:#6a6962;
  --tinte:#efeee8;--tinte-t:#141413;--gelb:#f0dc6c;--gelb-t:#161614;--err:#de7b6a;
  /* Bühne am Rechner: Gegenfarbe zur Seite */
  --b-bg:#f7f5ef;--b-t0:#161614;--b-t2:#716f67;--b-line:#e2dfd5;--b-blatt:#fffefa;--b-marker:#f6e58a;
  --font:"Inter",system-ui,sans-serif;--buch:"Bonum","URW Bookman","Bookman Old Style",Georgia,serif;--r:9px;
}
@media (prefers-color-scheme:light){:root{
  color-scheme:light;
  --bg:#f7f5ef;--hoch:#fffefa;--line:#e2dfd5;--line2:#d2cec2;--t0:#161614;--t1:#3e3d39;--t2:#716f67;--t3:#928f86;
  --tinte:#161614;--tinte-t:#f7f5ef;--err:#c2513f;
  --b-bg:#161614;--b-t0:#efeee8;--b-t2:#8d8c84;--b-line:#343431;--b-blatt:#1b1b19;--b-marker:rgba(232,210,96,.24);
}}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--t1);font:400 15px/1.45 var(--font);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
[hidden]{display:none!important}

/* Bühne: Wortmarke, ein Satz, am Rechner dazu ein Zettel */
.buehne{padding:max(26px,env(safe-area-inset-top)) 24px 0;width:100%;max-width:400px;margin:0 auto}
.wm{position:relative;display:inline-block;margin:0 0 0 -.2em;padding:.12em .24em .16em;font:700 40px/1 var(--buch);letter-spacing:-.035em;color:var(--gelb-t)}
.wm svg{position:absolute;left:0;top:0;width:100%;height:100%;fill:var(--gelb)}
.wm span{position:relative}
.spruch{margin:18px 0 0;font:400 23px/1.2 var(--buch);letter-spacing:-.015em;color:var(--t0);text-wrap:balance}
.zettel{display:none}

.rahmen{width:100%;max-width:400px;margin:0 auto;padding:34px 24px max(28px,env(safe-area-inset-bottom))}
h1{margin:0;font:400 26px/1.15 var(--buch);letter-spacing:-.015em;color:var(--t0);text-wrap:balance}
.unter{margin:8px 0 0;color:var(--t2);text-wrap:pretty}
.ruhig{margin:40px 0;color:var(--t3)}
form{margin:0}
label{display:block;margin:18px 0 7px;font:500 13px/1 var(--font);color:var(--t2)}
input{display:block;width:100%;height:48px;padding:0 14px;border:0;border-radius:var(--r);background:var(--hoch);box-shadow:inset 0 0 0 1px var(--line2);color:var(--t0);font:400 16px/1 var(--font);outline:none;-webkit-appearance:none;appearance:none}
input:focus-visible{box-shadow:inset 0 0 0 1.5px var(--t0)}
#code{letter-spacing:.22em;text-transform:uppercase;font-variant-numeric:tabular-nums}
button,a.leise{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.knopf{display:block;width:100%;height:50px;margin-top:20px;border:0;border-radius:var(--r);background:var(--tinte);color:var(--tinte-t);font:600 15.5px/1 var(--font);transition:opacity .12s ease,transform .12s ease}
.knopf:active{transform:scale(.985)}
.knopf:disabled,.leise:disabled{opacity:.55;cursor:default}
.knopf.laeuft{position:relative;color:transparent}
.knopf.laeuft::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--tinte-t);border-right-color:transparent;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.leise{display:block;width:100%;min-height:44px;margin-top:8px;padding:0;border:0;background:none;color:var(--t2);font:500 14px/44px var(--font);text-align:center;text-decoration:none}
.knopf:focus-visible,.leise:focus-visible{outline:2px solid var(--t0);outline-offset:3px;border-radius:var(--r)}
.fehler{margin:14px 0 0;color:var(--err);font-size:14px;text-wrap:pretty}
.weg{display:flex;align-items:center;gap:10px;margin:24px 0 0;padding:0;list-style:none;font:500 12.5px/1 var(--font);color:var(--t3)}
.weg li{display:flex;align-items:center;gap:10px}
.weg li+li{flex:1}
.weg li+li::before{content:"";flex:1;height:1px;background:var(--line2)}
.weg .an{color:var(--t0)}.weg .fertig{color:var(--t2)}
.weg .an::before{background:var(--t1)}
.ohne{margin:0;padding:24px;text-align:center;color:var(--t1)}

/* Am Rechner: links die Bühne in der Gegenfarbe, rechts die Tür */
@media (min-width:900px){
  body{display:grid;grid-template-columns:1fr minmax(440px,36%);min-height:100vh}
  .buehne{max-width:none;margin:0;padding:48px 56px;background:var(--b-bg);position:relative;overflow:hidden;display:flex;flex-direction:column}
  .wm{font-size:44px;align-self:flex-start}
  .spruch{margin-top:auto;padding-bottom:6vh;font-size:clamp(40px,4.6vw,64px);line-height:1.06;letter-spacing:-.025em;color:var(--b-t0);max-width:9.5em;position:relative;z-index:1}
  .zettel{display:block;position:absolute;right:8%;top:17%;width:min(360px,42%);margin:0;padding:8px 22px;list-style:none;border-radius:6px;background:var(--b-blatt);box-shadow:0 30px 60px rgba(40,30,0,.22),inset 0 0 0 1px var(--b-line);transform:rotate(2.6deg);font:500 14px/1.3 var(--font);color:var(--b-t0)}
  .zettel li{display:flex;align-items:center;gap:11px;min-height:44px;border-top:1px solid var(--b-line)}
  .zettel li:first-child{border-top:0}
  .zettel i{flex:none;width:17px;height:17px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--b-t2)}
  .zettel span{flex:1}
  .zettel mark{background:var(--b-marker);color:inherit;padding:1px 4px;margin:0 -4px;border-radius:3px}
  .zettel em{font-style:normal;font-weight:400;font-size:12.5px;color:var(--b-t2)}
  .zettel .zu span{color:var(--b-t2);font-weight:400;text-decoration:line-through}
  .zettel .zu i{background:var(--b-t0);box-shadow:none;position:relative}
  .zettel .zu i::after{content:"";position:absolute;left:5.5px;top:2.5px;width:4px;height:8px;border:solid var(--b-blatt);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
  .rahmen{align-self:center;margin:0 auto;padding:40px 48px}
  h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}