/* ==========================================================================
   Funck IT — Demoseiten, gemeinsame Basis
   --------------------------------------------------------------------------
   Einzige Quelle für Layout und Komponenten aller Demo-Onepager.
   Branchenfarben kommen aus der jeweiligen theme.css (nach dieser Datei).

   Drei Schalter, gesteuert über Attribute am <html>-Element:
     data-theme="light|dark"    Hell / Dunkel
     data-modern="off|on"       Moderne Ansicht (Glas, Verläufe, Blobs)
     --fs                       Schriftskalierung (1 / 1.12 / 1.25)

   Nicht je Demo bearbeiten — Änderungen hier, dann sync.ps1 ausführen.
   ========================================================================== */

@import url('./fonts.css');

/* --------------------------------------------------------------------------
   1. Design-Tokens — hell (Standard)
   -------------------------------------------------------------------------- */
:root{
  --fs:1;

  --bg:#f9fafb;
  --bg-image:none;
  --card:#ffffff;
  --card-blur:none;
  --muted:#6b7280;
  --text:#1f2937;
  --line:#e5e7eb;
  --footer-bg:#f1f5f9;
  --header-bg:rgba(255,255,255,.9);
  --input-bg:#ffffff;

  --brand:#f97316;
  --brand-2:#fdba74;
  --accent:#ea580c;
  --brand-soft:rgba(249,115,22,.12);
  --cta-text:#111827;
  --danger:#dc2626;

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --container:1200px;
  --ease:.3s cubic-bezier(.4,0,.2,1);

  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   2. Dunkel
   -------------------------------------------------------------------------- */
html[data-theme="dark"]{
  --bg:#0f1420;
  --card:#1a2030;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --line:rgba(255,255,255,.12);
  --footer-bg:#0c111c;
  --header-bg:rgba(15,20,32,.9);
  --input-bg:#141a28;
  --cta-text:#0b1020;
  --danger:#f87171;
  --shadow:0 8px 28px rgba(0,0,0,.4);
}

/* --------------------------------------------------------------------------
   3. Moderne Ansicht — Glas, Verläufe, größere Radien
   Orientiert an der Bewerbungsakademie-Seite.
   -------------------------------------------------------------------------- */
/* Wichtig: Modern ändert NUR Flächen, Radien und Unschärfe — nicht die
   Markenfarbe. Die kommt aus theme.css und bleibt je Branche erhalten.
   (Farben hier zu überschreiben würde ohnehin scheitern: theme.css wird
   später geladen und gewinnt bei gleicher Spezifität.) */
html[data-modern="on"]{
  --radius:22px;
  --radius-sm:12px;
  --card-blur:blur(24px) saturate(160%);
  --cta-text:#ffffff;
}
html[data-modern="on"][data-theme="light"]{
  --bg:#eef2ff;
  --bg-image:radial-gradient(900px 600px at 12% -8%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 60%),
             radial-gradient(800px 520px at 92% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
  --card:rgba(255,255,255,.62);
  --line:rgba(15,23,42,.10);
  --header-bg:rgba(255,255,255,.55);
  --footer-bg:rgba(255,255,255,.45);
  --input-bg:rgba(255,255,255,.75);
  --shadow:0 12px 40px rgba(30,41,59,.12);
}
html[data-modern="on"][data-theme="dark"]{
  --bg:#06091a;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --header-bg:rgba(6,9,26,.72);
  --footer-bg:rgba(255,255,255,.03);
  --input-bg:rgba(255,255,255,.06);
  --text:#e2e8f0;
  --muted:#94a3b8;
  --shadow:0 8px 32px rgba(0,0,0,.45);
}

/* Glasflächen */
[data-modern="on"] .card,
[data-modern="on"] .panel,
[data-modern="on"] .form,
[data-modern="on"] header.site,
[data-modern="on"] footer.site{
  backdrop-filter:var(--card-blur);
  -webkit-backdrop-filter:var(--card-blur);
}
[data-modern="on"] .card:hover,
[data-modern="on"] .panel:hover{
  transform:translateY(-5px);
  border-color:var(--brand);
  border-color:color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
[data-modern="on"] .card,
[data-modern="on"] .panel{transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease)}
[data-modern="on"] .cta{box-shadow:0 4px 24px color-mix(in srgb, var(--brand) 35%, transparent)}
[data-modern="on"] .cta:hover{box-shadow:0 10px 36px color-mix(in srgb, var(--brand) 50%, transparent)}
[data-modern="on"] .hero-ill{border-radius:28px}

/* Treibende Farbwolken im Hintergrund (vom Skript eingefügt) */
.bg-blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none}
[data-modern="on"] .bg-blobs{display:block}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;animation:blob-drift 22s ease-in-out infinite}
.blob-1{width:700px;height:700px;top:-250px;left:-250px;background:radial-gradient(circle,var(--accent) 0%,transparent 65%)}
.blob-2{width:550px;height:550px;top:35%;right:-180px;background:radial-gradient(circle,var(--brand) 0%,transparent 65%);animation-delay:-8s;animation-duration:28s}
.blob-3{width:450px;height:450px;bottom:-120px;left:25%;background:radial-gradient(circle,var(--brand-2) 0%,transparent 65%);animation-delay:-15s;animation-duration:20s}
@keyframes blob-drift{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(50px,-70px) scale(1.06)}
  50%{transform:translate(-35px,45px) scale(.94)}
  75%{transform:translate(25px,25px) scale(1.03)}
}
/* Inhalt über die Farbwolken heben.
   header.site fehlt hier bewusst: er ist sticky, und position:relative
   wuerde das aushebeln — er bekommt nur den z-index. Diese Regel ist
   spezifischer als eine spaetere in theme.css, deshalb muss die Korrektur
   HIER stehen und nicht dort. */
[data-modern="on"] main,
[data-modern="on"] footer.site{position:relative;z-index:1}
[data-modern="on"] header.site{z-index:60}

/* --------------------------------------------------------------------------
   4. Reset & Grundlagen
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:calc(100% * var(--fs))}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  background-image:var(--bg-image);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--ease),color var(--ease);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;width:auto;height:auto;background:var(--brand-soft);padding:10px;border-radius:8px;outline:2px solid var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hint{font-size:.82rem;color:var(--muted)}
.lead{color:var(--muted);max-width:800px}

/* --------------------------------------------------------------------------
   5. Kopfbereich & Navigation
   -------------------------------------------------------------------------- */
header.site{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  background:var(--header-bg);
  border-bottom:1px solid var(--line);
  transition:background var(--ease),border-color var(--ease);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand-badge{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:900;box-shadow:var(--shadow);flex:0 0 auto;font-size:.8rem;
}
.brand-name{font-weight:800;line-height:1.25}
.brand-claim{font-size:.75rem;color:var(--muted)}

nav.main ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav.main a{color:var(--text);opacity:.9}

.menu-btn{
  display:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:8px 12px;color:var(--text);
  font-family:inherit;font-size:.95rem;cursor:pointer;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.cta{
  display:inline-block;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:var(--cta-text);padding:10px 18px;border-radius:999px;
  font-weight:700;font-family:inherit;font-size:.95rem;
  border:none;box-shadow:var(--shadow);cursor:pointer;
  transition:background var(--ease),transform var(--ease),box-shadow var(--ease);
}
.cta:hover{background:linear-gradient(135deg,var(--accent),var(--brand));text-decoration:none;transform:translateY(-2px)}
.cta-alt{background:linear-gradient(135deg,var(--accent),var(--brand));color:#fff}
.cta-alt:hover{background:linear-gradient(135deg,var(--brand),var(--accent))}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{padding:80px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(1.75rem,5vw,2.75rem);line-height:1.15;margin:0 0 14px}
.hero .sub{color:var(--muted);font-size:clamp(.95rem,2.2vw,1.12rem);margin:0 0 24px}
.hero-ill{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:.9rem}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* --------------------------------------------------------------------------
   8. Abschnitte, Raster, Karten
   -------------------------------------------------------------------------- */
section{padding:60px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
h2{font-size:clamp(1.35rem,4vw,2rem);margin:0}

.grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.card{
  grid-column:span 6;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
}
.card--third{grid-column:span 4}
.card h3{margin:0 0 8px;font-size:1.25rem}
.card p{margin:0 0 12px;color:var(--muted)}
.card p:last-child{margin-bottom:0}
.icon{
  width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;
  margin-bottom:12px;font-size:1.25rem;
  background:var(--brand-soft);border:1px solid var(--brand);
}

/* --------------------------------------------------------------------------
   8b. Akademie-Aufbau: Banner-Hero, Abschnitts-Label, Preistabelle
   Für Demos, die dem Aufbau der Bewerbungsakademie folgen.
   -------------------------------------------------------------------------- */
/* Der Banner-Hero füllt die Sichtfläche abzüglich der Kopfzeile.
   --header-h misst site.js beim Laden und bei Größenänderung; der Wert im
   Fallback entspricht der Kopfzeile bei normaler Schriftgröße.
   svh statt vh: auf dem Handy zählt damit die Höhe MIT eingeblendeter
   Browserleiste — sonst wird der untere Bildrand beim ersten Scrollen
   angeschnitten. min-height (nicht height): wächst der Text, wächst der Hero. */
.hero-banner{
  position:relative;display:grid;align-items:center;overflow:hidden;
  min-height:calc(100vh - var(--header-h, 72px));
  min-height:calc(100svh - var(--header-h, 72px));
}
/* Im Querformat auf flachen Displays würde der Text sonst gequetscht */
@media (max-height:520px){
  .hero-banner{min-height:420px}
}
.hero-banner>picture,.hero-banner>picture img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--hero-pos,center);
}
/* Hochkant wird seitlich stark beschnitten – Demo waehlt den Bildausschnitt */
@media (max-width:700px){
  .hero-banner>picture img{object-position:var(--hero-pos-narrow,var(--hero-pos,center))}
}
.hero-banner .banner-fill{position:absolute;inset:0;background:linear-gradient(135deg,var(--brand),var(--accent))}
.hero-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,8,20,.88) 0%,rgba(5,8,20,.66) 45%,rgba(5,8,20,.15) 100%);
}
.hero-overlay{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:56px 20px;width:100%}
.hero-overlay .eyebrow{color:#e2e8f0;opacity:.85;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.hero-overlay h1{color:#fff;font-size:clamp(1.9rem,5.2vw,3.1rem);line-height:1.12;margin:0 0 16px;max-width:15ch}
.hero-overlay .hero-sub{color:#cbd5e1;font-size:clamp(1rem,2.2vw,1.18rem);max-width:52ch;margin:0 0 26px}
@media (max-width:700px){ .hero-overlay h1{max-width:none} .hero-banner::after{background:rgba(5,8,20,.74)} }

.section-label{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;
}
.section-center{text-align:center;display:block}
.section-center h2{margin-bottom:10px}
.section-center .lead{margin:0 auto}

/* Hinweisband: eine Information, die über allem steht (Notdienst, Ferien,
   Baustelle). Sitzt direkt unter der Kopfzeile, volle Breite. */
.notice{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:var(--cta-text);
}
.notice .inner{
  max-width:var(--container);margin:0 auto;padding:16px 20px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
}
.notice .badge{
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.22);padding:5px 12px;border-radius:999px;white-space:nowrap;
}
.notice p{margin:0;font-weight:600}
.notice a{color:inherit;text-decoration:underline;font-weight:700}

/* Objektliste (Immobilien, Fahrzeuge, Angebote) mit Filterleiste */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.filterbar button{
  padding:9px 18px;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:.9rem;font-weight:600;
  border:1px solid var(--line);background:var(--card);color:var(--text);
  transition:border-color var(--ease),background var(--ease),color var(--ease);
}
.filterbar button:hover{border-color:var(--brand)}
.filterbar button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:var(--cta-text);border-color:transparent;
}

.listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.listing{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--ease),box-shadow var(--ease);
}
.listing:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.16)}
.listing[hidden]{display:none}
.listing .media{position:relative;aspect-ratio:3/2;overflow:hidden;background:linear-gradient(135deg,var(--brand),var(--accent))}
.listing .media img{width:100%;height:100%;object-fit:cover}
.listing .media .ph{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:2.4rem;opacity:.55;
}
.listing .tag{
  position:absolute;top:12px;left:12px;
  background:var(--card);color:var(--text);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.listing .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.listing h3{margin:0 0 4px;font-size:1.1rem}
.listing .place{color:var(--muted);font-size:.88rem;margin:0 0 14px}
.listing .price{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;margin:0 0 14px}
.listing .meta{
  display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px;padding-top:14px;
  border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;
}
.listing .meta b{display:block;color:var(--text);font-size:1rem;font-weight:700}
.listing .cta{margin-top:auto;text-align:center}
.listings-empty{text-align:center;color:var(--muted);padding:30px 0}

/* Team: Portrait über Name und Funktion */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.team .member{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;box-shadow:var(--shadow);text-align:center;
}
.team .member img{
  width:132px;height:132px;border-radius:50%;object-fit:cover;
  margin:0 auto 16px;border:3px solid var(--brand);
}
.team .member h3{margin:0 0 4px;font-size:1.15rem}
.team .member .role{color:var(--brand);font-weight:600;font-size:.85rem;margin:0 0 10px}
.team .member p{color:var(--muted);font-size:.92rem;margin:0}

/* Sprechzeiten & ähnliche Tabellen */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
table.hours{width:100%;border-collapse:collapse;min-width:420px}
table.hours th,table.hours td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
table.hours thead th{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:800;
}
table.hours tbody tr:last-child td{border-bottom:none}
table.hours tbody th{font-weight:600}
table.hours td.closed{color:var(--muted)}
table.hours td.num,table.hours th.num{text-align:right;font-variant-numeric:tabular-nums}
table.hours tbody tr.own{background:var(--brand-soft)}
table.hours tbody tr.own th,table.hours tbody tr.own td{font-weight:700}
table.hours .slot{display:block;font-size:.8rem;color:var(--muted);font-weight:400}

/* Bildergalerie: gleichmäßiges Raster, Bildunterschrift beim Überfahren */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gallery figure{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:4/3;
}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery figure:hover img,.gallery figure:focus-within img{transform:scale(1.06)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;
  color:#fff;font-size:.85rem;font-weight:600;
  background:linear-gradient(transparent,rgba(5,8,20,.82));
}
.gallery .wide{grid-column:span 2}
@media (max-width:560px){ .gallery .wide{grid-column:span 1} }

/* Kennzahlen-Leiste: drei bis vier Zahlen mit Unterzeile */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;box-shadow:var(--shadow);text-align:center;
}
.stat .num{
  font-size:clamp(1.9rem,4.5vw,2.6rem);font-weight:900;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat .cap{display:block;margin-top:10px;color:var(--muted);font-size:.9rem}

.price-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px}
.price-card{
  flex:0 0 calc(33.333% - 15px);min-width:280px;
  display:flex;flex-direction:column;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;box-shadow:var(--shadow);
}
.price-card.featured{border-color:var(--brand);background:var(--brand-soft)}
.price-featured-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;
  padding:5px 16px;border-radius:100px;white-space:nowrap;
}
.price-name{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.price-value{font-size:2.6rem;font-weight:900;color:var(--text);letter-spacing:-.04em;line-height:1;margin-bottom:4px}
.price-value span{font-size:1.1rem;font-weight:500;vertical-align:super}
.price-period{font-size:.85rem;color:var(--muted);margin-bottom:22px}
.price-features{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 26px;padding:0}
.price-features li{position:relative;padding-left:26px;color:var(--muted);font-size:.92rem}
.price-features li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:var(--brand);font-weight:900;
}
.price-card .cta{margin-top:auto;text-align:center}
@media (max-width:900px){ .price-card{flex:0 0 100%} }

/* --------------------------------------------------------------------------
   9. Kontaktformular
   -------------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-weight:600;margin:8px 0 6px}
input,select,textarea{
  width:100%;padding:12px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--input-bg);color:var(--text);
  font-family:inherit;font-size:.95rem;
}
textarea{min-height:120px;resize:vertical}

/* Eingabefelder mit Symbol (Vorbild LMS).
   Der Wrapper ist die Bezugsflaeche fuer beide Overlays; das Symbol nimmt
   keine Klicks an, sonst laesst sich das Feld an seiner linken Kante nicht
   fokussieren. */
.kp-feld-symbolisch{position:relative;display:block}
.kp-feld-symbol{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;display:flex;align-items:center;
}
.kp-feld-eingerueckt{padding-left:38px}
.kp-feld-mit-auge{padding-right:40px}

.kp-feld-auge{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:4px;cursor:pointer;color:var(--muted);
  display:flex;align-items:center;line-height:1;border-radius:6px;
  transition:color .15s;
}
.kp-feld-auge:hover{color:var(--text)}
.kp-feld-auge:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* Chromes und Edges eigene Passwort-Symbole doppeln unser Auge. */
.kp-feld-mit-auge::-ms-reveal,
.kp-feld-mit-auge::-ms-clear{display:none}

/* Aufgeklappte Auswahllisten zeichnet das Betriebssystem, nicht die Seite —
   im Dunkelmodus bleiben sie sonst weiss auf weiss. Dieselbe Loesung wie im
   LMS: die Optionen bekommen ihre Farben ausdruecklich mit.
   color-scheme sorgt zusaetzlich dafuer, dass Browser die eigenen
   Bedienelemente (Pfeil, Bildlaufleiste) passend einfaerben. */
select option{background:var(--card);color:var(--text)}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] select option{background:#1a2030;color:#e2e8f0}
html[data-modern="on"][data-theme="dark"] select option{background:#141b2b}
/* Die vier Interessen bei der Anmeldung zweispaltig (09.09.2026): rechts ist
   Platz, das Formular soll dadurch nicht laenger werden. Eigene Klasse, damit
   die einspaltigen .check-row der Einwilligungen unberuehrt bleiben. */
.interessen-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.interessen-raster .check-row{margin-top:10px}
@media (max-width:520px){.interessen-raster{grid-template-columns:1fr}}

.check-row{display:flex;align-items:flex-start;gap:10px;margin-top:12px}
.check-row input{width:auto;margin-top:4px;flex:0 0 auto}
.check-row label{margin:0;font-weight:400}
.field-error{color:var(--danger);font-size:.9rem;display:none;margin-top:6px}
.field-error.is-visible{display:block}
.form-success{
  display:none;margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--brand-soft);border:1px solid var(--brand);font-weight:600;
}
.form-success.is-visible{display:block}

/* --------------------------------------------------------------------------
   10. Fußbereich
   -------------------------------------------------------------------------- */
footer.site{margin-top:40px;padding:28px 0 60px;color:var(--muted);border-top:1px solid var(--line);background:var(--footer-bg)}
.foot{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}
.foot h4{margin:0 0 8px;color:var(--text)}
.foot p{margin:0 0 8px}
.legal{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.demo-note{
  margin-top:20px;padding:12px 14px;border:1px dashed var(--line);
  border-radius:var(--radius-sm);font-size:.8rem;background:var(--card);
}

/* --------------------------------------------------------------------------
   10b. Zurück nach oben
   Echtes Seitenelement (kein Vorschau-Werkzeug) — bleibt auf der späteren
   Kundenseite erhalten. Wird von site.js eingefügt und ein-/ausgeblendet.
   -------------------------------------------------------------------------- */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:800;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:var(--cta-text);border:none;cursor:pointer;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--ease),transform var(--ease),visibility var(--ease),box-shadow var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Auf schmalen Displays liegt die Demo-Leiste unten — Knopf darüber setzen */
@media (max-width:700px){
  .to-top{right:16px;bottom:76px;width:44px;height:44px}
}
@media print{ .to-top{display:none} }
/* Mit zugelassenem reCAPTCHA v3 sitzt Googles Abzeichen unten rechts (bottom 14px, 60px hoch) —
   der Knopf rückt darüber (17.10.2026, Klasse setzt assets/js/spamschutz.js). */
.mit-recaptcha .to-top{bottom:100px}
/* Googles Abzeichen bringt keinen z-index mit — der Fuß ([data-modern] footer.site, z-index 1)
   lag darüber und verdeckte es (User 17.10.2026). */
.grecaptcha-badge{z-index:850 !important}
@media (max-width:700px){
  .mit-recaptcha .to-top{bottom:100px}
}

/* Spamschutz-Zeile in Anmelden/Registrieren (spamschutzFeld in index.php) */
.spamschutz{margin:14px 0 4px;padding:10px 12px;border:1px dashed var(--line);
  border-radius:10px;font-size:.85rem;line-height:1.5;color:var(--muted)}
.spamschutz p{margin:0;display:inline}
.spamschutz[hidden],.spamschutz p[hidden]{display:none}
.spamschutz a{margin-left:4px}
.spamschutz .linkknopf{background:none;border:0;padding:0;font:inherit;color:var(--brand);cursor:pointer;text-decoration:none}
.spamschutz .linkknopf:hover,.spamschutz .linkknopf:focus-visible{color:var(--brand-2)}

/* Cookie-Dialog und Keks (assets/js/einwilligung.js, 17.10.2026) — Aufbau wie funck.gmbh,
   Farben aus den Portal-Variablen, damit hell/dunkel und bytebones von selbst passen.
   Karte unten links; der Keks bleibt danach unten links, Nach-oben und reCAPTCHA rechts. */
.einwilligung{position:fixed;z-index:900;left:20px;bottom:20px;width:min(430px,calc(100vw - 40px));
  /* --card ist im modernen Design halbtransparent — über --bg gelegt, damit nichts durchscheint */
  padding:22px 22px 16px;border-radius:20px;background:linear-gradient(var(--card),var(--card)),var(--bg);color:var(--text);
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.35);transform-origin:50% 50%}
.einwilligung[hidden]{display:none}
.einwilligung-kopf{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.einwilligung-kopf svg{width:30px;height:30px;flex:none}
.einwilligung-kopf h2{flex:1;margin:0;font-size:1.1rem;font-weight:800}
.einwilligung-zu{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:0;
  background:var(--brand-soft);color:var(--text);cursor:pointer}
.einwilligung-zu:hover,.einwilligung-zu:focus-visible{background:var(--brand);color:var(--cta-text);outline:none}
.einwilligung-zu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.einwilligung>p{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted)}
.einwilligung-wahl{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.einwilligung-wahl[hidden]{display:none}
.einwilligung-schalter{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);cursor:pointer}
.einwilligung-schalter span{display:flex;flex-direction:column;gap:2px}
.einwilligung-schalter b{font-size:.92rem;font-weight:700}
.einwilligung-schalter small{font-size:.8rem;color:var(--muted)}
.einwilligung-schalter input{position:absolute;opacity:0;width:1px;height:1px}
.einwilligung-schalter i{position:relative;flex:none;width:44px;height:24px;border-radius:999px;background:var(--line);transition:background-color .25s}
.einwilligung-schalter i::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.einwilligung-schalter input:checked+i{background:var(--brand)}
.einwilligung-schalter input:checked+i::after{transform:translateX(20px)}
.einwilligung-schalter input:disabled+i{opacity:.55}
.einwilligung-schalter input:focus-visible+i{box-shadow:0 0 0 3px var(--brand-soft)}
.einwilligung-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.einwilligung-knoepfe .cta{padding:10px 18px;font-size:.92rem}
.einwilligung-knoepfe [hidden]{display:none}
.einwilligung-mehr{margin-left:auto;padding:8px 4px;border:0;background:none;color:var(--muted);font:inherit;font-size:.9rem;font-weight:650;cursor:pointer}
.einwilligung-mehr:hover,.einwilligung-mehr:focus-visible{color:var(--brand);outline:none}
.einwilligung-links{display:flex;gap:16px;margin:14px 0 0 !important;padding-top:12px;border-top:1px solid var(--line);font-size:.8rem}
.einwilligung-links a{color:var(--muted);text-decoration:none}
.einwilligung-links a:hover{color:var(--brand)}
.keks{position:fixed;z-index:850;left:20px;bottom:20px;width:52px;height:52px;display:grid;place-items:center;padding:0;
  border-radius:50%;cursor:pointer;border:1px solid var(--line);background:linear-gradient(var(--card),var(--card)),var(--bg);box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s}
.keks[hidden]{display:none}
.keks svg{width:28px;height:28px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.keks:hover,.keks:focus-visible{transform:translateY(-2px);border-color:var(--brand);outline:none}
.keks:hover svg{transform:rotate(-25deg)}
.keks.ploppt{animation:keks-plopp .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes keks-plopp{0%{transform:scale(.2)}100%{transform:scale(1)}}
.keks-teig{fill:#d9a35a;stroke:#f2c27c;stroke-width:.8}
.keks-stueck{fill:#5a3a1e}
@media (max-width:700px){
  .keks{left:12px;bottom:12px;width:44px;height:44px}
  .keks svg{width:24px;height:24px}
}
@media (max-width:560px){
  .einwilligung{left:10px;right:10px;bottom:10px;width:auto;padding:18px 16px 12px}
  .einwilligung-knoepfe .cta{flex:1}
}
@media print{.einwilligung,.keks{display:none}}

/* --------------------------------------------------------------------------
   11. Rechtstexte
   -------------------------------------------------------------------------- */
.page{max-width:820px;margin:0 auto;padding:40px 20px 60px;position:relative;z-index:1}
.page h1{font-size:clamp(1.5rem,4vw,2.1rem);margin:0 0 20px}
.page h2{font-size:clamp(1.1rem,3vw,1.35rem);margin:28px 0 10px}
.page p,.page li{color:var(--muted)}
.page a.back{display:inline-block;margin-top:28px}

/* --------------------------------------------------------------------------
   12. Umbrüche
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .hero-grid,.contact,.foot{grid-template-columns:1fr}
  .card--third{grid-column:span 6}
}
@media (max-width:860px){
  .hero{padding-top:64px}
  .menu-btn{display:block}
  nav.main{order:3;flex-basis:100%}
  nav.main ul{display:none;flex-direction:column;gap:0;padding:8px 0 0}
  nav.main ul li{border-top:1px solid var(--line)}
  nav.main ul li a{display:block;padding:12px 2px}
  nav.main ul.is-open{display:flex}
  .nav{flex-wrap:wrap}
  .card,.card--third{grid-column:span 12}
}
@media (max-width:560px){
  .row{grid-template-columns:1fr}
  section{padding:44px 0}
}

/* Gleicher Stand wie demoseiten/shared/base.css Abschnitt 13 — bei Änderungen
   beide Dateien nachziehen. Portal-eigene Ergänzungen (Demo-Kacheln,
   Leistungen) stehen in theme.css. */
/* ==========================================================================
   13. Lebendige Ansicht (14.10.2026)
   --------------------------------------------------------------------------
   Wunsch des Users: die Musterseiten sollen so viel Leben bekommen wie
   funck.gmbh — leuchtende Knöpfe, Lichtkante an Karten, Einblenden beim
   Scrollen. Gilt in BEIDEN Ansichten (klassisch und modern).

   Regeln, damit es flüssig bleibt (Milchglas auf den Kacheln hat am
   12.10. das Scrollen zäh gemacht):
     - bewegt wird nur mit transform und opacity, Schein über box-shadow
     - keine neuen backdrop-filter
     - Maus-Effekte nur auf Geräten mit echtem Hover (@media (hover:hover))
     - prefers-reduced-motion: alles steht still, nichts ist versteckt
   Farben kommen aus --brand / --brand-2 / --accent der jeweiligen theme.css.
   ========================================================================== */

/* ---- 13a. Knöpfe: Lichtstreif + Schein in der Markenfarbe ----------------
   Vorbild .knopf-glut auf funck.gmbh. isolation + z-index -1 legt den
   Streif über den Verlauf, aber unter die Schrift. */
.cta{position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--ease),transform var(--ease),box-shadow var(--ease)}
.cta::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.55) 50%,transparent 82%);
  transform:translateX(-130%);
  transition:transform .75s cubic-bezier(.3,.7,.3,1);
}
.cta:hover::after,.cta:focus-visible::after{transform:translateX(130%)}
.cta:hover,.cta:focus-visible{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 40%,transparent),
             0 10px 34px color-mix(in srgb,var(--brand) 55%,transparent),
             0 0 22px color-mix(in srgb,var(--brand-2) 45%,transparent);
}
.cta-alt:hover,.cta-alt:focus-visible{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),
             0 10px 34px color-mix(in srgb,var(--accent) 55%,transparent);
}
.cta:active{transform:translateY(0) scale(.98)}
.to-top:hover{box-shadow:0 10px 30px color-mix(in srgb,var(--brand) 55%,transparent)}
.filterbar button:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}

/* ---- 13b. Kopfzeile: Unterstrich wächst, Schatten nach dem Scrollen ------ */
nav.main a{position:relative}
nav.main a:hover{text-decoration:none;opacity:1}
nav.main a::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
nav.main a:hover::after,nav.main a:focus-visible::after,nav.main a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:860px){ nav.main a::after{display:none} }
header.site{transition:background var(--ease),border-color var(--ease),box-shadow var(--ease)}
header.site.ist-gescrollt{box-shadow:0 8px 30px rgba(0,0,0,.10)}
html[data-theme="dark"] header.site.ist-gescrollt{box-shadow:0 8px 30px rgba(0,0,0,.45)}
.brand-badge{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow var(--ease)}
.brand:hover .brand-badge{transform:rotate(-8deg) scale(1.06);box-shadow:0 6px 22px color-mix(in srgb,var(--brand) 50%,transparent)}
.brand:hover{text-decoration:none}

/* ---- 13c. Hero: Text gleitet gestaffelt herein, Bild zoomt langsam auf ---
   Reine CSS-Animation beim Laden, braucht kein Skript. */
@keyframes hero-auf{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-banner>picture img{animation:hero-zoom 2.4s cubic-bezier(.2,.7,.2,1) both}
.hero-overlay>*{animation:hero-auf .9s cubic-bezier(.2,.8,.2,1) both}
.hero-overlay>:nth-child(1){animation-delay:.15s}
.hero-overlay>:nth-child(2){animation-delay:.3s}
.hero-overlay>:nth-child(3){animation-delay:.45s}
.hero-overlay>:nth-child(4){animation-delay:.6s}
.hero-overlay>:nth-child(5){animation-delay:.75s}
/* Akzentstrich vor der Dachzeile */
.hero-overlay .eyebrow{display:flex;align-items:center;gap:12px}
.hero-overlay .eyebrow::before{
  content:'';width:34px;height:2px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 0 12px color-mix(in srgb,var(--brand) 70%,transparent);
}

/* ---- 13d. Rubrik-Label: Linie baut sich beim Hereinscrollen auf ---------- */
.section-label{display:inline-flex;align-items:center;gap:10px}
.section-label::before,.section-center .section-label::after{
  content:'';width:26px;height:2px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:transform .8s cubic-bezier(.2,.8,.2,1) .25s;
}
.section-label::before{transform-origin:right}
.section-center .section-label::after{transform-origin:left;background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.js-zeigen [data-zeigen]:not(.ist-sichtbar) .section-label::before,
.js-zeigen [data-zeigen]:not(.ist-sichtbar) .section-label::after{transform:scaleX(0)}

/* ---- 13e. Karten: anheben, Lichtkante und Schein folgen der Maus ---------
   Vorbild .grundsatz auf funck.gmbh. --mx/--my setzt site.js beim Überfahren.
   ::before = 1-px-Rand (per Maske nur die Kante sichtbar), ::after = Schein. */
.card,.panel,.listing,.team .member,.stat,.price-card,.form{position:relative}
.card,.panel,.team .member,.stat,.price-card,.form{
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s;
}
@media (hover:hover){
  .card::before,.panel::before,.listing::before,.team .member::before,.stat::before,.price-card::before,.form::before{
    content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
               color-mix(in srgb,var(--brand) 90%,transparent),
               color-mix(in srgb,var(--brand-2) 30%,transparent) 40%,transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .35s;
  }
  /* .listing schneidet am Innenrand ab — dort sitzt die Kante innen */
  .listing::before{inset:0}
  .card::after,.panel::after,.team .member::after,.stat::after,.price-card::after,.form::after{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),
               color-mix(in srgb,var(--brand) 11%,transparent),transparent 60%);
    opacity:0;transition:opacity .35s;
  }
  .card:hover::before,.panel:hover::before,.listing:hover::before,.team .member:hover::before,
  .stat:hover::before,.price-card:hover::before,.form:hover::before,.form:focus-within::before,
  .card:hover::after,.panel:hover::after,.team .member:hover::after,
  .stat:hover::after,.price-card:hover::after,.form:hover::after{opacity:1}
  .card:hover,.team .member:hover,.stat:hover,.price-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 50px rgba(0,0,0,.14),0 8px 30px color-mix(in srgb,var(--brand) 18%,transparent);
  }
  .listing:hover{box-shadow:0 22px 50px rgba(0,0,0,.16),0 8px 30px color-mix(in srgb,var(--brand) 20%,transparent)}
  html[data-theme="dark"] .card:hover,html[data-theme="dark"] .team .member:hover,
  html[data-theme="dark"] .stat:hover,html[data-theme="dark"] .price-card:hover{
    box-shadow:0 22px 50px rgba(0,0,0,.5),0 8px 34px color-mix(in srgb,var(--brand) 28%,transparent);
  }
}
/* Inhalt über dem Schein halten */
.card>*,.panel>*,.team .member>*,.stat>*,.price-card>*,.form>*{position:relative;z-index:1}
.price-card>.price-featured-badge{position:absolute;z-index:3}
/* Empfohlener Tarif: Kante leuchtet dauerhaft */
.price-card.featured{box-shadow:0 0 0 1px var(--brand),0 18px 50px color-mix(in srgb,var(--brand) 22%,transparent)}

/* Symbolkachel und Porträt reagieren mit */
.icon{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.card:hover .icon{transform:translateY(-2px) rotate(-6deg) scale(1.08);box-shadow:0 0 20px color-mix(in srgb,var(--brand) 45%,transparent)}
.team .member img{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.team .member:hover img{transform:scale(1.05);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 18%,transparent),0 0 30px color-mix(in srgb,var(--brand) 40%,transparent)}
.listing .media img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.listing:hover .media img{transform:scale(1.06)}
.stat .num{display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stat:hover .num{transform:scale(1.08)}

/* Galerie: Bildunterschrift gleitet herein */
@media (hover:hover){
  .gallery figcaption{transform:translateY(40%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
  .gallery figure:hover figcaption,.gallery figure:focus-within figcaption{transform:none;opacity:1}
}

/* Tabellenzeilen */
table.hours tbody tr{transition:background-color .25s}
table.hours tbody tr:hover{background:color-mix(in srgb,var(--brand) 7%,transparent)}

/* Formularfelder: Fokus leuchtet in der Markenfarbe */
input,select,textarea{transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent);
}
.check-row input:focus{box-shadow:none}
.check-row input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Hinweisband: ein Lichtstreif läuft langsam darüber */
.notice{position:relative;overflow:hidden}
.notice::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.22),transparent);
  animation:notice-streif 6s ease-in-out infinite;
}
@keyframes notice-streif{0%{transform:translateX(-120%)}55%,100%{transform:translateX(300%)}}

/* ---- 13f. Einblenden beim Scrollen ----------------------------------------
   site.js setzt .js-zeigen an <html> und data-zeigen an die Bausteine; --i
   staffelt Geschwister. Ohne Skript (oder bei reduzierter Bewegung) bleibt
   alles sofort sichtbar. Nach dem Einblenden (.ist-fertig) gelten wieder die
   normalen Übergänge ohne Verzögerung, sonst hinge der Hover hinterher. */
.js-zeigen [data-zeigen]{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js-zeigen [data-zeigen].ist-sichtbar{opacity:1;transform:none}
.js-zeigen [data-zeigen].ist-fertig{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}

@media (prefers-reduced-motion:reduce){
  .js-zeigen [data-zeigen]{opacity:1;transform:none}
  .hero-banner>picture img,.hero-overlay>*,.notice::after{animation:none}
  .section-label::before,.section-label::after{transform:none!important}
}
@media print{
  .js-zeigen [data-zeigen]{opacity:1;transform:none}
}