/* ================================================================
   kon.css  -  Gemeinsame Styles fuer Kontakt- und Bestellseiten
   Eingebunden von: /cont/kontakt.html, /cont/bestellung.html,
                    /cont/bestellt.html, /cont/gesendet.html
   ================================================================ */


/* ----------------------------------------------------------------
   1. FORMULAR-CONTAINER
   ---------------------------------------------------------------- */
.formular {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
}


/* ----------------------------------------------------------------
   2. EINZELFELD
   ---------------------------------------------------------------- */
.feld {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.feld label {
  font-size: 0.82em;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.feld label .pflicht {
  opacity: 0.55;
  margin-left: 0.2em;
}


/* ----------------------------------------------------------------
   3. EINGABEFELDER
   ---------------------------------------------------------------- */
.feld input,
.feld textarea,
.feld select {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95em;
  padding: 0.55em 0.7em;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}

.feld textarea {
  resize: vertical;
}

.feld select {
  -webkit-appearance: none;
  appearance: none;
}

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  border-color: var(--muted);
}


/* ----------------------------------------------------------------
   4. SELECT-PFEIL
   ---------------------------------------------------------------- */
.feld-select-wrap {
  position: relative;
}

.feld-select-wrap::after {
  content: '\25BE';
  position: absolute;
  right: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 0.85em;
}


/* ----------------------------------------------------------------
   5. DSGVO-HINWEIS
   ---------------------------------------------------------------- */
.dsgvo-hinweis {
  font-size: 0.78em;
  color: var(--muted);
  line-height: 1.55;
  border-top: 1px solid var(--border);
  padding-top: 0.8em;
}

.dsgvo-hinweis a {
  color: var(--muted);
  text-decoration: underline;
}

.dsgvo-hinweis a:hover {
  color: var(--fg);
}


/* ----------------------------------------------------------------
   6. STUECK-INFOKASTEN  (kontakt.html)
   ---------------------------------------------------------------- */
.stueck-info {
  border: 1px solid var(--border);
  padding: 0.9em 1.1em;
  margin-bottom: 1.8em;
  font-size: 0.88em;
  color: var(--muted);
  line-height: 1.5;
}

.stueck-info strong {
  color: var(--fg);
  font-weight: 500;
}


/* ----------------------------------------------------------------
   7. SENDEN-BUTTON  (kontakt.html)
   ---------------------------------------------------------------- */
.senden-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  padding: 0.6em 1.6em;
  cursor: pointer;
  transition: border-color 0.2s;
  margin-top: 0.4em;
}

.senden-btn:hover {
  border-color: var(--fg);
}


/* ----------------------------------------------------------------
   8. HINWEISTEXT OHNE PARAMETER  (bestellung.html)
   ---------------------------------------------------------------- */
.kein-param {
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.95em;
}


/* ----------------------------------------------------------------
   9. VORGANG-KASTEN  (bestellung.html)
   ---------------------------------------------------------------- */
.vorgang-kasten {
  border: 1px solid var(--border);
  padding: 1.1em 1.3em;
  margin-bottom: 2em;
  font-size: 0.88em;
  line-height: 1.65;
  color: var(--muted);
}

.vorgang-kasten .vgnr {
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0.04em;
}

.vertragstext {
  margin-top: 0.8em;
  padding-left: 0.8em;
  border-left: 2px solid var(--border);
  color: var(--fg);
  font-size: 0.95em;
  line-height: 1.6;
}


/* ----------------------------------------------------------------
   10. ABSCHNITT-TITEL  (bestellung.html)
   ---------------------------------------------------------------- */
.abschnitt-titel {
  font-size: 0.78em;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 1.8em;
  margin-bottom: 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border);
}


/* ----------------------------------------------------------------
   11. FELD-REIHE  (bestellung.html)
   ---------------------------------------------------------------- */
.feld-reihe {
  display: flex;
  gap: 0.8em;
}

.feld-reihe .feld { flex: 1; }
.feld-reihe .feld.plz { flex: 0 0 6em; }


/* ----------------------------------------------------------------
   12. CHECKBOX-ZEILEN  (bestellung.html)
   ---------------------------------------------------------------- */
.check-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--muted);
}

.check-zeile input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.2em;
  accent-color: var(--fg);
  width: 1em;
  height: 1em;
  cursor: pointer;
}

.check-zeile a {
  color: var(--muted);
  text-decoration: underline;
}

.check-zeile a:hover { color: var(--fg); }


/* ----------------------------------------------------------------
   13. LIEFERADRESSE-BLOCK  (bestellung.html)
   ---------------------------------------------------------------- */
#lieferadresse-block {
  display: none;
  flex-direction: column;
  gap: 1.1em;
  padding-left: 0.5em;
  border-left: 2px solid var(--border);
  margin-top: 0.3em;
}

#lieferadresse-block.sichtbar {
  display: flex;
}


/* ----------------------------------------------------------------
   14. BESTELL-BUTTON  (bestellung.html)
   ---------------------------------------------------------------- */
.bestell-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  padding: 0.7em 1.8em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-top: 0.6em;
}

.bestell-btn:hover {
  background: var(--fg);
  color: var(--bg);
}


/* ----------------------------------------------------------------
   15. BESTAETIGUNGS-TEXT  (bestellt.html, gesendet.html)
   ---------------------------------------------------------------- */
.bestaetigung {
  line-height: 1.75;
  font-size: 0.95em;
  color: var(--muted);
}

.bestaetigung strong {
  color: var(--fg);
  font-weight: 500;
}

.bestaetigung a {
  color: var(--muted);
  text-decoration: underline;
}

.bestaetigung a:hover {
  color: var(--fg);
}