/* =========================================================
   meditationgongs.de · Textseiten und Formularseite (Entwurf 04.09.2026)
   Vorlage für Impressum, Datenschutz, AGB, Widerruf, Versand, Zahlungsarten, Rücksendung, Über uns
   und für Kontakt. Grund Weiß (liste.css), Formularregeln aus produkt.css.
   ========================================================= */
.textseite{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,5vw,96px);padding:clamp(20px,3vw,40px) 0 var(--sec);align-items:start}
.seitennav{position:sticky;top:112px;border-top:1px solid var(--linie);padding-top:18px}
.seitennav__titel{font-size:var(--fs-kicker);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:14px}
.seitennav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.seitennav a{display:block;padding:12px 0;color:var(--dunkel);font-size:1.0625rem;font-weight:500;border-bottom:1px solid var(--linie)}
.seitennav a:hover{color:var(--wein);text-decoration:none}
.seitennav a[aria-current]{color:var(--wein);font-weight:700;border-bottom-color:var(--wein)}
.lesespalte{max-width:68ch}
.lesespalte--breit{max-width:none}
.lesespalte h1{font-size:clamp(2.6rem,4.4vw,4rem);line-height:1.04;margin-bottom:clamp(28px,3vw,44px)}
.lesespalte h2{font-size:clamp(1.6rem,2vw,1.95rem);line-height:1.2;margin:clamp(46px,5vw,72px) 0 20px;padding-top:30px;border-top:1px solid var(--linie)}
.lesespalte h1 + h2{border-top:0;padding-top:0;margin-top:0}
.lesespalte p{color:var(--text);font-size:var(--fs-body);line-height:1.65}
.lesespalte p + p{margin-top:22px}
.lesespalte a{word-break:break-word}

/* Kontakt: Daten links auf Dunkel, Formular rechts */
.kontakt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:8px}
.kontakt__daten{font-style:normal;display:grid;gap:14px;padding:clamp(24px,3vw,36px);border-radius:var(--radius-l);background:var(--dunkel);color:var(--creme)}
.kontakt__daten p{color:var(--creme);line-height:1.5}
.kontakt__daten a{color:var(--creme);text-decoration:underline;text-decoration-color:var(--creme-30);text-underline-offset:.2em}
.kontakt__daten a:hover{text-decoration-color:var(--creme)}
.kontakt__name{font-family:var(--f-display);font-size:1.75rem;line-height:1.15}
.kontakt__label{display:block;font-size:var(--fs-kicker);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--creme-70);margin-bottom:2px}
.kontakt__hinweis{padding-top:14px;border-top:1px solid var(--creme-30)}
.kontakt__daten .nebenlink{color:var(--creme);font-size:var(--fs-small);text-decoration-color:var(--creme-70)}
.haken{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);color:var(--dunkel);line-height:1.45}
.haken input{width:20px;height:20px;accent-color:var(--akzent);margin:.15em 0 0;flex:none}

@media (max-width:1180px){.textseite{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:900px){
  .textseite{grid-template-columns:1fr;gap:28px}
  .seitennav{position:static;border-top:0;padding-top:0}
  .seitennav ul{display:flex;flex-wrap:wrap;gap:8px}
  .seitennav a{border:1px solid var(--dunkel-14);border-radius:999px;padding:8px 14px;font-size:1rem}
  .seitennav a[aria-current]{background:var(--wein);color:var(--creme);border-color:var(--wein)}
  .kontakt{grid-template-columns:1fr}
}

/* Kontaktformular in der Lesespalte, seit 22.09.2026. Ohne diesen Abstand
   klebt das erste Feld an dem Satz darueber, gemessen am gerenderten
   Staging. Das Formular selbst kommt aus produkt.css, dort steht es im
   zweispaltigen Frageblock der Produktseite und braucht keinen Abstand. */
.lesespalte .formular{margin-top:30px}

/* ---------- Fehlerseite, Lea 14.10.2026 ----------
   Text links, Bild rechts, auf weissem Grund wie alle inneren Seiten.
   Ueberschrift in der Groesse der Lesespalte, damit Fehler- und Textseite
   gleich wirken. Unter 900 Pixeln eine Spalte, das Bild folgt dem Text im
   Verhaeltnis der Datei. Ab 901 Pixeln ein quadratischer Ausschnitt um den
   Gong, beschnitten, nie gedehnt. */
.fehler{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center;padding:clamp(28px,4vw,64px) 0 var(--sec)}
.fehler__text{min-width:0;max-width:42rem}
.fehler h1{font-size:clamp(2.6rem,4.4vw,4rem);line-height:1.04;margin-bottom:clamp(22px,2.4vw,32px)}
.fehler .lede,.fehler__hinweis{text-wrap:pretty}
.fehler__knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3vw,44px)}
.fehler__hinweis{margin-top:clamp(30px,3vw,44px);padding-top:22px;border-top:1px solid var(--linie);color:var(--text)}
.fehler__bild{margin:0;aspect-ratio:1/1;border-radius:var(--radius-l);overflow:hidden;background:var(--dunkel)}
.fehler__bild img{width:100%;height:100%;object-fit:cover;object-position:80% 50%}
@media (max-width:900px){
  .fehler{grid-template-columns:1fr;align-items:start}
  .fehler__bild{aspect-ratio:auto}
  .fehler__bild img{height:auto}
}
@media (max-width:560px){
  .fehler__knoepfe .btn{width:100%}
  /* Telefon: kein Bild, die Wege stehen ohne Umweg ueber dem Fuss (Paula, 14.10.2026). */
  .fehler__bild{display:none}
}