/* =========================================
   Kontaktseite – Überschrift zentrieren
   ========================================= */

/* Roter Balken "Kontaktformular · Ankaufspreis" und seine Überschrift zentrieren */
body#page-1324474 .n.module-type-header,
body#page-1324474 .n.module-type-header h1,
body#page-1324474 .n.module-type-header h2 {
  text-align: center !important;
}

/* Dekorations-Span im Header (damit der Text wirklich mittig sitzt) */
body#page-1324474 .n.module-type-header .diyfeDecoration {
  display: inline-block;
}
/* ✨ Anti-Spam CSS für Honeypot – komplett unsichtbar, Google-konform */
.hp-wrapper,
input[name="website"] {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================
   Kontaktformular - Lesbarkeit & stabiler Aufbau
   Für: #kontakt-formular-neu (kontakt.css)
   ========================= */

/* Basisvariablen nur für dieses Modul */
#kontakt-formular-neu {
  --k-font: "Arial", "Helvetica", sans-serif;
  --k-color: #12343B;
  --k-muted: #666666;
  --k-accent: #ff6a00;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grundschrift: flüssig skalierend, lesbar */
#kontakt-formular-neu,
#kontakt-formular-neu * {
  font-family: var(--k-font) !important;
  color: var(--k-color) !important;
  /* body text size: 13-16px depending on viewport */
  font-size: clamp(13px, 1.8vw, 15px) !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
}

/* Grid: immer 2 Spalten (wie Desktop) - Wunsch: mobile Darstellung bleibt optisch Desktop */
#kontakt-formular-neu .mar-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 20px !important;
  row-gap: 14px !important;
}

/* span-2 bleibt volle Breite */
#kontakt-formular-neu .span-2 { grid-column: 1 / -1 !important; }

/* Labels / Inputs: klar und gleichmäßig */
#kontakt-formular-neu .mar-label {
  font-size: clamp(12px, 1.5vw, 13px) !important;
  color: var(--k-muted) !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Eingabefelder gut lesbar und stabil in der Höhe */
#kontakt-formular-neu .mar-input,
#kontakt-formular-neu .mar-select,
#kontakt-formular-neu .mar-textarea {
  font-size: clamp(13px, 1.6vw, 15px) !important;
  line-height: 1.4 !important;
  padding: 10px 12px !important;
  height: auto !important;
  min-height: 42px !important;
  border: 1px solid #cfcfcf !important;
  background: #ffffff !important;
  width: 100% !important;
  display: block !important;
  border-radius: 0 !important;
  resize: vertical;
}

/* Textarea: größer aber lesbar */
#kontakt-formular-neu .mar-textarea {
  min-height: 160px !important;
  max-height: 520px !important;
  padding: 12px !important;
}

/* Buttons */
#kontakt-formular-neu .mar-btn {
  font-size: clamp(13px, 1.6vw, 15px) !important;
  padding: 12px 18px !important;
}

/* Upload-Box (kleine Feinheiten) */
#kontakt-formular-neu .mar-upload { background: #f6f7f8 !important; padding: 12px !important; border: 1px dashed #d7d7d7 !important; }
#kontakt-formular-neu .mar-files .mar-file { align-items:center; gap:8px; }

/* Hinweis-Block: einheitliche, flüssige Typografie und zweispaltige Listendarstellung */
#kontakt-formular-neu .mar-hinweisblock {
  background: #f5f8fa !important;
  padding: 14px 18px !important;
  border: 1px solid #d5e1e6 !important;
  border-radius: 6px !important;
  margin-bottom: 18px !important;
  color: var(--k-color) !important;
  font-size: clamp(13px, 1.8vw, 15px) !important;
  line-height: 1.45 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Hinweis Titel / Sub */
#kontakt-formular-neu .mar-hinweisblock .mar-hint-title {
  font-size: clamp(18px, 3.2vw, 22px) !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
#kontakt-formular-neu .mar-hinweisblock .mar-hint-sub {
  font-size: clamp(12px, 1.6vw, 13px) !important;
  color: var(--k-muted) !important;
  display:block !important;
  margin-bottom:8px !important;
}

/* Label-Value in Liste: linke Spalte fix, rechte flexibel (verhält sich flüssig auf schmalen Bildschirmen) */
#kontakt-formular-neu .mar-hinweisblock ul { margin:10px 0 0 0 !important; padding-left: 18px !important; }
#kontakt-formular-neu .mar-hinweisblock li { margin-bottom:6px !important; display:block !important; }
#kontakt-formular-neu .mar-hinweisblock .mar-hint-label {
  display:inline-block !important;
  vertical-align:top !important;
  width: 28% !important;
  max-width:160px !important;
  padding-right:8px !important;
  font-weight:700 !important;
}
#kontakt-formular-neu .mar-hinweisblock .mar-hint-body {
  display:inline-block !important;
  vertical-align:top !important;
  width: calc(72% - 8px) !important;
  min-width:0 !important;
  word-wrap:break-word !important;
  hyphens:auto !important;
}

/* Starke Hervorhebungen nicht größer setzen (verhindert unruhige Größen) */
#kontakt-formular-neu .mar-hinweisblock strong,
#kontakt-formular-neu .mar-hinweisblock b {
  font-size: inherit !important;
  font-weight: 800 !important;
}

/* Verhindere Inline style Min-Widths, die oft Probleme machen */
#kontakt-formular-neu [style*="min-width"] {
  min-width: 0 !important;
}

/* Sicherheitsnetz: Inputs dürfen nicht aus dem Grid herausragen */
#kontakt-formular-neu .mar-grid > * { min-width: 0 !important; }

/* kleine responsiven Korrekturhinweise (falls extreme schmale Geräte) */
@media (max-width: 360px) {
  /* kleine Telefone: labels etwas kleiner, damit Text nicht bricht */
  #kontakt-formular-neu .mar-label { font-size: 12px !important; }
  #kontakt-formular-neu .mar-hinweisblock .mar-hint-label { width: 30% !important; max-width: 120px !important; }
}

/* --- Ende Kontakt CSS Snippet --- */
/* ===============================
   Kontaktformular — große Überschrift
   Fügt responsiv skalierende, gut lesbare Headline hinzu
   Ziel: #kontakt-formular-neu h2 > span
   =============================== */

#kontakt-formular-neu h2 { 
  text-align: center; 
  margin: 0 0 18px !important; /* etwas mehr Abstand nach unten */
}

/* Ziel-Span (überschreibt Inline-Styles) */
#kontakt-formular-neu h2 > span {
  display: inline-block !important;
  background: #FB3126 !important;       /* vorhandene Farbe beibehalten */
  color: #fff !important;
  /* responsive Schriftgröße: min 18px, max 34px, mittlerer Wert abhängig von Viewport */
  font-size: clamp(18px, 4.2vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;

  /* mehr „Presence“ durch größere Polsterung */
  padding: clamp(10px, 2.2vw, 22px) clamp(14px, 3.5vw, 40px) !important;

  border-radius: 10px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.07) !important;
  border: 0 !important;
  vertical-align: middle !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Optional: auf sehr kleinen Bildschirmen etwas kompakter */
@media (max-width: 340px) {
  #kontakt-formular-neu h2 > span {
    font-size: clamp(16px, 5vw, 22px) !important;
    padding: 8px 12px !important;
  }
}
/* ===============================
   Kontaktformular — große Überschrift
   Fügt responsiv skalierende, gut lesbare Headline hinzu
   Ziel: #kontakt-formular-neu h2 > span
   =============================== */

#kontakt-formular-neu h2 { 
  text-align: center; 
  margin: 0 0 18px !important; /* etwas mehr Abstand nach unten */
}

/* Ziel-Span (überschreibt Inline-Styles) */
#kontakt-formular-neu h2 > span {
  display: inline-block !important;
  background: #f87805 !important;       /* vorhandene Farbe beibehalten */
  color: #fff !important;
  /* responsive Schriftgröße: min 16px, max 26px, mittlerer Wert abhängig von Viewport */
  font-size: clamp(16px, 4.2vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;

  /* mehr „Presence“ durch größere Polsterung */
  padding: clamp(10px, 2.2vw, 22px) clamp(14px, 3.5vw, 40px) !important;

  border-radius: 10px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.07) !important;
  border: 0 !important;
  vertical-align: middle !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Optional: auf sehr kleinen Bildschirmen etwas kompakter */
@media (max-width: 340px) {
  #kontakt-formular-neu h2 > span {
    font-size: clamp(16px, 5vw, 22px) !important;
    padding: 8px 12px !important;
  }
}
/* ==============================
   Kontaktseite: roten Hinweis-Block in linker Sidebar ausblenden
   Scoped to body#page-1324474 (nur diese Seite)
   ============================== */

/* 1) Prefered: hide the whole module that contains the red span (modern browsers) */
body#page-1324474 .diywebSecondary .sortable-matrix .module-type-text:has(span[style*="color:#F44336"]) {
  display: none !important;
}

/* 2) Fallback: hide the exact red inline spans/elements (in case :has() unsupported)
   plus hide their immediate <p> wrapper to remove blank lines */
body#page-1324474 .diywebSecondary span[style*="color:#F44336"],
body#page-1324474 .diywebSecondary span[style*="color:#f44336"],
body#page-1324474 .diywebSecondary em[style*="color:#F44336"],
body#page-1324474 .diywebSecondary strong[style*="color:#F44336"] {
  display: none !important;
}

/* hide parent paragraph if it contains the red span (best-effort) */
body#page-1324474 .diywebSecondary p:has(span[style*="color:#F44336"]) {
  display: none !important;
}

/* 3) Remove any now-empty module wrappers to avoid leftover gaps */
body#page-1324474 .diywebSecondary .module-type-text:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Extra safety: if the left-column module has a specific matrix id, hide its last red block
   (only applies to the sidebar matrix used on your page) */
body#page-1324474 #matrix_1339607 .module-type-text:last-of-type {
  /* remove only if it visually matches the small red note — tweak/remove if undesired */
  display: none !important;
}
/* ---------------------------------------------
   Kontaktseite: Überschrift "Wir senden Ihnen..." verkleinern
   Scoped auf page 1324474 & das matrix-Element
   --------------------------------------------- */

body#page-1324474 #matrix_1339617 .module-type-header h1,
body#page-1324474 #matrix_1339617 .module-type-header h1 span.diyfeDecoration {
  /* responsive, lesbare Größe (anpassen nach Wunsch) */
  font-size: clamp(18px, 2.5vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #555 !important;                /* etwas dezenter als reines schwarz */
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* Falls die Überschrift in zwei <h1>s steht (erste/zweite Zeile),
   sorgen wir dafür, dass beide gleich behandelt werden */
body#page-1324474 #matrix_1339617 .module-type-header + .module-type-header h1,
body#page-1324474 #matrix_1339617 .module-type-header + .module-type-header h1 span.diyfeDecoration {
  font-size: clamp(18px, 2.5vw, 28px) !important;
  line-height: 1.15 !important;
  margin-top: 4px !important;
}

/* Optional: falls die Seite starke Inline-Styles verwendet, sorgen wir dafür,
   dass die Überschrift nicht riesig skaliert beim Vergrößern (sicherer Max) */
@media (min-width: 1600px) {
  body#page-1324474 #matrix_1339617 .module-type-header h1,
  body#page-1324474 #matrix_1339617 .module-type-header h1 span.diyfeDecoration {
    font-size: 32px !important;
  }
}