/* Angebotsanfrage. Kopf oben, darunter das Formular ueber die ganze Breite.
   Der Rahmen um das Formular ist bewusst der einzige Kasten der Seite.
   Frueher stand links eine Schrittfolge und das Formular nahm nur die rechte
   Haelfte ein. Die Schrittfolge erklaerte, was ein Formular ohnehin zeigt.
   Ohne sie gibt es keinen Grund mehr, die halbe Flaeche liegen zu lassen. */

.ang-layout{padding-top:calc(var(--header-h) + var(--pad-section));
  padding-bottom:var(--pad-section)}

/* ---------- Kopf ---------- */
.ang-kopf{margin-bottom:var(--s7)}
.ang-kopf h1{font-size:var(--text-display)}
.krumel.dunkel{color:var(--ink-2)}
.krumel.dunkel a{color:var(--ink-2)}
.krumel.dunkel a:hover{color:var(--ink)}
/* Der Kasten laeuft ueber die volle Breite, der Fliesstext daneben nicht.
   Eine Zeile bleibt auf Lesebreite. */
.ang-lead{margin-top:var(--s5);max-width:44ch;color:var(--ink-2)}
.ang-hinweis{margin-top:var(--s6);max-width:46ch;font-size:var(--text-small);color:var(--ink-2)}
/* Kundeninformation zum Vertragsschluss unter dem Formular (muster.html) */
.vertrag{margin-top:var(--s8)}
.vertrag h2{font-family:var(--f-body);font-weight:700;font-size:var(--text-lead);
  line-height:var(--text-lead--line-height);max-width:30ch}
/* Deckel am Absatz selbst, nicht am Abschnitt: ch rechnet mit der Schriftgroesse
   des Elements, am Abschnitt ergab 46ch der Grundschrift 83 Zeichen Kleintext. */
.vertrag p{margin-top:var(--s4);max-width:44ch;font-size:var(--text-small);line-height:var(--text-small--line-height);color:var(--ink-2)}
.vertrag a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ang-hinweis a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Formular ---------- */
.ang-formular{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s7)}
.ang-formular fieldset{border:0;padding:0;margin:0}
/* Vorhaben und Kontaktdaten stehen nebeneinander. So nutzt das Formular die
   Breite, ohne dass ein einzelnes Eingabefeld absurd lang wird: bei 1440 px
   sind die Felder eines Paares rund 250 px breit, bei 1920 px rund 370. */
.ang-spalten{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
.ang-formular legend{font-family:var(--f-display);
  font-size:var(--text-h3);margin-bottom:var(--s5);padding:0}

.feld{margin-bottom:var(--s5)}
.feld:empty{margin-bottom:0}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
/* Die Marke steht direkt hinter dem letzten Wort der Beschriftung. Damit sie
   dabei nie allein in eine neue Zeile rutscht, klebt ein geschuetztes
   Leerzeichen davor, gesetzt ueber ::before statt als Abstand.
   Die Mindesthoehe stand vorher auf calc() um eine einheitenlose Zeilenhoehe
   und war damit ungueltig, sie wirkte also gar nicht. Als Produkt aus
   Schriftgrad und Zeilenhoehe ergibt sie eine echte Laenge und haelt die
   Eingaben eines Feldpaares auf einer Linie. */
.feld > label:not(.wahl),.feld-titel{
  display:block;margin-bottom:var(--s2);
  font-size:var(--text-small);font-weight:700;
  min-height:calc(var(--text-small) * var(--text-small--line-height))}
.feld > label:not(.wahl) .pflicht::before,.feld-titel .pflicht::before,
.feld > label:not(.wahl) .optional::before{content:"\00a0"}
/* Ein Feldpaar richtet seine Eingaben an derselben Oberkante aus */
.feld-paar{align-items:start}
.feld-paar > .feld:empty{margin:0}
.optional{color:var(--ink-2);font-weight:400}
.pflicht{color:var(--fehler)}
.pflicht-hinweis{margin-bottom:var(--s5);font-size:var(--text-small);
  font-weight:500;color:var(--ink-2)}

.feld input[type="text"],.feld input[type="email"],.feld input[type="tel"],
.feld input[type="number"],.feld select,.feld textarea{
  width:100%;padding:var(--s3) var(--s4);min-height:48px;
  font-family:var(--f-body);font-size:var(--text-body);color:var(--ink);
  background:var(--bg);border:1px solid var(--rahmen);border-radius:var(--radius-s);
  transition:border-color var(--dur-fast) var(--ease-out)}
.feld textarea{min-height:112px;resize:vertical;line-height:1.5}
.feld select{appearance:none;cursor:pointer;padding-right:var(--s7);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) center,calc(100% - 16px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--ink-2)}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  border-color:var(--accent-strong)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--ink-2);opacity:1}

/* Eine Stufe fetter als der Fliesstext der Seite. Das Formular steht auf der
   hellen Kartenflaeche und in der kleinen Schriftstufe, dort traegt 400 zu
   wenig. Die Familie kennt nur 400, 500 und 700, 500 ist also die einzige
   Zwischenstufe. */
.hilfe{margin-top:var(--s2);font-size:var(--text-small);font-weight:500;
  color:var(--ink-2)}
/* Die meisten Hilfetexte sind eine halbe Zeile lang und brauchen keine
   Grenze. Der Hinweis zu Preisen und Versand auf der Musterseite ist ein
   Absatz und liefe bei 1920 px sonst ueber 250 Zeichen je Zeile. */
.hilfe.absatz{max-width:44ch}

/* ---------- Auswahlfelder ---------- */
.wahl-gruppe{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.wahl-gruppe.spalte{flex-direction:column;gap:var(--s1)}
.wahl{display:flex;align-items:flex-start;gap:var(--s3);min-height:44px;
  padding-block:var(--s2);cursor:pointer;font-size:var(--text-small);
  font-weight:500}
.wahl input{appearance:none;width:20px;height:20px;flex:none;margin-top:2px;
  border:2px solid var(--rahmen);background:var(--bg);cursor:pointer;
  display:grid;place-content:center}
.wahl input[type="checkbox"]{border-radius:var(--radius-s)}
.wahl input[type="radio"]{border-radius:50%}
.wahl input::after{content:"";width:10px;height:10px;background:transparent;
  transition:background-color var(--dur-fast) var(--ease-out)}
.wahl input[type="checkbox"]::after{border-radius:1px}
.wahl input[type="radio"]::after{border-radius:50%}
.wahl input:checked{border-color:var(--accent-strong)}
.wahl input:checked::after{background:var(--accent-strong)}
.wahl span{padding-top:1px}
.zustimmung{align-items:flex-start;font-size:var(--text-small);color:var(--ink-2)}
/* Der Zustimmungssatz ist der laengste Text im Formular, er bleibt auf 500
   wie der uebrige Kleintext und erbt ihn von .wahl. */
.zustimmung a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Honeypot ----------
   Aus dem Sichtfeld und aus der Tab-Reihenfolge, aber nicht display:none,
   damit Formular-Bots es weiterhin fuer ein echtes Feld halten. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Musterauswahl ----------
   22 Dekore als anklickbare Karten mit Bild. Die Checkbox sitzt sichtbar
   in der Ecke, die ganze Karte ist die Klickflaeche. */
/* 172 px statt 180: bei 1440 px bleiben innen 1157 px, das ergibt sechs
   Spuren, und die zwölf Design-Klick-Dekore fuellen zwei volle Reihen statt
   5+5+2. */
.muster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
  gap:var(--s4);margin-top:var(--s3)}
.muster-karte{position:relative;display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s2);border:1px solid var(--rahmen);border-radius:var(--radius);
  background:var(--bg);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out)}
.muster-karte:hover{border-color:var(--ink-2)}
.muster-karte:has(input:checked){border-color:var(--accent-strong);
  background:var(--foto-grund);box-shadow:inset 0 0 0 1px var(--accent-strong)}
.muster-karte input{position:absolute;top:var(--s3);left:var(--s3);z-index:2;
  appearance:none;width:22px;height:22px;margin:0;
  border:2px solid var(--rahmen);border-radius:var(--radius-s);background:var(--bg);
  display:grid;place-content:center;cursor:pointer}
.muster-karte input::after{content:"";width:12px;height:12px;border-radius:1px;
  background:transparent;transition:background-color var(--dur-fast) var(--ease-out)}
.muster-karte input:checked{border-color:var(--accent-strong)}
.muster-karte input:checked::after{background:var(--accent-strong)}
.muster-karte input:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
/* Die ganze Karte zeigt den Tastaturfokus, nicht nur das kleine Kaestchen */
.muster-karte:has(input:focus-visible){outline:2px solid var(--accent-strong);outline-offset:3px}
.muster-karte:hover img{filter:brightness(1.04)}
.muster-karte img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-s);display:block}
.muster-karte .mk-system{font-size:var(--text-meta);line-height:var(--text-meta--line-height);
  color:var(--ink-2);margin-top:var(--s1)}
.muster-karte .mk-name{font-size:var(--text-small);font-weight:700}
.muster-gruppe{margin-top:var(--s6)}
/* h2 statt h3, damit die Gliederung unter der h1 keine Stufe ueberspringt
   (W3C-Validator 08.09.). Optisch bleibt es die Gruppenzeile. */
.muster-gruppe h2{font-family:var(--f-body);font-weight:700;font-size:var(--text-body);
  line-height:var(--text-body--line-height);letter-spacing:0}

/* Laufende Summe ueber dem Absendeknopf */
.summe{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline;
  padding:var(--s4) var(--s5);background:var(--bg);border-radius:var(--radius-s);
  border:1px solid var(--line)}
.summe b{font-size:var(--text-lead)}
.summe .hilfe{margin:0}

/* ---------- Fehler ---------- */
.feld.hat-fehler input,.feld.hat-fehler select,.feld.hat-fehler textarea,
.feld.hat-fehler .wahl input{border-color:var(--fehler)}
.feld-fehler{margin-top:var(--s2);font-size:var(--text-small);color:var(--fehler);
  font-weight:500}
.fehler-sammel{margin-top:var(--s5);
  font-size:var(--text-small);color:var(--fehler);font-weight:500}

/* ---------- Absenden und Bestaetigung ---------- */
.ang-absenden{margin-top:var(--s7);padding-top:var(--s6);
  border-top:1px solid var(--line);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s3)}
.ang-absenden .btn{padding-inline:var(--s7)}
.ang-absenden .hilfe{max-width:46ch}
.summe{max-width:46ch}
.ang-danke{padding:var(--s6) 0}
.ang-danke h2{font-size:var(--text-h2)}
.ang-danke p{margin-top:var(--s4);max-width:40ch;color:var(--ink-2)}
.ang-danke .textlink{margin-top:var(--s5)}
.ang-danke:focus{outline:none}

/* ---------- Responsiv ---------- */
/* Unter 1280 px waeren zwei Bloecke nebeneinander zu eng, ein Feldpaar kaeme
   dort unter 220 px je Feld. Sie stehen dann untereinander und bekommen die
   Trennlinie zurueck, die im Nebeneinander nur ein Deko-Strich waere. */
@media (max-width:1279px){
  .ang-spalten{grid-template-columns:1fr;gap:0}
  .ang-formular fieldset + fieldset{margin-top:var(--s8);padding-top:var(--s7);
    border-top:1px solid var(--line)}
}
/* Die Musterbestellung stapelt ihre Bloecke immer, die Dekorauswahl braucht
   die ganze Breite. Trennlinie deshalb auf jeder Breite. */
.ang-formular.gestapelt fieldset + fieldset{margin-top:var(--s8);padding-top:var(--s7);
  border-top:1px solid var(--line)}
.ang-formular.gestapelt .feld-paar{max-width:760px}
@media (max-width:1023px){
  .ang-layout{padding-top:calc(var(--header-h) + var(--s7))}
  .ang-kopf{margin-bottom:var(--s6)}
}
@media (max-width:760px){
  .ang-formular{padding:var(--s5)}
  .feld-paar{grid-template-columns:1fr;gap:0}
  /* Zwei Musterkarten je Reihe. Einspaltig waren 22 Karten sechs
     Bildschirmhoehen, zweispaltig bleibt das Bild noch 140 px breit. */
  .muster-grid{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .muster-karte{padding:var(--s1)}
  .muster-karte input{top:var(--s2);left:var(--s2)}
  /* Auf dem Handy steht der Absendeknopf mittig und ueber die volle
     Breite, links buendig wirkte er in der schmalen Spalte verloren. */
  .ang-absenden{align-items:stretch;text-align:center}
  .ang-absenden .btn{width:100%;padding-inline:var(--s5)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .feld input,.feld select,.feld textarea,.wahl input{transition:none}
}