/* ==========================================================================
   Kontaktbereich Wonneberger & Zimmermann — Einschub in die bestehende Seite
   MXM DESIGN GmbH

   Alle Regeln stehen unter .wz-kontakt. Damit kommt dieser Block dem
   Template der bestehenden Website nicht ins Gehege und umgekehrt.
   Schriften sind die, die ohnehin auf dem Server liegen (Montserrat, Lato).
   Es wird nichts von fremden Servern nachgeladen.
   ========================================================================== */

.wz-kontakt {
  /* Einzige Stelle zum Umfärben. Soll der Block das Orange der bisherigen
     Website übernehmen, hier --wz-signal auf #ffa200 setzen. */
  --wz-stahl:       #1B4E6B;
  --wz-stahl-hell:  #2C7199;
  --wz-tief:        #123044;
  --wz-himmel:      #EAF2F7;
  --wz-linie:       #D3E2EB;

  --wz-signal:      #D9760C;
  --wz-signal-tief: #B35F07;
  --wz-signal-soft: #FDF3E6;
  --wz-signal-line: #F1DCBB;

  --wz-ink:         #10222C;
  --wz-body:        #415862;
  --wz-muted:       #6B838E;

  --wz-titel: "Montserrat", "Lato", Helvetica, Arial, sans-serif;
  --wz-text:  "Lato", Helvetica, Arial, sans-serif;

  font-family: var(--wz-text);
  font-size: 17px;
  line-height: 1.62;
  color: var(--wz-body);
  text-align: left;
  padding: 60px 0 70px;
  background: #fff;
}
.wz-kontakt *,
.wz-kontakt *::before,
.wz-kontakt *::after { box-sizing: border-box; }
/* Muss nach den Layoutregeln greifen: sonst setzt ein display:flex das
   hidden-Attribut außer Kraft und ein leerer Kasten bleibt sichtbar. */
.wz-kontakt [hidden] { display: none !important; }

.wz-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Das Template der bestehenden Website setzt Absätze auf Blocksatz und die
   ganze Seite auf zentriert. Beides holen wir für diesen Block zurück. */
.wz-kontakt p,
.wz-kontakt li,
.wz-kontakt label,
.wz-kontakt address,
.wz-kontakt h1,
.wz-kontakt h2,
.wz-kontakt h3 { text-align: left; }

.wz-kontakt p { margin: 0 0 1.05em; font-size: 17px; line-height: 1.62; }
.wz-kontakt a { color: var(--wz-stahl); text-decoration: none; }
.wz-kontakt a:hover,
.wz-kontakt a:focus { color: var(--wz-stahl-hell); text-decoration: underline; }
.wz-kontakt strong { color: var(--wz-ink); font-weight: 700; }
.wz-kontakt :focus-visible { outline: 3px solid var(--wz-signal); outline-offset: 3px; }

.wz-eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--wz-text);
  font-size: 12px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--wz-stahl); font-weight: 700; margin: 0 0 14px;
}
.wz-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--wz-signal); }

.wz-kontakt .wz-h2 {
  font-family: var(--wz-titel);
  font-size: 30px; line-height: 1.2; font-weight: 700;
  color: var(--wz-ink); margin: 0 0 .45em; letter-spacing: -.01em;
  text-transform: none;
}
.wz-kontakt .wz-h3 {
  font-family: var(--wz-titel);
  font-size: 19px; line-height: 1.25; font-weight: 700;
  color: var(--wz-ink); margin: 0 0 .7em; letter-spacing: -.005em;
  text-transform: none;
  display: flex; align-items: center; gap: .55em;
}
.wz-kontakt .wz-h3 svg { width: 22px; height: 22px; color: var(--wz-stahl); flex: none; }
.wz-sub { font-size: 16px; color: var(--wz-muted); margin: 0 0 24px; }

/* --- Zwei Spalten --------------------------------------------------------- */
.wz-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 46px; align-items: start; }
@media (max-width: 991px) { .wz-grid { grid-template-columns: 1fr; gap: 36px; } }

/* --- Anschriftenliste ----------------------------------------------------- */
.wz-liste { list-style: none; padding: 0; margin: 0; }
.wz-liste li {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--wz-linie); margin: 0;
}
.wz-liste li:last-child { border-bottom: 0; }
.wz-ico {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  background: var(--wz-himmel); color: var(--wz-stahl);
  display: flex; align-items: center; justify-content: center;
}
.wz-ico svg { width: 20px; height: 20px; }
.wz-label {
  display: block; font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wz-muted); margin-bottom: 3px; font-weight: 400;
}
.wz-wert { color: var(--wz-ink); font-weight: 700; font-size: 17px; line-height: 1.4; }
.wz-wert span { font-weight: 400; font-size: 16px; color: var(--wz-body); }
.wz-wert a { font-weight: 700; }

/* --- Weiße Karte ---------------------------------------------------------- */
.wz-karte {
  background: #fff; border: 1px solid var(--wz-linie); border-radius: 12px;
  padding: 28px 30px 30px; margin-top: 28px;
  box-shadow: 0 2px 6px rgba(12,36,51,.05), 0 14px 38px rgba(12,36,51,.07);
}

/* --- Ampel ---------------------------------------------------------------- */
.wz-status {
  display: inline-flex; align-items: center; gap: .55em;
  font-weight: 700; color: var(--wz-ink); font-size: 16px; margin: 0 0 18px;
}
.wz-status::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--wz-muted); flex: none;
}
.wz-status.ist-offen::before { background: #2E9E67; box-shadow: 0 0 0 4px rgba(46,158,103,.2); }
.wz-status.ist-zu::before    { background: var(--wz-signal); box-shadow: 0 0 0 4px rgba(217,118,12,.2); }

/* --- Bürozeiten ----------------------------------------------------------- */
.wz-kontakt table.wz-zeiten {
  width: 100%; border-collapse: collapse; margin: 0; background: none;
}
.wz-kontakt .wz-zeiten th {
  text-align: left; font-family: var(--wz-text);
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wz-muted); font-weight: 700;
  padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--wz-linie); background: none;
}
.wz-kontakt .wz-zeiten th:last-child { text-align: right; }
.wz-kontakt .wz-zeiten td {
  padding: 14px 0; border: 0; border-bottom: 1px solid #F1EFEA;
  vertical-align: top; background: none; font-size: 16px;
}
.wz-kontakt .wz-zeiten tr:last-child td { border-bottom: 0; }
.wz-kontakt .wz-zeiten .wz-tag { font-weight: 700; color: var(--wz-ink); width: 52%; }
.wz-kontakt .wz-zeiten .wz-zeit {
  text-align: right; font-variant-numeric: tabular-nums; color: var(--wz-ink);
}
.wz-kontakt .wz-zeiten .wz-zeit em { font-style: normal; color: var(--wz-muted); }

.wz-kontakt .wz-zeiten tr.ist-heute td { background: var(--wz-himmel); }
.wz-kontakt .wz-zeiten tr.ist-heute .wz-tag::after {
  content: "heute"; display: inline-block; margin-left: .6em;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--wz-stahl); padding: 2px 8px; border-radius: 100px;
  vertical-align: middle;
}
.wz-kontakt .wz-zeiten tr.ist-geschlossen td { background: var(--wz-signal-soft); }
.wz-kontakt .wz-zeiten tr.ist-geschlossen .wz-zeit {
  color: var(--wz-muted); text-decoration: line-through;
}
.wz-kontakt .wz-zeiten tr.ist-geschlossen .wz-tag::after {
  content: "heute geschlossen"; display: inline-block; margin-left: .6em;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--wz-signal); padding: 2px 8px; border-radius: 100px;
  vertical-align: middle;
}

.wz-notiz {
  margin-top: 22px; padding: 16px 18px; background: var(--wz-himmel);
  border: 1px solid var(--wz-linie); border-radius: 10px;
}
.wz-notiz.ist-warnung { background: var(--wz-signal-soft); border-color: var(--wz-signal-line); }
.wz-kontakt .wz-notiz p { margin: 0; font-size: 15.5px; }
.wz-kontakt .wz-notiz p + p { margin-top: 10px; }

/* --- Hinweiskasten -------------------------------------------------------- */
.wz-hinweis {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 22px;
  background: var(--wz-signal-soft); border: 1px solid var(--wz-signal-line);
  border-radius: 10px; padding: 18px 20px;
}
.wz-hinweis svg { width: 22px; height: 22px; color: var(--wz-signal); flex: none; margin-top: 3px; }
.wz-kontakt .wz-hinweis p { margin: 0; font-size: 15.5px; }
.wz-hinweis strong { display: block; margin-bottom: 2px; }

/* --- Formular ------------------------------------------------------------- */
.wz-form-karte {
  background: #fff; border: 1px solid var(--wz-linie); border-radius: 12px;
  padding: 32px 34px 34px;
  box-shadow: 0 2px 6px rgba(12,36,51,.05), 0 14px 38px rgba(12,36,51,.07);
}
@media (max-width: 575px) { .wz-form-karte, .wz-karte { padding: 24px 20px 26px; } }

.wz-kontakt .wz-feld { margin-bottom: 18px; }
.wz-kontakt .wz-feld label {
  display: block; font-family: var(--wz-text); font-size: 15px; font-weight: 700;
  color: var(--wz-ink); margin: 0 0 7px; text-transform: none; letter-spacing: 0;
}
.wz-req { color: var(--wz-signal); }
.wz-kontakt .wz-feld input,
.wz-kontakt .wz-feld textarea,
.wz-kontakt .wz-feld select {
  display: block; width: 100%; height: auto;
  font-family: var(--wz-text); font-size: 16px; line-height: 1.5; color: var(--wz-ink);
  padding: 12px 15px; border: 1.5px solid var(--wz-linie); border-radius: 8px;
  background: #fff; box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
.wz-kontakt .wz-feld select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B838E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 42px;
}
.wz-kontakt .wz-feld input:focus,
.wz-kontakt .wz-feld textarea:focus,
.wz-kontakt .wz-feld select:focus {
  outline: none; border-color: var(--wz-stahl-hell);
  box-shadow: 0 0 0 4px rgba(44,113,153,.14);
}
.wz-kontakt .wz-feld textarea { min-height: 150px; resize: vertical; }
.wz-feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 575px) { .wz-feld-reihe { grid-template-columns: 1fr; gap: 0; } }

.wz-check { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 22px; }
.wz-kontakt .wz-check input {
  width: 19px; height: 19px; flex: none; margin: 3px 0 0; accent-color: var(--wz-stahl);
}
.wz-kontakt .wz-check label {
  font-size: 15px; font-weight: 400; color: var(--wz-body); margin: 0; line-height: 1.5;
}

.wz-kontakt .wz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  width: 100%; font-family: var(--wz-text); font-size: 17px; font-weight: 700;
  padding: 15px 26px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--wz-signal); color: #fff; text-transform: none;
  box-shadow: 0 6px 18px rgba(217,118,12,.26);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.wz-kontakt .wz-btn:hover,
.wz-kontakt .wz-btn:focus {
  background: var(--wz-signal-tief); color: #fff; transform: translateY(-2px);
  text-decoration: none;
}
.wz-kontakt .wz-btn[disabled] { opacity: .6; transform: none; cursor: default; }

.wz-meldung {
  display: none; margin-top: 18px; padding: 16px 20px; border-radius: 10px;
  background: var(--wz-himmel); border: 1px solid var(--wz-linie);
  font-size: 16px; color: var(--wz-tief);
}
.wz-meldung.ist-sichtbar { display: block; }
.wz-meldung.ist-fehler {
  background: var(--wz-signal-soft); border-color: var(--wz-signal-line);
  color: var(--wz-signal-tief);
}
.wz-kontakt .wz-hint { font-size: 14.5px; color: var(--wz-muted); margin: 16px 0 0; }

/* Honigtopf gegen Spam: für Menschen unsichtbar, für Roboter sichtbar.
   Bewusst nicht display:none, das erkennen viele Spam-Programme. */
.wz-honigtopf {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}