/* Unterseiten im neuen Design (18.10.2026, Marian): Impressum, Datenschutz, Widerruf, Kundeninformationen, 404, Ausstellen.
   Hülle wie die Gutschein-Seite (gutschein.css: .gsh Kopf, .gsm Creme mit Federn, .unten Fuß), statt der Gutscheinkarten eine große Feder.
   Nur Farb-Tokens aus site.css, damit jede Saison (saison.css, html[data-saison]) die Seiten umfärbt.
   Gebaut von entwuerfe/seiten/bauen.py, Saison-Varianten von entwuerfe/saison/bauen.py. */

/* Kurze Seiten: Fuß sitzt unten, kein heller Streifen darunter */
body.seite { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body.seite > main { flex: 1 0 auto; }

/* ---------- Kopf ---------- */
.gsh--seite { padding-top: 58px; }
.gsh-gross-feder { align-self: flex-end; width: min(calc(100% - 170px), 200px); aspect-ratio: 382/187; margin: 10px 26px 0 0; color: var(--gold);
  background: currentColor; -webkit-mask: url("/img/feder.png") center / contain no-repeat; mask: url("/img/feder.png") center / contain no-repeat;
  transform: rotate(-10deg); filter: drop-shadow(0 14px 18px rgba(0,0,0,.22)); animation: drift 2.9s cubic-bezier(.33,.1,.3,1) both; }
.gsh--seite .gsh-claim { padding: 22px 20px 30px; }
.gsh--seite .gsh-claim h1 { font-size: 38px; text-wrap: balance; }

/* ---------- Inhalt ---------- */
.gsm--seite { padding: 34px 14px 64px; }
.seite-karte { position: relative; max-width: 860px; margin: 0 auto; display: grid; gap: 14px; padding: 30px 22px 34px; text-align: left;
  border: 1px solid var(--line); border-radius: 22px; background: var(--paper); box-shadow: 0 30px 60px -40px rgba(40,50,30,.55);
  animation: gsf-auf .6s cubic-bezier(.2,.7,.2,1) both; overflow-wrap: break-word; }
.seite-karte > :first-child { margin-top: 0; }
.seite-karte h2 { margin: 18px 0 0; font-size: 27px; line-height: 1.15; color: var(--deep); }
.seite-karte h3 { margin: 8px 0 0; font-size: 20px; line-height: 1.2; color: var(--deep); }
.seite-karte p, .seite-karte li { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink); }
.seite-karte ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.seite-karte a:not(.btn) { color: var(--deep); text-decoration-color: color-mix(in srgb, var(--gold-d) 70%, transparent); text-underline-offset: 3px; }
.seite-karte a:not(.btn):hover { text-decoration-color: currentColor; }
.seite-karte .small { font-size: 14px; color: var(--muted); }
.seite-karte .eyebrow { margin: 0; }
.seite-feder { justify-self: center; width: 86px; aspect-ratio: 382/187; background: var(--gold-d); -webkit-mask: url("/img/feder.png") center / contain no-repeat; mask: url("/img/feder.png") center / contain no-repeat; }
.seite-mitte { text-align: center; justify-items: center; }
.seite-mitte .btn { margin-top: 6px; }
.seite-kasten { display: grid; gap: 8px; padding: 18px 18px 20px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); }
.seite-kasten p { font-size: 15px; }

/* Widerruf: Formular in der Optik des Gutschein-Formulars */
.wrf { display: grid; gap: 16px; padding: 20px 18px 22px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); }
.wrf-feld { display: grid; gap: 7px; }
.wrf-feld small { font: 400 13px/1.3 var(--sans); color: var(--muted); letter-spacing: 0; text-transform: none; }
.wrf .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wrf .gsf-senden { width: auto; justify-self: start; }
.wrf-ok { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 24px 18px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); }
.wrf-ok:focus { outline: none; }
.wrf-ok h2 { margin: 0; }
.seite-karte [hidden] { display: none !important; }

/* Ausstellen (Institut): breite Karte für PDF-Vorschau und Werkzeuge */
.seite-karte.seite-breit { max-width: 1100px; }
.seite-karte .gsa { padding: 0; max-width: none; width: 100%; }

/* ---------- Tablet und Computer ---------- */
@media (min-width: 760px) {
  /* Überschrift immer unter dem Logo-Schild (Schild: Breite clamp(170px, 18vw, 220px), Höhe rund 1,1 × Breite), Kopf wächst mit langen Titeln */
  .gsh.gsh--seite { --h1: clamp(44px, 5vw, 62px); height: auto; padding: calc(clamp(170px, 18vw, 220px) * 1.1 + 34px) 0 76px; }
  .gsh-gross-feder { position: absolute; left: 50%; top: calc((clamp(170px, 18vw, 220px) * 1.1 + 34px - 105px) / 2 + 12px); width: 214px; margin: 0; transform: translateX(-50%) rotate(-8deg); }   /* mittig über der Überschrift */
  .gsh--seite .gsh-claim.claim { position: relative; inset: auto; top: auto; bottom: auto; left: auto; right: auto; padding: 0 20px; }
  .gsh--seite .gsh-claim h1 { font-size: var(--h1); line-height: 1.05; max-width: 18ch; margin: 0 auto; }
  .gsm--seite { padding: 72px 6% 88px; }
  .seite-karte { padding: 48px 60px 52px; gap: 16px; }
  .seite-karte h2 { font-size: 31px; margin-top: 22px; }
  .seite-karte h3 { font-size: 21px; }
  .wrf { padding: 26px 28px 28px; }
  .wrf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gsh-gross-feder, .seite-karte { animation: none !important; }
}
@media print {
  .gsh, .unten, .wm { display: none !important; }
  .gsm--seite { padding: 0; background: #fff; }
  .seite-karte { box-shadow: none; border: 0; padding: 0; }
}