/* ===========================================================
   Gemeinsames Stylesheet der Unterseiten (Ueber mich, Impressum,
   Datenschutz, Leistungs-Unterseiten)
   CI, Header und Footer identisch zur Startseite. Die Typografie
   (Ueberschriftgroessen, Section-Abstaende) ist bewusst kleiner
   skaliert als auf der Startseite - passend fuer Fliesstext-Seiten.
   =========================================================== */
:root{
  --dark:#171716;         /* Hauptfarbe dunkel */
  --dark-2:#20201E;       /* alt. Anthrazit */
  --bg:#F7F4EF;           /* heller Hintergrund */
  --card:#FBF9F6;         /* Cremeweiß Karten */
  --creme:#F3EEE8;        /* warmes Creme */
  --beige:#D8C1AA;        /* Beige/Champagner */
  --taupe:#AD8768;        /* Gold/Taupe Akzent */
  --taupe-text:#82654E;   /* abgedunkeltes Taupe fuer Text auf hellem Grund, 4.88:1 Kontrast */
  --ink:#20201F;          /* dunkle Schrift */
  --light:#F5F1EB;        /* helle Schrift */
  --muted:#68635E;        /* sekundäre Schrift */
  --line:#DED8D0;         /* Linien/Borders */
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --script:"Allura",cursive;
}
/* Schriftarten lokal eingebunden (schriftarten/), keine Verbindung zu Google Fonts */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url("schriftarten/cormorant-garamond-variable.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;
  src:url("schriftarten/cormorant-garamond-variable.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;
  src:url("schriftarten/cormorant-garamond-variable.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("schriftarten/inter-variable.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("schriftarten/inter-variable.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("schriftarten/inter-variable.woff2") format("woff2")}
@font-face{font-family:"Allura";font-style:normal;font-weight:400;font-display:swap;
  src:url("schriftarten/allura-400.woff2") format("woff2")}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1.12;letter-spacing:.005em}
h2{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.15}
h3{font-size:1.2rem;line-height:1.2}
.script{font-family:var(--script);color:var(--taupe);font-size:clamp(1.7rem,2.6vw,2.1rem);line-height:1.1}

.container{max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px}
section{padding:clamp(3.2rem,6vw,5.5rem) 0}
.label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-text)}
.eyebrow-light{color:var(--beige)}
:focus-visible{outline:2px solid var(--taupe);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--dark);color:var(--light);padding:.6rem 1rem;z-index:50}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:13px;font-weight:600;
     letter-spacing:.05em;text-transform:uppercase;padding:15px 26px;border:1px solid transparent;
     border-radius:4px;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{background:var(--beige);color:var(--ink)}
.btn-primary:hover{background:#cbb096}
.btn-dark{background:var(--ink);color:var(--light)}
.btn-dark:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--taupe);color:var(--taupe)}
@media (prefers-reduced-motion:reduce){.btn .ar{transition:none}}

/* Icons */
.icn{width:28px;height:28px;stroke:var(--taupe);stroke-width:1.5;fill:none;
     stroke-linecap:round;stroke-linejoin:round}
.on-dark .icn{stroke:var(--beige)}

/* dezente Scroll-Animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== Header (identisch zur Startseite) ===== */
.site-head{background:var(--dark);color:var(--light);position:sticky;top:0;z-index:40}
.site-head .container{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.logo{line-height:1}
.logo b{font-family:var(--serif);font-weight:500;font-size:1.6rem;letter-spacing:.01em;color:var(--light)}
.logo span{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);margin-top:3px}
.mainnav{display:flex;align-items:center;gap:2rem}
.mainnav a:not(.btn){font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--light);opacity:.85}
.mainnav a:not(.btn):hover{opacity:1;color:var(--beige)}
.nav-toggle{display:none;background:none;border:0;color:var(--light);cursor:pointer;padding:.4rem}

/* ===== Seitenkopf der Leistung (dunkel) ===== */
.page-hero{background:var(--dark);color:var(--light);
           padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(3rem,5.5vw,4.6rem)}
.page-hero h1{color:var(--light);max-width:22ch;margin:.9rem 0 0}
.page-hero .lead{color:rgba(245,241,235,.75);max-width:54ch;margin-top:1.2rem;font-size:1.05rem}
.crumb{display:inline-flex;align-items:center;gap:.5rem;font-size:12px;font-weight:600;
       letter-spacing:.12em;text-transform:uppercase;color:var(--beige);opacity:.85}
.crumb:hover{opacity:1}
.crumb .ar{transition:transform .25s}
.crumb:hover .ar{transform:translateX(-4px)}
@media (prefers-reduced-motion:reduce){.crumb .ar{transition:none}}

/* ===== Vorstellungsvideo (selbst gehostet, kein Drittanbieter) =====
   max-width:44rem + margin:0 auto direkt auf .video-rahmen, genau wie bei
   .article - dieselbe Formel, dadurch zwangslaeufig exakt dieselbe Breite
   und Kante wie der Fliesstext darunter (vorher war das auf .container
   gesetzt, wodurch das Padding doppelt abgezogen wurde und das Video
   schmaler UND eingerueckt war). */
/* Sichtbarer Abstand ueber dem Video = eigenes Top-Padding (der dunkle
   Seitenkopf-Hintergrund "verschluckt" sein eigenes Bottom-Padding optisch,
   das zaehlt also nicht als Luecke mit). Sichtbarer Abstand darunter = eigenes
   Bottom-Padding + Top-Padding vom Fliesstext (beide auf hellem Grund, also
   eine durchgehende Luecke). Deshalb hier bewusst die doppelte Formel fuers
   Top-Padding, damit oben und unten gleich viel Luft wirkt. */
.intro-video{background:var(--bg);padding-top:clamp(6.4rem,12vw,11rem)}
.video-rahmen{max-width:44rem;margin:0 auto;border:1px solid var(--line);border-radius:5px;overflow:hidden;
              box-shadow:0 1px 2px rgba(23,23,22,.04);background:#000}
.video-rahmen video{display:block;width:100%;height:auto}

/* ===== Fließtext ===== */
.prose{background:var(--bg)}
.article{max-width:44rem;margin:0 auto}
.article h2{margin:2.4rem 0 .9rem}
.article h2:first-child{margin-top:0}
.article p{margin-bottom:1.15rem}
.article p:last-child{margin-bottom:0}
.article ul{margin:0 0 1.15rem;padding-left:1.3rem;color:var(--ink)}
.article li{margin-bottom:.4rem}
.article a{color:var(--taupe);border-bottom:1px solid var(--taupe)}

/* ===== Abschluss-CTA (dunkel) ===== */
.cta{background:var(--dark);color:var(--light);text-align:center}
.cta h2{color:var(--light);margin:1rem auto 1.1rem;max-width:18ch}
.cta p{color:rgba(245,241,235,.75);max-width:46ch;margin:0 auto 1.8rem}
.cta .script{display:block;margin-top:2rem}

/* ===== Weitere Leistungen ===== */
.weitere{background:var(--bg);border-top:1px solid var(--line)}
.weitere h2{margin:1rem 0 clamp(1.8rem,3vw,2.6rem)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:28px;
       box-shadow:0 1px 2px rgba(23,23,22,.04);transition:box-shadow .25s,transform .25s,border-color .25s}
.scard:hover{box-shadow:0 10px 26px rgba(23,23,22,.08);transform:translateY(-3px);border-color:#d0c7bb}
.scard .icn{margin-bottom:1.1rem}
.scard h3{font-size:1.2rem;margin-bottom:.5rem}
.scard p{font-size:14.5px;color:var(--muted);line-height:1.55}
.cards-bild{display:none}   /* Bildkachel nur im Desktop-Raster, siehe Media-Query unten */
.zurueck{margin-top:clamp(2rem,4vw,3rem);text-align:center}

/* ===== Footer (identisch zur Startseite) ===== */
.site-foot{background:var(--dark);color:var(--light);padding:2.8rem 0 2rem;border-top:1px solid rgba(222,216,208,.14)}
.site-foot .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;align-items:start}
.site-foot .fnav{display:flex;flex-direction:column;gap:.6rem;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.site-foot .fnav a{opacity:.85}
.site-foot .fnav a:hover{opacity:1;color:var(--beige)}
.site-foot .social{display:flex;gap:1rem;justify-content:flex-end}
.site-foot .social a .icn{stroke:var(--beige);width:22px;height:22px}
.site-foot .social a:hover .icn{stroke:var(--light)}
.site-foot .legal{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(222,216,208,.12);
                  font-size:12.5px;color:rgba(245,241,235,.55);text-align:center}
.site-foot .legal a{color:rgba(245,241,235,.7)}
.site-foot .legal a:hover{color:var(--beige)}

/* ===== Responsive ===== */
/* Desktop: Bildkachel auf einem freien Rasterplatz, siehe Markup je Seite */
@media (min-width:961px){
  .cards-bild{display:block;grid-column:span 2;background:var(--card);border:1px solid var(--line);
              border-radius:5px;overflow:hidden;box-shadow:0 1px 2px rgba(23,23,22,.04)}
  .cards-bild img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:960px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .site-foot .social{justify-content:flex-start}
}
@media (max-width:600px){
  .container{padding-left:22px;padding-right:22px}
  .mainnav{display:none}
  .mainnav.open{display:flex;position:absolute;top:86px;left:0;right:0;flex-direction:column;
                background:var(--dark);padding:1.2rem 22px;gap:1rem;border-top:1px solid rgba(222,216,208,.14)}
  .nav-toggle{display:block}
  .cards{grid-template-columns:1fr}
  .site-foot .cols{grid-template-columns:1fr}
  .site-foot .social{justify-content:flex-start}
}