/* ==========================================================================
   AppDesigns – Stylesheet

   0.  Schrift (Poppins)
   1.  Design-Tokens (Farben, Schriften, Größen)
   2.  Basis
   3.  Layout und Typografie
   4.  Buttons und Auswahl-Chips
   5.  Header
   6.  Startseite
   7.  Gemeinsame Bausteine (Bewertungen, FAQ, CTA)
   8.  Unterseiten
   9.  Anfrage-Assistent und Formulare
   10. Teilen-Seite
   10b. Kundenbereich und Kundenverwaltung
   11. Footer
   12. Hilfsklassen

   Alle Werte stehen als Variablen in Abschnitt 1. Hinweis: In @media-Abfragen
   sind Variablen technisch nicht möglich, die Umbruchpunkte stehen deshalb als Zahl.
   ========================================================================== */


/* 0. Schrift: Poppins, selbst gehostet unter assets/fonts/
   Nur die Schnitte, die die Seite wirklich nutzt (400 Text, 500, 600 Überschriften,
   700, 800 Buttons/Labels). Kursive Schnitte werden nicht verwendet.
   ========================================================================== */
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/Poppins-ExtraBold.ttf") format("truetype"); }


/* 1. Design-Tokens
   Alle Farben, Schriften und Größen der Seite. Änderungen hier wirken überall.
   ========================================================================== */
:root{
  /* --- Schrift ---------------------------------------------------------- */
  --font:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  --fw-regular:400;  --fw-medium:500;  --fw-semibold:600;  --fw-bold:700;  --fw-black:800;

  /* Schriftgrößen: feste Stufen … */
  --fs-3xs:13px;  --fs-2xs:14px;  --fs-xs:15px;   --fs-sm:16px;   --fs-md:17px;
  --fs-base:18px; --fs-lg:19px;   --fs-xl:20px;   --fs-2xl:21px;  --fs-3xl:24px;
  --fs-4xl:26px;  --fs-5xl:28px;  --fs-6xl:34px;  --fs-7xl:38px;  --fs-8xl:44px;
  /* … und mitwachsende Größen (Handy → Desktop) */
  --fs-lead:clamp(18px,1.7vw,21px);      /* Einleitungstexte */
  --fs-intro:clamp(20px,2vw,25px);       /* größere Fließtexte, Hero-Untertitel */
  --fs-tagline:clamp(22px,2.3vw,28px);   /* Untertitel, Zitate */
  --fs-h3:clamp(26px,2.8vw,34px);
  --fs-h3-lg:clamp(30px,3.4vw,44px);
  --fs-h2:clamp(38px,5vw,62px);
  --fs-display:clamp(40px,5.4vw,70px);   /* Abschluss-CTA */
  --fs-h1:clamp(42px,5.8vw,80px);        /* Seitentitel */
  --fs-hero:clamp(44px,6.2vw,88px);      /* Startseite */

  --lh-tight:1.08;  --lh-body:1.6;
  --ls-tighter:-.03em;  --ls-tight:-.025em;  --ls-snug:-.02em;  --ls-close:-.01em;
  --ls-wide:.08em;      --ls-wider:.1em;

  /* --- Markenfarben (unabhängig von Hell/Dunkel) ------------------------ */
  --brand:#2e73b9;  --brand-strong:#245f9b;  --brand-tint:#e8f0fa;
  --c1:#b80878; --c2:#2878b8; --c3:#08a8e8; --c4:#089848; --c5:#f8d808; --c6:#f89808; --c7:#e80818;
  --spectrum:linear-gradient(90deg,var(--c1) 0 14.285%,var(--c2) 0 28.57%,var(--c3) 0 42.855%,var(--c4) 0 57.14%,var(--c5) 0 71.425%,var(--c6) 0 85.71%,var(--c7) 0);
  --black:#000;  --white:#fff;  --ink:#0b1220;
  --focus:#6aa6e8;
  --on-accent:#2a1a00;            /* Text auf Gelb/Orange */
  --whatsapp:#1f9d55;

  /* Text und Linien auf schwarzen Flächen (Header, Hero, Footer) */
  --on-dark-muted:#c4cddb;  --on-dark-subtle:#9aa5b6;  --on-dark-nav:#d0d8e4;  --on-dark-accent:#8fbdf0;
  --dark-line:#2a2a2a;
  --white-a10:#ffffff18;  --white-a14:#ffffff22;  --white-a18:#ffffff2e;  --white-a25:#ffffff40;  --white-a40:#ffffff66;

  /* Text auf blauen Flächen */
  --on-brand-muted:#e6f0fb;  --on-brand-accent:#d6e6f8;

  /* Teilen-Buttons (Farben aus share.js) */
  --share-native:#272c61;  --share-whatsapp:#25d366;  --share-sms:#f5a623;
  --share-facebook:#3b5998;  --share-telegram:#2196b0;  --share-email:#8b9df5;

  /* --- Formen, Abstände, Bewegung --------------------------------------- */
  --radius-2xs:3px;  --radius-xs:8px;  --radius-sm:12px;  --radius-md:16px;  --radius-lg:18px;  --radius:20px;
  --radius-pill:999px;  --radius-round:50%;

  --container:1180px;  --container-wide:1320px;  --gutter:28px;
  --header-offset:104px;  --touch:44px;
  --space-section:clamp(72px,9vw,120px);
  --section-end:clamp(64px,9vw,110px);

  --shadow-brand:0 14px 28px -14px var(--brand);
  --shadow-dark:0 18px 40px -22px rgba(0,0,0,.6);
  --shadow-dark-lg:0 30px 50px -20px rgba(0,0,0,.7);
  --shadow-overlay:0 40px 80px -20px var(--overlay);
  --ring:0 0 0 4px #2e73b933;
  --overlay:#000a;

  --dur-fast:.15s;  --dur:.2s;  --dur-slow:.4s;

  --z-sticky:20;  --z-header:60;  --z-toast:90;  --z-skip:100;

  /* --- Hell (Standard) --------------------------------------------------- */
  --bg:#ffffff; --fg:#0b1220; --muted:#4b586b; --surface:#f3f6fb; --line:#e1e7f0; --link:#2e73b9;
  --shadow:0 18px 40px -28px rgba(11,18,32,.35);
  --danger:#c0432a; --danger-line:#d4573d; --danger-bg:#fdeceb; --danger-ink:#a3281a;
  --success-bg:#e8f6ee; --success-fg:#0b3a22;
  --info-bg:#e8f0fa;    --info-fg:#1d4f86;
  --warn-bg:#fff4e0;    --warn-fg:#7a4a00;
  color-scheme:light;
}
/* Dunkel: folgt dem System, außer data-theme="light" ist gesetzt */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0e15; --fg:#f1f5fa; --muted:#a4afc0; --surface:#111722; --line:#222b3a; --link:#6aa6e8;
    --shadow:0 18px 40px -28px rgba(0,0,0,.8);
    --danger:#ff9a82; --danger-line:#ff9a8288; --danger-bg:#3a1612; --danger-ink:#ffb1a3;
    --success-bg:#0f2a1c; --success-fg:#bfe9d0;
    color-scheme:dark;
  }
}
/* Dunkel erzwungen über <html data-theme="dark"> (z. B. für einen späteren Umschalter) */
:root[data-theme="dark"]{
  --bg:#0a0e15; --fg:#f1f5fa; --muted:#a4afc0; --surface:#111722; --line:#222b3a; --link:#6aa6e8;
  --shadow:0 18px 40px -28px rgba(0,0,0,.8);
  --danger:#ff9a82; --danger-line:#ff9a8288; --danger-bg:#3a1612; --danger-ink:#ffb1a3;
  --success-bg:#0f2a1c; --success-fg:#bfe9d0;
  color-scheme:dark;
}


/* 2. Basis
   ========================================================================== */
*{ box-sizing:border-box; }
/* Kein globales weiches Scrollen: Sprungmarken beim Laden einer Seite sollen sofort sitzen.
   Weiches Scrollen innerhalb einer Seite übernimmt main.js. */
html{ scroll-padding-top:var(--header-offset); }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
/* Lange Wörter: deutsche Silbentrennung mit Trennstrich statt Umbruch an beliebiger Stelle */
h1,h2,h3,h4{ margin:0; font-weight:var(--fw-semibold); letter-spacing:var(--ls-snug); line-height:var(--lh-tight); text-wrap:balance; overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:10 4 4; }
p,figure,blockquote{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; height:auto; }
address{ font-style:normal; }
button,input,textarea{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

.skip-link{ position:absolute; left:16px; top:-80px; z-index:var(--z-skip); background:var(--brand); color:var(--white); padding:12px 18px; border-radius:var(--radius-sm); font-weight:var(--fw-black); text-decoration:none; }
.skip-link:focus{ top:16px; }
.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; }


/* 3. Layout und Typografie
   ========================================================================== */
.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.sec{ padding:var(--space-section) 0; }
.sec-soft{ background:var(--surface); }
.sec-brand{ background:var(--brand); color:var(--white); }

.label{ display:inline-block; font-size:var(--fs-xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--link); }
.label::before{ content:""; display:inline-block; width:11px; height:11px; border-radius:var(--radius-2xs); background:var(--lc,var(--brand)); margin-right:11px; vertical-align:-1px; }
.sec-brand .label{ color:var(--on-brand-accent); }
.sec-brand .label::before{ background:var(--white); }

.head{ display:grid; gap:18px; max-width:820px; margin-bottom:clamp(40px,5vw,64px); }
.head.flush{ margin:0; }
.head h2,.h2{ font-size:var(--fs-h2); letter-spacing:var(--ls-tight); }
.lead{ font-size:var(--fs-lead); color:var(--muted); max-width:62ch; }
.sec-brand .lead{ color:var(--on-brand-muted); }

.rb{ background:var(--spectrum); }
.rb-text span{ display:inline; }
.sp1{ color:var(--c1); } .sp2{ color:var(--c2); } .sp3{ color:var(--c3); } .sp4{ color:var(--c4); }
.sp5{ color:var(--c5); } .sp6{ color:var(--c6); } .sp7{ color:var(--c7); }

.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
@media (max-width:920px){ .two{ grid-template-columns:1fr; } }

ul.check{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
ul.check li{ -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
ul.check li{ position:relative; padding-left:38px; font-size:var(--fs-base); color:var(--muted); }
ul.check li::before{ content:""; position:absolute; left:0; top:.12em; width:24px; height:24px; border-radius:var(--radius-round); background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat; }

/* Icon-Kachel */
.ico{ width:52px; height:52px; border-radius:var(--radius-md); display:grid; place-items:center; color:var(--white); flex-shrink:0; }
.ico svg{ width:26px; height:26px; }

.page-top{ height:80px; }
.page-head{ padding:clamp(28px,4vw,56px) 0 clamp(32px,4vw,52px); display:grid; gap:18px; }
.page-title{ margin:0; font-size:var(--fs-h1); font-weight:var(--fw-semibold); letter-spacing:var(--ls-tighter); line-height:var(--lh-tight); max-width:17ch; text-wrap:balance; }

.flag{ display:inline-block; font-size:var(--fs-2xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wide); text-transform:uppercase; padding:9px 16px; border:1.5px dashed var(--danger-line); color:var(--danger); border-radius:var(--radius-xs); margin-bottom:26px; }


/* 4. Buttons und Auswahl-Chips
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:14px 28px; border-radius:var(--radius-pill); border:2px solid transparent; font-weight:var(--fw-black); font-size:var(--fs-md); cursor:pointer; text-decoration:none; text-align:center; transition:transform var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast); }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:20px; height:20px; flex-shrink:0; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-brand{ background:var(--brand); color:var(--white); box-shadow:var(--shadow-brand); }
.btn-brand:hover{ background:var(--brand-strong); }
.btn-outline{ border-color:var(--line); color:var(--fg); background:transparent; }
.btn-outline:hover{ border-color:var(--brand); color:var(--link); }
.btn-white{ background:var(--white); color:var(--ink); }
.btn-white:hover{ background:var(--brand-tint); }
.btn-ghost-w{ border-color:var(--white-a40); color:var(--white); background:transparent; }
.btn-ghost-w:hover{ border-color:var(--white); }

.opts{ display:flex; flex-wrap:wrap; gap:10px; }
.opt{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:10px 20px; border-radius:var(--radius-pill); border:2px solid var(--line); background:var(--bg); font-weight:var(--fw-bold); font-size:var(--fs-md); cursor:pointer; transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast); }
.opt:hover{ border-color:var(--brand); }
.opt:active{ transform:scale(.97); }
.opt svg{ width:20px; height:20px; flex-shrink:0; }
.opt[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }


/* 5. Header
   ========================================================================== */
header.site{ position:sticky; top:12px; z-index:var(--z-header); padding:0 16px; margin-top:12px; height:0; }
.bar{ position:relative; max-width:var(--container); margin:0 auto; height:68px; background:var(--black); border:1px solid var(--dark-line); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 14px 0 22px; box-shadow:var(--shadow-dark); }
.bar::after{ content:""; position:absolute; left:18px; right:18px; bottom:0; height:4px; border-radius:var(--radius-2xs) var(--radius-2xs) 0 0; background:var(--spectrum); }
.logo-link{ display:flex; align-items:center; flex-shrink:0; }
.logo-img{ height:34px; width:auto; display:block; }

nav.links{ display:flex; align-items:center; gap:2px; }
nav.links a{ color:var(--on-dark-nav); text-decoration:none; font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:10px 11px; border-radius:var(--radius-sm); white-space:nowrap; transition:background var(--dur-fast),color var(--dur-fast); }
nav.links a:hover{ color:var(--white); background:var(--white-a10); }
nav.links a.active{ color:var(--black); background:var(--white); }

.bar-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{ width:44px; height:44px; border-radius:var(--radius-sm); display:grid; place-items:center; border:1px solid var(--white-a18); background:transparent; color:var(--white); cursor:pointer; }
.icon-btn:hover,.icon-btn.is-active{ border-color:var(--white); }
.icon-btn.is-active{ background:var(--white); color:var(--black); }
.icon-btn svg{ width:20px; height:20px; }
.nav-toggle{ display:none; }
.bar .btn{ min-height:46px; padding:10px 20px; font-size:var(--fs-xs); box-shadow:none; white-space:nowrap; }

/* Umbruchpunkte auf die Breite von Poppins abgestimmt:
   ab 1560 px wird die Leiste breiter, damit auch der Anfrage-Button Platz hat */
@media (min-width:1560px){ .bar{ max-width:var(--container-wide); } }
@media (max-width:1559px){ .bar .btn{ display:none; } }
@media (max-width:1180px){
  nav.links{ display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--black); border-radius:var(--radius-lg); padding:10px; box-shadow:var(--shadow-dark-lg); }
  nav.links.open{ display:flex; }
  nav.links a{ padding:16px 14px; font-size:var(--fs-base); }
  .nav-toggle{ display:grid; }
}


/* 6. Startseite
   ========================================================================== */
/* Hero */
.hero{ position:relative; overflow:hidden; margin-top:-12px; background:var(--black); color:var(--white); padding:clamp(120px,12vw,150px) 0 clamp(72px,8vw,112px); }
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:var(--spectrum); }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
@media (max-width:1000px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-size:var(--fs-hero); letter-spacing:var(--ls-tighter); line-height:.98; margin:20px 0 28px; }
.hero .sub{ font-size:var(--fs-intro); color:var(--on-dark-muted); max-width:46ch; }
.hero .label{ color:var(--on-dark-accent); }
.hero .btn-outline{ border-color:var(--white-a40); color:var(--white); }
.hero .btn-outline:hover{ border-color:var(--white); color:var(--white); }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }

.startcard{ background:var(--bg); color:var(--fg); border-radius:var(--radius); padding:clamp(26px,3.2vw,40px); display:grid; gap:18px; align-content:start; }
.startcard .label{ color:var(--link); }
.startcard h2{ font-size:var(--fs-h3-lg); }
.startcard p{ color:var(--muted); font-size:var(--fs-base); }

/* Vertrauensleiste */
.trustbar{ background:var(--bg); border-bottom:1px solid var(--line); }
.trustbar ul{ list-style:none; margin:0; padding:28px 0; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
@media (max-width:1060px){ .trustbar ul{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .trustbar ul{ grid-template-columns:1fr; } }
.trustbar li{ display:flex; align-items:center; gap:14px; }
.trustbar .ti{ width:46px; height:46px; border-radius:var(--radius-sm); background:var(--surface); color:var(--link); display:grid; place-items:center; flex-shrink:0; }
.trustbar .ti svg{ width:23px; height:23px; }
.trustbar b{ display:block; font-size:var(--fs-md); line-height:1.25; }
.trustbar li div span{ font-size:var(--fs-sm); color:var(--muted); }

/* Zwei Hebel */
.levers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:900px){ .levers{ grid-template-columns:minmax(0,1fr); } }
.lever{ display:grid; grid-template-rows:auto 1fr auto; gap:30px; padding:clamp(26px,3.2vw,42px); border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); }
.lever-h{ display:flex; gap:18px; align-items:flex-start; }
.lever-h h3{ font-size:var(--fs-h3); margin-bottom:8px; }
.lever-h p{ color:var(--muted); font-size:var(--fs-lg); }
.chain{ list-style:none; margin:0; padding:0; display:grid; }
.chain li{ position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; padding-bottom:22px; }
.chain li:not(:last-child)::before{ content:""; position:absolute; left:23px; top:50px; bottom:2px; width:2px; background:var(--line); }
.chain .ci{ width:48px; height:48px; border-radius:var(--radius-round); background:var(--surface); color:var(--link); display:grid; place-items:center; }
.chain .ci svg{ width:22px; height:22px; }
.chain b{ display:block; font-size:var(--fs-xl); font-weight:var(--fw-semibold); margin-bottom:4px; }
.chain span{ color:var(--muted); font-size:var(--fs-md); }
.lever-go{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-black); color:var(--link); text-decoration:none; }
.lever-go svg{ width:22px; height:22px; transition:transform var(--dur); }
.lever-go:hover svg{ transform:translateX(5px); }

/* Vorteile */
.adv{ margin-top:clamp(44px,6vw,72px); display:grid; gap:26px; }
.adv-h{ font-size:var(--fs-h3); }
.adv-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
@media (max-width:1100px){ .adv-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .adv-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .adv-list{ grid-template-columns:minmax(0,1fr); } }
.adv-list li{ display:grid; gap:16px; align-content:start; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); }
.adv-list b{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); line-height:1.3; letter-spacing:var(--ls-close); }
/* Handy und kleines Tablet: Icon links, Text daneben (spart Höhe) */
@media (max-width:760px){
  .adv-list li{ grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px; padding:18px 20px; }
  .adv-list .ico{ width:48px; height:48px; }
}

/* Web App oder Store App */
.ways{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:860px){ .ways{ grid-template-columns:minmax(0,1fr); } }
.way{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3.2vw,42px); display:grid; gap:16px; align-content:start; }
.way .tag{ font-size:var(--fs-xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--link); }
.way h3{ font-size:var(--fs-h3-lg); }
.way > p{ color:var(--muted); font-size:var(--fs-lg); }
.way .ideal{ font-weight:var(--fw-bold); color:var(--fg); font-size:var(--fs-base); border-top:1px solid var(--line); padding-top:16px; }
.ways-cta{ margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ways-cta p{ font-size:var(--fs-xl); font-weight:var(--fw-semibold); letter-spacing:var(--ls-close); }

/* Selbsttest */
.test{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,52px); box-shadow:var(--shadow); display:grid; gap:28px; max-width:980px; }
.tprog{ display:grid; gap:10px; }
.tprog .row1{ display:flex; justify-content:space-between; font-weight:var(--fw-black); font-size:var(--fs-sm); color:var(--muted); }
.bar-track{ height:10px; border-radius:var(--radius-pill); background:var(--surface); overflow:hidden; }
.bar-fill{ height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--c2),var(--c3)); transition:width var(--dur-slow) ease; }
.tq{ animation:fadeIn .35s ease both; display:grid; gap:24px; }
.tq h3{ font-size:var(--fs-h3-lg); letter-spacing:var(--ls-tight); }
.tq .hintt{ color:var(--muted); font-size:var(--fs-md); }
.tans{ display:grid; gap:12px; }
.tans.cols{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .tans.cols{ grid-template-columns:1fr; } }
.ans{ display:flex; align-items:center; gap:14px; min-height:68px; padding:14px 22px; border-radius:var(--radius-lg); border:2px solid var(--line); background:var(--bg); font-weight:var(--fw-black); font-size:var(--fs-lg); cursor:pointer; text-align:left; transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast); }
.ans:hover{ border-color:var(--brand); background:var(--surface); }
.ans:active{ transform:scale(.99); }
.ans small{ display:block; font-weight:var(--fw-medium); color:var(--muted); font-size:var(--fs-xs); }
.ans .dot{ width:14px; height:14px; border-radius:var(--radius-round); flex-shrink:0; }
.backlink{ justify-self:start; background:none; border:none; color:var(--link); font-weight:var(--fw-black); font-size:var(--fs-sm); cursor:pointer; padding:8px 0; min-height:44px; }
.tres{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,48px); align-items:center; }
@media (max-width:640px){ .tres{ grid-template-columns:1fr; justify-items:start; } }
.tres h3{ font-size:var(--fs-h3-lg); margin-top:8px; }
.tres p{ color:var(--muted); margin-top:10px; }
.ring{ position:relative; width:170px; height:170px; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:12; }
.ring .bg{ stroke:var(--surface); }
.ring .fg{ stroke:var(--brand); stroke-linecap:round; stroke-dasharray:377; transition:stroke-dashoffset .8s ease; }
.ring b{ position:absolute; inset:0; display:grid; place-items:center; font-size:var(--fs-8xl); letter-spacing:var(--ls-tight); }
.areas{ display:grid; gap:14px; }
.area{ display:grid; gap:6px; }
.area .row1{ display:flex; justify-content:space-between; font-weight:var(--fw-black); font-size:var(--fs-md); }
.recs-h{ font-size:var(--fs-4xl); margin-bottom:14px; }
.recs{ display:grid; gap:12px; }
.rec{ display:flex; gap:16px; align-items:flex-start; padding:20px 22px; border-radius:var(--radius-lg); background:var(--surface); text-decoration:none; }
.rec:hover{ background:var(--line); }
.rec h4{ font-size:var(--fs-2xl); margin-bottom:4px; }
.rec p{ color:var(--muted); font-size:var(--fs-sm); }
.rec .ico{ width:44px; height:44px; border-radius:var(--radius-sm); }
.rec .ico svg{ width:22px; height:22px; }
.tact{ display:flex; gap:12px; flex-wrap:wrap; }

/* Funktionen */
.ftools{ margin-bottom:28px; }
.fgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.fcard{ display:flex; gap:16px; align-items:flex-start; text-align:left; padding:22px; border-radius:var(--radius); border:2px solid var(--line); background:var(--bg); cursor:pointer; transition:border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast); }
.fcard:hover{ border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--shadow); }
.fcard[aria-pressed="true"]{ border-color:var(--brand); background:var(--surface); }
.fcard b{ display:block; font-size:var(--fs-lg); margin-bottom:4px; letter-spacing:var(--ls-close); }
.fcard > span:last-child{ min-width:0; }
.fcard b{ overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
.fcard span.t{ color:var(--muted); font-size:var(--fs-sm); display:block; }
.fcard em{ font-style:normal; font-weight:var(--fw-black); font-size:var(--fs-xs); color:var(--link); display:block; margin-top:10px; }
.funcbar{ position:sticky; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:var(--z-sticky); margin-top:28px; display:none; align-items:center; justify-content:space-between; gap:12px;
  background:var(--brand); color:var(--white); padding:8px 8px 8px 18px; border-radius:var(--radius-md); box-shadow:0 10px 30px -14px rgba(0,0,0,.45); max-width:640px; margin-left:auto; margin-right:auto; }
.funcbar.show{ display:flex; animation:fadeIn .3s ease both; }
.funcbar b{ font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.funcbar .btn{ min-height:44px; padding:8px 18px; font-size:var(--fs-xs); box-shadow:none; flex:none; }
.funcbar .btn svg{ width:16px; height:16px; }
.fb-short{ display:none; }
@media (max-width:600px){ .fb-long{ display:none; } .fb-short{ display:inline; } }

/* Ablauf */
.steps3{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .steps3{ grid-template-columns:1fr; } }
.step3{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(28px,3vw,40px); display:grid; gap:16px; align-content:start; }
.step3 .n{ width:60px; height:60px; border-radius:var(--radius-round); background:var(--fg); color:var(--bg); display:grid; place-items:center; font-weight:var(--fw-black); font-size:var(--fs-4xl); }
.step3 h3{ font-size:var(--fs-h3); }
.step3 p{ color:var(--muted); font-size:var(--fs-base); }

/* Motivation */
.mot p{ font-size:var(--fs-intro); color:var(--muted); line-height:1.5; }
.mot p strong{ color:var(--fg); }

.sec-soft .way,.sec-soft .fcard{ background:var(--bg); }


/* 7. Gemeinsame Bausteine
   ========================================================================== */
/* Bewertungen */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .reviews{ grid-template-columns:1fr; } }
.review{ border:1.5px dashed var(--line); border-radius:var(--radius); padding:32px; display:grid; gap:18px; align-content:start; background:var(--bg); }
.stars{ display:flex; gap:3px; color:var(--c6); }
.stars svg{ width:20px; height:20px; }
.review blockquote{ font-size:var(--fs-xl); line-height:1.5; font-weight:var(--fw-semibold); letter-spacing:var(--ls-close); }
.review cite{ font-style:normal; font-size:var(--fs-sm); color:var(--muted); }

/* FAQ */
.faq-tools{ display:grid; gap:16px; margin-bottom:26px; max-width:900px; }
.faq-tools .opt{ font-size:var(--fs-sm); }
.search{ position:relative; }
.search svg{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--muted); }
.search input{ width:100%; min-height:58px; padding:14px 18px 14px 52px; border:2px solid var(--line); border-radius:var(--radius-lg); background:var(--bg); font-size:var(--fs-base); }
.search input:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.faq{ display:grid; max-width:900px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:26px 52px 26px 0; font-size:var(--fs-intro); font-weight:var(--fw-semibold); letter-spacing:var(--ls-close); line-height:1.3; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:var(--fs-6xl); font-weight:var(--fw-regular); color:var(--link); transition:transform var(--dur); }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq .a{ padding:0 0 28px; color:var(--muted); font-size:var(--fs-base); max-width:66ch; display:grid; gap:14px; }
.faq .tagq{ font-size:var(--fs-2xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--link); display:block; margin-bottom:6px; }
.faq-empty{ padding:30px 0; color:var(--muted); font-size:var(--fs-lg); display:grid; gap:16px; justify-items:start; }

/* Abschluss-CTA */
.cta{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
@media (max-width:900px){ .cta{ grid-template-columns:1fr; } }
.cta h2{ font-size:var(--fs-display); letter-spacing:var(--ls-tighter); }
.cta-actions{ display:grid; gap:12px; }
.cta-actions .btn{ justify-content:space-between; width:100%; padding:20px 26px; font-size:var(--fs-lg); }


/* 8. Unterseiten
   ========================================================================== */
/* Leistungen */
.svc{ display:grid; grid-template-columns:310px minmax(0,1fr); gap:56px; align-items:start; padding-bottom:var(--section-end); }
@media (max-width:960px){ .svc{ grid-template-columns:minmax(0,1fr); gap:24px; } }
.svc-nav{ position:sticky; top:var(--header-offset); display:grid; gap:4px; }
.svc-nav a{ display:flex; align-items:center; gap:12px; min-height:52px; padding:14px 16px; border-radius:var(--radius-md); font-size:var(--fs-md); font-weight:var(--fw-black); color:var(--muted); text-decoration:none; line-height:1.3; }
.svc-nav a:hover{ background:var(--surface); color:var(--fg); }
.svc-nav a[aria-current="page"]{ background:var(--fg); color:var(--bg); }
.svc-nav .dot{ width:12px; height:12px; border-radius:var(--radius-round); flex-shrink:0; }
@media (max-width:960px){
  /* Handy/Tablet: alle Bausteine untereinander sichtbar statt seitlich zu wischen */
  .svc-nav{ position:static; display:grid; gap:6px; }
  .svc-nav a{ min-height:48px; padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:var(--fs-xs); }
  .svc-nav a[aria-current="page"]{ border-color:var(--fg); }
}
.svc-panel{ display:grid; grid-template-columns:minmax(0,1fr); gap:48px; }
.svc-title{ font-size:var(--fs-h2); letter-spacing:var(--ls-tighter); }
.svc-intro{ display:grid; gap:20px; }
.svc-tagline{ font-size:var(--fs-tagline); line-height:1.35; font-weight:var(--fw-bold); letter-spacing:var(--ls-snug); max-width:34ch; }
.svc-block{ display:grid; gap:16px; }
.svc-block h3{ font-size:var(--fs-h3); }
.svc-block p{ color:var(--muted); font-size:var(--fs-base); max-width:64ch; }
.svc-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:760px){ .svc-cols{ grid-template-columns:minmax(0,1fr); } }
.svc-col{ border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:grid; gap:12px; align-content:start; }
.svc-col h4{ font-size:var(--fs-5xl); }
.svc-col p{ color:var(--muted); font-size:var(--fs-md); }
.svc-col em{ font-style:normal; font-weight:var(--fw-bold); font-size:var(--fs-md); }
.mods{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.mods li{ padding:10px 18px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:var(--fs-sm); font-weight:var(--fw-semibold); background:var(--bg); }
.benefit{ background:var(--surface); border-radius:var(--radius); padding:clamp(26px,3vw,40px); display:grid; gap:20px; }
.benefit h3{ font-size:var(--fs-h3); }
.benefit .grid{ grid-template-columns:1fr 1fr; gap:14px 28px; }
@media (max-width:640px){ .benefit .grid{ grid-template-columns:1fr; } }
.approach{ background:var(--surface); color:var(--fg); border-radius:var(--radius); padding:clamp(28px,3.6vw,46px); display:grid; gap:16px; }
.approach p{ font-size:var(--fs-tagline); line-height:1.3; letter-spacing:var(--ls-close); font-weight:var(--fw-semibold); }
.approach .closing{ font-size:var(--fs-base); color:var(--muted); font-weight:var(--fw-regular); letter-spacing:0; }

/* Über uns */
.defs{ display:grid; border-top:1px solid var(--line); }
.def{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:40px; padding:44px 0; border-bottom:1px solid var(--line); }
@media (max-width:820px){ .def{ grid-template-columns:1fr; gap:14px; } }
.def h2{ font-size:var(--fs-h3-lg); }
.def .body{ display:grid; gap:18px; font-size:var(--fs-xl); color:var(--muted); max-width:62ch; }
.def .body strong{ color:var(--fg); }

/* Referenzen */
.logo-wall{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:760px){ .logo-wall{ grid-template-columns:repeat(2,1fr); } }
.logo-slot{ aspect-ratio:16/9; border:1.5px dashed var(--line); border-radius:var(--radius-md); display:grid; place-items:center; font-size:var(--fs-sm); color:var(--muted); padding:16px; }
.logo-slot img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.logo-name{ font-weight:var(--fw-bold); color:var(--ink); text-align:center; }

/* Bewertungsseite */
.gbox{ margin-top:40px; background:var(--surface); border-radius:var(--radius); padding:30px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.gbox h2{ font-size:var(--fs-4xl); }
.gbox p{ color:var(--muted); font-size:var(--fs-base); margin-top:4px; }

/* Kontakt: Anfahrt */
.anfahrt-sec{ margin:clamp(72px,10vw,120px) 0 var(--section-end); }
.anfahrt-sec .head{ margin-bottom:34px; }
.anfahrt{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:44px; align-items:center; }
@media (max-width:900px){ .anfahrt{ grid-template-columns:minmax(0,1fr); } }
.map{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--bg); }
.map-stage{ position:relative; aspect-ratio:8/5; background:var(--surface); }
.map-preview, .map-canvas{ position:absolute; inset:0; }
.map-preview svg{ display:block; width:100%; height:100%; }
.map-stage.is-live .map-preview{ visibility:hidden; }
.map-consent{ position:absolute; inset:auto 16px 16px 16px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 20px; display:grid; gap:14px; justify-items:start; box-shadow:var(--shadow); }
.map-consent p{ font-size:var(--fs-xs); color:var(--muted); line-height:1.5; }
.map-consent p b{ color:var(--fg); font-size:var(--fs-md); }
.map-consent a{ color:var(--link); }
.map-consent .btn{ min-height:48px; padding:10px 20px; font-size:var(--fs-sm); }
.map-info{ font:var(--fs-xs)/1.5 var(--font); color:var(--ink); }
.map-info a{ color:var(--brand); font-weight:var(--fw-bold); }
.map-cap{ font-size:var(--fs-2xs); color:var(--muted); padding:12px 16px; border-top:1px solid var(--line); }
@media (max-width:560px){ .map-stage{ aspect-ratio:4/5; } }
.place{ display:grid; gap:8px; padding:24px 0; border-bottom:1px solid var(--line); }
.place:first-child{ padding-top:0; }
.place h3{ font-size:var(--fs-3xl); }
.place p{ color:var(--muted); font-size:var(--fs-base); }
.place a{ color:var(--link); font-weight:var(--fw-black); text-decoration:none; margin-top:4px; }

/* Kundenbereich */
.locked-wrap{ padding-top:clamp(32px,5vw,64px); padding-bottom:var(--section-end); }
.locked{ max-width:500px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); padding:42px; display:grid; gap:8px; background:var(--bg); box-shadow:var(--shadow); }
.locked h1{ font-size:var(--fs-7xl); }
.locked .badge{ justify-self:start; font-size:var(--fs-2xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wider); text-transform:uppercase; background:var(--surface); padding:8px 16px; border-radius:var(--radius-pill); margin-bottom:14px; }
.locked-text{ color:var(--muted); margin:10px 0 24px; }
.locked .field + .field{ margin-top:14px; }
.locked .btn{ margin-top:20px; }
.locked input:disabled{ background:var(--surface); cursor:not-allowed; opacity:.7; }

/* Rechtliche Seiten */
.prose{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; max-width:66ch; }
.prose p, .prose li{ overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
.prose h2{ font-size:var(--fs-h3); margin-top:18px; }
.prose p{ color:var(--muted); }
.prose a{ color:var(--link); }
.ph{ color:var(--link); font-weight:var(--fw-bold); }


/* 9. Anfrage-Assistent und Formulare
   ========================================================================== */
.inq{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:980px){ .inq{ grid-template-columns:minmax(0,1fr); } }
.inq-main{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3.4vw,44px); display:grid; gap:30px; box-shadow:var(--shadow); }
.prog{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.prog em{ overflow-wrap:anywhere; }
@media (max-width:360px){ .prog{ gap:6px; } .prog span{ width:34px; height:34px; font-size:var(--fs-xs); } .prog em{ font-size:var(--fs-3xs); } }
.prog li{ display:grid; gap:8px; justify-items:start; }
.prog span{ width:40px; height:40px; border-radius:var(--radius-round); background:var(--surface); display:grid; place-items:center; font-weight:var(--fw-black); font-size:var(--fs-md); color:var(--muted); }
.prog span svg{ width:18px; height:18px; }
.prog em{ font-style:normal; font-weight:var(--fw-bold); font-size:var(--fs-xs); color:var(--muted); }
.prog li.on span{ background:var(--fg); color:var(--bg); }
.prog li.on em{ color:var(--fg); }
.prog li.done span{ background:var(--brand); color:var(--white); }
@media (max-width:520px){ .prog em{ font-size:var(--fs-3xs); } }
.sb{ display:grid; gap:24px; animation:fadeIn .35s ease both; }
.sb h2{ font-size:var(--fs-h3-lg); letter-spacing:var(--ls-tight); }
.sb .lead{ font-size:var(--fs-base); margin-top:12px; }
.grp{ display:grid; gap:14px; }
.grp h3{ font-size:var(--fs-xl); letter-spacing:var(--ls-close); }
.qrow{ display:grid; gap:10px; }
.qrow b{ font-size:var(--fs-base); }
.inq-nav{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.errbox{ background:var(--danger-bg); color:var(--danger-ink); border-radius:var(--radius-md); padding:14px 18px; font-weight:var(--fw-bold); font-size:var(--fs-md); }

.field{ display:grid; gap:8px; min-width:0; }
/* Eingabefelder nie breiter als ihre Spalte (Browser geben Feldern sonst eine Mindestbreite) */
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
/* iPhone/Safari: Datums- und Zeitfelder haben eine eigene Mindestbreite und zentrierten Text.
   Hier auf normale Feldbreite und linksbündig zurücksetzen. */
.field input[type="date"], .field input[type="datetime-local"]{ -webkit-appearance:none; appearance:none; display:block; min-width:0; max-width:100%; text-align:left; height:calc(1.5em + 36px); }
.field input[type="date"]::-webkit-date-and-time-value, .field input[type="datetime-local"]::-webkit-date-and-time-value{ text-align:left; margin:0; }
.field input[type="date"]::-webkit-calendar-picker-indicator, .field input[type="datetime-local"]::-webkit-calendar-picker-indicator{ opacity:.6; cursor:pointer; }
.field label{ font-size:var(--fs-md); font-weight:var(--fw-black); }
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field input[type="password"],.field input[type="datetime-local"],.field input[type="date"],.field select,.field textarea{ font-size:var(--fs-base); line-height:1.5; padding:16px 18px; min-height:58px; border:2px solid var(--line); border-radius:var(--radius-md); background:var(--bg); color:var(--fg); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.field textarea{ min-height:140px; resize:vertical; }
.field.bad input,.field.bad textarea{ border-color:var(--danger-line); }
.err{ display:none; color:var(--danger); font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.field.bad .err{ display:block; }
.consent{ display:flex; gap:14px; align-items:flex-start; font-size:var(--fs-sm); color:var(--muted); }
.field label.consent{ font-size:var(--fs-sm); font-weight:var(--fw-regular); }
.consent input{ margin-top:4px; width:22px; height:22px; accent-color:var(--brand); flex-shrink:0; }

.inq-side{ display:grid; gap:18px; position:sticky; top:var(--header-offset); }
@media (max-width:980px){ .inq-side{ position:static; } }
.sumcard{ background:var(--surface); color:var(--fg); border-radius:var(--radius); padding:clamp(24px,3vw,34px); display:grid; gap:18px; }
.sumcard h3{ font-size:var(--fs-4xl); }
.sumcard dl{ margin:0; display:grid; gap:14px; }
.sumcard dt{ font-size:var(--fs-2xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--link); }
.sumcard dd{ margin:4px 0 0; font-size:var(--fs-base); }
.sumcard ul{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sumcard li{ padding:7px 14px; border-radius:var(--radius-pill); background:var(--bg); border:1px solid var(--line); font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.sumcard .empty{ color:var(--muted); font-size:var(--fs-md); }
.done-box{ display:grid; gap:20px; justify-items:start; }
.done-box h2{ font-size:var(--fs-h3-lg); }

.info-list{ display:grid; gap:12px; }
.info{ display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:var(--radius); background:var(--surface); text-decoration:none; transition:background var(--dur-fast); }
a.info:hover{ background:var(--line); }
.info > *:not(.ico){ min-width:0; overflow-wrap:anywhere; }
@media (max-width:360px){ .info{ gap:14px; padding:16px; } }
.info .ico{ width:48px; height:48px; border-radius:var(--radius-md); }
.info small{ display:block; font-size:var(--fs-2xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--muted); }
.info b{ font-size:var(--fs-lead); letter-spacing:var(--ls-snug); }


/* 10. Teilen-Seite (aus share.js, auf die Seite beschränkt)
   ========================================================================== */
/* Kacheln: Desktop alle in einer Reihe, Tablet automatisch, Handy 3 (sehr schmal 2) nebeneinander */
#pwashare-share-container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.pwashare-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:112px; padding:18px 12px; border-radius:var(--radius-md); color:var(--white); text-decoration:none; text-align:center; font-family:var(--font); font-weight:var(--fw-bold); font-size:var(--fs-md); line-height:1.2; transition:filter var(--dur-fast),transform var(--dur-fast); }
.pwashare-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.pwashare-btn:active{ transform:translateY(0); }
.pwashare-btn svg{ width:28px; height:28px; flex-shrink:0; }
@media (max-width:600px){
  #pwashare-share-container{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .pwashare-btn{ min-height:92px; padding:14px 6px; font-size:var(--fs-2xs); gap:8px; }
  .pwashare-btn svg{ width:24px; height:24px; }
}
@media (max-width:340px){ #pwashare-share-container{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pwashare-btn-teilen{ background:var(--share-native); }
.pwashare-btn-whatsapp{ background:var(--share-whatsapp); }
.pwashare-btn-sms{ background:var(--share-sms); }
.pwashare-btn-facebook{ background:var(--share-facebook); }
.pwashare-btn-telegram{ background:var(--share-telegram); }
.pwashare-btn-email{ background:var(--share-email); }


/* 10b. Kundenbereich und Kundenverwaltung
   ========================================================================== */
.notice{ border-radius:var(--radius-md); padding:14px 18px; font-weight:var(--fw-bold); font-size:var(--fs-sm); line-height:1.5; }
.notice-success{ background:var(--success-bg); color:var(--success-fg); }
.notice-error{ background:var(--danger-bg); color:var(--danger-ink); }
.notice-info{ background:var(--surface); color:var(--fg); }

.auth-form{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:8px; }
.auth-form .btn{ margin-top:6px; }
.auth-links{ margin-top:14px; font-size:var(--fs-sm); }
.auth-links a, .locked-text a{ color:var(--link); font-weight:var(--fw-bold); }
.locked-text.small{ font-size:var(--fs-xs); margin:18px 0 0; }
.hint{ font-size:var(--fs-2xs); color:var(--muted); }
.locked .notice{ margin:6px 0 4px; }

.kb, .adm{ display:grid; gap:28px; }
.kb-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.kb-head .page-title{ margin-top:14px; }
.kb-head .lead{ margin-top:10px; }
.kb-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.kb-actions form{ margin:0; }
.kb-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:900px){ .kb-grid{ grid-template-columns:minmax(0,1fr); } }
.kb-card{ border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:grid; gap:14px; align-content:start; background:var(--bg); }
.kb-card h2{ font-size:var(--fs-4xl); }
.kb-card p{ color:var(--muted); font-size:var(--fs-md); }
.kb-card a:not(.btn){ color:var(--link); font-weight:var(--fw-bold); }

.kb-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .kb-grid-2{ grid-template-columns:minmax(0,1fr); } }
.kb-card .btn{ margin-top:4px; }
.push-recent{ border-top:1px solid var(--line); padding-top:16px; margin-top:6px; display:grid; gap:10px; }
.push-recent h3{ font-size:var(--fs-xs); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--muted); font-weight:var(--fw-black); }
.push-recent ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.push-recent li{ display:grid; gap:2px; font-size:var(--fs-xs); }
.push-recent li b{ font-size:var(--fs-2xs); color:var(--fg); }
.push-recent li span{ color:var(--muted); overflow-wrap:anywhere; }
.push-count.is-full{ color:var(--danger); font-weight:var(--fw-bold); }

.kb-news{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,34px); display:grid; gap:18px; background:var(--bg); }
.kb-news-head{ display:flex; align-items:center; gap:16px; }
.kb-news-head h2{ font-size:var(--fs-h3); }
.news-list{ max-width:none; }
.news-list summary{ font-size:var(--fs-lead); }
.news-body{ max-width:none; grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:start; gap:24px; }
.news-body img{ width:100%; height:auto; border-radius:var(--radius-md); display:block; }
.news-body:not(:has(img)){ grid-template-columns:minmax(0,1fr); }
.news-text{ display:grid; gap:12px; max-width:66ch; }
@media (max-width:700px){ .news-body{ grid-template-columns:minmax(0,1fr); } }

.kb-dialog{ border:none; border-radius:var(--radius); padding:clamp(24px,4vw,40px); width:min(92vw,560px); background:var(--bg); color:var(--fg); box-shadow:var(--shadow-overlay); }
.kb-dialog::backdrop{ background:var(--overlay); }
.kb-dialog h2{ font-size:var(--fs-h3); padding-right:48px; }
.kb-dialog > p{ margin:10px 0 6px; font-size:var(--fs-sm); }
.dlg-close{ position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg); color:var(--fg); cursor:pointer; font-size:var(--fs-base); }
.dlg-close:hover{ border-color:var(--fg); }

/* Referenzen: Übersicht und Projektseite */
.ref-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:960px){ .ref-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .ref-grid{ grid-template-columns:minmax(0,1fr); } }
.ref-card{ height:100%; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg); text-decoration:none; color:var(--fg); transition:transform var(--dur),box-shadow var(--dur); }
a.ref-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
/* Logo-Fläche mit festem Seitenverhältnis; das Logo wird darin eingepasst, egal ob breit, hoch oder quadratisch */
.ref-logo{ position:relative; display:block; aspect-ratio:16/9; background:var(--white); border-bottom:1px solid var(--line); overflow:hidden; }
.ref-logo img{ position:absolute; top:14%; left:12%; width:76%; height:72%; object-fit:contain; }
.ref-logo .logo-name{ position:absolute; inset:0; display:grid; place-items:center; padding:20px; }
.ref-card-body{ flex:1; display:grid; gap:6px; align-content:start; padding:22px 24px 24px; }
@media (max-width:600px){ .ref-logo{ aspect-ratio:2/1; } .ref-card-body{ padding:18px 20px 20px; } .ref-card-body b{ font-size:var(--fs-lg); } }
.ref-card-body b{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); letter-spacing:var(--ls-close); line-height:1.25; }
.ref-branche{ font-size:var(--fs-3xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--link); }
.ref-teaser{ color:var(--muted); font-size:var(--fs-sm); line-height:1.45; }
.ref-more{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-weight:var(--fw-black); font-size:var(--fs-sm); color:var(--link); }
.ref-more svg{ width:18px; height:18px; transition:transform var(--dur); }
a.ref-card:hover .ref-more svg{ transform:translateX(4px); }

.ref-page{ display:grid; gap:clamp(48px,7vw,88px); padding-bottom:var(--section-end); }
.ref-hero{ display:grid; gap:18px; padding-top:clamp(20px,3vw,40px); }
.ref-back{ justify-self:start; color:var(--link); font-weight:var(--fw-black); font-size:var(--fs-sm); text-decoration:none; }
.ref-back:hover{ text-decoration:underline; }
.ref-hero .page-title{ max-width:20ch; }
.ref-chips{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ref-chips li{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:var(--fw-bold); background:var(--bg); }
.ref-chips svg{ width:16px; height:16px; color:var(--link); }
.ref-image{ margin:calc(clamp(48px,7vw,88px) * -0.5) 0 0; border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.ref-image img{ display:block; width:100%; height:auto; max-height:640px; object-fit:cover; }

.ref-intro{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start; }
@media (max-width:900px){ .ref-intro{ grid-template-columns:minmax(0,1fr); } }
.ref-intro-text{ display:grid; gap:20px; }
.ref-summary{ font-size:var(--fs-tagline); line-height:1.35; font-weight:var(--fw-semibold); letter-spacing:var(--ls-snug); }
.ref-facts{ background:var(--surface); border-radius:var(--radius); padding:clamp(24px,3vw,32px); display:grid; gap:18px; }
.ref-facts h2{ font-size:var(--fs-2xl); }
.ref-facts dl{ margin:0; display:grid; gap:14px; }
.ref-facts dt{ font-size:var(--fs-3xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--muted); }
.ref-facts dd{ margin:2px 0 0; font-size:var(--fs-md); font-weight:var(--fw-semibold); }
.ref-facts .btn{ justify-self:start; }

.ref-sec .head{ margin-bottom:clamp(28px,3vw,40px); }
.ref-challenge{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.ref-challenge li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); }
.ref-challenge .n{ width:44px; height:44px; border-radius:var(--radius-round); background:var(--surface); color:var(--fg); display:grid; place-items:center; font-weight:var(--fw-black); font-size:var(--fs-base); }
.ref-challenge b{ display:block; font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin-bottom:4px; letter-spacing:var(--ls-close); }
.ref-challenge p{ color:var(--muted); font-size:var(--fs-md); }

.ref-solution{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:760px){ .ref-solution{ grid-template-columns:minmax(0,1fr); } }
.ref-solution li{ display:flex; gap:18px; align-items:flex-start; padding:26px; border-radius:var(--radius); background:var(--surface); }
.ref-solution h3{ font-size:var(--fs-2xl); margin-bottom:6px; letter-spacing:var(--ls-close); }
.ref-solution p{ color:var(--muted); font-size:var(--fs-md); }

.ref-highlight{ position:relative; overflow:hidden; background:var(--black); color:var(--white); border-radius:var(--radius); padding:clamp(30px,4.5vw,56px); display:grid; gap:16px; }
.ref-highlight::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--spectrum); }
.ref-highlight .label{ color:var(--on-dark-accent); }
.ref-highlight h2{ font-size:var(--fs-h3-lg); max-width:22ch; }
.ref-highlight p{ color:var(--on-dark-muted); font-size:var(--fs-lead); max-width:62ch; }
.ref-nav{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:28px; }

.cms-h{ font-size:var(--fs-xl); letter-spacing:var(--ls-close); padding-top:6px; }
.cms-h:not(:first-child){ border-top:1px solid var(--line); padding-top:22px; margin-top:6px; }
.cms-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
@media (max-width:640px){ .cms-row{ grid-template-columns:1fr; } }

/* Verwaltung: Reiter und CMS */
.adm-tabs{ display:flex; gap:6px; flex-wrap:wrap; background:var(--surface); padding:6px; border-radius:var(--radius-md); justify-self:start; }
.adm-tabs a{ padding:10px 20px; border-radius:var(--radius-sm); font-weight:var(--fw-black); font-size:var(--fs-sm); color:var(--muted); text-decoration:none; }
.adm-tabs a:hover{ color:var(--fg); }
.adm-tabs a[aria-current="page"]{ background:var(--fg); color:var(--bg); }

.cms-form{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; align-items:start; }
@media (max-width:900px){ .cms-form{ grid-template-columns:minmax(0,1fr); } }
.cms-main, .cms-side{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; min-width:0; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,3vw,30px); background:var(--bg); }
.cms-side{ background:var(--surface); border-color:transparent; }
.cms-form textarea{ min-height:280px; }
.cms-form input[type="file"]{ font-size:var(--fs-xs); }
.cms-preview{ width:100%; max-height:240px; object-fit:cover; border-radius:var(--radius-sm); display:block; }
.cms-logo-preview{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; display:grid; place-items:center; }
.cms-logo-preview img{ max-height:90px; width:auto; max-width:100%; }
.cms-buttons{ display:flex; gap:10px; flex-wrap:wrap; }

.cms-list{ list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line); }
.cms-item{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:8px 18px; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line); }
.cms-item .adm-actions{ grid-column:2 / -1; }
.cms-item.is-inactive .cms-info, .cms-item.is-inactive .cms-thumb{ opacity:.55; }
.cms-thumb{ width:72px; height:54px; border-radius:var(--radius-sm); background:var(--surface); display:grid; place-items:center; overflow:hidden; color:var(--muted); grid-row:span 2; }
.cms-thumb img{ width:100%; height:100%; object-fit:cover; }
.cms-thumb.is-logo{ background:var(--white); border:1px solid var(--line); }
.cms-thumb.is-logo img{ object-fit:contain; padding:6px; }
.cms-thumb svg{ width:24px; height:24px; }
.cms-info b{ font-size:var(--fs-base); display:block; }
@media (max-width:640px){ .cms-item{ grid-template-columns:56px minmax(0,1fr); } .cms-item .badge-s{ grid-column:2; justify-self:start; } .cms-thumb{ width:56px; height:42px; } }

.btn-sm{ min-height:40px; padding:8px 16px; font-size:var(--fs-xs); }
.btn-danger{ background:transparent; border-color:var(--danger-line); color:var(--danger); }
.btn-danger:hover{ background:var(--danger-bg); }
details.adm-more > summary{ list-style:none; }
details.adm-more > summary::-webkit-details-marker{ display:none; }
details.adm-more[open] > summary{ border-color:var(--fg); }

.adm-new{ background:var(--surface); border-radius:var(--radius); padding:clamp(22px,3vw,32px); display:grid; gap:18px; }
.adm-new h2, .adm-list h2{ font-size:var(--fs-4xl); }
.adm-new-form{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,.7fr); gap:14px 16px; align-items:end; }
.adm-new-form .consent{ grid-column:1 / 3; align-self:center; }
.adm-new-form .btn{ justify-self:end; }
@media (max-width:820px){ .adm-new-form{ grid-template-columns:minmax(0,1fr); } .adm-new-form .consent{ grid-column:auto; } .adm-new-form .btn{ justify-self:start; } }

.adm-list{ display:grid; gap:18px; }
.adm-tools{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.adm-tools .search{ flex:1 1 280px; max-width:420px; }
.adm-users{ list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line); }
.adm-user{ display:grid; gap:14px; padding:20px 4px; border-bottom:1px solid var(--line); }
.adm-user.is-inactive .adm-main > div{ opacity:.6; }
.adm-main{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.adm-main b{ font-size:var(--fs-lg); }
.adm-mail{ display:block; color:var(--fg); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.adm-meta{ display:block; color:var(--muted); font-size:var(--fs-2xs); margin-top:2px; }
.adm-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
.adm-actions form{ margin:0; }
.adm-more{ display:block; }
.adm-more[open]{ flex-basis:100%; }
.adm-inline{ margin-top:10px; display:grid; gap:12px; background:var(--surface); border-radius:var(--radius-md); padding:18px; max-width:560px; }
.adm-pw{ display:flex; gap:8px; }
.adm-pw input{ flex:1; min-width:0; font-family:ui-monospace,Menlo,Consolas,monospace; }

.badge-s{ display:inline-block; font-size:var(--fs-3xs); font-weight:var(--fw-black); letter-spacing:var(--ls-wide); text-transform:uppercase; padding:5px 12px; border-radius:var(--radius-pill); white-space:nowrap; }
.badge-s.is-on{ background:var(--success-bg); color:var(--success-fg); }
.badge-s.is-off{ background:var(--surface); color:var(--muted); border:1px solid var(--line); }
.badge-s.is-wait{ background:var(--info-bg); color:var(--info-fg); }
.badge-s.is-warn{ background:var(--warn-bg); color:var(--warn-fg); }
.badge-s.is-admin{ background:var(--fg); color:var(--bg); vertical-align:2px; }


/* 11. Footer (schwarz wie der Einstieg)
   ========================================================================== */
.site-footer{ background:var(--black); color:var(--white); }
.site-footer .rule{ height:4px; }
.f-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding:68px 0 48px; }
@media (max-width:820px){ .f-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .f-grid{ grid-template-columns:minmax(0,1fr); gap:30px; } }
.f-h{ margin:0 0 18px; font-size:var(--fs-xs); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--on-dark-subtle); font-weight:var(--fw-black); line-height:1.4; }
.f-col > a{ display:block; margin-bottom:14px; color:var(--white); text-decoration:none; font-size:var(--fs-md); }
.f-col > a:hover, .site-footer address a:hover{ color:var(--on-dark-accent); text-decoration:underline; }
.f-col p, .site-footer address{ color:var(--on-dark-muted); font-size:var(--fs-md); line-height:var(--lh-body); }
.site-footer address{ margin-top:16px; }
.site-footer address a{ color:var(--white); text-decoration:none; }
.f-logo{ display:inline-block; margin-bottom:20px; }
.f-logo .logo-img{ height:60px; }
.socials{ display:flex; gap:10px; margin-top:22px; }
.social{ width:46px; height:46px; border:1px solid var(--white-a25); border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--white); transition:border-color var(--dur-fast),background var(--dur-fast); }
.social:hover{ border-color:var(--white); background:var(--white-a10); }
.social svg{ width:22px; height:22px; }
.f-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:24px 0 32px; border-top:1px solid var(--white-a14); font-size:var(--fs-xs); color:var(--on-dark-subtle); }

/* Cookie-Banner und Einstellungen */
.cc-banner{ position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:var(--z-skip); display:flex; justify-content:center; pointer-events:none; }
.cc-inner{ pointer-events:auto; width:100%; max-width:var(--container); background:var(--black); color:var(--white); border:1px solid rgba(255,255,255,.6); border-radius:var(--radius); box-shadow:var(--shadow-overlay), 0 0 0 4px rgba(255,255,255,.06);
  padding:22px 24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center; position:relative; overflow:hidden; }
.cc-inner::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--spectrum); }
.cc-copy h2{ font-size:var(--fs-xl); margin-bottom:6px; }
.cc-copy p{ color:var(--on-dark-muted); font-size:var(--fs-sm); line-height:1.5; }
.cc-copy a{ color:var(--white); }
.cc-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cc-banner .btn{ min-height:48px; padding:10px 20px; font-size:var(--fs-sm); }
.cc-banner .btn-outline{ color:var(--white); border-color:var(--white-a40); }
.cc-banner .btn-outline:hover{ border-color:var(--white); color:var(--white); }
@media (max-width:900px){
  .cc-inner{ grid-template-columns:minmax(0,1fr); }
  .cc-actions .btn{ flex:1 1 auto; }
}
@media (max-width:560px){
  .cc-banner{ left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }
  .cc-inner{ padding:18px; }
  .cc-banner .cc-actions{ display:grid; grid-template-columns:1fr 1fr; }
  .cc-banner .cc-actions [data-cc="settings"]{ grid-column:1 / -1; }
}
.cc-open .to-top{ display:none; }

.cc-dialog{ border:none; border-radius:var(--radius); padding:0; width:min(94vw,620px); max-height:90vh; background:var(--bg); color:var(--fg); box-shadow:var(--shadow-overlay); }
.cc-dialog::backdrop{ background:var(--overlay); }
.cc-form{ padding:clamp(22px,4vw,34px); display:grid; gap:16px; }
.cc-form h2{ font-size:var(--fs-5xl); }
.cc-form a{ color:var(--link); }
.cc-cat{ border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; display:grid; gap:6px; }
.cc-cat p{ color:var(--muted); font-size:var(--fs-sm); line-height:1.5; }
.cc-services{ font-size:var(--fs-3xs) !important; margin-top:4px; }
/* Anbieter je Kategorie: zugeklappt, öffnet per Klick auf "Dienste anzeigen" */
.cc-more summary{ list-style:none; display:inline-flex; align-items:center; gap:4px; min-height:32px; cursor:pointer; color:var(--link); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.cc-more summary::-webkit-details-marker{ display:none; }
.cc-more summary::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform var(--dur-fast); }
.cc-more[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
.cc-more summary:hover{ text-decoration:underline; }
.cc-form .cc-actions{ justify-content:flex-end; margin-top:4px; }
.cc-form .btn{ min-height:48px; padding:10px 20px; font-size:var(--fs-sm); }
@media (max-width:560px){ .cc-form .cc-actions{ display:grid; grid-template-columns:1fr; } }

/* Schalter */
.cc-switch{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.cc-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.cc-slider{ position:relative; flex:none; width:46px; height:26px; border-radius:var(--radius-pill); background:var(--line); transition:background var(--dur-fast); }
.cc-slider::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:var(--radius-round); background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform var(--dur-fast); }
.cc-switch input:checked + .cc-slider{ background:var(--brand); }
.cc-switch input:checked + .cc-slider::after{ transform:translateX(20px); }
.cc-switch input:disabled + .cc-slider{ opacity:.55; }
.cc-switch input:focus-visible + .cc-slider{ outline:3px solid var(--focus); outline-offset:2px; }
.cc-cat-title{ font-weight:var(--fw-black); font-size:var(--fs-md); }
.cc-cat-title small{ font-weight:var(--fw-medium); color:var(--muted); font-size:var(--fs-2xs); margin-left:6px; }

/* Footer-Link als Button */
.f-col > .f-link{ display:block; background:none; border:none; padding:0; margin-bottom:14px; color:var(--white); font:inherit; font-size:var(--fs-md); text-align:left; cursor:pointer; }
.f-col > .f-link:hover{ color:var(--on-dark-accent); text-decoration:underline; }

/* Platzhalter für externe Inhalte (z. B. Elfsight) */
.embed-ph{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; background:var(--surface); border-radius:var(--radius); padding:clamp(20px,3vw,30px); }
.embed-ph b{ font-size:var(--fs-lg); }
.embed-ph p{ color:var(--muted); font-size:var(--fs-sm); margin-top:4px; }
.embed-ph a{ color:var(--link); }
@media (max-width:700px){ .embed-ph{ grid-template-columns:minmax(0,1fr); } }

/* Hinweis "Zum Startbildschirm hinzufügen" */
.ins-modal{ position:fixed; inset:0; z-index:calc(var(--z-skip) + 10); display:flex; align-items:flex-end; justify-content:center; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  background:rgba(0,0,0,0); transition:background var(--dur); }
.ins-modal.is-open{ background:var(--overlay); }
.ins-card{ position:relative; overflow:hidden; width:100%; max-width:420px; background:var(--black); color:var(--white); border:1px solid var(--dark-line); border-radius:var(--radius);
  padding:28px 24px 22px; display:grid; gap:14px; justify-items:center; text-align:center; box-shadow:var(--shadow-overlay);
  transform:translateY(24px); opacity:0; transition:transform var(--dur),opacity var(--dur); }
.ins-modal.is-open .ins-card{ transform:none; opacity:1; }
.ins-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--spectrum); }
.ins-icon{ width:64px; height:64px; border-radius:var(--radius-md); box-shadow:0 0 0 1px var(--white-a18); }
.ins-card h2{ font-size:var(--fs-3xl); }
.ins-lead{ color:var(--on-dark-muted); font-size:var(--fs-sm); line-height:1.5; max-width:34ch; }
.ins-close{ position:absolute; top:12px; right:12px; width:var(--touch); height:var(--touch); border-radius:var(--radius-sm); border:1px solid var(--white-a18); background:transparent; color:var(--white); font-size:var(--fs-md); cursor:pointer; }
.ins-close:hover{ border-color:var(--white); }
.ins-how{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:10px; width:100%; text-align:left; }
.ins-how li{ display:flex; gap:12px; align-items:center; background:var(--white-a10); border-radius:var(--radius-md); padding:12px 14px; font-size:var(--fs-sm); line-height:1.45; }
.ins-n{ flex:none; width:28px; height:28px; border-radius:var(--radius-round); background:var(--brand); display:grid; place-items:center; font-weight:var(--fw-black); font-size:var(--fs-xs); }
.ins-sym{ width:20px; height:20px; vertical-align:-4px; margin-left:4px; color:var(--on-dark-accent); }
.ins-step{ width:100%; }
.ins-install{ width:100%; }
.ins-later{ background:none; border:none; color:var(--on-dark-subtle); font:inherit; font-size:var(--fs-sm); cursor:pointer; padding:8px; min-height:var(--touch); }
.ins-later:hover{ color:var(--white); text-decoration:underline; }
@media (min-width:769px){ .ins-modal{ align-items:center; } }

/* Teilen-Seite: Als App installieren */
.divider{ border:0; border-top:1px solid var(--line); margin:clamp(40px,6vw,64px) 0; }
.ins-box{ background:var(--black); color:var(--white); border-radius:var(--radius); padding:clamp(24px,3vw,36px); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px 24px; align-items:center; position:relative; overflow:hidden; }
.ins-box::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--spectrum); }
.ins-box img{ width:64px; height:64px; border-radius:var(--radius-md); }
.ins-box h2{ font-size:var(--fs-3xl); }
.ins-box p{ color:var(--on-dark-muted); font-size:var(--fs-sm); margin-top:4px; }
.ins-box .btn{ white-space:nowrap; }
@media (max-width:700px){
  .ins-box{ grid-template-columns:auto minmax(0,1fr); }
  .ins-box .btn{ grid-column:1 / -1; justify-self:start; }
}

/* Datenerfassung (seiten/datenerfassung.php) */
.de{ max-width:860px; display:grid; gap:28px; }
.de-step{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,4vw,40px); display:grid; gap:22px; background:var(--bg); }
.de-step:focus{ outline:none; }
.de-group{ border:0; margin:0; padding:0 0 22px; border-bottom:1px solid var(--line); display:grid; gap:12px; min-width:0; }
.de-group legend{ padding:0; margin-bottom:4px; font-weight:var(--fw-black); font-size:var(--fs-xl); }
.de-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; }
.de-grid .field{ margin:0; }
.de-full{ grid-column:1 / -1; }
@media (min-width:641px){ .de-grid:has(.de-plz){ grid-template-columns:minmax(0,1fr) minmax(0,2fr); } }
@media (max-width:640px){ .de-grid{ grid-template-columns:minmax(0,1fr); } }
.req{ color:var(--c7); }
.de-req{ font-size:var(--fs-2xs); color:var(--muted); margin-top:-8px; }
.field.bad input{ border-color:var(--c7); }
.de-field-err, .de-error{ color:var(--c7); font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.de-error{ background:color-mix(in srgb, var(--c7) 10%, transparent); padding:12px 14px; border-radius:var(--radius-sm); }
.de-title{ font-size:var(--fs-4xl); }
.de-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:4px; }
.de-actions [data-prev] svg{ transform:rotate(180deg); }
@media (max-width:480px){ .de-actions{ flex-direction:column-reverse; align-items:stretch; } .de-actions > span:empty{ display:none; } }

/* Logo-Upload */
.de-drop{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; padding:24px; border:2px dashed var(--line-strong, var(--line)); border-radius:var(--radius-md); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast),background var(--dur-fast); }
.de-drop:hover, .de-drop.over{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.de-drop:focus-within{ outline:3px solid var(--focus); outline-offset:2px; }
.de-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.de-drop-txt{ display:grid; gap:2px; }
.de-drop-txt span{ color:var(--muted); font-size:var(--fs-sm); }
@media (max-width:560px){ .de-drop{ grid-template-columns:auto minmax(0,1fr); } .de-drop .btn{ grid-column:1 / -1; } }
.de-file{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:var(--radius-md); }
.de-thumb{ width:72px; height:72px; border-radius:var(--radius-sm); background:var(--surface); display:grid; place-items:center; overflow:hidden; font-weight:var(--fw-black); color:var(--muted); font-size:var(--fs-sm); }
.de-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.de-file-txt{ display:grid; gap:2px; min-width:0; }
.de-file-txt b{ overflow-wrap:anywhere; }
.de-file-txt span{ color:var(--muted); font-size:var(--fs-sm); }
@media (max-width:480px){ .de-file{ grid-template-columns:auto minmax(0,1fr); } .de-file .btn{ grid-column:1 / -1; } }

/* Übersicht */
.de-summary{ display:grid; gap:14px; }
.de-sum{ border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; }
.de-sum-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.de-sum h3{ font-size:var(--fs-md); }
.de-edit{ background:none; border:0; padding:6px 0; min-height:var(--touch); color:var(--link); font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-bold); cursor:pointer; }
.de-edit:hover{ text-decoration:underline; }
.de-sum dl{ margin:0; display:grid; grid-template-columns:minmax(110px,auto) minmax(0,1fr); gap:6px 18px; font-size:var(--fs-sm); }
.de-sum dt{ color:var(--muted); }
.de-sum dd{ margin:0; font-weight:var(--fw-bold); overflow-wrap:anywhere; }
@media (max-width:480px){ .de-sum dl{ grid-template-columns:minmax(0,1fr); gap:0; } .de-sum dd{ margin-bottom:8px; } }
.de-confirm{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border:2px solid var(--line); border-radius:var(--radius-md); font-weight:var(--fw-bold); cursor:pointer; }
.de-confirm input{ width:22px; height:22px; flex:none; margin:1px 0 0; accent-color:var(--brand); }
.de-confirm.bad{ border-color:var(--c7); }
.de-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Fertig */
.de-done{ justify-items:center; text-align:center; padding-block:clamp(36px,6vw,64px); }
.de-done .ico{ width:64px; height:64px; }
.de-done .ico svg{ width:30px; height:30px; }

/* Zurück nach oben */
.to-top{ position:fixed; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:var(--z-toast);
  width:52px; height:52px; border-radius:var(--radius-round); border:1px solid var(--white-a18); background:var(--black); color:var(--white);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-dark);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity var(--dur),transform var(--dur),background var(--dur-fast),bottom var(--dur); }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--brand); border-color:var(--brand); }
.to-top svg{ width:22px; height:22px; }
@media (max-width:600px){ .to-top{ right:16px; width:48px; height:48px; } }

.toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%,12px); width:max-content; max-width:min(calc(100vw - 32px), 420px);
  background:rgba(11,18,32,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--white); padding:11px 16px; border-radius:var(--radius-sm);
  font-weight:var(--fw-medium); font-size:var(--fs-xs); line-height:1.45; text-align:center; box-shadow:0 8px 24px -12px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity var(--dur),transform var(--dur); z-index:var(--z-toast); }
.toast.show{ opacity:1; transform:translate(-50%,0); }


/* 12. Hilfsklassen
   ========================================================================== */
.bg-brand{ background:var(--brand); }
.bg-c1{ background:var(--c1); } .bg-c2{ background:var(--c2); } .bg-c3{ background:var(--c3); } .bg-c4{ background:var(--c4); }
.bg-c5{ background:var(--c5); color:var(--on-accent); } .bg-c6{ background:var(--c6); color:var(--on-accent); } .bg-c7{ background:var(--c7); }
.bg-wa{ background:var(--whatsapp); }
.muted{ color:var(--muted); }
.demo-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.reviews-widget{ min-height:240px; }
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn[aria-busy="true"]{ cursor:progress; opacity:.7; }
.stack-22{ display:grid; gap:22px; }
.mt-10{ margin-top:10px; } .mt-26{ margin-top:26px; } .mt-34{ margin-top:34px; }
.mb-section{ margin-bottom:var(--section-end); }

/* Grid-Kinder dürfen schrumpfen (verhindert horizontales Scrollen) */
.f-grid > *, .trustbar ul > *, .two > *, .svc > *, .cta > *, .inq > *, .tres > *{ min-width:0; }

/* Glocke für PUSH-Benachrichtigungen (Header) */
@media (max-width:360px){
  .bar{ gap:10px; padding:0 10px 0 16px; }
  .bar-actions{ gap:6px; }
  .bar .icon-btn{ width:40px; height:40px; }
  .bar .logo-img{ height:28px; }
}
.push-bell.is-on{ background:var(--brand); border-color:var(--brand); color:var(--white); }
.push-bell[disabled]{ opacity:.6; cursor:progress; }

/* Verwaltung: PUSH */
.wp-setup ol{ margin:8px 0; padding-left:20px; display:grid; gap:4px; }
.wp-setup li.done{ color:var(--success-fg); }
.wp-setup code{ font-size:var(--fs-xs); }
.wp-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:900px){ .wp-grid{ grid-template-columns:minmax(0,1fr); } }
.wp-form{ display:grid; gap:16px; }
.wp-form .btn{ justify-self:start; }
.wp-send h2, .wp-subs h2, .wp-log + h2{ margin-bottom:14px; }
.wp-subs h2{ display:flex; align-items:center; gap:10px; }
.wp-list, .wp-log{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.wp-list li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:var(--radius-md); }
.ico-s{ width:36px; height:36px; border-radius:var(--radius-sm); background:var(--surface); display:grid; place-items:center; color:var(--muted); }
.ico-s svg{ width:18px; height:18px; }
.wp-dev{ display:grid; min-width:0; }
.wp-dev small{ color:var(--muted); font-size:var(--fs-2xs); }
.wp-log li{ display:grid; gap:2px; padding:12px 0; border-bottom:1px solid var(--line); }
.wp-log li:last-child{ border-bottom:0; }
.wp-when{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-bold); }
.wp-text{ font-weight:var(--fw-bold); }
.hint .is-full, .hint.is-full{ color:var(--c7); }

/* Kundenbereich: Änderungswünsche */
.aend-files{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:560px){ .aend-files{ grid-template-columns:minmax(0,1fr); } }
.aend-file{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:12px; border:2px dashed var(--line); border-radius:var(--radius-md); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast); }
.aend-file:hover, .aend-file:focus-within{ border-color:var(--brand); }
.aend-file.has-file{ border-style:solid; border-color:var(--brand); }
.aend-file.bad{ border-color:var(--c7); }
.aend-file.bad small{ color:var(--c7); }
.aend-file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.aend-thumb{ width:48px; height:48px; border-radius:var(--radius-sm); background:var(--bg); display:grid; place-items:center; overflow:hidden; color:var(--muted); }
.aend-thumb svg{ width:22px; height:22px; }
.aend-thumb img{ width:100%; height:100%; object-fit:cover; }
.aend-file-txt{ display:grid; min-width:0; }
.aend-file-txt b{ font-size:var(--fs-sm); }
.aend-file-txt small{ color:var(--muted); font-size:var(--fs-2xs); overflow-wrap:anywhere; }
/* Hinweis-Meldung über der Leiste "Funktionen vorgemerkt" anzeigen, statt sie zu überdecken */
body:has(.funcbar.show) .toast{ bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
/* Während eine Hinweis-Meldung sichtbar ist, den "Nach oben"-Button kurz ausblenden */
body:has(.toast.show) .to-top{ opacity:0; pointer-events:none; }