/* ============================================================
   SCHRIFTEN — vollständig lokal, keine Verbindung zu Google
   Genutzt werden Schriften, die auf allen Systemen vorinstalliert sind.
   ============================================================ */
:root{
  --font-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype",
                Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}


:root{
  --bg:#121309;
  --bg-raised:#181A10;
  --ink:#F4F1E6;
  --ink-soft: rgba(244,241,230,0.62);
  --ink-faint: rgba(244,241,230,0.38);
  --brass:#C9A057;
  --brass-soft: rgba(201,160,87,0.5);
  --brass-dim: rgba(201,160,87,0.14);
  --cta:#F0B95A;
  --cta-hover:#FFCE78;
  --line: rgba(244,241,230,0.14);
  --maxw: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.6;
  position:relative;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.05;
  background-image:radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1px);
  background-size:3px 3px;
}
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px circle at 90% -10%, rgba(201,160,87,0.10), transparent 60%),
    radial-gradient(800px circle at 5% 110%, rgba(201,160,87,0.07), transparent 60%);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1; }

h1,h2,h3{ font-family:var(--font-serif); font-weight:500; letter-spacing:-0.005em; margin:0; color:var(--ink); }
h1 em, h2 em, h3 em{ font-style:italic; font-weight:500; color:var(--brass); }

.eyebrow{ font-family:var(--font-sans); font-weight:500; font-size:14px; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; display:block; }

p.lead{ font-size:19px; color:var(--ink-soft); max-width:640px; line-height:1.7; }

.hairline{ height:1px; background:var(--line); border:none; margin:0; }

/* ---------- Nav ---------- */
header.site{ position:sticky; top:0; z-index:50; border:none; box-shadow:none; background:none;
  padding:14px 0 6px; transition:padding .5s ease; }
/* schwebende Kapsel statt durchgehender Leiste */
header.site .nav{ width:fit-content; max-width:100%; margin:0 auto;
  border-radius:16px; padding:10px 12px 10px 18px;
  background:linear-gradient(150deg, rgba(30,31,20,0.52), rgba(18,19,9,0.40));
  border:0.5px solid rgba(244,241,230,0.045);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease; }
header.site.scrolled{ padding:10px 0 6px; }
/* kein Trennstrich — der Übergang entsteht nur durch Unschärfe und Verlauf */
header.site.scrolled .nav{ background:linear-gradient(150deg, rgba(32,33,21,0.78), rgba(18,19,9,0.68));
  border-color:rgba(244,241,230,0.07); box-shadow:0 12px 34px rgba(0,0,0,0.26); }
.nav{ display:flex; align-items:center; gap:clamp(26px, 3.2vw, 52px); }
/* auf grossen Monitoren nicht mitwachsen lassen */
@media (min-width:1600px){
  .nav{ gap:46px; }
  .nav .logo{ font-size:16px; }
  .nav a.navlink{ font-size:14px; }
}
.nav .logo{ position:relative; font-family:var(--font-sans); font-weight:400; font-size:16.5px;
  letter-spacing:0.10em; flex:none; color:#FFFFFF; padding:0; border:none; background:none;
  text-shadow:0 0 18px rgba(255,255,255,0.45), 0 0 38px rgba(255,255,255,0.16);
  transition:text-shadow .6s ease, transform .5s cubic-bezier(.19,1,.3,1); }
.nav .logo:hover{ transform:translateY(-1px);
  text-shadow:0 0 24px rgba(255,255,255,0.75), 0 0 52px rgba(255,255,255,0.30); }
.nav .logo span{ color:#FFFFFF; font-weight:400; letter-spacing:0.18em; margin-left:0.16em;
  text-shadow:none; }
.nav ul{ display:flex; gap:30px; align-items:center; }
.nav a.navlink{ position:relative; font-size:14.5px; font-weight:300; color:rgba(244,241,230,0.72); letter-spacing:0.045em;
  padding:6px 2px; display:inline-block;
  transition:color .45s ease, text-shadow .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.nav a.navlink::after{ content:''; position:absolute; left:50%; bottom:-3px; width:4px; height:4px;
  border-radius:50%; background:var(--cta); box-shadow:0 0 12px rgba(240,185,90,0.9);
  transform:translate(-50%,4px) scale(.4); opacity:0;
  transition:transform .5s cubic-bezier(.19,1,.3,1), opacity .45s ease; }
.nav a.navlink:hover{ color:#FFFDF6; text-shadow:0 0 20px rgba(255,253,246,0.55); }
.nav a.navlink:hover::after{ transform:translate(-50%,0) scale(1); opacity:1; }
.nav a.navlink.active{ color:var(--cta); text-shadow:0 0 20px rgba(240,185,90,0.55); }
.nav a.navlink.active::after{ transform:translate(-50%,0) scale(1); opacity:1; }

.nav-right{ display:flex; align-items:center; gap:12px; flex:none; }
.nav .wa-btn{ width:37px; height:37px; border-radius:50%; background:rgba(59,190,114,0.10);
  border:1px solid rgba(95,203,140,0.28); display:flex; align-items:center; justify-content:center;
  transition:background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; }
.nav .wa-btn:hover{ background:rgba(59,190,114,0.20); border-color:rgba(95,203,140,0.6);
  transform:translateY(-2px); box-shadow:0 0 22px rgba(95,203,140,0.28); }
.nav .wa-btn svg{ width:19px; height:19px; fill:#4FCE85; }
.nav .cta-small{ position:relative; isolation:isolate; overflow:hidden;
  color:#15160E; font-weight:600; font-size:13.5px; letter-spacing:0.02em;
  padding:11px 21px; border-radius:11px; white-space:nowrap; border:none;
  background:linear-gradient(135deg, #FFDF9B 0%, #F2BE63 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset, 0 3px 12px rgba(240,185,90,0.20);
  transition:transform .45s cubic-bezier(.19,1,.3,1), box-shadow .5s ease, background .5s ease; }
.nav .cta-small:hover{ transform:translateY(-2px);
  background:linear-gradient(135deg, #FFE7B0 0%, #F5C670 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 24px rgba(240,185,90,0.32); }

.burger{ display:none; width:26px; height:20px; position:relative; cursor:pointer; background:none; border:none; }
.burger span{ position:absolute; left:0; right:0; height:1px; background:var(--ink); transition:transform .25s, opacity .2s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:9px; } .burger span:nth-child(3){ top:18px; }

@media (max-width:960px){
  .nav{ gap:20px; }
  .nav ul.navlist{ display:none; position:absolute; top:calc(100% + 10px); left:0; right:0;
    background:#1A1B10;
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(240,185,90,0.16); border-radius:16px;
    box-shadow:0 18px 44px rgba(0,0,0,0.4);
    flex-direction:column; gap:0; padding:10px 22px 16px; }
  .nav ul.navlist.open{ display:flex; }
  .nav ul.navlist li{ width:100%; }
  .nav a.navlink{ display:block; padding:14px 0; border-bottom:1px solid rgba(244,241,230,0.07); }
  .nav ul.navlist li:last-child .navlink{ border-bottom:none; }
  .nav a.navlink::after{ display:none; }
  .burger{ display:block; order:3; }
  .nav-right{ gap:10px; margin-left:auto; }
  .nav .cta-small{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding:76px 0 60px; position:relative; }
.hero h1:not(.hero-title){ font-size:60px; font-weight:400; line-height:1.14; max-width:780px; }
.hero p.lead{ margin-top:20px; }
.hero .actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }

.hero-home{ position:relative; overflow:hidden; padding:96px 0 108px; }

/* ---- Umgebungslicht: weit, ruhig, ohne sichtbaren Rand ---- */
.hero-aura{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

/* horizontnahes Licht von oben — legt sich über die volle Breite */
.hero-aura::before{ content:''; position:absolute; left:50%; top:-42%;
  width:170%; height:132%; transform:translateX(-50%);
  background:
    radial-gradient(ellipse 52% 44% at 50% 52%,
      rgba(255,231,182,0.115) 0%,
      rgba(246,214,152,0.092) 14%,
      rgba(232,197,131,0.068) 28%,
      rgba(219,183,116,0.046) 42%,
      rgba(212,175,106,0.028) 56%,
      rgba(212,175,106,0.015) 70%,
      rgba(212,175,106,0.006) 84%,
      rgba(212,175,106,0) 100%);
  filter:blur(4px); }

/* zweiter, breiterer Schleier für weiche Tiefe */
.hero-aura::after{ content:''; position:absolute; left:50%; top:-14%;
  width:132%; height:104%; transform:translateX(-50%);
  background:
    radial-gradient(ellipse 30% 34% at 50% 46%,
      rgba(255,244,216,0.036) 0%,
      rgba(240,208,146,0.024) 24%,
      rgba(210,174,106,0.012) 50%,
      rgba(210,174,106,0.004) 72%,
      rgba(210,174,106,0) 100%);
  filter:blur(3px); }

/* Körnung bricht Farbstufen — verhindert sichtbare Ringe */
.hero-grain{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.03;
  background-image:radial-gradient(rgba(255,255,255,0.85) 0.5px, transparent 0.5px);
  background-size:3px 3px; }

.hero-center{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  max-width:none; text-align:center; animation:fadeUp .9s cubic-bezier(.19,1,.3,1) both; }

.hero .hero-title{ font-style:italic; font-weight:400;
  font-size:clamp(38px, 4.7vw, 122px); line-height:1.04; letter-spacing:-0.022em;
  max-width:16ch; width:auto; margin:14px 0 0; color:#FFFDF6;
  text-shadow:0 0 42px rgba(255,253,246,0.16), 0 0 90px rgba(240,185,90,0.14); }
.hero-title em{ font-style:italic; font-weight:400;
  background:linear-gradient(96deg, #FFE6AE 0%, var(--cta) 45%, #E3A63C 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(240,185,90,0.34)); }

.hero-center .actions{ display:flex; gap:16px; margin-top:52px; flex-wrap:wrap; justify-content:center; }

.hero-facts{ display:flex; gap:40px; margin-top:44px; padding-top:0; border:none;
  flex-wrap:wrap; justify-content:center; }
.hero-facts .fact{ display:flex; flex-direction:column; gap:5px; align-items:center; }
.hero-facts .v{ font-family:var(--font-serif); font-size:23px; font-weight:400; color:var(--cta); }
.hero-facts .l{ font-size:12.5px; letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-faint); }

@media (max-width:640px){
  .hero-home{ padding:70px 0 66px; }
    .hero-center .actions{ margin-top:32px; width:100%; }
  .hero-center .actions .btn{ flex:1 1 auto; justify-content:center; }
}

.btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-sans); font-weight:500; font-size:15px; padding:15px 30px; border-radius:12px; letter-spacing:0.02em;
  transition:background .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--brass); color:#16150d; }
.btn-solid:hover{ background:#d9af65; }
.btn-cta{ position:relative; isolation:isolate; overflow:hidden;
  color:#15160E; font-weight:600; font-size:14.5px; letter-spacing:0.02em;
  padding:15px 30px; border-radius:12px; border:none;
  background:linear-gradient(135deg, #FFDF9B 0%, #F2BE63 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 16px rgba(240,185,90,0.22);
  transition:transform .45s cubic-bezier(.19,1,.3,1), box-shadow .5s ease, background .5s ease; }
/* weicher Glanz, der beim Hover durchzieht */
.btn-cta::after{ position:relative; z-index:2; }
.btn-cta:hover{ transform:translateY(-2px);
  background:linear-gradient(135deg, #FFE7B0 0%, #F5C670 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 10px 30px rgba(240,185,90,0.34); }
.btn-cta:active{ transform:translateY(0); box-shadow:0 2px 10px rgba(240,185,90,0.24); }
.btn-outline{ position:relative; isolation:isolate; border:1px solid rgba(244,241,230,0.18);
  color:var(--ink); border-radius:12px; font-weight:400; font-size:14.5px; padding:15px 30px;
  background:rgba(244,241,230,0.02);
  transition:border-color .6s ease, background .6s ease, transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease; }
.btn-outline:hover{ border-color:rgba(240,185,90,0.55); background:rgba(240,185,90,0.06);
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.22); }
.btn::after{ content:'→'; transition:transform .8s cubic-bezier(.22,.75,.3,1); }
.btn-cta > *{ position:relative; z-index:2; }
.btn:hover::after{ transform:translateX(5px); }

.badge{ display:inline-flex; align-items:center; gap:11px; font-size:13px; font-weight:500; color:var(--ink);
  letter-spacing:0.01em; border:1px solid rgba(95,203,140,0.30);
  background:linear-gradient(180deg, rgba(95,203,140,0.13), rgba(95,203,140,0.05));
  padding:8px 17px 8px 15px; border-radius:100px; margin-bottom:24px; backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); transition:border-color .5s ease, background .5s ease; }
.badge:hover{ border-color:rgba(95,203,140,0.6); background:rgba(95,203,140,0.14); }
.badge .dot{ position:relative; width:7px; height:7px; border-radius:50%; background:#5FCB8C; flex:none;
  box-shadow:0 0 10px rgba(95,203,140,0.9); }
.badge .dot::before, .badge .dot::after{ content:''; position:absolute; inset:0; border-radius:50%;
  background:#5FCB8C; animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
.badge .dot::after{ animation-delay:1.2s; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.75; } 70%,100%{ transform:scale(3.4); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .badge .dot::before, .badge .dot::after{ animation:none; } }

/* ---------- Sections ---------- */
section{ padding:88px 0; position:relative; z-index:1; }
section.alt{ position:relative; background:var(--bg-raised); border:none; }
section.alt::before, section.alt::after{ content:none;
  background:linear-gradient(90deg, transparent, rgba(244,241,230,0.12) 22%, rgba(244,241,230,0.12) 78%, transparent); }
section.alt::before{ top:0; }
section.alt::after{ bottom:0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:42px; margin-top:6px; }

/* ---------- Grid helpers ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translate3d(0,26px,0); transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1); will-change:opacity, transform; }
.reveal.visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; } .reveal.d3{ transition-delay:.3s; }

/* ---------- Service / feature cards ---------- */
.card{ border:1px solid var(--line); padding:38px 34px; border-radius:12px; background:rgba(244,241,230,0.02);
  transition:border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), background .45s ease, box-shadow .45s ease; }
.card:hover{ border-color:var(--brass-soft); transform:translateY(-4px); background:rgba(244,241,230,0.04); box-shadow:0 18px 40px rgba(0,0,0,0.25); }
.card .num{ font-family:var(--font-serif); font-style:italic; font-size:26px; color:var(--brass); margin-bottom:20px; display:block; }
.card h3{ font-size:23px; margin-bottom:14px; }
.card p{ color:var(--ink-soft); font-size:15.5px; margin:0; }

/* roman-numeral list (used on Leistungen) */
.rlist li{ display:flex; gap:32px; padding:34px 0; position:relative; }
.rlist li::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(244,241,230,0.13), rgba(244,241,230,0.03) 70%, transparent); }
.rlist li:last-child::after{ display:none; }
.rlist .num{ font-family:var(--font-serif); font-style:italic; font-size:30px; color:var(--brass); min-width:52px; flex:none; }
.rlist h3{ font-size:24px; margin-bottom:8px; }
.rlist p{ color:var(--ink-soft); font-size:15.5px; max-width:560px; margin:0; }

.step-tag{ display:block; font-family:var(--font-sans); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.step-tag em{ font-style:normal; color:var(--brass); }

/* highlighted keyword inside muted body copy */
.hl{ color:var(--ink); font-weight:600; }

/* Porträt mit Eckklammern */
.portrait-frame{ position:relative; aspect-ratio:1/1; width:100%; }
.portrait-frame picture, .portrait-frame img{ display:block; width:100%; height:100%; }
.portrait-frame img{ object-fit:cover; border-radius:14px; filter:saturate(.94) contrast(1.02); }
.portrait-frame i{ display:none; }

/* corner-bracket frame — used for portrait / portfolio placeholders */
.frame{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-faint); font-size:14px; line-height:1.5; border-radius:10px; }
.frame i{ position:absolute; width:28px; height:28px; }
.frame i.tl{ top:0; left:0; border-top:1.5px solid var(--brass); border-left:1.5px solid var(--brass); }
.frame i.tr{ top:0; right:0; border-top:1.5px solid var(--brass); border-right:1.5px solid var(--brass); }
.frame i.bl{ bottom:0; left:0; border-bottom:1.5px solid var(--brass); border-left:1.5px solid var(--brass); }
.frame i.br{ bottom:0; right:0; border-bottom:1.5px solid var(--brass); border-right:1.5px solid var(--brass); }

/* free-services banner */
.free-banner{ display:flex; flex-direction:column; gap:14px; margin-top:34px; padding:24px 26px;
  border:1px solid var(--brass-soft); border-radius:12px; background:rgba(201,160,87,0.06); max-width:660px; }
.fb-item{ display:flex; align-items:flex-start; gap:16px; }
.fb-tag{ flex:none; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:#16150d; background:var(--cta); padding:5px 11px; border-radius:100px; margin-top:2px; }
.fb-text{ font-size:15.5px; color:var(--ink-soft); line-height:1.6; }
@media (max-width:560px){ .fb-item{ flex-direction:column; gap:8px; } }

.badge-inline{ display:inline-block; vertical-align:middle; font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:#16150d; background:var(--cta);
  padding:4px 10px; border-radius:100px; margin-left:10px; }

/* pricing */
.price-card{ border:1px solid var(--line); padding:44px 36px; display:flex; flex-direction:column; position:relative; border-radius:12px; overflow:hidden;
  transition:border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; }
.price-card:hover{ border-color:var(--brass); transform:translateY(-5px); box-shadow:0 20px 44px rgba(0,0,0,0.28); }
.price-card:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.price-card.featured{ border-color:var(--brass); }
.price-card .tag{ position:absolute; top:0; right:0; background:var(--brass); color:#16150d; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:7px 16px; border-radius:0 11px 0 11px; line-height:1; }
.price-card .plan{ font-family:var(--font-sans); font-weight:600; font-size:14px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); }
.price-card .amount{ font-family:var(--font-serif); font-size:46px; line-height:1.15; margin:18px 0 6px; white-space:nowrap; }
.price-card .amount.small{ font-size:36px; }
.price-card .amount span{ font-size:16px; font-family:var(--font-sans); color:var(--ink-faint); font-weight:400; }
.price-card .desc{ color:var(--ink-soft); font-size:14.5px; margin-bottom:28px; }
.price-card ul{ display:block !important; margin-bottom:32px; flex:1; }
.price-card ul li{ display:block !important; font-size:14.5px; color:var(--ink-soft); line-height:1.6; position:relative; padding-left:22px; margin-bottom:13px; }
.price-card ul li::before{ content:''; position:absolute; left:0; top:9px; width:10px; height:1px; background:var(--brass); }
.price-card ul li .hl{ color:var(--ink); font-weight:600; display:inline !important; }

/* delivery-time row at the bottom of a price card */
.delivery{ position:relative; padding-top:20px; margin-bottom:28px; display:flex; flex-direction:column; gap:8px; }
.delivery::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(240,185,90,0.22), rgba(244,241,230,0.05) 60%, transparent); }
.delivery .d-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.delivery .d-label{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.delivery .d-value{ font-family:var(--font-serif); font-size:19px; color:var(--ink); white-space:nowrap; }
.delivery .d-row.express .d-label{ color:var(--brass); }
.delivery .d-row.express .d-value{ color:var(--brass); font-size:17px; }

/* ---------- Portfolio ---------- */
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(330px,100%),1fr)); gap:34px; }

.pf-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(244,241,230,0.02);
  transition:border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; }
.pf-card:hover{ border-color:var(--brass-soft); transform:translateY(-5px); box-shadow:0 22px 46px rgba(0,0,0,0.34); }

.pf-shot{ position:relative; aspect-ratio:16/11; overflow:hidden; border-bottom:1px solid var(--line);
  background:rgba(244,241,230,0.03); }
.pf-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.pf-card:hover .pf-shot img{ transform:scale(1.05); }

.pf-info{ padding:26px 26px 28px; }
.pf-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.pf-card h3{ font-size:20px; }
.pf-info p{ color:var(--ink-soft); font-size:14.5px; line-height:1.65; margin:0 0 18px; }
.pf-badge{ flex:none; font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--brass); border:1px solid var(--brass-soft); padding:4px 10px; border-radius:100px; }
.pf-badge.live{ color:#5FCB8C; border-color:rgba(95,203,140,0.45); background:rgba(95,203,140,0.10); }
.pf-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.pf-tags span{ font-size:12px; color:var(--ink-faint); border:1px solid var(--line); padding:5px 12px; border-radius:100px; }

/* --- Konzept-Mockups (reine CSS-Vorschauen) --- */
.mock-shot{ display:flex; align-items:flex-start; justify-content:center; padding:18px 18px 0; }
.mk{ width:100%; height:100%; border-radius:8px 8px 0 0; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 14px 34px rgba(0,0,0,0.30); transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.pf-card:hover .mk{ transform:translateY(-6px); }
.mk-bar{ display:flex; gap:5px; padding:9px 12px; flex:none; }
.mk-bar i{ width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,0.18); }
.mk-body{ flex:1; padding:0 16px 16px; display:flex; flex-direction:column; gap:11px; }
.mk-nav{ display:flex; align-items:center; justify-content:space-between; padding-bottom:11px; }
.mk-logo{ width:34px; height:7px; border-radius:3px; }
.mk-links{ display:flex; gap:7px; }
.mk-links i{ width:16px; height:5px; border-radius:2px; }
.mk-hero-txt{ display:flex; flex-direction:column; gap:7px; }
.mk-hero-txt.center{ align-items:center; }
.mk-hero-txt b{ width:72%; height:13px; border-radius:4px; display:block; }
.mk-hero-txt em{ width:52%; height:7px; border-radius:3px; display:block; }
.mk-btn{ width:58px; height:16px; border-radius:4px; display:block; margin-top:4px; }
.mk-img{ flex:1; min-height:52px; border-radius:6px; }
.mk-full-img{ height:74px; border-radius:6px; margin:0 -16px; border-radius:0; }
.mk-cards{ display:flex; gap:8px; }
.mk-cards i{ flex:1; height:32px; border-radius:5px; }
.mk-rows{ display:flex; flex-direction:column; gap:7px; }
.mk-rows i{ height:13px; border-radius:4px; }
.mk-split{ display:flex; gap:12px; align-items:center; flex:1; }
.mk-col{ flex:1; display:flex; flex-direction:column; gap:7px; }
.mk-col b{ height:12px; width:88%; border-radius:4px; }
.mk-col em{ height:6px; width:66%; border-radius:3px; }
.mk-round{ width:66px; height:66px; border-radius:50%; flex:none; }
.mk-price{ display:flex; gap:8px; align-items:flex-end; }
.mk-price i{ flex:1; height:38px; border-radius:5px; }
.mk-price i.tall{ height:52px; }

/* Farbwelten der Konzepte */
.mk-nord{ background:#F3EEE6; }
.mk-nord .mk-bar{ background:#E6DED1; }
.mk-nord .mk-logo, .mk-nord .mk-hero-txt b, .mk-nord .mk-col b{ background:#4A3A28; }
.mk-nord .mk-links i, .mk-nord .mk-hero-txt em{ background:#C4B49C; }
.mk-nord .mk-img, .mk-nord .mk-full-img{ background:linear-gradient(135deg,#B98F5C,#8A6742); }
.mk-nord .mk-cards i, .mk-nord .mk-rows i{ background:#E2D8C8; }
.mk-nord .mk-btn{ background:#8A6742; }

.mk-medic{ background:#F2F7F8; }
.mk-medic .mk-bar{ background:#DFEAEE; }
.mk-medic .mk-logo, .mk-medic .mk-hero-txt b, .mk-medic .mk-col b{ background:#1E4A57; }
.mk-medic .mk-links i, .mk-medic .mk-hero-txt em, .mk-medic .mk-col em{ background:#A8C4CC; }
.mk-medic .mk-round{ background:linear-gradient(135deg,#7FB4C2,#3E7C8E); }
.mk-medic .mk-cards i{ background:#DCE9ED; }
.mk-medic .mk-btn{ background:#3E7C8E; }

.mk-food{ background:#FBF6EF; }
.mk-food .mk-bar{ background:#EFE3D4; }
.mk-food .mk-full-img{ background:linear-gradient(135deg,#D9713F,#A8421F); }
.mk-food .mk-hero-txt b{ background:#43261A; }
.mk-food .mk-hero-txt em{ background:#C9A88E; }
.mk-food .mk-cards i{ background:#EFE0CE; }
.mk-food .mk-btn{ background:#C1552B; }

.mk-law{ background:#F5F4F1; }
.mk-law .mk-bar{ background:#E4E2DC; }
.mk-law .mk-logo, .mk-law .mk-hero-txt b{ background:#2B3038; }
.mk-law .mk-links i, .mk-law .mk-hero-txt em{ background:#B3B6B1; }
.mk-law .mk-rows i{ background:#E7E5E0; }

.mk-fit{ background:#17181B; }
.mk-fit .mk-bar{ background:#232529; }
.mk-nav.dark{ border-bottom-color:rgba(255,255,255,0.08); }
.mk-fit .mk-logo{ background:#D8FF4F; }
.mk-fit .mk-links i{ background:#4A4D53; }
.mk-fit .mk-hero-txt b{ background:#EDEDEA; }
.mk-fit .mk-hero-txt em{ background:#585C63; }
.mk-fit .mk-price i{ background:#26282D; }
.mk-fit .mk-price i.tall{ background:#D8FF4F; }
.mk-fit .mk-btn{ background:#D8FF4F; }

/* quote */
.quote-mark{ font-family:var(--font-serif); font-style:italic; font-size:120px; color:var(--brass-soft); line-height:0.5; margin-bottom:6px; }

/* CTA banner */
.cta-banner{ text-align:center; padding:100px 0; }
.cta-banner h2{ font-size:42px; margin-bottom:20px; }
.cta-banner .actions{ margin-top:28px; }
.cta-banner .actions{ display:flex; justify-content:center; gap:18px; }

/* ---------- Form ---------- */
.form-card{ border:1px solid var(--line); border-radius:14px; padding:38px 34px; background:rgba(244,241,230,0.02); }
.form-head{ position:relative; margin-bottom:30px; padding-bottom:26px; }
.form-head::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(244,241,230,0.16), rgba(244,241,230,0.04) 60%, transparent); }
form.contact{ display:flex; flex-direction:column; gap:20px; max-width:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{ font-size:14px; color:var(--ink-soft); letter-spacing:0.02em; }
.field .req{ color:var(--brass); }
.field input, .field select, .field textarea{
  background:rgba(244,241,230,0.03); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:var(--font-sans); font-size:15.5px; padding:13px 14px;
  transition:border-color .3s ease, background .3s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); background:rgba(244,241,230,0.05); }
.field textarea{ resize:vertical; min-height:130px; }
.field select{ color-scheme:dark; cursor:pointer; }
.field select option{ background:var(--bg); color:var(--ink); }
.form-note{ font-size:13px; color:var(--ink-faint); line-height:1.6; }

.checkbox{ display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--ink-soft); line-height:1.6; cursor:pointer; }
.checkbox input{ margin-top:3px; width:17px; height:17px; accent-color:var(--brass); flex:none; cursor:pointer; }
.checkbox a{ color:var(--brass); border-bottom:1px solid var(--brass-soft); }
.checkbox .req{ color:var(--brass); }

.info-card{ border:1px solid var(--line); border-radius:14px; padding:28px 26px; background:rgba(244,241,230,0.02); margin-top:8px; }
.info-card h3{ font-size:19px; margin-bottom:20px; }
.mini-steps{ display:block !important; }
.mini-steps li{ display:block !important; position:relative; padding-left:38px; margin-bottom:18px; font-size:14.5px; color:var(--ink-soft); line-height:1.65; }
.mini-steps li:last-child{ margin-bottom:0; }
.mini-steps li > span:first-child{ position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--brass-soft); color:var(--brass); font-size:12px; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-sans); }

.contact-info{ display:flex; flex-direction:column; gap:28px; }
.contact-info .row{ display:flex; flex-direction:column; gap:6px; }
.contact-info .row .l{ font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass); }
.contact-info .row .v{ font-family:var(--font-serif); font-style:italic; font-size:24px; }

/* ---------- Footer ---------- */
footer.site{ position:relative; border-top:none; padding:64px 0 40px; z-index:1; }
footer.site::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(244,241,230,0.14) 20%, rgba(244,241,230,0.14) 80%, transparent); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; margin-bottom:56px; }
.foot-grid h4{ font-family:var(--font-sans); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); margin-bottom:20px; }
.foot-grid p{ color:var(--ink-soft); font-size:14.5px; max-width:280px; }
.foot-grid a{ display:block; color:var(--ink-soft); font-size:14.5px; padding:6px 0; }
.foot-grid a:hover{ color:var(--brass); }
.foot-bottom{ position:relative; display:flex; justify-content:space-between; align-items:center; padding-top:26px;
  border-top:none; font-size:13px; color:var(--ink-faint); }
.foot-bottom::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(244,241,230,0.10) 15%, rgba(244,241,230,0.10) 85%, transparent); }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr; } .foot-bottom{ flex-direction:column; gap:14px; text-align:center; } }

/* ---------- Side margin decoration (fills empty gutters on wide screens) ---------- */
.margin-rule{ position:fixed; top:0; bottom:0; width:1px; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--line) 12%, var(--line) 88%, transparent); }
.margin-rule.left{ left:56px; }
.margin-rule.right{ right:56px; }
.margin-rule::before{ content:''; position:absolute; top:0; bottom:0; left:-22px; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(244,241,230,0.06) 20%, rgba(244,241,230,0.06) 80%, transparent); }
.margin-label{ position:fixed; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; text-orientation:mixed;
  font-size:11px; letter-spacing:0.32em; color:var(--ink-faint); z-index:0; pointer-events:none; }
.margin-label.left{ left:26px; }
.margin-label.right{ right:26px; transform:translateY(-50%) rotate(0deg); }
.margin-dot{ position:fixed; width:5px; height:5px; border-radius:50%; background:var(--brass); z-index:0; pointer-events:none;
  box-shadow:0 0 0 4px rgba(201,160,87,0.10); }
.margin-dot.left-top{ left:53.5px; top:120px; }
.margin-dot.left-bottom{ left:53.5px; bottom:120px; }
.margin-dot.right-top{ right:53.5px; top:120px; }
.margin-dot.right-bottom{ right:53.5px; bottom:120px; }
@media (max-width:1360px){ .margin-rule, .margin-label, .margin-dot{ display:none; } }

/* ---------- FAQ accordion ---------- */
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ position:relative; }
.faq-item::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(244,241,230,0.13), rgba(244,241,230,0.03) 70%, transparent); }
.faq-item:last-child::after{ display:none; }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; cursor:pointer;
  background:none; border:none; width:100%; text-align:left; transition:padding-left .4s cubic-bezier(.22,.61,.36,1); }
.faq-q:hover{ padding-left:6px; }
.faq-q h3{ font-size:20px; font-weight:500; font-family:var(--font-sans); color:var(--ink);
  transition:color .3s ease; }
.faq-q:hover h3{ color:var(--brass); }
.faq-item.open .faq-q h3{ color:var(--brass); }
.faq-q .icon{ flex:none; width:30px; height:30px; border:1px solid var(--brass-soft); border-radius:9px;
  display:flex; align-items:center; justify-content:center; color:var(--brass); font-size:18px; line-height:1;
  transition:transform .45s cubic-bezier(.34,1.3,.64,1), border-color .3s, background .3s; }
.faq-q:hover .icon{ border-color:var(--brass); background:var(--brass-dim); }
.faq-item.open .faq-q .icon{ transform:rotate(135deg); border-color:var(--brass); background:var(--brass-dim); }

.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ color:var(--ink-soft); font-size:15.5px; line-height:1.75; padding-bottom:28px; max-width:680px; margin:0;
  opacity:0; transform:translateY(-6px); transition:opacity .4s ease .1s, transform .45s cubic-bezier(.22,.61,.36,1) .1s; }
.faq-item.open .faq-a p{ opacity:1; transform:none; }

/* ---------- WhatsApp contact row ---------- */
.whatsapp-row{ display:flex; align-items:center; gap:18px; border:1px solid var(--line); border-radius:12px; padding:22px 26px; margin-top:8px; }
.whatsapp-row .wa-icon{ flex:none; width:46px; height:46px; border-radius:50%; background:#3BBE72; display:flex; align-items:center; justify-content:center; }
.whatsapp-row .wa-icon svg{ width:24px; height:24px; }
.whatsapp-row .wa-text .l{ font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); }
.whatsapp-row .wa-text .v{ font-family:var(--font-serif); font-style:italic; font-size:21px; }

/* ---------- Legal pages ---------- */
.legal h2{ font-size:24px; margin:52px 0 16px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:19px; margin:32px 0 12px; font-family:var(--font-sans); font-weight:600; }
.legal p{ color:var(--ink-soft); font-size:15.5px; line-height:1.8; margin:0 0 16px; }
.legal ul{ margin:0 0 16px; padding-left:0; }
.legal ul li{ display:block !important; color:var(--ink-soft); font-size:15.5px; line-height:1.8; position:relative; padding-left:22px; margin-bottom:8px; }
.legal ul li::before{ content:'—'; color:var(--brass); position:absolute; left:0; top:0; }
.legal a{ color:var(--brass); border-bottom:1px solid var(--brass-soft); }
.legal .todo{ color:var(--brass); background:var(--brass-dim); padding:2px 8px; border-radius:4px; font-size:14px; }
.legal .note{ font-size:14px; color:var(--ink-faint); border-left:2px solid var(--brass); padding:12px 0 12px 18px; margin:20px 0; }

/* revocation form box */
.revoke-box{ border:1px solid var(--line); border-radius:12px; padding:36px 34px; background:rgba(244,241,230,0.02); margin-top:24px; }
form.revocation{ display:flex; flex-direction:column; gap:22px; }
.revoke-intro{ color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0; }
form.revocation .field input{ color-scheme:dark; }

/* ---------- Booking embed (Meetergo) ---------- */
.booking-embed{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 20px 46px rgba(0,0,0,0.30); }
/* Kopfzeile sitzt innerhalb des weissen Meetergo-Kastens */
.booking-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:18px 26px; background:#fff; border-bottom:1px solid rgba(18,19,9,0.10); }
.booking-logo{ display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-sans); font-weight:600; font-size:15px; letter-spacing:0.09em; color:#15160E; }
.booking-logo span{ margin-left:-1px; }
.booking-logo span{ color:#A9803A; }
.booking-meta{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:#4A4C42;
  background:rgba(95,203,140,0.12); border:1px solid rgba(64,160,102,0.30); padding:6px 14px; border-radius:100px; }
.bh-dot{ width:7px; height:7px; border-radius:50%; background:#3EA96B; flex:none; }
/* Kopfbereich von meetergo (Kürzel + Name) wird abgeschnitten,
   damit nur dein eigenes Logo oben steht */
.booking-crop{ position:relative; overflow:hidden; height:790px; background:#fff; }
.booking-crop iframe{ width:100%; border:none; display:block; height:812px;
  position:absolute; top:-22px; left:0; background:#fff; }
@media (max-width:900px){
  .booking-crop{ height:930px; }
  .booking-crop iframe{ height:952px; top:-22px; }
}
@media (max-width:640px){
  .booking-crop{ height:1090px; }
  .booking-crop iframe{ height:1110px; top:-20px; }
}
.booking-fallback{ padding:40px; text-align:center; }
.booking-fallback p{ color:var(--ink-soft); font-size:15px; margin-bottom:22px; }

/* ---------- Formular-Validierung ---------- */
.field input.invalid, .field select.invalid, .field textarea.invalid{ border-color:#C4564A; background:rgba(196,86,74,0.06); }
.checkbox input.invalid{ outline:2px solid #C4564A; outline-offset:2px; }

/* Leuchteffekt bei reduzierter Bewegung abschwächen */
@media (prefers-reduced-motion: reduce){
  .btn-cta::before, .btn-outline::before, .nav .cta-small::before{ transition:opacity .2s ease; transform:scale(1); }
}


/* ---------- Ansprechpartner-Karte (Kontaktseite) ---------- */
.contact-person{ display:flex; align-items:center; gap:18px; border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; background:rgba(244,241,230,0.02); }
.contact-person picture{ flex:none; }
.contact-person img{ width:66px; height:66px; border-radius:12px; object-fit:cover; border:none; }
.cp-text{ display:flex; flex-direction:column; gap:3px; }
.cp-text strong{ font-family:var(--font-serif); font-weight:500; font-size:19px; color:var(--ink); }
.cp-text span{ font-size:13.5px; color:var(--ink-soft); }

/* ---------- Hinweis zum gewaehlten Paket (Kontaktformular) ---------- */
.package-note{ display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:12px;
  border:1px solid rgba(95,203,140,0.32); background:rgba(95,203,140,0.08);
  animation:noteIn .7s cubic-bezier(.22,.61,.36,1) both; }
.package-note[hidden]{ display:none; }
@keyframes noteIn{ from{ opacity:0; transform:translate3d(0,-8px,0); } to{ opacity:1; transform:none; } }
.pn-check{ flex:none; width:24px; height:24px; border-radius:50%; background:#3EA96B; color:#0C1A11;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px; }
.pn-text{ flex:1; font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
.pn-text strong{ color:var(--ink); font-weight:600; }
.pn-text em{ font-style:normal; color:var(--brass); font-size:13.5px; }
.pn-change{ flex:none; font-size:13px; color:var(--ink-soft); border-bottom:1px solid var(--line);
  transition:color .3s ease, border-color .3s ease; }
.pn-change:hover{ color:var(--brass); border-color:var(--brass-soft); }


/* ---------- Paket-Hinweis im Kontaktformular ---------- */
.package-note{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:12px;
  border:1px solid rgba(240,185,90,0.34); background:linear-gradient(180deg, rgba(240,185,90,0.11), rgba(240,185,90,0.04));
  animation:noteIn .6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes noteIn{ from{ opacity:0; transform:translate3d(0,-8px,0); } to{ opacity:1; transform:none; } }
.pn-check{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--cta); color:#1A1205;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.pn-text{ flex:1; font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.pn-text strong{ color:var(--ink); font-weight:600; }
.pn-text em{ font-style:normal; color:var(--brass); font-size:13.5px; }
.pn-change{ flex:none; font-size:13px; color:var(--brass); border-bottom:1px solid var(--brass-soft); }
.pn-change:hover{ color:var(--cta); }

/* ---------- WhatsApp-Link im Fließtext ---------- */
.wa-inline{ display:inline-flex; align-items:center; gap:6px; color:#5FCB8C; font-weight:600;
  border-bottom:1px solid rgba(95,203,140,0.4); padding-bottom:1px;
  transition:color .4s ease, border-color .4s ease; }
.wa-inline svg{ width:14px; height:14px; fill:currentColor; }
.wa-inline:hover{ color:#7EDCA6; border-color:#7EDCA6; }

/* ---------- Fakten-Zeile auf "Über mich" ---------- */
.ab-facts{ display:flex; gap:36px; margin-top:34px; padding-top:0; border:none; flex-wrap:wrap; }
.ab-fact{ display:flex; flex-direction:column; gap:4px; }
.ab-fact .v{ font-family:var(--font-serif); font-size:22px; color:var(--brass); }
.ab-fact .l{ font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }






/* ---------- Startaktion ---------- */
.offer-section{ padding:64px 0 72px; }
.offer{ position:relative; border-radius:20px; overflow:hidden;
  border:1px solid rgba(240,185,90,0.34);
  background:linear-gradient(150deg, rgba(240,185,90,0.12) 0%, rgba(201,160,87,0.05) 45%, rgba(244,241,230,0.02) 100%);
  box-shadow:0 26px 60px rgba(0,0,0,0.34); }
.offer-glow{ position:absolute; top:-160px; right:-120px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(240,185,90,0.28), transparent 68%); pointer-events:none;
  animation:offerPulse 6s ease-in-out infinite; }
@keyframes offerPulse{ 0%,100%{ opacity:.75; transform:scale(1); } 50%{ opacity:1; transform:scale(1.07); } }
@media (prefers-reduced-motion: reduce){ .offer-glow{ animation:none; } }

.offer-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.25fr 0.75fr; gap:48px;
  padding:48px 46px; align-items:center; }
@media (max-width:900px){ .offer-inner{ grid-template-columns:1fr; gap:34px; padding:36px 28px; } }

.offer-tag{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--cta);
  border:1px solid rgba(240,185,90,0.4); background:rgba(240,185,90,0.10);
  padding:8px 16px; border-radius:100px; margin-bottom:22px; }
.ot-pulse{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--cta); flex:none; }
.ot-pulse::before{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--cta);
  animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite; }
@media (prefers-reduced-motion: reduce){ .ot-pulse::before{ animation:none; } }

.offer h2{ font-size:44px; line-height:1.14; margin-bottom:18px; }
.offer h2 em{ font-style:normal; color:var(--cta); }
.offer p{ color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:520px; margin:0 0 30px; }
.offer-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.offer-wa{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; color:#5FCB8C;
  border-bottom:1px solid rgba(95,203,140,0.35); padding-bottom:2px; transition:color .4s ease, border-color .4s ease; }
.offer-wa svg{ width:16px; height:16px; fill:currentColor; }
.offer-wa:hover{ color:#7EDCA6; border-color:#7EDCA6; }

.offer-left{ min-width:0; }
.offer-right{ position:relative; padding-left:44px; }
.offer-right::before{ content:''; position:absolute; left:0; top:6%; bottom:6%; width:1px;
  background:linear-gradient(180deg, transparent, rgba(240,185,90,0.30) 25%, rgba(240,185,90,0.30) 75%, transparent); }
@media (max-width:900px){ .offer-right{ border-left:none; border-top:1px solid rgba(240,185,90,0.22);
  padding-left:0; padding-top:30px; } }
.offer-price{ display:flex; flex-direction:column; gap:4px; margin-bottom:26px; }
.op-old{ font-size:15px; color:var(--ink-faint); text-decoration:line-through; }
.op-new{ font-family:var(--font-serif); font-size:56px; line-height:1; color:var(--cta); }
.op-save{ font-size:13px; color:#5FCB8C; font-weight:500; }

.offer-list{ display:block; margin:0 0 26px; }
.offer-list li{ position:relative; padding-left:24px; margin-bottom:11px; font-size:14.5px; color:var(--ink-soft); }
.offer-list li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--cta); font-size:13px; font-weight:700; }


/* ---------- Startaktion-Hinweis auf der Preisseite ---------- */
.offer-hint{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:30px; padding:18px 22px;
  border:1px solid rgba(240,185,90,0.36); border-radius:12px;
  background:linear-gradient(180deg, rgba(240,185,90,0.13), rgba(240,185,90,0.05)); max-width:660px; }
.oh-tag{ flex:none; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:#1A1205; background:var(--cta); padding:5px 12px; border-radius:100px; }
.oh-text{ flex:1; min-width:220px; font-size:15px; color:var(--ink-soft); line-height:1.55; }
.oh-text strong{ color:var(--ink); font-weight:600; }
.oh-link{ flex:none; font-size:14px; font-weight:600; color:var(--cta);
  border-bottom:1px solid rgba(240,185,90,0.45); transition:color .4s ease, border-color .4s ease; }
.oh-link:hover{ color:#FFCE78; border-color:#FFCE78; }



/* ---------- Rotierende Zielgruppen-Zeile ---------- */
.rotator{ position:relative; z-index:1; overflow:hidden; padding:40px 0 34px;
  background:
    radial-gradient(520px circle at 50% 130%, rgba(201,160,87,0.08), transparent 70%),
    linear-gradient(180deg, rgba(244,241,230,0.04), rgba(244,241,230,0.01)); }
.rotator::before, .rotator::after{ content:''; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(244,241,230,0.12) 22%, rgba(244,241,230,0.12) 78%, transparent); }
.rotator::before{ top:0; }
.rotator::after{ bottom:0; }

.rot-line{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:0; font-family:var(--font-serif); font-size:31px; line-height:1.25; text-align:center; }
.rot-static{ color:var(--ink); font-weight:400; opacity:.92; }

.rot-wrap{ position:relative; display:inline-block; height:1.3em; line-height:1.3em;
  min-width:272px; text-align:left; }
.rot-item{ position:absolute; left:0; top:0; line-height:1.3em; white-space:nowrap;
  color:var(--cta); font-weight:500;
  opacity:0; transform:translateY(85%) rotateX(-55deg); transform-origin:top center;
  filter:blur(4px); transition:opacity .7s ease, transform .8s cubic-bezier(.19,1,.3,1), filter .7s ease; }
.rot-item.is-active{ opacity:1; transform:none; filter:blur(0); }
.rot-item.is-leaving{ opacity:0; transform:translateY(-85%) rotateX(55deg);
  transform-origin:bottom center; filter:blur(4px); }

/* Fortschrittslinie unter der Zeile */
.rot-track{ width:132px; height:2px; margin:22px auto 0; border-radius:2px;
  background:rgba(244,241,230,0.10); overflow:hidden; }
.rot-track span{ display:block; height:100%; width:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--brass), var(--cta));
  transform-origin:left center; animation:rotProgress 3.2s linear infinite; }
@keyframes rotProgress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (max-width:640px){
  .rot-line{ font-size:22px; gap:8px; }
  .rot-wrap{ min-width:190px; }
  .rotator{ padding:32px 0 28px; }
}
@media (prefers-reduced-motion: reduce){
  .rot-item{ transition:opacity .2s ease; transform:none; filter:none; }
  .rot-item.is-leaving{ transform:none; filter:none; }
  .rot-track span{ animation:none; }
}


/* ---------- Erfolgsmeldung nach dem Absenden ---------- */
.form-success{ text-align:center; padding:52px 34px;
  border:1px solid rgba(95,203,140,0.30); border-radius:14px;
  background:linear-gradient(180deg, rgba(95,203,140,0.09), rgba(95,203,140,0.03));
  animation:fsIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes fsIn{ from{ opacity:0; transform:translate3d(0,16px,0); } to{ opacity:1; transform:none; } }
.fs-check{ width:58px; height:58px; margin:0 auto 22px; border-radius:50%;
  background:rgba(95,203,140,0.16); border:1px solid rgba(95,203,140,0.45); color:#5FCB8C;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px rgba(95,203,140,0.06); }
.fs-check svg{ width:26px; height:26px; }
.form-success h3{ font-family:var(--font-serif); font-weight:500; font-size:25px; margin-bottom:12px; }
.form-success p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; max-width:430px; margin:0 auto 28px; }
.form-success p strong{ color:var(--ink); font-weight:600; }
.fs-actions{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.fs-wa{ font-size:14px; color:#5FCB8C; border-bottom:1px solid rgba(95,203,140,0.4); padding-bottom:2px; }
.fs-wa:hover{ color:#7EDCA6; }

.form-error{ font-size:14px; color:#E08A7E; line-height:1.6; margin:0; }
.form-error a{ color:#E08A7E; border-bottom:1px solid rgba(224,138,126,0.5); }

/* Spamschutz-Feld unsichtbar halten */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Überlaufschutz für Grid- und Flex-Kinder ---------- */
.grid-2 > *, .grid-3 > *, .field-row > *, .contact-info > *{ min-width:0; }
.form-card, .contact-person, .whatsapp-row, .info-card{ max-width:100%; }
.contact-info .row .v, .cp-text strong, .cp-text span{ overflow-wrap:anywhere; }

/* ---------- Lange Wörter auf schmalen Bildschirmen umbrechen ---------- */
h1, h2, h3, .legal p, .legal li{ overflow-wrap:break-word; hyphens:auto; }
@media (max-width:640px){
  .hero h1:not(.hero-title){ font-size:34px; }
  .legal h2{ font-size:21px; }
  .section-head h2, .cta-banner h2{ font-size:28px; }
}

/* ---------- Feinschliff: modernere Typografie und Flächen ---------- */

/* Eyebrow-Label mit feinem Strich statt nur Versalien */
.eyebrow{ display:inline-flex; align-items:center; gap:11px; font-weight:400; letter-spacing:0.18em; }
.eyebrow::before{ content:''; width:22px; height:1px; background:currentColor; opacity:.55; flex:none; }

/* Überschriften etwas leichter und mit mehr Luft */
h1{ font-weight:400; letter-spacing:-0.012em; }
h2{ font-weight:400; letter-spacing:-0.008em; }
h3{ font-weight:500; }
.section-head{ margin-bottom:52px; }
.section-head h2{ margin-top:10px; }

/* Karten: weichere Kanten, feinerer Rand */
.card, .price-card, .pf-card, .form-card, .info-card, .revoke-box{ border-radius:16px; }
.card, .info-card{ border-color:rgba(244,241,230,0.10); }

/* Trennlinien dezenter */
.hairline{ background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }

/* Fließtext etwas ruhiger */
p.lead{ font-weight:300; letter-spacing:0.005em; }

/* Fakten-Zeile im Hero feiner */
.hero-facts .v, .ab-fact .v{ font-weight:400; }

/* Fußbereich luftiger */
footer.site{ padding-top:72px; }
.foot-grid h4{ font-weight:500; letter-spacing:0.16em; }

/* Auswahl-Markierung passend zur Marke */
::selection{ background:rgba(240,185,90,0.28); color:#FFFDF6; }

/* Scrollleiste dezent einfärben */
html{ scrollbar-color: rgba(201,160,87,0.45) transparent; scrollbar-width: thin; }

/* ---------- Flüssigere Bewegung: einheitliche Kurve, GPU-Beschleunigung ---------- */
.card, .price-card, .pf-card, .btn, .btn-cta, .btn-outline, .nav .cta-small,
.nav .logo, .nav .wa-btn, .nav a.navlink, .faq-q, .faq-q .icon, .whatsapp-row{
  will-change:transform;
  transition-timing-function:cubic-bezier(.19,1,.3,1);
}
.reveal{ transition-timing-function:cubic-bezier(.19,1,.3,1); }
.reveal.visible{ will-change:auto; }

/* Bewegungen als 3D-Transform, damit die Grafikkarte übernimmt */
@keyframes marqueeSmooth{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.rot-item{ backface-visibility:hidden; }
.pf-shot img, .portrait-frame img{ backface-visibility:hidden; }

/* Auf Touchgeräten keine Hover-Bewegung (verursacht dort Ruckeln) */
@media (hover:none){
  .card:hover, .price-card:hover, .pf-card:hover, .btn:hover,
  .nav .logo:hover, .nav .wa-btn:hover{ transform:none; }
  .pf-card:hover .mk, .pf-card:hover .pf-shot img{ transform:none; }
}

/* ---------- Navigation tritt beim Scrollen dezent zurück ---------- */
header.site{ transition:padding .5s ease, transform .6s cubic-bezier(.19,1,.3,1), opacity .5s ease; }
header.site.nav-hidden{ transform:translate3d(0,-3px,0) scale(.99); opacity:.5; }
header.site.nav-hidden .nav{ box-shadow:none; }
header.site.nav-hidden:hover{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
  header.site.nav-hidden{ transform:none; opacity:1; }
}

/* ---------- Modernisierte Farbwelt & breiterer Einsatz der Serifenschrift ---------- */

/* wärmerer, tieferer Grund mit feinem Farbverlauf */
body{ background:
    radial-gradient(1200px 700px at 78% -8%, rgba(201,160,87,0.055), transparent 68%),
    radial-gradient(900px 600px at 8% 104%, rgba(201,160,87,0.035), transparent 70%),
    var(--bg); }

/* Seitenbeschriftung feiner */
.margin-label{ font-size:10px; letter-spacing:0.40em; color:rgba(244,241,230,0.26); }

/* Serifen-Kursiv als wiederkehrender Akzent */
.eyebrow{ font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:15px; letter-spacing:0.04em; text-transform:none; color:var(--cta); }
.eyebrow::before{ width:26px; opacity:.5; }

.hero-facts .v, .ab-fact .v, .price-card .amount, .delivery .d-value,
.contact-info .row .v, .cp-text strong, .form-success h3, .rot-item{
  font-family:var(--font-serif); }

/* Zahlen in Listen kursiv wie im Titel */
.rlist .num, .card .num, .price-card .plan{ font-family:var(--font-serif); font-style:italic; }
.price-card .plan{ font-size:15px; letter-spacing:0.06em; text-transform:none; font-weight:400; }

/* Akzentwörter im Fliesstext kursiv setzen */
h2 em, h3 em{ font-style:italic; }

/* Karten: feinerer Rand, wärmerer Grund */
.card, .price-card, .pf-card, .form-card, .info-card{
  border-color:rgba(244,241,230,0.075);
  background:linear-gradient(160deg, rgba(244,241,230,0.030), rgba(244,241,230,0.010)); }

/* abgesetzte Abschnitte weicher abheben */
section.alt{ background:linear-gradient(180deg, rgba(244,241,230,0.022), rgba(244,241,230,0.008)); }

/* Grosse Monitore: Inhalt nicht ins Unendliche ziehen */
@media (min-width:1700px){
  .wrap{ max-width:1180px; }
  .hero-home{ padding:120px 0 104px; }
}

/* ============================================================
   DESIGN-REFRESH — hochwertigere Farbwelt, mehr Serifenschrift
   ============================================================ */

:root{
  /* tieferer, wärmerer Grund statt flachem Schwarzgrün */
  --bg:#0E0F0A;
  --bg-raised:#14150E;
  --ink:#F7F4EC;
  --ink-soft:rgba(247,244,236,0.66);
  --ink-faint:rgba(247,244,236,0.38);
  /* edleres Champagner-Gold mit mehr Tiefe */
  --brass:#D4AF6A;
  --brass-soft:rgba(212,175,106,0.46);
  --brass-dim:rgba(212,175,106,0.11);
  --cta:#E8C583;
  --cta-hover:#F3D69B;
  --line:rgba(247,244,236,0.09);
}

body{ background:
    radial-gradient(1100px 640px at 82% -10%, rgba(212,175,106,0.075), transparent 66%),
    radial-gradient(880px 560px at 4% 108%, rgba(212,175,106,0.045), transparent 68%),
    var(--bg); }

/* ---- Serifenschrift als tragendes Element ---- */
.nav a.navlink{ font-family:var(--font-serif); font-weight:400; font-size:16px; letter-spacing:0.01em; }
.nav .logo{ font-family:var(--font-serif); font-weight:400; font-size:20px; letter-spacing:0.06em; }
.nav .logo span{ font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0.02em; }

.btn, .btn-cta, .btn-outline, .nav .cta-small{
  font-family:var(--font-serif); font-weight:500; letter-spacing:0.005em; font-size:15.5px; }
.nav .cta-small{ font-size:14.5px; }

p.lead{ font-family:var(--font-serif); font-weight:400; font-size:20px; line-height:1.6;
  color:var(--ink-soft); letter-spacing:0; }

.badge{ font-family:var(--font-serif); font-size:14.5px; font-weight:400; letter-spacing:0.01em; }
.rlist .t, .card h3, .pf-card h3, .faq-q h3, .info-card h3, .price-card .desc{
  font-family:var(--font-serif); font-weight:500; }
.faq-q h3{ font-size:21px; font-weight:400; }
.price-card .desc{ font-size:16px; color:var(--ink-soft); }
.foot-grid h4{ font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:16px; letter-spacing:0.02em; text-transform:none; }
.step-tag{ font-family:var(--font-serif); font-style:italic; font-size:15px;
  letter-spacing:0.01em; text-transform:none; }
.pf-badge, .pf-tags span{ font-family:var(--font-serif); font-style:italic;
  font-size:13px; letter-spacing:0.02em; text-transform:none; }
.hero-facts .l, .ab-fact .l{ font-family:var(--font-serif); font-style:italic;
  font-size:14px; letter-spacing:0.02em; text-transform:none; color:var(--ink-faint); }
.d-label{ font-family:var(--font-serif); font-style:italic; font-size:14px;
  letter-spacing:0.02em; text-transform:none; }

/* ---- Flächen hochwertiger ---- */
.card, .price-card, .pf-card, .form-card, .info-card{
  border:1px solid rgba(247,244,236,0.065);
  background:linear-gradient(158deg, rgba(247,244,236,0.038) 0%, rgba(247,244,236,0.010) 55%, rgba(212,175,106,0.018) 100%);
  box-shadow:0 1px 0 rgba(247,244,236,0.05) inset; }
.card:hover, .price-card:hover, .pf-card:hover{
  border-color:rgba(212,175,106,0.30);
  box-shadow:0 1px 0 rgba(247,244,236,0.08) inset, 0 22px 52px rgba(0,0,0,0.34); }

section.alt{ background:linear-gradient(180deg, rgba(247,244,236,0.026), rgba(247,244,236,0.006)); }

/* ---- Typografie-Rhythmus ---- */
h1{ letter-spacing:-0.022em; }
h2{ letter-spacing:-0.012em; }
.section-head h2{ font-size:clamp(28px, 3.2vw, 44px); }
.section-head{ margin-bottom:58px; }
section{ padding:96px 0; }

/* ---- Hero feiner ---- */
.hero-title{ text-shadow:0 0 40px rgba(255,246,224,0.10), 0 0 96px rgba(226,190,124,0.09); }
.hero-title em{ filter:drop-shadow(0 0 22px rgba(240,205,140,0.20)); }

/* ---- Navigation edler ---- */
header.site .nav{ background:linear-gradient(150deg, rgba(28,29,20,0.56), rgba(14,15,10,0.42));
  border:0.5px solid rgba(247,244,236,0.055); }
header.site.scrolled .nav{ background:linear-gradient(150deg, rgba(30,31,21,0.80), rgba(14,15,10,0.70));
  border-color:rgba(212,175,106,0.14); }

/* ---- Ränder und Trenner feiner ---- */
.margin-label{ font-family:var(--font-serif); font-style:italic; font-size:12px;
  letter-spacing:0.24em; color:rgba(247,244,236,0.24); text-transform:none; }
.margin-dot{ background:var(--brass); box-shadow:0 0 0 4px rgba(212,175,106,0.09); }

@media (max-width:640px){
  section{ padding:68px 0; }
  p.lead{ font-size:18px; }
  .nav a.navlink{ font-size:17px; }
}

/* ---------- Einwilligung vor dem Laden des Kalenders (DSGVO) ---------- */
.booking-consent{ background:#fff; padding:64px 34px; min-height:420px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.bc-icon{ width:54px; height:54px; border-radius:16px; margin-bottom:22px; color:#A9803A;
  background:rgba(212,175,106,0.14); border:1px solid rgba(212,175,106,0.32);
  display:flex; align-items:center; justify-content:center; }
.bc-icon svg{ width:24px; height:24px; }
.booking-consent h3{ font-family:var(--font-serif); font-weight:500; font-size:24px; color:#15160E; margin-bottom:12px; }
.booking-consent p{ font-family:var(--font-sans); font-size:14.5px; line-height:1.7; color:#4A4C42;
  max-width:440px; margin:0 0 26px; }
.booking-consent p strong{ color:#15160E; font-weight:600; }
.booking-consent p a{ color:#A9803A; border-bottom:1px solid rgba(169,128,58,0.5); }
.booking-consent .btn{ margin-bottom:18px; }
.bc-alt{ font-family:var(--font-serif); font-style:italic; font-size:14.5px; color:#6B6D62;
  border-bottom:1px solid rgba(107,109,98,0.35); }
.bc-alt:hover{ color:#15160E; }

/* ============================================================
   VEREDELUNG — Farbtiefe, Lichtführung, weichere Übergänge
   ============================================================ */

:root{
  /* Grund mit mehr Tiefe: leicht kühlerer Kern, warme Kanten */
  --bg:#0B0C08;
  --bg-raised:#111209;
  /* Gold in voller Spannweite statt einem Ton */
  --gold-hi:#FFEAC0;
  --gold:#E8C583;
  --gold-mid:#D4AF6A;
  --gold-lo:#9A7A42;
  --ink:#F8F6EF;
  --ink-soft:rgba(248,246,239,0.62);
  --ink-faint:rgba(248,246,239,0.34);
  --line:rgba(248,246,239,0.075);
}

/* Grundfläche: mehrschichtige Tiefe statt flacher Farbe */
body{ background:
    radial-gradient(1400px 820px at 76% -14%, rgba(212,175,106,0.085), transparent 62%),
    radial-gradient(1100px 700px at 6% 112%, rgba(212,175,106,0.050), transparent 64%),
    radial-gradient(900px 900px at 50% 42%, rgba(255,234,192,0.016), transparent 70%),
    var(--bg); }

/* durchgehende Feinkörnung — gibt der Fläche Materialität */
body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.022;
  background-image:radial-gradient(rgba(255,255,255,0.9) 0.5px, transparent 0.5px);
  background-size:3px 3px; }

/* sanfte Randabdunklung — zieht den Blick zur Mitte */
body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 92% 78% at 50% 46%,
    transparent 52%, rgba(0,0,0,0.14) 78%, rgba(0,0,0,0.30) 100%); }

/* ---- Lichtführung im Kopfbereich ---- */
.hero-aura::before{
  background:
    radial-gradient(ellipse 40% 40% at 50% 50%,
      rgba(255,236,196,0.088) 0%,
      rgba(246,218,166,0.072) 12%,
      rgba(234,201,142,0.056) 24%,
      rgba(220,186,120,0.040) 36%,
      rgba(210,174,106,0.027) 48%,
      rgba(206,170,102,0.017) 60%,
      rgba(204,168,100,0.009) 72%,
      rgba(204,168,100,0.004) 84%,
      rgba(204,168,100,0) 100%);
  filter:blur(3px); }

/* feine Lichtkante ganz oben — wie eine Kante, die das Licht bricht */
.hero-home::before{ content:''; position:absolute; top:0; left:14%; right:14%; height:1px; z-index:1;
  background:linear-gradient(90deg,
    transparent, rgba(232,197,131,0.12) 22%, rgba(255,238,200,0.24) 50%,
    rgba(232,197,131,0.12) 78%, transparent);
  pointer-events:none; }

/* ---- Überschrift mit Verlauf statt Volltonfarbe ---- */
.hero-title{
  background:linear-gradient(176deg, #FFFEFA 0%, #F7F2E6 42%, #DED4C2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 40px rgba(255,248,228,0.08)); }
.hero-title em{ font-style:italic; font-weight:400;
  background:linear-gradient(102deg, var(--gold-hi) 0%, var(--gold) 40%, var(--gold-mid) 70%, #C29B54 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(232,197,131,0.20)); }

/* ---- Flächen: Lichtkante oben, gestufte Schatten ---- */
.card, .price-card, .pf-card, .form-card, .info-card, .offer{
  position:relative;
  border:1px solid rgba(248,246,239,0.055);
  background:
    linear-gradient(180deg, rgba(248,246,239,0.055) 0%, rgba(248,246,239,0) 1px),
    linear-gradient(158deg, rgba(248,246,239,0.032) 0%, rgba(248,246,239,0.008) 52%, rgba(212,175,106,0.016) 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 8px 20px rgba(0,0,0,0.16),
    0 24px 56px rgba(0,0,0,0.20);
  transition:border-color .7s cubic-bezier(.19,1,.3,1),
             transform .7s cubic-bezier(.19,1,.3,1),
             box-shadow .7s cubic-bezier(.19,1,.3,1); }

.card:hover, .price-card:hover, .pf-card:hover{
  transform:translateY(-4px);
  border-color:rgba(212,175,106,0.32);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.20),
    0 12px 28px rgba(0,0,0,0.22),
    0 34px 76px rgba(0,0,0,0.30),
    0 0 42px rgba(212,175,106,0.07); }

/* ---- Abschnitte gehen weich ineinander über ---- */
section.alt{ position:relative;
  background:linear-gradient(180deg,
    rgba(248,246,239,0.010) 0%, rgba(248,246,239,0.026) 22%,
    rgba(248,246,239,0.026) 78%, rgba(248,246,239,0.010) 100%); }
section.alt::before, section.alt::after{ content:''; position:absolute; left:0; right:0; height:90px;
  pointer-events:none; }
section.alt::before{ top:0;    background:linear-gradient(180deg, rgba(11,12,8,0.45), transparent); }
section.alt::after { bottom:0; background:linear-gradient(0deg,   rgba(11,12,8,0.45), transparent); }

/* ---- Einblenden beim Scrollen: ruhiger und länger ---- */
.reveal{ opacity:0; transform:translate3d(0,30px,0);
  transition:opacity 1.05s cubic-bezier(.16,.84,.32,1), transform 1.05s cubic-bezier(.16,.84,.32,1); }
.reveal.d1{ transition-delay:.13s; }
.reveal.d2{ transition-delay:.26s; }
.reveal.d3{ transition-delay:.39s; }

/* ---- Bedienelemente ---- */
.btn, .btn-cta, .btn-outline, .nav .cta-small, .nav a.navlink, .nav .logo, .nav .wa-btn{
  transition-timing-function:cubic-bezier(.19,1,.3,1);
  transition-duration:.65s; }

.btn-cta{ background:linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 52%, #DFB362 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(120,86,26,0.16),
    0 2px 6px rgba(0,0,0,0.20),
    0 6px 20px rgba(212,175,106,0.20); }
.btn-cta:hover{ transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 4px 12px rgba(0,0,0,0.22),
    0 14px 38px rgba(212,175,106,0.32),
    0 0 44px rgba(232,197,131,0.16); }

.btn-outline{ border-color:rgba(248,246,239,0.14);
  background:linear-gradient(180deg, rgba(248,246,239,0.045), rgba(248,246,239,0.012)); }
.btn-outline:hover{ border-color:rgba(212,175,106,0.48);
  background:linear-gradient(180deg, rgba(212,175,106,0.10), rgba(212,175,106,0.03));
  box-shadow:0 10px 28px rgba(0,0,0,0.24); }

/* ---- Badge feiner ---- */
.badge{ background:linear-gradient(180deg, rgba(95,203,140,0.11), rgba(95,203,140,0.035));
  border-color:rgba(95,203,140,0.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 12px rgba(0,0,0,0.18); }

/* ---- Seitenränder dezenter ---- */
.margin-label{ color:rgba(248,246,239,0.20); }
.margin-rule{ background:linear-gradient(to bottom, transparent, rgba(248,246,239,0.055) 14%,
              rgba(248,246,239,0.055) 86%, transparent); }
.margin-dot{ background:var(--gold-mid); box-shadow:0 0 10px rgba(212,175,106,0.35); }

/* ---- Textmarkierung ---- */
::selection{ background:rgba(232,197,131,0.26); color:#FFFDF7; }

/* ============================================================
   FEINABSTIMMUNG — Navigation, Hintergrund, Feuerschein
   ============================================================ */

/* Seitenränder vollständig deaktivieren */
.margin-rule, .margin-label, .margin-dot{ display:none !important; }

/* ---- Navigation: keine Umrandung, kompakter, kleinere Schrift ---- */
header.site{ padding:12px 0 4px; }
header.site .nav{
  border:none !important;
  background:linear-gradient(150deg, rgba(24,25,16,0.44), rgba(9,10,6,0.32));
  border-radius:14px; padding:8px 10px 8px 16px;
  box-shadow:none !important; }
header.site.scrolled .nav{
  background:linear-gradient(150deg, rgba(26,27,17,0.72), rgba(9,10,6,0.60));
  box-shadow:none !important; }
header.site::after{ content:none !important; }

.nav{ gap:clamp(20px, 2.4vw, 38px); }
.nav ul{ gap:22px; }
.nav a.navlink{ font-size:14px; padding:5px 2px; }
.nav .logo{ font-size:15px; letter-spacing:0.05em; }
.nav .cta-small{ font-size:12.5px; padding:9px 17px; border-radius:9px; }
.nav .wa-btn{ width:33px; height:33px; }
.nav .wa-btn svg{ width:17px; height:17px; }

/* auf grossen Monitoren nicht mitwachsen */
@media (min-width:1600px){
  .nav{ gap:32px; }
  .nav ul{ gap:20px; }
  .nav a.navlink{ font-size:13.5px; }
  .nav .logo{ font-size:14.5px; }
  .nav .cta-small{ font-size:12px; padding:8px 16px; }
  .nav .wa-btn{ width:31px; height:31px; }
}

/* ---- Hintergrund dunkler, ruhiger ---- */
:root{ --bg:#070803; --bg-raised:#0C0D06; }
body{ background:
    radial-gradient(1200px 700px at 78% -16%, rgba(190,152,88,0.045), transparent 60%),
    radial-gradient(900px 600px at 4% 114%, rgba(190,152,88,0.026), transparent 62%),
    var(--bg); }
body::after{ background:radial-gradient(ellipse 90% 76% at 50% 46%,
    transparent 48%, rgba(0,0,0,0.20) 76%, rgba(0,0,0,0.42) 100%); }

/* ---- Licht: warmer Feuerschein, eng um die Überschrift ---- */
.hero-aura{ position:absolute; inset:0; }
.hero-aura::before{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(1020px, 82vw); height:min(560px, 46vw);
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(255,206,132,0.115) 0%,
      rgba(248,186,110,0.092) 11%,
      rgba(236,164,88,0.070) 22%,
      rgba(216,140,68,0.050) 33%,
      rgba(192,116,52,0.034) 44%,
      rgba(168,96,40,0.021) 55%,
      rgba(146,80,32,0.012) 66%,
      rgba(126,66,26,0.006) 78%,
      rgba(110,56,22,0.002) 88%,
      rgba(110,56,22,0) 100%);
  filter:blur(6px); }

/* glühender Kern direkt hinter dem Text */
.hero-aura::after{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(600px, 52vw); height:min(300px, 26vw);
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(255,224,168,0.075) 0%,
      rgba(252,198,128,0.054) 20%,
      rgba(238,168,92,0.032) 42%,
      rgba(214,134,62,0.014) 64%,
      rgba(190,110,46,0.004) 82%,
      rgba(190,110,46,0) 100%);
  filter:blur(18px); }

/* Schrift greift den warmen Ton auf */
.hero .hero-title{ font-size:clamp(34px, 4.1vw, 106px); }
.hero-title{ filter:drop-shadow(0 0 34px rgba(255,222,170,0.10)); }
.hero-title em{
  background:linear-gradient(102deg, #FFE3B4 0%, #F0C079 40%, #D9A45C 72%, #B9853F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(244,186,110,0.24)); }

/* obere Lichtkante entfernen */
.hero-home::before{ content:none !important; }

@media (max-width:640px){
  .nav a.navlink{ font-size:16px; }
  .hero-aura::before{ width:96vw; height:56vw; }
  .hero-aura::after{ width:70vw; height:34vw; }
}

/* ============================================================
   NAVIGATION — Feinabstimmung
   ============================================================ */

/* Schrift wieder etwas größer */
.nav a.navlink{ font-size:16.5px; }
.nav .logo{ font-size:18px; }
.nav .cta-small{ font-size:14.5px; padding:10px 20px; }
@media (min-width:1600px){
  .nav a.navlink{ font-size:16px; }
  .nav .logo{ font-size:17.5px; }
  .nav .cta-small{ font-size:14px; padding:9px 19px; }
}

/* mehr Luft: Logo → Menü und Menü → rechte Gruppe */
.nav{ gap:clamp(34px, 4.2vw, 62px); }
.nav ul{ gap:26px; }
.nav-right{ gap:16px; }
header.site .nav{ padding:8px 14px 8px 20px; }

/* Logo ohne Leuchten */
.nav .logo{ text-shadow:none !important; }
.nav .logo span{ text-shadow:none !important; }
.nav .logo:hover{ text-shadow:none !important; }
.nav .logo::before{ content:none !important; }

/* WhatsApp-Symbol farblos und transparent */
.nav .wa-btn{ background:transparent; border:1px solid rgba(248,246,239,0.22);
  transition:border-color .6s ease, background .6s ease, transform .6s cubic-bezier(.19,1,.3,1); }
.nav .wa-btn svg{ fill:rgba(248,246,239,0.88); transition:fill .6s ease; }
.nav .wa-btn:hover{ background:rgba(248,246,239,0.05); border-color:rgba(248,246,239,0.30);
  transform:translateY(-1px); box-shadow:none; }
.nav .wa-btn:hover svg{ fill:#FFFFFF; }

/* ---- Trennlinien um das Laufband: zu den Rändern hin auslaufend ---- */
.rotator{ border:none; position:relative;
  background:
    radial-gradient(520px circle at 50% 130%, rgba(201,160,87,0.055), transparent 70%),
    radial-gradient(ellipse 88% 100% at 50% 50%, rgba(244,241,230,0.032), rgba(244,241,230,0.018) 58%, rgba(244,241,230,0.005) 86%, transparent 100%); }
.rotator::before, .rotator::after{
  content:''; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(248,246,239,0) 0%,
    rgba(248,246,239,0.028) 8%,
    rgba(248,246,239,0.070) 18%,
    rgba(248,246,239,0.105) 30%,
    rgba(248,246,239,0.125) 42%,
    rgba(248,246,239,0.130) 50%,
    rgba(248,246,239,0.125) 58%,
    rgba(248,246,239,0.105) 70%,
    rgba(248,246,239,0.070) 82%,
    rgba(248,246,239,0.028) 92%,
    rgba(248,246,239,0) 100%); }
.rotator::before{ top:0; }
.rotator::after{ bottom:0; }

/* ============================================================
   OHNE FOTO — typografische Ersatzelemente
   ============================================================ */

/* Zitatkarte auf der Startseite */
.quote-card{ position:relative; max-width:420px; margin-left:auto; padding:44px 40px 38px;
  border:1px solid rgba(248,246,239,0.065); border-radius:16px;
  background:
    linear-gradient(180deg, rgba(248,246,239,0.055) 0%, rgba(248,246,239,0) 1px),
    linear-gradient(158deg, rgba(248,246,239,0.030) 0%, rgba(248,246,239,0.008) 55%, rgba(212,175,106,0.016) 100%);
  box-shadow:0 1px 2px rgba(0,0,0,0.18), 0 18px 44px rgba(0,0,0,0.22); }
.qc-mark{ display:block; font-family:var(--font-serif); font-style:italic; font-size:76px; line-height:.5;
  color:rgba(232,197,131,0.34); margin-bottom:14px; }
.qc-text{ font-family:var(--font-serif); font-style:italic; font-size:19.5px; line-height:1.62;
  color:var(--ink); margin:0 0 26px; }
.qc-by{ display:flex; flex-direction:column; gap:3px; padding-top:20px;
  border-top:1px solid rgba(248,246,239,0.07); }
.qc-name{ font-family:var(--font-serif); font-size:16px; color:var(--gold); }
.qc-role{ font-size:13.5px; color:var(--ink-faint); }

/* Kurzprofil auf "Über mich" */
.profile-card{ max-width:400px; margin-left:auto; padding:36px 34px;
  border:1px solid rgba(248,246,239,0.065); border-radius:16px;
  background:
    linear-gradient(180deg, rgba(248,246,239,0.055) 0%, rgba(248,246,239,0) 1px),
    linear-gradient(158deg, rgba(248,246,239,0.030) 0%, rgba(248,246,239,0.008) 55%, rgba(212,175,106,0.016) 100%);
  box-shadow:0 1px 2px rgba(0,0,0,0.18), 0 18px 44px rgba(0,0,0,0.22); }
.pc-eyebrow{ display:block; font-family:var(--font-serif); font-style:italic; font-size:15px;
  color:var(--gold); margin-bottom:20px; }
.pc-list{ display:flex; flex-direction:column; }
.pc-list li{ display:flex; flex-direction:column; gap:3px; padding:13px 0;
  border-bottom:1px solid rgba(248,246,239,0.06); }
.pc-list li:last-child{ border-bottom:none; padding-bottom:0; }
.pc-k{ font-size:12.5px; letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-faint); }
.pc-v{ font-family:var(--font-serif); font-size:17px; color:var(--ink); }

/* Initialen statt Portrait auf der Kontaktseite */
.cp-mark{ flex:none; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:19px; letter-spacing:0.04em; color:var(--gold);
  border:1px solid rgba(212,175,106,0.34);
  background:linear-gradient(150deg, rgba(212,175,106,0.13), rgba(212,175,106,0.03)); }

@media (max-width:860px){
  .quote-card, .profile-card{ max-width:none; margin-left:0; }
}

/* ---- Navigation: mehr Luft aussen, dünnere Schrift ---- */
.nav{ gap:clamp(52px, 6.2vw, 92px); }
.nav ul{ gap:26px; }
header.site .nav{ padding:8px 16px 8px 24px; }

.nav a.navlink{ font-weight:300; }
.nav .logo{ font-weight:300; }
.nav .logo span{ font-weight:400; }
.nav .cta-small{ font-weight:500; }

@media (min-width:1600px){
  .nav{ gap:78px; }
}

/* ============================================================
   ZITAT IM KOPFBEREICH — links oben, dezent
   ============================================================ */
.hero-quote{ position:absolute; top:92px; left:clamp(28px, 4.4vw, 84px); z-index:2;
  max-width:288px; padding-left:20px; pointer-events:none;
  border-left:1px solid rgba(212,175,106,0.24);
  animation:fadeUp 1.1s .35s cubic-bezier(.19,1,.3,1) both; }
.hq-mark{ display:block; font-family:var(--font-serif); font-style:italic; font-size:46px;
  line-height:.4; color:rgba(232,197,131,0.30); margin-bottom:14px; }
.hq-text{ font-family:var(--font-serif); font-style:italic; font-size:14.5px; line-height:1.62;
  color:rgba(248,246,239,0.52); margin:0 0 16px; }
.hq-name{ display:block; font-family:var(--font-serif); font-size:13.5px; color:var(--gold); }
.hq-role{ display:block; font-size:12px; color:var(--ink-faint); margin-top:2px; }

/* auf schmalen Bildschirmen ausblenden, damit nichts gedrängt wirkt */
@media (max-width:1279px){ .hero-quote{ display:none; } }

/* ---- Navigation: mehr Luft, dünnere Schrift, auf 24 Zoll kompakter ---- */
.nav{ gap:clamp(64px, 7.4vw, 116px); }
header.site .nav{ padding:8px 18px 8px 28px; }
.nav-right{ gap:18px; }

.nav a.navlink{ font-weight:300; }
.nav .logo{ font-weight:300; }
.nav .logo span{ font-weight:400; }
.nav .cta-small{ font-weight:500; }

/* WhatsApp deutlicher */
.nav .wa-btn svg{ fill:rgba(255,255,255,0.97); }
.nav .wa-btn{ border-color:rgba(255,255,255,0.30); }
.nav .wa-btn:hover svg{ fill:#FFFFFF; }
.nav .wa-btn:hover{ border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.07); }

/* 24 Zoll und grösser: Leiste kompakter */
@media (min-width:1800px){
  .nav{ gap:74px; }
  .nav ul{ gap:22px; }
  .nav a.navlink{ font-size:14.5px; }
  .nav .logo{ font-size:16px; }
  .nav .cta-small{ font-size:12.5px; padding:8px 17px; }
  .nav .wa-btn{ width:30px; height:30px; }
  .nav .wa-btn svg{ width:15px; height:15px; }
  header.site .nav{ padding:7px 15px 7px 24px; }
}

/* ============================================================
   ZITAT-ABSCHNITT auf der Startseite
   ============================================================ */
.quote-section{ padding:104px 0; }
.big-quote{ max-width:860px; margin:0 auto; text-align:center; }
.bq-mark{ display:block; font-family:var(--font-serif); font-style:italic;
  font-size:clamp(64px, 7vw, 104px); line-height:.42;
  color:rgba(232,197,131,0.28); margin-bottom:30px; }
.bq-text{ font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(24px, 2.7vw, 40px); line-height:1.44; letter-spacing:-0.008em;
  color:var(--ink); margin:0 0 40px;
  background:linear-gradient(176deg, #FFFEFA 0%, #F5F0E3 52%, #DFD6C4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.bq-by{ display:inline-flex; flex-direction:column; gap:4px; padding-top:26px;
  border-top:1px solid rgba(248,246,239,0.10); }
.bq-name{ font-family:var(--font-serif); font-size:17px; color:var(--gold); }
.bq-role{ font-size:13.5px; color:var(--ink-faint); }

@media (max-width:640px){ .quote-section{ padding:72px 0; } }

/* ---- Navigation: mehr Luft, dünner, Logo leuchtet beim Darüberfahren ---- */
.nav{ gap:clamp(76px, 8.8vw, 140px); }
header.site .nav{ padding:8px 22px 8px 32px; }

.nav a.navlink{ font-weight:300; }
.nav .logo{ font-weight:300; text-shadow:none;
  transition:text-shadow .55s ease, transform .55s cubic-bezier(.19,1,.3,1); }
.nav .logo span{ font-weight:400; text-shadow:none; }
.nav .logo:hover{ transform:translateY(-1px);
  text-shadow:0 0 22px rgba(255,252,240,0.55), 0 0 48px rgba(255,252,240,0.22) !important; }
.nav .logo:hover span{
  text-shadow:0 0 22px rgba(232,197,131,0.75), 0 0 48px rgba(232,197,131,0.32) !important; }

/* WhatsApp noch heller */
.nav .wa-btn svg{ fill:#FFFFFF; }
.nav .wa-btn{ border-color:rgba(255,255,255,0.38); }
.nav .wa-btn:hover{ border-color:rgba(255,255,255,0.70); background:rgba(255,255,255,0.09); }

/* ============================================================
   LOGO — weiß, mit Perlglanz der durch die Buchstaben wandert
   ============================================================ */
.nav .logo{ position:relative; isolation:isolate;
  padding:7px 8px; border-radius:9px;
  /* Grundfläche weiß, mit einem Perlband, das links ausserhalb parkt */
  color:#FFFFFF;
  transition:filter 1.1s ease, transform .9s cubic-bezier(.19,1,.3,1); }

.nav .logo span{ color:#FFFFFF !important; text-shadow:none !important; }


.nav .logo:hover{ transform:translateY(-2px);
  filter:brightness(1.12)
         drop-shadow(0 0 10px rgba(255,255,255,0.55))
         drop-shadow(0 0 28px rgba(238,224,255,0.36))
         drop-shadow(0 0 58px rgba(200,238,255,0.24))
         drop-shadow(0 0 100px rgba(255,232,204,0.14)); }

@media (prefers-reduced-motion: reduce){
  .nav .logo{ transition:filter .3s ease; }
}

/* ---- Navigationsschrift ---- */
.nav a.navlink{ font-size:16.5px; }
.nav .logo{ font-size:18px; }
.nav .cta-small{ font-size:14px; padding:10px 20px; }
@media (min-width:1800px){
  .nav a.navlink{ font-size:15.5px; }
  .nav .logo{ font-size:17.5px; }
  .nav .cta-small{ font-size:13.5px; padding:9px 19px; }
}

/* ---- sehr schmale Geräte: Logo und Leiste kompakter ---- */
@media (max-width:400px){
  .nav a.navlink{ font-size:16px; }
  .nav .logo{ font-size:16.5px; letter-spacing:0.06em; padding:6px 4px; }
  header.site .nav{ padding:8px 12px 8px 14px; }
  .nav{ gap:14px; }
  .nav-right{ gap:10px; }
}
/* dekorative Lichtflächen dürfen nie Überlauf erzeugen */
.offer-glow, .hero-aura, .hero-grain{ max-width:100%; }
.offer{ overflow:hidden; }

/* ---------- Ergänzende Leistung: Grafikdesign ---------- */
.addon{ margin-top:52px; padding:38px 40px; border-radius:16px;
  border:1px solid rgba(247,244,236,0.055);
  background:linear-gradient(158deg, rgba(247,244,236,0.026) 0%, rgba(247,244,236,0.006) 60%,
             rgba(212,175,106,0.012) 100%); }
.addon-head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.addon-tag{ font-family:var(--font-serif); font-style:italic; font-size:14.5px;
  color:var(--gold); border:1px solid rgba(226,190,124,0.30);
  padding:5px 15px; border-radius:100px; }
.addon-head h3{ font-family:var(--font-serif); font-weight:400; font-size:27px; color:var(--ink); }
.addon > p{ font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:640px; margin:0 0 24px; }
.addon-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.addon-tags span{ font-family:var(--font-serif); font-style:italic; font-size:15px;
  color:var(--ink-soft); border:1px solid rgba(247,244,236,0.09);
  padding:8px 17px; border-radius:100px; background:rgba(247,244,236,0.015); }
@media (max-width:640px){ .addon{ padding:30px 24px; } }

/* ============================================================
   SCHRIFT — überall serifenlos, nur der Hero-Titel bleibt
   ============================================================ */
:root{
  --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype",
                  Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}

/* alles, was bisher Serife war, wird serifenlos */
body, h1, h2, h3, h4, h5, h6, p, li, a, span, div, button, input, select, textarea,
.eyebrow, .rlist .num, .card .num, .price-card .plan, .price-card .amount,
.price-card .desc, .delivery .d-value, .d-label, .hero-facts .v, .hero-facts .l,
.ab-fact .v, .ab-fact .l, .step-tag, .pf-badge, .pf-tags span, .foot-grid h4,
.rot-item, .bq-text, .bq-name, .bq-mark, .contact-info .row .v, .cp-text strong,
.cp-mark, .form-success h3, .pc-eyebrow, .pc-v, .qc-mark, .qc-text, .qc-name,
.margin-label, .addon-tag, .addon-head h3, .addon-tags span, .booking-logo,
.bc-alt, .booking-consent h3, .legal h2, .legal h3, .quote-mark, .offer-tag,
.oh-tag, .oh-text, .fb-tag, .fb-text, .os-label, .os-count, .op-old, .op-new,
.op-save, .nav .logo, .nav .logo span, .nav a.navlink, .nav .cta-small,
.btn, .btn-cta, .btn-outline, .badge, p.lead{
  font-family:var(--font-sans) !important;
  font-style:normal !important;
}

/* Nur die Hauptüberschrift behält die Serifenschrift */
.hero .hero-title, .hero .hero-title em{
  font-family:var(--font-display) !important;
  font-style:italic !important;
}

/* Feinabstimmung nach dem Wechsel */
.eyebrow{ font-size:13px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500; }
.rlist .num, .card .num{ font-weight:300; letter-spacing:0.02em; }
.price-card .plan{ font-size:13px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500; }
.price-card .amount{ font-weight:300; letter-spacing:-0.02em; }
.d-label, .hero-facts .l, .ab-fact .l, .pc-eyebrow{ font-size:12.5px;
  letter-spacing:0.12em; text-transform:uppercase; font-weight:500; }
.step-tag{ font-size:13px; letter-spacing:0.10em; text-transform:uppercase; font-weight:500; }
.pf-badge, .pf-tags span, .addon-tag{ font-size:12px; letter-spacing:0.10em;
  text-transform:uppercase; font-weight:500; }
.foot-grid h4{ font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
.bq-text{ font-weight:300; letter-spacing:-0.012em; line-height:1.38; }
.quote-mark, .bq-mark{ font-weight:300; }
.margin-label{ font-size:11px; letter-spacing:0.26em; }
p.lead{ font-weight:300; letter-spacing:0; }
.legal h2{ font-weight:500; }
.rot-item{ font-weight:500; letter-spacing:-0.012em; }
.hero-facts .v, .ab-fact .v, .delivery .d-value, .contact-info .row .v,
.cp-text strong, .pc-v, .form-success h3, .bq-name, .addon-head h3{ font-weight:400; }

/* ---- Navigation etwas grösser ---- */
header.site .nav{ padding:11px 24px 11px 34px; }
.nav a.navlink{ font-size:17.5px; font-weight:300; }
.nav .logo{ font-size:19.5px; font-weight:300; letter-spacing:0.09em; }
.nav .logo span{ font-weight:400; }
.nav .cta-small{ font-size:15px; padding:12px 23px; }
.nav .wa-btn{ width:39px; height:39px; }
.nav .wa-btn svg{ width:19px; height:19px; }
@media (min-width:1800px){
  .nav a.navlink{ font-size:16.5px; }
  .nav .logo{ font-size:18.5px; }
  .nav .cta-small{ font-size:14px; padding:11px 21px; }
  .nav .wa-btn{ width:36px; height:36px; }
  .nav .wa-btn svg{ width:18px; height:18px; }
}

/* ============================================================
   SCHRIFTMISCHUNG — serifenlos für Titel und Navigation,
   Serifenschrift für Fliesstext und Beschreibungen
   ============================================================ */

/* Fliesstexte und beschreibende Passagen zurück auf Serife */
p.lead, .bq-text, .row p, .rlist p, .card p, .price-card .desc,
.addon > p, .legal p, .legal li, .faq-a p, .info-card p, .form-success p,
.qc-text, .step-tag, .pc-v, .contact-info .row .v, .cp-text span,
.hero-facts .l, .ab-fact .l, .d-label, .pf-tags span, .pf-card .pf-info p,
.foot-grid p, .booking-consent p, .quote-mark, .bq-mark, .qc-mark,
.eyebrow, .pc-eyebrow, .addon-tag, .addon-tags span, .rot-item{
  font-family:var(--font-display) !important; }

/* davon kursiv: Label und Auszeichnungen */
.eyebrow, .pc-eyebrow, .addon-tag, .step-tag, .hero-facts .l, .ab-fact .l,
.d-label, .pf-tags span, .addon-tags span, .quote-mark, .bq-mark, .qc-mark{
  font-style:italic !important; text-transform:none !important;
  letter-spacing:0.01em !important; font-weight:400 !important; }
.eyebrow{ font-size:16px; }
.step-tag{ font-size:15.5px; }
.d-label, .hero-facts .l, .ab-fact .l, .pc-eyebrow{ font-size:15px; }
.addon-tag, .pf-tags span, .addon-tags span{ font-size:14.5px; }

/* Fliesstext luftiger setzen */
p.lead{ font-weight:400; font-size:21px; line-height:1.62; letter-spacing:0; }
.card p, .rlist p, .row p, .legal p, .legal li, .faq-a p, .info-card p,
.addon > p, .price-card .desc, .form-success p, .foot-grid p{
  font-weight:400; letter-spacing:0.002em; line-height:1.68; }
.legal p, .legal li{ font-size:17px; }
.card p, .addon > p{ font-size:17px; }
.rlist p, .row p{ font-size:17.5px; }
.faq-a p{ font-size:17.5px; }
.price-card .desc{ font-size:17px; }
.bq-text{ font-style:italic !important; font-weight:400; line-height:1.42; }
.rot-item{ font-weight:400; letter-spacing:-0.01em; }

/* Überschriften, Zahlen und Bedienelemente bleiben serifenlos */
h1, h2, h3, h4, .nav a.navlink, .nav .logo, .nav .cta-small,
.btn, .btn-cta, .btn-outline, .badge, .price-card .amount, .price-card .plan,
.hero-facts .v, .ab-fact .v, .delivery .d-value, .rlist .num, .card .num,
.pf-badge, .foot-grid h4, .field label, .form-note, .checkbox{
  font-family:var(--font-sans) !important; font-style:normal !important; }

/* Hero-Titel behält die Serifenschrift */
.hero .hero-title, .hero .hero-title em{
  font-family:var(--font-display) !important; font-style:italic !important; }

/* ============================================================
   FEINSCHLIFF — Addon-Block, Logo-Leuchten, Schriftmischung
   ============================================================ */

/* Addon: Breite an den Inhalt binden, Kasten wirkt sonst überdehnt */
.addon{ max-width:760px; padding:34px 36px; }
.addon-head{ margin-bottom:14px; gap:16px; }
.addon-head h3{ font-size:25px; }
.addon > p{ font-size:16.5px; max-width:none; margin-bottom:22px; }
.addon-tags{ gap:9px; }
.addon-tags span{ padding:7px 15px; font-size:14px; }
@media (max-width:820px){ .addon{ max-width:none; } }

/* Logo: beide Wortteile leuchten gleich */
.nav .logo{ color:#FFFFFF; }
.nav .logo span{ color:#FFFFFF !important; }
.nav .logo:hover, .nav .logo:hover span{
  text-shadow:0 0 12px rgba(255,255,255,0.62),
              0 0 30px rgba(238,226,255,0.34),
              0 0 62px rgba(206,238,255,0.20) !important; }
.nav .logo:hover{ filter:none; }

/* ---- Schriftmischung verfeinert ----
   Regel: Serifenschrift für alles, was gelesen wird (Fliesstext,
   Beschreibungen, Label). Serifenlos für alles, was erfasst wird
   (Überschriften, Zahlen, Bedienelemente, Kontaktdaten). */

/* Kontaktdaten, Preise und Zeitangaben serifenlos — bessere Lesbarkeit */
.contact-info .row .v, .cp-text strong, .pc-v, .delivery .d-value,
.hero-facts .v, .ab-fact .v, .b-contact{
  font-family:var(--font-sans) !important; font-weight:400 !important;
  font-style:normal !important; letter-spacing:0.002em; }
.cp-text span{ font-family:var(--font-sans) !important; font-style:normal !important; }

/* Aufzählungen in Preiskarten serifenlos — kurze Angaben, kein Fliesstext */
.price-card ul li{ font-family:var(--font-sans) !important; font-style:normal !important;
  font-size:15px; line-height:1.62; }

/* Portfolio-Kennzeichnungen serifenlos, klein und ruhig */
.pf-tags span, .pf-badge{ font-family:var(--font-sans) !important; font-style:normal !important;
  font-size:12px; letter-spacing:0.10em; text-transform:uppercase; font-weight:500; }

/* Label kursiv, aber etwas kleiner und ruhiger */
.eyebrow{ font-size:15.5px; letter-spacing:0.015em; }
.step-tag{ font-size:15px; }
.d-label, .hero-facts .l, .ab-fact .l, .pc-eyebrow{ font-size:14.5px; }
.addon-tag{ font-size:14px; }
.addon-tags span{ font-family:var(--font-display) !important; font-style:italic !important;
  font-size:14.5px; }

/* Fliesstext: Zeilenlänge begrenzen für ruhigeren Satz */
.card p, .addon > p{ max-width:62ch; }
.rlist p, .row p{ max-width:60ch; }
.legal p, .legal li{ max-width:70ch; }
.faq-a p{ max-width:66ch; }

/* Formularbeschriftungen und Hinweise serifenlos */
.field label, .form-note, .checkbox, .checkbox span{
  font-family:var(--font-sans) !important; font-style:normal !important; }
.form-note{ font-size:13.5px; }

/* Zitat-Abschnitt: Serifenschrift, ruhiger Satz */
.bq-text{ font-size:clamp(23px, 2.5vw, 37px); line-height:1.44; }
.bq-name{ font-family:var(--font-sans) !important; font-style:normal !important;
  font-weight:400; font-size:16px; }
.bq-role{ font-family:var(--font-sans) !important; font-size:13.5px;
  letter-spacing:0.10em; text-transform:uppercase; }

/* Fusszeile serifenlos */
.foot-grid a, .foot-bottom span{ font-family:var(--font-sans) !important;
  font-style:normal !important; }

/* Fussnoten auf der Preisseite: Zeilenlänge begrenzen */
.form-note{ max-width:74ch; }

/* ============================================================
   DARSTELLUNGSSCHÄRFE — Symbole und Kanten
   ============================================================ */

/* WhatsApp-Symbol grösser und scharf */
.nav .wa-btn{ width:42px; height:42px; }
.nav .wa-btn svg{ width:22px; height:22px; shape-rendering:geometricPrecision; }
@media (min-width:1800px){
  .nav .wa-btn{ width:39px; height:39px; }
  .nav .wa-btn svg{ width:20px; height:20px; }
}
.wa-inline svg, .whatsapp-row svg, .wa-icon svg{ shape-rendering:geometricPrecision; }
.whatsapp-row .wa-icon{ width:50px; height:50px; }
.whatsapp-row .wa-icon svg{ width:25px; height:25px; }

/* Alle SVG scharf zeichnen */
svg{ shape-rendering:geometricPrecision; text-rendering:geometricPrecision; }

/* Schriftglättung — verhindert ausgefranste Kanten auf dunklem Grund */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; }

/* Hauchdünne Linien auf ganze Pixel zwingen */
.hairline, .rotator::before, .rotator::after,
.rlist li, .price-card ul li, .pc-list li, .list li{
  transform:translateZ(0); }

/* Runde Elemente sauber kantenglätten */
.wa-btn, .badge, .btn, .btn-cta, .btn-outline, .cta-small,
.addon-tag, .addon-tags span, .pf-tags span, .pf-badge, .cp-mark{
  -webkit-backface-visibility:hidden; backface-visibility:hidden; }

/* Bilder scharf skalieren */
img{ image-rendering:auto; }

/* Während Einblend-Animationen scharf zeichnen, danach freigeben */
.reveal{ backface-visibility:hidden; -webkit-font-smoothing:antialiased; }
.reveal.visible{ backface-visibility:visible; }

/* WhatsApp-Karte: Beschriftung über den Text setzen */
.whatsapp-row .wa-text{ display:flex; flex-direction:column; gap:4px; }
.whatsapp-row .wa-text .l{ display:block; font-family:var(--font-sans); font-size:12.5px;
  letter-spacing:0.12em; text-transform:uppercase; font-weight:500; color:var(--gold); }
.whatsapp-row .wa-text .v{ display:block; font-family:var(--font-sans) !important;
  font-style:normal !important; font-weight:400; font-size:19px; color:var(--ink); }