/* BeckSoft – Webseite (2026-11) · Systemschrift, keine externen Quellen */
:root{
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --tinte:#1d1d1f;--grau:#6e6e73;--grau2:#86868b;--hell:#f5f5f7;--linie:#d2d2d7;--weiss:#fff;--link:#0066cc;--knopf:#0071e3;
  --g:#14463C;--g2:#1F6B5A;--g-hell:#EAF4F1;--gelb:#F2B33D;
  --s:#17607d;--s2:#0f4557;--beere:#b03a5b;--s-hell:#EAF3F6;
  --max:1024px;--weit:1240px;--r:28px;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{margin:0;background:#fff;color:var(--tinte);font:400 17px/1.47 var(--sys);letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block;height:auto}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:3px solid rgba(0,113,227,.6);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;color:inherit}
p{margin:0 0 1em}
.w{width:min(100% - 44px,var(--max));margin-inline:auto}.ww{width:min(100% - 44px,var(--weit));margin-inline:auto}
.mitte{text-align:center}.mitte p{margin-inline:auto}
.leise{color:var(--grau)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;z-index:99}.skip:focus{left:8px}

/* Globale Navigation */
.gnav{position:sticky;top:0;z-index:40;background:rgba(250,250,252,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.gnav .ww{display:flex;align-items:center;height:48px;gap:6px}
.gnav .logo{display:flex;align-items:center;gap:8px;color:var(--tinte);font-weight:700;font-size:17px;letter-spacing:-.02em;margin-right:auto}
.gnav .logo:hover{text-decoration:none}
.gnav .logo svg{width:24px;height:24px}
.gnav .links{display:flex;gap:2px}
.gnav .links a{color:#333336;font-size:12.5px;padding:8px 10px;border-radius:8px;letter-spacing:-.01em}
.gnav .links a:hover{color:#000;text-decoration:none;background:rgba(0,0,0,.04)}
.gnav .links a[aria-current="page"]{color:#000;font-weight:600}
.gnav details{display:none;position:relative}
.gnav summary{list-style:none;cursor:pointer;padding:10px;border-radius:8px;font-size:15px}
.gnav summary::-webkit-details-marker{display:none}
.gnav .klapp{position:absolute;right:0;top:44px;background:rgba(250,250,252,.98);backdrop-filter:blur(20px);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.15);padding:12px;min-width:240px;display:flex;flex-direction:column}
.gnav .klapp a{color:var(--tinte);font-size:19px;font-weight:600;padding:10px 12px}
@media (max-width:900px){.gnav .links{display:none}.gnav details{display:block}}

/* Produkt-Leiste */
.pnav{position:sticky;top:48px;z-index:35;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.pnav .ww{display:flex;align-items:center;height:52px;gap:18px}
.pnav .name{font-size:21px;font-weight:700;color:var(--tinte);margin-right:auto;letter-spacing:-.025em}
.pnav .name:hover{text-decoration:none}
.pnav a.l{color:var(--tinte);font-size:12.5px;opacity:.85}
.pnav .pille{padding:5px 12px;font-size:12.5px}
@media (max-width:700px){.pnav a.l{display:none}}

/* Knöpfe */
.pille{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border-radius:980px;background:var(--knopf);color:#fff;font-size:17px;font-weight:500;letter-spacing:-.02em;border:1px solid var(--knopf);transition:background .2s,transform .1s}
.pille:hover{background:#0077ed;text-decoration:none}
.pille:active{transform:scale(.97)}
.pille.hohl{background:transparent;color:var(--knopf)}
.pille.hohl:hover{background:var(--knopf);color:#fff}
.pille.hell{background:#fff;color:var(--tinte);border-color:#fff}
.mehr{font-size:19px;letter-spacing:-.02em}.mehr::after{content:" ›"}
.knoepfe{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center;margin-top:26px}
.mitte .knoepfe{justify-content:center}

/* Held */
.held{padding:84px 0 40px;text-align:center;overflow:hidden}
.held .marke{font-size:clamp(19px,2.2vw,24px);font-weight:600;margin-bottom:10px;letter-spacing:-.02em}
.held h1{font-size:clamp(46px,7.6vw,96px);line-height:1.03;letter-spacing:-.045em}
.held .unter{font-size:clamp(19px,2.3vw,28px);line-height:1.25;color:var(--tinte);max-width:30em;margin:18px auto 0;letter-spacing:-.025em;font-weight:500}
.held .bild{margin:46px auto 0;max-width:min(1100px,100%)}
.held.dunkel{background:#000;color:#f5f5f7}.held.dunkel .unter{color:#d2d2d7}

/* Abschnitte */
.ab{padding:110px 0}
.ab.grau{background:var(--hell)}
.ab.schwarz{background:#000;color:#f5f5f7}.ab.schwarz .leise{color:#a1a1a6}
.ab h2{font-size:clamp(36px,5.2vw,64px);line-height:1.06}
.ab .lead{font-size:clamp(19px,2vw,24px);line-height:1.38;letter-spacing:-.022em;max-width:36em;margin-top:18px;color:var(--grau);font-weight:500}
.ab.schwarz .lead{color:#a1a1a6}
.kopf{margin-bottom:56px}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kachel{background:var(--hell);border-radius:var(--r);padding:52px 40px 0;text-align:center;overflow:hidden;display:flex;flex-direction:column;color:var(--tinte);min-height:580px}
.kachel:hover{text-decoration:none}
.kachel h3{font-size:clamp(32px,3.6vw,48px);line-height:1.08}
.kachel p{font-size:19px;color:var(--grau);margin:10px auto 0;max-width:24em;letter-spacing:-.02em}
.kachel .knoepfe{justify-content:center;margin-top:18px;font-size:17px}
.kachel .knoepfe span{color:var(--link)}
.kachel img{margin:auto auto 0;padding-top:32px;max-height:380px;width:auto;object-fit:contain}
.kachel.voll{grid-column:1/-1;min-height:640px}
.kachel.voll img{max-height:440px}
.kachel.gastro{background:linear-gradient(180deg,#0E3029 0%,#14463C 100%);color:#fff}.kachel.gastro p{color:#cfe3dc}.kachel.gastro .knoepfe span{color:#F2B33D}
.kachel.studio{background:linear-gradient(180deg,#F6ECE9 0%,#EAF3F6 100%)}
.kachel.dunkel{background:#000;color:#f5f5f7}.kachel.dunkel p{color:#a1a1a6}
@media (max-width:820px){.kacheln{grid-template-columns:1fr}.kachel{min-height:0;padding:44px 22px 0}}

/* Problem-Karten */
.probleme{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.problem{background:#fff;border-radius:22px;padding:30px 28px}
.ab.grau .problem{background:#fff}.ab:not(.grau) .problem{background:var(--hell)}
.problem .zitat{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.025em}
.problem p{color:var(--grau);margin:12px 0 0;font-size:16px}
@media (max-width:900px){.probleme{grid-template-columns:1fr}}

/* Geschichte */
.geschichte{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:start}
.geschichte .gross{font-size:clamp(28px,3.4vw,44px);line-height:1.15;font-weight:700;letter-spacing:-.035em}
.geschichte .text p{font-size:19px;line-height:1.55;color:#3a3a3c;letter-spacing:-.015em}
.geschichte blockquote{margin:30px 0 0;padding:0;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.025em}
.geschichte cite{display:block;font-style:normal;font-size:15px;color:var(--grau);margin-top:10px;font-weight:500}
@media (max-width:860px){.geschichte{grid-template-columns:1fr;gap:28px}}

/* Grundsätze */
.saetze{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 36px}
.satz h3{font-size:21px;line-height:1.25;letter-spacing:-.022em;margin-bottom:8px}
.satz p{color:var(--grau);font-size:17px;margin:0}
.ab.schwarz .satz p{color:#a1a1a6}
@media (max-width:860px){.saetze{grid-template-columns:1fr;gap:28px}}

/* Ablauf (echte Reihenfolge) */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:a}
.ablauf li{background:var(--hell);border-radius:22px;padding:28px 24px;counter-increment:a}
.ablauf li::before{content:counter(a);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tinte);color:#fff;font-weight:700;font-size:15px;margin-bottom:16px}
.ablauf h3{font-size:19px;margin-bottom:6px;letter-spacing:-.02em}.ablauf p{color:var(--grau);font-size:16px;margin:0}
@media (max-width:900px){.ablauf{grid-template-columns:1fr 1fr}}@media (max-width:560px){.ablauf{grid-template-columns:1fr}}

/* Module */
.module{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.modul{background:var(--hell);border-radius:24px;overflow:hidden;color:var(--tinte);display:flex;flex-direction:column}
.modul:hover{text-decoration:none}
.modul .vorschau{aspect-ratio:16/10;background:#e8e8ed;overflow:hidden}
.modul .vorschau img{width:100%;height:100%;object-fit:contain;padding:16px 18px;transition:transform .6s cubic-bezier(.32,.72,0,1)}
.modul:hover .vorschau img{transform:scale(1.03)}
.modul .inhalt{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.modul h3{font-size:22px;letter-spacing:-.025em}
.modul p{color:var(--grau);font-size:15.5px;margin:6px 0 14px;flex:1}
.modul .zeile{display:flex;gap:18px;font-size:15px}.modul .zeile span{color:var(--link)}
@media (max-width:980px){.module{grid-template-columns:1fr 1fr}}@media (max-width:600px){.module{grid-template-columns:1fr}}

/* Film */
.film{background:#000;color:#f5f5f7;padding:70px 0 90px}
.film .rahmen{border-radius:22px;overflow:hidden;background:#111;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.film video{width:100%;aspect-ratio:16/9}
.film .unter{color:#a1a1a6;text-align:center;margin-top:18px;font-size:15px}
.film .knoepfe{justify-content:center}

/* Funktionsliste */
.liste{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;list-style:none;margin:0;padding:0}
.liste li{padding:18px 0 18px 40px;border-top:1px solid var(--linie);position:relative;font-size:18px;letter-spacing:-.02em}
.liste li::before{content:"";position:absolute;left:4px;top:24px;width:20px;height:20px;border-radius:50%;background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px}
.studio-seite .liste li::before{background-color:var(--s)}.dienst-seite .liste li::before{background-color:var(--tinte)}
@media (max-width:760px){.liste{grid-template-columns:1fr}}

/* Problem-Satz auf Modulseiten */
.aussage{font-size:clamp(26px,3.4vw,40px);line-height:1.2;font-weight:700;letter-spacing:-.035em;max-width:24em}
.aussage .grau{color:var(--grau2)}

/* Weiter-Navigation */
.weiter{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.weiter a{background:var(--hell);border-radius:22px;padding:26px 28px;color:var(--tinte)}
.weiter a:hover{text-decoration:none;background:#ececf0}
.weiter small{display:block;color:var(--grau);font-size:14px;margin-bottom:4px}
.weiter b{font-size:22px;letter-spacing:-.025em}
.weiter .r{text-align:right}
@media (max-width:620px){.weiter{grid-template-columns:1fr}.weiter .r{text-align:left}}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{border-top:1px solid var(--linie);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-size:19px;font-weight:600;letter-spacing:-.02em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:28px;font-weight:300;color:var(--grau);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--grau);font-size:17px;margin:0 0 18px;max-width:40em}

/* Preis-Hinweis, Kontakt */
.preis{display:inline-block;margin-top:18px;font-size:15px;color:var(--grau)}
.kontakt{background:var(--hell);border-radius:var(--r);padding:64px 40px;text-align:center}
.kontakt h2{font-size:clamp(34px,4.6vw,56px)}
.kontakt p{font-size:19px;color:var(--grau);max-width:32em;margin:16px auto 0}

/* Präsentation */
.folien .bild{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.folien .bild img{width:100%;height:100%;object-fit:contain}
.folien .leiste{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:20px}
.folien button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer}
.folien button:hover{background:rgba(255,255,255,.24)}
.folien button:disabled{opacity:.3;cursor:default}
.folien .zahl{color:#a1a1a6;font-size:15px;min-width:9ch;text-align:center;font-variant-numeric:tabular-nums}

/* Fuß */
.fuss{background:var(--hell);color:var(--grau);font-size:12.5px;padding:34px 0 30px;letter-spacing:-.005em}
.fuss .spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:22px;border-bottom:1px solid var(--linie)}
.fuss b{display:block;color:var(--tinte);font-weight:600;margin-bottom:8px}
.fuss a{display:block;color:#424245;padding:3px 0}
.fuss .unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:16px}
.fuss .unten a{display:inline;margin-left:16px}
@media (max-width:760px){.fuss .spalten{grid-template-columns:1fr 1fr}}

/* Rechtstexte */
.recht{padding:70px 0 90px}.recht h1{font-size:clamp(40px,5vw,56px);margin-bottom:28px}
.recht h2{font-size:21px;margin:28px 0 8px;letter-spacing:-.02em}
.platzhalter{background:#FFF3C4;border-radius:4px;padding:0 4px}

/* Einblenden beim Scrollen – nur wenn Bewegung erlaubt ist */
@media (prefers-reduced-motion:no-preference){
  .js .zeig{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.32,.72,0,1),transform .9s cubic-bezier(.32,.72,0,1)}
  .js .zeig.da{opacity:1;transform:none}
}
@media (prefers-reduced-transparency:reduce){.gnav,.pnav{background:#fff;backdrop-filter:none}}

/* ===== Erweiterung 2026-11: Knöpfe, Navigation, Karten, Preise, Formular ===== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pille{min-height:48px;justify-content:center;cursor:pointer;font-family:inherit;line-height:1.2;text-align:center}
.pnav .pille{min-height:34px}
.pille:hover{text-decoration:none}
.ab.schwarz .pille.hohl,.film .pille.hohl,.kachel.dunkel .pille.hohl,.kachel.gastro .pille.hohl,.produkt.gastro .pille.hohl{color:#fff;border-color:rgba(255,255,255,.55)}
.ab.schwarz .pille.hohl:hover,.film .pille.hohl:hover,.kachel.dunkel .pille.hohl:hover,.kachel.gastro .pille.hohl:hover,.produkt.gastro .pille.hohl:hover{background:#fff;color:var(--tinte);border-color:#fff}
.pille.hell:hover{background:#e8e8ed;color:var(--tinte)}
.studio-seite .pille:not(.hohl):not(.hell){background:var(--s);border-color:var(--s)}.studio-seite .pille:not(.hohl):not(.hell):hover{background:var(--s2)}
.studio-seite main .pille.hohl{color:var(--s);border-color:var(--s)}.studio-seite main .pille.hohl:hover{background:var(--s);color:#fff}
.studio-seite .ab.schwarz .pille.hohl{color:#fff;border-color:rgba(255,255,255,.55)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 18px;border-radius:980px;background:var(--knopf);color:#fff;font-size:15px;font-weight:600;letter-spacing:-.01em;border:1px solid var(--knopf);transition:background .2s,color .2s;white-space:nowrap}
.knopf:hover{background:#0077ed;text-decoration:none}
.knopf.hohl{background:transparent;color:var(--knopf)}.knopf.hohl:hover{background:var(--knopf);color:#fff}
.knopf.hell{background:#fff;color:var(--tinte);border-color:#fff}.knopf.hell:hover{background:#e8e8ed}
.studio-seite .knopf{background:var(--s);border-color:var(--s)}.studio-seite .knopf.hohl{background:transparent;color:var(--s)}.studio-seite .knopf.hohl:hover{background:var(--s);color:#fff}
.knoepfe{gap:12px 14px}
.held .knoepfe,.kontakt .knoepfe{justify-content:center}
.kachel .knoepfe span.pille{color:var(--knopf);padding:9px 18px;min-height:44px;font-size:15px;font-weight:600}
.kachel.dunkel .knoepfe span.pille,.kachel.gastro .knoepfe span.pille{color:#fff}
.modul .zeile{gap:10px;flex-wrap:wrap}
.modul .zeile .knopf{flex:1 1 0;min-width:120px}
.modul h3 a,.modul h4 a,.produkt h3 a{color:inherit}
.modul h4{font-size:21px;letter-spacing:-.025em;line-height:1.2}
.modul .vorschau.ohne{display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#0E3029,#1F6B5A);color:#fff;text-align:center}
.modul .vorschau.ohne span{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.15;max-width:12em}
.studio-seite .modul .vorschau.ohne{background:linear-gradient(135deg,#0f4557,#17607d)}
.gruppe{font-size:24px;letter-spacing:-.025em;margin:44px 0 16px}.kopf+.gruppe{margin-top:0}
.ab.grau .modul{background:#fff}

/* Navigation: Leistungen-Menü, Anfrage-Knopf */
.gnav .links{align-items:center}
.gnav .links a{font-size:13.5px;padding:8px 11px}
.gnav .dd{position:relative}
.gnav .ddm{display:none;position:absolute;left:0;top:100%;min-width:220px;background:rgba(250,250,252,.98);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.15);padding:8px;flex-direction:column}
.gnav .dd:hover .ddm,.gnav .dd:focus-within .ddm{display:flex}
.gnav .ddm a{padding:10px 12px;font-size:14.5px}
.gnav .links a.nav-cta{background:var(--knopf);color:#fff;font-weight:600;padding:7px 14px;border-radius:980px;margin-left:6px}
.gnav .links a.nav-cta:hover{background:#0077ed;color:#fff}
.gnav summary{min-width:44px;min-height:44px;display:grid;place-items:center;font-size:20px}
.gnav .klapp a{font-size:18px;padding:11px 12px;border-radius:10px}
.gnav .klapp a.unter{font-size:16px;font-weight:500;padding:8px 12px 8px 28px;color:#424245}
.gnav .klapp a[aria-current="page"]{background:rgba(0,0,0,.05)}
@media (max-width:700px){.pnav .name{font-size:19px}}

/* Produkt- und Auswahlkarten */
.produkte{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.produkt{border-radius:var(--r);padding:40px 36px 36px;background:#fff;display:flex;flex-direction:column;align-items:flex-start}
.produkt h3{font-size:clamp(32px,3.6vw,46px);line-height:1.08;margin-top:14px}
.produkt p{font-size:19px;margin:10px 0 0;color:var(--grau);letter-spacing:-.02em}
.produkt ul{margin:18px 0 0;padding:0;list-style:none;flex:1}
.produkt li{padding:9px 0 9px 28px;position:relative;font-size:17px;border-top:1px solid rgba(0,0,0,.08)}
.produkt li::before{content:"✓";position:absolute;left:2px;font-weight:700;color:var(--s)}
.produkt .ab-preis{font-weight:600;color:var(--tinte);font-size:17px;margin-top:18px}
.produkt .knoepfe{margin-top:18px}
.produkt.gastro{background:linear-gradient(180deg,#0E3029 0%,#14463C 100%);color:#fff}
.produkt.gastro p{color:#cfe3dc}.produkt.gastro .ab-preis{color:#fff}.produkt.gastro li{border-color:rgba(255,255,255,.14)}.produkt.gastro li::before{color:var(--gelb)}
.produkt.studio .pille:not(.hohl){background:var(--s);border-color:var(--s)}.produkt.studio .pille.hohl{color:var(--s);border-color:var(--s)}.produkt.studio .pille.hohl:hover{background:var(--s);color:#fff}
.schild{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:5px 11px;border-radius:980px;background:rgba(0,0,0,.06);color:#424245}
.produkt.gastro .schild{background:rgba(255,255,255,.14);color:#fff}
.wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.karte{background:var(--hell);border-radius:22px;padding:30px 28px;color:var(--tinte);display:flex;flex-direction:column;align-items:flex-start}
.ab.grau .karte{background:#fff}
a.karte:hover{text-decoration:none;background:#ececf0}.ab.grau a.karte:hover{background:#fafafc;box-shadow:0 12px 30px -18px rgba(0,0,0,.3)}
.karte h3{font-size:23px;line-height:1.2;letter-spacing:-.025em;margin-top:2px}
.karte .schild+h3{margin-top:14px}
.karte p{color:var(--grau);font-size:16.5px;margin:10px 0 0;flex:1}
.karte .knopf{margin-top:18px}
@media (max-width:900px){.produkte,.wahl{grid-template-columns:1fr}.produkt{padding:32px 22px 28px}}

/* Filme nebeneinander (Startseite) */
.filme{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.filme figure{margin:0}
.filme video{width:100%;height:auto;aspect-ratio:16/9;background:#111}
.filme figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px}
.filme figcaption b{font-size:19px;letter-spacing:-.02em}.filme figcaption span{color:#a1a1a6;font-size:15px;flex:1 1 200px}
@media (max-width:820px){.filme{grid-template-columns:1fr}}

/* Preise */
.pakete{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.paket{background:var(--hell);border-radius:24px;padding:30px 28px;display:flex;flex-direction:column;align-items:flex-start;border:2px solid transparent}
.ab.grau .paket{background:#fff}
.paket.top{border-color:var(--knopf)}
.paket h4{font-size:26px;letter-spacing:-.03em}.paket .schild+h4{margin-top:12px}
.paket .leise{margin:6px 0 0;font-size:16px}
.paket .betrag{margin:18px 0 0}.paket .betrag b{font-size:40px;letter-spacing:-.04em;line-height:1}.paket .betrag span{color:var(--grau);font-size:15px}
.paket .einmal{margin:6px 0 0;font-size:15px;color:var(--grau)}
.paket ul{list-style:none;margin:18px 0 22px;padding:0;flex:1;align-self:stretch}
.paket li{padding:8px 0 8px 26px;border-top:1px solid var(--linie);position:relative;font-size:16px}
.paket li::before{content:"✓";position:absolute;left:2px;color:var(--g2);font-weight:700}
.paket .pille{align-self:stretch}
.preistab{background:var(--hell);border-radius:24px;padding:8px 24px}
.ab.grau .preistab{background:#fff}
.preistab table{width:100%;border-collapse:collapse;font-size:17px}
.preistab th,.preistab td{text-align:left;padding:16px 10px;border-top:1px solid var(--linie);vertical-align:middle}
.preistab thead th{border-top:0;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--grau);font-weight:600}
.preistab tbody th{font-weight:600}.preistab tbody th small{display:block;font-weight:400;color:var(--grau);font-size:14.5px;margin-top:3px;letter-spacing:-.01em}
.preistab td{white-space:nowrap}.preistab td:last-child{text-align:right}
.fussnote{color:var(--grau);font-size:14.5px;margin:18px 0 0;max-width:60em}
@media (max-width:760px){
  .preistab{padding:4px 18px}.preistab thead{display:none}
  .preistab table,.preistab tbody,.preistab tr,.preistab th,.preistab td{display:block;white-space:normal}
  .preistab tr{padding:16px 0;border-top:1px solid var(--linie)}.preistab tr:first-child{border-top:0}
  .preistab th,.preistab td{border:0;padding:3px 0}
  .preistab td[data-l]{display:flex;justify-content:space-between;gap:12px}.preistab td[data-l]::before{content:attr(data-l);color:var(--grau);font-size:15px}
  .preistab td:last-child{text-align:left;padding-top:10px}
}

/* Formular */
.formular{display:grid;gap:22px}
.formular fieldset{border:0;margin:0;padding:0;min-width:0}
.formular legend,.formular .feld>label:not(.haken){display:block;font-weight:600;font-size:16px;margin-bottom:7px;padding:0;letter-spacing:-.015em}
.formular .opt{font-weight:400;color:var(--grau);font-size:14px}.formular .pfl{color:#b3261e}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular input[type=number],.formular select,.formular textarea{width:100%;font:inherit;font-size:17px;color:var(--tinte);background:#fff;border:1px solid #86868b;border-radius:12px;padding:12px 14px;min-height:48px;letter-spacing:-.01em}
.formular textarea{resize:vertical;min-height:130px}
.formular input:focus-visible,.formular select:focus-visible,.formular textarea:focus-visible{outline:3px solid rgba(0,113,227,.45);outline-offset:1px;border-color:var(--knopf)}
.formular [aria-invalid="true"]{border-color:#b3261e;background:#fff8f7}
.formular small{display:block;color:var(--grau);font-size:14px;margin-top:5px}
.formular .fehler{color:#b3261e;font-size:14.5px;font-weight:600;margin:6px 0 0}
.fehlerliste{background:#fff1f0;border:1px solid #f1b5b0;border-radius:14px;padding:16px 18px;color:#8c1d18;font-size:16px}
.fehlerliste ul{margin:8px 0 0;padding-left:20px}.fehlerliste a{color:#8c1d18;text-decoration:underline}
.raster{display:grid;grid-template-columns:1fr 1fr;gap:18px}.raster.drei{grid-template-columns:repeat(3,1fr);align-items:start}
.hakenliste{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.haken{display:flex;gap:10px;align-items:flex-start;font-size:16px;font-weight:400;padding:9px 0;cursor:pointer;min-height:44px}
.haken input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--knopf)}
.tabs{display:flex;flex-wrap:wrap;gap:8px}.tabs legend{width:100%}
.tabs .haken{padding:0;position:relative}
.tabs .haken input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tabs .haken span{display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;border-radius:980px;border:1px solid #86868b;font-weight:600;font-size:16px}
.tabs .haken input:checked+span{background:var(--tinte);border-color:var(--tinte);color:#fff}
.tabs .haken input:focus-visible+span{outline:3px solid rgba(0,113,227,.6);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}
@media (max-width:700px){.raster,.raster.drei,.hakenliste{grid-template-columns:1fr}}

/* Kleinigkeiten */
.kontakt .preis a{font-weight:600}
.held h1{overflow-wrap:break-word;hyphens:auto}
@media (max-width:600px){.ab{padding:72px 0}.held{padding-top:56px}.kontakt{padding:44px 20px}.knoepfe .pille{flex:1 1 auto}.held h1{font-size:clamp(34px,10.5vw,46px)}.ab h2{font-size:clamp(30px,8.6vw,36px)}}