/* ============================================================
   Rebecca · Persönliche Marke
   Gestaltungskonzept: "Das Atelier" (aus dem Markenbuch übernommen,
   rebecca-atelier/atelier.html). Die Seite ist kein Section-Stapel,
   sondern ein Buch in sechs Räumen: Doppelrahmen, römische Ziffern,
   zentrierte Kompositionen, Signaturmuster, Kupferversatz-Bildrahmen.
   Kupfer/Bronze auf Creme + warmem Anthrazit.
   Serif (Cormorant) · Signatur (Allura) · Sans (Montserrat).
   Eigenständig, unabhängig von site.css (Peter).
   ============================================================ */

:root{
  --cream:#f4ede1;
  --cream-2:#ece1d1;
  --char:#1c1714;
  --char-2:#241d18;
  --char-soft:#2c241e;
  --ink:#2b231d;
  --muted:#8a7c6d;
  --muted-light:#b6a896;
  --line:rgba(43,35,29,.16);
  --line-dark:rgba(244,237,225,.16);
  --copper:#b06a33;
  --copper-deep:#8a4a22;
  --copper-light:#e3b483;
  --copper-foil:linear-gradient(96deg,#7a3a18 0%,#b06a33 26%,#e7bd8c 50%,#b06a33 74%,#854624 100%);
  --copper-line:linear-gradient(90deg,#8a4a22,#d49b63);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --script:"Allura",cursive;
  --sans:"Montserrat",system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:400;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
.col{max-width:640px}

/* ---------- Labels / Typo ---------- */
.label{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.42em;
  text-transform:uppercase;color:var(--muted);margin:0 0 26px;
}
.label.on-dark{color:var(--muted-light)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:.005em}
.foil{
  background:var(--copper-foil);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--copper);
}
.script{font-family:var(--script);font-weight:400;line-height:.9}

h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:.005em;line-height:1.08}
.section-title{font-size:clamp(30px,4vw,52px);font-weight:400;line-height:1.12}
.lead{font-size:clamp(16px,1.4vw,19px);font-weight:300;color:var(--muted);line-height:1.8}
p{margin:0 0 20px}

.rule{height:1px;background:var(--line);border:0}
.rule-copper{height:1px;width:70px;background:var(--copper-line);border:0}

/* ============================================================
   ATELIER-BAUTEILE (aus dem Markenbuch)
   ============================================================ */

/* Das Muster: Rebeccas Signaturschwung, endlos. Unverwechselbar. */
.muster{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60"><path d="M0 44 C 14 44, 16 16, 30 16 S 46 44, 60 44 S 76 16, 90 16 S 106 44, 120 44" fill="none" stroke="%23B06A33" stroke-opacity=".3" stroke-width="1"/></svg>');
  background-size:150px 75px;background-repeat:repeat;
}
.muster-hell{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60"><path d="M0 44 C 14 44, 16 16, 30 16 S 46 44, 60 44 S 76 16, 90 16 S 106 44, 120 44" fill="none" stroke="%23E3B483" stroke-opacity=".26" stroke-width="1"/></svg>');
  background-size:150px 75px;background-repeat:repeat;
}

/* Römische Kapitelziffer */
.roman{
  font-family:var(--serif);font-weight:500;font-size:clamp(15px,1.3vw,18px);
  letter-spacing:.14em;color:var(--copper);margin:0 0 10px;
}

/* Zentrierter Kapitelkopf mit flankierenden Linien (wie .fuss im Buch) */
.raum-kopf{text-align:center;margin:0 auto 64px;max-width:44ch}
.raum-kopf .zeile{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}
.raum-kopf .zeile .l{width:56px;height:1px;background:var(--line)}
.raum-kopf .zeile span{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.raum-kopf h2{font-size:clamp(28px,3.6vw,46px);line-height:1.16;color:var(--ink)}
.raum-kopf .unter{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(17px,1.6vw,21px);color:var(--muted);margin:16px 0 0;
}
.dunkel .raum-kopf h2{color:var(--cream)}
.dunkel .raum-kopf .zeile .l{background:var(--line-dark)}
.dunkel .raum-kopf .zeile span,.dunkel .raum-kopf .unter{color:var(--muted-light)}
.dunkel .roman{color:var(--copper-light)}

/* Bildrahmen mit Kupferversatz */
.bild{position:relative;display:block}
.bild::before{
  content:"";position:absolute;inset:-14px;border:1px solid var(--copper);
  pointer-events:none;opacity:.55;z-index:3;
}
.bild img{width:100%;display:block;position:relative}

/* ------------------------------------------------------------
   Die Atelier-Gradierung (Duotone)
   Echte Fotos werden in Rebeccas Palette übersetzt, statt einen
   Filter draufzulegen: Tiefen laufen ins Anthrazit, Lichter ins
   Kupfer. Zwei Ebenen über dem entsättigten Bild:
     lighten  mit --char        -> hebt die Tiefen auf Anthrazit
     multiply mit --copper-light-> senkt die Lichter auf Kupfer
   --foto-mischung steuert, wie stark graduiert wird (0 = Original).
   ------------------------------------------------------------ */
/* Standard = volle Gradierung. Gilt für alle Raum- und Detailbilder.
   AUSNAHME: das Porträt bekommt bewusst KEIN .foto (Vorgabe Rebecca,
   2026-07-17). Der Ort wird zur Kulisse graduiert, der Mensch bleibt echt. */
.foto{
  /* display:block ist Pflicht. Als Inline-Element legen sich die
     Gradierungsebenen nur über ein Fragment und das Bild bricht mittig. */
  display:block;
  position:relative;overflow:hidden;isolation:isolate;
  --foto-mischung:1;                /* 0 = Originalfoto, 1 = reines Duotone */
  --foto-tiefe:var(--char);         /* wohin die Schatten laufen */
  --foto-licht:#e3b483;             /* wohin die Lichter laufen */
}
.foto img{
  width:100%;display:block;
  filter:grayscale(1) contrast(1.06) brightness(1.02);
}
.foto::before,
.foto::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.foto::before{background:var(--foto-tiefe);mix-blend-mode:lighten}
.foto::after{background:var(--foto-licht);mix-blend-mode:multiply}

/* Das Originalfoto wird über die Gradierung zurückgeblendet.
   Normaler Blend plus Deckkraft = echte Überblendung zwischen beidem. */
.foto .original{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:calc(1 - var(--foto-mischung));
}

/* Varianten, falls ein Bild die volle Gradierung nicht verträgt */
.foto.warm{--foto-mischung:.55}     /* mehr Realität, nur angewärmt */
.foto.weich{--foto-mischung:.82;--foto-licht:#efe0cb}  /* fast monochrom, ruhiger */
.foto.dunkel{--foto-licht:#d9a877}  /* für dunkle Sektionen */

/* Raumbild: echtes Foto als Hintergrund eines Raums, graduiert und
   unter einem Schleier, damit die Schrift trägt. */
/* Die Fotos sind hochkant (1080x1440), die Räume sind breit und flach.
   Ohne Bildausschnitt landet man im dunklen Fußteil der Motive. */
.raum-bild{position:absolute;inset:0;z-index:0;overflow:hidden;--bild-schnitt:center}
.raum-bild .foto{height:100%}
.raum-bild .foto img{height:100%;object-fit:cover;object-position:var(--bild-schnitt)}
.raum-bild .original{background-position:var(--bild-schnitt)}
.raum-bild .schleier{position:absolute;inset:0;z-index:4;pointer-events:none}
.dunkel .raum-bild .schleier{
  background:
    radial-gradient(120% 90% at 50% 50%,rgba(28,23,20,.9) 0%,rgba(28,23,20,.74) 55%,rgba(28,23,20,.6) 100%),
    linear-gradient(180deg,rgba(28,23,20,.55),rgba(28,23,20,.3) 45%,rgba(28,23,20,.6));
}
/* Wo ein Raumbild liegt, tritt das Muster zurück, sonst kämpfen beide. */
.raum-bild ~ .muster-flaeche{opacity:.22}

/* Bildtafel in Raum IV: Foto oben, Text darunter */
.tafel .tafel-bild{margin:0 0 26px}
.tafel .tafel-bild .foto{aspect-ratio:4/3}
.tafel .tafel-bild .foto img{height:100%;object-fit:cover}
.bildnote{
  font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);margin-top:26px;text-align:center;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:16px 34px;border-radius:0;color:#fff;background:var(--copper-foil);
  background-size:160% 100%;background-position:0 0;
  transition:background-position .5s ease;
}
.btn:hover{background-position:100% 0}
.btn.ghost{
  background:none;color:var(--copper);border:1px solid rgba(176,106,51,.5);padding:15px 33px;
}
.btn.ghost:hover{border-color:var(--copper);background:rgba(176,106,51,.06)}
.btn.ghost.on-dark{color:var(--copper-light);border-color:rgba(227,180,131,.4)}
.btn.ghost.on-dark:hover{border-color:var(--copper-light);background:rgba(227,180,131,.08)}

/* ---------- Header ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:40}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:96px}
.brand-sig{font-family:var(--script);font-size:42px;line-height:1;padding-top:10px;color:var(--copper)}
.nav{display:flex;align-items:center;gap:38px}
.nav a{
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink);opacity:.72;transition:opacity .25s,color .25s;
}
.nav a:hover{opacity:1;color:var(--copper-deep)}
.nav-toggle{display:none;background:none;border:0;font-size:22px;color:var(--ink);cursor:pointer}

/* ============================================================
   DER DECKEL (Hero) · Split: Buchdeckel links, Porträt rechts.
   Man sieht Rebecca sofort (Personal Brand), das Atelier bleibt.
   ============================================================ */
.deckel{
  position:relative;background:var(--cream);
  padding:150px 0 96px;min-height:100vh;display:flex;align-items:center;
}
.deckel .muster-flaeche{position:absolute;inset:0;opacity:.5;z-index:0}
.deckel .wrap{position:relative;z-index:2;width:100%}

/* Split-Variante */
.deckel-split{display:grid;grid-template-columns:1fr 1fr;padding:0;min-height:min(100vh,900px);align-items:stretch}
.deckel-split .buch{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:120px clamp(28px,3.5vw,60px) 70px;overflow:hidden;
}
.deckel-split .buch .muster-flaeche{position:absolute;inset:0;opacity:.5;z-index:0}
.deckel-split .rahmen{position:relative;z-index:2;max-width:480px;width:100%}
.deckel-split .deckel-inhalt{max-width:none}
/* Wortmarke passt in die halbe Breite (die Vollbreiten-Größe lief aus dem
   Rahmen). Doppelte .deckel.deckel-split für höhere Spezifität, sonst
   gewinnt die weiter unten stehende .deckel .wordmark-Regel. */
.deckel.deckel-split .wordmark{font-size:clamp(44px,5vw,80px)}
.deckel.deckel-split .claim-gross{font-size:clamp(20px,2.2vw,30px);margin-top:38px}
.deckel.deckel-split .disziplinen{margin-top:40px}
.deckel.deckel-split .eintritt{margin-top:34px}
.deckel-split .deckel-foto{position:relative;overflow:hidden;background:var(--cream)}
/* Das Foto liegt absolut, sonst bestimmt seine Eigenhoehe (Breite x
   Seitenverhaeltnis) die Hoehe des ganzen Deckels und der Bereich waechst
   ueber den Bildschirm hinaus. Absolut = die Spalte gibt die Hoehe vor. */
.deckel-split .deckel-foto img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 18%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%);
          mask-image:linear-gradient(to right,transparent 0,#000 14%);
}
/* Die Menü-Links liegen über dem dunklen Foto (rechts) → hell.
   Die Signatur-Marke links liegt über dem Creme und bleibt Kupfer. */
body.home .nav a{color:var(--cream);opacity:.86}
body.home .nav a:hover{color:var(--copper-light);opacity:1}
body.home .nav-toggle{color:var(--cream)}

/* Der doppelte Kupferrahmen aus dem Buchdeckel */
.rahmen{position:relative;padding:clamp(38px,5vw,76px) clamp(24px,4vw,64px);border:1px solid var(--copper);background:var(--cream)}
.rahmen::before{
  content:"";position:absolute;inset:7px;border:1px solid var(--copper);
  opacity:.5;pointer-events:none;
}

.deckel-inhalt{text-align:center;max-width:760px;margin:0 auto}
.deckel .label{margin-bottom:0}
.deckel .vorspann{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.42em;
  text-transform:uppercase;color:var(--muted);margin:0 0 20px;
}
.deckel .wordmark{
  font-family:var(--serif);font-weight:500;font-size:clamp(64px,11vw,164px);
  line-height:.9;letter-spacing:-.01em;margin:0;
}
.deckel .untertitel{
  display:flex;align-items:center;justify-content:center;gap:22px;margin:34px 0 0;
}
.deckel .untertitel .l{width:clamp(40px,7vw,96px);height:1px;background:var(--line)}
.deckel .untertitel span{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(17px,1.7vw,22px);color:var(--ink);white-space:nowrap;
}
.deckel .claim-gross{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,38px);
  line-height:1.2;color:var(--ink);margin:52px 0 0;
}
.deckel .sub{
  font-size:clamp(14px,1.2vw,16px);color:var(--muted);line-height:1.8;
  max-width:44ch;margin:18px auto 0;
}
.deckel .disziplinen{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--copper);margin:56px 0 0;
}
.deckel .eintritt{margin:44px 0 0}

/* ============================================================
   RAUM I · DER CHARAKTER (claim)
   ============================================================ */
.claim{padding:130px 0;background:var(--cream-2);position:relative}
.claim .inner{max-width:780px;margin:0 auto;text-align:center}
.claim .body p{font-size:18px;color:var(--ink);line-height:1.9}
.claim .body .accent{font-weight:500;color:var(--copper)}
.claim .body .strong{
  font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);color:var(--ink);
  margin-top:34px;line-height:1.35;
}

/* ============================================================
   RAUM II · DIE SIGNATUR (Manifest, dunkel)
   ============================================================ */
.signature{background:var(--char);color:var(--cream);padding:130px 0;position:relative;overflow:hidden}
.signature .muster-flaeche{position:absolute;inset:0;opacity:.5;z-index:0}
.signature .wrap{position:relative;z-index:2}
.signature .inner{max-width:820px;margin:0 auto;text-align:center}
.signature .manifesto p{
  font-size:clamp(20px,2.1vw,27px);font-family:var(--serif);line-height:1.55;
  color:var(--cream);margin:0 0 8px;
}
.signature .manifesto .closing{
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--copper-light);margin-top:40px;
}

/* ============================================================
   RAUM III · DIE PERSON (about)
   Zweispaltig mit gerahmtem Porträt. Keine tote rechte Hälfte mehr.
   ============================================================ */
.about{padding:134px 0}
.about .inner{
  display:grid;grid-template-columns:1fr minmax(300px,380px);
  gap:clamp(48px,7vw,100px);align-items:start;
}
.about .body p{font-size:17px;line-height:1.9;color:#3c332b}
.about .body p strong{font-weight:600;color:var(--ink)}
.about .portraet{position:sticky;top:60px}
.about .body p.pull{
  font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);line-height:1.36;
  margin:48px 0 0;color:var(--ink);padding-top:40px;border-top:1px solid var(--line);
}

/* ============================================================
   RAUM IV · DIE DISZIPLINEN (services)
   Drei Bildtafeln nebeneinander, jede im Kupferrahmen. Kein 01/02/03.
   ============================================================ */
.services{padding:130px 0;background:var(--cream-2);position:relative}
.tafeln{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,58px)}
.tafel{position:relative;text-align:center;padding:clamp(30px,3vw,44px) clamp(20px,2vw,30px);border:1px solid var(--copper);background:var(--cream)}
.tafel::before{content:"";position:absolute;inset:6px;border:1px solid var(--copper);opacity:.4;pointer-events:none}
.tafel .ziffer{
  font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.14em;
  color:var(--copper);margin:0 0 22px;
}
.tafel .en{
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px;
}
.tafel h3{font-family:var(--serif);font-size:clamp(22px,2.1vw,28px);font-weight:400;line-height:1.24;margin:0 0 18px}
.tafel p{font-size:15px;color:var(--muted);line-height:1.85;margin:0}

/* ============================================================
   RAUM V · DER WEG (process)
   Stationen auf Rebeccas Signaturlinie. Bewusst eine ANDERE
   Bauform als Raum IV, damit sich kein Muster wiederholt.
   ============================================================ */
.process{padding:130px 0;position:relative;overflow:hidden}
.weg{position:relative;max-width:1000px;margin:0 auto}
/* Die Signaturlinie läuft auf Höhe der Punkte durch, nicht durch die Ziffern.
   Der Wellenscheitel des SVG liegt bei ~37px innerhalb der 75px hohen Fläche,
   die Punktmitte bei ~7px. Daher der negative Versatz. */
.weg .linie{
  position:absolute;left:0;right:0;top:-7px;height:75px;opacity:.75;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.stationen{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,60px)}
.station{text-align:center}
.station .punkt{
  width:15px;height:15px;border-radius:50%;background:var(--cream);
  border:1px solid var(--copper);margin:0 auto 30px;position:relative;
}
.station .punkt::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--copper);
}
.station .ziffer{
  font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.14em;
  color:var(--copper);margin:0 0 12px;
}
.station h3{font-family:var(--serif);font-size:clamp(22px,2.1vw,27px);font-weight:400;margin:0 0 14px}
.station p{font-size:15px;color:var(--muted);line-height:1.85;margin:0 auto;max-width:34ch}

/* ============================================================
   RAUM VI · DIE EINLADUNG (contact, dunkel, gerahmt)
   ============================================================ */
.contact{background:var(--char);color:var(--cream);padding:130px 0;position:relative;overflow:hidden}
.contact .muster-flaeche{position:absolute;inset:0;opacity:.4;z-index:0}
.contact .wrap{position:relative;z-index:2}
.contact .rahmen{
  background:transparent;border-color:rgba(227,180,131,.5);text-align:center;
  max-width:860px;margin:0 auto;
}
.contact .rahmen::before{border-color:rgba(227,180,131,.32)}
.contact h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,50px);font-weight:400;max-width:20ch;margin:0 auto 22px;line-height:1.18;color:var(--cream)}
.contact .lead{color:var(--muted-light);max-width:40ch;margin:0 auto 42px}
.contact .direct{margin-top:34px;font-size:13px;color:var(--muted)}
.contact .direct a{color:var(--copper-light);border-bottom:1px solid rgba(227,180,131,.4);padding-bottom:2px}
.contact .direct a:hover{color:var(--cream)}
.contact .cta-reihe{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--char-2);color:var(--muted-light);padding:56px 0 40px}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.site-footer .brand-sig{color:var(--copper-light);margin-bottom:10px}
.site-footer .f-note{font-size:13.5px;max-width:34ch;line-height:1.7;color:#8d8071}
.site-footer .f-note a{color:var(--copper-light)}
.site-footer .f-links{display:flex;flex-wrap:wrap;gap:16px 26px;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.site-footer .f-links a:hover{color:var(--cream)}
.site-footer .f-copy{width:100%;border-top:1px solid var(--line-dark);margin-top:34px;padding-top:22px;font-size:11.5px;letter-spacing:.06em;color:#6f6457}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .tafeln{grid-template-columns:1fr;gap:30px}
  .about .inner{grid-template-columns:1fr;gap:56px}
  .about .portraet{position:static;max-width:400px;margin:0 auto;order:-1}
  .weg .linie{display:none}
  .stationen{grid-template-columns:1fr;gap:48px}
}
@media (max-width:880px){
  .wrap{padding:0 26px}
  .site-header .wrap{position:relative}
  .nav{display:none;position:absolute;top:100%;right:0;left:0;flex-direction:column;align-items:stretch;gap:0;background:var(--cream-2);border-top:1px solid var(--line);box-shadow:0 22px 40px rgba(28,23,20,.18);padding:6px 0;z-index:50}
  .site-header.nav-open .nav{display:flex}
  .nav a{padding:15px 26px;font-size:12px;color:var(--ink);opacity:.85}
  /* im aufgeklappten Mobil-Menü (Creme-Grund) müssen die Links dunkel sein,
     auch auf der Startseite */
  body.home .nav a{color:var(--ink);opacity:.85}
  body.home .nav-toggle{color:var(--ink)}
  .nav-toggle{display:block}
  .blog-header .nav-toggle{color:var(--ink)}
  .deckel{padding:120px 0 70px;min-height:auto}
  .deckel .untertitel .l{width:30px}
  .contact .rahmen{padding:44px 22px}
  /* Split-Deckel stapelt: Foto oben, Buchdeckel darunter */
  .deckel-split{grid-template-columns:1fr;min-height:auto}
  .deckel-split .deckel-foto{order:-1;height:56vh}
  /* Gestapelt trifft das Foto den Buchdeckel unten statt links,
     also verlaeuft der Uebergang hier nach unten. */
  .deckel-split .deckel-foto img{
    object-position:center 20%;
    -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
  }
  .deckel-split .buch{padding:54px 26px 60px}
}

/* ============================================================
   MAGAZIN / BLOG (ergänzt 2026-06-29) – hell, Serif, Kupfer
   ============================================================ */
.blog-header{position:relative;top:auto;left:auto;right:auto;background:var(--cream-2);border-bottom:1px solid var(--line)}
.blog-header .brand-sig{color:transparent}
.blog-header .nav a{color:var(--ink);opacity:.78}
.blog-header .nav a:hover{opacity:1;color:var(--copper-deep)}

.blog-main{min-height:60vh;padding:72px 0 110px;background:var(--cream)}
.blog-main .wrap.narrow{max-width:740px}
.blog-hero{margin-bottom:54px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.blog-hero .label{color:var(--copper-deep)}
.blog-title{font-size:clamp(34px,5vw,60px);color:var(--char);margin-top:6px}

.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:36px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:transform .3s ease,box-shadow .3s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,23,20,.10)}
.post-card-link{display:block;color:inherit;text-decoration:none}
.post-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-card-body{padding:28px 30px 32px}
.post-date{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper-deep);margin:0 0 12px}
.post-card-title{font-size:25px;line-height:1.2;color:var(--char);margin:0 0 12px}
.post-excerpt{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 18px}
.post-more{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep)}
.blog-empty{color:var(--muted);font-size:18px;font-family:var(--serif)}

/* Einzelartikel */
.blog-main.single .single-post{border-bottom:1px solid var(--line);padding-bottom:42px}
.single-title{font-size:clamp(32px,4.2vw,52px);line-height:1.12;color:var(--char);margin:8px 0 30px}
.single-thumb{margin:0 0 38px}
.single-thumb img{width:100%;height:auto;display:block;border-radius:3px}
.single-content{color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.7}
.single-content p{margin:0 0 24px}
.single-content h2{font-family:var(--serif);font-weight:500;font-size:30px;color:var(--char);margin:42px 0 16px}
.single-content h3{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--char);margin:34px 0 12px}
.single-content a{color:var(--copper-deep);text-decoration:underline;text-underline-offset:3px}
.single-content a:hover{color:var(--copper)}
.single-content ul,.single-content ol{margin:0 0 24px 22px}
.single-content li{margin:0 0 10px}
.single-content blockquote{margin:30px 0;padding:6px 0 6px 28px;border-left:2px solid var(--copper);color:var(--muted);font-style:italic}
.single-content img{max-width:100%;height:auto;border-radius:3px}
.single-back{margin-top:40px}
.single-back a{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep);text-decoration:none}
.single-back a:hover{color:var(--copper)}

/* Pagination */
.blog-pagination{margin-top:60px}
.blog-pagination .page-numbers{font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:var(--muted);text-decoration:none;padding:9px 15px;border:1px solid var(--line);margin:0 4px;display:inline-block;transition:.25s}
.blog-pagination .page-numbers.current{color:#fff;background:var(--copper-foil);border-color:transparent}
.blog-pagination .page-numbers:hover{color:var(--copper-deep);border-color:var(--copper-line)}

@media(max-width:680px){
  .blog-main{padding:48px 0 70px}
  .post-grid{grid-template-columns:1fr;gap:26px}
}


/* === Rechts-/Inhaltsseiten (Impressum, Datenschutz, normale Seiten) ===
   :not(.home) ist wichtig: die Startseite ist selbst eine WordPress-Seite
   und traegt die Klasse "page". Ohne den Ausschluss bekaeme der Deckel
   eine dunkle Kopfleiste. */
body.page:not(.home) .site-header{position:static;background:var(--char)}
body.page:not(.home) .site-header .nav a{color:var(--cream)}
body.page:not(.home) .site-header .nav-toggle{color:var(--cream)}
.legal{padding:64px 0 96px;background:var(--cream)}
.legal .head{margin-bottom:34px}
.legal .section-title{margin:6px 0 0}
.legal-body{max-width:760px;font-size:16px;line-height:1.8;color:var(--ink)}
.legal-body p{margin:0 0 16px}
.legal-body strong{color:var(--char);font-weight:600}
.legal-body em{font-style:italic}
.legal-body h2{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--char);margin:42px 0 12px}
.legal-body a{color:var(--copper);text-decoration:underline}