/* ===========================================================================
   Rechtsseiten im Relaunch (Tor G3, 07.10.2026) — überarbeitet am 16.10.2026

   Andi, Testseite 1: „Impressum, Datenschutz und Kontakt gibt es nur im Darkmode.
   Sie sollen das Jelly-Design bekommen, das voll ausgebaute Haus im Hintergrund
   (als Bild) und die vier Tageszeiten, sodass sie sich farblich anpassen.“
   Der Wortlaut bleibt bei „Sie“, bis die Datenschutzerklärung in Phase B ohnehin
   neu kommt (Tor G3).

   Wie die Startseite, nur ohne Bewegung:
   - Farben aus tageszeiten.css; die Tageszeit setzt bausatz/rechtsseite.js vor dem
     ersten Bild (Wahl aus dem Rechner, sonst die Uhr). Ohne Skript gilt der Abend.
   - Der Himmel ist derselbe Verlauf wie auf der Startseite; darüber liegt das fertig
     gebaute Haus als Bild (bilder/haus-rechts-<tageszeit>-<rechner|telefon>.webp,
     erzeugt von werkzeuge/baue-haus-bilder.mjs). Am Rechner steht es fest rechts, der
     Text links daneben; am Telefon steht es oben, und der Text beginnt darunter.
   - Der Text steht frei, ohne Fläche dahinter. Was man antippt, ist ein Gelstück
     (jelly-form.css, ausgezeichnet von bausatz/jelly-ueberall.js).
   =========================================================================== */

/* --- Grund: Himmel und Haus ------------------------------------------------- */
/* Der Himmel liegt auf html: Der Hintergrund von body läge sonst über dem Haus (z-index -1). */
html {
    background: var(--grund);
    background-image: linear-gradient(180deg, var(--himmel-oben), var(--himmel-mitte) 70%);
    background-attachment: fixed;
}
body.rechtsseite {
    --rand-r: 64px;
    background: none;
    padding-inline: 0;
    color: var(--text);
    padding-top: calc(96px + env(safe-area-inset-top, 0px));
}
/* Das gerasterte Foto aus stil.css entfällt, ebenso die Glasflächen hinter dem Text. */
body.rechtsseite.rechtsseite :is(.rechts-flaeche, .rechts-abschnitt, .rechts-reiter, .rechts-zurueck) { background: none; border: 0; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.rechtsseite .rechts-abschnitt { border-top: 1px solid var(--strich); }
body.rechtsseite.rechtsseite .rechts-flaeche { padding: 0; margin: 0; }
body.rechtsseite .rechts-flaeche .rechts-abschnitt:last-child { border-bottom: 0; }
body.rechtsseite .kopf { max-width: none; left: 48px; right: 48px; }
body:is(.kontaktseite, .rechtsgrund)::before { content: none; display: none; }

.rechts-haus {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--himmel-mitte, var(--grund)) var(--haus-bild, none) 50% 50% / cover no-repeat;
}
html[data-palette="morgen"] .rechts-haus { --haus-bild: url("../bilder/haus-rechts-morgen-rechner.webp"); }
html[data-palette="tag"] .rechts-haus { --haus-bild: url("../bilder/haus-rechts-tag-rechner.webp"); }
html:is([data-palette="abend"], :not([data-palette])) .rechts-haus { --haus-bild: url("../bilder/haus-rechts-abend-rechner.webp"); }
html[data-palette="nacht"] .rechts-haus { --haus-bild: url("../bilder/haus-rechts-nacht-rechner.webp"); }

/* --- Kopf: Wähler der Tageszeit wie auf der Startseite ---------------------- */
body.rechtsseite .kopf .zeiten { margin-left: auto; background: none; border: 0; padding: 0; gap: 0; }
body.rechtsseite .kopf .nav { margin-left: auto; }
@media (min-width: 761px) { body.rechtsseite .kopf .nav + .zeiten { margin-left: 8px; } }

/* --- Text frei, links neben dem Haus ------------------------------------------ */
body.rechtsseite .rechtstext { width: min(760px, calc(100% - var(--rand-r) - 24px)); max-width: none; margin: 24px 0 0 var(--rand-r); }
.rechts-titel { margin-top: 44px; padding-bottom: 28px; border: 0; }
.rechts-titel .etikett { margin: 0; font: 600 12px/1.2 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.rechtstext h1 {
    margin: 14px 0 14px; font: 400 clamp(46px, 7vw, 84px)/.98 var(--f-serif); letter-spacing: -.01em; text-transform: none;
    color: var(--text); overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
}
.rechtstext h2 { margin: 0 0 14px; font: 400 32px/1.1 var(--f-serif); letter-spacing: 0; text-transform: none; color: var(--text); }
.rechts-stand { margin: 0; font: 400 14px/1.4 var(--f-text); color: var(--leise); }
body.rechtsseite.rechtsseite .rechts-abschnitt { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 30px 0; }
.abschnitt-nr { padding-top: 8px; font: 600 12px/1.2 var(--f-text); font-variant-numeric: tabular-nums; color: var(--leise); }
.rechtstext p, .rechtstext li { font: 400 17px/1.65 var(--f-text); color: var(--text); }
.rechtstext p { margin: 0 0 14px; }
.rechtstext strong { color: var(--text); font-weight: 600; }
.rechtstext a { color: var(--akzent); text-decoration-color: color-mix(in srgb, var(--akzent) 55%, transparent); }
.rechtstext code { font-size: .92em; color: var(--text); }
.rechtstext .anschrift, .rechtstext a[href^="mailto:"] { font-family: var(--f-text); font-size: 17px; }
.rechtstext .kontakt-hinweis { color: var(--leise); }

/* --- Reiter und Zurück: Gelstücke ---------------------------------------------- */
.rechts-reiter { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.rechtstext :is(.rechts-reiter, .rechts-zurueck) a { text-decoration: none; }
.rechts-reiter a[data-jelly].jelly.jelly-knopf { min-height: 48px; padding: 0 22px; font-size: 16px; }
.rechts-reiter a[aria-current="page"][data-jelly].jelly { background: radial-gradient(120% 130% at 30% 0%, var(--knopf-a), var(--knopf-b) 70%); color: var(--knopf-text); border-color: transparent; }
.rechts-zurueck { margin: 40px 0 70px; }

/* --- Formular: Felder wie im Fragenfluss ------------------------------------------ */
.kontakt-formular { margin-top: 26px; }
.kontakt-formular .eingabe-gruppe { margin-bottom: 22px; display: grid; gap: 8px; }
.kontakt-formular label { font: 600 15px/1.3 var(--f-text); color: var(--text); }
.kontakt-freiwillig { font-weight: 400; color: var(--leise); }
.kontakt-formular :is(input[type="text"], input[type="email"], textarea) {
    width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 20px; border: 1px solid var(--jelly-rand); border-radius: var(--r-jelly-chip);
    background: var(--feld); color: var(--feld-text); font: 400 16px/1.4 var(--f-text); outline: none;
}
.kontakt-formular textarea[name] { min-height: 200px; line-height: 1.6; resize: vertical; border-radius: var(--r-jelly-zeile); }
.kontakt-formular :is(input, textarea):focus { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 35%, transparent); }
.kontakt-formular .knopf[data-jelly] { width: auto; min-width: 220px; padding: 0 28px; cursor: pointer; }
button.knopf.knopf-primaer[data-jelly] {
    min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--r-jelly-knopf);
    color: var(--knopf-text); font: 600 17px var(--f-text);
    background: radial-gradient(120% 130% at 30% 0%, var(--knopf-a), var(--knopf-b) 70%);
    box-shadow: inset 0 1.5px 0 var(--knopf-kante), inset 0 -8px 16px -8px var(--knopf-tief), 0 14px 26px -14px var(--knopf-schein);
}
a.knopf.knopf-primaer[data-jelly] .pfeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- Fuß: kompakt, frei, über dem Haus ------------------------------------------------ */
body.rechtsseite .seitenfuss {
    position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: none; margin: 40px 0 0; padding: 70px var(--rand-r) 28px;
    border: 0; border-radius: 0; overflow: visible; color: var(--text);
    background: linear-gradient(180deg, transparent, var(--himmel-mitte) 90px);
}
.seitenfuss .fuss-oben { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 60px; margin-bottom: 36px; }
.seitenfuss .fuss-aufruf { display: grid; gap: 22px; justify-items: start; }
.seitenfuss .fuss-titel { max-width: 14ch; margin: 0; font: 400 clamp(34px, 4vw, 52px)/1 var(--f-serif); letter-spacing: -.01em; text-transform: none; color: var(--text); }
.seitenfuss .etikett { margin: 0 0 8px; font: 600 12px/1.2 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.seitenfuss .fuss-spalten { display: flex; flex-wrap: wrap; gap: 28px 60px; }
.seitenfuss ul { list-style: none; margin: 0; padding: 0; display: grid; }
.seitenfuss :is(.fuss-werkzeug ul a, .seitenfuss-verweise a) { display: inline-flex; align-items: center; min-height: 44px; font: 400 15px var(--f-text); color: var(--text); text-decoration: none; border: 0; }
.seitenfuss .seitenfuss-verweise { display: flex; flex-direction: column; gap: 0; }
.seitenfuss :is(a, button):focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: var(--r-bedien); }
.seitenfuss .fuss-marke { display: none; }
.seitenfuss .fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--strich-leise); font: 400 13px var(--f-text); color: var(--text); }
.seitenfuss .fuss-unten .etikett { margin: 0; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }

/* --- Telefon: Haus oben, Text darunter ---------------------------------------------------- */
@media (max-width: 760px) {
    body.rechtsseite .kopf { left: 16px; right: 16px; }
    body.rechtsseite { --rand-r: 16px; padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
    .rechts-haus {
        position: absolute; inset: 0 0 auto 0; height: max(100svh, 640px); z-index: -1; background-position: 50% 0; background-size: cover;
        -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 78%); mask-image: linear-gradient(180deg, black 30%, transparent 78%);
    }
    html[data-palette="morgen"] .rechts-haus { --haus-bild: url("../bilder/haus-rechts-morgen-telefon.webp"); }
    html[data-palette="tag"] .rechts-haus { --haus-bild: url("../bilder/haus-rechts-tag-telefon.webp"); }
    html:is([data-palette="abend"], :not([data-palette])) .rechts-haus { --haus-bild: url("../bilder/haus-rechts-abend-telefon.webp"); }
    html[data-palette="nacht"] .rechts-haus { --haus-bild: url("../bilder/haus-rechts-nacht-telefon.webp"); }
    body.rechtsseite .rechtstext { width: calc(100% - 32px); margin: 0 16px; padding-top: 30svh; }
    .rechtstext h2 { font-size: 28px; }
    body.rechtsseite.rechtsseite .rechts-abschnitt { grid-template-columns: minmax(0, 1fr); padding: 26px 0; }
    .rechts-reiter { gap: 8px; }
    .rechts-reiter a[data-jelly].jelly.jelly-knopf { padding: 0 16px; font-size: 15px; }
    .abschnitt-nr { display: none; }
    .rechtstext p, .rechtstext li { font-size: 16px; }
    .kontakt-formular .knopf[data-jelly] { width: 100%; }
    body.rechtsseite .seitenfuss { padding: 60px 16px 24px; }
}
@media print {
    body.rechtsseite { background: none; padding-top: 0; }
    .rechts-haus, .rechtsseite .kopf { display: none; }
}