/* ==========================================================================
   WORTMALEREI — DAS MAGAZIN
   Erweiterung von styles.css. Nichts hier ueberschreibt die Hauptseiten.
   Alle Klassen tragen das Praefix .mag- oder liegen innerhalb von .mag-*.
   ========================================================================== */

:root{
  /* Der Lesebogen ist ein anderer Papierton als die Sektionen der Website.
     Das ist Absicht: eine Zeitschrift druckt Umschlag und Innenteil
     nicht auf dasselbe Papier. */
  --paper:#F6F2E9;
  /* Aus der Landingpage uebernommen: helles Gold auf hellem Papier
     erreicht nur 2.4:1 und ist damit unlesbar. Diese beiden Toene sind
     auf Kontrast gerechnet. Gold bleibt Linien- und Dunkelflaechenfarbe. */
  --gold-ink:#7A5D35;   /* kleine Schrift — mindestens 4.70:1 auf allen vier Flaechen */
  --gold-deep:#9D7844;  /* Schrift ab 24px — mindestens 3.11:1 */
  --stone-ink:#645E51;  /* Nebentext — mindestens 4.96:1 */
  --paper-edge:rgba(46,48,38,.13);
  --read:64ch;
}

/* ---------- Fortschrittskante (nur Artikel) ------------------------------ */
.mag-edge{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--gold); z-index:70; opacity:.9;
  transition:width .12s linear; pointer-events:none;
}

/* ---------- Kolumnentitel ------------------------------------------------
   Die Signatur des Magazins. In gedruckten Heften steht ueber jeder Seite
   eine schmale Zeile: links die Rubrik, rechts die Orientierung.
   Sie ist keine Dekoration — sie sagt, wo man ist und wie lange es dauert. */
.mag-run{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  border-top:1px solid var(--paper-edge);
  border-bottom:1px solid var(--paper-edge);
  padding:.85rem 0;
  font-family:var(--label); font-weight:300; font-size:.62rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--stone-ink);
}
.mag-run__l{color:var(--gold-ink);}
.mag-run a{color:inherit;}
.mag-run a:hover{color:var(--gold-ink);}
.band--dark .mag-run, .band--deep .mag-run{
  border-color:rgba(180,154,103,.28); color:var(--on-dark-soft);
}

/* ---------- Brotkrumen --------------------------------------------------- */
.mag-crumb{
  font-family:var(--label); font-weight:300; font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--stone-ink);
  margin-bottom:clamp(2rem,5vw,3.2rem);
}
.mag-crumb a{border-bottom:1px solid transparent; transition:.3s;}
.mag-crumb a:hover{color:var(--gold-ink); border-color:rgba(129,99,57,.5);}
.mag-crumb span{margin:0 .6em; opacity:.5;}

/* ---------- Masthead ----------------------------------------------------- */
.mag-mast{
  background:var(--sage-deep); color:var(--on-dark);
  padding:clamp(9rem,20vh,14rem) clamp(1.25rem,5vw,2rem) clamp(5rem,10vh,7rem);
  text-align:center; position:relative; overflow:hidden;
}
.mag-mast__word{
  font-family:var(--display); font-weight:300; color:#F4EFE4;
  font-size:clamp(2.4rem,9vw,6.4rem); line-height:1;
  letter-spacing:.16em; text-indent:.16em; margin:0;
}
.mag-mast__rule{width:clamp(46px,7vw,78px); height:1px; background:var(--gold); margin:clamp(1.4rem,3vw,2.2rem) auto;}
.mag-mast__sub{
  font-family:var(--label); font-weight:300; color:var(--gold);
  letter-spacing:.34em; text-indent:.34em;
  font-size:clamp(.62rem,1.5vw,.8rem); text-transform:uppercase;
}
.mag-mast__claim{
  font-family:var(--display); font-style:italic; color:#EAE3D5;
  font-size:clamp(1.15rem,2.4vw,1.7rem); line-height:1.6;
  max-width:34ch; margin:clamp(2.2rem,5vw,3.4rem) auto 0;
}
@media(max-width:600px){
  .mag-mast__word{letter-spacing:.1em; text-indent:.1em;}
  .mag-mast__sub{letter-spacing:.24em; text-indent:.24em;}
}

/* ---------- Aufmacher ---------------------------------------------------- */
.mag-lead{display:block;}
.mag-lead__fig{position:relative; overflow:hidden; margin-bottom:clamp(2rem,4vw,3rem);}
.mag-lead__fig img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  filter:grayscale(.18) contrast(1.02);
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1), filter .8s ease;
}
.mag-lead:hover .mag-lead__fig img{transform:scale(1.03); filter:grayscale(0) contrast(1.03);}
.mag-lead__fig::after{content:""; position:absolute; inset:14px; border:1px solid rgba(241,236,225,.28); pointer-events:none;}
.mag-lead__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,4.5rem); align-items:start;}
.mag-lead__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.1rem,5.4vw,3.9rem); line-height:1.06; letter-spacing:.01em;
  position:relative; display:inline-block;
}
.mag-lead__title::after{
  content:""; position:absolute; left:0; bottom:-.3em; height:1px; width:34px;
  background:var(--gold); opacity:.6;
  transition:width .7s cubic-bezier(.19,1,.22,1), opacity .45s ease;
}
.mag-lead:hover .mag-lead__title::after{width:100%; opacity:1;}
.mag-lead__teaser{
  font-family:var(--body); font-style:italic; color:var(--stone-ink);
  font-size:1.1rem; line-height:1.85; max-width:42ch; margin-top:1.4rem;
}
@media(max-width:820px){ .mag-lead__grid{grid-template-columns:1fr; gap:1.2rem;} }

/* ---------- Register (ersetzt Blogkarten) --------------------------------
   Kein Raster aus Kacheln. Ein typografisches Verzeichnis, wie das
   Inhaltsverzeichnis eines Hefts. */
.mag-reg{border-top:1px solid var(--paper-edge);}
.mag-reg__row{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:.4rem clamp(1.2rem,3vw,2.6rem);
  align-items:start; position:relative;
  padding:clamp(2.1rem,4vw,3.2rem) .4rem;
  border-bottom:1px solid var(--paper-edge);
  transition:padding-left .45s cubic-bezier(.22,.61,.36,1);
}
.mag-reg__row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:rgba(180,154,103,.07); transition:width .45s ease; z-index:0;
}
.mag-reg__row:hover{padding-left:1.4rem;}
.mag-reg__row:hover::before{width:100%;}
.mag-reg__idx{
  font-family:var(--display); font-weight:300; color:var(--gold-ink);
  font-size:clamp(1.1rem,1.9vw,1.35rem); letter-spacing:.06em;
  min-width:2.4em; padding-top:.5rem;
  position:relative; z-index:1; transition:opacity .5s ease;
}

.mag-reg__body{position:relative; z-index:1; min-width:0;}
.mag-reg__kicker{
  font-family:var(--label); font-weight:300; font-size:.6rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--stone-ink);
  display:block; margin-bottom:.7rem;
}
.mag-reg__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,3.1vw,2.15rem); line-height:1.14; letter-spacing:.01em;
  margin:0; position:relative; display:inline-block;
}
.mag-reg__title::after{
  content:""; position:absolute; left:0; bottom:-.26em; height:1px; width:22px;
  background:var(--gold); opacity:.55;
  transition:width .65s cubic-bezier(.19,1,.22,1), opacity .4s ease;
}
.mag-reg__row:hover .mag-reg__title::after{width:100%; opacity:1;}
.mag-reg__teaser{
  font-family:var(--body); font-style:italic; color:var(--stone-ink);
  font-size:1.02rem; line-height:1.8; max-width:52ch; margin:1.1rem 0 0;
}
.mag-reg__meta{
  position:relative; z-index:1; text-align:right; padding-top:.6rem;
  font-family:var(--label); font-weight:300; font-size:.6rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--stone-ink);
  white-space:nowrap;
}
@media(max-width:720px){
  .mag-reg__row{grid-template-columns:auto 1fr; padding:2.4rem .2rem;}
  .mag-reg__meta{grid-column:2; text-align:left; padding-top:1rem;}
  .mag-reg__title{font-size:1.55rem;}
}

/* ---------- Rubrikenverzeichnis ------------------------------------------ */
.mag-rub{border-top:1px solid var(--paper-edge);}
.mag-rub__row{
  display:grid; grid-template-columns:1fr 1.2fr auto; align-items:baseline;
  gap:.5rem clamp(1.4rem,4vw,3rem);
  padding:clamp(1.9rem,3.6vw,2.8rem) .4rem;
  border-bottom:1px solid var(--paper-edge);
  position:relative; transition:padding-left .45s cubic-bezier(.22,.61,.36,1);
}
.mag-rub__row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(180,154,103,.07); transition:width .45s ease;}
.mag-rub__row:hover{padding-left:1.3rem;}
.mag-rub__row:hover::before{width:100%;}
.mag-rub__name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,2.8vw,1.95rem); line-height:1.15;
  position:relative; z-index:1;
}
.mag-rub__line{font-family:var(--body); color:var(--stone-ink); font-size:1rem; line-height:1.75; position:relative; z-index:1;}
.mag-rub__n{
  font-family:var(--label); font-weight:300; font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-ink); position:relative; z-index:1; white-space:nowrap;
}
@media(max-width:820px){
  .mag-rub__row{grid-template-columns:1fr auto;}
  .mag-rub__line{grid-column:1/-1; margin-top:.5rem;}
}

/* ==========================================================================
   ARTIKEL
   ========================================================================== */
.mag-paper{background:var(--paper);}

.mag-open{padding-top:clamp(7.5rem,17vh,11rem);}
.mag-open__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.4rem,6.2vw,4.6rem); line-height:1.04; letter-spacing:.02em;
  margin:0;
}
.mag-open__sub{
  font-family:var(--body); font-style:italic; color:var(--gold-ink);
  font-size:clamp(1.05rem,1.9vw,1.35rem); line-height:1.65;
  margin-top:1.3rem; max-width:44ch;
}
.mag-open .center .mag-open__sub{margin-inline:auto;}

.mag-hero{margin-top:clamp(2.6rem,6vw,4.4rem); position:relative; overflow:hidden;}
.mag-hero img{width:100%; aspect-ratio:16/8; object-fit:cover; display:block; filter:grayscale(.2) contrast(1.02);}
.mag-hero::after{content:""; position:absolute; inset:14px; border:1px solid rgba(241,236,225,.26); pointer-events:none;}
.mag-hero figcaption{
  font-family:var(--label); font-weight:300; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--stone-ink); text-align:center; margin-top:1.1rem;
}
@media(max-width:600px){ .mag-hero img{aspect-ratio:4/3;} }

/* ---------- Lesetext ----------------------------------------------------- */
.mag-body{max-width:var(--read); margin:0 auto;}
.mag-body > * {max-width:100%;}
.mag-body p{font-size:1.09rem; line-height:1.94; margin:1.35rem 0; hyphens:auto;}
.mag-body a{color:var(--sage); border-bottom:1px solid rgba(180,154,103,.55); transition:.3s;}
.mag-body a:hover{color:var(--gold-ink); border-color:var(--gold-ink);}

/* Vorspann */
.mag-body .vorspann{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.55; letter-spacing:.005em;
  margin:0 0 2.4rem; color:var(--black);
}

/* Initial — drei Zeilen hoch, wie im Heft */
.mag-body .initial::first-letter{
  font-family:var(--display); font-weight:300; color:var(--gold-deep);
  font-size:3.5em; line-height:.82; float:left;
  padding:.06em .12em 0 0; margin-right:.02em;
}
@media(max-width:520px){ .mag-body .initial::first-letter{font-size:2.9em;} }

.mag-body h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3.1vw,2.15rem); line-height:1.2; letter-spacing:.01em;
  margin:clamp(3.2rem,6vw,4.6rem) 0 .2rem;
}
.mag-body h2::after{content:""; display:block; width:28px; height:1px; background:var(--gold); opacity:.55; margin:1.05rem 0 1.4rem;}
.mag-body h3{
  font-family:var(--label); font-weight:400; font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--stone-ink);
  margin:2.6rem 0 .5rem;
}
.mag-body ul, .mag-body ol{margin:1.35rem 0; padding-left:0; list-style:none;}
.mag-body li{
  font-size:1.06rem; line-height:1.88; margin:.75rem 0;
  padding-left:1.7rem; position:relative; hyphens:auto;
}
.mag-body ul li::before{content:"—"; position:absolute; left:0; color:var(--gold-ink);}
.mag-body ol{counter-reset:mgl;}
.mag-body ol li{counter-increment:mgl;}
.mag-body ol li::before{
  content:counter(mgl,decimal-leading-zero); position:absolute; left:0;
  font-family:var(--display); color:var(--gold-ink); font-size:.95em;
}

/* Zitat — bricht aus dem Satzspiegel aus */
.mag-quote{
  margin:clamp(3rem,6vw,4.4rem) 0; padding:clamp(2rem,4vw,2.8rem) 0;
  border-top:1px solid rgba(180,154,103,.42);
  border-bottom:1px solid rgba(180,154,103,.42);
  text-align:center;
}
.mag-quote p{
  font-family:var(--display); font-style:italic; color:var(--gold-deep);
  font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.42; margin:0;
  max-width:24ch; margin-inline:auto;
}
.mag-quote cite{
  display:block; font-family:var(--label); font-weight:300; font-style:normal;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--stone-ink); margin-top:1.6rem;
}

/* Notiz */
.mag-note{
  background:rgba(203,187,163,.24); border:1px solid rgba(180,154,103,.36);
  padding:clamp(1.5rem,3.5vw,2rem) clamp(1.4rem,3.5vw,2.2rem);
  margin:clamp(2.6rem,5vw,3.6rem) 0;
}
.mag-note__l{
  font-family:var(--label); font-weight:400; font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold-ink); display:block; margin-bottom:.9rem;
}
.mag-note p{font-size:1.02rem; line-height:1.84; margin:.5rem 0;}
.mag-note p:first-of-type{margin-top:0;}
.mag-note p:last-child{margin-bottom:0;}

/* Bild im Fliesstext */
.mag-fig{margin:clamp(2.8rem,5.5vw,4rem) 0; position:relative;}
.mag-fig img{width:100%; display:block; aspect-ratio:3/2; object-fit:cover;}
.mag-fig::after{content:""; position:absolute; inset:12px; border:1px solid rgba(180,154,103,.3); pointer-events:none;}
.mag-fig figcaption{
  font-family:var(--label); font-weight:300; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--stone-ink); text-align:center; margin-top:1rem;
}

/* Fragen — auch als FAQ-Schema ausgezeichnet */
.mag-faq{border-top:1px solid var(--paper-edge); margin-top:1.5rem;}
.mag-faq details{border-bottom:1px solid var(--paper-edge);}
.mag-faq summary{
  cursor:pointer; list-style:none; padding:1.5rem .2rem;
  font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,2.1vw,1.4rem);
  line-height:1.35; display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
}
.mag-faq summary::-webkit-details-marker{display:none;}
.mag-faq summary::after{content:"+"; color:var(--gold-ink); font-family:var(--body); flex:none;}
.mag-faq details[open] summary::after{content:"–";}
.mag-faq details > div{padding:0 .2rem 1.7rem;}
.mag-faq details p{font-size:1.04rem; line-height:1.86; color:var(--stone-ink); margin:.4rem 0;}

/* ---------- Verfasserin -------------------------------------------------- */
.mag-author{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,4vw,2.4rem);
  align-items:center; max-width:var(--read); margin:0 auto;
  border-top:1px solid var(--paper-edge); border-bottom:1px solid var(--paper-edge);
  padding:clamp(2rem,4vw,2.6rem) 0;
}
.mag-author__img{width:clamp(76px,11vw,104px); aspect-ratio:1; overflow:hidden; border-radius:50%; flex:none;}
.mag-author__img img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; filter:grayscale(.25);}
.mag-author__n{font-family:var(--display); font-weight:400; font-size:1.3rem; line-height:1.2;}
.mag-author__r{
  font-family:var(--label); font-weight:300; font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-ink); margin-top:.5rem; display:block;
}
.mag-author p{font-size:1rem; line-height:1.8; color:var(--stone-ink); margin:.9rem 0 0; max-width:48ch;}
@media(max-width:520px){ .mag-author{grid-template-columns:1fr;} }

/* ---------- Stiller Verweis auf die Zeremonie ---------------------------- */
.mag-bridge{
  max-width:var(--read); margin:clamp(3rem,6vw,4.4rem) auto 0; text-align:center;
}
.mag-bridge p{
  font-family:var(--display); font-style:italic; color:var(--stone-ink);
  font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.55; margin:0 0 1.5rem;
  max-width:36ch; margin-inline:auto;
}

/* ---------- Weiterlesen -------------------------------------------------- */
.mag-more{border-top:1px solid var(--paper-edge);}
.mag-more__row{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.6rem 2rem;
  padding:clamp(1.6rem,3.2vw,2.3rem) .4rem;
  border-bottom:1px solid var(--paper-edge);
  position:relative; transition:padding-left .45s cubic-bezier(.22,.61,.36,1);
}
.mag-more__row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(180,154,103,.07); transition:width .45s ease;}
.mag-more__row:hover{padding-left:1.2rem;}
.mag-more__row:hover::before{width:100%;}
.mag-more__k{
  font-family:var(--label); font-weight:300; font-size:.58rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--stone-ink); display:block; margin-bottom:.55rem;
  position:relative; z-index:1;
}
.mag-more__t{
  font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,2.3vw,1.55rem);
  line-height:1.22; position:relative; z-index:1;
}
.mag-more__m{
  font-family:var(--label); font-weight:300; font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-ink); position:relative; z-index:1; white-space:nowrap;
}

/* ---------- Kleinteile --------------------------------------------------- */
.mag-empty{
  font-family:var(--body); font-style:italic; color:var(--stone-ink);
  font-size:1.06rem; line-height:1.85; max-width:46ch; margin:0 auto; text-align:center;
}
.mag-secline{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem);
}
.mag-secline h2{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.1; letter-spacing:.01em; margin:0;
}

/* Navigation atmet, sobald ein Punkt mehr da ist */
@media(min-width:721px) and (max-width:1000px){
  .nav__links{gap:1.15rem;}
  .nav__links a, .nav__drop>span{font-size:.7rem; letter-spacing:.15em;}
}

@media(prefers-reduced-motion:reduce){
  .mag-lead__fig img, .mag-reg__row, .mag-rub__row, .mag-more__row, .mag-edge{transition:none;}
  .mag-lead:hover .mag-lead__fig img{transform:none;}
}

/* Brotkrumen auf kleinen Schirmen: enger, damit sie eine Zeile halten */
@media(max-width:600px){
  .mag-crumb{letter-spacing:.14em; font-size:.58rem;}
  .mag-crumb span{margin:0 .4em;}
}

/* ==========================================================================
   KONTRASTKORREKTUR — greift ausschliesslich auf Magazinseiten (.mag-scope).
   Die elf Bestandsseiten behalten ihr Aussehen unveraendert.
   Grundregel: auf hellem Papier die gerechneten Toene, auf dunklen
   Flaechen bleibt das helle Gold, weil es dort ohnehin traegt.
   ========================================================================== */
.mag-scope .eyebrow{color:var(--stone-ink);}
.mag-scope .eyebrow.gold{color:var(--gold-ink);}
.mag-scope .eyebrow.gold::after{background:var(--gold);}
.mag-scope .link-gold{color:var(--gold-ink); border-bottom-color:rgba(122,93,53,.55);}
.mag-scope .poem .gold{color:var(--gold-deep);}
.mag-scope .lede{color:var(--stone-ink);}

.mag-scope .band--dark  .eyebrow,
.mag-scope .band--deep  .eyebrow,
.mag-scope .mag-mast    .eyebrow{color:var(--on-dark-soft);}
.mag-scope .band--dark  .eyebrow.gold,
.mag-scope .band--deep  .eyebrow.gold,
.mag-scope .page-hero   .eyebrow.gold,
.mag-scope .mag-mast    .eyebrow.gold{color:var(--gold);}
.mag-scope .band--dark  .link-gold,
.mag-scope .band--deep  .link-gold{color:var(--gold); border-bottom-color:rgba(180,154,103,.5);}
.mag-scope .band--dark  .poem .gold,
.mag-scope .band--deep  .poem .gold{color:var(--gold);}
.mag-scope .band--dark  .lede,
.mag-scope .band--deep  .lede{color:var(--on-dark-soft);}