/* ============================================================
   Vera Martel – Webseiten für Gastronomie, Handwerk und kleine
   Unternehmen. Style "Klarheit".
   Mobile first. Keine externen Dateien, keine Tracker.
   ============================================================ */

/* --- Schrift -------------------------------------------------
   Aktuell läuft die Seite mit der System-Schrift des Geräts
   (macOS/iOS: San Francisco, Windows: Segoe UI). Die sieht Inter
   sehr ähnlich und kostet null Ladezeit.
   Sobald die Datei bilder-/fonts-Ordner enthält, diesen Block
   einkommentieren – dann sieht die Seite auf JEDEM Gerät gleich aus:

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
------------------------------------------------------------- */

:root{
  --bg:#FFFFFF;
  --soft:#F7F9FA;
  --ink:#12161C;
  --muted:#4B545E;
  --muted-2:#6E7781;
  --line:#ECEFF1;
  --line-2:#E3E7EA;
  /* Farbe A, Farbe B und der Verlauf dazwischen.
     Die vier Paletten stehen ganz unten unter [data-farbe].
     Umstellen: im <html>-Tag data-farbe="rose-flieder" usw. setzen. */
  --acc:#7B3FE4;        /* Farbe A – Violett */
  --acc-dark:#5F2DBF;   /* A, dunkel – für Links und kleine Schrift */
  --acc-soft:#F1E8FE;   /* A, sehr hell – für Flächen */
  --acc-2:#F39BC9;      /* Farbe B – Pink */
  --acc-2-btn:#C43C8E;  /* B, kräftiger – Ende des Verlaufs, weiße Schrift bleibt lesbar */
  --acc-2-dark:#9E2C70; /* B, dunkel – für kleine Schrift */
  --acc-2-soft:#FCE9F3; /* B, sehr hell */
  --verlauf:linear-gradient(120deg,var(--acc) 0%,var(--acc-2-btn) 100%);
  --verlauf-hell:linear-gradient(120deg,var(--acc-soft) 0%,var(--acc-2-soft) 100%);
  /* Klebezettel und die Farbfläche hinter dem Preis.
     Jede Palette unten bringt ihre eigenen Werte mit. */
  --zettel-1:#E4D5FB;
  --zettel-2:#FBDBEC;
  --zettel-3:#F8EDC6;
  --flaeche:#EDE0FD;

  /* Schrift für kleine Beschriftungen. Liegt auf jedem Gerät schon vor,
     es wird nichts nachgeladen. */
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;

  --wrap:1080px;
  --r:10px;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--acc-dark)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px}

/* --- Typografie --- */
h1,h2,h3{letter-spacing:-.03em;line-height:1.12;margin:0 0 14px;font-weight:600}
h1{font-size:34px;letter-spacing:-.035em}
h2{font-size:27px}
h3{font-size:19px;letter-spacing:-.015em}
p{margin:0 0 16px}
.lead{font-size:18px;line-height:1.65;color:var(--muted)}
.eyebrow{font-size:14px;color:var(--muted-2);margin:0 0 10px}
.small{font-size:14.5px;color:var(--muted-2)}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:999px;
  font-size:16px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  font-family:inherit;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--acc);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--acc-dark)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover,.btn-ghost:focus{border-color:var(--acc);color:var(--acc-dark)}
.btn-block{width:100%}
.btn svg{flex:0 0 auto}

/* --- Kopf --- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px}
.logo{font-weight:600;font-size:16.5px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.logo span{display:block;font-size:12px;font-weight:400;color:var(--muted-2);letter-spacing:0}
.nav-toggle{
  display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line-2);
  border-radius:8px;padding:9px 13px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;
}
.site-nav{display:none}
.site-nav.is-open{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 18px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.site-nav a{display:block;padding:11px 0;color:var(--muted);text-decoration:none;font-size:16px;border-bottom:1px solid var(--line)}
.site-nav a:hover{color:var(--acc-dark)}
.header-cta{display:none}

/* --- Abschnitte --- */
section{padding:54px 0}
.section-soft{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* --- Hero --- */
.hero{padding-top:44px;padding-bottom:50px}
.hero h1{margin-bottom:18px}
.hero .lead{max-width:56ch;margin-bottom:26px}
.hero-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.hero-note{font-size:14.5px;color:var(--muted-2);margin:0}
.hero-facts{list-style:none;margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line);display:grid;gap:14px}
.hero-facts li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--muted)}
.hero-facts b{color:var(--ink);font-weight:600}
.tick{flex:0 0 auto;color:var(--acc);font-weight:700;line-height:1.5}

/* --- Karten-Raster --- */
.grid{display:grid;gap:18px}
.card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:24px}
.card p:last-child{margin-bottom:0}
.card .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--acc-soft);color:var(--acc-dark);
  font-size:13px;font-weight:600;margin-bottom:14px;
}
.card p{color:var(--muted);font-size:15.5px;margin-bottom:0}

/* --- Paket --- */
.price-card{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:28px 24px}
.price-label{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--acc-dark);margin:0 0 8px}
.price{font-size:46px;font-weight:600;letter-spacing:-.035em;line-height:1;margin:0 0 6px}
.price-note{font-size:14.5px;color:var(--muted-2);margin:0 0 22px}
.price-list{list-style:none;margin:0 0 24px;padding:0}
.price-list li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.price-list li:last-child{border-bottom:0}
.price-list b{color:var(--ink);font-weight:600}
.talks{list-style:none;counter-reset:t;margin:0;padding:0}
.talks li{counter-increment:t;position:relative;padding:0 0 16px 40px;font-size:15.5px;color:var(--muted)}
.talks li::before{
  content:counter(t);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--acc-soft);color:var(--acc-dark);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
}
.addons{display:grid;gap:18px;margin-top:26px}
.addon{border:1px solid var(--line-2);border-radius:var(--r);padding:22px;background:#fff}
.addon .amount{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.addon p{color:var(--muted);font-size:15.5px;margin:0}

/* --- Referenz --- */
.ref-figure{margin:0 0 22px;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#fff}
.ref-figure img{width:100%}
.ref-placeholder{
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,#F2F5F6 0 10px,#EDF1F2 10px 20px);
  color:var(--muted-2);font-size:14px;padding:24px;
}
.ref-figure figcaption{padding:14px 18px;font-size:14px;color:var(--muted-2);border-top:1px solid var(--line)}

/* --- Fragen --- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;
  font-weight:600;font-size:17px;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:22px;font-weight:400;color:var(--acc)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--muted);font-size:15.5px;max-width:64ch}

/* --- Kontakt & Formular --- */
.contact-grid{display:grid;gap:30px}
.contact-box{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.field .hint{display:block;font-weight:400;font-size:14px;color:var(--muted-2);margin-top:2px}
.field input,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line-2);border-radius:8px;
  font:inherit;font-size:16px;color:var(--ink);background:#fff;
}
.field input:focus,.field textarea:focus{border-color:var(--acc);outline:2px solid var(--acc-soft);outline-offset:0}
.field textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted);margin-bottom:20px}
.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.form-note{font-size:14px;color:var(--muted-2);margin:14px 0 0}
.form-error{display:none;background:#FDECEA;border:1px solid #F5C6C0;color:#8A2418;padding:12px 14px;border-radius:8px;font-size:15px;margin-bottom:18px}
.form-error.is-visible{display:block}

/* --- Fuß --- */
.site-footer{border-top:1px solid var(--line);padding:32px 0 40px;color:var(--muted-2);font-size:14.5px}
.site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:0 0 14px;padding:0}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--acc-dark);text-decoration:underline}

/* --- Rechtstexte (Impressum, Datenschutz) --- */
.legal{padding:40px 0 60px}
.legal .wrap{max-width:720px}
.legal h1{margin-bottom:26px}
.legal h2{font-size:21px;margin:34px 0 10px}
.legal p,.legal li{color:var(--muted);font-size:16px}
.legal ul{padding-left:20px}
.placeholder-box{
  background:var(--acc-soft);border:1px dashed var(--acc);border-radius:var(--r);
  padding:18px 20px;margin:0 0 28px;color:var(--acc-dark);font-size:15px;
}
.placeholder-box p:last-child{margin-bottom:0}

/* ============================================================
   Ab Tablet
   ============================================================ */
@media (min-width:760px){
  body{font-size:17.5px}
  h1{font-size:52px}
  h2{font-size:34px}
  h3{font-size:20px}
  .lead{font-size:19.5px}
  section{padding:76px 0}
  .hero{padding-top:70px;padding-bottom:76px}
  .hero h1{max-width:17ch}
  .hero-actions{flex-direction:row;flex-wrap:wrap;gap:12px}
  .hero-facts{grid-template-columns:repeat(3,1fr);gap:22px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr);gap:34px}
  .addons{grid-template-columns:repeat(2,1fr)}
  .price-card{padding:34px}
  .price{font-size:54px}
  .contact-grid{grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
  .contact-box{padding:30px}
  .nav-toggle{display:none}
  .site-nav{display:block}
  .site-nav.is-open{position:static;border:0;padding:0}
  .site-nav ul{flex-direction:row;gap:26px}
  .site-nav a{border:0;padding:0;font-size:15.5px}
  .header-cta{display:inline-flex;padding:10px 18px;font-size:14.5px}
  .site-footer ul{gap:26px}
}


/* ============================================================
   FARBVERLAUF
   ============================================================ */

/* Überschriften-Teil im Verlauf */
.grad{
  background:var(--verlauf);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Knopf im Verlauf */
.btn-primary{background:var(--verlauf);color:#fff;border:0;font-size:19px;font-weight:700}
.btn-primary:hover,.btn-primary:focus{background:var(--verlauf);filter:brightness(.92)}

/* Die Zeile über der Überschrift wird zur Pille */
.eyebrow{
  display:inline-block;max-width:100%;
  padding:7px 15px;border-radius:22px;
  background:var(--verlauf-hell);
  border:1px solid var(--acc-soft);
  color:var(--acc-dark);
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.5;margin-bottom:18px;
}

/* Zwei weiche Farbwolken im Hero */
.hero{position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero::before{top:-190px;left:-120px;width:460px;height:460px;
  background:radial-gradient(circle,var(--acc) 0%,transparent 70%);opacity:.13}
.hero::after{bottom:-190px;right:-110px;width:420px;height:420px;
  background:radial-gradient(circle,var(--acc-2) 0%,transparent 70%);opacity:.13}
.hero > .wrap{position:relative;z-index:1}

/* Die drei Nummern laufen von Farbe A nach Farbe B */
.grid-3 article:nth-child(2) .num{background:var(--verlauf-hell);color:var(--acc-dark)}
.grid-3 article:nth-child(3) .num{background:var(--acc-2-soft);color:var(--acc-2-dark)}

/* Preis */
.price{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.price-card{position:relative;overflow:hidden}
.price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--verlauf)}
.contact-box{position:relative;overflow:hidden}
.contact-box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--verlauf)}

/* Die drei Gespräche ebenso */
.talks li:nth-child(2)::before{background:var(--verlauf-hell);color:var(--acc-dark)}
.talks li:nth-child(3)::before{background:var(--acc-2-soft);color:var(--acc-2-dark)}

/* Haken: in der Kontaktliste in Farbe B, damit nicht alles einfarbig wirkt */
.contact-grid .price-list .tick{color:var(--acc-2-btn)}

/* ============================================================
   DIE VIER PALETTEN
   ============================================================ */

/* 1 – Violett und Pink: Lavendelflächen wie bei FigJam (Voreinstellung) */
[data-farbe="violett"]{
  --acc:#7B3FE4;--acc-dark:#5F2DBF;--acc-soft:#F1E8FE;
  --acc-2:#F39BC9;--acc-2-btn:#C43C8E;--acc-2-dark:#9E2C70;--acc-2-soft:#FCE9F3;
  --zettel-1:#E4D5FB;--zettel-2:#FBDBEC;--zettel-3:#F8EDC6;--flaeche:#EDE0FD;

  --verlauf:linear-gradient(120deg,var(--acc) 0%,var(--acc-2-btn) 100%);
  --verlauf-hell:linear-gradient(120deg,var(--acc-soft) 0%,var(--acc-2-soft) 100%);
}

/* 2 – Rosé und Pfirsich: warm und weich */
[data-farbe="rose-pfirsich"]{
  --acc:#B94E72;--acc-dark:#9A3D5D;--acc-soft:#FCEDF2;
  --acc-2:#F6B99A;--acc-2-btn:#D2704A;--acc-2-dark:#A3502F;--acc-2-soft:#FEF1EA;

  --verlauf:linear-gradient(120deg,var(--acc) 0%,var(--acc-2-btn) 100%);
  --verlauf-hell:linear-gradient(120deg,var(--acc-soft) 0%,var(--acc-2-soft) 100%);

  --zettel-1:#FBDDE7;--zettel-2:#FBE3D3;--zettel-3:#F6ECCB;--flaeche:#FBE5EC;
}

/* 3 – Rosé und Flieder: kühler, ruhiger */
[data-farbe="rose-flieder"]{
  --acc:#B34C7E;--acc-dark:#933864;--acc-soft:#FCECF3;
  --acc-2:#B49BE0;--acc-2-btn:#7C5EA8;--acc-2-dark:#654B8C;--acc-2-soft:#F3EEFA;

  --verlauf:linear-gradient(120deg,var(--acc) 0%,var(--acc-2-btn) 100%);
  --verlauf-hell:linear-gradient(120deg,var(--acc-soft) 0%,var(--acc-2-soft) 100%);

  --zettel-1:#FBDDE9;--zettel-2:#E7DCF8;--zettel-3:#F6ECCB;--flaeche:#FADFEC;
}

/* 4 – Altrosa und Taubenblau: sehr gedeckt */
[data-farbe="altrosa-blau"]{
  --acc:#B05A76;--acc-dark:#8F4460;--acc-soft:#FAECF0;
  --acc-2:#9BB3CC;--acc-2-btn:#4E6E91;--acc-2-dark:#3E5975;--acc-2-soft:#EDF2F7;

  --verlauf:linear-gradient(120deg,var(--acc) 0%,var(--acc-2-btn) 100%);
  --verlauf-hell:linear-gradient(120deg,var(--acc-soft) 0%,var(--acc-2-soft) 100%);

  --zettel-1:#F6DEE5;--zettel-2:#DCE6F0;--zettel-3:#F2ECD9;--flaeche:#F4E2E8;
}

/* 5 – Bucht: Petrol und Lachs (ältere Fassung, bleibt verfügbar) */
[data-farbe="bucht"]{
  --acc:#0F766E;--acc-dark:#0B5E57;--acc-soft:#ECF6F4;
  --acc-2:#FA8072;--acc-2-btn:#D4604A;--acc-2-dark:#A6402C;--acc-2-soft:#FFF0ED;

  --verlauf:linear-gradient(120deg,var(--acc) 0%,var(--acc-2-btn) 100%);
  --verlauf-hell:linear-gradient(120deg,var(--acc-soft) 0%,var(--acc-2-soft) 100%);

  --zettel-1:#D7EDE9;--zettel-2:#FFE0D8;--zettel-3:#F6ECCB;--flaeche:#DCEFEC;
}

/* Der kleine Knopf oben im Kopf bleibt einfarbig Petrol:
   dort ist die Schrift zu klein, als dass weiße Schrift auf dem hellen
   Ende des Verlaufs noch gut lesbar wäre. */
.header-cta.btn-primary{background:var(--acc);font-size:14.5px;font-weight:600}
.header-cta.btn-primary:hover,.header-cta.btn-primary:focus{background:var(--acc-dark);filter:none}


/* ============================================================
   KLEBEZETTEL, FARBFLÄCHE UND MONOSPACE
   ============================================================ */

/* Kleine Beschriftungen in Monospace – gibt der Seite Charakter,
   ohne den Fließtext schwerer lesbar zu machen. */
.eyebrow,.price-label,.price-note,.card .num,.talks li::before,.ref-figure figcaption{
  font-family:var(--mono);
}
.eyebrow{letter-spacing:.08em;font-size:12px}
.price-label{letter-spacing:.1em}
.price-note{font-size:13px;letter-spacing:.02em}

/* Die drei Leistungen werden zu Klebezetteln */
#leistungen .grid-3{gap:22px}
#leistungen .card{
  border:0;border-radius:3px;padding:26px 24px;
  box-shadow:0 10px 22px rgba(60,35,50,.13);
}
#leistungen .card:nth-child(1){background:var(--zettel-1);transform:rotate(-1.2deg)}
#leistungen .card:nth-child(2){background:var(--zettel-2);transform:rotate(.8deg)}
#leistungen .card:nth-child(3){background:var(--zettel-3);transform:rotate(-.5deg)}
#leistungen .card h3{color:var(--ink)}
#leistungen .card p{color:#3C3A38}
#leistungen .card .num,
#leistungen .grid-3 article:nth-child(2) .num,
#leistungen .grid-3 article:nth-child(3) .num{
  background:rgba(255,255,255,.72);color:var(--ink);
  border-radius:4px;width:auto;height:auto;padding:4px 9px;font-size:12px;letter-spacing:.08em;
}

/* Flächige Farbe hinter dem Preis statt blassem Grau */
#paket.section-soft{background:var(--flaeche);border-top:0;border-bottom:0}
#paket .addon{border-color:rgba(0,0,0,.08)}

@media (min-width:760px){
  #leistungen .card{padding:30px 26px}
}

/* Auf der Farbfläche sind die hellen Tönungen nicht mehr zu sehen –
   die Nummern der drei Gespräche bekommen dort Weiß. */
#paket .talks li::before,
#paket .talks li:nth-child(2)::before,
#paket .talks li:nth-child(3)::before{background:#fff}


/* ============================================================
   HERO-GRAFIK UND WHATSAPP-KNOPF
   ============================================================ */

/* Text links, Kachel-Collage rechts. Auf dem Handy steht die Grafik
   unter den Knöpfen, damit die Anfrage weit oben bleibt. */
.hero .wrap{display:grid;gap:30px}
.hero-text>*:last-child{margin-bottom:0}
.hero-art svg{display:block;width:100%;max-width:330px;height:auto;margin:0 auto}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:1.15fr .85fr;column-gap:44px;align-items:center}
  .hero-facts{grid-column:1 / -1}
  .hero-art svg{max-width:430px;margin:0 0 0 auto}
}

/* WhatsApp-Knopf in der bekannten Farbe. Dunkle Schrift statt weißer:
   Weiß auf diesem Grün wäre mit 1,9:1 kaum lesbar, Dunkel kommt auf 8,9:1. */
.btn-whatsapp{
  background:#25D366;color:#07301C;border:0;
  font-size:19px;font-weight:700;gap:10px;
}
.btn-whatsapp:hover,.btn-whatsapp:focus{background:#1DBE59}
.btn-whatsapp .wa-icon{flex:0 0 auto}
.header-cta.btn-whatsapp{font-size:14.5px;font-weight:600;padding:10px 18px;gap:8px}
.header-cta.btn-whatsapp .wa-icon{width:16px;height:16px}


/* Im Kontaktbereich steht der Text links mittig neben dem Formular,
   statt oben zu kleben. */
@media (min-width:760px){
  .contact-grid{align-items:center}
}


/* Symbole auf den drei Kästchen „Für wen ich baue" –
   gleiche Handschrift wie die Kachel-Collage im Hero. */
.icon-tile{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:3px;margin-bottom:16px;
  box-shadow:0 6px 14px rgba(60,35,90,.14);
}
.icon-tile svg{width:38px;height:38px;display:block}
#fuer-wen .grid-3 article:nth-child(3n+1) .icon-tile{background:var(--zettel-1);transform:rotate(-4deg)}
#fuer-wen .grid-3 article:nth-child(3n+2) .icon-tile{background:var(--zettel-2);transform:rotate(3deg)}
#fuer-wen .grid-3 article:nth-child(3n)   .icon-tile{background:var(--zettel-3);transform:rotate(-2deg)}


/* ============================================================
   KOSTENLOSES ERSTGESPRÄCH
   ============================================================ */
#erstgespraech{background:var(--flaeche)}
.call-grid{display:grid;gap:26px}
.call-grid h2{margin-top:4px}
.call-grid .lead{max-width:48ch}
.call-card{background:#fff;border-radius:14px;padding:26px 24px;position:relative;overflow:hidden}
.call-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--verlauf)}
.hours{margin:14px 0 18px;padding:0}
.hours>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.hours>div:last-child{border-bottom:0}
.hours dt{font-weight:600;font-size:16px}
.hours dd{margin:0;font-family:var(--mono);font-size:15px;color:var(--acc-dark);white-space:nowrap}
@media (min-width:860px){
  .call-grid{grid-template-columns:1.1fr .9fr;column-gap:46px;align-items:center}
  .call-card{padding:30px}
}

/* Die Kalenderkachel steht auf der Farbfläche, deshalb weiß. */
#erstgespraech .icon-tile{background:#fff;transform:rotate(-3deg)}


/* Zwei Wege zum Termin nebeneinander */
.call-actions{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.call-actions .btn-primary .btn-icon{flex:0 0 auto}
@media (min-width:560px){
  .call-actions{flex-direction:row;flex-wrap:wrap}
  .call-actions .btn{width:auto}
}


/* ============================================================
   REFERENZ: Screenshots des Küchen-Panels
   ============================================================ */
.shots{display:grid;gap:26px;margin-top:34px}
.shots figure{margin:0}
.shots img{
  width:100%;height:auto;display:block;
  border-radius:16px;border:1px solid var(--line-2);
  box-shadow:0 14px 34px rgba(30,20,50,.16);
}
.shots figcaption{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.shots figcaption b{color:var(--ink);font-weight:600}
@media (min-width:760px){
  .shots{grid-template-columns:repeat(3,1fr);gap:30px}
}

/* Die drei Eckdaten unter dem Hero stehen in ihren Spalten mittig.
   Der Haken läuft dabei im Textfluss mit, damit er direkt vor der ersten
   Zeile sitzt und nicht am linken Rand hängen bleibt.
   Auf dem Handy bleibt alles linksbündig – mehrzeiliger zentrierter Text
   liest sich auf schmalen Bildschirmen schlechter. */
@media (min-width:760px){
  .hero-facts li{display:block;text-align:center}
  .hero-facts .tick{display:inline;margin-right:7px}
}