/* YUTHI · Magazin — im Look der App-Website. Setzt styles.css voraus. */

/* Übersicht */
.mag-uebersicht{max-width:1180px;margin-inline:auto;padding:clamp(24px,4vw,48px) var(--gutter) clamp(56px,8vw,96px)}
.mag-kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;margin-bottom:24px}
.mag-kopf-text{display:flex;flex-direction:column;gap:14px}
.mag-kopf-text h1{font-size:clamp(30px,4.2vw,50px)}
.mag-kopf-bild{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}
.mag-kopf-bild img{width:100%;height:100%;object-fit:cover}
.mag-sprung{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.mag-sprung a{text-decoration:none;background:var(--paper);border:1px solid var(--sage-light);border-radius:999px;padding:7px 12px;font-size:13.5px;color:var(--forest);font-weight:500;white-space:nowrap}
.mag-sprung a:hover{background:var(--sage-pale)}
.mag-gruppe{padding-block:28px 0}
.mag-gruppe h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:16px;padding-top:10px}
.mag-karten{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.mag-karte{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--cream-deep);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);min-width:0;transition:border-color .15s}
.mag-karte:hover{border-color:var(--sage)}
.mag-karte img{width:100%;aspect-ratio:16/10;object-fit:cover}
.mag-karte-text{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.mag-rubrik{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--sage-dark)}
[dir="rtl"] .mag-rubrik{letter-spacing:0}
.mag-karte h3{font-size:18px;color:var(--forest);line-height:1.25}
.mag-karte p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mag-meta{margin-top:auto;padding-top:6px;font-size:13px;color:var(--ink-muted)}

/* Laufband je Bereich (Marcel 23.09.2026: "pro Bereich einen Slide fuer die Magazinartikel.
   Dieser Slide soll anhalten, sobald ich mit der Maus drueber hover. Dabei sollen maximal
   immer drei Artikel nebeneinander zu sehen sein, wie jetzt auch.")
   Die Klasse .ist-slider setzt erst app.js - ohne JavaScript bleibt das Gitter von oben. */
.mag-lauf{position:relative}
.mag-karten.ist-slider{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:3px;
}
.mag-karten.ist-slider::-webkit-scrollbar{display:none}
.mag-karten.ist-slider > .mag-karte{flex:0 0 86%;scroll-snap-align:start}
.mag-pfeil{
  position:absolute;
  top:calc(50% - 22px);
  width:44px;height:44px;
  display:none;
  align-items:center;justify-content:center;
  border-radius:999px;
  border:1px solid var(--sage-light);
  background:var(--paper);
  color:var(--forest);
  cursor:pointer;
  box-shadow:0 6px 18px rgba(31,45,32,.16);
  /* Erst zeigen, wenn die Maus im Bereich ist - dann steht das Laufband ohnehin still. */
  opacity:0;
  pointer-events:none;
  transition:opacity .15s,background .15s,border-color .15s;
}
.mag-lauf:hover .mag-pfeil,.mag-pfeil:focus-visible{opacity:1;pointer-events:auto}
.mag-pfeil:hover{background:var(--sage-pale);border-color:var(--sage)}
.mag-pfeil svg{width:20px;height:20px}
.mag-pfeil.zurueck{inset-inline-start:-20px}
.mag-pfeil.vor{inset-inline-end:-20px}
[dir="rtl"] .mag-pfeil svg{transform:scaleX(-1)}
/* "Zu allen Schlaf-Artikeln" unter dem Laufband (Marcel 23.09.2026) - der Weg zur
   Bereichsseite mit ALLEN Artikeln. Das Laufband zeigt nur die neuesten. */
.mag-alle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  color:var(--sage-deeper);
  font-weight:500;
  font-size:15px;
  text-decoration:none;
}
.mag-alle::after{content:"\2192"}
[dir="rtl"] .mag-alle::after{content:"\2190"}
.mag-alle:hover{color:var(--forest);text-decoration:underline}

.mag-punkte{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:12px;
}
.mag-punkt{
  width:7px;height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--sage-light);
  cursor:pointer;
  transition:background .2s,width .2s;
}
.mag-punkt[aria-current="true"]{background:var(--sage-dark);width:20px}

@media (prefers-reduced-motion:reduce){
  .mag-karten.ist-slider{scroll-behavior:auto}
}

/* Artikel */
.mag-seite{max-width:820px;margin-inline:auto;padding:clamp(16px,3vw,32px) var(--gutter) clamp(56px,8vw,96px)}
.mag-zurueck{display:inline-flex;align-items:center;gap:6px;color:var(--sage-deeper);text-decoration:none;font-weight:500;font-size:15px;margin-bottom:16px}
.mag-zurueck:hover{color:var(--forest)}
.mag-article{display:flex;flex-direction:column;gap:22px}
.mag-hero{position:relative;border-radius:var(--radius);overflow:hidden;min-height:260px;display:flex;align-items:flex-end;background:var(--forest)}
.mag-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mag-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,45,32,0) 20%,rgba(31,45,32,.82) 100%)}
.mag-hero-inner{position:relative;z-index:1;padding:clamp(20px,4vw,36px);display:flex;flex-direction:column;gap:10px;color:var(--cream)}
.mag-kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--gold-soft)}
[dir="rtl"] .mag-kicker{letter-spacing:0}
.mag-hero h1{color:var(--cream);font-size:clamp(26px,3.6vw,42px);text-wrap:balance}
.mag-metabar{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ink-muted)}
.mag-meta-item{display:inline-flex;gap:4px}
.mag-body{display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.mag-body h2{font-size:clamp(21px,2.4vw,27px);color:var(--forest);margin-top:14px}
.mag-body h3{font-size:18px;color:var(--forest);margin-top:8px}
.mag-body p{margin:0}
.mag-body ul,.mag-body ol{padding-inline-start:22px;display:flex;flex-direction:column;gap:6px}
.mag-body a{color:var(--sage-deeper);font-weight:500}
.mag-body strong{color:var(--forest)}
.mag-lead{font-size:clamp(18px,1.6vw,21px);color:var(--forest);font-weight:500;line-height:1.5}
.mag-laenderbox{background:var(--paper);border:1px solid var(--sage-light);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;margin-block:8px}
.mag-laenderbox h3{font-size:15px;color:var(--sage-dark);margin:0;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.mag-laenderbox p{font-size:15px}
.mag-quellen{background:var(--cream-deep);border-radius:16px;padding:16px 18px;font-size:14px;color:var(--ink-soft)}
.mag-quellen h2,.mag-quellen h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dark);font-weight:500;margin:0 0 8px}
.mag-quellen ol,.mag-quellen ul{padding-inline-start:20px;margin:0;display:flex;flex-direction:column;gap:6px}
.mag-quellen a{color:var(--sage-deeper);overflow-wrap:anywhere}
.mag-body .yt-weiter{margin-top:10px}
/* Handy: das Bild von Vito und Vita gehoert direkt unter die Ueberschrift
   (Marcel 23.09.2026) - display:contents loest die Textspalte auf, damit sich
   Bild und Text im selben Gitter sortieren lassen. */
@media (max-width:879px){
  .mag-kopf{gap:16px}
  .mag-kopf-text{display:contents}
  .mag-kopf-text .eyebrow{order:1}
  .mag-kopf-text h1{order:2}
  .mag-kopf-bild{order:3}
  .mag-kopf-text .lead{order:4}
  .mag-kopf-text .mag-sprung{order:5}
}

@media (min-width:560px){
  .mag-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mag-karten.ist-slider > .mag-karte{flex-basis:calc((100% - 16px)/2)}
}
@media (min-width:880px){
  .mag-kopf{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .mag-kopf.einspaltig{grid-template-columns:minmax(0,1fr);max-width:760px}
  .mag-karten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mag-karten.ist-slider > .mag-karte{flex-basis:calc((100% - 32px)/3)}
  .mag-pfeil{display:flex}
  .mag-punkte{display:none}
  .mag-hero{min-height:360px}
}