/* Seitenspezifischer Stil fuer grounding-card.
   Ausgelagert aus der Seite, weil ihn jetzt fuenf Sprachfassungen
   brauchen und er sonst fuenfmal gepflegt werden muesste. */

/* Nur diese Seite braucht das. Bewusst hier statt im globalen Stylesheet,
   sonst muesste fuer eine einzige Seite die Cache-Version aller 28 Dateien
   hochgezaehlt werden. */

.card-intro { padding: clamp(90px, 11vw, 140px) 28px 0; }
.card-intro-inner { max-width: 720px; margin: 0 auto; }
.card-intro p { color: var(--ink-soft); max-width: 62ch; }
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* Unten bewusst knapper als sonst ueblich: darunter folgt kein neuer
   Abschnitt, sondern der Erklaertext, der zur Karte gehoert. */
.card-wrap { padding: 40px 28px clamp(40px, 5vw, 60px); }

/* Das eigentliche Blatt. Seitenverhaeltnis nahe A4, damit der Ausdruck
   auf dem Bildschirm ehrlich vorschaut. */
.gcard {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--hairline);
  padding: clamp(28px, 4.5vw, 52px);
  color: var(--ink-strong);
}
.gcard-head { text-align: center; border-bottom: 2px solid var(--ink-strong); padding-bottom: 18px; }
.gcard-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.gcard-head p { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }

/* Zwei Spalten: links die Zeit, rechts was man tut. Vorher stand das
   Zeitband als kleine Zeile ueber den Begriffen und war damit optisch
   schwaecher als sein eigener Inhalt - man sah nicht, was wozu gehoert. */
.band {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 0 28px;
  border-top: 1px solid var(--hairline);
  padding: 22px 0;
}
.band:first-of-type { border-top: 0; padding-top: 26px; }

.band-time {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  line-height: 1.45;
  color: var(--gold-text);
}

.band dl { margin: 0; }
.band dt {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-strong);
}
.band dd {
  margin: 2px 0 0;
  font-size: 0.93rem;
  color: var(--ink);
}
.band dd + dt { margin-top: 13px; }

.gcard-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px solid var(--ink-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.gcard-foot strong { color: var(--ink-strong); font-weight: 600; }

/* .card-intro hat "padding: ... 28px 0", unten also gar keine. Fuer den
   Hero oben stimmt das, dort folgt die Karte mit eigener Polsterung. Hier
   folgt der Footer, und der klebte deshalb am letzten Absatz. */
.card-notes {
  padding-top: 0;
  padding-bottom: clamp(84px, 10vw, 128px);
}

/* Erklaertexte unter der Karte.
   Nicht .section-heading verwenden: die Klasse ist fuer eigenstaendige
   Seitenabschnitte gedacht, hat 0.9em Abstand nach unten und gar keinen
   nach oben. Mehrfach in einer Textspalte untereinander klebt die
   Ueberschrift dadurch am Absatz DAVOR statt an ihrem eigenen Text.
   Hier deshalb umgekehrt: viel Luft oben, wenig unten, plus eine
   Haarlinie, damit die Gruppierung eindeutig ist. */
.card-notes h2 {
  font-size: clamp(1.18rem, 2.4vw, 1.42rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* Der grosse Abstand gehoert UEBER die Linie, also ins margin. Steht er
     im padding, sitzt die Linie oben am Absatz davor und die Ueberschrift
     schwebt darunter im Leeren. Reihenfolge von oben: 2.4em Luft, Linie,
     0.8em, Ueberschrift, 0.4em, ihr Text. */
  margin: 2.4em 0 0.4em;
  padding-top: 0.8em;
  border-top: 1px solid var(--hairline);
}
.card-notes h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* Ueberschrift, Trennlinie und Text muessen dieselbe Breite haben. Vorher
   lief die Linie ueber die vollen 720px des Containers, waehrend der Text
   schon bei 62 Zeichen umbrach - rechts blieben unter jeder Linie rund
   200px leer. Ein fester rem-Wert fuer beide, nicht ch: ch rechnet gegen
   die jeweilige Schriftgroesse, und die Ueberschrift ist groesser als der
   Fliesstext, waere also breiter geworden. */
.card-notes h2,
.card-notes p { max-width: 33rem; }

.card-notes p { margin: 0 0 1.05em; }
.card-notes p:last-child { margin-bottom: 0; }

/* Schmale Schirme: gestapelt. Damit das Zeitband oben nicht wieder wie
   eine weitere Zeile wirkt, bekommt es hier eine eigene Trennlinie. */
@media (max-width: 620px) {
  .band { grid-template-columns: 1fr; gap: 0; }
  .band-time {
    padding-bottom: 9px;
    margin-bottom: 13px;
    border-bottom: 1px solid var(--gold);
  }
}

/* ---------- Ausdruck ----------------------------------------------
   Ziel: genau ein Blatt, A4 und US Letter, und lesbar auch auf einem
   Schwarzweissdrucker. Farbe darf deshalb nie alleinige Traegerin einer
   Information sein.                                                   */
@page { size: auto; margin: 12mm; }

@media print {
  .site-header, .site-footer, .card-intro, .card-notes,
  .skip-link, .consent, .nav-toggle, .mobile-nav { display: none !important; }

  html, body { background: #fff !important; }
  .card-wrap { padding: 0 !important; }

  .gcard {
    max-width: none;
    border: 0;
    padding: 0;
    color: #000;
    page-break-inside: avoid;
  }
  .gcard-head { border-bottom: 2px solid #000; padding-bottom: 10pt; }
  .gcard-head h2 { font-size: 17pt; }
  .gcard-head p { font-size: 8.5pt; }
  .gcard-head p, .band dt, .band dd, .gcard-foot { color: #000; }

  /* Die Mobil-Regel oben greift beim Druck vom Handy weiter, weil manche
     Browser dabei die Bildschirmbreite behalten. Gestapelt braucht das
     Blatt fast die doppelte Hoehe, also zwei Seiten. Deshalb hier ALLES
     zuruecksetzen, was dort gesetzt wird, nicht nur Teile davon. */
  .band {
    display: grid !important;
    grid-template-columns: 8.5em 1fr !important;
    gap: 0 18pt !important;
    border-top: 1px solid #999;
    padding: 9pt 0;
    page-break-inside: avoid;
  }
  .band:first-of-type { border-top: 0; padding-top: 4pt; }
  .band-time {
    color: #000;
    font-size: 8.5pt;
    letter-spacing: 0.12em;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .band dt, .band dd { font-size: 10pt; line-height: 1.38; }
  .band dd + dt { margin-top: 7pt; }
  .gcard-foot { margin-top: 12pt; padding-top: 9pt; }
  .gcard-foot { border-top: 2px solid #000; font-size: 8.5pt; }
  a[href]::after { content: ""; }   /* keine URLs hinter Links ausdrucken */
}