/* LUV Draht — Formulare und Kontaktkacheln.
   Haelt sich an die Marke: Blau #005A96, Haarlinien statt Kaesten,
   Flaeche nur dort, wo gehandelt wird. */

.luv-draht{--luv:#005A96;--ton:#16242c;--leise:#5a6a76;--linie:#dde3e7;
  margin:2rem 0;font-size:15.5px;line-height:1.7;color:var(--ton)}

.luv-draht--streifen{border-top:1px solid var(--linie);padding-top:1.6rem}

.luv-draht__vorspann{margin:0 0 1.6rem;font-size:17px;line-height:1.55;max-width:34rem;text-wrap:pretty}
/* Nur die Vorzeile steht fuer sich. Ein verschachteltes <strong> - etwa
   „innerhalb von 30 Minuten" mitten im Satz - darf NICHT umbrechen; sonst
   zerfaellt der Satz in drei Zeilen und der Punkt bleibt allein zurueck. */
.luv-draht__vorspann > strong[data-luv-vorspann]{display:block;font-weight:600;margin-bottom:.15em}
.luv-draht__vorspann > strong[data-luv-vorspann]:empty{display:none}
.luv-draht__vorspann strong strong,
.luv-draht__vorspann [data-luv-satz] strong{display:inline;font-weight:600}

.luv-draht__zeile{display:flex;flex-wrap:wrap;gap:1rem 1.1rem;align-items:end}
.luv-draht__paar{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1rem}
.luv-draht__paar>*{flex:1 1 15rem}

.luv-draht__feld{display:flex;flex-direction:column;gap:.45em;flex:1 1 12rem;margin-bottom:0;min-width:0}
.luv-draht__feld--wahl{flex:0 1 15rem}
.luv-draht__feld--gross{flex-basis:100%;margin-bottom:1rem}
.luv-draht__feld>span{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--leise);font-weight:600}
.luv-draht__feld>span em{font-style:normal;letter-spacing:.06em;text-transform:none;font-weight:400;opacity:.8}

/* Gleiche Hoehe fuer Eingabe und Auswahl - sonst sitzt die Auswahl tiefer
   und ihre Beschriftung rutscht mit, weil die Zeile an der Unterkante ausgerichtet ist. */
.luv-draht input[type=text],.luv-draht input[type=tel],.luv-draht input[type=email],
.luv-draht select,.luv-draht textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:15.5px;color:var(--ton);
  background:#fff;border:1px solid var(--linie);border-radius:0;
  padding:.7em .85em;height:50px;line-height:1.3;
  transition:border-color .15s,box-shadow .15s}
.luv-draht textarea{height:auto}
.luv-draht textarea{min-height:8.5em;resize:vertical;line-height:1.65}
.luv-draht input:focus,.luv-draht select:focus,.luv-draht textarea:focus{
  outline:none;border-color:var(--luv);box-shadow:0 0 0 2px rgba(0,90,150,.14)}
.luv-draht ::placeholder{color:#9aa7b0;opacity:1}

/* Die Knopfform der Website: gefuellt mit Rahmen, beim Ueberfahren gedreht. */
.luv-draht__knopf{flex:0 0 auto;
  font:500 13px/1 Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.07em;
  background:var(--luv);color:#fff;border:1px solid var(--luv);border-radius:0;
  padding:0 1.5rem;height:50px;cursor:pointer;
  transition:background .25s,color .25s}
.luv-draht__knopf:hover,.luv-draht__knopf:focus-visible{background:transparent;color:var(--luv)}
.luv-draht__knopf--gross{height:52px;padding:0 1.9rem;margin-top:1.2rem;align-self:flex-start}
.luv-draht__knopf[disabled]{opacity:.55;cursor:default}

.luv-draht__haken{display:flex;gap:.6em;align-items:flex-start;flex:1 1 15rem;
  font-size:14.5px;line-height:1.55;color:var(--leise);margin:.2rem 0 1rem}
.luv-draht__haken input{margin-top:.28em;width:18px;height:18px;flex:0 0 auto}

.luv-draht__hinweis{margin:1.5rem 0 0;font-size:13px;line-height:1.65;color:var(--leise);max-width:34rem}
.luv-draht__hinweis a{color:var(--leise)}

.luv-draht__antwort{margin:1rem 0 0;font-size:16px;line-height:1.6;min-height:0}
.luv-draht__antwort:empty{display:none}
.luv-draht__antwort--gut{color:var(--ton);border-left:3px solid var(--luv);padding-left:1em}
.luv-draht__antwort--schlecht{color:#a33;border-left:3px solid #a33;padding-left:1em}

.luv-draht.ist-fertig .luv-draht__zeile,
.luv-draht.ist-fertig .luv-draht__paar,
.luv-draht.ist-fertig .luv-draht__feld,
.luv-draht.ist-fertig .luv-draht__haken,
.luv-draht.ist-fertig .luv-draht__knopf,
.luv-draht.ist-fertig .luv-draht__hinweis,
.luv-draht.ist-fertig .luv-draht__vorspann{display:none}

/* ---------- Kontaktseite ---------- */

.luv-kontakt{--luv:#005A96;--ton:#16242c;--leise:#5a6a76;--linie:#dde3e7;margin:2.5rem 0}

.luv-kontakt__kacheln{display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));max-width:44rem;align-items:stretch}

.luv-kachel{display:flex;flex-direction:column;align-items:center;gap:.55rem;
  background:#fff;border:1px solid var(--linie);border-radius:3px;
  padding:2.2rem 1.2rem 1.7rem;cursor:pointer;text-align:center;
  color:var(--ton);font:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.luv-kachel:hover{border-color:rgba(0,90,150,.45);box-shadow:0 6px 22px rgba(22,36,44,.07);transform:translateY(-2px)}
.luv-kachel:focus-visible{outline:2px solid var(--luv);outline-offset:3px}
.luv-kachel[aria-expanded=true]{border-color:var(--luv);box-shadow:inset 0 -3px 0 var(--luv)}
.luv-kachel__zeichen{color:var(--luv);line-height:0}
.luv-kachel__name{font-size:17px;font-weight:600}
.luv-kachel__zusatz{font-size:13px;color:var(--leise);line-height:1.5}

.luv-tuer{max-width:44rem}
.luv-tuer[hidden]{display:none}
.luv-tuer .luv-draht{margin-top:2.2rem;border-top:1px solid var(--linie);padding-top:2.2rem}

.luv-kontakt__fuss{margin-top:2rem;font-size:15px;color:var(--leise)}

@media (prefers-reduced-motion:reduce){
  .luv-kachel{transition:none}
  .luv-kachel:hover{transform:none}
}

@media (max-width:600px){
  .luv-draht__zeile{flex-direction:column;align-items:stretch}
  .luv-draht__knopf{width:100%}
  .luv-kachel{padding:1.6rem 1rem 1.3rem}
}

/* ---------- Feinschliff ---------- */
.luv-draht__paar{gap:1rem 1.1rem;margin-bottom:1.2rem}
.luv-draht__feld--gross{margin-bottom:1.2rem}
.luv-draht__feld>span{line-height:1.3}
.luv-draht__haken{margin:.4rem 0 1.2rem}
.luv-draht__antwort{margin-top:1.6rem}
.luv-kachel__name{letter-spacing:.005em}
.luv-kontakt__kacheln + .luv-tuer{margin-top:0}

/* ---------- Abstände, die sich gegen die Seiten-CSS durchsetzen ----------
   Auf den Rechtsseiten gilt eine Regel der Form `.luv-recht p{…}`. Sie ist
   spezifischer als eine einzelne Klasse und hat meine Abstände geschluckt.
   Deshalb hier mit Elementname davor - und da, wo es sein muss, mit Nachdruck. */
.luv-draht p.luv-draht__vorspann{margin:0 0 1.8rem !important}
.luv-draht p.luv-draht__hinweis{margin:1.8rem 0 0 !important}
.luv-draht p.luv-draht__antwort{margin:1.7rem 0 0 !important}

.luv-draht label.luv-draht__feld{margin:0 !important}
.luv-draht label.luv-draht__feld--gross{margin:1.5rem 0 0 !important}
.luv-draht label.luv-draht__haken{margin:1.1rem 0 0 !important}
.luv-draht .luv-draht__paar{margin:1.5rem 0 0}
.luv-draht .luv-draht__paar:first-of-type{margin-top:0}
.luv-draht .luv-draht__zeile{margin-top:0}
.luv-draht .luv-draht__knopf--gross{margin:1.8rem 0 0 !important}

/* Die Frist trägt die Farbe der Marke - sie ist das Versprechen, nicht nur ein Wort. */
.luv-draht__vorspann [data-luv-satz] strong{color:var(--luv);font-weight:600}

/* Die Wahl steht im Anfrageformular allein in einer Zeile - sie braucht denselben
   Abstand nach oben wie jedes andere Feld. Nur in der Rueckruf-Zeile nicht:
   dort liegt sie in einer Flex-Reihe, und ein Abstand wuerde sie verrutschen lassen. */
.luv-draht label.luv-draht__feld--wahl{margin:1.5rem 0 0 !important}
.luv-draht .luv-draht__zeile label.luv-draht__feld--wahl{margin:0 !important}