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

/* ============================================================
   MALERMEISTER ATAI — Design-System
   Richtung: "Goldstrich-Signature"
   Palette : Navy #1E3A5F · Gold #C0A062 (Markenvorgabe)
   Fonts   : Playfair Display (Display) + Manrope (Body/UI)
   Corner  : scharfe Flächen (4px), weiche Aktionen (pill)
   ============================================================ */

:root{
  /* --- Marke --- */
  --navy:#1E3A5F;
  --navy-deep:#16304F;
  --navy-ink:#0D2440;
  --navy-900:#081C33;
  --navy-soft:#2F5480;
  --gold:#C0A062;
  --gold-lt:#D7BE8B;
  --gold-dk:#A38449;      /* Flaechen, Icons, UI – ab 3:1 */
  --gold-text:#876B32;    /* Goldton fuer kleine Schrift auf Hell – haelt 4.5:1 */
  --acc:#C0A062;                 /* je Karte inline ueberschrieben */
  --acc-tint:rgba(192,160,98,.13);
  --acc-soft:#E8DCC2;            /* kraeftiger – fuer die grossen Ziffern */
  --acc-ink:#8F7A4E;             /* abgedunkelt – fuer Icons auf blasser Flaeche */
  --acc-hover:#C9A44F;           /* satter – leuchtet beim Hover auf */
  --acc-on:#0D2440;              /* darauf lesbare Glyphenfarbe */
  --acc-glow:rgba(192,160,98,.40);
  --gold-tint:rgba(192,160,98,.13);
  --gold-tint-2:rgba(192,160,98,.28);

  /* --- Flächen & Text --- */
  --paper:#FFFFFF;
  --cream:#F9F4EA;
  --cream-2:#F2EADB;
  --ink:#152233;
  --muted:#5C6B7C;
  --muted-lt:rgba(255,255,255,.75);
  --line:#E4DFD5;
  --line-dark:rgba(255,255,255,.14);
  --wa:#25D366;
  --wa-dk:#1CAE52;

  /* --- Spacing (Tivaos 5er-Skala) --- */
  --s1:5px;   --s2:10px;  --s3:15px;  --s4:20px;  --s5:25px;
  --s6:30px;  --s8:40px;  --s10:50px; --s12:60px; --s15:75px;
  --s20:100px;--s24:120px;

  /* --- Corner-Language --- */
  --r-btn:999px;      /* Aktionen: weich  */
  --r-card:4px;       /* Flächen: scharf  */
  --r-input:6px;
  --r-media:2px;

  /* --- Elevation --- */
  --sh-card:0 1px 2px rgba(14,33,56,.05), 0 10px 28px rgba(14,33,56,.06);
  --sh-lift:0 22px 52px rgba(14,33,56,.16);
  --sh-gold:0 12px 30px rgba(192,160,98,.34);
  --sh-deep:0 30px 70px rgba(10,24,40,.42);

  --wrap:1240px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-brush:cubic-bezier(.65,0,.35,1);
}

/* ---------- Reset & Basis ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.68;color:var(--ink);background:var(--paper);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* height:auto neutralisiert die HTML-height-Attribute, das Seitenverhaeltnis
   bleibt ueber die width/height-Attribute erhalten (kein Layout-Shift). */
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--gold);color:var(--navy-ink)}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:#fff;padding:14px 22px;border-radius:0 0 var(--r-input) 0}
.skip:focus{left:0}

/* ---------- Typografie ---------- */
h1,h2,h3,h4,.display{font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--navy-ink)}
h1{font-size:clamp(38px,5.6vw,68px)}
h2{font-size:clamp(30px,4.1vw,48px)}
h3{font-size:clamp(20px,2.2vw,25px);line-height:1.25}
p{max-width:68ch}
strong{font-weight:700}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.22em;color:var(--gold-text);
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--gold);flex:none}
.on-dark .eyebrow,.dark .eyebrow{color:var(--gold-lt)}

.lead{font-size:clamp(17px,1.5vw,19.5px);color:var(--muted);line-height:1.72}
.dark .lead,.on-dark .lead{color:var(--muted-lt)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.sec{padding-block:var(--s20);position:relative}
.sec-compact{padding-block:var(--s10)}
.sec-head{max-width:720px;margin-bottom:var(--s12)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow::before{display:none}
.sec-head h2{margin:var(--s3) 0 var(--s4)}
.center{text-align:center}
.mt-8{margin-top:var(--s8)}

.dark{
  color:#fff;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(46,110,116,.22),transparent 58%),
    radial-gradient(90% 80% at 88% 12%,rgba(192,160,98,.14),transparent 62%),
    var(--navy-ink);
}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p{color:var(--muted-lt)}
.cream{background:var(--cream)}

/* ============================================================
   SIGNATURE 1 — Der Goldstrich
   ============================================================ */
.brush{
  display:block;height:.55em;width:100%;
  background:url('logo/stroke.svg') left center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .95s var(--ease-brush) .12s;
}
.brush.in,.in .brush{clip-path:inset(0 -2% 0 0)}
.brush-ul{width:clamp(130px,17vw,215px);height:14px;margin-top:var(--s3)}
.sec-head.center .brush-ul{margin-inline:auto}

/* Wort mit Goldstrich hinterlegt */
.mark-word{position:relative;display:inline-block;white-space:nowrap}
.mark-word>span{position:relative;z-index:2}
.mark-word::after{
  content:'';position:absolute;left:-3%;right:-3%;bottom:.02em;height:.34em;z-index:1;
  background:url('logo/stroke.svg') left center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.05s var(--ease-brush) .35s;
}
.in .mark-word::after,.mark-word.in::after{clip-path:inset(0 -4% 0 0)}

/* ============================================================
   SIGNATURE 2 — Gemalte Sektionskante
   ============================================================ */
.paint-edge{
  position:absolute;left:0;top:0;width:100%;
  height:clamp(26px,3.6vw,52px);
  fill:currentColor;z-index:3;pointer-events:none;
}
.paint-edge.bottom{top:auto;bottom:0;transform:scaleY(-1)}
.sec,.band{isolation:isolate}

/* ---------- Buttons ---------- */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:52px;padding:14px var(--s6);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:14.5px;
  letter-spacing:.06em;text-transform:uppercase;
  border:1.5px solid transparent;border-radius:var(--r-btn);cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,color .3s;
  white-space:nowrap;
}
.btn>*{position:relative;z-index:2}
.btn svg{width:19px;height:19px;flex:none}
/* Pinselstrich-Wipe beim Hover */
.btn::after{
  content:'';position:absolute;inset:0 -22px;z-index:1;
  transform:scaleX(0) skewX(-14deg);transform-origin:left center;
  transition:transform .48s var(--ease-brush);
}
.btn:hover{transform:translateY(-3px)}
.btn:hover::after{transform:scaleX(1) skewX(-14deg)}
.btn:active{transform:translateY(-1px)}

.btn-gold{background:linear-gradient(135deg,#CCAC6D,#B3924F);color:var(--navy-ink);box-shadow:var(--sh-gold)}
.btn-gold::after{background:linear-gradient(135deg,#E2C994,#C9AC70)}
.btn-gold:hover{box-shadow:0 18px 40px rgba(192,160,98,.45)}

.btn-navy{background:var(--navy);color:#fff}
.btn-navy::after{background:var(--navy-soft)}
.btn-navy:hover{box-shadow:0 18px 40px rgba(30,58,95,.35)}

.btn-wa{background:var(--wa);color:var(--navy-ink);box-shadow:0 12px 30px rgba(37,211,102,.3)}
.btn-wa::after{background:var(--wa-dk)}

.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline::after{background:var(--navy)}
.btn-outline:hover{color:#fff}

.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost::after{background:#fff}
.btn-ghost:hover{color:var(--navy-ink);border-color:#fff}

/* WhatsApp behaelt beim Hover seine eigene Farbe – Weiss/Navy wuerde die Marke verschlucken */
.btn-ghost.wa::after,.btn-outline.wa::after{background:var(--wa)}
.btn-ghost.wa:hover,.btn-outline.wa:hover{color:var(--navy-ink);border-color:var(--wa)}
.btn-outline.wa{color:var(--wa-dk);border-color:var(--wa-dk)}

.btn-sm{min-height:44px;padding:10px var(--s5);font-size:13px}
.btn-block{width:100%}
.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap}

/* Textlink mit Pfeil */
.tlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  color:var(--gold-text);letter-spacing:.02em;
}
.tlink svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}
.dark .tlink{color:var(--gold-lt)}

/* ---------- Header ---------- */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:70;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:box-shadow .35s,border-color .35s,background .35s;
}
.hd.scrolled{box-shadow:0 6px 30px rgba(14,33,56,.09);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:84px;transition:height .35s var(--ease)}
.hd.scrolled .nav{height:70px}

/* Logo-Lockup: Monogramm-Ausschnitt + Wortmarke */
/* Das Monogramm wird aus dem quadratischen Logo freigestellt: sichtbarer
   Ausschnitt ist 910x640 aus der 2048er-Zeichenflaeche, Versatz 545/375.
   Alle Groessen haengen an --mono-w, damit Kopf und Fuss nur eine Zahl setzen. */
.brandmark{--mono-w:62px;display:flex;align-items:center;gap:13px;flex:none}
.brandmark .mono{
  width:var(--mono-w);height:calc(var(--mono-w) * 640 / 910);
  position:relative;overflow:hidden;flex:none;
  transition:width .35s var(--ease),height .35s var(--ease);
}
.brandmark .mono img{
  position:absolute;width:calc(var(--mono-w) * 2048 / 910);
  left:calc(var(--mono-w) * -545 / 910);top:calc(var(--mono-w) * -375 / 910);max-width:none;
  transition:width .35s var(--ease),left .35s var(--ease),top .35s var(--ease);
}
.hd.scrolled .brandmark{--mono-w:54px}
.brandmark .wm{line-height:1.05}
/* "Malermeister" ist die Berufsbezeichnung, "Atai" der Firmenname – der traegt
   die Marke und steht deshalb gross. Beide in Playfair wie im Logo; das
   getrackte Manrope-Versal wirkte daneben wie eine Bildunterschrift. */
/* Zeile 1 traegt den Firmennamen, "Atai" darin in Gold – so bleibt der Name
   hervorgehoben, ohne ihn wie vorher auf eine eigene Zeile zu zwingen.
   Zeile 2 ist die Berufsbezeichnung, bewusst klein und getrackt. */
.brandmark .wm b{display:block;font-family:'Playfair Display',serif;font-weight:700;font-size:22px;color:var(--navy);letter-spacing:.005em;white-space:nowrap}
.brandmark .wm b em{font-style:normal;color:var(--gold-dk)}
.brandmark .wm i{display:block;font-family:'Manrope',sans-serif;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:3px;white-space:nowrap}
.hd.scrolled .brandmark .wm b{font-size:19px}
.hd.scrolled .brandmark .wm i{font-size:9px}
.on-navy .brandmark .wm b{color:#fff}
.on-navy .brandmark .wm b em{color:var(--gold-lt)}
.on-navy .brandmark .wm i{color:rgba(255,255,255,.62)}

.nav-links{display:flex;align-items:center;gap:var(--s6)}
.nav-links>a{
  position:relative;font-weight:600;font-size:15px;color:var(--ink);
  padding:6px 0;transition:color .25s;white-space:nowrap;
}
.nav-links>a:hover{color:var(--navy)}
/* Nav-Hover = Pinselstrich */
.nav-links>a:not(.nav-cta)::after{
  content:'';position:absolute;left:-4px;right:-4px;bottom:-3px;height:8px;
  background:url('logo/stroke.svg') left center/100% 100% no-repeat;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .34s var(--ease-brush);
}
.nav-links>a:not(.nav-cta):hover::after,
.nav-links>a[aria-current="page"]::after{transform:scaleX(1)}
/* Der CTA ist ein Button in einer Link-Reihe. Zwei Dinge muessen zurueckgeholt
   werden: das horizontale Innenmass (".nav-links>a" hat hoehere Spezifitaet als
   ".btn-sm" und setzte es auf 0) und der Schutz vors Schrumpfen – sonst quetscht
   die Flex-Reihe den Button und "overflow:hidden" schneidet das Wort ab. */
.nav-links>a.nav-cta{padding:11px var(--s5);margin-left:var(--s1);flex:none}
/* Auch die uebrigen Links nicht stauchen – die Leiste klappt unter 1000px ohnehin um */
.nav-links>a{flex:none}

.nav-phone{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--navy)}
.nav-phone svg{width:18px;height:18px;color:var(--gold-text)}

.burger{
  display:none;width:46px;height:46px;border:1.5px solid var(--line);background:transparent;
  border-radius:var(--r-btn);cursor:pointer;position:relative;flex:none;
}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--navy);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.hd.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.open .burger span:nth-child(2){opacity:0}
.hd.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--navy-ink);color:#fff;overflow:hidden;
  padding:calc(84px + var(--s24)) 0 var(--s24);
}
.hero::before{
  content:'';position:absolute;inset:0;
  /* Der Verlauf muss die gesamte Textspalte (bis ~55%) dunkel halten – darunter
     liegt ein helles Zimmerfoto. Der Goldschein sitzt weit rechts, damit er den
     Fliesstext nicht aufhellt. */
  background:
    radial-gradient(52% 58% at 86% 22%,rgba(199,153,74,.24),transparent 66%),
    radial-gradient(70% 80% at 6% 92%,rgba(46,110,116,.30),transparent 62%),
    linear-gradient(102deg,
      rgba(8,24,43,.975) 0%,
      rgba(10,29,52,.95) 46%,
      rgba(13,36,64,.74) 68%,
      rgba(13,36,64,.48) 88%,
      rgba(13,36,64,.42) 100%),
    var(--hero-img,url('img/hero-room.jpg')) center/cover no-repeat;
}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:200px;
  background:linear-gradient(transparent,rgba(10,24,40,.9));pointer-events:none;
}
.hero-grid{position:relative;z-index:4;display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s12);align-items:center}
.hero h1{color:#fff;margin:var(--s4) 0 var(--s5)}
/* Der Kicker sitzt semantisch IN der H1 (Google liest "Ihr Maler in Hamburg …"),
   optisch bleibt er die kleine Zeile ueber der Ueberschrift. Er darf die
   Schriftgroesse der H1 nicht erben. */
.hero h1 .h1-kicker{display:block;font-size:12.5px;line-height:1.4;letter-spacing:.22em;margin-bottom:var(--s4);font-weight:700}
.hero h1 em{font-style:normal;color:var(--gold-lt)}
/* Auf dem Foto reicht das gedaempfte Weiss der uebrigen dunklen Sektionen nicht –
   hier steht der Text fast voll deckend, plus ein leiser Schatten als Rueckhalt. */
.hero .lead{
  max-width:52ch;margin-bottom:var(--s8);
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 3px rgba(6,17,30,.55);
}
.hero .eyebrow{text-shadow:0 1px 3px rgba(6,17,30,.5)}

.hero-trust{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line-dark)}
.hero-trust li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.86)}
.hero-trust svg{width:20px;height:20px;color:var(--gold);flex:none}

/* Hero-Karte rechts: schwebende Fakten */
/* Infokarte im Hero – die Startseite zeigt dort die Figur, die Leistungs- und
   Ortsseiten weiterhin diese Karte. */
.hero-card{
  position:relative;background:rgba(255,255,255,.055);border:1px solid var(--line-dark);
  border-radius:var(--r-card);padding:var(--s8);backdrop-filter:blur(16px);
  box-shadow:var(--sh-deep);
}
.hero-card::before{
  content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:var(--gold);
}
.hero-card .hc-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:22px;line-height:1.2;color:#fff;margin-bottom:var(--s2)}
.hero-card>p{font-size:15px;color:var(--muted-lt);margin-bottom:var(--s6)}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-bottom:var(--s6);padding-block:var(--s5);border-block:1px solid var(--line-dark)}
.hero-stats b{display:block;font-family:'Playfair Display',serif;font-size:36px;line-height:1;color:var(--gold-lt)}
.hero-stats span{display:block;font-size:13px;color:var(--muted-lt);margin-top:6px;letter-spacing:.02em}

/* ============================================================
   Hero-Figur — "Flying Effect"
   Die Figur schwebt; der Schatten darunter schrumpft und blasst
   gegenlaeufig aus. Ohne diesen Gegenlauf sieht ein bewegtes Bild
   nur verschoben aus, nicht schwebend.
   ============================================================ */
.hero-figur{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(380px,50vw,640px);
}
.hero-figur picture{display:contents}
.figur{
  position:relative;z-index:2;width:auto;height:clamp(360px,48vw,620px);
  max-width:100%;object-fit:contain;
  filter:drop-shadow(0 30px 46px rgba(6,17,30,.55));
  animation:schweben 6s ease-in-out infinite;
  transform-origin:50% 100%;
}
/* warmer Schein dahinter, damit die Figur nicht auf dem Navy klebt */
.figur-schein{
  position:absolute;z-index:1;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(78%,460px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(199,153,74,.32),rgba(199,153,74,.10) 46%,transparent 70%);
  animation:scheinAtmen 6s ease-in-out infinite;
}
/* Bodenschatten – laeuft gegen die Figur */
.figur-schatten{
  position:absolute;z-index:0;left:50%;bottom:2%;transform:translateX(-50%);
  width:46%;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(4,12,22,.62),transparent 68%);
  animation:schattenAtmen 6s ease-in-out infinite;
}
.figur-spruch{
  position:absolute;z-index:3;left:50%;margin-left:52px;top:5%;
  background:rgba(255,255,255,.96);color:var(--navy-ink);
  font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:11px 19px;border-radius:var(--r-btn);white-space:nowrap;
  box-shadow:0 12px 30px rgba(6,17,30,.4);
  animation:schweben 6s ease-in-out infinite;animation-delay:-1.4s;
}
.figur-spruch::after{        /* Sprechblasen-Zipfel nach unten rechts */
  content:'';position:absolute;right:22px;bottom:-8px;width:16px;height:16px;
  background:inherit;clip-path:polygon(0 0,100% 0,100% 100%);transform:rotate(12deg);
}

@keyframes schweben{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-18px) rotate(1.1deg)}
}
@keyframes schattenAtmen{
  0%,100%{transform:translateX(-50%) scaleX(1);opacity:.85}
  50%    {transform:translateX(-50%) scaleX(.80);opacity:.45}
}
@keyframes scheinAtmen{
  0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}

.scroll-cue{
  position:absolute;left:50%;bottom:var(--s5);z-index:5;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Laufband ---------- */
.ticker{background:linear-gradient(90deg,#1E3A5F,#245A66 50%,#1E3A5F);color:#fff;overflow:hidden;padding:var(--s4) 0;position:relative;z-index:5}
.ticker-track{display:flex;gap:var(--s8);width:max-content;animation:tick 34s linear infinite}
.ticker span{display:flex;align-items:center;gap:var(--s8);font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.74);white-space:nowrap}
.ticker span::after{content:'';width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- USP-Leiste ---------- */
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.usp{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s6) var(--s5);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.usp:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:var(--acc)}
.usp .ico{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--acc-tint);border-radius:var(--r-card);color:var(--acc-ink);transition:background .4s var(--ease),color .4s,box-shadow .4s var(--ease)}
.usp:hover .ico{background:var(--acc-hover);color:var(--acc-on);box-shadow:0 8px 18px var(--acc-glow)}
.usp .ico svg{width:23px;height:23px}
.usp b{display:block;font-family:'Playfair Display',serif;font-size:18.5px;color:var(--navy-ink);line-height:1.25}
.usp span{display:block;font-size:14.5px;color:var(--muted);margin-top:5px}

/* ---------- Leistungen: Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.svc{
  position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s8) var(--s6);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s;
}
.svc::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-brush)}
.svc:hover{transform:translateY(-7px);box-shadow:var(--sh-lift);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc .ico{width:54px;height:54px;display:grid;place-items:center;background:var(--acc-tint);color:var(--acc-ink);border-radius:var(--r-card);margin-bottom:var(--s5);transition:background .4s var(--ease),color .4s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.svc:hover .ico{
  background:var(--acc-hover);color:var(--acc-on);
  transform:rotate(-7deg) scale(1.06);
  box-shadow:0 10px 22px var(--acc-glow);
}
.svc .ico svg{width:27px;height:27px}
.svc h3{margin-bottom:var(--s2)}
.svc p{font-size:15.5px;color:var(--muted)}
.svc .tlink{margin-top:var(--s4)}
.svc .no{position:absolute;right:var(--s5);top:var(--s4);font-family:'Playfair Display',serif;font-size:52px;font-weight:700;color:var(--acc-soft);line-height:1;z-index:0;transition:color .35s}
.svc:hover .no{color:var(--acc)}
.svc>*{position:relative;z-index:1}

/* Hero-Kachel im Bento */
.svc-lg{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--navy-ink);border-color:transparent;color:#fff;min-height:340px;overflow:hidden}
.svc-lg::after{
  content:'';position:absolute;inset:0;z-index:0;opacity:.34;
  background:url('img/gallery-2.jpg') center/cover no-repeat;
  transition:transform 1s var(--ease),opacity .5s;
}
.svc-lg:hover::after{transform:scale(1.06);opacity:.42}
.svc-lg h3{color:#fff;font-size:clamp(24px,2.6vw,32px)}
.svc-lg p{color:rgba(255,255,255,.8);font-size:16.5px}
.svc-lg .ico{background:rgba(255,255,255,.12);color:var(--gold-lt)}
.svc-lg:hover .ico{background:var(--gold);color:var(--navy-ink)}
.svc-lg .no{color:rgba(255,255,255,.09)}
.svc-lg:hover .no{color:rgba(192,160,98,.28)}
.svc-lg .tlink{color:var(--gold-lt)}
.bento .svc:nth-child(n+2){min-height:0}

/* Abschlusskachel: fuellt das Raster und faengt Sonderanfragen ab */
.svc-cta{background:var(--navy);border-color:transparent;color:#fff}
.svc-cta h3{color:#fff}
.svc-cta p{color:rgba(255,255,255,.76)}
.svc-cta .ico{background:rgba(255,255,255,.12);color:var(--gold-lt)}
.svc-cta:hover .ico{background:var(--gold);color:var(--navy-ink)}
.svc-cta .tlink{color:var(--gold-lt)}
.svc-cta::before{background:var(--gold-lt)}

/* ============================================================
   SIGNATURE 3 — Farbfinder (interaktiv)
   ============================================================ */
.finder{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s12);align-items:center}
.finder-stage{
  position:relative;border-radius:var(--r-media);overflow:hidden;
  box-shadow:var(--sh-deep);aspect-ratio:16/9;background:var(--navy-ink);
}
/* Jede Farbe ist ein eigenes Foto – beim Wechsel kurz abblenden, damit der
   Sprung nicht hart wirkt. */
.finder-stage img{width:100%;height:100%;object-fit:cover;transition:opacity .22s var(--ease)}
.finder-stage.wechselt img{opacity:.32}
.finder-tag{
  position:absolute;left:var(--s5);bottom:var(--s5);z-index:3;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-radius:var(--r-btn);padding:11px var(--s5);display:flex;align-items:center;gap:12px;
  box-shadow:0 10px 30px rgba(10,24,40,.28);
}
.finder-tag i{width:26px;height:26px;border-radius:50%;background:var(--c,#EADCC2);flex:none;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.14);transition:background .45s var(--ease)}
.finder-tag b{display:block;font-family:'Playfair Display',serif;font-size:17px;line-height:1.15;color:var(--navy-ink)}
.finder-tag small{display:block;font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.12em;margin-top:1px}

.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin:var(--s6) 0 var(--s8)}
.sw{
  position:relative;aspect-ratio:1;border:none;cursor:pointer;border-radius:var(--r-card);
  background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.sw:hover{transform:translateY(-4px) scale(1.04);box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 12px 26px rgba(14,33,56,.2)}
.sw[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--paper),0 0 0 2.5px var(--navy),0 12px 26px rgba(14,33,56,.22)}
.sw[aria-pressed="true"]::after{
  content:'';position:absolute;inset:0;margin:auto;width:15px;height:9px;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-2px);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.sw.light[aria-pressed="true"]::after{border-color:var(--navy-ink);filter:none}

/* ---------- Galerie ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:var(--s4)}
.gal picture{display:contents}
.gal{position:relative;overflow:hidden;border-radius:var(--r-media);cursor:zoom-in;background:var(--navy-ink)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease),opacity .4s}
.gal:hover img{transform:scale(1.07)}
.gal::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(10,24,40,.82));transition:opacity .35s}
.gal figcaption{
  position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:2;color:#fff;
  font-family:'Playfair Display',serif;font-size:18px;
  display:flex;align-items:center;gap:10px;transform:translateY(7px);opacity:.94;
  transition:transform .35s var(--ease),opacity .3s;
}
.gal figcaption::before{content:'';width:18px;height:2px;background:var(--gold);flex:none;transition:width .35s var(--ease)}
.gal:hover figcaption{transform:none;opacity:1}
.gal:hover figcaption::before{width:30px}
.gal.w2{grid-column:span 2}
.gal.w4{grid-column:span 4}
/* Panorama-Kachel: volle Breite ueber alle Spalten, Hoehe aus dem
   Seitenverhaeltnis des Bildes statt aus der Zeilenhoehe. Mit fester Zeilenhoehe
   blieb von der Fassade je nach Fensterbreite nur ein Streifen uebrig. */
.gal.panorama{grid-column:1/-1;aspect-ratio:3/1;align-self:start}
.gal.h2{grid-row:span 2}

/* ---------- Vorher / Nachher ---------- */
.ba{
  position:relative;max-width:940px;margin-inline:auto;border-radius:var(--r-media);
  overflow:hidden;user-select:none;touch-action:pan-y;cursor:ew-resize;box-shadow:var(--sh-deep);
}
.ba picture{display:contents}   /* sonst bricht der Wrapper die Ueberlagerung */
.ba img{display:block;width:100%;height:auto;pointer-events:none}
.ba-before{position:absolute;inset:0;width:50%;overflow:hidden}
.ba-before img{position:absolute;inset:0;height:100%;width:auto;max-width:none}
.ba-tag{
  position:absolute;top:var(--s4);z-index:3;font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;padding:8px 16px;border-radius:var(--r-btn);backdrop-filter:blur(6px);
}
.ba-tag.l{left:var(--s4);background:rgba(10,24,40,.68);color:#fff}
.ba-tag.r{right:var(--s4);background:var(--gold);color:var(--navy-ink)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);z-index:4;box-shadow:0 0 16px rgba(0,0,0,.4)}
.ba-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;
  border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--navy);
  box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:ew-resize;border:none;
}
.ba-knob svg{width:22px;height:22px}
.ba-hint{text-align:center;margin-top:var(--s4);font-size:14px;color:var(--muted);font-weight:600}
.dark .ba-hint{color:var(--muted-lt)}

/* ---------- Über uns ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:var(--s15);align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--r-media);box-shadow:var(--sh-lift);width:100%}
.about-media::before{
  content:'';position:absolute;left:-18px;top:-18px;width:46%;height:46%;
  border-left:3px solid var(--gold);border-top:3px solid var(--gold);z-index:-1;
}
.about-badge{
  position:absolute;right:-14px;bottom:-22px;background:var(--navy-ink);color:#fff;
  border-radius:var(--r-card);padding:var(--s5) var(--s6);box-shadow:var(--sh-deep);max-width:230px;
}
.about-badge b{display:block;font-family:'Playfair Display',serif;font-size:30px;color:var(--gold-lt);line-height:1}
.about-badge span{display:block;font-size:13.5px;color:var(--muted-lt);margin-top:6px}
.check{display:grid;gap:var(--s3);margin:var(--s6) 0 var(--s8)}
.check li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.check svg{width:21px;height:21px;color:var(--gold-dk);flex:none;margin-top:2px}
.dark .check svg{color:var(--gold-lt)}

/* ---------- Ablauf: Timeline auf dem Goldstrich ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.steps::before{
  content:'';position:absolute;left:6%;right:6%;top:36px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-tint-2) 8%,var(--gold-tint-2) 92%,transparent);
  z-index:0;
}
.step{position:relative;z-index:1;text-align:center;padding-inline:var(--s2)}
.step .dot{
  width:72px;height:72px;margin:0 auto var(--s5);border-radius:50%;
  display:grid;place-items:center;background:var(--navy-ink);border:2px solid var(--gold);
  font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--gold-lt);
  transition:transform .4s var(--ease),background .4s,color .4s;
}
.step:hover .dot{transform:translateY(-6px) scale(1.06);background:var(--gold);color:var(--navy-ink)}
.step h3{font-size:20px;margin-bottom:var(--s2)}
.step p{font-size:15px;color:var(--muted);margin-inline:auto}
.dark .step p{color:var(--muted-lt)}
.dark .step .dot{background:rgba(255,255,255,.06)}
/* Muss NACH der Regel oben stehen und spezifischer sein: ".dark .step .dot" hat
   dieselbe Spezifitaet wie ".step:hover .dot" und gewann allein durch die
   Reihenfolge – der Kreis blieb beim Hover dunkel, waehrend die Ziffer auf Navy
   umschaltete. Dunkel auf dunkel, die Zahl war praktisch weg. */
.dark .step:hover .dot{background:var(--gold);color:var(--navy-ink)}

/* ---------- Zahlen ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);text-align:center}
.stat b{display:block;font-family:'Playfair Display',serif;font-size:clamp(38px,4.6vw,58px);line-height:1;color:var(--gold)}
/* Woerter brauchen weniger Groesse als Ziffern, sonst brechen sie um */
.stat b.stat-wort{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.015em}
.stat span{display:block;font-size:14.5px;font-weight:600;color:var(--muted-lt);margin-top:var(--s2);letter-spacing:.04em}

/* ---------- CTA-Band ---------- */
.band{position:relative;background:linear-gradient(116deg,#BC8848 0%,#C9A868 34%,#DCC18C 68%,#E7D6AB 100%);padding-block:var(--s15);overflow:hidden}
.band::before{
  content:'';position:absolute;inset:0;opacity:.14;
  background:url('img/pinsel-bg.jpg') center/cover no-repeat;mix-blend-mode:multiply;
}
.band .wrap{position:relative;z-index:2;text-align:center}
.band h2{color:var(--navy-ink);margin-bottom:var(--s4)}
.band p{color:var(--navy-ink);font-size:19px;margin:0 auto var(--s8);max-width:56ch}
.band .btn-row{justify-content:center}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:var(--s3)}
.acc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:box-shadow .35s,border-color .35s}
.acc[open]{box-shadow:var(--sh-card);border-color:var(--gold-tint-2)}
.acc summary{
  list-style:none;cursor:pointer;padding:var(--s5) var(--s6);
  font-family:'Playfair Display',serif;font-weight:700;font-size:19px;color:var(--navy-ink);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:'';width:14px;height:14px;flex:none;
  border-right:2.5px solid var(--gold-dk);border-bottom:2.5px solid var(--gold-dk);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .32s var(--ease);
}
.acc[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.acc .body{padding:0 var(--s6) var(--s5)}
.acc .body p{color:var(--muted);font-size:16px}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s12);align-items:start}
.contact-list{display:grid;gap:var(--s3);margin:var(--s8) 0}
.contact-list a,.contact-list div{
  display:flex;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--r-card);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.contact-list a:hover{background:rgba(192,160,98,.14);border-color:var(--gold-tint-2);transform:translateX(5px)}
.contact-list .ico{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--gold-tint);border-radius:var(--r-card);color:var(--gold-lt)}
.contact-list .ico svg{width:20px;height:20px}
.contact-list small{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-lt);font-weight:700}
.contact-list b{display:block;font-size:16.5px;color:#fff;font-weight:700;margin-top:2px}

.formcard{background:var(--paper);color:var(--ink);border-radius:var(--r-card);padding:var(--s10);box-shadow:var(--sh-deep)}
.formcard h3{font-size:26px;margin-bottom:var(--s2)}
.formcard>p{font-size:15px;color:var(--muted);margin-bottom:var(--s6)}
.field{margin-bottom:var(--s4)}
.field>label{display:block;font-weight:700;font-size:13.5px;margin-bottom:7px;color:var(--navy-ink);letter-spacing:.02em}
.field .opt{font-weight:500;color:var(--muted);letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;padding:14px var(--s4);background:var(--cream);border:1.5px solid var(--line);
  border-radius:var(--r-input);font-size:16px;transition:border-color .25s,box-shadow .25s,background .25s;
}
.field textarea{resize:vertical;min-height:112px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--paper);box-shadow:0 0 0 4px var(--gold-tint);
}
.field input::placeholder,.field textarea::placeholder{color:#64707C}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field[hidden]{display:none}

/* Segmented Control */
.seg{display:flex;gap:5px;background:var(--cream-2);border:1.5px solid var(--line);border-radius:var(--r-btn);padding:5px}
.seg button{
  flex:1;min-height:44px;border:none;background:transparent;border-radius:var(--r-btn);cursor:pointer;
  font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  transition:background .28s var(--ease),color .28s,box-shadow .28s;
}
.seg button:hover{color:var(--navy)}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(30,58,95,.28)}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.55;margin:var(--s2) 0 var(--s5);cursor:pointer}
.consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--navy)}
.consent a{color:var(--gold-text);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.formnote{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-input);font-size:14.5px;font-weight:600}
.formnote.ok{background:#EAF7EF;color:#186B3A;border:1px solid #B9E3CA}
.formnote.err{background:#FDEDEC;color:#98221B;border:1px solid #F5C6C2}

/* ---------- Footer ---------- */
/* unten Luft lassen, damit der WhatsApp-Button keine Links verdeckt */
.ft{background:var(--navy-900);color:#fff;padding:var(--s15) 0 var(--s12)}
.ft-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:var(--s10);padding-bottom:var(--s10);border-bottom:1px solid var(--line-dark)}
.ft h4{font-size:16px;color:#fff;margin-bottom:var(--s4);letter-spacing:.02em}
.ft ul{display:grid;gap:11px}
.ft a{display:inline-block;padding-block:3px;font-size:15px;color:rgba(255,255,255,.7);transition:color .25s,padding-left .25s}
.ft a:hover{color:var(--gold-lt);padding-left:5px}
.ft-about p{font-size:15px;color:rgba(255,255,255,.62);margin:var(--s5) 0 var(--s5);max-width:40ch}
/* Im Fuss dieselbe Wortmarke wie im Kopf, nur groesser – die vollstaendige
   Logografik setzt "Atai" von Haus aus sehr klein. */
.ft-brand{--mono-w:86px;gap:16px;margin-bottom:var(--s2)}
.ft-brand .wm b{font-size:23px;color:#fff}
.ft-brand .wm b em{color:var(--gold-lt)}
.ft-brand .wm i{font-size:10px;color:rgba(255,255,255,.6);letter-spacing:.16em}
.ft-social{display:flex;gap:var(--s2)}
.ft-social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:var(--r-btn);color:rgba(255,255,255,.7);transition:.28s}
.ft-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-ink);padding-left:0}
.ft-social a.wa:hover{background:var(--wa);border-color:var(--wa);color:var(--navy-ink)}
.ft-social svg{width:20px;height:20px}
.ft-seo{padding:var(--s6) 0;border-bottom:1px solid var(--line-dark);font-size:13.5px;line-height:2;color:rgba(255,255,255,.62)}
.ft-seo b{color:rgba(255,255,255,.8);font-weight:700}
.ft-seo a{font-size:13.5px;color:var(--gold-lt)}
.ft-bottom{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;padding-top:var(--s6);font-size:13.5px;color:rgba(255,255,255,.6)}
.ft-bottom a{font-size:13.5px}
.ft-bottom nav{display:flex;gap:var(--s5);flex-wrap:wrap}

/* ---------- Schwebende Aktionen ---------- */
.fab{
  position:fixed;right:var(--s5);bottom:var(--s5);z-index:80;
  display:flex;align-items:center;height:60px;padding:0 18px;gap:0;
  background:var(--wa);color:var(--navy-ink);border-radius:var(--r-btn);
  box-shadow:0 14px 34px rgba(37,211,102,.42);overflow:hidden;transition:padding .35s var(--ease);
}
.fab svg{width:29px;height:29px;flex:none}
.fab span{max-width:0;opacity:0;white-space:nowrap;font-weight:700;font-size:15px;transition:max-width .4s var(--ease),opacity .3s,margin .4s}
.fab:hover span{max-width:190px;opacity:1;margin-left:11px}
.fab::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 20px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.actionbar{display:none}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,18,30,.94);display:none;place-items:center;padding:var(--s6);cursor:zoom-out;backdrop-filter:blur(6px)}
.lb.open{display:grid}
.lb img{max-width:94vw;max-height:88vh;border-radius:var(--r-media);box-shadow:var(--sh-deep)}
.lb button{position:absolute;top:var(--s5);right:var(--s5);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:26px;cursor:pointer;line-height:1}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .svc-lg{grid-column:span 2;grid-row:span 1;min-height:280px}
  .ft-top{grid-template-columns:1fr 1fr;gap:var(--s8)}
  /* Die Kopfzeile traegt Wortmarke + 7 Links + CTA + Telefon. Erste
     Entlastungsstufe, damit "Ueber uns" nicht auf zwei Zeilen bricht. */
  .nav-phone{display:none}          /* steht als CTA und in der Fusszeile ohnehin */
  .nav-links{gap:var(--s5)}
}
@media (max-width:1024px){
  :root{--wrap:100%}
  .hero{padding:calc(84px + var(--s15)) 0 var(--s15)}
  .hero-grid,.about,.finder,.contact{grid-template-columns:1fr;gap:var(--s10)}
  .hero-figur{min-height:clamp(300px,52vw,420px)}
  .figur{height:clamp(280px,50vw,400px)}
  .usp-grid,.stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:var(--s10) var(--s5)}
  .steps::before{display:none}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(180px,auto)}
  /* w4 muss hier mit zurueckgesetzt werden – sonst erzwingt die Kachel
     implizite Spalten und sprengt das Raster. */
  .gal.w2,.gal.h2,.gal.w4{grid-column:span 2;grid-row:span 1}
  .gal.panorama{grid-column:1/-1}
  .sec{padding-block:var(--s15)}
  .about-media::before{display:none}
  .about-badge{position:static;margin-top:var(--s5);max-width:none}
}
/* Zweite Stufe: unterhalb 1060px uebernimmt das Burger-Menue. Knapp darueber
   bliebe dem CTA sonst nur noch gut ein Dutzend Pixel bis zum Rand. */
@media (max-width:1060px){
  .nav-links{display:none}
  .burger{display:block}
  .hd.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-top:1px solid var(--line);box-shadow:0 24px 40px rgba(14,33,56,.16);
    padding:var(--s3) var(--s5) var(--s5);max-height:calc(100dvh - 84px);overflow-y:auto;
  }
  .hd.open .nav-links>a{padding:16px 4px;font-size:17px;border-bottom:1px solid var(--line)}
  .hd.open .nav-links>a::after{display:none}
  .hd.open .nav-cta{margin-top:var(--s4);border-bottom:none}
}
@media (max-width:820px){
  body{padding-bottom:70px}
  /* Die Aktionsleiste unten enthaelt WhatsApp bereits – der Button waere doppelt */
  .fab{display:none}
  /* schmaler Viewport: Verlauf von oben statt schraeg, sonst steht Text auf hellem Bild */
  .hero::before{
    background:linear-gradient(180deg,rgba(10,27,48,.96) 0%,rgba(10,27,48,.93) 48%,rgba(10,27,48,.97) 100%),
      var(--hero-img,url('img/hero-room.jpg')) center/cover no-repeat;
  }
  .actionbar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--line);
    box-shadow:0 -6px 24px rgba(14,33,56,.14);
  }
  .actionbar a{
    display:flex;align-items:center;justify-content:center;gap:9px;min-height:62px;
    background:var(--paper);font-weight:700;font-size:14.5px;letter-spacing:.04em;color:var(--navy-ink);
  }
  .actionbar a.primary{background:var(--navy);color:#fff}
  .actionbar svg{width:20px;height:20px;color:var(--gold)}
  .actionbar a:not(.primary) svg{color:var(--gold-dk)}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .wrap{padding-inline:var(--s4)}
  .sec{padding-block:var(--s10)}
  .sec-head{margin-bottom:var(--s8)}
  .hero{padding:calc(76px + var(--s6)) 0 var(--s12)}
  .usp-grid,.bento,.stats,.steps,.form-row,.gal-grid{grid-template-columns:1fr}
  .svc-lg{grid-column:span 1;min-height:230px}
  .gal-grid{grid-auto-rows:minmax(210px,auto)}
  .gal.w2,.gal.h2,.gal.w4{grid-column:span 1;grid-row:span 1}
  .gal.panorama{grid-column:1/-1}
  .hero-stats{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .hero-card,.formcard{padding:var(--s6)}
  /* Die Figur wuerde hier die Schaltflaechen unter die Falz druecken */
  .hero-figur{min-height:0;order:-1;margin-bottom:var(--s3)}
  /* Hoehe aus Breite UND Anzeigehoehe: auf grossen Handys bleiben sonst 170 px
     ungenutzt, waehrend die Figur auf 126 px gedeckelt bleibt. dvh statt vh,
     damit die Adressleiste des Browsers mitgerechnet wird. */
  .figur{height:min(46vw,22dvh,240px)}
  /* Die Sprechblase braucht Breite, die hochkant fehlt – und in den Fluss
     gesetzt schoebe sie den Hauptbutton unter die Aktionsleiste. */
  .figur-spruch{display:none}
  /* Abstaende im Hero straffen, statt die Figur weiter zu verkleinern –
     sonst rutscht der Hauptbutton hinter die Aktionsleiste. */
  .hero h1{margin:var(--s3) 0 var(--s4)}
  .hero .lead{margin-bottom:var(--s5)}
  .hero-grid{gap:var(--s5)}
  .swatches{grid-template-columns:repeat(4,1fr)}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .band .btn-row{align-items:stretch}
  .ft-top{grid-template-columns:1fr;gap:var(--s8)}
  .ft-bottom{flex-direction:column;gap:var(--s3)}
  .scroll-cue{display:none}
}
@media (max-width:380px){
  .figur{height:min(36vw,17dvh,140px)}
}


/* Sehr flache Anzeigen (altes iPhone SE, Querformat): Kopfbereich muss Ueberschrift,
   Text und den Haupt-CTA tragen. Die Figur ist das Erste, was dafuer weichen darf –
   Anrufen und WhatsApp bleiben ueber die Aktionsleiste ohnehin dauerhaft erreichbar. */
/* Auf flachen Anzeigen muss der Kopfbereich Ueberschrift, Text und den
   Hauptbutton tragen – die Figur weicht als Erstes. Bis 1024 px greift das
   frueher (700 px), weil dort die Aktionsleiste zusaetzlich Hoehe kostet;
   auf breiten Fenstern erst bei 520 px, sonst verschwindet sie beim
   Verkleinern eines Desktop-Fensters unnoetig frueh. */
@media (max-height:700px) and (max-width:1024px){
  .hero-figur{display:none}
}
@media (max-height:520px){
  .hero-figur{display:none}
}

/* ---------- Motion-Präferenz ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .brush,.mark-word::after{clip-path:none}
  .figur,.figur-spruch,.figur-schatten,.figur-schein{animation:none}
}

/* ---------- Druck ---------- */
@media print{
  .hd,.fab,.actionbar,.scroll-cue,.ticker,.lb{display:none!important}
  body{color:#000;background:#fff}
  .dark,.hero,.band{background:#fff!important;color:#000!important}
  .dark h1,.dark h2,.dark h3,.hero h1{color:#000!important}
}

/* ---------- Stadtteilseiten + Einsatzgebiet ---------- */
.ort-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s12);align-items:start}
.ort-text p{color:var(--muted);font-size:17px;line-height:1.75;margin-top:var(--s5);max-width:62ch}
.ort-text p.ort-anfahrt{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:16px;
  background:var(--cream);border-left:3px solid var(--gold);padding:var(--s3) var(--s4);border-radius:0 var(--r-card) var(--r-card) 0}
.ort-anfahrt svg{width:20px;height:20px;color:var(--gold-dk);flex:none;margin-top:3px}
.ort-profile{display:grid;gap:var(--s5)}
.profil{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s6);box-shadow:0 10px 30px rgba(21,34,51,.06)}
.profil h3{font-size:20px;margin-bottom:var(--s2)}
.profil p{color:var(--muted);font-size:15.5px;line-height:1.7}
.profil ul{display:grid;gap:8px;margin-top:var(--s4)}
.profil li{display:flex;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
.profil li svg{width:18px;height:18px;color:var(--gold-dk);flex:none;margin-top:3px}
.ort-nah{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10)}
.ort-nah h3{font-size:18px;margin-bottom:var(--s4)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:99px;
  padding:8px 16px;font-size:14.5px;font-weight:600;color:var(--ink);transition:border-color .2s,color .2s}
.chips a:hover{border-color:var(--gold);color:var(--gold-dk)}
.chips a small{font-weight:500;color:var(--muted);font-size:12.5px}
.ort-alle{text-align:center;margin-top:var(--s10)}
.bezirk{padding:var(--s10) 0;border-top:1px solid var(--line)}
.bezirk:first-child{border-top:none;padding-top:0}
.bezirk h2{font-size:clamp(24px,3vw,32px)}
.bezirk p{color:var(--muted);max-width:70ch;margin:var(--s3) 0 var(--s5)}
.ft-seo div{margin-bottom:6px}
@media(max-width:900px){.ort-grid,.ort-nah{grid-template-columns:1fr;gap:var(--s8)}}
.profil.kompakt{padding:var(--s5) var(--s6);box-shadow:none;background:var(--cream)}
.profil.kompakt ul{margin-top:var(--s3)}
.bento.drei{grid-template-columns:repeat(3,1fr)}
.bento.drei .svc{grid-column:auto!important;grid-row:auto!important;min-height:0}
.svc-weitere{text-align:center;margin:var(--s8) auto 0;max-width:760px;color:var(--muted);font-size:15px;line-height:1.9}
.svc-weitere a{color:var(--gold-dk);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.bento.drei{grid-template-columns:1fr}}