/* =====================================================================
   Glas STREICH – Webseiten-Entwurf, Stand 17.09.2026
   Gestaltung nach Stil-Kanon (.claude/skills/stil-kanon/KANON.md).
   EINE bewusste Abweichung, weil hier Kunden lesen und nicht Lucas am Mac:
   Grundtext 17 px statt 13 px (öffentliche Seite, auch ältere Leser,
   iOS zoomt Eingabefelder unter 16 px). Rangfolge: Bedienbarkeit vor Ordnung.
   Keine Fremdschrift, kein Fremd-Skript, keine Einbettung von Instagram/Google:
   nichts wird ohne Einwilligung an Dritte übertragen.
   ===================================================================== */
:root {
  --grund:#0a0a0c; --karte:#141418; --karte-2:#1b1b21; --rand:#26262e;
  --schrift:#f4f4f6; --schrift-matt:#a1a1ad; --schrift-still:#6f6f7d;
  --akzent:#4d9fff; --akzent-stark:#6cb0ff; --auf-akzent:#04121f;
  --gut:#35d07f; --warn:#ffb020; --schlecht:#ff5a52;
  --licht-blau:77 159 255; --licht-violett:120 92 255; --licht-tuerkis:0 200 190;
  --kante:0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.13), 0 24px 60px -24px rgba(0,0,0,.9);
  --kante-hoch:0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.18), 0 32px 80px -28px rgba(0,0,0,1);
  --glas:saturate(180%) blur(20px);
  --rund-karte:20px; --rund-feld:12px; --rund-innen:8px; --rund-pille:999px;
  --kurve-rein:cubic-bezier(.22,1,.36,1); --kurve-raus:cubic-bezier(.4,0,1,1);
  --dauer-klein:130ms; --dauer-mittel:300ms; --dauer-gross:500ms;
  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --seite:18px;
  color-scheme:dark;
}
@media (min-width:640px){ :root{ --seite:32px } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--grund); color:var(--schrift);
  font:400 17px/1.55 var(--font-sans); letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
p{ margin:0 }
h1,h2,h3{ margin:0; font-weight:600 }
button{ font:inherit; color:inherit }
:where(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--akzent); outline-offset:2px }
.nur-leser{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.springen{ position:absolute; left:16px; top:-60px; z-index:50; padding:12px 16px; background:var(--akzent); color:var(--auf-akzent); border-radius:var(--rund-pille); font-weight:600 }
.springen:focus{ top:12px }

/* ---------- E0 Raum: zwei gegenläufige Lichtschleier + Rausch ---------- */
body::before,body::after{ content:""; position:fixed; inset:-20%; pointer-events:none; z-index:-2 }
body::before{
  background:
    radial-gradient(46rem 30rem at 18% -6%, rgba(77,159,255,.16), transparent 62%),
    radial-gradient(38rem 26rem at 88% 4%, rgba(120,92,255,.13), transparent 60%),
    radial-gradient(34rem 24rem at 62% 52%, rgba(0,200,190,.055), transparent 66%);
  animation:schweben 34s ease-in-out infinite alternate;
}
body::after{
  background:
    radial-gradient(50rem 34rem at 82% 78%, rgba(77,159,255,.075), transparent 64%),
    radial-gradient(40rem 28rem at 8% 88%, rgba(120,92,255,.06), transparent 62%);
  animation:schweben-gegen 46s ease-in-out infinite alternate;
}
@keyframes schweben{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-2.5%,2%,0) scale(1.06)} }
@keyframes schweben-gegen{ from{transform:translate3d(0,0,0) scale(1.04)} to{transform:translate3d(3%,-2.5%,0) scale(1)} }
.rausch{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23r)'/></svg>") }

/* ---------- Material ---------- */
.kante{ background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow:var(--kante); border-radius:var(--rund-karte) }   /* E1 */
.kante-hoch{ background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow:var(--kante-hoch); border-radius:var(--rund-karte) } /* E2 */
.schein{ box-shadow:0 0 24px -4px color-mix(in srgb, var(--akzent) 55%, transparent) }

@property --winkel{ syntax:'<angle>'; initial-value:0deg; inherits:false }
.leuchtrand{ position:relative }
.leuchtrand::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--winkel,0deg), transparent 0%, color-mix(in srgb, var(--akzent) 85%, transparent) 12%, transparent 26%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:drehen 6s linear infinite }
@keyframes drehen{ to{ --winkel:360deg } }

.scheinwerfer{ position:relative; overflow:hidden }
.scheinwerfer::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(22rem circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--akzent) 13%, transparent), transparent 42%) }
.scheinwerfer:hover::after{ opacity:1 }

/* ---------- Knöpfe ---------- */
.knopf-haupt,.knopf{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; border-radius:var(--rund-pille); white-space:nowrap;
  transition:background var(--dauer-klein) var(--kurve-rein), transform var(--dauer-klein) var(--kurve-rein) }
.knopf-haupt{ min-height:52px; padding:0 24px; font-weight:600; font-size:17px; color:var(--auf-akzent); background:var(--akzent);
  box-shadow:0 0 24px -4px color-mix(in srgb, var(--akzent) 55%, transparent) }
.knopf-haupt:hover{ background:var(--akzent-stark) }
.knopf{ min-height:44px; padding:0 20px; font-weight:500; font-size:16px; color:var(--schrift); background:rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.09) }
.knopf.gross{ min-height:52px; padding:0 24px; font-size:17px }
.knopf:hover{ background:rgba(255,255,255,.12) }
.knopf-haupt:active,.knopf:active{ transform:scale(.97) }
.knopf svg,.knopf-haupt svg{ width:18px; height:18px; flex:none }

/* ---------- Schrift ---------- */
.etikett{ font-size:12px; line-height:1; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--schrift-still) }
.titel{ font-size:clamp(32px, 4.2vw, 52px); line-height:1.02; letter-spacing:-.035em; max-width:22ch; text-wrap:balance }
.lead{ font-size:clamp(18px, 1.6vw, 21px); line-height:1.5; color:var(--schrift-matt); max-width:46ch; letter-spacing:-.014em }
.matt{ color:var(--schrift-matt) }

/* ---------- Seitengerüst ---------- */
.breite{ max-width:1320px; margin:0 auto; padding-left:var(--seite); padding-right:var(--seite) }
@supports (padding:max(0px)){ .breite{ padding-left:max(var(--seite), env(safe-area-inset-left)); padding-right:max(var(--seite), env(safe-area-inset-right)) } }
.abschnitt{ padding:72px 0 }
.abschnitt-kopf{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 40px; margin-bottom:40px }
.abschnitt-kopf .etikett{ margin-bottom:16px; display:block }

/* ---------- E3 Kopfleiste: das einzige Glas der Seite ---------- */
.kopf{ position:sticky; top:0; z-index:30; transition:background var(--dauer-mittel) var(--kurve-rein), box-shadow var(--dauer-mittel) var(--kurve-rein) }
.kopf.gescrollt{ background:rgba(10,10,12,.72); -webkit-backdrop-filter:var(--glas); backdrop-filter:var(--glas); box-shadow:0 1px 0 rgba(255,255,255,.07) }
@media (prefers-reduced-transparency:reduce){ .kopf.gescrollt{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--grund) } }
.kopf-innen{ display:flex; align-items:center; gap:24px; height:68px }
.marke{ display:flex; align-items:center; gap:12px; margin-right:auto; min-height:44px }
.marke svg{ height:28px; width:auto; color:var(--schrift) }
.marke span{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase }
.marke span b{ font-weight:600; color:var(--schrift-matt) }
.navi{ display:flex; gap:4px }
.navi a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:var(--rund-pille); font-size:15px; color:var(--schrift-matt); transition:color var(--dauer-klein) var(--kurve-rein), background var(--dauer-klein) var(--kurve-rein) }
.navi a:hover{ color:var(--schrift); background:rgba(255,255,255,.06) }
.menue-knopf{ display:none }
@media (max-width:980px){
  .navi,.kopf .tel-knopf{ display:none }
  .menue-knopf{ display:inline-flex; width:44px; padding:0 }
  .kopf.offen .navi{ display:flex; flex-direction:column; position:absolute; left:var(--seite); right:var(--seite); top:68px; padding:8px;
    background:rgba(20,20,24,.98); border-radius:var(--rund-karte); box-shadow:var(--kante-hoch) }
  .kopf.offen .navi a{ min-height:52px; font-size:18px; color:var(--schrift) }
}

/* ---------- Start ---------- */
.start{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:center; padding-top:40px; padding-bottom:72px; min-height:calc(100svh - 68px) }
.start-text .etikett{ display:inline-flex; align-items:center; gap:8px; margin-bottom:24px }
.start-text .etikett i{ width:8px; height:8px; border-radius:50%; background:var(--akzent); box-shadow:0 0 12px var(--akzent) }
h1{ font-size:clamp(44px, 6.6vw, 96px); line-height:.94; letter-spacing:-.048em; margin-bottom:32px }
h1 em{ font-style:normal; background:linear-gradient(100deg, #f4f4f6 0%, var(--akzent-stark) 55%, #9f8cff 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.start .lead{ margin-bottom:40px }
.aktionen{ display:flex; flex-wrap:wrap; gap:12px }
.belege{ list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:12px 40px }
.belege li{ display:flex; flex-direction:column; gap:4px }
.belege strong{ font-size:17px; font-weight:600; letter-spacing:-.02em }
.belege span{ font-size:14px; color:var(--schrift-matt) }

/* Die Scheibe: Video hinter Glas, mit grüner Glaskante und Lichtreflex unter dem Zeiger */
.scheibe-buehne{ position:relative; perspective:1400px; justify-self:center; width:100%; max-width:430px }
.scheibe-buehne::before{ /* zweite Scheibe dahinter – Tiefe wie im Glasgestell */
  content:""; position:absolute; inset:24px -24px -24px 24px; border-radius:var(--rund-karte);
  background:linear-gradient(160deg, rgba(var(--licht-tuerkis) / .10), rgba(var(--licht-violett) / .06)); box-shadow:0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08) }
.scheibe{ position:relative; margin:0; aspect-ratio:9/16; overflow:hidden; transform-style:preserve-3d; will-change:transform;
  transition:transform var(--dauer-gross) var(--kurve-rein) }
.scheibe video,.scheibe img{ width:100%; height:100%; object-fit:cover; filter:brightness(.92) contrast(1.02) }
.scheibe::after{ /* Glaskante rechts: eine Scheibe sieht man an der Kante */
  content:""; position:absolute; top:0; bottom:0; right:0; width:3px; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--licht-tuerkis) / .0), rgba(var(--licht-tuerkis) / .55) 30%, rgba(var(--licht-tuerkis) / .25) 70%, rgba(var(--licht-tuerkis) / 0)) }
.reflex{ position:absolute; inset:-40%; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.04) 52%, transparent 60%);
  transform:translate3d(var(--rx,-30%),0,0); }
.reflex.einmal{ animation:schnitt 1400ms var(--kurve-rein) 400ms both }
@keyframes schnitt{ from{ transform:translate3d(-60%,0,0) } to{ transform:translate3d(40%,0,0) } }
.fortschritt{ position:absolute; top:16px; left:16px; right:16px; display:flex; gap:4px; z-index:2 }
.fortschritt span{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.22); overflow:hidden }
.fortschritt span i{ display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left }
.bildzeile{ position:absolute; left:16px; right:16px; bottom:16px; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-radius:var(--rund-feld); background:rgba(10,10,12,.72); box-shadow:0 0 0 1px rgba(255,255,255,.08) }
.bildzeile b{ font-size:12px; font-weight:600; color:var(--schrift-still); font-variant-numeric:tabular-nums; letter-spacing:.06em }
.bildzeile span{ font-size:15px; font-weight:500; transition:opacity 200ms var(--kurve-raus) }
.bildzeile span.weg{ opacity:0 }
.abspielen{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; border:none; cursor:pointer; z-index:3; display:none;
  background:rgba(10,10,12,.72); box-shadow:0 0 0 1px rgba(255,255,255,.14) }
.abspielen svg{ width:26px; height:26px; margin-left:4px }
.scheibe.steht .abspielen{ display:block }

@media (max-width:980px){
  .start{ grid-template-columns:1fr; gap:40px; min-height:0; padding-top:24px; padding-bottom:56px }
  .scheibe-buehne{ max-width:520px; justify-self:stretch }
  .scheibe{ aspect-ratio:4/5 }
  .scheibe-buehne::before{ inset:16px -12px -16px 12px }
  .belege{ grid-template-columns:1fr; margin-top:40px }
}

/* ---------- Instrument: drei Aussagen, getrennt durch Haarlinien ---------- */
.instrument{ display:grid; grid-template-columns:5fr 4fr 3fr; gap:1px; background:var(--rand); border-radius:var(--rund-karte); overflow:hidden; box-shadow:var(--kante) }
.instrument > div{ background:var(--karte); padding:32px }
.instrument .etikett{ display:block; margin-bottom:16px }
.instrument h3{ font-size:30px; line-height:1.1; letter-spacing:-.03em; margin-bottom:8px }
.instrument p{ font-size:15px; color:var(--schrift-matt); max-width:40ch }
@media (max-width:860px){ .instrument{ grid-template-columns:1fr } }

/* ---------- Arbeiten ---------- */
.filter{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ min-height:44px; padding:0 18px; border:none; border-radius:var(--rund-pille); cursor:pointer; font-size:15px; font-weight:500;
  color:var(--schrift-matt); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background var(--dauer-klein) var(--kurve-rein), color var(--dauer-klein) var(--kurve-rein), transform var(--dauer-klein) var(--kurve-rein) }
.chip:hover{ color:var(--schrift); background:rgba(255,255,255,.09) }
.chip:active{ transform:scale(.97) }
.chip[aria-pressed="true"]{ color:var(--schrift); background:color-mix(in srgb, var(--akzent) 18%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--akzent) 55%, transparent) }

.galerie{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); grid-auto-rows:150px; grid-auto-flow:dense; gap:20px }
.werk{ position:relative; margin:0; border-radius:var(--rund-karte); overflow:hidden; background:var(--karte); box-shadow:var(--kante); cursor:zoom-in;
  grid-column:span 3; grid-row:span 3 }
.werk button{ all:unset; position:absolute; inset:0; z-index:2; cursor:zoom-in; border-radius:inherit }
.werk button:focus-visible{ outline:2px solid var(--akzent); outline-offset:-2px }
.werk img{ width:100%; height:100%; object-fit:cover; filter:brightness(.92) contrast(1.02); transform:scale(1.001); transition:transform 700ms var(--kurve-rein) }
.werk:hover img{ transform:scale(1.045) }
.werk figcaption{ position:absolute; left:0; right:0; bottom:0; padding:48px 20px 16px; font-size:15px; font-weight:500; line-height:1.35;
  background:linear-gradient(180deg, transparent, rgba(10,10,12,.86)); transform:translateY(8px); opacity:.0; transition:opacity var(--dauer-mittel) var(--kurve-rein), transform var(--dauer-mittel) var(--kurve-rein) }
.werk figcaption small{ display:block; margin-bottom:4px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--schrift-matt) }
.werk:hover figcaption,.werk:focus-within figcaption{ opacity:1; transform:none }
@media (hover:none){ .werk figcaption{ opacity:1; transform:none } }
.w-5x4{ grid-column:span 5; grid-row:span 4 } .w-4x2{ grid-column:span 4; grid-row:span 2 } .w-3x2{ grid-column:span 3; grid-row:span 2 }
.w-4x3{ grid-column:span 4; grid-row:span 3 } .w-5x3{ grid-column:span 5; grid-row:span 3 } .w-6x2{ grid-column:span 6; grid-row:span 2 }
.w-3x3{ grid-column:span 3; grid-row:span 3 }
.galerie.gefiltert .werk{ grid-column:span 4; grid-row:span 3 }
.werk.versteckt,.werk.mehr:not(.gezeigt){ display:none }
.galerie-fuss{ display:flex; justify-content:center; margin-top:32px }
@media (max-width:1024px){
  .galerie{ grid-template-columns:repeat(6, minmax(0,1fr)); grid-auto-rows:130px; gap:16px }
  .galerie .werk,.galerie.gefiltert .werk{ grid-column:span 3; grid-row:span 3 }
  .galerie .w-5x4{ grid-column:span 6; grid-row:span 4 }
  .galerie .w-6x2{ grid-column:span 6; grid-row:span 3 }
}
@media (max-width:600px){
  .galerie{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:120px; gap:12px }
  .galerie .werk,.galerie.gefiltert .werk{ grid-column:span 1; grid-row:span 2 }
  .galerie .w-5x4,.galerie .w-6x2{ grid-column:span 2; grid-row:span 3 }
  .werk figcaption{ padding:32px 12px 12px; font-size:13px }
  .werk figcaption small{ display:none }
}

/* ---------- Leistungen: Bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px }
.feld{ padding:32px; display:flex; flex-direction:column; gap:12px; min-height:280px }
.feld h3{ font-size:26px; line-height:1.15; letter-spacing:-.03em }
.feld p{ font-size:16px; color:var(--schrift-matt); max-width:46ch }
.feld .etikett{ margin-bottom:4px }
.feld ul,.feld-bild .innen ul{ list-style:none; margin:auto 0 0; padding:16px 0 0; display:flex; flex-wrap:wrap; gap:8px }
.feld li,.feld-bild .innen li{ font-size:14px; padding:6px 12px; border-radius:var(--rund-pille); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); color:var(--schrift-matt) }
.b-7{ grid-column:span 7 } .b-5{ grid-column:span 5 } .b-8{ grid-column:span 8 } .b-4{ grid-column:span 4 } .b-12{ grid-column:span 12 }
.feld-bild{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:0; padding:0; overflow:hidden }
.feld-bild .innen{ padding:40px; display:flex; flex-direction:column; gap:12px }
.feld-bild .innen h3{ font-size:clamp(30px, 3vw, 40px) }
.feld-bild img{ width:100%; height:100%; object-fit:cover; min-height:320px; filter:brightness(.92) contrast(1.02);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24%); mask-image:linear-gradient(90deg, transparent 0, #000 24%) }
.feld-mini-bild{ height:160px; margin:-32px -32px 8px; border-radius:var(--rund-karte) var(--rund-karte) 0 0; overflow:hidden }
.feld-mini-bild img{ width:100%; height:100%; object-fit:cover; filter:brightness(.92) contrast(1.02) }
.weitere{ padding:32px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:24px 40px; align-items:center }
.weitere h3{ font-size:26px; letter-spacing:-.03em }
.weitere ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.weitere li{ font-size:15px; padding:8px 16px; border-radius:var(--rund-pille); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) }
@media (max-width:980px){
  .b-7,.b-5,.b-8,.b-4{ grid-column:span 12 }
  .feld-bild{ grid-template-columns:1fr }
  .feld-bild img{ min-height:260px; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 30%); mask-image:linear-gradient(180deg, transparent 0, #000 30%) }
  .weitere{ grid-template-columns:1fr }
}

/* ---------- Ablauf ---------- */
.ablauf{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; list-style:none; margin:0; padding:0 }
.ablauf-linie{ position:absolute; left:28px; right:28px; top:28px; height:1px; background:linear-gradient(90deg, var(--akzent), rgba(var(--licht-violett) / .6), rgba(var(--licht-tuerkis) / .5));
  transform:scaleX(0); transform-origin:left; transition:transform 1100ms cubic-bezier(.16,1,.3,1) /* Ausnahme: Linienmaske */ }
.ablauf.da .ablauf-linie{ transform:scaleX(1) }
.schritt{ position:relative; padding-top:80px }
.schritt .nr{ position:absolute; top:0; left:0; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; background:var(--karte-2); box-shadow:var(--kante) }
.schritt:nth-child(2) .nr{ color:var(--auf-akzent); background:var(--akzent); box-shadow:0 0 24px -4px color-mix(in srgb, var(--akzent) 55%, transparent) }
.schritt h3{ font-size:22px; letter-spacing:-.02em; margin-bottom:8px }
.schritt p{ font-size:16px; color:var(--schrift-matt); max-width:30ch }
@media (max-width:860px){
  .ablauf{ grid-template-columns:1fr; gap:32px }
  .ablauf-linie{ left:28px; right:auto; top:28px; bottom:28px; width:1px; height:auto; transform:scaleY(0); transform-origin:top;
    background:linear-gradient(180deg, var(--akzent), rgba(var(--licht-violett) / .6), rgba(var(--licht-tuerkis) / .5)) }
  .ablauf.da .ablauf-linie{ transform:scaleY(1) }
  .schritt{ padding:0 0 0 80px; min-height:56px }
}

/* ---------- Stimmen ---------- */
.stimmen{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:20px }
.stimme{ padding:40px; display:flex; flex-direction:column; gap:24px; margin:0 }
.stimme blockquote{ margin:0; font-size:clamp(22px, 2.2vw, 30px); line-height:1.3; letter-spacing:-.025em; font-weight:500 }
.stimme.klein blockquote{ font-size:22px }
.stimme figcaption{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:15px; color:var(--schrift-matt) }
.sterne{ letter-spacing:.12em; color:var(--schrift) }
.stimmen-fuss{ margin-top:24px; font-size:15px; color:var(--schrift-matt) }
.stimmen-fuss a{ color:var(--akzent-stark) }
@media (max-width:860px){ .stimmen{ grid-template-columns:1fr } .stimme{ padding:28px } }

/* ---------- Über uns + Karriere ---------- */
.ueber{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:20px }
.ueber-bild{ position:relative; overflow:hidden; min-height:520px }
.ueber-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.92) contrast(1.02) }
.ueber-text{ padding:40px; display:flex; flex-direction:column; gap:20px }
.ueber-text p{ color:var(--schrift-matt); max-width:56ch }
.ueber-text p strong{ color:var(--schrift); font-weight:600 }
.vereine{ font-size:15px }
.karriere{ margin-top:auto; padding:24px; border-radius:var(--rund-feld); background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start }
.karriere .knopf{ justify-self:start }
.karriere h3{ font-size:24px; letter-spacing:-.025em; margin-bottom:4px }
.karriere p{ font-size:15px }
@media (max-width:980px){ .ueber{ grid-template-columns:1fr } .ueber-bild{ min-height:420px } .karriere{ grid-template-columns:1fr } .ueber-text{ padding:28px } }

/* ---------- Anfrage ---------- */
.anfrage{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:20px; align-items:start }
.formular{ padding:40px }
.formular h2{ font-size:clamp(30px, 3vw, 40px); letter-spacing:-.035em; line-height:1.05; margin-bottom:8px }
.formular form > p{ color:var(--schrift-matt); margin-bottom:32px; max-width:52ch }
fieldset{ border:none; margin:0 0 24px; padding:0 }
legend,.feld-name{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--schrift-still); margin-bottom:12px; padding:0 }
.reihe{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px }
.reihe.plz{ grid-template-columns:140px 1fr }
.eingabe{ display:flex; flex-direction:column; gap:8px }
.eingabe span{ font-size:14px; color:var(--schrift-matt) }
.eingabe input,.eingabe textarea{ width:100%; min-height:52px; padding:14px 16px; font:400 17px/1.4 var(--font-sans); color:var(--schrift); border:none; border-radius:var(--rund-feld);
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); transition:box-shadow var(--dauer-klein) var(--kurve-rein), background var(--dauer-klein) var(--kurve-rein) }
.eingabe textarea{ min-height:132px; resize:vertical }
.eingabe input::placeholder,.eingabe textarea::placeholder{ color:var(--schrift-still) }
.eingabe input:hover,.eingabe textarea:hover{ background:rgba(255,255,255,.06) }
.eingabe input:focus,.eingabe textarea:focus{ outline:none; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--akzent) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--akzent) 18%, transparent) }
.eingabe.fehlt input{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--schlecht) 70%, transparent) }
.eingabe .hinweis-fehlt{ display:none; font-size:14px; color:var(--schlecht) }
.eingabe.fehlt .hinweis-fehlt{ display:block }
.wahl{ display:flex; flex-wrap:wrap; gap:8px }
.wahl label{ position:relative }
.wahl input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.wahl span{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--rund-pille); font-size:15px; font-weight:500;
  color:var(--schrift-matt); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:all var(--dauer-klein) var(--kurve-rein) }
.wahl input:checked + span{ color:var(--schrift); background:color-mix(in srgb, var(--akzent) 18%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--akzent) 55%, transparent) }
.wahl input:focus-visible + span{ outline:2px solid var(--akzent); outline-offset:2px }
.fotos{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:132px; padding:24px; text-align:center;
  border-radius:var(--rund-feld); background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); cursor:pointer; transition:background var(--dauer-klein) var(--kurve-rein) }
.fotos:hover,.fotos.drueber{ background:color-mix(in srgb, var(--akzent) 8%, transparent) }
.fotos input{ position:absolute; inset:0; opacity:0; cursor:pointer }
.fotos strong{ font-size:16px; font-weight:600 }
.fotos span{ font-size:14px; color:var(--schrift-matt) }
.fotos svg{ width:28px; height:28px; color:var(--akzent-stark) }
.vorschau{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.vorschau img{ width:72px; height:72px; object-fit:cover; border-radius:var(--rund-innen); box-shadow:0 0 0 1px rgba(255,255,255,.1) }
.zustimmung{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--schrift-matt); margin:24px 0; cursor:pointer }
.zustimmung input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--akzent); flex:none }
.zustimmung a{ color:var(--akzent-stark) }
.zustimmung.fehlt{ color:var(--schlecht) }
.formular .knopf-haupt{ width:100% }
.quittung{ display:none; padding:8px 0 0; text-align:left }
.quittung .haken{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:24px; background:color-mix(in srgb, var(--gut) 16%, transparent); color:var(--gut) }
.quittung .haken svg{ width:28px; height:28px }
.quittung h3{ font-size:30px; letter-spacing:-.03em; margin-bottom:12px }
.quittung p{ color:var(--schrift-matt); max-width:52ch; margin-bottom:12px }
.quittung .entwurf-hinweis{ margin-top:24px; padding:16px; border-radius:var(--rund-feld); font-size:15px; color:var(--schrift); background:color-mix(in srgb, var(--warn) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent) }
.formular.gesendet form{ display:none }
.formular.gesendet .quittung{ display:block; animation:rein var(--dauer-mittel) var(--kurve-rein) both }
@keyframes rein{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

.direkt{ display:flex; flex-direction:column; gap:20px }
.direkt-karte{ padding:32px }
.direkt-karte h3{ font-size:22px; letter-spacing:-.02em; margin-bottom:20px }
.weg{ display:flex; align-items:center; gap:16px; min-height:64px; padding:12px 16px; margin:0 -16px; border-radius:var(--rund-feld); transition:background var(--dauer-klein) var(--kurve-rein) }
.weg:hover{ background:rgba(255,255,255,.05) }
.weg .symbol{ width:44px; height:44px; flex:none; border-radius:var(--rund-feld); display:grid; place-items:center; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.08) }
.weg .symbol svg{ width:20px; height:20px }
.weg small{ display:block; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--schrift-still); margin-bottom:2px }
.weg strong{ font-size:17px; font-weight:500 }
.orte{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.orte li{ font-size:15px; padding:8px 14px; border-radius:var(--rund-pille); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) }
.orte li:first-child{ color:var(--schrift); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent) }
@media (max-width:980px){ .anfrage{ grid-template-columns:1fr } .formular{ padding:28px } .reihe{ grid-template-columns:1fr } .reihe.plz{ grid-template-columns:120px 1fr } }

/* ---------- Fuß ---------- */
.fuss{ padding:56px 0 120px; margin-top:40px; box-shadow:0 -1px 0 rgba(255,255,255,.06) }
.fuss-innen{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr); gap:32px 40px; font-size:15px; color:var(--schrift-matt) }
.fuss .marke{ margin-bottom:16px }
.fuss nav{ display:flex; flex-direction:column; gap:4px }
.fuss nav a{ min-height:36px; display:inline-flex; align-items:center }
.fuss nav a:hover{ color:var(--schrift) }
.fuss-zeile{ grid-column:1/-1; padding-top:24px; font-size:13px; color:var(--schrift-still); box-shadow:0 -1px 0 rgba(255,255,255,.06) }
@media (max-width:860px){ .fuss-innen{ grid-template-columns:1fr } }

/* ---------- Handy: Leiste unten ---------- */
.handy-leiste{ display:none }
@media (max-width:760px){
  .handy-leiste{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:rgba(10,10,12,.94); box-shadow:0 -1px 0 rgba(255,255,255,.08);
    transform:translateY(110%); transition:transform var(--dauer-mittel) var(--kurve-rein) }
  .handy-leiste.da{ transform:none }
  .handy-leiste a{ min-height:48px; font-size:15px; padding:0 12px }
}

/* ---------- Galerie-Großansicht ---------- */
dialog.grossbild{ width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:none; background:rgba(6,6,8,.94); color:var(--schrift) }
dialog.grossbild::backdrop{ background:transparent }
dialog.grossbild[open]{ display:grid; grid-template-rows:minmax(0,1fr) auto; animation:rein var(--dauer-mittel) var(--kurve-rein) both }
.gb-buehne{ position:relative; display:grid; place-items:center; padding:24px 88px 0; min-height:0 }
.gb-buehne img{ max-width:100%; max-height:calc(100dvh - 112px); object-fit:contain; border-radius:var(--rund-feld); box-shadow:var(--kante-hoch) }
.gb-fuss{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px calc(16px + env(safe-area-inset-bottom)) }
.gb-fuss p{ font-size:17px; font-weight:500 }
.gb-fuss small{ font-size:14px; color:var(--schrift-still); font-variant-numeric:tabular-nums; margin-left:12px }
.gb-pfeil{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; padding:0 }
.gb-pfeil:active{ transform:translateY(-50%) scale(.97) }
.gb-zurueck{ left:16px } .gb-vor{ right:16px }
@media (max-width:600px){ .gb-buehne{ padding:16px 12px 0 } .gb-pfeil{ top:auto; bottom:-64px; transform:none } .gb-zurueck{ left:auto; right:84px } .gb-vor{ right:16px } .gb-fuss{ padding-right:160px } }

/* ---------- Auftauchen beim Scrollen ---------- */
.js .auftauchen{ opacity:0; transform:translateY(16px); transition:opacity var(--dauer-gross) var(--kurve-rein), transform var(--dauer-gross) var(--kurve-rein); transition-delay:var(--v,0ms) }
.js .auftauchen.da{ opacity:1; transform:none }
.js .scheibe-buehne.auftauchen{ transform:scale(.96) translateY(0) }
.js .scheibe-buehne.auftauchen.da{ transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  body::before,body::after,.leuchtrand::before,.reflex{ animation:none !important }
  .js .auftauchen{ opacity:1; transform:none }
}

/* =====================================================================
   Ab hier: Unterseiten (spiegel.html) und Ergänzungen vom 17.09.2026
   ===================================================================== */

/* Textlink mit Pfeil – für „Alles zu …“ in einer Karte */
.pfeil-link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; font-size:16px; font-weight:600; color:var(--akzent-stark) }
.pfeil-link svg{ width:18px; height:18px; transition:transform var(--dauer-klein) var(--kurve-rein) }
.pfeil-link:hover svg{ transform:translateX(4px) }
.feld .pfeil-link{ margin-top:auto; padding-top:12px }
.feld ul + .pfeil-link{ margin-top:0 }

/* Karte als Ganzes klickbar, ohne verschachtelte Links */
.karte-link{ position:relative }
.karte-link .pfeil-link::after{ content:""; position:absolute; inset:0; border-radius:inherit }

/* Merkmal-Instrument: viele kurze Merkmale in einem Block, getrennt durch Haarlinien */
.merkmale{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--rand); border-radius:var(--rund-karte); overflow:hidden; box-shadow:var(--kante) }
.merkmal{ background:var(--karte); padding:28px 24px; display:flex; flex-direction:column; gap:8px }
.merkmal svg{ width:28px; height:28px; color:var(--akzent-stark); margin-bottom:8px }
.merkmal h3{ font-size:18px; letter-spacing:-.02em; line-height:1.25 }
.merkmal p{ font-size:15px; color:var(--schrift-matt) }
.fussnote{ margin-top:16px; font-size:14px; color:var(--schrift-matt); max-width:66ch }
@media (max-width:1024px){ .merkmale{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:560px){ .merkmale{ grid-template-columns:1fr } }

/* Lichtfarbe zum Ausprobieren: der Spiegel leuchtet in der gewählten Farbtemperatur */
.lichtprobe{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding:40px }
.probe-wand{ position:relative; aspect-ratio:4/3; border-radius:var(--rund-feld); background:#15151a; display:grid; place-items:center; overflow:hidden }
.probe-spiegel{ height:76%; aspect-ratio:3/4; border-radius:14px;
  background:linear-gradient(160deg, #3a3d44 0%, #202227 45%, #2b2e34 100%);
  box-shadow:0 0 0 2px var(--licht, #ffd9a8), 0 0 36px 8px color-mix(in srgb, var(--licht, #ffd9a8) 55%, transparent), 0 0 120px 30px color-mix(in srgb, var(--licht, #ffd9a8) 22%, transparent);
  position:relative }
.probe-spiegel::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.12) 45%, transparent 55%) }
.probe-regler label{ display:block; margin-bottom:16px }
.probe-wert{ font-size:52px; font-weight:600; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; margin:8px 0 4px }
.probe-wert small{ font-size:30px; font-weight:400; color:var(--schrift-still); margin-left:6px }
.probe-name{ color:var(--schrift-matt); margin-bottom:24px; min-height:1.55em }
.probe-regler input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; cursor:pointer }
.probe-regler input[type=range]::-webkit-slider-runnable-track{ height:10px; border-radius:5px; background:linear-gradient(90deg, #ffb46b, #ffd9a8 30%, #fff4e5 55%, #eef3ff 80%, #d6e4ff) }
.probe-regler input[type=range]::-moz-range-track{ height:10px; border-radius:5px; background:linear-gradient(90deg, #ffb46b, #ffd9a8 30%, #fff4e5 55%, #eef3ff 80%, #d6e4ff) }
.probe-regler input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; margin-top:-9px; border-radius:50%; background:var(--schrift); box-shadow:0 2px 10px rgba(0,0,0,.6) }
.probe-regler input[type=range]::-moz-range-thumb{ width:28px; height:28px; border:none; border-radius:50%; background:var(--schrift); box-shadow:0 2px 10px rgba(0,0,0,.6) }
.probe-skala{ display:flex; justify-content:space-between; font-size:13px; color:var(--schrift-still); font-variant-numeric:tabular-nums }
@media (max-width:860px){ .lichtprobe{ grid-template-columns:1fr; padding:24px; gap:24px } }

/* Schlussaufruf auf Unterseiten */
.aufruf{ padding:48px; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px 40px; align-items:center }
.aufruf h2{ font-size:clamp(30px, 3.4vw, 44px); letter-spacing:-.035em; line-height:1.05; margin-bottom:12px }
.aufruf p{ color:var(--schrift-matt); max-width:52ch }
.aufruf .aktionen{ justify-content:flex-end }
@media (max-width:860px){ .aufruf{ grid-template-columns:1fr; padding:28px } .aufruf .aktionen{ justify-content:flex-start } }

/* Brotkrumen über der Schlagzeile einer Unterseite */
.zurueck{ display:flex; width:fit-content; align-items:center; gap:8px; min-height:44px; margin-bottom:16px; font-size:15px; color:var(--schrift-matt) }
.zurueck svg{ width:16px; height:16px; transform:scaleX(-1) }
.zurueck:hover{ color:var(--schrift) }

/* Etikett als Teil der h1 (Google liest „Glasermeisterbetrieb aus Lohmar“ mit), Aussehen wie vorher */
.start-text .h1-etikett{ display:flex; align-items:center; gap:8px; width:fit-content; margin-bottom:24px; letter-spacing:.12em }
.start-text .h1-etikett i{ width:8px; height:8px; border-radius:50%; background:var(--akzent); box-shadow:0 0 12px var(--akzent) }

/* Partner: vier Logos in einem Block mit Haarlinien */
.partner{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--rand); border-radius:var(--rund-karte); overflow:hidden; box-shadow:var(--kante) }
.partner > div{ background:var(--karte); display:grid; place-items:center; min-height:160px; padding:32px }
.partner img{ width:auto; max-width:100%; opacity:.78; transition:opacity var(--dauer-klein) var(--kurve-rein) }
.partner > div:hover img{ opacity:1 }
@media (max-width:760px){ .partner{ grid-template-columns:repeat(2, minmax(0,1fr)) } .partner > div{ min-height:120px; padding:24px } .partner img{ max-height:44px } }

/* Region: Überschrift links, Text rechts */
.region{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px 56px; align-items:start }
.region-text{ display:flex; flex-direction:column; gap:16px }
.region-text p{ font-size:19px; line-height:1.55; color:var(--schrift-matt); max-width:56ch }
.region-text .orte{ margin-top:8px }
@media (max-width:860px){ .region{ grid-template-columns:1fr } .region-text p{ font-size:17px } }

/* ---------- Rechtliche Seiten: ruhig, gut lesbar ---------- */
.rechtsseite{ padding-top:40px; padding-bottom:40px }
.rechtsseite > .etikett{ display:block; margin-bottom:16px }
.rechtsseite > .titel{ margin-bottom:32px }
.rechtstext{ padding:40px; max-width:880px }
.rechtstext h2{ font-size:22px; letter-spacing:-.012em; line-height:1.25; margin:40px 0 12px }
.rechtstext h2:first-child{ margin-top:0 }
.rechtstext h3{ font-size:17px; letter-spacing:-.02em; margin:28px 0 8px }
.rechtstext h4{ font-size:16px; margin:20px 0 8px }
.rechtstext p, .rechtstext li{ font-size:16px; line-height:1.65; color:var(--schrift-matt); max-width:72ch; overflow-wrap:anywhere }
.rechtstext p{ margin:0 0 12px }
.rechtstext ul, .rechtstext ol{ margin:0 0 16px; padding-left:22px }
.rechtstext strong{ color:var(--schrift); font-weight:600 }
.rechtstext a{ color:var(--akzent-stark); text-decoration:underline; text-underline-offset:3px }
@media (max-width:640px){ .rechtstext{ padding:24px } }

/* Knopf in der Fußzeile, sieht aus wie die Links daneben */
.fuss-link{ all:unset; min-height:36px; display:inline-flex; align-items:center; cursor:pointer; color:inherit }
.fuss-link:hover{ color:var(--schrift) }
.fuss-link:focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; border-radius:4px }

/* ---------- Einwilligung: E3-Bedienglas unten, beide Wahlmöglichkeiten gleich groß ---------- */
.einwilligung{ position:fixed; z-index:60; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); max-width:460px; padding:24px;
  border-radius:var(--rund-karte); background:rgba(20,20,24,.86); -webkit-backdrop-filter:var(--glas); backdrop-filter:var(--glas); box-shadow:var(--kante-hoch);
  animation:rein var(--dauer-mittel) var(--kurve-rein) both }
@media (prefers-reduced-transparency:reduce){ .einwilligung{ backdrop-filter:none; background:var(--karte) } }
.einwilligung h2{ margin:0 0 8px }
.einwilligung p{ font-size:15px; line-height:1.5; color:var(--schrift-matt); margin:0 0 16px }
.einwilligung a{ color:var(--akzent-stark) }
.einw-knoepfe{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.einw-knoepfe .knopf{ min-height:48px }

/* ---------- Formular: Honigtopf, Fehler, Sendezustand ---------- */
.honig{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.formular-fehler{ margin:0 0 16px; padding:16px; border-radius:var(--rund-feld); font-size:15px; color:var(--schrift);
  background:color-mix(in srgb, var(--warn) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent) }
.formular-fehler a{ color:var(--akzent-stark); font-weight:600 }
.knopf-haupt[disabled]{ opacity:.7; cursor:progress }
.quittung a{ color:var(--akzent-stark) }