/* ─────────────────────────────────────────────────────────────────
   Kontakt
   ───────────────────────────────────────────────────────────────── */

/* Der seitliche Abstand gehört ans FORMULAR, nicht an den Wrap.

   Ursprünglich stand er am Wrap - damit war der ganze Baustein bis
   zu 68px schmaler als jeder andere, und im Stapel sah die
   Kontaktsektion eingerückt aus. Die Überschrift begann weiter
   innen als die Überschriften darüber und darunter.

   Der eigentliche Grund war ein anderer: Das Formular begann direkt
   an der Kante, und ein Eingabefeld mit Rahmen sieht dort aus wie
   abgeschnitten. Ein Text verträgt das, ein Feld nicht.

   Also den Abstand dort setzen, wo er gebraucht wird. Der Wrap
   bleibt so breit wie überall. */
.lt-kontakt{padding:64px 0}
.lt-kontakt__kopf{margin-bottom:32px;max-width:44rem}
.lt-kontakt__titel{font-family:var(--schrift_titel);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin:0}
.lt-kontakt__sub{margin:.5em 0 0;font-size:1.05rem;line-height:1.6;
  color:color-mix(in srgb, var(--text) 72%, transparent)}

:where(.lt-kontakt.lt-block--aus-mitte) .lt-kontakt__kopf{
  margin-inline:auto;text-align:center}
:where(.lt-kontakt.lt-block--aus-rechts) .lt-kontakt__kopf{
  margin-left:auto;text-align:right}

/* ── Aufteilung ───────────────────────────────────────────────
   Angaben links schmal, Formular rechts breiter - aus der
   LICREM-Vorlage. Das Formular ist die Handlung, die Angaben sind
   die Auskunft; entsprechend die Gewichtung.

   Alles an einer Stelle: Vorher standen zwei Sätze Rasterregeln in
   der Datei, einer vom ersten Entwurf und einer von der Übernahme.
   Welcher gewann, hing an der Reihenfolge - und die Media Query
   dazwischen machte es vollends unübersichtlich. */
.lt-kontakt__raster{
  display:grid;
  align-items:start;
  /* Mindestbreite für die Datenspalte: Mit 1fr wurde sie bei einem
     breiten Formular daneben so schmal, dass "Montag bis Donnerstag"
     dreimal umbrach. 20rem trägt Wochentag und Uhrzeit nebeneinander;
     erst darunter greift der Umbruch weiter unten. */
  /* 1 : 1.46 statt 1 : 1.3 - das Formular bekommt fünf Prozent mehr
     Breite, die Datenspalte gibt sie ab.

     Das Formular trägt Eingabefelder mit Beschriftungen; die
     Datenspalte trägt kurze Zeilen wie "Musterstraße 42". Von zwei
     Spalten mit unterschiedlichem Bedarf soll die mit dem größeren
     Bedarf mehr bekommen.

     Die Mindestbreite von 20rem bleibt: Darunter bricht "Montag bis
     Donnerstag" wieder um. */
  grid-template-columns:minmax(20rem,1fr) 1.46fr;
  gap:clamp(2.5rem,5vw,5rem);
}
.lt-kontakt--daten-formular .lt-kontakt__raster{
  grid-template-columns:minmax(20rem,1fr) 1.6fr}
/* Formular zuerst: Das Formular steht in der ersten Spalte und bekam
   bisher die schmale (1fr) - jetzt die breite, die Daten rücken nach rechts. */
.lt-kontakt--formular-daten .lt-kontakt__raster{
  grid-template-columns:minmax(0,1.6fr) minmax(20rem,1fr)}
/* Ohne zweite Spalte die volle Breite nutzen.

   Vorher standen hier 40rem - also 640px statt der 1036px, die jeder
   andere Baustein hat. Im Stapel sah die Kontaktsektion dadurch
   eingerückt aus, und Überschrift wie Formular wirkten zu schmal.
   Genau das ist der Rest der Unruhe gewesen.

   Der Gedanke dahinter war richtig: Ein Formular über 1000px Breite
   hat Felder, die man von links nach rechts absuchen muss. Nur gehört
   die Begrenzung an die FELDER, nicht an die Sektion - sonst rutscht
   die Überschrift mit nach innen und die Fläche endet mitten auf der
   Seite.

   Deshalb: Raster über die volle Breite, Felder darin zweispaltig.
   Bei einem Kontaktformular mit vier kurzen Feldern ist das die
   bessere Nutzung des Platzes. */
.lt-kontakt--nur-formular .lt-kontakt__raster,
.lt-kontakt--nur-daten .lt-kontakt__raster{grid-template-columns:minmax(0,1fr)}

/* Die Felder stehen schon zweispaltig - siehe .lt-form__zeile weiter
   unten. Hier war nichts zu ergänzen. */


/* Das RASTER wandert, nicht die Beschriftungen.

   NACH den Spaltendefinitionen - vorher standen diese Zeilen davor
   und die Hauptregel überschrieb sie.

   "Zentriert" heißt bei einem Formular: Der Block steht mittig auf
   der Seite. Zentrierte Feldbeschriftungen wären das Gegenteil von
   lesbar - das Auge sucht bei jedem Feld einen neuen Anfang.

   justify-content statt margin:auto: Das Raster ist immer so breit
   wie sein Platz - nur die SPALTE ist begrenzt. Ein auto-Rand an
   etwas, das schon voll breit ist, bewirkt nichts. justify-content
   verschiebt dagegen die Spalten innerhalb des Rasters, und genau
   das ist gemeint. */
:where(.lt-kontakt.lt-block--aus-mitte) .lt-kontakt__raster{
  justify-content:center}
:where(.lt-kontakt.lt-block--aus-rechts) .lt-kontakt__raster{
  justify-content:end}

/* Die Ausrichtung gilt NUR für die Überschriften.

   Formular und Angaben bleiben linksbündig: Zentrierte
   Feldbeschriftungen und eine zentrierte Adresse mit Symbolen davor
   sind nicht lesbar - das Auge sucht bei jeder Zeile einen neuen
   Anfang.

   Die alte Regel nannte ".lt-kontakt__daten"; die Klasse heißt seit
   der Übernahme aus LICREM ".lt-kon-daten" und griff deshalb nicht
   mehr. */
:where(.lt-kontakt.lt-block--aus-mitte) .lt-form,
:where(.lt-kontakt.lt-block--aus-rechts) .lt-form,
:where(.lt-kontakt.lt-block--aus-mitte) .lt-form-karte,
:where(.lt-kontakt.lt-block--aus-rechts) .lt-form-karte,
:where(.lt-kontakt.lt-block--aus-mitte) .lt-kon-daten,
:where(.lt-kontakt.lt-block--aus-rechts) .lt-kon-daten{
  text-align:left}

/* Die Danke-Meldung nimmt das NICHT an - sie steht immer mittig.

   Die Regel darüber trifft die ganze Karte, und die Meldung liegt
   darin. Ohne diese Zeile erbt sie die Linksbündigkeit. */
.lt-kontakt .lt-form__danke{text-align:center}

/* Die Kontaktzeilen richten sich über flex aus - text-align allein
   verschöbe den Text, nicht das Symbol daneben. */
:where(.lt-kontakt.lt-block--aus-mitte) .lt-kon-zeile,
:where(.lt-kontakt.lt-block--aus-rechts) .lt-kon-zeile{
  justify-content:flex-start;align-items:center}

/* Zwei Spalten - das Formular etwas breiter, weil dort getippt wird
   und ein schmales Feld unangenehm ist. */

@media(max-width:820px){
  .lt-kontakt__raster{grid-template-columns:1fr !important}
  .lt-kontakt{padding:44px 0}
}

/* ── Angaben ──────────────────────────────────────────────────
   Jede Zeile: Symbol, Beschriftung, Wert. Trennlinien dazwischen. */
.lt-kon-daten{padding-top:.5rem}

/* Symbol und Beschriftung auf einer Höhe.

   Mit align-items:flex-start saß das Symbol oben und die
   Beschriftung daneben - bei zwei Textzeilen (Straße und Ort) stand
   es dann neben der ersten und wirkte verrutscht.

   center legt die Mitte des Symbols auf die Mitte des ganzen
   Textblocks. */
.lt-kon-zeile{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.lt-kon-zeile:last-child{border-bottom:none}

/* Das Symbol in der Akzentfarbe der Website - nicht in einem festen
   Ton, sonst passt der Baustein zu einer Vorlage und zu keiner
   anderen. */
.lt-kon-ico{
  width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  background:var(--akzent);
  color:var(--auf-akzent, #fff);
}
/* Auch am Element selbst, nicht nur über den Behälter: Ein SVG ohne
   Größenangabe wird so groß, wie sein viewBox es zulässt - hier
   also riesig. Steht die Datei einmal nicht bereit, sieht die Seite
   sonst zerstört aus statt nur schlicht. */
.lt-kon-ico svg{width:15px;height:15px;display:block;flex:0 0 auto}

.lt-kon-lbl{
  display:block;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.2rem;
  /* In der Akzentfarbe statt gedämpftem Grau: Die Beschriftungen
     gliedern den Block ("Öffnungszeiten", "Adresse"), und in Grau
     verschwanden sie neben den Werten, die sie benennen. */
  color:var(--akzent-text,var(--akzent));
  font-weight:700;
}
.lt-kon-val{display:block;font-size:.9rem;line-height:1.5}
.lt-kon-val a{color:inherit;text-decoration:none}
.lt-kon-val a:hover{color:var(--akzent-text,var(--akzent))}

/* Öffnungszeiten als echte Tabelle: EIN Raster für alle Zeilen,
   damit die Zeiten-Spalte über alle Tage bündig steht (vorher war
   jede Zeile ein eigenes Raster - die rechte Spalte sprang je nach
   Länge des Tages). Ziffern gleich breit, Zeiten bündig untereinander. */
.lt-kon-zeiten{display:grid;grid-template-columns:max-content max-content;gap:3px 1.4rem;align-items:baseline}
.lt-kon-zeit{display:contents}
.lt-kon-zeit > :first-child{font-weight:600}
.lt-kon-zeit > :last-child{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Zu eng für beides nebeneinander: untereinander statt gequetscht. */
@media(max-width:420px){
  .lt-kon-zeiten{grid-template-columns:1fr;gap:0}
  .lt-kon-zeit > :last-child{margin-bottom:6px}
}

/* ── Formular ─────────────────────────────────────────────────
   In einer Karte: Ein Formular ohne Rahmen schwimmt auf der Seite,
   mit Fläche ist es ein Gegenstand, den man ausfüllt. */
.lt-form-karte{
  padding:clamp(1.6rem,3vw,2.5rem);
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--text) 4%, var(--grund));
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent);

  /* Flex-Behälter, damit die Danke-Meldung die Höhe füllen kann.

     "min-height:100%" am Kind reicht nicht: Es bezieht sich auf die
     HÖHE des Elternteils, und die Karte hat nur eine min-height vom
     Skript. Bei einem Elternteil ohne feste Höhe fällt das auf
     "auto" zurück - deshalb saß die Meldung oben. */
  display:flex;
  flex-direction:column;
}

/* Ohne Tönung: keine Fläche, kein Rahmen, kein Schatten, weniger Innenabstand -
   das Formular steht schlicht im Abschnitt und wird niedriger. */
.lt-form-karte.lt-form-karte--ohne,.lt-einl .lt-form-karte.lt-form-karte--ohne{background:none;border:0;box-shadow:none;padding:clamp(.4rem,1vw,.8rem) 0}
.lt-form-karte--ohne .lt-form__titel{margin-bottom:1rem}
/* Hell mit Rahmen - für farbige Flächen (LICREM: weiße Karte auf Creme). */
.lt-form-karte--hell{background:var(--grund);border-color:color-mix(in srgb, var(--text) 10%, transparent);
  padding:clamp(1.6rem,3.2vw,2.75rem)}
.lt-form-karte--hell .lt-form input,.lt-form-karte--hell .lt-form textarea,.lt-form-karte--hell .lt-form select{
  background:color-mix(in srgb, var(--text) 3%, var(--grund))}
.lt-form__titel{margin:0 0 1.6rem;font-family:var(--schrift_titel);font-size:1.4rem;line-height:1.25;
  font-weight:var(--schrift_titel_gewicht,400);color:var(--akzent-text,var(--akzent))}
/* Kopf in der Datenspalte: Abstand wie über dem Raster. */
.lt-kontakt__seite > .lt-kontakt__kopf{margin-bottom:1.6rem}
.lt-kontakt__seite > .lt-ueberzeile + .lt-kontakt__kopf,.lt-kontakt__seite .lt-kontakt__kopf{max-width:none}

/* Das Kind streckt sich über den freien Platz. */
.lt-form-karte > .lt-form__danke{flex:1}

.lt-form__feld{display:flex;flex-direction:column;gap:.3rem;
  margin-bottom:1.1rem}
.lt-form__feld > span{
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;
  color:color-mix(in srgb, var(--text) 72%, transparent);
}
.lt-form__feld em{font-style:normal;text-transform:none;letter-spacing:0;
  opacity:.7}

.lt-form__zeile{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.lt-form__zeile{grid-template-columns:1fr}}

/* Mit .lt-kontakt davor: Bootstrap ist auf der Seite geladen und
   bringt eigene Maße mit - die Felder waren fast doppelt so hoch. */
:is(.lt-kontakt,.lt-einl) .lt-form input,
:is(.lt-kontakt,.lt-einl) .lt-form select,
:is(.lt-kontakt,.lt-einl) .lt-form textarea{
  width:100%;box-sizing:border-box;
  padding:.65rem .9rem;
  font-family:inherit;font-size:.9rem;line-height:1.5;
  color:var(--text);
  background:var(--grund);
  border:1px solid color-mix(in srgb, var(--text) 16%, transparent);
  /* Eigene Stufe, nicht --radius: Bei "Rund" steht dort 3rem, und ein
     Textfeld mit 3 rem sieht aus wie eine Wanne. --radius-feld geht
     dieselbe Richtung mit, nur zurückhaltend. Der Rückfall greift für
     Websites, die vor dieser Stufe veröffentlicht wurden. */
  border-radius:var(--radius-feld, 4px);
  outline:none;appearance:none;height:auto;
  transition:border-color .2s, box-shadow .2s;
}
:is(.lt-kontakt,.lt-einl) .lt-form textarea{min-height:110px;resize:vertical}

:is(.lt-kontakt,.lt-einl) .lt-form input:focus,
:is(.lt-kontakt,.lt-einl) .lt-form select:focus,
:is(.lt-kontakt,.lt-einl) .lt-form textarea:focus{
  border-color:var(--akzent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 12%, transparent);
}

:is(.lt-kontakt,.lt-einl) .lt-form.geprueft input:invalid,
:is(.lt-kontakt,.lt-einl) .lt-form.geprueft select:invalid,
:is(.lt-kontakt,.lt-einl) .lt-form.geprueft textarea:invalid{
  border-color:#c62828;
  box-shadow:0 0 0 3px rgba(198,40,40,.1);
}

/* Weggeschoben statt display:none - manche Bots überspringen
   versteckte Felder, verschobene nicht. */
.lt-form__falle{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden}

.lt-form__stern{color:var(--akzent-text, var(--akzent));font-weight:700}
.lt-form__pflicht{margin:0 0 .6rem;font-size:.75rem;line-height:1.6;color:color-mix(in srgb, var(--text) 58%, transparent)}
.lt-form__pflicht span{color:var(--akzent-text, var(--akzent));font-weight:700}
.lt-form__hinweis{
  margin:0 0 1.25rem;font-size:.75rem;line-height:1.6;
  color:color-mix(in srgb, var(--text) 58%, transparent);
}
.lt-form__hinweis a{color:var(--akzent-text,var(--akzent))}

/* Der Knopf über die volle Breite - in einer Karte wirkt ein
   kleiner Knopf verloren. */
.lt-form__fuss .lt-btn{width:100%;text-align:center;padding:.9rem}
.lt-form button[disabled]{opacity:.6;cursor:progress}

.lt-form__stand{
  margin:1rem 0 0;font-size:.86rem;padding:.75rem 1rem;
  border-radius:4px;display:none;
}
.lt-form__stand.gut{display:block;
  background:#edf7ed;color:#2e7d32;border:1px solid #c8e6c9}
.lt-form__stand.schlecht{display:block;
  background:#fdecea;color:#c62828;border:1px solid #ffcdd2}

html[data-thema="dunkel"] .lt-form__stand.gut{
  background:rgba(46,125,50,.16);color:#8fd49a;border-color:rgba(46,125,50,.4)}
html[data-thema="dunkel"] .lt-form__stand.schlecht{
  background:rgba(198,40,40,.16);color:#f0a0a0;border-color:rgba(198,40,40,.4)}

/* ── Danke-Meldung ────────────────────────────────────────────
   Tritt an die Stelle des Formulars - in derselben Karte. */
/* Die Karte behält ihre Höhe - das Skript setzt sie beim Absenden.
   Der Übergang glättet den Rest, falls die Meldung doch höher ist. */
.lt-form-karte{transition:min-height .3s ease-out}

.lt-form{transition:opacity .2s ease-out}

/* Die Meldung wird eingeblendet, nicht hingeschaltet.

   Sie kommt zugleich ein Stück von unten - das lässt sie ankommen,
   statt zu erscheinen. Acht Pixel reichen; mehr wirkt wie eine
   Animation, und die will an dieser Stelle niemand sehen. */
/* In der Mitte der Karte - waagerecht UND senkrecht.

   Unabhängig von der Ausrichtung des Bausteins: Die Meldung ist
   keine Fortsetzung des Formulars, sondern sein Abschluss. Sie
   steht für sich, und dafür ist die Mitte der richtige Ort - auch
   wenn die Feldbeschriftungen darüber linksbündig waren. */
.lt-form__danke{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  gap:.9rem;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease-out, transform .3s ease-out;
}
.lt-form__danke.da{opacity:1;transform:none}
.lt-form__danke[hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  .lt-form,.lt-form__danke,.lt-form-karte{transition:none}
  .lt-form__danke{transform:none}
}
.lt-form__danke svg{
  color:var(--akzent-text,var(--akzent));
  /* Polsterung mit der Größe: Bei 44 px Zeichen wirken 7 px Rand
     wie ein zu enger Kragen. */
  padding:10px;border-radius:50%;box-sizing:content-box;
  background:color-mix(in srgb, var(--akzent) 14%, transparent);
}
.lt-form__danke h3{
  margin:0;font-family:var(--schrift_titel);
  font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.25;font-weight:400;
}
.lt-form__danke p{margin:0;line-height:1.6;
  color:color-mix(in srgb, var(--text) 76%, transparent)}

/* ── Karte ────────────────────────────────────────────────────── */
.lt-kontakt__karte{position:relative;margin-top:24px;
  border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;background:var(--flaeche)}
.lt-kontakt__karte iframe{display:block;width:100%;height:100%;border:0}
/* OSM-Karte (Leaflet): Fläche füllt den Kasten, Markierung in der
   Akzentfarbe, Namensnennung klein unten rechts. */
.lt-kontakt__karte-flaeche{position:absolute;inset:0;z-index:0}
.lt-kontakt__karte--osm .leaflet-container{font:inherit;background:var(--flaeche)}
.lt-karte-pin{color:var(--akzent);filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));background:none;border:0}
.lt-kontakt__karte--osm .leaflet-control-attribution{font-size:.62rem;background:rgba(255,255,255,.8)}
.lt-kontakt__karte--osm .leaflet-control-attribution a{color:#333}
.lt-kontakt__karte-hinweis{z-index:2}
.lt-kontakt__karte-link{font-size:.78rem;color:inherit}
.lt-kontakt__karte-quelle{margin:8px 0 0;font-size:.72rem;color:var(--text3, color-mix(in srgb, var(--text) 60%, transparent))}
.lt-kontakt__karte-quelle a{color:inherit;font-weight:inherit}

.lt-kontakt__karte-hinweis{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:24px;text-align:center;
  background:var(--flaeche)}
.lt-kontakt__karte-hinweis p{margin:0;font-size:.88rem;max-width:24rem}

/* ── Variante „Kontaktdaten links, Karte rechts“ ─────────────── */
.lt-kontakt--daten-karte .lt-kontakt__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:start}
.lt-kontakt--daten-karte .lt-kontakt__kartenspalte .lt-kontakt__karte{margin-top:0}
@media(max-width:860px){
  .lt-kontakt--daten-karte .lt-kontakt__raster{grid-template-columns:minmax(0,1fr)}
}

/* ── Navigation: Knopf in der Karte, klickbare Adresse, App-Auswahl ── */
.lt-kontakt__navi{position:absolute;top:12px;right:12px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;font-size:.88rem;line-height:1;border:0;cursor:pointer}
.lt-kontakt__navi svg{flex:none}
/* Alle Kontaktangaben gleich: Adresse, Telefon, E-Mail mit derselben
   dezenten Unterstreichung - vorher nur die Adresse. */
.lt-kon-val a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent)}
.lt-kon-val a:hover{text-decoration-color:currentColor}
.lt-navi-wahl{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;
  padding:16px;background:rgba(10,12,16,.45);animation:ltNaviEin .15s ease-out}
@media(min-width:640px){.lt-navi-wahl{align-items:center}}
.lt-navi-wahl__box{width:100%;max-width:360px;padding:20px;border-radius:var(--radius,14px);
  background:var(--flaeche,#fff);color:var(--text,#111);box-shadow:0 20px 50px rgba(0,0,0,.3);
  display:flex;flex-direction:column;gap:8px;font-family:inherit}
.lt-navi-wahl__titel{margin:0;font-weight:700;font-size:1.02rem}
.lt-navi-wahl__adr{margin:0 0 6px;font-size:.85rem;color:color-mix(in srgb, var(--text,#111) 65%, transparent)}
.lt-navi-wahl__app,.lt-navi-wahl__zu{display:flex;align-items:center;justify-content:center;height:44px;padding:0 16px;
  border-radius:var(--radius-knopf,var(--radius,10px));font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.lt-navi-wahl__app{background:var(--akzent);color:var(--auf-akzent,#fff)}
.lt-navi-wahl__app:hover{filter:brightness(1.08)}
.lt-navi-wahl__zu{margin-top:4px;background:transparent;border:0;color:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent)}
/* Mobil wie der Benachrichtigungs-Hinweis der Blogs: feste Rundung,
   unabhängig vom eckigen oder runden Stil der Website. */
@media(max-width:639px){
  .lt-navi-wahl{padding:12px 12px max(12px, env(safe-area-inset-bottom))}
  .lt-navi-wahl__box{max-width:none;border-radius:20px;padding:18px 18px 16px}
  .lt-navi-wahl__app,.lt-navi-wahl__zu{height:46px;border-radius:13px}
}
@keyframes ltNaviEin{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lt-navi-wahl{animation:none}}

/* ── OSM-Karte im Dunkelmodus ──────────────────────────────────
   Dieselben OpenStreetMap-Kacheln, per Filter dunkel gerechnet: kein
   zweiter Kartendienst, keine weitere Einwilligung. Nur die Kacheln -
   die Markierung behält ihre Akzentfarbe. */
:is(html[data-thema="dunkel"],html[data-modus="dunkel"]:not([data-thema="hell"])) .lt-kontakt__karte--osm .leaflet-tile-pane{
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.6)}
:is(html[data-thema="dunkel"],html[data-modus="dunkel"]:not([data-thema="hell"])) .lt-kontakt__karte--osm .leaflet-container{background:#1d1f24}
:is(html[data-thema="dunkel"],html[data-modus="dunkel"]:not([data-thema="hell"])) .lt-kontakt__karte--osm .leaflet-control-attribution{background:rgba(20,22,26,.8);color:#bbb}
:is(html[data-thema="dunkel"],html[data-modus="dunkel"]:not([data-thema="hell"])) .lt-kontakt__karte--osm .leaflet-control-attribution a{color:#ddd}
:is(html[data-thema="dunkel"],html[data-modus="dunkel"]:not([data-thema="hell"])) .lt-kontakt__karte--osm .leaflet-bar a{background:#2a2d33;color:#eee;border-bottom-color:#3a3d44}

/* ── Einladung: Textbaustein, der sich ins Formular verwandelt ──
   Zu: Überzeile, Überschrift, Knopf - wie ein Textbaustein. Offen:
   der Knopf ist weg, an seiner Stelle die Formularkarte. Der Übergang
   läuft als View Transition (Knopf wächst zur Karte); ohne sie blendet
   die Karte weich ein. Ohne Skript öffnet der Anker (:target). */
/* Ein- UND Ausblenden per Transition mit erzwungenem Reflow (im Skript):
   Beim Öffnen setzt das Skript display:flex (über .ist-offen), erzwingt
   einen Reflow und fügt erst DANN .an hinzu - so ist der Startzustand
   (opacity:0) sicher committet, bevor die Transition läuft; kein
   Endzustand-Flash wie bei display:none->flex + Keyframe. Beim Schließen
   nimmt es .an weg (Transition zu opacity:0) und setzt display:none erst
   am transitionend. BEWUSST ohne scale: der große Box-Shadow würde bei
   scale je Frame neu rastern = Flimmern. Nur opacity + translateY, mit
   will-change auf eigener Compositing-Ebene -> flimmerfrei, alle Browser. */
.lt-einl .lt-einl__karte{display:none;position:relative;text-align:left;
  max-width:40rem;margin:clamp(1.4rem,3vw,2rem) auto 0;color:var(--text);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.35);scroll-margin-top:84px;
  opacity:0;transform:translateY(16px);will-change:opacity,transform;
  transition:opacity .26s ease, transform .3s ease-in}
.lt-einl.lt-block--aus-links .lt-einl__karte{margin-left:0}
.lt-einl.lt-block--aus-rechts .lt-einl__karte{margin-right:0}
.lt-einl.ist-offen .lt-einl__karte{display:flex}
/* Öffnen ruhiger als Schließen: Die Transition des ZIELzustands gilt -
   .an (auf) bekommt die lange, weiche Kurve, die Grundregel (zu) die kurze. */
.lt-einl .lt-einl__karte.an{opacity:1;transform:none;
  transition:opacity .45s ease-out, transform .55s cubic-bezier(.16,1,.3,1)}
.lt-einl .lt-einl__karte:target{display:flex;opacity:1;transform:none} /* ohne JS */
.lt-einl.ist-offen .lt-einl__knopf,.lt-einl:has(.lt-einl__karte:target) .lt-einl__knopf{display:none}
/* Unterzeile dicht an die Überschrift, mehr Luft zum Knopf */
.lt-einl .lt-block__text > h2:has(+ .lt-einl__text){margin-bottom:0}
.lt-einl__text{margin:.35em auto 0;max-width:36rem}
.lt-einl .lt-einl__knopf{margin-top:clamp(1.4rem,2.6vw,2rem)}
.lt-einl.lt-block--aus-links .lt-einl__text{margin-left:0}
.lt-einl__zu{position:absolute;top:.7rem;right:.7rem;width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:inherit;opacity:.55;cursor:pointer;transition:opacity .2s,background .2s}
.lt-einl__zu:hover,.lt-einl__zu:focus-visible{opacity:1;background:color-mix(in srgb, var(--text) 8%, transparent)}
.lt-einl .lt-form__titel{padding-right:2.4rem}
@media (prefers-reduced-motion: reduce){.lt-einl .lt-einl__karte{transition:none;transform:none}}

/* Lebendiger: Akzentkante, zweispaltig mit Seitenteil, Beschriftung
   leuchtet beim Ausfüllen in Akzent. Die Karte blendet als Ganzes weich
   ein (eine Animation, kein Feld-Stagger) - das lief früher je Feld und
   mit View Transition, was in Chrome/Safari hakte und in Firefox fehlte. */
.lt-einl .lt-einl__karte{overflow:hidden}
/* Akzentkante oben zu beiden Seiten weich ausgeblendet (wie Header-Linie) */
.lt-einl .lt-einl__karte::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--akzent) 22%, var(--akzent) 78%, transparent)}
.lt-einl .lt-einl__karte.lt-form-karte--ohne::after{display:none}
.lt-einl__haupt{display:flex;flex-direction:column;flex:1;min-width:0}
.lt-einl .lt-form__feld:focus-within > span{color:var(--akzent-text,var(--akzent))}
:is(.lt-einl) .lt-form input,:is(.lt-einl) .lt-form textarea{padding:.8rem 1rem;font-size:.95rem}
.lt-einl__seite{padding:clamp(1.4rem,3vw,2rem);margin:calc(-1 * clamp(1.6rem,3vw,2.5rem));margin-bottom:1.6rem;
  background:color-mix(in srgb, var(--akzent) 9%, var(--grund));display:flex;flex-direction:column;gap:1.4rem}
.lt-einl__punkte{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.lt-einl__punkte li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.45;font-size:.95rem}
.lt-einl__haken{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--akzent);color:var(--auf-akzent,#fff)}
.lt-einl__haken svg{width:14px;height:14px}
.lt-einl__lbl{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:color-mix(in srgb, var(--text) 60%, transparent)}
.lt-einl__direkt{display:grid;gap:.5rem}
.lt-einl__draht{display:flex;gap:.6rem;align-items:center;color:inherit;text-decoration:none;font-size:.92rem;
  overflow-wrap:anywhere}
.lt-einl__draht svg{flex:none;color:var(--akzent-text,var(--akzent))}
.lt-einl__draht:hover span{text-decoration:underline;text-underline-offset:3px}
@media (min-width:760px){
  .lt-einl .lt-einl__karte--seite{flex-direction:row;align-items:stretch;padding:0;
    width:min(60rem,calc(100vw - 3rem));max-width:none}
  .lt-einl.lt-block--aus-mitte .lt-einl__karte--seite{margin-left:calc(50% - min(30rem,(100vw - 3rem) / 2))}
  .lt-einl__karte--seite .lt-einl__seite{flex:0 0 34%;margin:0;justify-content:flex-start;
    padding:clamp(1.8rem,3vw,2.6rem)}
  .lt-einl__karte--seite .lt-einl__haupt{padding:clamp(1.8rem,3vw,2.6rem)}
}
@media (prefers-reduced-motion: reduce){.lt-einl.ist-offen *{animation:none!important}}

/* ── Einladung ohne Seitenteil: breit und niedrig ─────────────
   Karte so breit wie mit Seitenteil; Felder in Spalten (--sp kommt aus
   render.php), Hinweis + Senden + Pflichtfeld stehen neben der Nachricht. */
@media (min-width:760px){
  .lt-einl .lt-einl__karte--breit{width:min(60rem,calc(100vw - 3rem));max-width:none}
  .lt-einl.lt-block--aus-mitte .lt-einl__karte--breit{margin-left:calc(50% - min(30rem,(100vw - 3rem) / 2))}
  .lt-form--breit{display:grid;grid-template-columns:repeat(var(--sp,3),minmax(0,1fr));gap:1rem;align-items:start}
  .lt-form--breit .lt-form__zeile{display:contents}
  .lt-form--breit > *,.lt-form--breit .lt-form__zeile > *{grid-column:span var(--spann,1);margin:0}
  /* Nachricht: Beschriftung und Feld werden eigene Rasterzeilen, damit der
     Abschluss genau auf Höhe des Textfelds beginnt und endet. */
  .lt-form--breit > .lt-form__feld:has(textarea){display:contents}
  .lt-form--breit > .lt-form__feld:has(textarea) > span{grid-column:1 / span calc(var(--sp,3) - 1);margin-bottom:-.7rem}
  .lt-form--breit > .lt-form__feld:has(textarea) > textarea{grid-column:1 / span calc(var(--sp,3) - 1);min-height:9.5rem;margin:0;align-self:stretch}
  .lt-form--breit > .lt-form__abschluss{grid-column:var(--sp,3);align-self:stretch;display:flex;flex-direction:column;gap:1.1rem}
  /* Pflichtfeld bündig mit der Oberkante des Textfelds (line-height 1, kein
     Halbabstand oben), Senden unten bündig, Hinweis mit gleichem Abstand dazwischen. */
  .lt-form--breit > .lt-form__abschluss{justify-content:space-between}
  .lt-form--breit .lt-form__abschluss .lt-form__hinweis{margin:0}
  .lt-form--breit .lt-form__abschluss .lt-form__pflicht{margin:0;order:-1;opacity:1;font-size:.75rem;line-height:1;
    color:color-mix(in srgb, var(--text) 58%, transparent)}
  .lt-form--breit .lt-form__abschluss .lt-form__fuss{margin:0}
  .lt-form--breit .lt-form__abschluss .lt-form__stand{margin-top:.6rem}
  .lt-form--breit > .lt-form__falle,.lt-form--breit > input[type=hidden]{position:absolute}
}