/* HIBUNA Büro – Handy-App. Eigene Gestaltung (kein Baukasten): Nachtblau, Gold, warmer Grund.
   Für draußen gebaut: Knöpfe mindestens 48 px, große gut lesbare Schrift, heller Grund, Kamera dunkel. */
@font-face{font-family:"Atkinson";src:url("schriften/atkinson-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url("schriften/atkinson-700.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --nacht:#151B26; --nacht-2:#2C374A; --nacht-3:#3E4A5E; --gold:#D89B2B; --gold-tief:#9A6410; --gold-hell:#FBF1DC;
  --grund:#F6F1E7; --grund-tief:#E9E1D0; --papier:#FFFFFF; --text:#1E2533; --grau:#5D6472; --linie:#DDD3BF;
  --gut:#1F6B35; --gut-hell:#E4F1E6; --rot:#B83227; --rot-hell:#FBE9E7;
  --serif:Georgia,"Times New Roman",serif; --sans:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
  --feder:cubic-bezier(.2,.8,.2,1); --unten:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.4;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
h1,h2,h3{font-family:var(--serif);font-weight:normal;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;background:var(--grund)}
.ansicht{flex:1 1 auto;padding:max(18px,env(safe-area-inset-top)) 18px calc(96px + var(--unten));display:flex;flex-direction:column;gap:14px;outline:0}
.ansicht.dunkel{background:var(--nacht);color:#fff}
.ansicht>*{animation:rein .32s var(--feder) both}
.ansicht>*:nth-child(2){animation-delay:.03s}.ansicht>*:nth-child(3){animation-delay:.06s}.ansicht>*:nth-child(4){animation-delay:.09s}.ansicht>*:nth-child(5){animation-delay:.12s}
@keyframes rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Leiste unten */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;height:calc(72px + var(--unten));padding-bottom:var(--unten);background:var(--papier);border-top:1px solid var(--linie);display:grid;grid-template-columns:repeat(4,1fr)}
.leiste a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--grau);text-decoration:none;font-size:13px;border-top:3px solid transparent;transition:color .15s}
.leiste a[aria-current="page"]{color:var(--nacht);font-weight:700;border-top-color:var(--gold)}
.leiste a svg{width:26px;height:26px}
.leiste .punkt{position:absolute;top:8px;left:calc(50% + 8px);min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--rot);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.app.ohne-leiste .leiste{display:none}
.app.ohne-leiste .ansicht{padding-bottom:calc(24px + var(--unten))}

/* Grundbausteine */
.kopf{display:flex;justify-content:space-between;align-items:center;gap:12px}
.kopf img{height:26px;width:auto;display:block}
.pille{white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;font-size:14px;font-weight:700;background:var(--gut-hell);color:var(--gut);border:0}
.pille.wartet{background:var(--gold-hell);color:#5A3A06}
.pille svg{width:16px;height:16px;stroke-width:2.6}
.klein{font-size:15px;color:var(--grau)}
.karte{background:var(--papier);border:1px solid var(--linie);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
.marke{background:var(--nacht);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:6px}
.marke.hell{background:var(--grund-tief);color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--grund-tief);border-radius:8px;padding:6px 10px;font-size:15px}
.zeile{display:flex;align-items:center;gap:8px}
.gitter-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gitter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.titel-gross{font-size:32px;line-height:1.15}

.knopf{min-height:52px;border-radius:14px;border:2px solid var(--nacht);background:var(--papier);color:var(--nacht);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;text-decoration:none;cursor:pointer;
  transition:transform .12s var(--feder),background-color .15s,box-shadow .15s;user-select:none;-webkit-user-select:none}
.knopf:active{transform:scale(.97)}
.knopf.haupt{background:var(--nacht);color:#fff}
.knopf.haupt svg{stroke:var(--gold)}
.knopf.gold{background:var(--gold);border-color:var(--gold);color:var(--nacht)}
.knopf.gross{min-height:64px;font-size:20px;border-radius:16px}
.knopf.leise{border-color:transparent;background:transparent;text-decoration:underline;font-weight:700}
.knopf.rot{border-color:var(--rot);color:var(--rot)}
.knopf[disabled]{opacity:.5;pointer-events:none}

.foto-knopf{background:var(--gold);color:var(--nacht);border-radius:20px;min-height:112px;padding:16px 20px;display:flex;align-items:center;gap:18px;text-decoration:none;border:0;width:100%;text-align:left;cursor:pointer;transition:transform .14s var(--feder),box-shadow .2s}
.foto-knopf:active{transform:scale(.98)}
.foto-knopf .rund{width:72px;height:72px;border-radius:50%;background:var(--nacht);color:var(--gold);display:grid;place-items:center;flex:none}
.foto-knopf .rund svg{width:38px;height:38px}
.foto-knopf b{display:block;font-size:26px;line-height:1.1}
.foto-knopf span span{font-size:15px}

.kachel{min-height:92px;background:var(--papier);border:1px solid var(--linie);border-radius:16px;font-weight:700;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;position:relative;transition:transform .12s var(--feder)}
.kachel:active{transform:scale(.96)}
.kachel svg{width:28px;height:28px;stroke:var(--nacht)}
.kachel .wert{position:absolute;top:8px;right:8px;background:var(--gold-hell);color:#5A3A06;font-size:12px;border-radius:999px;padding:1px 7px}

.liste-karte{background:var(--papier);border:1px solid var(--linie);border-radius:18px;display:flex;flex-direction:column}
.liste-karte>*+*{border-top:1px solid var(--grund-tief)}
.listenzeile{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:64px}
.listenzeile>svg{width:26px;height:26px;stroke:var(--nacht)}
.listenzeile .mitte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.listenzeile .mitte b{font-size:17px}
.listenzeile .mitte span{font-size:14px;color:var(--grau)}
.listenzeile button,.listenzeile a.link{min-height:48px;padding:0 10px;border:0;background:transparent;color:var(--nacht);font-weight:700;font-size:15px;text-decoration:underline;cursor:pointer;display:flex;align-items:center}
button.listenzeile{border:0;background:transparent;width:100%;text-align:left;cursor:pointer}
.ueber{font-size:14px;font-weight:700;color:var(--grau);letter-spacing:.04em;text-transform:uppercase}
.hinweis{background:var(--gold-hell);border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#5A3A06;line-height:1.35}
.hinweis svg{stroke:var(--gold-tief);width:26px;height:26px}
.hinweis.gut{background:var(--gut-hell);color:var(--gut)}.hinweis.gut svg{stroke:var(--gut)}
.leer{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 8px}
.leer .rund{width:96px;height:96px;border-radius:50%;background:var(--nacht);color:var(--gold);display:grid;place-items:center}
.leer .rund svg{width:46px;height:46px}

/* Kamera (dunkel) */
.kam-kopf{display:flex;align-items:center;gap:10px}
.kam-kopf .zurueck,.rundknopf{width:48px;height:48px;border-radius:14px;background:var(--nacht-2);color:#fff;border:0;display:grid;place-items:center;flex:none;cursor:pointer;text-decoration:none}
.kam-ziel{flex:1 1 auto;min-width:0;background:var(--nacht-2);border-radius:14px;padding:6px 12px;display:flex;align-items:center;gap:10px;min-height:48px}
.kam-ziel svg{stroke:var(--gold)}
.kam-ziel span{display:flex;flex-direction:column;min-width:0}
.kam-ziel small{font-size:12px;color:#C3C9D4}
.kam-ziel b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sucher{flex:1 1 auto;min-height:300px;border-radius:22px;background:#232C3B;position:relative;overflow:hidden;display:grid;place-items:center;color:#9AA3B2;text-align:center;padding:20px;border:0;cursor:pointer;width:100%}
.sucher::before{content:"";position:absolute;inset:0;background:linear-gradient(#3E4A5E,#3E4A5E) 33.3% 0/1px 100% no-repeat,linear-gradient(#3E4A5E,#3E4A5E) 66.6% 0/1px 100% no-repeat,linear-gradient(#3E4A5E,#3E4A5E) 0 33.3%/100% 1px no-repeat,linear-gradient(#3E4A5E,#3E4A5E) 0 66.6%/100% 1px no-repeat;opacity:.8}
.sucher img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sucher span{position:relative;font-size:16px;max-width:240px}
.sucher.blitz::after{content:"";position:absolute;inset:0;background:#fff;animation:blitz .45s ease-out forwards}
@keyframes blitz{from{opacity:.9}to{opacity:0}}
.kat-wahl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kat-wahl button{height:60px;border-radius:14px;font-weight:700;font-size:15px;cursor:pointer;padding:0 4px;background:var(--nacht-2);color:#fff;border:2px solid var(--nacht-3);transition:background-color .15s,transform .12s var(--feder)}
.kat-wahl button:active{transform:scale(.95)}
.kat-wahl button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--nacht)}
.kat-wahl button[data-kat="schaden"][aria-pressed="true"]{background:var(--rot);border-color:#fff;color:#fff}
.ausloeser-zeile{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 0}
.ausloeser{width:88px;height:88px;border-radius:50%;border:5px solid #fff;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.ausloeser span{width:66px;height:66px;border-radius:50%;background:var(--gold);display:block;transition:transform .12s var(--feder)}
.ausloeser:active span{transform:scale(.86)}
.mini{width:56px;height:56px;border-radius:12px;background:var(--nacht-3);border:2px solid #fff;color:#fff;font-weight:700;display:grid;place-items:center;overflow:hidden;position:relative;text-decoration:none;padding:0;cursor:pointer}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mini b{position:relative;background:rgba(21,27,38,.7);border-radius:999px;padding:0 7px;font-size:14px}
.dunkel .klein{color:#C3C9D4}

/* Gespeichert */
.haken{width:84px;height:84px;border-radius:50%;background:var(--nacht);color:var(--gold);display:grid;place-items:center;margin:0 auto;animation:plopp .5s var(--feder) both}
.haken svg{width:44px;height:44px;stroke-width:2.6;stroke-dasharray:30;stroke-dashoffset:30;animation:zeichnen .45s .15s ease-out forwards}
@keyframes plopp{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.baum{display:flex;flex-direction:column;gap:8px;font-size:16px}
.baum div{display:flex;align-items:center;gap:8px}
.baum svg{width:20px;height:20px;stroke:var(--gold-tief)}
.fotoraster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fotoraster button{aspect-ratio:1;border-radius:10px;border:0;padding:0;position:relative;overflow:hidden;background:var(--grund-tief);cursor:pointer}
.fotoraster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fotoraster span{position:absolute;left:5px;bottom:5px;background:#fff;border-radius:6px;padding:1px 6px;font-size:12px;font-weight:700;color:var(--text)}
.fotoraster .neu{outline:3px solid var(--gold);outline-offset:2px}

/* Unterschrift */
.unterschrift{position:relative;border:2px dashed #C9BEA6;border-radius:16px;background:#fff;height:150px;touch-action:none;overflow:hidden}
.unterschrift canvas{position:absolute;inset:0;width:100%;height:100%}
.unterschrift .platz{position:absolute;inset:0;display:grid;place-items:center;color:var(--grau);pointer-events:none}
.unterschrift.voll .platz{display:none}

/* Eingaben */
.feld{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--grau)}
.feld input,.feld select,.feld textarea{min-height:52px;border:1px solid var(--linie);border-radius:12px;padding:10px 12px;background:#fff;color:var(--text);font-size:17px;width:100%}
.feld textarea{min-height:120px;resize:vertical;line-height:1.45}
.schalter{display:flex;align-items:center;gap:12px;min-height:56px;background:#fff;border:1px solid var(--linie);border-radius:16px;padding:10px 14px;cursor:pointer;color:var(--text);font-size:17px}
.schalter input{width:28px;height:28px;accent-color:var(--nacht);margin:0;flex:none}
.stepper{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:6px}
.stepper button{height:52px;border-radius:12px;border:2px solid var(--nacht);background:#fff;font-size:26px;font-weight:700;cursor:pointer;line-height:1;transition:transform .1s var(--feder)}
.stepper button:active{transform:scale(.92);background:var(--grund-tief)}
.stepper input{height:52px;text-align:center;font-size:20px;font-weight:700;border:1px solid var(--linie);border-radius:12px;width:100%;background:#fff;min-width:0}
.person{background:var(--grund);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px}
.person .zeile{justify-content:space-between}
.art-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.art-wahl button{min-height:52px;border-radius:14px;border:2px solid var(--nacht);background:#fff;color:var(--text);font-weight:700;font-size:15px;line-height:1.15;padding:6px 8px;cursor:pointer;transition:background-color .15s,transform .12s var(--feder)}
.art-wahl button:active{transform:scale(.95)}
.art-wahl button[aria-pressed="true"]{background:var(--nacht);color:#fff}

/* Blatt (von unten) */
.blatt-hinter{position:fixed;inset:0;background:rgba(21,27,38,.45);z-index:40;animation:einblenden .2s ease both}
.blatt{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:560px;margin:0 auto;max-height:92dvh;overflow:auto;background:var(--grund);border-radius:22px 22px 0 0;padding:10px 18px calc(18px + var(--unten));display:flex;flex-direction:column;gap:14px;animation:hoch .32s var(--feder) both;box-shadow:0 -12px 40px -20px rgba(0,0,0,.5)}
.blatt::before{content:"";width:44px;height:5px;border-radius:3px;background:var(--linie);margin:2px auto 0;flex:none}
.blatt h2{font-size:24px}
.blatt-fuss{position:sticky;bottom:calc(-18px - var(--unten));background:var(--grund);padding:10px 0 4px;display:flex;flex-direction:column;gap:8px}
@keyframes hoch{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}

/* Meldung */
.meldung{position:fixed;left:50%;bottom:calc(88px + var(--unten));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:60;background:var(--nacht);color:#fff;border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 28px);width:max-content;box-shadow:0 12px 30px -14px rgba(0,0,0,.6);transition:opacity .2s,transform .3s var(--feder)}
.meldung.an{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.meldung button{min-height:44px;border:0;background:transparent;color:var(--gold);font-weight:700;text-decoration:underline;cursor:pointer;padding:0 4px}

/* Großansicht Foto */
.gross-foto{width:100%;border-radius:16px;display:block;max-height:60dvh;object-fit:contain;background:#000}

.zeit-gitter{display:grid;grid-template-columns:1fr 1fr .8fr;gap:10px}
.zeit-gitter input{padding:8px;font-size:16px}
@media (max-width:360px){.pille{font-size:13px;padding:6px 9px}.kopf img{height:22px}.titel-gross{font-size:28px}.ansicht{padding-left:14px;padding-right:14px}
  .gitter-2 .knopf{padding:0 8px;font-size:16px}.gitter-2 .knopf svg{display:none}
  .zeit-gitter{grid-template-columns:1fr 1fr}.zeit-gitter .pause{grid-column:1/-1}}
@media (min-width:600px){body{background:var(--grund-tief)}.app{box-shadow:0 0 0 1px var(--linie)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Stufe 3: Anmeldung per Einladungslink, Team ---------- */
.anmelde-kopf{display:flex;justify-content:center;padding:18px 0 4px}
.schritt{display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.4}
.schritt>b{flex:none;width:36px;height:36px;border-radius:50%;background:var(--nacht);color:var(--gold);display:grid;place-items:center;font-size:17px}
.schritt>span{flex:1;min-width:0;padding-top:6px}
.hinweis.rot{background:var(--rot-hell);color:var(--rot)}.hinweis.rot svg{stroke:var(--rot)}
.link-kasten{background:var(--papier);border:2px dashed var(--gold);border-radius:14px;padding:12px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;word-break:break-all;user-select:all;color:var(--nacht)}
.listenzeile button+button{padding-left:4px}
@media (prefers-reduced-motion:no-preference){.schritt{animation:auftauchen .35s var(--feder) both}.schritt:nth-child(2){animation-delay:.06s}.schritt:nth-child(3){animation-delay:.12s}}
@keyframes auftauchen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}