/* Foto & Sprache · gleiche Sprache wie das Team-Portal (styles.css). Verhalten unverändert (app.js, auth.js). */
@font-face{font-family:"Apfel Grotezk";src:url("/fonts/ApfelGrotezk-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("/fonts/ApfelGrotezk-Mittel.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("/fonts/ApfelGrotezk-Fett.woff2") format("woff2");font-weight:700 900;font-display:swap}
:root{color-scheme:light;
  --grund:#F6F5F2;--flaeche:#FFFFFF;--flaeche-2:#FAF9F6;--flaeche-3:#F1EFEA;--linie:#E7E3DB;--linie-2:#D5CFC3;
  --tinte:#1B1916;--tinte-2:#5B564E;--tinte-3:#8A847A;--gruen:#3B6320;--gruen-2:#4A7A27;--gruen-hell:#EAF3E1;
  --lila:#883893;--lila-2:#6D2A77;--lila-hell:#F4ECF5;--rot:#9B2C2C;--rot-hell:#FBEDEC;--rot-linie:#EFC9C5;
  --r:14px;--r-m:10px;--sans:"Apfel Grotezk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--grund)}
body{margin:0;min-width:320px;background:var(--grund);color:var(--tinte);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
h1,h2,p{margin:0}
svg{display:block;flex:none}
:focus-visible{outline:2px solid var(--lila);outline-offset:2px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}

.leiste-oben{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);border-bottom:1px solid var(--linie);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-top:env(safe-area-inset-top)}
.leiste-oben__innen{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:640px;min-height:56px;margin:0 auto;padding:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left))}
.leiste-oben img{width:28px;height:28px;border-radius:7px}
.zurueck{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-6px;padding-right:8px;color:var(--tinte-2);font-weight:600;text-decoration:none}
.zurueck svg{width:20px;height:20px}
.shell{width:min(100%,640px);margin:0 auto;padding:20px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.intro{display:grid;gap:4px;margin-bottom:16px}
.intro h1{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.intro p{color:var(--tinte-2)}
form{display:grid;gap:12px}
.karte{display:grid;gap:12px;padding:18px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
.karte h2{font-size:15px;font-weight:700}

.foto-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.capture-button,.library-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 14px;border-radius:var(--r-m);cursor:pointer;font-weight:700;font-size:15px}
.capture-button{background:var(--gruen);color:#fff}
.capture-button:hover{background:var(--gruen-2)}
.library-button{border:1px solid var(--linie-2);background:var(--flaeche);color:var(--tinte)}
.library-button:hover{background:var(--flaeche-2)}
.capture-button svg,.library-button svg{width:20px;height:20px}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.photo-grid:empty{display:none}
@media(min-width:600px){.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.photo-item{position:relative;overflow:hidden;aspect-ratio:1;border:1px solid var(--linie);border-radius:var(--r-m);background:var(--flaeche-3)}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block}
.photo-index{position:absolute;left:6px;bottom:6px;min-width:22px;padding:1px 6px;border-radius:999px;background:rgba(27,25,22,.72);color:#fff;font-size:12px;font-weight:600;text-align:center}
.remove-photo{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(27,25,22,.72);color:#fff;cursor:pointer;font-size:18px;line-height:1}
#photo-help{display:none}

.record-button{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;border:1px solid var(--linie-2);border-radius:var(--r-m);background:var(--flaeche);color:var(--tinte);cursor:pointer;text-align:left}
.record-button:hover{background:var(--flaeche-2)}
.action-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--lila-hell);color:var(--lila-2)}
.action-icon svg{width:20px;height:20px}
.record-copy{min-width:0;flex:1}
.record-copy strong{display:block;font-weight:700;font-size:15px}
.record-copy small{display:block;font-size:13px;color:var(--tinte-3)}
.record-time{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinte-2)}
.record-button[aria-pressed="true"]{border-color:var(--rot-linie);background:var(--rot-hell);color:var(--rot)}
.record-button[aria-pressed="true"] .action-icon{background:#fff;color:var(--rot)}
.audio-preview{display:grid;gap:6px;padding:10px;border-radius:var(--r-m);background:var(--flaeche-2)}
.audio-preview audio{width:100%;height:40px}
.text-button,.fallback-audio{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:var(--tinte-2);font-size:14px;font-weight:600;cursor:pointer}
.danger{color:var(--rot)}

.field-label{font-size:14px;font-weight:600;color:var(--tinte-2);margin-bottom:-6px}
.price-field{position:relative;max-width:220px}
.price-field input,textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--linie-2);border-radius:var(--r-m);background:var(--flaeche);font-size:16px;-webkit-appearance:none;appearance:none}
.price-field input{padding-right:40px}
.price-field span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--tinte-3)}
textarea{min-height:104px;resize:vertical;line-height:1.5}
.price-field input:focus,textarea:focus,#intake-password:focus{outline:none;border-color:var(--lila);box-shadow:0 0 0 3px var(--lila-hell)}

.form-message{display:none;padding:12px 14px;border:1px solid var(--rot-linie);border-radius:var(--r-m);background:var(--rot-hell);color:var(--rot);font-size:15px;font-weight:600}
.form-message.is-visible{display:block}
.send-panel{position:sticky;bottom:0;z-index:10;display:grid;gap:8px;margin:4px calc(-1 * max(16px,env(safe-area-inset-left))) calc(-1 * max(24px,env(safe-area-inset-bottom)));
  padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(255,255,255,.94);border-top:1px solid var(--linie);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.send-summary{font-size:14px;font-weight:600;color:var(--tinte-2)}
.send-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 18px;border:0;border-radius:12px;background:var(--gruen);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.send-button:hover{background:var(--gruen-2)}
.send-button:disabled{opacity:.45;cursor:not-allowed}
.progress-track{height:4px;overflow:hidden;border-radius:999px;background:var(--flaeche-3)}
.progress-track span{display:block;width:0;height:100%;background:var(--gruen);transition:width .2s ease}
@media(min-width:600px){.send-panel{margin-left:0;margin-right:0;border:1px solid var(--linie);border-radius:var(--r);margin-bottom:12px}}

.success-panel{justify-items:center;gap:12px;padding:40px 20px 24px;text-align:center}
.success-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--gruen-hell);color:var(--gruen)}
.success-mark svg{width:28px;height:28px}
.success-panel h2{font-size:24px}
.receipt{font-size:13px;color:var(--tinte-3)}
.next-button{max-width:320px}

#intake-login .anmelden{gap:12px;margin-top:clamp(16px,8vh,72px)}
#intake-login h1{font-size:24px}
#intake-login form{display:grid;gap:8px}
#intake-login label{font-size:14px;font-weight:600;color:var(--tinte-2)}
#intake-password{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--linie-2);border-radius:var(--r-m);font-size:16px}
#intake-login-error{color:var(--rot);font-weight:600;font-size:14px}
#intake-login-error:empty{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}