/* Groombase Magazin.
 *
 * Ergänzt styles.css, ersetzt es nicht: Farben, Schriften, Kopf, Fuß und
 * Knöpfe kommen von dort. Hier steht nur, was ein Artikel zusätzlich braucht.
 * Wird ausschließlich auf den Magazinseiten geladen, damit die Startseite
 * nicht dafür bezahlt.
 *
 * Zwei Maße tragen das Layout:
 *   --lesespalte  Textbreite, 720px. Bei 18px Schrift sind das rund 70
 *                 Zeichen je Zeile, die klassische Lesebreite.
 *   --medienbreite  Bild- und Kartenbreite, deutlich breiter als der Text.
 */

:root {
  --lesespalte: 720px;
  --medienbreite: 1080px;
  --inhalt-nav: 250px;
}

/* ---------- Grundgerüst ---------- */

.lesespalte {
  width: 100%;
  max-width: var(--lesespalte);
  margin-inline: auto;
  padding-inline: 24px;
}

.artikel { display: block; }

/* ---------- Artikelkopf ---------- */

.artikel-kopf {
  padding: 56px 0 36px;
  text-align: center;
}

.brotkrume {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: 28px;
}
.brotkrume a { color: var(--muted); text-decoration: none; }
.brotkrume a:hover { color: var(--primary); text-decoration: underline; }
.brotkrume span[aria-hidden] { color: var(--line); }

.artikel-kategorie {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.artikel-kopf h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.artikel-teaser {
  margin: 22px 0 0;
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.artikel-meta {
  margin: 26px 0 0;
  font-size: .95rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.artikel-meta .punkt { color: var(--line); }

/* Autorin: Bild und Name gehoeren zusammen und duerfen nicht umbrechen. */
.artikel-meta .autor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.autor-bild {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ---------- Hero ---------- */

.artikel-hero-bild {
  margin: 0 auto;
  max-width: var(--medienbreite);
  padding-inline: 24px;
}
.artikel-hero-bild img {
  width: 100%;
  /* Feste Proportion: das Bild belegt seinen Platz, bevor es geladen ist.
   * Ohne das springt der Text beim Laden nach unten. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
figcaption {
  margin-top: 12px;
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Körper: Text und Inhaltsverzeichnis ---------- */

.artikel-koerper {
  max-width: var(--medienbreite);
  margin: 0 auto;
  padding: 56px 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 1180px) {
  /* Text und Inhaltsverzeichnis stehen zusammen so breit wie das Hero-Bild
   * darüber: die linke Kante des Textes und die rechte Kante der Navigation
   * liegen genau auf den Bildkanten. Vorher war der Rahmen breiter als das
   * Bild, dadurch rutschte die Navigation zu weit nach rechts. */
  .artikel-koerper {
    grid-template-columns: var(--lesespalte) minmax(0, 1fr);
    align-items: start;
    gap: 0;
    padding-inline: 24px;
  }
  .artikel-koerper .lesespalte { margin-inline: 0; padding-inline: 0; }
}

/* ---------- Fließtext ---------- */

.artikel-text { font-size: 1.075rem; line-height: 1.78; }
.artikel-text > p { margin: 0 0 1.35rem; }
.artikel-text > p > strong { color: var(--ink); }

.artikel-text h2 {
  margin: 3rem 0 1.1rem;
  font-size: clamp(1.6rem, 3vw, 2rem);
  scroll-margin-top: 100px;
}
.artikel-text h3 {
  margin: 2.2rem 0 .7rem;
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 600;
}

.artikel-text ul,
.artikel-text ol { margin: 0 0 1.35rem; padding-left: 1.3rem; }
.artikel-text li { margin-bottom: .55rem; }
.artikel-text li::marker { color: var(--primary); }

.artikel-text a:not(.btn) { text-decoration: underline; }

/* Zitat: keine Kästen, nur eine Linie. Ruhe kommt aus Weißraum. */
.artikel-text blockquote {
  margin: 2.2rem 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--primary);
}
.artikel-text blockquote p {
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: 1.28rem;
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}
/* Nicht <footer>: das Element ist auf der Seite global dunkel gesetzt,
 * innerhalb des Zitats saehe die Quellenangabe aus wie ein Balken. */
.artikel-text blockquote .zitat-quelle {
  margin: 12px 0 0;
  font-family: "Lato", "Lato Fallback", sans-serif;
  font-size: .92rem;
  font-style: normal;
  color: var(--muted);
}

.artikel-bild { margin: 2.4rem 0; }
/* Nie hochskalieren: ein Bild mit 600 Pixeln Breite wuerde in der 720 Pixel
 * breiten Lesespalte sonst aufgeblasen und unscharf. Schmalere Bilder
 * stehen mittig, wie die Unterschrift darunter. */
.artikel-bild img {
  border-radius: var(--radius);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* Tabellen dürfen auf schmalen Bildschirmen scrollen, die Seite nicht. */
.tabelle-rahmen {
  margin: 2rem 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.artikel-text table {
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
  line-height: 1.5;
  /* Heller Grund fuer die Zeilen, damit die Tabelle als Block steht und
   * nicht im Seitenhintergrund verschwindet. Die Kopfzeile behaelt ihren
   * waermeren Ton und hebt sich weiter ab. */
  background: #faf7f3;
}
/* Eng gesetzt: eine Uebersichtstabelle hat schnell fuenf Spalten, und die
 * muessen in die Lesebreite passen, ohne dass jede Zelle dreimal umbricht. */
.artikel-text th,
.artikel-text td { padding: 11px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.artikel-text thead th { background: var(--warm-surface); font-weight: 700; white-space: nowrap; }
.artikel-text tbody tr:last-child td { border-bottom: 0; }

/* ---------- Kästen ---------- */

.kasten {
  margin: 2.4rem 0;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.02rem;
}
.kasten p { margin-bottom: .8rem; }
.kasten p:last-child { margin-bottom: 0; }
.kasten ul { margin-bottom: 0; }
.kasten-titel {
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}
.kasten-hinweis { border-left-color: var(--warm); background: var(--warm-surface); }
.kasten-hinweis .kasten-titel { color: #8a4a2b; }

/* ---------- Inhaltsverzeichnis ---------- */

.inhalt-nav {
  padding-inline: 24px;
  font-size: .95rem;
}
.inhalt-titel {
  margin: 0 0 14px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.inhalt-nav ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.inhalt-nav a {
  color: var(--muted);
  text-decoration: none;
  line-height: 1.45;
  display: block;
}
.inhalt-nav a:hover { color: var(--primary); text-decoration: underline; }

/* Der Abschnitt, in dem man gerade liest.
 *
 * Nicht das reine Terrakotta: es kommt auf dem Cremegrund nur auf Kontrast
 * 3,3 und waere in dieser Schriftgroesse zu schwach. Der abgedunkelte Ton
 * erreicht 4,6 und bleibt derselbe Farbton.
 *
 * Farbe allein reicht als Kennzeichnung nicht, wer sie nicht unterscheiden
 * kann, sieht sonst nichts. Deshalb kommen Fettung und ein Strich am linken
 * Rand dazu. */
.inhalt-nav li { position: relative; }
.inhalt-nav a[aria-current] {
  color: #a95b38;
  font-weight: 700;
}
.inhalt-nav a[aria-current]::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #a95b38;
}

@media (min-width: 1180px) {
  .inhalt-nav {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    /* Breite fest, Rest ist Abstand zum Text. So bleibt die Navigation
     * an derselben Stelle, egal wie lang die Überschriften sind. */
    width: var(--inhalt-nav);
    justify-self: end;
    padding-inline: 0;
  }
}
/* Auf schmalen Bildschirmen steht es im Fluss, vor dem Text, und ist
 * eingeklappt. Es soll den Einstieg nicht zustellen. */
@media (max-width: 1179px) {
  .artikel-koerper { display: flex; flex-direction: column-reverse; gap: 0; padding-top: 34px; }
  .inhalt-nav {
    max-width: var(--lesespalte);
    margin: 0 auto 34px;
    width: 100%;
  }
  .inhalt-nav ol { padding-top: 4px; }
}

/* ---------- Aufruf ---------- */

.cta-kasten {
  margin: 3.4rem 0 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  text-align: center;
}
.cta-kasten .cta-titel {
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
}
.cta-kasten p { color: var(--muted); }
.cta-kasten .btn { margin-top: 14px; }
.cta-fein { margin: 12px 0 0; font-size: .9rem; }

/* ---------- Quellen ---------- */

.quellen {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.quellen h2 {
  font-size: 1.1rem;
  font-family: "Lato", "Lato Fallback", sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.quellen ul { margin: 0; padding-left: 1.2rem; font-size: .95rem; }
.quellen li { margin-bottom: .5rem; color: var(--muted); }

/* ---------- Autorinnenkasten ---------- */

.autoren-box {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.autoren-box img {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.autoren-name {
  margin: 0 0 .6rem;
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}
.autoren-rolle {
  display: block;
  font-family: "Lato", "Lato Fallback", sans-serif;
  font-size: .92rem;
  font-weight: 400;
  color: var(--muted);
}
.autoren-text { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--muted); }

@media (max-width: 620px) {
  .autoren-box { flex-direction: column; gap: 16px; }
}

/* ---------- Blättern ---------- */

.blaettern {
  max-width: var(--medienbreite);
  margin: 56px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.blaettern a {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.blaettern a:hover { border-color: var(--primary); }
.blaettern span { font-size: .85rem; color: var(--muted); }
.blaettern strong {
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.35;
}
.blaettern-zurueck { text-align: right; }

/* ---------- Karten ---------- */

.weitere { padding: 72px 0 96px; }
.weitere .wrap { max-width: calc(var(--medienbreite) + 48px); }
.weitere h2 { font-size: 1.7rem; margin-bottom: 28px; }
.weitere-index { padding-top: 8px; }

.magazin-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.magazin-karte {
  display: grid;
  align-content: start;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.magazin-karte img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.karte-kategorie {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}
.karte-titel {
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.35;
}
.magazin-karte:hover .karte-titel { text-decoration: underline; text-underline-offset: 3px; }
.karte-meta { font-size: .9rem; color: var(--muted); }

/* ---------- Magazinübersicht ---------- */

.magazin-kopf { padding: 56px 0 40px; text-align: center; }
.magazin-kopf h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }

/* ---------- Sichtbarer Fokus ---------- */

.artikel a:focus-visible,
.magazin-karte:focus-visible,
.blaettern a:focus-visible,
.inhalt-nav a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 620px) {
  .artikel-kopf { padding: 32px 0 26px; }
  .artikel-hero-bild { padding-inline: 0; }
  .artikel-hero-bild img { border-radius: 0; aspect-ratio: 4 / 3; }
  .artikel-teaser { font-size: 1.1rem; }
  .artikel-text { font-size: 1.05rem; }
  .artikel-text h2 { margin-top: 2.4rem; }
  .cta-kasten { padding: 26px 22px; }
  .kasten { padding: 20px; }
  .weitere { padding: 48px 0 64px; }
  .blaettern-zurueck { text-align: left; }
}

/* ---------- Ausfallrechner ----------
 *
 * Zwei Karten nebeneinander: links die Regler, rechts das Ergebnis auf
 * dunklem Gruen. Er darf breiter sein als die Lesespalte, sonst stehen die
 * Regler zu eng. Die Akzentfarbe auf dem dunklen Feld ist ein aufgehellter
 * Terrakotta: die Markenfarbe selbst kommt dort nur auf Kontrast 2,6 und
 * waere nicht lesbar, der helle Ton erreicht 5,2.
 */

.rechner {
  margin: 2.8rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  /* Ein Rahmen um beide Haelften, nicht zwei Kaesten nebeneinander. Ein
   * Kasten im Kasten waere die dritte Rahmenlinie auf engem Raum, und
   * Rahmen stapeln ist genau das, was die Seite sonst vermeidet. */
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 900px) {
  .rechner {
    grid-template-columns: 1fr 1fr;
    /* Ausbruch nach beiden Seiten, aber nur so weit, wie Platz ist. */
    width: calc(100% + 120px);
    margin-inline: -60px;
  }
}
@media (min-width: 1180px) {
  /* Rechts steht das Inhaltsverzeichnis, dorthin darf er nicht wachsen. */
  .rechner { width: calc(100% + 60px); margin-inline: -60px 0; }
}

.rechner-eingaben,
.rechner-ergebnis { padding: 26px 28px; }

.rechner-eingaben { background: var(--surface); margin: 0; }
.rechner-kopf {
  margin: 0 0 22px;
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
}

.rechner-feld { display: block; margin-bottom: 22px; }
.rechner-feld:last-child { margin-bottom: 0; }
.rechner-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.rechner-name b {
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: 1.25rem;
  color: var(--primary);
  white-space: nowrap;
}
.rechner-hilfe {
  display: block;
  margin-top: 8px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Regler: eigene Darstellung, sonst sieht er in jedem Browser anders aus. */
.rechner input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  outline: none;
  margin: 0;
}
.rechner input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}
.rechner input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  cursor: pointer;
}
.rechner input[type="range"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}

.rechner-ergebnis {
  background: var(--primary);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rechner-label { margin: 0; font-size: .95rem; color: #cfe0d7; }
.rechner-summe {
  margin: 6px 0 4px;
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  color: #eab890;
}
.rechner-formel { margin: 0; font-size: .92rem; color: #cfe0d7; }

.rechner-zahlen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.rechner-zahlen b {
  display: block;
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
}
.rechner-zahlen span { font-size: .88rem; color: #cfe0d7; }

.rechner-vergleich {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .08);
  font-size: .95rem;
  line-height: 1.55;
  color: #eef5f1;
  text-align: left;
}

@media (max-width: 620px) {
  .rechner-eingaben,
  .rechner-ergebnis { padding: 22px 20px; }
}

/* ---------- Text auf der Magazinübersicht ---------- */

.magazin-info { padding: 8px 0 96px; }
.magazin-info h2 { font-size: 1.5rem; margin: 2.4rem 0 1rem; }
.magazin-info h2:first-child { margin-top: 0; }
.magazin-info p { margin-bottom: 1.1rem; line-height: 1.75; color: var(--muted); }