/* ============================================================
   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 Eigenhöhe (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}

/* ---- Anpassungen fuer den Vercel-Neubau ----------------------------------
   Die Bilder tragen jetzt width- und height-Attribute, damit der Browser den
   Platz reserviert und das Layout beim Laden nicht springt. Damit sie dabei
   trotzdem mitskalieren, braucht es height:auto. Regeln mit eigener Hoehe
   (.foto img, .band img, aspect-ratio) sind spezifischer und bleiben gueltig. */
img{height:auto}

/* Menueknopf auf den Unterseiten war hell auf hellem Grund und damit unsichtbar.
   Die Regel body.page:not(.home) faerbte ihn creme, der Kopf der Unterseiten ist
   aber selbst creme. Betrifft Impressum, Datenschutz, Magazin und die Beitraege. */
.blog-header .nav-toggle,
body.page:not(.home) .blog-header .nav-toggle,
body.single .blog-header .nav-toggle,
body.blog .blog-header .nav-toggle{color:var(--ink)}

/* Der Kopf der Unterseiten bleibt beim Scrollen stehen, sonst ist der Menueknopf
   nach der ersten Bildschirmhoehe nicht mehr erreichbar. Er hat dort ohnehin
   einen eigenen Hintergrund, das Aussehen aendert sich also nicht. */
.blog-header{position:sticky;top:0}