/*!
 * style.css — Einladungsseite
 * Version 1.22.18 · 2026-08-08
 *
 * DIE FARBEN STEHEN NICHT HIER. Sie kommen als CSS-Variablen aus den
 * Einstellungen (Verwaltungsseite) und werden im Kopf der Seite gesetzt.
 * Wer das Aussehen aendert, aendert diese Datei — die Farben aber
 * bequemer ueber die Verwaltung.
 */

:root{
  --grund:#faf6f0; --text:#3a3733; --primaer:#7d8f6e; --akzent:#c08552; --zart:#e8ddd0;
  /* ABGELEITETE TEXTFARBEN. Sie werden im Kopf der Seite aus den
     eingestellten Farben BERECHNET (kern/lesbarkeit.php) und erreichen
     dort 4.5:1. Die Werte hier sind der Rueckfall fuer den Fall, dass
     die Datei ohne die Seite geoeffnet wird — sie entsprechen dem
     Ergebnis der Rechnung fuer die Vorgabefarben, NICHT den
     ungerechneten Markenfarben. Ein Rueckfall, der den alten Zustand
     wiederherstellt, waere eine stille Ruecknahme der Korrektur. */
  --primaer-text:#59664e; --akzent-text:#835a38;
  --primaer-tief:#6a7a5e; --akzent-tief:#9a6a42;
  --weiss:#fffdfa; --rand:rgba(58,55,51,.15);
  --schrift:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --schrift-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breite:760px; --rund:10px;
  /* RAHMENSTAERKE UND FUSSBILD kommen aus den Einstellungen und werden
     im Kopf der Seite gesetzt (drei Stufen bzw. zwei Groessen).
     Die Werte hier sind die RUECKFALLEBENE: Wird die Datei ohne die
     Seite geoeffnet, oder ist eine Einstellung noch nicht gespeichert,
     sieht alles aus wie vor der Einfuehrung. */
  --randstaerke:1px;
  --rand-glanz:none;
  --rand-luft:0px;
  --fussbild-breite:150px;
  --fussbild-maske:14%;
  --kachel:#faf6f0;
}

*{box-sizing:border-box}

/* UEBERLAUFSCHUTZ FUER BENUTZERTEXT
   =================================================================
   GEFUNDEN 2026-08-08 bei einer gezielten Suche: Das Stylesheet hatte
   KEINE einzige Regel gegen ueberlaufenden Text. Ein langes,
   ungebrochenes Wort — ein zusammengesetzter Ortsname, eine lange
   E-Mail-Adresse, eine Adresse ohne Leerzeichen — sprengt die Kachel
   und schiebt im schlimmsten Fall die ganze Seite seitwaerts.
   ALLE BETROFFENEN TEXTE STAMMEN VOM BENUTZER: Namen, Ortsangaben,
   eigene Abschnitte, Gaesteantworten. Ihre Laenge ist begrenzt, ihre
   WORTLAENGE nicht — 60 Zeichen am Stueck passen in kein Feld.
   overflow-wrap:anywhere bricht nur dort, wo es sein muss; normaler
   Text bricht weiterhin an Leerzeichen. hyphens:auto ergaenzt echte
   Trennstellen, wo der Browser die Sprache kennt (lang="de" ist
   gesetzt).
   NICHT PER * AUF ALLES: Bei Tabellen und Rasterzellen kann anywhere
   die Spaltenbreite unerwartet aendern; deshalb gezielt auf die
   Stellen, an denen Benutzertext steht. */
.kopf-namen, .kopf-klein, .kopf-text, .kopf-datum,
.ort h3, .ort-name, .ort-adresse, .ort-zeit,
.programmpunkt, .abschnitt-text,
.rsvp-hinweis, .rsvp-dank, .rsvp-frist,
.fuss-namen, .rechtstext, .kontakt{
  overflow-wrap:anywhere; hyphens:auto;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--text);
  font-family:var(--schrift); font-size:1.0625rem; line-height:1.65;
}

/* --- Kopf --- */
.kopf{
  text-align:center; padding:0 20px 40px;
  background:linear-gradient(180deg,var(--zart) 0%,var(--grund) 100%);
}

/* BREITENDECKELUNG FUER ALLES AUSSERHALB VON <main>
   ===================================================================
   GEMELDET 2026-08-08 (zweite Meldung am selben Tag): Nach der ersten
   Fassung dieser Deckelung sassen die Fusszeilen LINKS statt mittig —
   das Bild blieb zentriert, die Textzeilen klebten am Rand.
   URSACHE DES EIGENEN FEHLERS: Die erste Fassung zentrierte die Kinder
   ueber margin-left/right:auto. Ein Rand ist aber im Wettbewerb mit
   jeder anderen Randregel des Elements (Kurzformen wie margin:20px 0 0
   setzen links/rechts auf 0) — die Konstruktion konnte VERLIEREN, und
   sie hat verloren. Eine Zentrierung, die von der Randlage jedes
   einzelnen Kindes abhaengt, ist keine Regel, sondern eine Hoffnung.
   JETZT SITZT DIE DECKELUNG AM ELTERNELEMENT SELBST: Kopf und Fuss
   polstern seitlich so weit, dass innen genau die Inhaltsbreite bleibt
   (var(--breite) - 40px, die 40px sind die Seitenpolsterung von main).
   Kinder brauchen dafuer GAR NICHTS — kein max-width, kein margin;
   auch Flex-Zeilen (.fuss-rand) und text-align:center funktionieren
   unveraendert. Es gibt kein Kind-Attribut mehr, das gewinnen oder
   verlieren koennte.
   Auf schmalen Geraeten greift max(): nie weniger als 20px Polster,
   also exakt das bisherige Verhalten.
   EINZIGE SICHTBARE FOLGE: das Titelbild (max-width:760px) laeuft nun
   bis zur Inhaltskante (720px) statt 40px darueber hinaus — die
   Aquarellkante liegt damit buendig mit den Bloecken. */
/* PASSEPARTOUT BRAUCHT LUFT — gemeldet 2026-08-08: Der helle Ring liegt
   AUSSERHALB des Layouts (box-shadow) und beansprucht keinen Platz. Er
   schob sich deshalb bis an den Text darueber heran.
   MEIN RECHENFEHLER: Ich hatte den Abstand zu den NACHBARN IN DERSELBEN
   ZEILE geprueft (Ortskacheln 18px, Ja/Nein 12px) und den SENKRECHTEN
   Abstand vergessen — eine Dimension geprueft, die andere nicht.
   Die Bloecke bekommen deshalb zusaetzlichen Aussenabstand, sobald ein
   Ring gesetzt ist. Bei den uebrigen Randstufen ist --rand-luft 0, dort
   aendert sich nichts. */
.block, .ort{ margin-top:calc(26px + var(--rand-luft,0px)) }

.kopf,
.fuss{
  padding-left:max(20px, calc(50% - (var(--breite) - 40px) / 2));
  padding-right:max(20px, calc(50% - (var(--breite) - 40px) / 2));
}
/* Titelbild: das Paar. Die Aquarellraender laufen nach unten ins
   Seitenhintergrund aus, damit keine harte Kante entsteht. */
.titelbild{
  display:block; width:100%; max-width:760px; height:auto;
  margin:0 auto 6px;
}
/* WEICHER RAND: Das Bild laeuft an allen vier Seiten in die
   Hintergrundfarbe aus, statt mit einer harten Kante zu enden. Zwei
   Verlaeufe uebereinander — einer waagrecht, einer senkrecht —, unten
   etwas frueher, damit der Uebergang zum Text ruhig wirkt.
   Browser ohne mask-image zeigen das Bild schlicht mit Kante; das ist
   ein Schoenheitsverlust, kein Funktionsverlust. */
.bild-weich{
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0%,#000 9%,#000 68%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0%,#000 9%,#000 68%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* Der Kopf traegt denselben Farbverlauf, damit der weiche Rand des
   Titelbilds in eine Flaeche und nicht in eine Kante laeuft. */
.kopf-schmal{padding-top:46px}
.kopf-namen-klein{font-size:clamp(1.6rem,5vw,2.4rem)}
/* Zierleiste zwischen den Abschnitten */
.trenner{
  display:block; width:100%; max-width:420px; height:auto;
  margin:26px auto; opacity:.9;
}
.kopf .trenner{margin-top:30px; margin-bottom:0}
.kopf-namen{margin-top:10px}
/* Aki im Fuss */
/* Bild im Fuss — Breite und Maske kommen aus den Einstellungen.
   Zwei Groessen: klein (wie bisher) oder ueber die volle Breite des
   Nutzbereichs. Die Maske traegt je Groesse einen EIGENEN Wert; dieselbe
   Prozentangabe wuerde beim breiten Bild ein Vielfaches wegfressen. */
.aki{display:block; width:var(--fussbild-breite);
  /* GEFUNDEN 2026-08-08, gemeldet vom Betreiber: "breit" war
     BILDSCHIRMBREIT statt so breit wie der Inhalt. Der Fuss liegt
     AUSSERHALB von <main>; 100% bezogen sich damit auf den ganzen
     Bildschirm. Der erste Test prüfte nur, dass "100%" in der Seite
     steht — nicht, WORAUF sich die Angabe bezieht. Anwesenheit ist
     nicht Wirkung.
     Jetzt deckelt max-width auf die Inhaltsbreite: "breit" heisst so
     breit wie die Blöcke darüber, auf dem Telefon weiterhin die volle
     verfügbare Breite. --breite ist die Aussenkante von main; die
     40px sind dessen eigene Seitenpolsterung (2 x 20px), damit das
     Bild bündig mit den Blöcken abschliesst, nicht mit deren Rand. */
  max-width:min(100%, calc(var(--breite) - 40px));
  /* ZURUECKGEBAUT 2026-08-08: Ein Zwischenschritt hatte hier
     max-height + object-fit:cover eingefuehrt, um ein sehr hohes
     Fussbild zu begrenzen. GEMELDET vom Betreiber als falsche Loesung:
     das schnitt bei eigenen Bildern mit Inhalt (z.B. Text im unteren
     Bilddrittel) genau diesen Inhalt ab — kombiniert mit dem
     Weichzeichner am oberen/unteren Rand wurde er zusaetzlich
     unleserlich. ZUSCHNEIDEN DARF EIN INHALTSTRAGENDES BILD NIE.
     Die logische Regel, die der Betreiber verlangt hat: die BREITE
     ist begrenzt (per Klein/Breit-Einstellung), die HOEHE folgt immer
     vollstaendig und unbeschnitten aus dem Seitenverhaeltnis. Wer ein
     hohes Bild kleiner haben will, waehlt die Groesse "klein" statt
     "breit" — die Stellschraube existiert bereits und ist die richtige,
     nicht ein automatischer Beschnitt. */
  height:auto;
  margin:0 auto 10px}
/* Der seitliche Weichzeichner des Fussbildes folgt der Groesse.
   Ueberschreibt NUR die waagrechte Maske von .bild-weich; die senkrechte
   bleibt, weil sie oben und unten in die Flaeche auslaeuft und dort von
   der Breite unabhaengig ist. */
.aki.bild-weich{
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0%,#000 9%,#000 68%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 var(--fussbild-maske),
                    #000 calc(100% - var(--fussbild-maske)),transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0%,#000 9%,#000 68%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 var(--fussbild-maske),
                    #000 calc(100% - var(--fussbild-maske)),transparent 100%);
}
/* Rechtsseiten */
.rechtstext{white-space:normal; line-height:1.7}
.kontakt{font-style:normal; line-height:1.8}
.kontakt-name{font-weight:600; margin-bottom:2px}
.kontakt a{color:var(--primaer-text)}
.zurueck{margin-top:28px; text-align:center}
/* Aki als kleines Zeichen ueber der Rueckmeldung */
.zeichen-bild{display:block; width:62px; height:auto; margin:0 auto 8px; opacity:.85}
.kopf-klein{
  margin:0 0 14px; font-family:var(--schrift-ui); font-size:0.75rem;
  /* KEINE Grossschreibung per Stilregel — GEMELDET 2026-08-08:
     Hier steht der SELBST EINGETRAGENE Text aus dem Feld "Kleine Zeile
     über den Namen". Wer ihn eintippt, hat die Schreibweise damit
     bereits entschieden. Eine Regel, die daraus "WIR HEIRATEN" macht,
     nimmt ihm genau diese Entscheidung ab — er kann dann gar nicht
     kleinschreiben, selbst wenn er will.
     REGEL: Was der Betreiber selbst eingibt, wird nie umgeformt. Wer
     Versalien will, tippt sie. Die Sperrung bleibt, sie ist Teil der
     Gestaltung dieser Zeile und schadet auch bei Kleinbuchstaben nicht,
     weil es nur wenige Wörter sind. */
  letter-spacing:.28em; color:var(--primaer-text);
}
.kopf-namen{
  margin:0; font-weight:400; font-size:clamp(2.1rem,7vw,3.6rem); line-height:1.15;
}
.kopf-und{
  display:block; font-size:.42em; color:var(--akzent-text); font-style:italic;
  margin:6px 0; letter-spacing:.05em;
}
.kopf-datum{
  margin:20px auto 0; font-family:var(--schrift-ui); font-size:0.875rem;
  letter-spacing:calc(.16em * var(--sperr-a,1)); text-transform:var(--versal-a,uppercase); color:var(--akzent-text);
}
.kopf-text{max-width:46ch; margin:22px auto 0}

/* .block-rahmen ENTFERNT 2026-08-16.
   Sie trug background-size:100% 100% — dieselbe Verzerrung wie die
   Handy-Ausnahme weiter unten, nur an einer zweiten Stelle. Beim
   Durchsuchen nach dieser Eigenschaft ist sie mit aufgefallen.
   Sie wird von keiner Datei des Werkzeugs gesetzt (INVENTAR.md,
   Abschnitt "unbenutzte Klassen"); den Zierrahmen der Bloecke traegt
   .block-rsvp. Eine Regel zu reparieren, die nichts einfaerbt, waere
   Arbeit an einer Attrappe — deshalb weg statt korrigiert. */

/* --- Bloecke --- */
main{max-width:var(--breite); margin:0 auto; padding:0 20px 60px}
.block{
  background:var(--weiss); border:var(--randstaerke) solid var(--rand); border-radius:var(--rund); box-shadow:var(--rand-glanz);
  padding:32px 28px; margin:26px 0;
}
.block h2{
  margin:0 0 22px; font-weight:400; font-size:1.45rem; text-align:center; color:var(--primaer-text);
}
.block h2::after{
  content:""; display:block; width:52px; height:1px;
  background:var(--akzent); margin:12px auto 0;
}

/* --- Orte --- */
.orte{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:18px}
.ort{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:24px 18px 20px; background:var(--kachel,var(--grund));
  border:var(--randstaerke) solid var(--rand); border-radius:var(--rund); box-shadow:var(--rand-glanz);
  position:relative;
}
/* Feine Linie oben in der Akzentfarbe — gibt der Kachel einen Kopf,
   ohne einen zweiten Farbblock einzufuehren. */
.ort::before{
  content:""; position:absolute; top:0; left:22%; right:22%; height:2px;
  background:linear-gradient(90deg,transparent,var(--akzent),transparent);
}
.ort-bild{
  width:38px; height:38px; margin-bottom:12px;
  color:var(--primaer-text); flex:0 0 auto;
}
.ort h3{
  margin:0 0 4px; font-family:var(--schrift-ui); font-weight:600;
  /* Ebenfalls selbst eingetragen (Feld "Anlass" beim Ort) — keine
     Umformung, siehe .kopf-klein. */
  font-size:0.75rem; letter-spacing:.18em;
  color:var(--akzent-text);
}
.ort-zeit{
  margin:0 0 10px; font-family:var(--schrift-ui); font-size:0.8125rem;
  letter-spacing:.12em; color:var(--text); opacity:.75;
}
.ort-name{margin:0; font-weight:600; font-size:1.08rem; line-height:1.35}
.ort-adresse{margin:6px 0 0; font-size:.9em; opacity:.78; line-height:1.45}
.ort-knopf{margin:16px 0 0 !important; width:100%; display:flex; flex-wrap:wrap; gap:8px}
.ort-knopf .knopf-schlicht{flex:1 1 100%; text-align:center}
/* Zwei Knoepfe (Karte und Webseite) teilen sich die Zeile, sobald Platz ist. */
@media (min-width:420px){.ort-knopf .knopf-schlicht:not(:only-child){flex:1 1 45%}}

/* --- Programm --- */
.programm{list-style:none; margin:0 auto; padding:0; max-width:480px}
.programmpunkt{display:flex; gap:18px; padding:14px 0; border-bottom:1px dashed var(--rand)}
.programmpunkt:last-child{border-bottom:none}
.programm-zeit{
  flex:0 0 62px; font-family:var(--schrift-ui); font-size:0.8125rem;
  letter-spacing:.08em; color:var(--akzent-text); padding-top:4px;
}
.programm-inhalt{flex:1}
.programm-text{display:block; font-size:.92em; opacity:.8}

/* --- Formular --- */
.block-rsvp{
  background:var(--zart);
  background-image:var(--rahmenbild,url("rahmen.png"));
  background-repeat:no-repeat;
  /* NICHT MEHR VERZERREN — gemeldet 2026-08-08: Hier stand
     background-size:108% 108%. Das erzwingt Breite UND Hoehe auf die
     Groesse des Blocks; je mehr Felder das Formular hat, desto staerker
     wurde das Bild in die Laenge gezogen. Bei einem Aquarellzweig faellt
     das sofort auf.
     "100% auto" legt nur die BREITE fest, die Hoehe folgt dem
     Seitenverhaeltnis — das Bild kann nicht mehr verzerren, egal wie
     hoch der Block wird oder welches Bild ein Kunde hochlaedt.
     Verankert oben: Der Schmuck sitzt dort, wo die Ueberschrift steht,
     statt bei langen Formularen in die Mitte zu rutschen. */
  background-position:top center;
  background-size:100% auto;
}
.rsvp-hinweis{text-align:center; margin:0 0 18px}
/* Die Pflicht-Legende trug ihren Stern AUSSERHALB der Textkante und lag
   damit als einzige Zeile links neben der Flucht aller anderen Zeilen
   (gemeldet 2026-08-08). Haengender Einzug: der Stern steht im Einzug,
   der Text fluchtet mit dem Rest. */

.rsvp{max-width:520px; margin:0 auto}
.feld{margin:0 0 20px}

/* GROESSENVERHAELTNIS VON BESCHRIFTUNG UND HINWEIS
   ===================================================================
   GEMESSEN 2026-08-16: Die Feldbeschriftungen standen auf 0.8125rem
   (13px), die Hilfetexte DARUNTER auf .84em (rund 14.3px). Das
   Untergeordnete war groesser als das Uebergeordnete — beim Ueberfliegen
   liest das Auge zuerst den Hinweis und danach erst, worum es geht.
   Aufgefallen ist es niemandem, weil beide Werte fuer sich genommen
   vertretbar sind; falsch ist erst ihr VERHAELTNIS.
   Jetzt: Beschriftung 0.9rem (14.4px), Hinweise einheitlich 0.8125rem
   (13px). Alle Hinweisarten tragen denselben Wert, damit nicht wieder
   drei Groessen nebeneinander entstehen. */
.feldtitel{margin:0 0 8px; font-family:var(--schrift-ui); font-size:0.9rem;
  letter-spacing:calc(.1em * var(--sperr-b,.2)); text-transform:var(--versal-b,none); color:var(--primaer-text)}
label{display:block; font-family:var(--schrift-ui); font-size:0.9rem;
  letter-spacing:calc(.1em * var(--sperr-b,.2)); text-transform:var(--versal-b,none); color:var(--primaer-text); margin-bottom:6px}
input[type=text],input[type=search],input[type=password],input[type=date],input[type=color],select,textarea{
  width:100%; padding:12px 14px; font-size:1rem; font-family:var(--schrift-ui);
  color:var(--text); background:var(--weiss);
  border:var(--randstaerke) solid var(--rand); border-radius:var(--rund);
}
textarea{resize:vertical; min-height:52px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:3px solid var(--akzent-text); outline-offset:2px;
}
.hilfe{margin:6px 0 0; font-size:0.8125rem; opacity:.72; font-family:var(--schrift-ui)}
.klein{font-size:0.8125rem; opacity:.7; text-transform:none; letter-spacing:0}
.feldgruppe{border:none; margin:0 0 22px; padding:0}
.feldgruppe legend{
  font-family:var(--schrift-ui); font-size:0.9rem; letter-spacing:.1em;
  text-transform:var(--versal-b,none); color:var(--primaer-text); margin-bottom:10px; padding:0;
}
.wahl-zwei{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.wahl{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:56px; margin:0; padding:12px; cursor:pointer; text-align:center;
  background:var(--weiss); border:var(--randstaerke) solid var(--rand); border-radius:var(--rund);
  text-transform:none; letter-spacing:0; font-size:1rem; color:var(--text);
  font-family:var(--schrift-ui);
}
.wahl:has(input:checked){border-color:var(--akzent-tief); background:var(--akzent-tief); color:var(--weiss)}
.wahl input{accent-color:var(--primaer); margin:0}
.begleitzeile{display:grid; grid-template-columns:1fr 160px; gap:10px; margin-bottom:10px}
/* Seit 1.21.7 gilt die generelle Regel darunter; die zwei Einzelfaelle
   bleiben dokumentiert, weil sie zeigen, dass der Fehler zweimal einzeln
   geflickt wurde, bevor die Klassenregel kam. */
.begleitzeile[hidden]{display:none}
[hidden]{display:none !important}
#weiterePerson{margin-top:4px}
#weiterePerson[hidden]{display:none}
.nur-lesbar{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.knopf{
  display:block; width:100%; min-height:56px; margin-top:8px; padding:14px 26px;
  font-family:var(--schrift-ui); font-size:1rem; font-weight:600; letter-spacing:.06em;
  color:var(--weiss); background:var(--primaer-tief);
  border:none; border-radius:var(--rund); cursor:pointer;
}
.knopf:hover{filter:brightness(.93)}
.knopf[disabled]{opacity:.6; cursor:default}
.knopf-schlicht{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 18px; font-family:var(--schrift-ui); font-size:0.875rem;
  color:var(--primaer-text); background:transparent; text-decoration:none;
  border:1px solid var(--primaer-text); border-radius:var(--rund); cursor:pointer;
}
.knopf-schlicht:hover{background:var(--primaer-tief); color:var(--weiss)}

/* --- Meldungen --- */
.meldung-gut,.meldung-schlecht,.meldung-hinweis{
  padding:14px 18px; border-radius:var(--rund); margin:0 0 20px;
  font-family:var(--schrift-ui); font-size:0.9375rem;
}
.meldung-gut{background:#e8f0e3; color:#33532a; border:1px solid #b9cfae}
.meldung-schlecht{background:#f8e7e2; color:#8a3a24; border:1px solid #e2b7a8}
.meldung-hinweis{background:#fdf3e2; color:#7a5a1f; border:1px solid #e6d1a8}
.meldung-hinweis ul{margin:8px 0 0; padding-left:20px}
.feldfehler{margin:6px 0 0; font-family:var(--schrift-ui); font-size:0.8125rem; color:#a8442a}
.leerzustand{text-align:center; padding:28px; opacity:.7}
.datenschutz{
  margin:26px 0 0; padding-top:18px; border-top:1px solid var(--rand);
  font-family:var(--schrift-ui); font-size:.8em; opacity:.75; text-align:center;
}

/* --- Fuss --- */
.fuss{
  text-align:center; padding:34px 20px 46px;
  font-family:var(--schrift-ui); font-size:0.8125rem; letter-spacing:.12em;
  color:var(--primaer-text); border-top:1px solid var(--rand);
}
.fuss p{margin:0}
.fuss-namen{font-weight:600}
.fuss-recht{margin-top:14px !important}
.fuss-recht a{color:var(--primaer-text); text-decoration:underline; text-underline-offset:3px}
.fuss-trenn{opacity:.5; margin:0 8px}
/* .fuss-verwaltung ENTFERNT 2026-08-16. Die Klasse stand in keiner
   Datei des Werkzeugs (INVENTAR.md Abschnitt "unbenutzte Klassen"); die
   Anmeldung liegt in .fuss-anmeldung. Sie fiel bei der Kontrastmessung
   auf (2.15:1) — eine Regel zu verbessern, die nichts einfaerbt, waere
   Arbeit an einer Attrappe gewesen. */

@media (max-width:560px){
  body{font-size:1rem}
  .titelbild{border-radius:0}
  .trenner{max-width:280px; margin:18px auto}
  .aki{width:min(var(--fussbild-breite),120px)}
  .zeichen-bild{width:50px}
  /* HIER STAND background-size:130% 118% — DIE URSACHE.
     Am 08.08. wurde die Verzerrung des Zierbilds gemeldet und in der
     Grundregel behoben (100% auto). Diese Ausnahme fuer schmale
     Bildschirme blieb stehen und ueberstimmt sie seither. Auf einem
     390px-Geraet mit einem 1200px hohen Formular ergab das 455x1416
     statt 455x297 — das Bild wurde um den Faktor 4.8 in die Hoehe
     gezogen. GEMELDET 2026-08-16, und zwar zum zweiten Mal.
     EIN EINZELFIX JE MELDUNG IST KEINE BEHEBUNG. Beim ersten Mal wurde
     die gemeldete Stelle geflickt, ohne zu suchen, wo dieselbe
     Eigenschaft sonst noch gesetzt wird.
     Ersatzlos gestrichen: Die Grundregel gilt jetzt auch hier. Eine
     eigene Groesse fuer schmale Bildschirme braucht es nicht — 100%
     bezieht sich ohnehin auf die Blockbreite und waechst mit. */
  .kopf{padding:44px 18px 34px}
  .block{padding:24px 18px}
  .begleitzeile{grid-template-columns:1fr}
  .orte{gap:14px}
  .ort{padding:20px 14px 16px}
  .programmpunkt{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* --- Honigfeld: fuer Menschen unsichtbar, fuer Bots verlockend ---
   Kein display:none — manche Bots ueberspringen genau das. Stattdessen
   aus dem Bild geschoben und von der Bedienung ausgenommen. */
.honig{position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden}

/* --- Unterste Fusszeile: beides ganz unten RECHTS ---
   Betreiberentscheid 2026-08-05. Die erste Fassung setzte den Hinweis
   links und die Anmeldung rechts an die Raender eines zentrierten
   Kastens; auf breiten Bildschirmen stand der Hinweis dadurch
   irgendwo in der Mitte-links und wirkte verrutscht. Jetzt stehen
   beide zusammen am rechten Rand, der Hinweis kleiner als die
   Anmeldung — er ist die Nebensache von beiden. */
.fuss-rand{display:flex; align-items:baseline; justify-content:flex-end;
  gap:14px; width:100%; box-sizing:border-box; margin:20px 0 0;
  /* Kein eigenes Seitenpolster mehr: das traegt seit 1.21.6 der Fuss
     selbst. Die 18px hier kaemen sonst OBENDRAUF und diese eine Zeile
     stuende enger als alle anderen. */
  padding:0; font-size:.78rem; line-height:1.45}
.fuss-rand a{color:inherit; text-decoration:none;
  border-bottom:1px solid transparent}
.fuss-rand a:hover, .fuss-rand a:focus-visible{border-bottom-color:currentColor}
/* GEMESSEN 2026-08-16: Diese beiden Zeilen standen auf Deckkraft .45
   und .60 und erreichten damit 2.41:1 und 3.49:1 — beides Verweise,
   beides unter der Grenze. Die gewuenschte Rangfolge ("Hinweis ist die
   Nebensache") bleibt erhalten, sie wird nur nicht mehr ueber BLASSHEIT
   hergestellt, sondern ueber GROESSE. Eine Deckkraft, die einen Text
   unlesbar macht, ist keine Gestaltung, sondern ein Ausschluss.
   Keine feste Deckkraftzahl mehr: Sie waere an die Vorgabefarbe
   gebunden und wuerde bei einer anderen Farbwahl wieder durchfallen. */
.fuss-marke{font-size:.82em; order:1}
.fuss-anmeldung{order:2}
/* Die Rechtslinks bleiben mittig und deutlich lesbarer. */
.fuss-recht{text-align:center}
@media (pointer:coarse){
  /* Auf dem Telefon muessen auch kleine Ziele treffbar bleiben. */
  .fuss-rand a{display:inline-block; padding:10px 4px; min-height:44px;
    box-sizing:border-box}
}
@media (max-width:480px){
  /* Auf schmalen Geraeten reicht der Platz nebeneinander knapp;
     die Zeile bleibt rechtsbuendig, bricht aber sauber um. */
  .fuss-rand{flex-wrap:wrap; padding:0 12px}
}

/* --- Pflichtkennzeichnung ---
   Das Sternchen traegt Farbe UND Form; Farbe allein waere fuer
   Farbfehlsichtige kein Unterschied (WCAG 1.4.1). Der Text daneben
   nennt beim ersten Feld, was es bedeutet. */
.stern{color:#a8452f; font-weight:700; margin-left:.15em}
/* GEFUNDEN 2026-08-08, nach der DRITTEN Meldung des Betreibers: Diese
   Klasse war ZWEIMAL definiert — weiter oben mit Zentrierung, hier mit
   margin:0, gleiche Spezifitaet, spaeter in der Datei: die Zentrierung
   verlor jedes Mal, und zwei "Nachbesserungen" der oberen Regel blieben
   wirkungslos, weil diese hier sie schluckte. Jetzt EINE Regel, und die
   Legende steht ausserdem IM Formular (index.php) — sie erbt dessen
   Kante per DOM statt sie durch gleiche Masse nachzubauen. */
/* GEFUNDEN 2026-08-08, Beobachtung des Betreibers: Dieser Hinweis war
   der EINZIGE Text im Formular ohne eigene Schriftangabe — er erbte
   damit die Hauptschrift, waehrend alle seine Nachbarn (Feldnamen,
   Hilfetexte, Fehlermeldungen) die Beschriftungsschrift tragen. Genau
   deshalb fiel er heraus, obwohl er inhaltlich zu ihnen gehoert.
   Er IST ein Hinweistext und traegt jetzt dieselbe Schrift wie .hilfe. */
.pflicht-legende{
  font-size:0.8125rem; color:#6b6154; margin:0 auto 14px;
  padding-left:1.4em; text-indent:-1.4em; text-align:left;
  font-family:var(--schrift-ui);
  /* GLEICHES MASS WIE .rsvp — zentrierte Bloecke fluchten nur bei
     gleicher Breite. Stand hier keine Breite, lief die Legende ueber
     die volle Spalte und begann sichtbar links vom Formular
     (Regression gegenueber 1.21.4, gemessen 2026-08-27). */
  max-width:520px;
}
.pflicht-legende .stern{margin-right:.3em; margin-left:0}
legend .stern, label .stern{font-size:1em}

/* Gemaltes Sinnbild statt gezeichnetem: groesser, weil es Flaeche hat.
   Liegt keine Datei im Ordner, bleibt das gezeichnete Zeichen stehen —
   wer es dezent will, loescht die Datei einfach. */
/* GEMESSEN 2026-08-16: Die sieben Sinnbilder trugen unterschiedlich viel
   DURCHSICHTIGEN RAND in der Datei selbst — von 3.8 % (garten) bis
   22.6 % (restaurant) am oberen Kant, und oben anders als unten. Alle
   wurden auf dieselbe Breite skaliert, also erschien jedes Motiv in
   anderer Groesse und mit anderem Abstand zur Ortsart darunter. Das war
   der ungleiche Leerraum in den Kacheln.
   KEIN CSS-WERT KANN DAS AUSGLEICHEN, weil der Rand je Datei anders ist.
   Die Bilder sind deshalb auf ihre Deckungsflaeche beschnitten und
   quadratisch neu gesetzt; der Abstand steht jetzt hier, an EINER Stelle.
   Die Kantenlaenge ist kleiner als vorher (104 statt 120), weil die
   Motive den Platz nun ganz ausfuellen — sichtbar sind sie dadurch
   groesser, nicht kleiner. */
.ort-bild-gemalt{display:block; width:104px; height:104px; margin:0 auto 10px;
  object-fit:contain}
@media (max-width:520px){ .ort-bild-gemalt{width:88px; height:88px} }

/* Sprachwahl der Gaeste. Sie steht NUR im Fuss und traegt dort genau
   das Gewicht der Anmeldung: dieselbe Groesse (.78rem), dieselbe
   Laufweite, dieselbe zurueckhaltende Verweisart wie .fuss-rand.
   Auf einer Einladung ist die Sprachwahl eine Bedienung, kein Inhalt —
   sie darf da sein, aber sie darf nichts anfuehren.
   Ein Versuch am 16.08., sie zusaetzlich ueber das Titelbild zu setzen,
   wurde nach dem Ansehen zurueckgenommen: Das Erste auf einer Einladung
   sind die Namen des Paares.
   NICHT UEBER BLAESSE GEDAEMPFT (Deckkraft), sondern ueber Groesse und
   fehlende Unterstreichung — es sind Verweise und sie muessen 4.5:1
   tragen, siehe die Messung weiter unten bei .fuss-marke. */
.fuss-sprachen{
  margin:18px 0 0; text-align:center;
  font-size:.78rem; line-height:1.45; letter-spacing:.16em;
}
.fuss-sprachen a,.fuss-sprachen .sprache-aktiv{padding:6px 4px; display:inline-block}
.fuss-sprachen a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
.fuss-sprachen a:hover,.fuss-sprachen a:focus-visible{border-bottom-color:currentColor}
/* Die laufende Sprache ist keine Schaltflaeche und muss sich trotzdem
   von den anderen unterscheiden.
   ERSTER VERSUCH WAR FALSCH: opacity:.55 — gemessen 2.30:1, also genau
   der Fehler, der eine Stunde vorher bei .fuss-marke entfernt worden
   ist. Eine Unterscheidung darf nicht ueber KONTRAST laufen, wenn der
   Kontrast ohnehin schon knapp ist.
   Jetzt ueber die FORM: die laufende Sprache traegt dauerhaft den
   Unterstrich, den die anderen erst beim Ueberfahren bekommen. Kein
   Fettdruck, weil das die Zeile springen laesst, sobald ein
   Sprachname laenger ist. aria-current sagt es den Vorlesegeraeten. */
.fuss-sprachen .sprache-aktiv{border-bottom:1px solid currentColor}
@media (pointer:coarse){
  .fuss-sprachen a,.fuss-sprachen .sprache-aktiv{min-height:44px}
}

/* --- Gaesteseite, Durchsicht kleiner Bildschirme 2026-08-06 --- */
@media (max-width:400px){
  /* Nichts darf waagrecht ueberlaufen: das ist der haeufigste Grund,
     warum eine Seite auf dem Telefon "verschoben" wirkt. */
  html,body{overflow-x:hidden}
  .kopf-namen{font-size:clamp(1.9rem, 11vw, 2.6rem); line-height:1.15}
  .ort-knopf{gap:6px}
  .fuss-rand{flex-wrap:wrap; justify-content:center; gap:8px}
  .fuss-sprachen{line-height:2}
}

/* --- Freie Abschnitte ---
   Drei fertige Varianten statt einstellbarer Groessen und Farben: So
   kann niemand die eigene Seite zerlegen, und jede Variante ist gestaltet.
   Der Text behaelt seine Zeilenumbrueche — ein Gedicht braucht sie. */
.abschnitt-text{white-space:pre-line; text-align:center; margin:0 auto;
  max-width:46ch; line-height:1.75}
.abschnitt h2{text-align:center}
.abschnitt-schlicht{background:none; box-shadow:none; padding-left:0; padding-right:0}
.abschnitt-rahmen{border:var(--randstaerke) solid var(--zart); border-radius:12px}
.abschnitt-hervor{background:var(--zart)}
@media (max-width:400px){ .abschnitt-text{max-width:100%} }

/* --- Gestaltung der FESTEN Bloecke ---
   Dieselben drei Namen wie bei den freien Abschnitten, aber eigene
   Regeln: ein fester Block IST die Flaeche, ein freier Abschnitt schwebt
   dazwischen. 'schlicht' heisst hier folglich "unveraendert wie bisher" —
   wer nichts einstellt, sieht nichts Neues.
   Die Varianten aendern nur Flaeche und Zierlinie, nie Schriftgroesse
   oder Farbe des Textes: so bleibt jede Wahl lesbar und der Kontrast
   nachpruefbar (WCAG 1.4.3). */
/* 'schlicht' braucht keine Regel: es ist der Zustand vor dieser Einfuehrung. */
.blockart-rahmen{
  border-color:var(--akzent);
  box-shadow:0 0 0 calc(var(--randstaerke) * 2) var(--zart);
}
.blockart-hervor{
  background:var(--zart);
  border-color:transparent;
}
/* Der Fliesstext unter den Namen ist kein .block — die getoente Fassung
   braucht dort ihre eigene Polsterung, sonst klebt die Faerbung am Text. */
p.kopf-text.blockart-hervor,
p.kopf-text.blockart-rahmen{
  padding:16px 20px; border-radius:var(--rund); max-width:46ch;
  margin-left:auto; margin-right:auto;
}
p.kopf-text.blockart-rahmen{border:var(--randstaerke) solid var(--akzent)}
/* Eigener Danktext nach dem Absenden. */
.rsvp-dank{text-align:center; white-space:pre-line; margin:0 0 18px}
.rsvp-dank.blockart-hervor,.rsvp-dank.blockart-rahmen{padding:16px 20px; border-radius:var(--rund)}
.rsvp-dank.blockart-rahmen{border:var(--randstaerke) solid var(--akzent)}

/* --- Die Frist ---
   ANLASS 2026-08-08: Auf einer Kundenseite stand die Antwortfrist ZWEIMAL
   — einmal richtig gesetzt und uebersetzt, einmal von Hand als freier
   Abschnitt daneben getippt ("MOLIMO VAS / DOLAZAK POTVRDITE DO /
   27-03-2027", unformatiert und in der falschen Sprache).
   Die Ursache war nicht Unachtsamkeit: Der gepflegte Satz war eine
   unauffaellige Zeile Fliesstext, der Gast las darueber hinweg, und das
   Paar half sich selbst. Ein Feld, das seine Aufgabe nicht sichtbar
   erfuellt, erzeugt eine zweite Quelle daneben. Also traegt es sie jetzt
   sichtbar. */
.rsvp-frist{
  display:block; margin:0 auto 22px; padding:14px 22px;
  max-width:26ch; text-align:center;
  border-top:var(--randstaerke) solid var(--akzent);
  border-bottom:var(--randstaerke) solid var(--akzent);
  font-size:.82rem; letter-spacing:calc(.18em * var(--sperr-a,1)); text-transform:var(--versal-a,uppercase);
  font-family:var(--schrift-ui); line-height:1.9;
}
.rsvp-frist strong{
  display:block; margin-top:4px;
  font-size:1.25rem; letter-spacing:.06em; text-transform:none;
  font-family:var(--schrift); font-weight:400; color:var(--akzent-text);
}
@media (max-width:560px){
  .rsvp-frist{max-width:100%; letter-spacing:.12em}
  .rsvp-frist strong{font-size:1.1rem}
}