/* =========================================================================
Galerie — Gestaltungssystem (Palette & Schriften von matthiaseger.de)
Gemeinsame Basis für alle Seiten. Seiten-CSS ergänzt nur eigene Regeln
und nutzt diese Tokens und Bausteine.
========================================================================= */
/* ---- Schriften (lokal gehostet, kein CDN) ---- */
@font-face{font-family:"Sora";src:url("../fonts/sora/Sora-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Sora";src:url("../fonts/sora/Sora-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sora";src:url("../fonts/sora/Sora-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Sora";src:url("../fonts/sora/Sora-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter/Inter-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter/Inter-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
/* ---- Tokens ---- */
:root{
--paper:#FFFFFF;
--ink:#343A41; --ink-60:#5A626B; --ink-30:#7C858E;
--gruen:#8CA38A; --gruen-text:#5E7458; --gruen-wash:#EFF3EE;
--line:#D3DDD1; --line-soft:#E7EDE6;
--braun:#4F423E; --braun-deep:#3A302D; --braun-wash:#F3EFED; --braun-line:#E7DDD8;
--blau:#6E8A99; --blau-deep:#4E6B7A; --blau-wash:#EDF2F5; --blau-line:#D5E0E6;
--rot:#A5493B; --rot-text:#7a2e22; --rot-wash:#fbecea; --rot-line:#f0cfc9;
--warn:#8a4b1f;
--logo:#52413d;
--night:#0E0C0B; /* Betrachter (Lightbox) */
--max:720px; --max-wide:1120px; --max-full:1440px;
--r:16px; --r-sm:11px; --r-lg:22px;
--shadow-sm:0 1px 2px rgba(79,66,62,.04),0 10px 28px -20px rgba(79,66,62,.20);
--shadow-lg:0 1px 3px rgba(79,66,62,.06),0 34px 70px -34px rgba(79,66,62,.32);
--shadow-xl:0 2px 8px rgba(40,32,30,.08),0 44px 100px -36px rgba(40,32,30,.52);
--glass:rgba(255,255,255,.82);
--glass-strong:rgba(255,255,255,.94);
--focus:0 0 0 3px #fff,0 0 0 5.5px rgba(94,116,88,.6);
--font-head:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--ease:cubic-bezier(.16,1,.3,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1); /* federt leicht über */
--ease-in-out:cubic-bezier(.65,0,.35,1);
--safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
--safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
/* ---- Grundlagen ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
margin:0; color:var(--ink); background:var(--paper);
font-family:var(--font-body); font-size:16px; line-height:1.5;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
position:relative; overflow-x:hidden; overflow-x:clip;
}
img,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blau-deep);text-underline-offset:2px}
a:hover{color:var(--braun)}
::selection{background:rgba(140,163,138,.32)}
:focus-visible{outline:2.5px solid var(--gruen-text);outline-offset:3px}
p{margin:0 0 1em;text-wrap:pretty}
/* ---- Typografie ---- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 .4em;color:var(--ink);text-wrap:balance}
h1{font-size:1.62rem}
h2{font-size:1.28rem}
h3{font-size:1.08rem;letter-spacing:-.01em}
h4{font-size:.98rem;letter-spacing:-.005em}
.display{font-family:var(--font-head);font-weight:600;font-size:clamp(1.9rem,1.2rem + 3vw,3.1rem);letter-spacing:-.035em;line-height:1.06;margin:0;text-wrap:balance}
.lead{font-size:1.06rem;color:var(--ink-60);line-height:1.6;max-width:52ch}
.small{font-size:.84rem}
.tnum{font-variant-numeric:tabular-nums}
/* ---- Hintergrund: feiner Raster + zwei zarte Halos, die langsam wandern ---- */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; contain:strict}
.bg::before{ /* Raster */
content:""; position:absolute; inset:0;
background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
background-size:48px 48px; background-position:center top; opacity:.55;
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%);
mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%);
}
.bg .halo{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; will-change:transform}
.bg .halo-g{width:560px;height:560px;background:radial-gradient(circle,rgba(140,163,138,.58),transparent 68%);
top:-210px;right:-150px;animation:haloDriftG 28s var(--ease-in-out) infinite alternate}
.bg .halo-b{width:500px;height:500px;background:radial-gradient(circle,rgba(110,138,153,.46),transparent 68%);
bottom:-230px;left:-170px;animation:haloDriftB 34s var(--ease-in-out) infinite alternate}
@keyframes haloDriftG{
0%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(-80px,70px,0) scale(1.12)}
100%{transform:translate3d(-24px,140px,0) scale(.94)}
}
@keyframes haloDriftB{
0%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(100px,-60px,0) scale(1.1)}
100%{transform:translate3d(46px,-130px,0) scale(1.02)}
}
/* ---- Spalte, Kopf, Fuß ---- */
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 max(20px,var(--safe-r)) 0 max(20px,var(--safe-l)); min-width:0}
.wrap--wide{max-width:var(--max-wide)}
.wrap--full{max-width:var(--max-full)}
.topbar{padding:max(22px,calc(var(--safe-t) + 10px)) 0 6px; position:relative; z-index:2}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:0; border-radius:12px}
a.brand:hover{color:inherit}
.brand-mark{position:relative; width:44px; height:44px; flex:0 0 44px; display:block; border-radius:10px; overflow:hidden;
box-shadow:0 4px 14px -4px rgba(82,65,61,.5); transition:transform .55s var(--ease-spring),box-shadow .4s var(--ease)}
.brand-mark .logo{width:100%; height:100%}
@media (hover:hover){a.brand:hover .brand-mark{transform:translateY(-1px) rotate(-4deg) scale(1.05); box-shadow:0 10px 22px -8px rgba(82,65,61,.55)}}
a.brand:active .brand-mark{transform:scale(.96)}
.brand-txt{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-txt b{font-family:var(--font-head); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; white-space:nowrap}
.brand-txt small{color:var(--ink-60); font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-right{display:flex; align-items:center; gap:8px; flex:0 0 auto}
main{flex:1 0 auto; width:100%; padding:22px 0 40px; position:relative; z-index:1}
.main--center{display:flex; align-items:center; justify-content:center}
.site-foot{margin-top:auto; padding:26px 0 calc(30px + var(--safe-b)); color:var(--ink-30); font-size:.78rem; text-align:center}
.site-foot .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 8px}
.site-foot a{color:var(--blau-deep); text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot .sep{opacity:.6}
.noscript{margin:12px auto; max-width:var(--max); padding:12px 16px; border-radius:var(--r-sm);
background:var(--braun-wash); border:1px solid var(--braun-line); color:var(--braun-deep); font-size:.9rem; text-align:center}
/* ---- Glas-Karte ---- */
.card{
position:relative; width:100%; max-width:var(--max); margin:0 auto;
background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.75); overflow:hidden; isolation:isolate;
}
/* Feine Lichtkante oben (grün → blau) */
.card::before{content:""; position:absolute; inset:0 0 auto; height:1px; z-index:1; pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(140,163,138,.85) 28%,rgba(110,138,153,.85) 72%,transparent)}
.card--flat{box-shadow:var(--shadow-sm)}
.card-head{padding:30px 30px 6px; text-align:center}
.card-head h1{font-size:1.62rem; margin:.5rem 0 .35rem}
.card-head p{color:var(--ink-60); margin:0 auto; max-width:46ch; font-size:.96rem}
.card-body{padding:22px 30px 30px}
.card-foot{padding:16px 30px; border-top:1px solid var(--line-soft); background:rgba(252,253,252,.7)}
.eyebrow{display:inline-block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gruen-text); font-weight:600}
.section-title{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px}
.section-title h2,.section-title h3{margin:0}
/* ---- Stufen-Anzeige (Stepper) ---- */
.board{display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding:26px 34px 8px; position:relative}
.board .step{display:flex; flex-direction:column; align-items:center; gap:11px; flex:1 1 0; min-width:0; position:relative; text-align:center}
.board .dot{position:relative; z-index:2; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
background:#fff; border:2px solid var(--line); color:var(--ink-30); font-family:var(--font-head); font-weight:600; font-size:.92rem;
transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.board .dot svg{width:18px; height:18px; opacity:0; transform:scale(.4); transition:.4s var(--ease-spring)}
.board .dot .num{position:absolute; transition:.3s var(--ease)}
.board .lbl{font-size:.78rem; color:var(--ink-30); font-weight:500; line-height:1.25; max-width:12ch; transition:color .4s var(--ease)}
/* Durchgehende Schiene: von Kreis-Mitte zu Kreis-Mitte, HINTER den Kreisen */
.board .connector{position:absolute; top:20px; left:-50%; width:100%; height:2px; background:var(--line); z-index:1; overflow:hidden; border-radius:2px}
.board .connector::after{content:""; position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
background:linear-gradient(90deg,var(--gruen),var(--gruen-text)); transition:transform .7s var(--ease)}
.board .step:first-child .connector{display:none}
.board .step.is-active .dot{border-color:var(--gruen); color:var(--gruen-text); transform:scale(1.08); box-shadow:0 0 0 6px var(--gruen-wash)}
.board .step.is-done .dot{background:var(--gruen); border-color:var(--gruen); color:#fff}
.board .step.is-done .dot .num{opacity:0; transform:scale(.4)}
.board .step.is-done .dot svg{opacity:1; transform:scale(1)}
.board .step.is-active .lbl,.board .step.is-done .lbl{color:var(--ink)}
.board .step.is-done .connector::after,.board .step.is-active .connector::after{transform:scaleX(1)}
/* ---- Bühnen (mehrstufige Karten) ---- */
.stage{display:none; padding:14px 30px 30px}
.stage.is-current{display:block; animation:stageIn .5s var(--ease)}
@keyframes stageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* =========================================================================
Knöpfe
========================================================================= */
.btn{
--btn-bg:var(--gruen); --btn-bd:var(--gruen); --btn-fg:#fff;
--btn-bg-h:var(--gruen-text); --btn-bd-h:var(--gruen-text); --btn-fg-h:#fff;
position:relative; isolation:isolate; overflow:hidden;
appearance:none; -webkit-appearance:none; margin:0;
border:1px solid var(--btn-bd); background-color:var(--btn-bg); color:var(--btn-fg);
font-family:var(--font-body); font-weight:600; font-size:.95rem; line-height:1.2; letter-spacing:-.005em;
padding:13px 22px; min-height:48px; border-radius:var(--r-sm);
display:inline-flex; align-items:center; justify-content:center; gap:9px;
text-decoration:none; white-space:nowrap; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation;
box-shadow:var(--shadow-sm);
transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),
transform .18s var(--ease),box-shadow .3s var(--ease),opacity .2s;
}
/* Glanz, der beim Überfahren einmal durchläuft */
.btn::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
transform:translateX(-120%); transition:transform 0s}
@media (hover:hover){.btn:hover{background-color:var(--btn-bg-h); border-color:var(--btn-bd-h); color:var(--btn-fg-h)}}
@media (hover:hover){.btn:hover::after{transform:translateX(120%); transition:transform .8s var(--ease)}}
.btn:active{transform:scale(.97); transition-duration:.08s}
.btn:focus-visible{outline:none; box-shadow:var(--focus)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn[disabled]::after,.btn[aria-disabled="true"]::after{display:none}
.btn svg{width:18px; height:18px; flex:0 0 auto}
.btn--primary{
background-image:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%),linear-gradient(135deg,var(--gruen),var(--gruen-text));
border-color:var(--gruen-text);
box-shadow:0 1px 2px rgba(79,66,62,.08),0 14px 28px -16px rgba(94,116,88,.85);
}
@media (hover:hover){.btn--primary:hover{box-shadow:0 1px 2px rgba(79,66,62,.08),0 18px 34px -16px rgba(94,116,88,.95)}}
.btn--ghost{--btn-bg:#fff; --btn-bd:var(--line); --btn-fg:var(--ink); --btn-bg-h:var(--braun-wash); --btn-bd-h:#E4DAD4; --btn-fg-h:var(--braun); box-shadow:none}
.btn--ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%)}
.btn--soft{--btn-bg:var(--gruen-wash); --btn-bd:var(--line); --btn-fg:var(--gruen-text); --btn-bg-h:#E3EBE1; --btn-bd-h:#C9D6C6; --btn-fg-h:var(--gruen-text); box-shadow:none}
.btn--braun{--btn-bg:var(--braun); --btn-bd:var(--braun); --btn-bg-h:var(--braun-deep); --btn-bd-h:var(--braun-deep)}
.btn--danger{--btn-bg:var(--rot); --btn-bd:var(--rot); --btn-bg-h:var(--rot-text); --btn-bd-h:var(--rot-text)}
.btn--danger-soft{--btn-bg:#fff; --btn-bd:var(--rot-line); --btn-fg:var(--rot-text); --btn-bg-h:var(--rot-wash); --btn-bd-h:#e6b8b0; --btn-fg-h:var(--rot-text); box-shadow:none}
.btn--link{--btn-bg:transparent; --btn-bd:transparent; --btn-fg:var(--blau-deep); --btn-bg-h:transparent; --btn-bd-h:transparent; --btn-fg-h:var(--braun);
box-shadow:none; padding:6px 4px; min-height:0; text-decoration:underline; text-underline-offset:3px}
.btn--link::after{display:none}
.btn--sm{padding:8px 14px; min-height:38px; font-size:.86rem; border-radius:9px; gap:7px; box-shadow:none}
.btn--sm svg{width:16px; height:16px}
.btn--lg{padding:16px 28px; min-height:56px; font-size:1.02rem; border-radius:13px}
.btn--block{display:flex; width:100%}
.btn--icon{padding:0; width:48px; min-width:48px; gap:0}
.btn--icon.btn--sm{width:38px; min-width:38px}
.btn--pill{border-radius:999px}
.btn.is-ok{--btn-bg:var(--gruen-text); --btn-bd:var(--gruen-text); --btn-bg-h:var(--gruen-text); --btn-fg:#fff; --btn-fg-h:#fff}
.btn.is-loading,.btn.is-loading[disabled]{cursor:progress; opacity:.92}
.btn.is-loading::after{display:none}
.btn-spin{display:inline-block; width:16px; height:16px; border-radius:50%; flex:0 0 auto;
border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .7s linear infinite}
.btn--ghost .btn-spin,.btn--soft .btn-spin,.btn--danger-soft .btn-spin,.btn--link .btn-spin{border-color:rgba(79,66,62,.22); border-top-color:var(--braun)}
.actions{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}
.actions .btn--primary{flex:1 1 auto}
.actions--center{justify-content:center}
.actions--end{justify-content:flex-end}
/* Nur-Symbol-Knopf ohne Rahmen (Zeilen, Kopfzeilen) */
.iconbtn{width:36px; height:36px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--ink-60);
display:inline-grid; place-items:center; flex:0 0 auto; padding:0; cursor:pointer;
transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.iconbtn svg{width:18px; height:18px}
@media (hover:hover){.iconbtn:hover{background:var(--braun-wash); color:var(--braun)}}
.iconbtn:active{transform:scale(.92)}
.iconbtn:focus-visible{outline:none; box-shadow:var(--focus)}
@media (hover:hover){.iconbtn--danger:hover{background:var(--rot-wash); color:var(--rot-text)}}
.iconbtn--bordered{border-color:var(--line); background:#fff}
/* =========================================================================
Formulare
========================================================================= */
.form{display:flex; flex-direction:column; gap:16px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px}
.form-grid .field--wide{grid-column:1 / -1}
.field{display:flex; flex-direction:column; gap:7px; min-width:0; margin:0; padding:0; border:0}
.field-label,.field > label,.field > legend,.field-row > label{font-size:.82rem; font-weight:600; color:var(--ink-60); padding:0}
.field-label .opt,.field > label .opt,.field-row > label .opt{font-weight:400; color:var(--ink-30)}
.field-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.field-hint{margin:0; color:var(--ink-30); font-size:.8rem; line-height:1.45}
.field-error{margin:0; color:var(--rot-text); font-size:.84rem; font-weight:500; display:flex; gap:6px; align-items:flex-start; animation:alertIn .35s var(--ease)}
.field-error svg{width:15px; height:15px; flex:0 0 auto; margin-top:2px}
.field-count{font-size:.74rem; color:var(--ink-30); font-variant-numeric:tabular-nums; white-space:nowrap}
.field-count.is-max{color:var(--warn); font-weight:600}
/* Grundform aller Eingaben – bewusst geringe Spezifität (:where), Varianten überschreiben sie leicht */
.input,
.field :where(input:is([type=text],[type=email],[type=password],[type=search],[type=url],[type=tel],[type=number],[type=date],[type=time],[type=datetime-local]),select,textarea){
display:block; width:100%; min-width:0; margin:0;
font:inherit; font-size:1rem; /* >= 16px: kein Zoom auf iOS */
color:var(--ink); background-color:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
padding:12px 14px; min-height:48px; outline:none; -webkit-appearance:none; appearance:none;
transition:border-color .2s var(--ease),box-shadow .25s var(--ease),background-color .2s;
}
:where(.input,.field input,.field select,.field textarea):hover{border-color:#C3D0C0}
:where(.input,.field input,.field select,.field textarea):focus{border-color:var(--gruen); box-shadow:0 0 0 4px var(--gruen-wash)}
:where(.input,.field input,.field textarea)::placeholder{color:var(--ink-30); opacity:1}
:where(.input,.field input,.field select,.field textarea)[aria-invalid="true"],
.field.is-invalid :where(.input,input,select,textarea){border-color:#e0a79d; box-shadow:0 0 0 4px rgba(251,236,234,.95)}
:where(.input,.field input,.field select,.field textarea):disabled{background:#f6f7f6; color:var(--ink-30); cursor:not-allowed}
:where(textarea.input,.field textarea){min-height:104px; resize:vertical; line-height:1.45}
select.input,.field select{padding-right:42px; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A626B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center; background-size:16px}
.input.input--lg{font-size:1.12rem; padding:14px 16px; min-height:56px}
.input--mono{font-family:var(--mono); letter-spacing:.02em}
/* Datum: iOS zentriert und lässt leere Felder zusammenfallen */
input[type=date]{min-height:48px; line-height:1.5}
input[type=date]::-webkit-date-and-time-value{text-align:left; min-height:1.5em}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.55; cursor:pointer; padding:2px; border-radius:6px; transition:opacity .2s, background-color .2s}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1; background:var(--gruen-wash)}
/* Eingabe mit Symbol links */
.input-icon{position:relative; display:block}
.input-icon > svg{position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--ink-30); pointer-events:none; transition:color .2s}
.input-icon > .input,.input-icon > input{padding-left:44px}
.input-icon:focus-within > svg{color:var(--gruen-text)}
/* Zugangscode-Zeile (Eingabe + Knopf) */
.code-row{display:flex; gap:10px; max-width:460px; margin:20px auto 0}
.code-row input{flex:1; min-width:0; font-family:var(--mono); font-size:1.05rem; font-weight:600; letter-spacing:.12em;
text-transform:uppercase; text-align:center; color:var(--ink); background:#fff; border:1px solid var(--line);
border-radius:var(--r-sm); padding:12px 14px; min-height:48px; outline:none; transition:border-color .2s,box-shadow .2s}
.code-row input::placeholder{color:var(--ink-30); font-weight:400; letter-spacing:.08em}
.code-row input:focus{border-color:var(--gruen); box-shadow:0 0 0 4px var(--gruen-wash)}
.code-row .btn{flex:0 0 auto}
/* Schalter */
.switch{display:flex; align-items:flex-start; gap:12px; cursor:pointer; position:relative; -webkit-user-select:none; user-select:none}
.switch input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.switch-track{flex:0 0 auto; width:44px; height:26px; border-radius:99px; background:var(--line); position:relative; margin-top:0;
transition:background-color .3s var(--ease),box-shadow .25s var(--ease)}
.switch-thumb{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(79,66,62,.32),0 0 0 .5px rgba(79,66,62,.06); transition:transform .4s var(--ease-spring),width .25s var(--ease)}
.switch:active .switch-thumb{width:24px}
.switch input:checked + .switch-track{background:var(--braun)}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(18px)}
.switch:active input:checked + .switch-track .switch-thumb{transform:translateX(14px)}
.switch input:focus-visible + .switch-track{box-shadow:var(--focus)}
.switch input:disabled + .switch-track{opacity:.5}
.switch-label{display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:2px}
.switch-label b{font-weight:600; font-size:.92rem}
.switch-label small{color:var(--ink-60); font-size:.8rem}
.switch--right{flex-direction:row-reverse; justify-content:space-between}
/* Auswahl-Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer; display:inline-flex}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; min-height:38px; border:1px solid var(--line); border-radius:999px; background:#fff;
font-size:.86rem; font-weight:500; color:var(--ink-60); transition:background-color .2s var(--ease),border-color .2s,color .2s,transform .15s var(--ease)}
.chip span svg{width:15px; height:15px}
@media (hover:hover){.chip:hover span{border-color:var(--gruen); color:var(--ink)}}
.chip:active span{transform:scale(.96)}
.chip input:checked + span{background:var(--braun); border-color:var(--braun); color:#fff}
.chip input:focus-visible + span{box-shadow:var(--focus)}
.chip input:disabled + span{opacity:.5; cursor:not-allowed}
/* Passwortfeld mit Auge */
.pw-input{position:relative; display:flex; flex:1; min-width:0}
.pw-input input{flex:1; width:100%; min-width:0; padding-right:50px}
.pw-eye{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:9px;
background:transparent; color:var(--ink-30); cursor:pointer; display:grid; place-items:center; transition:color .2s,background-color .2s}
@media (hover:hover){.pw-eye:hover{color:var(--braun); background:var(--braun-wash)}}
.pw-eye:focus-visible{outline:none; box-shadow:var(--focus)}
.pw-eye svg{width:18px; height:18px}
.pw-eye .eye-off,.pw-eye.is-on .eye-on{display:none}
.pw-eye.is-on .eye-off{display:block}
.pw-caps{margin:6px 0 0; color:var(--warn); font-size:.82rem}
/* =========================================================================
Rückmeldungen: Hinweise, Badges
========================================================================= */
/* .alert ist sichtbar; ausblenden mit [hidden]. Standardton: Fehler (wie im Upload-Kanal). */
.alert{display:flex; align-items:flex-start; gap:10px; padding:12px 15px; border-radius:var(--r-sm); font-size:.88rem; line-height:1.45;
border:1px solid var(--rot-line); background:var(--rot-wash); color:var(--rot-text); animation:alertIn .45s var(--ease)}
.alert svg{width:18px; height:18px; flex:0 0 auto; margin-top:1px}
.alert b{font-weight:600}
.alert--ok{background:var(--gruen-wash); border-color:var(--line); color:var(--gruen-text)}
.alert--info{background:var(--blau-wash); border-color:var(--blau-line); color:var(--blau-deep)}
.alert--warn{background:var(--braun-wash); border-color:var(--braun-line); color:var(--braun)}
@keyframes alertIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.notice{margin:0 0 16px; padding:12px 15px; border-radius:var(--r-sm); font-size:.9rem; border:1px solid var(--line); background:var(--gruen-wash); color:var(--gruen-text)}
.notice--ok{background:var(--gruen-wash); border-color:var(--line); color:var(--gruen-text)}
.notice--error{background:var(--rot-wash); border-color:var(--rot-line); color:var(--rot-text)}
.notice--info{background:var(--blau-wash); border-color:var(--blau-line); color:var(--blau-deep)}
.hint{margin-top:14px; color:var(--ink-30); font-size:.78rem; text-align:center}
.hint a{color:var(--gruen-text); font-weight:600}
/* Badges: Ton + Text, nie Farbe allein */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.74rem; font-weight:600; line-height:1.35;
white-space:nowrap; border:1px solid transparent; vertical-align:middle}
.badge svg{width:12px; height:12px}
.badge--gruen{background:var(--gruen-wash); color:var(--gruen-text); border-color:var(--line)}
.badge--blau{background:var(--blau-wash); color:var(--blau-deep); border-color:var(--blau-line)}
.badge--braun{background:var(--braun-wash); color:var(--braun); border-color:var(--braun-line)}
.badge--rot{background:var(--rot-wash); color:var(--rot-text); border-color:var(--rot-line)}
.badge--grau{background:#F2F3F4; color:var(--ink-60); border-color:#E3E5E7}
.badge--dark{background:var(--braun-deep); color:#fff}
.badge--dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:dotPulse 1.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
/* =========================================================================
Link-Box (Kopieren)
========================================================================= */
.linkbox{border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; box-shadow:var(--shadow-sm); overflow:hidden;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.linkbox:focus-within{border-color:var(--gruen); box-shadow:0 0 0 4px var(--gruen-wash),var(--shadow-sm)}
.linkbox .lb-label{display:flex; align-items:center; gap:8px; padding:10px 15px; border-bottom:1px solid var(--line-soft);
color:var(--gruen-text); font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase}
.linkbox .lb-label svg{width:14px; height:14px; flex:0 0 auto}
.linkbox .lb-label .lb-extra{margin-left:auto; letter-spacing:0; text-transform:none; font-weight:500; color:var(--ink-30)}
.linkbox .lb-row{display:flex; align-items:stretch}
.linkbox input,.linkbox .lb-input{flex:1; min-width:0; border:0; padding:15px 16px; font-family:var(--mono); font-size:.86rem; color:var(--ink);
background:transparent; outline:none; text-overflow:ellipsis; border-radius:0; -webkit-appearance:none; appearance:none}
.linkbox--secret .lb-label{color:var(--braun)}
.copybtn{position:relative; overflow:hidden; border:0; border-left:1px solid var(--line-soft); background:var(--braun); color:#fff;
padding:0 20px; min-height:50px; font-weight:600; font-size:.9rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
transition:background-color .25s var(--ease)}
@media (hover:hover){.copybtn:hover{background:var(--braun-deep)}}
.copybtn:active{transform:none; filter:brightness(.95)}
.copybtn:focus-visible{outline:none; box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.copybtn svg{width:17px; height:17px; transition:transform .35s var(--ease-spring)}
.copybtn.is-ok{background:var(--gruen-text)}
.copybtn.is-ok svg{transform:scale(1.12)}
.copybtn--ghost{background:#fff; color:var(--ink); border-left-color:var(--line-soft)}
@media (hover:hover){.copybtn--ghost:hover{background:var(--braun-wash); color:var(--braun)}}
/* =========================================================================
QR-Karte
========================================================================= */
.qr-card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; padding:18px;
border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:var(--shadow-sm)}
.qr-code{position:relative; width:172px; aspect-ratio:1; padding:10px; border-radius:16px; background:#fff; overflow:hidden;
box-shadow:0 0 0 1px var(--line-soft),0 20px 40px -26px rgba(79,66,62,.55)}
.qr-code svg{display:block; width:100%; height:100%}
/* Einmaliger Scan-Strich, wenn der Code erscheint */
.qr-code.is-new::after{content:""; position:absolute; left:6%; right:6%; top:0; height:2px; border-radius:2px;
background:linear-gradient(90deg,transparent,var(--gruen),var(--blau),transparent); box-shadow:0 0 14px 2px rgba(140,163,138,.55);
animation:qrScan 1.6s var(--ease-in-out) .2s both}
@keyframes qrScan{0%{top:4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:96%;opacity:0}}
.qr-code.is-new svg{animation:qrIn .7s var(--ease) both}
@keyframes qrIn{from{opacity:0;transform:scale(.92);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.qr-meta{min-width:0; display:flex; flex-direction:column; gap:4px}
.qr-meta .eyebrow{margin-bottom:2px}
.qr-meta b{font-family:var(--font-head); font-weight:600; font-size:1.06rem; letter-spacing:-.01em; overflow-wrap:anywhere}
.qr-meta .qr-url{font-family:var(--mono); font-size:.8rem; color:var(--ink-60); overflow-wrap:anywhere}
.qr-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
/* =========================================================================
Dropzone (Anlegen + Verwalten)
========================================================================= */
.dropzone{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
border:2px dashed var(--line); border-radius:var(--r); background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,252,250,.92));
padding:40px 24px; cursor:pointer; outline:none; -webkit-user-select:none; user-select:none;
transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
@media (hover:hover){.dropzone:hover{border-color:var(--gruen); background:var(--gruen-wash)}}
.dropzone:focus-visible{border-color:var(--gruen-text); box-shadow:var(--focus)}
.dropzone.is-drag-page:not(.is-drag){border-color:var(--gruen); animation:dzPulse 1.8s ease-in-out infinite}
.dropzone.is-drag{border-color:var(--gruen-text); border-style:solid; background:var(--gruen-wash); transform:scale(1.012);
box-shadow:0 0 0 7px rgba(239,243,238,.95),var(--shadow-lg)}
.dropzone.is-disabled,.dropzone[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
@keyframes dzPulse{0%,100%{box-shadow:0 0 0 0 rgba(140,163,138,0)}50%{box-shadow:0 0 0 8px rgba(140,163,138,.16)}}
.dz-ico{position:relative; width:64px; height:64px; border-radius:18px; display:grid; place-items:center; margin-bottom:10px;
background:var(--braun-wash); color:var(--braun); transition:transform .5s var(--ease-spring),background-color .3s,color .3s}
.dz-ico svg{width:30px; height:30px}
.dz-ico::after{content:""; position:absolute; inset:-7px; border-radius:23px; border:1.5px dashed var(--line); opacity:0; transition:opacity .3s}
@media (hover:hover){.dropzone:hover .dz-ico{transform:translateY(-3px)}}
.dropzone.is-drag .dz-ico::after{opacity:1; animation:spin 14s linear infinite}
@media (hover:hover){.dropzone:hover .dz-ico::after{opacity:1; animation:spin 14s linear infinite}}
.dropzone.is-drag .dz-ico{transform:translateY(-6px) scale(1.08); background:#fff; color:var(--gruen-text)}
.dz-title{font-family:var(--font-head); font-weight:500; font-size:1.12rem; letter-spacing:-.01em; margin:0; color:var(--ink)}
.dz-text{color:var(--ink-60); margin:0; font-size:.92rem}
.dz-pick{color:var(--gruen-text); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.dz-hint{color:var(--ink-30); font-size:.78rem; margin:6px 0 0}
.dropzone--compact{flex-direction:row; text-align:left; gap:16px; padding:16px 18px; justify-content:flex-start}
.dropzone--compact .dz-ico{width:48px; height:48px; border-radius:14px; margin:0; flex:0 0 auto}
.dropzone--compact .dz-ico svg{width:24px; height:24px}
.dropzone--compact .dz-ico::after{border-radius:19px; inset:-6px}
/* =========================================================================
Upload-Liste
========================================================================= */
.uplist{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; overflow:hidden;
box-shadow:inset 0 1px 2px rgba(79,66,62,.04)}
.uplist--scroll{max-height:min(52vh,420px); overflow-y:auto; overscroll-behavior:contain}
.up-row{position:relative; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px;
padding:10px 10px 10px 12px; border-bottom:1px solid var(--line-soft); animation:rowIn .45s var(--ease) both;
transition:background-color .3s var(--ease),opacity .3s}
.up-row:last-child{border-bottom:0}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.up-thumb{position:relative; width:48px; height:48px; border-radius:10px; overflow:hidden; background:var(--braun-wash);
display:grid; place-items:center; color:var(--braun)}
.up-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:fadeIn .45s var(--ease)}
.up-thumb > svg{width:20px; height:20px; opacity:.75}
.up-thumb .up-ext{font-family:var(--font-head); font-size:.6rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.up-thumb .up-play{position:absolute; right:3px; bottom:3px; width:16px; height:16px; border-radius:50%; background:rgba(58,48,45,.78); color:#fff;
display:grid; place-items:center; z-index:1}
.up-thumb .up-play svg{width:8px; height:8px; margin-left:1px}
.up-main{min-width:0}
.up-name{display:block; font-weight:500; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.up-sub{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin-top:1px; font-size:.77rem; color:var(--ink-30); font-variant-numeric:tabular-nums}
.up-state{color:var(--ink-60)}
.up-bar{display:block; height:4px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-top:7px; transition:opacity .4s var(--ease)}
.up-bar > span{display:block; height:100%; width:100%; border-radius:inherit; transform-origin:left center; transform:scaleX(var(--p,0));
background:linear-gradient(90deg,var(--gruen),var(--blau)); transition:transform .3s linear}
.up-side{display:flex; align-items:center; gap:2px}
.up-status{width:28px; height:28px; display:grid; place-items:center; color:var(--ink-30)}
.up-status svg{width:20px; height:20px}
.up-status .spinner{width:18px; height:18px; border-width:2px; margin:0}
.up-row[data-status="queued"] .up-bar > span{transform:scaleX(0)}
.up-row[data-status="uploading"] .up-state{color:var(--gruen-text)}
.up-row[data-status="processing"] .up-bar > span{transform:none; background:linear-gradient(90deg,var(--gruen-wash) 0%,var(--gruen) 45%,var(--blau) 55%,var(--gruen-wash) 100%);
background-size:220% 100%; animation:barFlow 1.3s linear infinite}
@keyframes barFlow{from{background-position:120% 0}to{background-position:-120% 0}}
.up-row[data-status="done"] .up-status,.up-row[data-status="duplicate"] .up-status{color:var(--gruen-text)}
.up-row[data-status="done"] .up-status svg,.up-row[data-status="duplicate"] .up-status svg{animation:pop .5s var(--ease-spring) both}
.up-row[data-status="done"] .up-bar,.up-row[data-status="duplicate"] .up-bar,.up-row[data-status="canceled"] .up-bar{opacity:0}
.up-row[data-status="duplicate"] .up-state{color:var(--blau-deep)}
.up-row[data-status="error"]{background:rgba(251,236,234,.45)}
.up-row[data-status="error"] .up-status{color:var(--rot-text)}
.up-row[data-status="error"] .up-state{color:var(--rot-text)}
.up-row[data-status="error"] .up-bar > span{background:#e0a79d}
.up-row.is-fatal .up-bar{display:none}
.up-row[data-status="canceled"]{opacity:.55}
.up-row[data-status="canceled"] .up-name{text-decoration:line-through}
.up-row .iconbtn{width:34px; height:34px}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Gesamtzeile unter der Liste */
.up-summary{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:12px 2px 0; color:var(--ink-60); font-size:.84rem; font-variant-numeric:tabular-nums}
.up-summary b{color:var(--ink); font-weight:600}
/* =========================================================================
Fortschrittsring (SVG, Verlauf grün → blau)
Markup (MEG.ring() erzeugt es):
========================================================================= */
.ring{--p:0; --size:200px; --c:339.292px; position:relative; width:var(--size); height:var(--size); max-width:100%; display:grid; place-items:center; flex:0 0 auto}
.ring-svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.ring-track{fill:none; stroke:var(--line-soft); stroke-width:7}
.ring-bar,.ring-glow{fill:none; stroke-width:7; stroke-linecap:round; stroke-dasharray:var(--c) var(--c);
stroke-dashoffset:calc(var(--c) * (1 - var(--p))); transition:stroke-dashoffset .6s var(--ease)}
.ring-glow{stroke-width:10; opacity:.38; filter:blur(5px)}
.ring-head{fill:#fff; stroke:var(--blau-deep); stroke-width:2.5; transform-box:view-box; transform-origin:60px 60px;
transform:rotate(calc(var(--p) * 360deg)); transition:transform .6s var(--ease),opacity .3s; opacity:1}
.ring.is-zero .ring-head{opacity:0}
.ring-center{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; width:66%}
.ring-center .logo{width:46%; height:auto; aspect-ratio:593/610}
.ring-num{font-family:var(--font-head); font-weight:600; font-size:clamp(1.5rem,calc(var(--size) * .15),2.6rem); letter-spacing:-.03em; line-height:1;
color:var(--braun); font-variant-numeric:tabular-nums}
.ring-num small{font-size:.5em; margin-left:1px; color:var(--ink-60); font-weight:500}
.ring-label{font-size:.78rem; color:var(--ink-60); line-height:1.3; text-wrap:balance}
.ring.is-indeterminate .ring-svg{animation:spin 1.5s linear infinite}
.ring.is-indeterminate .ring-bar,.ring.is-indeterminate .ring-glow{stroke-dashoffset:calc(var(--c) * .72); transition:none}
.ring.is-indeterminate .ring-head{opacity:0}
.ring.is-done .ring-head{opacity:0}
.ring.is-done::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--gruen); animation:ringDone 1.1s var(--ease) both; pointer-events:none}
@keyframes ringDone{0%{opacity:.85;transform:scale(.92)}100%{opacity:0;transform:scale(1.28)}}
/* =========================================================================
Toasts
========================================================================= */
.toasts{position:fixed; left:50%; bottom:calc(18px + var(--safe-b)); transform:translateX(-50%); z-index:2147483000;
display:flex; flex-direction:column; align-items:stretch; gap:10px; width:min(440px,calc(100vw - 24px)); pointer-events:none}
.toast{pointer-events:auto; position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px;
padding:11px 8px 11px 12px; border-radius:15px; background:rgba(58,48,45,.95); color:#fff; font-size:.9rem; line-height:1.4;
box-shadow:0 22px 44px -18px rgba(30,24,22,.6),0 2px 6px rgba(30,24,22,.18);
-webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
animation:toastIn .55s var(--ease-spring) both}
.toast.is-out{animation:toastOut .3s var(--ease) forwards}
.toast.is-bump{animation:toastBump .4s var(--ease-spring)}
.toast-ico{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--blau); color:#fff; flex:0 0 auto}
.toast-ico svg{width:16px; height:16px}
.toast--ok .toast-ico{background:var(--gruen)}
.toast--error .toast-ico{background:#C35D4D}
.toast-msg{min-width:0; overflow-wrap:anywhere}
.toast-act{border:0; background:rgba(255,255,255,.14); color:#fff; font-weight:600; font-size:.84rem; padding:7px 12px; border-radius:9px; cursor:pointer; white-space:nowrap}
@media (hover:hover){.toast-act:hover{background:rgba(255,255,255,.24)}}
.toast-x{width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:rgba(255,255,255,.7); display:grid; place-items:center; cursor:pointer}
@media (hover:hover){.toast-x:hover{background:rgba(255,255,255,.12); color:#fff}}
.toast-x:focus-visible,.toast-act:focus-visible{outline:2px solid rgba(255,255,255,.8); outline-offset:1px}
.toast-x svg{width:16px; height:16px}
.toast-side{display:flex; align-items:center; gap:4px}
.toast-timer{position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:left center; background:rgba(255,255,255,.38);
animation:toastTimer var(--t,4s) linear forwards}
.toast.is-paused .toast-timer{animation-play-state:paused}
@keyframes toastIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes toastBump{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes toastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* =========================================================================
Dialog (nativer