/* =========================================================================
   MeldePlatz · Gestaltung
   Ruhig, redaktionell, präzise. Eine Schriftfamilie, warmes Papier, Tinte.
   Farbe kommt aus dem Produkt (App) und aus dem Foto, nicht aus Dekoration.
   Schriften und Bilder liegen lokal auf dem Server (keine Drittanbieter).
   ========================================================================= */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#F6F4EF;
  --stone:#ECE7DE;
  --ink:#161616;
  --ink-2:#4A4844;
  --ink-3:#67645E;
  --line:#D9D3C8;
  --line-ink:rgba(22,22,22,.9);
  --night:#171716;
  --night-text:#EDEAE4;
  --night-text-2:#A8A49B;
  --night-line:rgba(237,234,228,.16);
  --accent:#2549DB;          /* Farbe der App: Produkt und Fokus */
  --accent-light:#8FA6F7;

  --font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --fs-display:clamp(2.75rem,1.15rem + 4.9vw,5.25rem);
  --fs-xl:clamp(2.4rem,1.35rem + 3.3vw,4.25rem);
  --fs-statement:clamp(1.75rem,.95rem + 2.5vw,3.25rem);
  --fs-h2:clamp(1.9rem,1.3rem + 1.85vw,3rem);
  --fs-h3:clamp(1.25rem,1.12rem + .45vw,1.5rem);
  --fs-lead:clamp(1.125rem,1.06rem + .28vw,1.3125rem);
  --fs-body:clamp(1rem,.98rem + .1vw,1.0625rem);
  --fs-small:.9375rem;
  --fs-xs:.8125rem;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,64px);
  --gap:clamp(16px,2vw,28px);
  --header-h:76px;
  /* Abschnittsabstand: richtet sich auch nach der Fensterhöhe, damit niedrige Laptop-Fenster nicht leer wirken */
  --sec-pad:clamp(72px,min(10vw,17vh),168px);
  --ease:cubic-bezier(.22,.7,.2,1);
}
@media (max-width:1023px){:root{--header-h:64px}}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px);color-scheme:light;interpolate-size:allow-keywords}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-x:clip;
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.6;font-weight:400;
  font-synthesis:none;font-kerning:normal;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word;
}
main{flex:1 0 auto}
main > section{background-color:var(--paper)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul[class],ol[class],nav ul{list-style:none;padding:0}
strong{font-weight:560}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.on-night :focus-visible{outline-color:var(--accent-light)}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;font-weight:500;text-decoration:none;border-radius:4px}
.skip-link:focus{top:12px}
.i{width:1.2em;height:1.2em;flex:none;fill:currentColor}

/* ---------- Raster ---------- */
.wrap{width:min(var(--maxw),100% - 2 * var(--gutter));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.grid > *{min-width:0}

/* ---------- Typografie ---------- */
.display{font-size:var(--fs-display);font-weight:320;line-height:1;letter-spacing:-.042em}
.xl{font-size:var(--fs-xl);font-weight:320;line-height:1.02;letter-spacing:-.038em}
.h2{font-size:var(--fs-h2);font-weight:340;line-height:1.06;letter-spacing:-.032em}
.h3{font-size:var(--fs-h3);font-weight:500;line-height:1.25;letter-spacing:-.012em}
.display strong,.xl strong,.h2 strong{font-weight:540}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.body{color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.small{font-size:var(--fs-small);color:var(--ink-3)}
.intro{font-size:var(--fs-small);font-weight:500;color:var(--ink-2)}
@media (max-width:640px){.display,.xl,.h2{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}}

.textlink{display:inline-flex;align-items:center;gap:.5em;font-weight:500;color:var(--ink);text-decoration:none}
/* Unterstreichung zeichnet sich beim Darüberfahren über die ruhende Linie */
.textlink > span{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) left 100% / 0% 1px no-repeat,linear-gradient(rgba(22,22,22,.3),rgba(22,22,22,.3)) left 100% / 100% 1px no-repeat;transition:background-size .5s var(--ease)}
.textlink:hover > span,.textlink:focus-visible > span{background-size:100% 1px,100% 1px}
.textlink .i{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.textlink:hover .i{transform:translateX(3px)}
.textlink .i-down{transform:rotate(90deg)}
.textlink:hover .i-down{transform:rotate(90deg) translateX(3px)}
.inline-link{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(22,22,22,.32)}
.inline-link:hover{text-decoration-color:currentColor}
.on-night .textlink,.on-night .inline-link{color:var(--night-text);text-decoration-color:rgba(237,234,228,.35)}
.on-night .textlink > span{background-image:linear-gradient(currentColor,currentColor),linear-gradient(rgba(237,234,228,.35),rgba(237,234,228,.35))}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  min-height:54px;padding:0 26px;border:0;border-radius:4px;
  background:var(--ink);color:var(--paper);
  font-weight:500;font-size:1rem;line-height:1.1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s,transform .2s;
}
/* Rückmeldung: Markenblau läuft von links in die Fläche */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn[disabled]::before{display:none}
.btn:active{transform:translateY(1px)}
.btn .i{width:1.1em;height:1.1em;transition:transform .3s var(--ease)}
.btn:hover .i{transform:translateX(3px)}
.btn--light{background:var(--night-text);color:var(--ink);transition:background-color .2s,color .3s .12s,transform .2s}
.btn--light:hover,.btn--light:focus-visible{color:#fff}
.btn--sm{min-height:42px;padding:0 18px;font-size:.9375rem}
.btn--block{width:100%}
.btn[disabled]{cursor:progress;opacity:.8}
.btn .spinner{display:none;width:1em;height:1em;border:2px solid rgba(246,244,239,.35);border-top-color:var(--paper);border-radius:50%;animation:spin .8s linear infinite}
.btn.is-loading .spinner{display:inline-block}
.btn.is-loading .i{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}

/* ---------- Kopfzeile ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.site-header.is-scrolled,.menu-open .site-header{border-bottom-color:var(--line)}
.header-bar{display:flex;align-items:center;gap:clamp(20px,3vw,44px);height:var(--header-h)}
/* Originales Logo (Zeichen und Wortmarke) mit den Werten der bisherigen Website */
.brand{display:inline-flex;align-items:center;gap:11px;margin-right:auto;flex:none;color:#0B1030;text-decoration:none;transform-origin:left center;transition:transform .45s var(--ease)}
.brand-mark{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#3D62F0,#1B39B8);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(37,73,219,.7)}
.brand-mark svg{width:21px;height:21px;fill:currentColor;display:block}
.brand-name{font-weight:750;font-size:1.16rem;letter-spacing:-.02em;line-height:1}
.brand-name b{color:#2549DB;font-weight:750}
.site-header.is-scrolled .brand{transform:scale(.9)}
@media (max-width:600px){
  .brand-mark{width:38px;height:38px;border-radius:12px}
  .brand-mark svg{width:19px;height:19px}
  .brand-name{font-size:1.08rem}
}
.nav-list{display:flex;gap:clamp(18px,2.2vw,34px)}
.nav-list a{position:relative;display:inline-block;padding:6px 0;color:var(--ink-2);text-decoration:none;font-size:.96875rem;font-weight:450;transition:color .2s}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-list a:hover{color:var(--ink)}
.nav-list a:hover::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]{color:var(--ink)}

.menu-toggle,.mobile-menu{display:none}
@media (max-width:1023px){
  .nav,.header-cta{display:none}
  .menu-toggle{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 4px 0 12px;margin-right:-4px;background:none;border:0;font-weight:500;font-size:.9375rem;cursor:pointer}
  .menu-toggle-icon{position:relative;width:20px;height:10px}
  .menu-toggle-icon i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
  .menu-toggle-icon i:first-child{top:1px}
  .menu-toggle-icon i:last-child{top:7.5px}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i{top:4.25px}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:first-child{transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:last-child{transform:rotate(-45deg)}
  .mobile-menu{
    position:fixed;left:0;right:0;bottom:0;top:var(--header-h);z-index:49;display:flex;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;padding:12px var(--gutter) calc(28px + env(safe-area-inset-bottom));background:var(--paper);
    opacity:0;transition:opacity .3s var(--ease);
  }
  .mobile-menu[hidden]{display:none}
  .mobile-menu.is-open{opacity:1}
  .mobile-menu li a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:1.875rem;font-weight:340;letter-spacing:-.03em;line-height:1.2}
  .mobile-menu li a[aria-current="page"]{font-weight:540}
  .mobile-menu-foot{margin-top:auto;padding-top:32px;display:grid;gap:16px}
  .mobile-menu-foot p{color:var(--ink-3);font-size:var(--fs-small)}
  html.menu-open{overflow:hidden}
  .no-js .header-bar{flex-wrap:wrap;height:auto;padding-block:16px 4px;row-gap:6px}
  .no-js .nav{display:block;width:100%;overflow-x:auto}
  .no-js .menu-toggle{display:none}
}

/* ---------- Abschnittsrhythmus ---------- */
.section{padding-block:var(--sec-pad)}
.section--stone{background-color:var(--stone)}
.section--flush{padding-top:0}
.cat-copy .lead{margin-top:24px}
.sec-intro{display:grid;gap:20px;max-width:760px;margin-bottom:clamp(48px,6vw,88px)}
.sec-intro .lead{max-width:52ch}

/* ---------- Startseite: Film „Ein Foto. Ein Tippen. Daraus wird ein Vorgang.“ ---------- */
/* Grundform (Telefon, Tablet, ohne Skript, reduzierte Bewegung): Titel, Text, Handlung, das Foto.
   Auf großen Bildschirmen wird daraus eine angehaltene Szene, die das Scrollen abspielt (siehe unten). */
.film{position:relative;z-index:1}
.film-grid{align-items:start;row-gap:0;padding-top:clamp(40px,min(7vw,9vh),112px);padding-bottom:clamp(64px,8vw,112px)}
.film-copy,.film-facts,.film-visual{grid-column:1 / -1}
.film-title{margin-top:clamp(16px,min(3vw,3.6vh),40px);font-size:min(var(--fs-display),10.6vh)}
/* Zeilen des Titels erscheinen aus einer Maske, jede mit eigenem Takt */
.film h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.film h1 .ln > span{display:inline-block}
.js .film h1 .ln > span{animation:line-up 1.05s var(--ease) both;animation-delay:calc(.12s + var(--d,0) * 140ms)}
@keyframes line-up{from{transform:translateY(110%)}to{transform:none}}
.film-say{display:grid;margin-top:clamp(20px,min(3vw,4vh),40px)}
.film-say > *{grid-area:1 / 1}
.film-lead{max-width:52ch}
.film .actions{margin-top:clamp(20px,min(3.4vw,4.4vh),44px)}
.film-steps,.film-bar,.film-device,.film-rec{display:none}
.film-visual{order:2}
.film-facts{order:3;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:40px;font-size:var(--fs-xs);color:var(--ink-3)}
.film-facts li{display:inline-flex;align-items:center;gap:10px}
.film-facts li + li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-3);margin-left:-12px}
@media (max-width:560px){.film-facts{flex-direction:column;gap:4px}.film-facts li + li::before{display:none}}
/* Das Foto im Sucher: vier Ecken wie im Kameramodus der App */
.film-photo{position:relative;width:min(100%,420px);margin-top:48px}
.film-photo-frame{position:relative;padding:10px}
.film-photo-frame::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(var(--ink),var(--ink)) left top / 22px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) left top / 1.5px 22px no-repeat,
  linear-gradient(var(--ink),var(--ink)) right top / 22px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) right top / 1.5px 22px no-repeat,
  linear-gradient(var(--ink),var(--ink)) left bottom / 22px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) left bottom / 1.5px 22px no-repeat,
  linear-gradient(var(--ink),var(--ink)) right bottom / 22px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) right bottom / 1.5px 22px no-repeat}
.film-photo-img{aspect-ratio:16 / 9.6;border-radius:4px;overflow:hidden;background:#9a9a96}
.film-photo-img img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.film-photo figcaption{margin-top:8px;padding-left:10px;font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (min-width:1024px){
  .film-copy{grid-column:1 / span 7}
  .film-visual{grid-column:9 / span 4;grid-row:1;order:0;align-self:end}
  .film-photo{margin-top:0;justify-self:end}
  .film-facts{grid-column:1 / span 7;order:0}
}

/* ---------- Bausteine der App-Karten ---------- */
.chip{position:relative;display:inline-grid;flex:none;font-size:.75rem;font-weight:600;line-height:1;border-radius:999px;white-space:nowrap}
.chip > span{grid-area:1 / 1;padding:6px 10px;border-radius:999px;transition:opacity .4s var(--ease)}
.chip-new{background:#EEF2FF;color:#1E3FB8}
.chip-work{background:#FFF4E5;color:#B45309}
.chip-done{background:#E3F4EA;color:#13703F;padding:6px 10px;border-radius:999px}
.msteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2px}
.msteps li{position:relative;padding-top:24px;font-size:.75rem;font-weight:560;color:#6B7280;line-height:1.2}
.msteps li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:2px solid #D1D5DB;background:#fff;transition:all .45s var(--ease)}
.msteps li::after{content:"";position:absolute;left:22px;right:6px;top:7px;height:2px;border-radius:2px;background:#E5E7EB;transition:background-color .45s var(--ease)}
.msteps li:last-child::after{display:none}
.msteps .done{color:#111827}
.msteps .done::before{border-color:#13703F;background:#13703F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z' fill='white'/%3E%3C/svg%3E") center / 10px no-repeat}
.msteps .done::after{background:#13703F}
.msteps .now{color:#1E3FB8}
.msteps .now::before{border-color:#2549DB;box-shadow:0 0 0 4px #E0E7FF}
.mcard-msg{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease),opacity .6s var(--ease)}
.mcard-msg > div{overflow:hidden}
.mcard-msg p{border-left:3px solid #2549DB;background:#EEF2FF;border-radius:0 10px 10px 0;padding:10px 12px;font-size:.8125rem;line-height:1.45;color:#374151}
.mcard-msg b{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.04em;color:#1E3FB8;margin-bottom:2px}

/* Endzustand ist der Normalfall: „In Bearbeitung“; „Eingegangen“ zeigt nur der Film vorher */
.chip-work{opacity:1}.chip-new{opacity:0}

/* ---------- Leitsatz (Steinfläche) ---------- */
.statement{background-color:var(--stone);padding-block:var(--sec-pad)}
.statement-text{grid-column:1 / span 8;font-size:var(--fs-statement);font-weight:300;line-height:1.16;letter-spacing:-.03em;text-wrap:balance}
.statement-text strong{font-weight:520}
/* Die drei Ärgernisse werden durchgestrichen: genau das leistet die Plattform */
.statement-text s{position:relative;text-decoration:none;white-space:nowrap}
.statement-text s::after{content:"";position:absolute;left:-.04em;right:-.04em;top:55%;height:max(2px,.065em);background:currentColor;transform-origin:left center;transition:transform .8s var(--ease)}
.statement-text s:nth-of-type(2)::after{transition-delay:.3s}
.statement-text s:nth-of-type(3)::after{transition-delay:.6s}
.js [data-strike]:not(.is-struck) .statement-text s::after{transform:scaleX(0)}
.statement-cols{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(48px,6vw,88px);padding-top:28px;border-top:1px solid rgba(22,22,22,.18)}
.statement-cols p{color:var(--ink-2)}
.statement-cols p:first-child{grid-column:1 / span 4;color:var(--ink);font-weight:500}
.statement-cols p:last-child{grid-column:6 / span 6}
@media (max-width:1023px){.statement-text{grid-column:1 / -1}}
@media (max-width:720px){
  .statement-cols p:first-child,.statement-cols p:last-child{grid-column:1 / -1}
  .statement-cols p + p{margin-top:12px}
}

/* ---------- So funktioniert's: der Ablauf als Szene ---------- */
/* Grundform (Telefon, Tablet, ohne Skript, reduzierte Bewegung): drei Schritte untereinander,
   jeder mit seinem Bildschirm, am Ende der fertige Vorgang. */
.demo-num{font-size:clamp(3rem,2.2rem + 2.4vw,4.5rem);font-weight:200;line-height:.9;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:lining-nums}
.flow{padding-block:var(--sec-pad)}
.flow-grid > *{grid-column:1 / -1}
.flow-steps{display:grid;gap:clamp(64px,9vw,112px)}
.flow-step{display:grid;gap:14px;align-content:start}
.flow-num{font-size:clamp(3rem,2.2rem + 2.4vw,4.5rem);font-weight:200;line-height:.9;letter-spacing:-.05em;font-variant-numeric:lining-nums}
.flow-num span{margin-left:.1em;font-size:.3em;font-weight:400;letter-spacing:0;color:var(--ink-3)}
.flow-title{--i:1;font-size:var(--fs-h3);font-weight:500;line-height:1.2;letter-spacing:-.012em}
.flow-text{--i:2;color:var(--ink-2);max-width:36ch;text-wrap:pretty}
.flow-shot{height:470px;overflow:hidden;margin-top:18px;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.flow-shot .phone{width:min(300px,100%);margin-inline:auto}
@media (min-width:700px){
  .flow-step{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto auto auto 1fr;column-gap:var(--gap);row-gap:14px}
  .flow-step > *{grid-column:1 / span 6}
  .flow-num{grid-row:2}.flow-title{grid-row:3}.flow-text{grid-row:4}
  .flow-shot{grid-column:8 / span 5;grid-row:1 / -1;margin-top:0}
  .flow-grid > .rec{grid-column:1 / span 6}
}

/* Vorgang: was in der Verwaltung ankommt (vereinfacht) */
.rec{margin-top:clamp(64px,9vw,112px);max-width:460px}
.rec-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:14px;font-weight:500}
.rec-cap span{font-size:var(--fs-xs);font-weight:400;color:var(--ink-3)}
.rec-sheet{background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 20px 8px;box-shadow:0 30px 60px -44px rgba(22,22,22,.35)}
.rec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 12px;font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.rec-head span:first-child{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.rec-row{display:grid;grid-template-columns:5.6em minmax(0,1fr);column-gap:12px;align-items:center;min-height:50px;padding:9px 10px;margin-inline:-10px;border-top:1px solid #EFEBE4;border-radius:4px}
.rec-row dt{grid-column:1;grid-row:1;font-size:var(--fs-xs);color:var(--ink-3)}
.rec-row dd{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;min-width:0;font-size:var(--fs-small);line-height:1.35;color:var(--ink)}
.rec-row dd img{width:30px;height:30px;flex:none;border-radius:5px;object-fit:cover;object-position:70% 50%}
.rec-row dd .i{width:1em;height:1em;color:#13703F}
.rec-row .chip{font-size:.75rem}

/* Telefon */
.phone{position:relative;width:300px;aspect-ratio:9 / 19.5;padding:10px;border-radius:52px;background:#101011;box-shadow:inset 0 0 0 1.5px #2b2b2e,0 60px 90px -50px rgba(22,22,22,.55),0 4px 14px rgba(22,22,22,.08)}
.phone-screen{position:relative;height:100%;overflow:hidden;border-radius:43px;background:#F7F8FA;container-type:inline-size}
.phone-island{position:absolute;z-index:5;top:9px;left:50%;width:30%;height:22px;border-radius:12px;background:#101011;transform:translateX(-50%)}
.app-screen{position:absolute;inset:0;display:flex;flex-direction:column}
/* Tippen sichtbar machen: ein kurzer Kreis an der Stelle, die berührt wird */
.app-tap{position:relative}
.app-tap::after{content:"";position:absolute;left:50%;top:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(37,73,219,.32);opacity:0;pointer-events:none}
@keyframes tap{from{transform:scale(.25);opacity:.9}to{transform:scale(2.8);opacity:0}}
.app-btn-a{display:none}

/* Schritt-Untertitel im Film */
.film-step-k{font-size:var(--fs-small);font-weight:560;margin-bottom:6px}
.film-step-k span{margin-right:.55em;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* =========================================================================
   Großer Bildschirm (ab 1024 × 560, mit Skript, ohne reduzierte Bewegung):
   Die Startseite wird zur Szenenfolge. Den Fortschritt liefert site.js
   (Variablen --pn, --fl, --rc, --s1–3, --cx; Klassen act0–act4, b1–b11).
   ========================================================================= */
@media (min-width:1024px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
  /* Film: steht still, solange er spielt; danach schiebt sich der Leitsatz wie ein Vorhang darüber */
  .js .film-track{height:calc(2 * (100svh - var(--header-h)) + 260vh)}
  .js .film-stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));overflow:clip}
  .js .film-grid{height:100%;padding-block:clamp(20px,4.5vh,56px);grid-template-rows:minmax(0,1fr);align-items:stretch}
  .js .film-copy{grid-column:1 / span 6;grid-row:1;align-self:center}
  .js .film-title{font-size:min(var(--fs-display),9.4vh,6.2vw)}
  .js .film-say{margin-top:clamp(14px,2.6vh,32px)}
  .js .film .actions{margin-top:clamp(14px,3vh,36px)}
  /* Eckdaten unten rechts im ersten Bild; sie weichen, sobald das Telefon kommt */
  .js .film-facts{grid-column:7 / span 6;grid-row:1;align-self:end;justify-self:end;flex-direction:column;align-items:flex-end;gap:3px;margin:0;text-align:right;opacity:calc(1 - var(--pn,0) * 1.6)}
  .js .film-facts li + li::before{display:none}
  .js .film-visual{grid-column:7 / span 6;grid-row:1;align-self:stretch;position:relative}
  .js .flow{display:none}

  /* Der Titel ist zugleich das Inhaltsverzeichnis: der laufende Akt steht in voller Tinte */
  .js .film h1 .ln > span{transition:opacity .6s var(--ease)}
  .js .film.act1 h1 .ln:not(:nth-child(1)) > span,.js .film.act2 h1 .ln:not(:nth-child(2)) > span,.js .film.act3 h1 .ln:not(:nth-child(3)) > span{opacity:.16}
  /* Unter dem Titel: zuerst der Lead, dann der jeweilige Schritt, am Ende wieder der Lead */
  .js .film-steps{display:grid}
  .js .film-steps li{grid-area:1 / 1;opacity:0;transform:translateY(16px)}
  .js .film-steps li > p:last-child{color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5;max-width:40ch}
  .js .film-lead,.js .film-steps li{transition:opacity .3s var(--ease),transform .5s var(--ease)}
  .js .film:is(.act1,.act2,.act3) .film-lead{opacity:0;transform:translateY(-16px)}
  .js .film.act1 .film-steps li:nth-child(1),.js .film.act2 .film-steps li:nth-child(2),.js .film.act3 .film-steps li:nth-child(3){opacity:1;transform:none;transition:opacity .5s var(--ease) .12s,transform .7s var(--ease) .12s}
  .js .film.act2 .film-steps li:nth-child(1),.js .film.act3 .film-steps li:nth-child(-n+2){transform:translateY(-16px)}
  .js .film-bar{display:flex;gap:6px;max-width:440px;margin-top:clamp(14px,3vh,32px)}
  .js .film-bar i{position:relative;flex:1;height:2px;background:var(--line);overflow:hidden}
  .js .film-bar i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--f,0));transform-origin:left center}

  /* Akt 1: das Foto im Sucher; das Telefon kommt von unten, das Bild fliegt in die App */
  .js .film-photo{position:absolute;left:0;right:0;top:4%;width:min(420px,86%);margin:0 auto;z-index:3}
  .js .film-photo-frame::before,.js .film-photo figcaption{opacity:calc(1 - var(--fl,0) * 3)}
  .js .film-photo-img{transform-origin:0 0;transform:translate(calc(var(--fx,0) * var(--fl,0) * 1px),calc(var(--fy,0) * var(--fl,0) * 1px)) scale(calc(1 + (var(--fs,1) - 1) * var(--fl,0)));opacity:calc(1 - max(0,var(--fl,0) - .82) * 6)}
  .js .film-device{display:flex;justify-content:center;align-items:flex-start;position:absolute;inset:0;z-index:2;overflow:hidden}
  .js .film-device .phone{width:min(clamp(260px,21vw,330px),calc((100svh - 230px) * .74));transform-origin:50% 0;transform:translateY(calc((1 - var(--pn,0)) * 100svh)) translateX(calc(var(--rc,0) * -24%)) scale(calc(1 - var(--rc,0) * .08))}
  .js .film-device .phone::after{content:"";position:absolute;inset:0;z-index:6;border-radius:52px;background:var(--paper);opacity:calc(var(--rc,0) * .42);pointer-events:none}
  /* Niedriges Fenster: das Telefon bleibt groß und lesbar und läuft unten weich aus */
  .js .film.is-cropped .film-device{-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
  .js .film-device .app-screen{opacity:0;transform:translateX(18%);transition:opacity .3s var(--ease),transform .6s var(--ease)}
  .js .film:not(.b4) .film-device [data-screen="fotos"],.js .film.b4 .film-device [data-screen="kategorie"]{opacity:1;transform:none;transition:opacity .45s var(--ease) .1s,transform .75s var(--ease)}
  .js .film.b4 .film-device [data-screen="fotos"]{transform:translateX(-18%)}
  .js .film-device .app-thumbs img{transition:opacity .35s var(--ease)}
  .js .film:not(.b2) .film-device .app-thumbs img{opacity:0}
  .js .film:not(.b2) .film-device .app-btn-a{display:inline}
  .js .film:not(.b2) .film-device .app-btn-b{display:none}
  .js .film:not(.b2) .film-device [data-screen="fotos"] .app-btn--main{background:#B9C4EC}
  .js .film.b1 .film-device .app-upload.app-tap::after{animation:tap .8s var(--ease) both}
  /* Akt 2: „Weiter“ antippen, Kategorie wählen */
  .js .film.b3 .film-device .app-btn--main.app-tap::after{animation:tap .8s var(--ease) both}
  .js .film-device .app-tile{transition:border-color .3s,box-shadow .3s,background-color .3s}
  .js .film-device .app-tile b{transition:background-color .3s,color .3s}
  .js .film:not(.b5) .film-device .app-tile.is-picked{border-color:#E5E7EB;box-shadow:none;background:#fff}
  .js .film:not(.b5) .film-device .app-tile.is-picked b{background:#F3F4F6;color:#374151}
  .js .film.b5 .film-device .app-tile.app-tap::after{animation:tap .8s var(--ease) both}

  /* Akt 3: das Telefon tritt zurück, der Vorgang legt sich davor und füllt sich Zeile für Zeile */
  .js .film-rec{display:block;position:absolute;right:0;top:50%;width:min(370px,64%);z-index:4;opacity:var(--rc,0);transform:translate(calc((1 - var(--rc,0)) * 64px),-50%)}
  .js .film-rec .rec{margin:0;max-width:none}
  /* Der Titel links sagt bereits „Daraus wird ein Vorgang“: über dem Blatt bleibt nur der Hinweis auf die Vereinfachung */
  .js .film-rec .rec-cap{justify-content:flex-end;margin-bottom:8px;font-size:0}
  .js .film-rec .rec-cap span{font-size:var(--fs-xs)}
  .js .film .rec-row{min-height:44px;padding-block:7px}
  .js .film .rec-row::after{content:"";grid-column:2;grid-row:1;align-self:center;width:min(7.5em,72%);height:.55em;border-radius:3px;background:#EEEAE2;opacity:0;transition:opacity .3s var(--ease)}
  .js .film .rec-row dd{clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease),opacity .3s var(--ease)}
  .js .film:not(.b6) .rec-foto dd,.js .film:not(.b7) .rec-kat dd,.js .film:not(.b8) .rec-ort dd,.js .film:not(.b9) .rec-amt dd,.js .film:not(.b9) .rec-status dd,.js .film:not(.b11) .rec-rueck dd{clip-path:inset(0 100% 0 0);opacity:0}
  .js .film:not(.b6) .rec-foto::after,.js .film:not(.b7) .rec-kat::after,.js .film:not(.b8) .rec-ort::after,.js .film:not(.b9) .rec-amt::after,.js .film:not(.b9) .rec-status::after,.js .film:not(.b11) .rec-rueck::after{opacity:1}
  .js .film.b6 .rec-foto,.js .film.b7 .rec-kat,.js .film.b8 .rec-ort,.js .film.b9 .rec-amt,.js .film.b9 .rec-status,.js .film.b11 .rec-rueck{animation:rec-in 1.6s var(--ease)}
  .js .film.b9 .rec-status dd{transition-delay:.25s}
  .js .film:not(.b10) .rec-status .chip-work{opacity:0}
  .js .film:not(.b10) .rec-status .chip-new{opacity:1}

  /* Leitsatz: schiebt sich über den Film; die Striche folgen dem Scrollen */
  .js .film + .statement{position:relative;z-index:3;margin-top:calc(-1 * (100svh - var(--header-h)));box-shadow:0 -36px 70px -50px rgba(22,22,22,.24)}
  .js .statement[data-scrub] .statement-text s::after{transform:scaleX(var(--k,0));transition:none}
  .js .statement[data-scrub] .statement-text s:nth-of-type(1){--k:var(--s1,0)}
  .js .statement[data-scrub] .statement-text s:nth-of-type(2){--k:var(--s2,0)}
  .js .statement[data-scrub] .statement-text s:nth-of-type(3){--k:var(--s3,0)}

  /* Kategorien: die Reihe läuft beim Scrollen von rechts nach links durch */
  .js .cats{padding-block:0}
  .js .cats-track{height:var(--cats-h,auto)}
  .js .cats-stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center;overflow:clip}
  .js .cats .cats-row{display:flex;overflow:visible;width:auto;margin:0;padding-inline:var(--cats-pad,0px);transform:translateX(calc(var(--cx,0) * -1px));will-change:transform}
  .js .cats .cats-item{padding:6px clamp(22px,3vw,44px) 10px;border-top:0;border-left:1px solid var(--line);opacity:var(--o,1)}
  .js .cats .cats-item:first-child{padding-left:0;border-left:0}
  .js .cats .cats-w{font-size:clamp(2.25rem,1rem + 4.4vw,5.5rem);white-space:nowrap}
}
@keyframes rec-in{from{background-color:#E6ECFF}to{background-color:rgba(230,236,255,0)}}

/* ---------- Kategorien ---------- */
.cats{padding-block:var(--sec-pad)}
.cats-head{display:grid;gap:20px;margin-bottom:clamp(36px,6vh,72px)}
.cats-head .lead{max-width:52ch}
.cats .cats-row{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.cats-row::-webkit-scrollbar{display:none}
.cats-item{flex:none;display:grid;align-content:start;gap:14px;padding:6px clamp(22px,3vw,44px) 10px;border-left:1px solid var(--line);scroll-snap-align:start}
.cats-item:first-child{padding-left:0;border-left:0}
.cats-n{font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.cats-i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--ink)}
.cats-i .i{width:22px;height:22px}
.cats-w{font-size:clamp(2.25rem,1rem + 4.4vw,5.5rem);font-weight:300;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.cats-more{align-content:end}
.cats-more .cats-w{color:var(--ink-3)}
/* Großer Bildschirm ohne Szenen (reduzierte Bewegung, ohne Skript): ein ruhiges Raster statt seitlichem Scrollen */
@media (min-width:1024px){
  .cats .cats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gap);overflow:visible;width:min(var(--maxw),100% - 2 * var(--gutter));margin-inline:auto;padding-inline:0}
  .cats .cats-item,.cats .cats-item:first-child{padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}
  .cats .cats-w{font-size:clamp(1.75rem,1rem + 1.4vw,2.75rem);white-space:normal}
}

/* App-Oberfläche (nachgebaut nach der echten App; skaliert mit der Gerätebreite) */
.app{font-size:4.25cqw;line-height:1.4;color:#111827}
.app-status{display:flex;justify-content:space-between;align-items:center;height:3.4em;padding:1.1em 1.9em 0;font-size:.92em;font-weight:600;font-variant-numeric:tabular-nums}
.app-status i{display:inline-block;width:1.55em;height:.75em;border:1.5px solid #111827;border-radius:3px;position:relative}
.app-status i::after{content:"";position:absolute;inset:1.5px;right:30%;background:#111827;border-radius:1px}
.app-bar{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.75em 1.15em;background:#fff;border-bottom:1px solid #EEF0F3}
.app-city{display:inline-flex;align-items:center;gap:.45em;padding:.42em .85em;border:1px solid #E5E7EB;border-radius:999px;font-size:.88em;font-weight:500;background:#fff}
.app-city::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#2F9E62}
.app-brand{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:1.02em;letter-spacing:-.01em}
.app-brand em{font-style:normal;color:#2549DB}
.app-logo{width:1.55em;height:1.55em;border-radius:.4em;background:#2549DB;color:#fff;display:grid;place-items:center}
.app-logo .i{width:.95em;height:.95em}
.app-body{flex:1;overflow:hidden;padding:1.25em 1.15em 0}
.app-h{font-size:1.45em;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.app-sub{color:#4B5563;font-size:.92em;margin-top:.25em}
.app-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.55em;margin-top:1.1em}
.app-tile{display:grid;justify-items:center;gap:.45em;padding:.85em .3em .8em;background:#fff;border:1px solid #E5E7EB;border-radius:.9em;font-size:.8em;font-weight:500;text-align:center;line-height:1.2}
.app-tile b{width:2.3em;height:2.3em;border-radius:.6em;background:#F3F4F6;display:grid;place-items:center;color:#374151}
.app-tile b .i{width:1.25em;height:1.25em}
.app-tile.is-picked{border-color:#2549DB;box-shadow:0 0 0 1.5px #2549DB;background:#F5F7FF}
.app-tile.is-picked b{background:#2549DB;color:#fff}
.app-upload{display:grid;justify-items:center;gap:.25em;padding:1.1em .8em;margin-top:.8em;border:1.5px dashed #D1D5DB;border-radius:1em;background:#fff;text-align:center}
.app-upload b{width:2.3em;height:2.3em;border-radius:.6em;background:#F3F4F6;display:grid;place-items:center;color:#374151;margin-bottom:.2em}
.app-upload b .i{width:1.25em;height:1.25em}
.app-upload strong{font-weight:650;font-size:.98em}
.app-upload small{font-size:.8em;color:#4B5563}
.app-thumbs{display:flex;gap:.5em;margin-top:.9em}
.app-thumbs img{width:4.6em;height:4.6em;border-radius:.6em;object-fit:cover;object-position:70% 50%}
.app-foot{display:grid;grid-template-columns:1fr 1.45fr;gap:.6em;padding:.9em 1.15em 1.5em;margin-top:auto;background:linear-gradient(to bottom,rgba(247,248,250,0),#F7F8FA 30%)}
.app-btn{display:flex;align-items:center;justify-content:center;gap:.35em;height:3.1em;border-radius:.75em;font-weight:650;font-size:.92em;white-space:nowrap}
.app-btn--ghost{background:#fff;border:1px solid #E5E7EB;color:#374151}
.app-btn--main{background:#2549DB;color:#fff}
.app-card{margin-top:1em;padding:1em;background:#fff;border:1px solid #E5E7EB;border-radius:1em}
.app-card-top{display:grid;grid-template-columns:3.6em 1fr auto;gap:.75em;align-items:start}
.app-card-top img{width:3.6em;height:3.6em;border-radius:.55em;object-fit:cover;object-position:70% 50%}
.app-card-title{font-weight:650;font-size:.98em;line-height:1.25}
.app-card-title span{display:block;font-weight:500;color:#4B5563}
.app-card-meta{font-size:.75em;color:#6B7280;margin-top:.2em;font-variant-numeric:tabular-nums}
.app-card .chip{font-size:.68em}
.app-card-desc{font-size:.84em;color:#374151;margin-top:.75em}
.app-card .msteps{margin-top:.85em}
.app-card .msteps li{font-size:.66em;padding-top:2.2em}
.app-card .msteps li::before{width:1.55em;height:1.55em}
.app-card .msteps li::after{left:2.05em;top:.7em}
.app-card .mcard-msg p{font-size:.78em;margin-top:.85em}
.app-card .mcard-msg b{font-size:.85em}
.app-more{display:flex;justify-content:space-between;align-items:center;margin-top:.8em;padding-top:.75em;border-top:1px solid #F0F1F4;font-size:.8em;font-weight:600;color:#2549DB}
.app-more .i{width:1.1em;height:1.1em}

/* ---------- Zwei Ansichten (geteilte Fläche) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.split-a,.split-b{padding-block:clamp(88px,10vw,160px)}
.split-a{padding-left:max(var(--gutter),calc(100% - var(--maxw) / 2));padding-right:clamp(32px,5vw,96px)}
.split-b{background:var(--night);color:var(--night-text);padding-right:max(var(--gutter),calc(100% - var(--maxw) / 2));padding-left:clamp(32px,5vw,96px)}
.split-inner{max-width:540px;display:grid;gap:24px;align-content:start}
.split-b .lead{color:var(--night-text-2)}
.arrives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;margin-top:20px;padding-top:28px;border-top:1px solid var(--line)}
.arrives dt{font-weight:560}
.arrives dd{color:var(--ink-2);font-size:var(--fs-small);margin-top:4px}
.private{border-top:1px solid var(--night-line);margin-top:8px}
.private li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--night-line);font-size:1.0625rem}
.private li span{font-size:var(--fs-xs);color:var(--night-text-2)}
.split-b .btn{justify-self:start;margin-top:16px}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split-a,.split-b{padding-inline:var(--gutter)}
  .split-inner{max-width:640px}
}
@media (max-width:520px){.arrives{grid-template-columns:1fr}}

/* ---------- Register (Gründe, Grundsätze) ---------- */
.index{border-top:1px solid var(--line-ink)}
.index-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:10px;padding:clamp(28px,3.2vw,44px) 0;border-bottom:1px solid var(--line)}
.index-row > *{min-width:0}
.index-key{grid-column:1 / span 2;font-size:var(--fs-small);color:var(--ink-3);padding-top:.45em}
.index-title{grid-column:3 / span 4;font-size:clamp(1.4rem,1.15rem + .8vw,1.875rem);font-weight:360;line-height:1.18;letter-spacing:-.025em}
.index-text{grid-column:8 / span 5;color:var(--ink-2);max-width:48ch}
.index-text .textlink{margin-top:14px}
.index--plain .index-title{grid-column:1 / span 6}
.index--plain .index-text{grid-column:8 / span 5}
@media (max-width:860px){
  .index-key,.index-title,.index-text,.index--plain .index-title,.index--plain .index-text{grid-column:1 / -1}
  .index-key{padding-top:0}
}

/* ---------- Häufige Fragen ---------- */
.faq-grid{row-gap:40px;align-items:start}
.faq-intro{grid-column:1 / span 4;display:grid;gap:18px;align-content:start}
.faq{grid-column:6 / span 7;border-top:1px solid var(--line-ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font-size:1.125rem;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;flex:none;width:18px;height:18px;margin-top:4px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s var(--ease)}
.faq-icon::after{transform:rotate(90deg)}
.faq details[open] .faq-icon::after{transform:rotate(0deg)}
.faq-body{padding:0 48px 26px 0;color:var(--ink-2);max-width:62ch}
@supports selector(::details-content){
  .faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}
@media (max-width:900px){
  .faq-intro,.faq{grid-column:1 / -1}
  .faq-body{padding-right:0}
}

/* ---------- Schluss ---------- */
.finale{background-color:var(--stone);padding-block:clamp(96px,12vw,184px)}
.finale-grid{align-items:end;row-gap:40px}
.finale-title{grid-column:1 / span 7;font-size:var(--fs-xl);font-weight:320;line-height:1.02;letter-spacing:-.038em}
.finale-side{grid-column:9 / span 4;display:grid;gap:24px}
.finale-facts{display:grid;border-top:1px solid rgba(22,22,22,.18)}
.finale-facts li{padding:12px 0;border-bottom:1px solid rgba(22,22,22,.18);font-size:var(--fs-small)}
@media (max-width:1023px){.finale-title,.finale-side{grid-column:1 / -1}.finale-side{max-width:560px}}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) 0 calc(28px + env(safe-area-inset-bottom));font-size:var(--fs-small);color:var(--ink-2)}
.foot-grid{row-gap:40px}
.foot-brand{grid-column:1 / span 5;display:grid;gap:16px;align-content:start}
.foot-brand .brand{margin:0;width:fit-content}
.foot-brand .brand-mark{width:38px;height:38px;border-radius:12px}
.foot-brand .brand-mark svg{width:19px;height:19px}
.foot-brand .brand-name{font-size:1.15rem}
.foot-brand p{max-width:40ch}
.foot-col{grid-column:span 2;display:grid;gap:12px;align-content:start}
.foot-col:last-child{grid-column:span 3}
.foot-h{font-size:var(--fs-small);font-weight:560;color:var(--ink);margin-bottom:2px;letter-spacing:0}
.foot-col ul{display:grid;gap:9px;list-style:none;margin:0;padding:0}
.foot-col a{text-decoration:none;color:var(--ink-2)}
.foot-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.22em}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid var(--line);color:var(--ink-3)}
.foot-bottom a{color:var(--ink-2);text-decoration:underline;text-underline-offset:.22em;text-decoration-color:rgba(22,22,22,.25)}
.foot-bottom a:hover{color:var(--ink);text-decoration-color:currentColor}
.foot-note{margin-top:14px;max-width:100ch;font-size:var(--fs-xs);line-height:1.55;color:var(--ink-3)}
@media (max-width:900px){.foot-brand{grid-column:1 / -1}.foot-col,.foot-col:last-child{grid-column:span 4}}
@media (max-width:560px){.foot-col{grid-column:span 6}.foot-col:last-child{grid-column:1 / -1}}

/* ---------- Unterseiten: Kopf ---------- */
.page-hero{padding-top:clamp(40px,min(7vw,9vh),112px);padding-bottom:clamp(64px,8vw,128px)}
.page-hero-grid{align-items:end;row-gap:56px}
/* Niedrige Fenster: Text oben ausrichten, damit die Handlung im ersten Bild bleibt */
@media (min-width:1024px) and (max-height:780px){.page-hero-grid{align-items:start}}
.page-hero-copy{grid-column:1 / span 7;display:grid;gap:clamp(22px,2.6vw,32px);justify-items:start}
.page-hero-copy > *{max-width:100%}
.page-hero-aside{grid-column:9 / span 4}
.page-hero--text .page-hero-copy{grid-column:1 / span 10}
.page-hero--text .lead{max-width:54ch}
@media (max-width:1023px){
  .page-hero-copy,.page-hero-aside,.page-hero--text .page-hero-copy{grid-column:1 / -1}
  .page-hero-aside{max-width:440px}
}

/* Für Bürger: Telefon, unten angeschnitten */
.page-hero--phone{padding-bottom:0;overflow:clip}
.page-hero--phone .page-hero-grid{align-items:start}
.page-hero--phone .page-hero-copy{padding-bottom:clamp(64px,8vw,128px)}
.phone-crop{grid-column:8 / span 5;justify-self:center;height:clamp(420px,46vw,600px);overflow:hidden}
.phone-crop .phone{width:clamp(280px,25vw,330px)}
@media (max-width:1023px){
  .page-hero--phone .page-hero-copy{padding-bottom:0}
  .phone-crop{grid-column:1 / -1;height:440px}
  .phone-crop .phone{width:300px}
}

/* Für Städte: was ankommt */
.arrival{display:grid;gap:16px}
.arrival-photo{border-radius:6px;overflow:hidden;aspect-ratio:16 / 9.6;background:#9a9a96}
.arrival-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.arrival dl{display:grid}
.arrival dl > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.arrival dt{color:var(--ink-3)}
.arrival dd{font-weight:500}
.arrival figcaption{font-size:var(--fs-xs);color:var(--ink-3)}

/* Kategorien als App-Ausschnitt (Für Bürger) */
.tiles-panel{grid-column:7 / span 6;justify-self:end;width:min(100%,520px);padding:clamp(16px,2vw,24px);background:#F7F8FA;border:1px solid #E5E3DE;border-radius:22px;box-shadow:0 40px 70px -48px rgba(22,22,22,.35);container-type:inline-size}
.tiles-panel .app{font-size:clamp(13px,3.1cqw,16px)}
.tiles-panel .app-tiles{margin-top:0}
.cat-copy{grid-column:1 / span 5;align-self:center}
@media (max-width:1023px){.cat-copy,.tiles-panel{grid-column:1 / -1}.tiles-panel{justify-self:start;margin-top:40px}}

/* Vorher / nachher */
.ledger{width:100%;border-collapse:collapse;table-layout:fixed}
.ledger th{padding:0 28px 18px 0;text-align:left;vertical-align:bottom;border-bottom:1px solid var(--line-ink);font-size:var(--fs-h3);font-weight:500;letter-spacing:-.012em}
.ledger th + th,.ledger td + td{padding-left:28px}
.ledger td{padding:22px 28px 22px 0;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.ledger td:first-child{color:var(--ink-3)}
.ledger td + td{color:var(--ink)}
.ledger .mark{display:flex;gap:14px;align-items:flex-start}
.ledger .mark .i{width:1.1em;height:1.1em;margin-top:.22em}
.ledger td + td .i{color:var(--accent)}
@media (max-width:720px){
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:100%}
  .ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ledger tr{padding:20px 0;border-bottom:1px solid var(--line)}
  .ledger tr:first-child{border-top:1px solid var(--line-ink)}
  .ledger td,.ledger td + td{padding:0;border:0}
  .ledger td + td{margin-top:12px}
  .ledger td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:var(--fs-xs);color:var(--ink-3)}
}

/* Etappen */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.stages li{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--line-ink)}
.stages .demo-num{font-size:clamp(2.4rem,1.9rem + 1.6vw,3.5rem)}
.stages p{color:var(--ink-2);font-size:var(--fs-small);max-width:30ch}
@media (max-width:960px){.stages{grid-template-columns:1fr 1fr;row-gap:44px}}
@media (max-width:560px){.stages{grid-template-columns:1fr}}

.pull{grid-column:3 / span 8;margin-top:clamp(56px,7vw,104px);font-size:clamp(1.4rem,1.05rem + 1.2vw,2.125rem);font-weight:320;line-height:1.3;letter-spacing:-.022em}
.pull strong{font-weight:540}
@media (max-width:860px){.pull{grid-column:1 / -1}}

/* Termin-Ablauf */
.agenda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);border-top:1px solid var(--line-ink)}
.agenda li{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:12px 16px;padding:28px 0;border-bottom:1px solid var(--line)}
.agenda .n{font-size:1.5rem;font-weight:240;line-height:1.1;letter-spacing:-.04em;color:var(--ink-3)}
.agenda p{color:var(--ink-2);margin-top:6px}
@media (max-width:760px){.agenda{grid-template-columns:1fr}}

/* Über uns */
.story{row-gap:48px;align-items:start}
.story-facts{grid-column:1 / span 4;border-top:1px solid var(--line-ink)}
.story-facts > div{display:grid;gap:3px;padding:14px 0;border-bottom:1px solid var(--line)}
.story-facts dt{font-size:var(--fs-xs);color:var(--ink-3)}
.story-facts dd{font-weight:500}
.story-text{grid-column:6 / span 7;display:grid;gap:1.15em;font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);max-width:62ch}
.story-text p:first-child{color:var(--ink);font-size:1.18em;line-height:1.42;font-weight:340;letter-spacing:-.015em}
@media (max-width:900px){.story-facts,.story-text{grid-column:1 / -1}}

/* ---------- Kontakt ---------- */
.contact{row-gap:56px;align-items:start}
.contact-aside{grid-column:1 / span 4;display:grid;gap:40px}
.contact-form{grid-column:6 / span 7}
@media (max-width:960px){.contact-aside,.contact-form{grid-column:1 / -1}.contact-aside{order:2}}
.procedure{border-top:1px solid var(--line-ink)}
.procedure li{display:grid;grid-template-columns:2em minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.procedure .n{font-size:1.25rem;font-weight:240;line-height:1.2;color:var(--ink-3)}
.procedure h3{font-size:1.0625rem;font-weight:560;letter-spacing:-.01em;margin-bottom:3px}
.procedure p{color:var(--ink-2);font-size:var(--fs-small)}
.direct{display:grid;gap:6px}
.direct a{font-size:1.25rem;font-weight:400;letter-spacing:-.015em;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:rgba(22,22,22,.3);width:fit-content}
.direct a:hover{text-decoration-color:currentColor}

.form-sheet{background:#fff;border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3.6vw,48px)}
.field{display:grid;gap:8px;margin-bottom:24px}
.field label{font-weight:500;font-size:.96875rem;line-height:1.35}
.field .opt{font-weight:400;color:var(--ink-3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.input{width:100%;min-height:54px;padding:14px 16px;background:#fff;color:var(--ink);border:1px solid #8F8B83;border-radius:4px;transition:border-color .2s,box-shadow .2s}
textarea.input{min-height:140px;resize:vertical;line-height:1.5}
.input::placeholder{color:#8B8780}
.input:hover{border-color:var(--ink-2)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 0 0 5px rgba(37,73,219,.16)}
.field-error{display:none;align-items:flex-start;gap:7px;color:#B3261E;font-size:.875rem;font-weight:500}
.field-error .i{width:16px;height:16px;margin-top:2px}
.field.has-error .field-error{display:flex}
.field.has-error .input{border-color:#B3261E;box-shadow:0 0 0 1px #B3261E}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin-top:18px;font-size:.875rem;color:var(--ink-3);line-height:1.5}
.error-summary{margin-bottom:28px;padding:18px 20px;border:2px solid #B3261E;border-radius:4px;background:#FBEAE8}
.error-summary:focus{outline:2px solid #B3261E;outline-offset:3px}
.error-summary h2{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.error-summary p{color:var(--ink-2);font-size:.9375rem}
.error-summary ul{margin-top:10px;padding:0;list-style:none;display:grid;gap:6px}
.error-summary a{color:#B3261E;font-weight:500;text-decoration:underline;text-underline-offset:.2em}

/* ---------- Bestätigung, 404 ---------- */
.notice{padding-top:clamp(64px,9vw,144px);padding-bottom:clamp(88px,11vw,176px)}
.notice-copy{max-width:760px;display:grid;gap:clamp(22px,2.6vw,32px);justify-items:start}
.notice-num{font-size:clamp(4rem,2.6rem + 5vw,8rem);font-weight:180;line-height:.9;letter-spacing:-.06em;color:var(--ink-3)}

/* ---------- Rechtstexte ---------- */
.legal{row-gap:40px;align-items:start}
.legal-aside{grid-column:1 / span 3;position:sticky;top:calc(var(--header-h) + 32px)}
.legal-body{grid-column:5 / span 8}
.toc-title{font-size:var(--fs-small);font-weight:560;margin-bottom:12px}
.toc{border-top:1px solid var(--line-ink)}
.toc li a{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:.9375rem;line-height:1.35}
.toc li a:hover{color:var(--ink)}
@media (max-width:900px){.legal-aside{position:static;grid-column:1 / -1}.legal-body{grid-column:1 / -1}}
.prose{max-width:68ch;color:var(--ink-2)}
.prose > * + *{margin-top:1.05em}
.prose h2{margin-top:2.4em;padding-top:20px;border-top:1px solid var(--line);font-size:clamp(1.3rem,1.15rem + .5vw,1.625rem);font-weight:400;letter-spacing:-.022em;color:var(--ink);scroll-margin-top:calc(var(--header-h) + 24px)}
.prose > h2:first-child{margin-top:0}
.prose h3{margin-top:1.9em;font-size:1.125rem;font-weight:560;letter-spacing:-.01em;color:var(--ink)}
.prose h2 + p,.prose h3 + p{margin-top:.6em}
.prose ul{padding-left:1.15em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--ink-3)}

/* ---------- Hinweis „Keine Cookies“ ---------- */
/* Bewusst kein Einwilligungsbanner: Die Website setzt keine Cookies und lädt nichts von Dritten (Datenschutzerklärung),
   also gibt es nichts zu bestätigen. Der Hinweis erscheint einmal beim Einstieg und macht das sichtbar. */
.pnote{position:fixed;z-index:60;right:clamp(12px,2.2vw,32px);bottom:clamp(12px,2.2vw,32px);width:min(410px,calc(100vw - 24px));padding:22px 24px 20px;overflow:hidden;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 40px 70px -36px rgba(22,22,22,.38),0 2px 8px rgba(22,22,22,.06)}
.pnote[hidden]{display:none}
.pnote-title{font-size:1.0625rem;font-weight:600;letter-spacing:-.012em}
.pnote-text{margin-top:6px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.pnote-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:16px}
.menu-open .pnote{display:none}
/* Auftritt: die Karte hebt sich vom Rand, der Text folgt Zeile für Zeile */
.pnote.is-in{animation:pnote-rise .8s var(--ease) both}
.pnote.is-in > *{animation:pnote-text .7s var(--ease) both}
.pnote.is-in .pnote-title{animation-delay:.16s}
.pnote.is-in .pnote-text{animation-delay:.24s}
.pnote.is-in .pnote-actions{animation-delay:.32s}
.pnote.is-out{animation:pnote-leave .4s var(--ease) both}
@keyframes pnote-rise{from{opacity:0;transform:translateY(32px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pnote-text{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pnote-leave{to{opacity:0;transform:translateY(20px) scale(.98)}}
@media (max-width:600px){.pnote{left:12px;right:12px;width:auto;padding:18px 18px 16px}}

/* ---------- Szenen beim Scrollen (nur wo der Browser es nativ kann) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Zwei Ansichten: die dunkle Fläche öffnet sich wie eine Tür */
    .split-b{animation:door linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
    /* Schluss: der Satz rückt beim Hereinscrollen zusammen */
    .finale-title{animation:settle-in linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
  }
}
@keyframes settle-in{from{opacity:.15;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes door{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:900px){@keyframes door{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}}

/* Einzelne Auftritte auf Unterseiten */
.js .arrival-photo{animation:clip-up 1.25s var(--ease) .25s both}
.js .arrival-photo img{animation:settle 1.8s var(--ease) .25s both}
@keyframes clip-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.14)}to{transform:none}}
.js .phone-crop .phone{animation:rise 1.3s var(--ease) .3s both}
@keyframes rise{from{transform:translateY(72px)}to{transform:none}}

/* ---------- Bewegung ---------- */
.js [data-enter]{opacity:0;transform:translateY(12px);animation:enter .9s var(--ease) forwards;animation-delay:calc(.06s + var(--d,0) * 90ms)}
@keyframes enter{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-enter]{opacity:1;transform:none}
}

/* ---------- Druck ---------- */
@media print{
  .site-header,.mobile-menu,.skip-link,.film-device,.film-rec,.pnote{display:none!important}
  body{background:#fff}
}