/* ─────────────────────────────────────────────────────────────────
   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.46fr}
/* 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;
}

/* 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. */
.lt-kontakt .lt-form input,
.lt-kontakt .lt-form select,
.lt-kontakt .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;
}
.lt-kontakt .lt-form textarea{min-height:110px;resize:vertical}

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

.lt-kontakt .lt-form.geprueft input:invalid,
.lt-kontakt .lt-form.geprueft select:invalid,
.lt-kontakt .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__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}

.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}