/* ═══════════════════════════════════════════════════════════════════════════
   Kundenchat24 - gemeinsames Aussehen aller Unterseiten.

   Die Startseite traegt ihr Aussehen weiter selbst im Kopf der Datei; sie ist
   der Massstab, hier steht dieselbe Sprache fuer alle uebrigen Seiten.

   Wird NACH dem eigenen <style> der Seite geladen, damit es gewinnt. Die
   Seiten arbeiten durchgaengig mit CSS-Variablen - deshalb faerbt schon das
   Neusetzen der Variablen die halbe Seite um, ohne ihr Markup anzufassen.

   Der Bot (handwerk.html) laedt diese Datei NICHT und darf sie nie laden:
   auf seinen Adressen stehen die verschickten Werbebriefe.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ─── Farben und Masse ──────────────────────────────────────────────────────
   Zwei Generationen von Namen: die aeltere Seite (ablauf) nutzt --cream/--ink2,
   die neueren --bg/--ink-2. Beide zeigen ab hier auf dieselben Werte. */
:root{
  --black:#0E0D0B; --dark:#161512; --cream:#F3F1EB; --cream2:#E9E6DF; --white:#fff;
  --ink:#1A1814;  --ink2:#68635C;  --ink3:#A09B93;
  --ink-2:#68635C; --ink-3:#A09B93; --ink-4:#A09B93;
  --bg:#F3F1EB;   --surface:#fff;
  --border:#E0DDD5; --border-2:#C4BFB5; --border2:#C4BFB5;
  --brand:#1D4ED8; --brand-h:#1B44B8; --brand-s:#EEF3FE;
  --accent:#1D4ED8; --accent-soft:#EEF3FE;
  --green:#0F7B4F; --green-soft:#E6F4EC; --red:#B4322A; --red-soft:#FBECEA;

  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --font:"Manrope","Helvetica Neue",Arial,sans-serif;

  --r:12px; --r-lg:20px; --r-xl:34px;
  /* Ecken absichtlich ungleich: zwei gegenueberliegende weit, die anderen
     knapp. Nebeneinander stehende Karten spiegeln sich. */
  --r-a:26px 9px 26px 9px;   --r-b:9px 26px 9px 26px;
  --r-s-a:15px 6px 15px 6px; --r-s-b:6px 15px 6px 15px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html,body{font-family:var(--sans);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased}

/* ─── Schrift ───────────────────────────────────────────────────────────────
   Eine Skala fuer alles. Ueberschriften nie fetter als 600 - sonst wirken sie
   schwerer als die H1 der Startseite, der sie untergeordnet sind. */
h1,h2,h3,h4,h5,.hero-title,.faq-title,.faq-q,summary{
  font-weight:600;letter-spacing:-.02em;line-height:1.2}
h1,.hero-title{font-size:clamp(26px,3.05vw,39px);line-height:1.18}
h2{font-size:clamp(21px,2.3vw,29px)}
h3{font-size:19px}
h4,h5{font-size:15.5px;letter-spacing:-.01em}
p,li,dd,dt{font-weight:400}
b,strong{font-weight:600}

/* Die Wortmarke bleibt fett - sie ist ein Name, keine Ueberschrift. */
.logo,.nav-logo{font-weight:700;letter-spacing:-.02em}

/* ─── Was auf dieser Seite nicht vorkommt ───────────────────────────────────
   Kleine Grossbuchstaben-Labels ueber Ueberschriften. Sicherstes
   Erkennungsmerkmal einer generierten Seite; die Ueberschrift darunter sagt
   ohnehin dasselbe. */
.eyebrow,.hero-eyebrow,.sec-tag,.kicker{display:none}

/* Haarlinien als Trenner. Abstand trennt genauso gut und sieht nicht nach
   Baukasten aus. */
.topnav,.nav{border-bottom:0}
.footer-grid,.foot-grid{border-bottom:0}

/* ─── Knoepfe ───────────────────────────────────────────────────────────────
   Auf hellem Grund blau, Nebenaktion als Umriss. Pillenform und Schwarz
   kommen nicht mehr vor. */
.btn,.btn-primary,.btn-ghost,.btn-solid,.form-btn{
  border-radius:var(--r);font-family:var(--sans);font-weight:600;font-size:15px;
  letter-spacing:0;transition:background .2s,border-color .2s,color .2s}
.btn-primary,.btn-solid,.form-btn{background:var(--brand);color:#fff;border:1.5px solid transparent}
.btn-primary:hover,.btn-solid:hover,.form-btn:hover{background:var(--brand-h);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border-2)}
.btn-ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}

/* ─── Flaechen ──────────────────────────────────────────────────────────────
   Perfekt gleichmaessige Rundungen sehen nach Vorlage aus. */
.card,.callout,.price-box,.faq-item,.pilot,.section,.plan,.note,.info-grid>div,.mini{
  border-radius:var(--r-s-a)}
.card:nth-child(even),.faq-item:nth-child(even),.info-grid>div:nth-child(even),
.section:nth-child(even),.plan:nth-child(even){border-radius:var(--r-s-b)}
/* Das SVG IST die Kachel - wie im Kopf der Startseite. Vorher steckte ein
   16px-Symbol in einem 30px-Quadrat, die Marke war nicht zu erkennen. */
.logo-sq,.logo-mark,.nav-logo-sq{width:32px;height:32px;background:transparent;border-radius:0;
  padding:0;flex:none;display:block;overflow:visible}
.logo-sq svg,.logo-mark svg,.nav-logo-sq svg{width:32px;height:32px;display:block}

/* ─── Verweise ──────────────────────────────────────────────────────────────
   Auf den Rechtstexten stehen viele Verweise im Fliesstext. Blau und fett
   waere zu laut fuer eine Seite, die man ohnehin durchliest. */
.section a,.callout a,.card a,p a{color:var(--ink);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.section a:hover,.callout a:hover,.card a:hover,p a:hover{color:var(--brand)}
.btn a,a.btn,a.btn-primary,a.btn-ghost,a.btn-solid{text-decoration:none}

@media(prefers-reduced-motion:reduce){
  .btn,.btn-primary,.btn-ghost,.btn-solid,.form-btn{transition:none}
}

/* ─── Aufzaehlungen und Fragen ──────────────────────────────────────────────
   Die Schrittnummern standen in blauen Grossbuchstaben. Das ist dieselbe
   Sorte Label wie die entfernten Kicker, nur an anderer Stelle. */
.step b,.step-t{color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em}
.step-n{background:var(--brand-s);color:var(--brand);font-weight:600;border-radius:9px}

/* Aufklappbare Fragen wie auf der Startseite: kein Rahmen, ein Winkel statt
   des Standard-Dreiecks. */
details{border:0;border-radius:var(--r-s-a)}
details:nth-of-type(even){border-radius:var(--r-s-b)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:500;font-size:15.5px;list-style:none;min-height:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex-shrink:0;width:9px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s var(--ease)}
details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
@media(prefers-reduced-motion:reduce){summary::after{transition:none}}

/* ─── Fuss ──────────────────────────────────────────────────────────────────
   Grossbuchstaben-Ueberschriften im Fuss sind dieselbe Sorte Label wie die
   Kicker weiter oben. Auf der Startseite stehen sie normal geschrieben. */
.foot h4,.footer-grid h4,.foot-grid h4{text-transform:none;font-size:14px;
  font-weight:600;letter-spacing:-.01em}

/* Hinweiskaesten: gefaerbte Flaeche statt Rahmen. Ein Rahmen um einen
   ohnehin farbigen Kasten sagt dasselbe zweimal. */
.callout,.note{border:0}