/* Grundlayout Kontaktseiten (beide) */
#kontakt-scope { background:#f0f0f0; color:#333; }
#kontakt-scope .container { max-width:1499px; margin:auto; padding:2rem; }
#kontakt-scope .major h2 { font-weight:700; font-size:2rem; color:#222; }
#kontakt-scope .major p  { font-size:1.1rem; color:#555; }

/* Switcher */
#kontakt-scope .switcher { display:flex; flex-direction:column; gap:12px; padding:10px 16px; margin-bottom:12px;
  background:#fff; border-radius:12px; box-shadow:0 0 10px rgba(0,0,0,.1); position:relative; overflow:hidden; }
#kontakt-scope .switcher-row { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
#kontakt-scope .seg-btn { display:flex; align-items:center; justify-content:center; height:44px; box-sizing:border-box;
  border-radius:12px; padding:.45rem .6rem; font-weight:800; font-size:.92rem; letter-spacing:.02em; cursor:pointer; transition:.2s; margin-top:13px; }
#kontakt-scope .seg-left  { flex:1; background:#f2f5f9; border:1px solid #e2e8f0; color:#1f2937 !important; }
#kontakt-scope .seg-right { flex:1; background:#f7f9fc; border:1px solid #e6ebf1; color:#374151 !important; }

/* iOS-Toggle */
#kontakt-scope .ios-toggle-btn { flex:0 0 60px; width:60px; height:32px; border:0; background:#e9edf2;
  box-shadow:inset 0 0 0 1px #e1e6ec; border-radius:999px; display:flex; align-items:center; justify-content:flex-start;
  padding:3px; cursor:default; z-index:2; }
#kontakt-scope .ios-toggle-btn .ios-knob { width:26px; height:26px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.15); display:block; transform:translateX(0); transition:transform .2s ease; }

/* Aktive Zustände */
#mode-simple:checked ~ .switcher .seg-left,
#mode-offer:checked  ~ .switcher .seg-right {
  background:#e7f1ff !important; color:#0b5ed7 !important; border-color:#0d6efd !important;
  box-shadow:inset 0 0 0 2px rgba(13,110,253,.18);
}
#mode-offer:checked ~ .switcher .ios-toggle-btn{
  background:#34c759 !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05) !important;
}
#mode-offer:checked ~ .switcher .ios-toggle-btn .ios-knob{ transform:translateX(28px) !important; }

/* CTA-Layouts */
#kontakt-scope .switcher-cta{ width:100%; gap:12px; box-sizing:border-box; }
#kontakt-scope .cta--offer{ display:grid; grid-template-columns:1fr 1fr; }
#kontakt-scope .cta--simple{ display:none; grid-template-columns:1fr; }
@media (max-width:1024px){ #kontakt-scope .cta--offer{ grid-template-columns:1fr; } }
#mode-offer:checked  ~ .switcher .cta--offer { display:grid !important; }
#mode-offer:checked  ~ .switcher .cta--simple{ display:none !important; }
#mode-simple:checked ~ .switcher .cta--offer { display:none !important; }
#mode-simple:checked ~ .switcher .cta--simple{ display:grid !important; }
/* CTA-Buttons wie Primär */
#kontakt-scope .switcher-cta a.button{ min-width:0; white-space:normal!important; text-align:center; max-width:100%;
  background:var(--ersp-primary, #0d6efd); color:#fff !important; border:0; }

/* Links/Labels */
#kontakt-scope label a{color:#444; text-decoration:underline; transition:color .2s ease;}
#kontakt-scope label a:hover{color:#222 !important;}
#kontakt-scope .required::after{content:" *"; color:#e11d48;}

/* Formularumschaltung */
#mode-offer:checked ~ #contact-form{display:none !important;}
#mode-offer:checked ~ #form-offer{display:flex !important;}
#mode-simple:checked ~ #contact-form{display:flex !important;}
#mode-simple:checked ~ #form-offer{display:none !important;}

/* Form Basics */
#contact-form, #form-offer{
  background:#fff; padding:1.5rem; border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,.1); display:flex; flex-direction:column;
}
#kontakt-scope input, #kontakt-scope textarea, #kontakt-scope select{
  width:100%; padding:.5rem; border:1px solid #ccc; border-radius:4px;
  background:#fafafa; color:#222; font-size:1rem; margin-bottom:1rem; }
#kontakt-scope textarea{ resize:vertical; }
#kontakt-scope input[type=checkbox]{ width:18px; height:18px; cursor:pointer; flex-shrink:0; }
#kontakt-scope .consent-row{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; min-height:42px; margin:.25rem 0 1.25rem; }
#kontakt-scope .form-status p{margin:.25rem 0 0; font-weight:600;}
.submit-btn{ display:inline-flex; align-items:center; justify-content:center; background:#007acc; color:#fff; border:none; border-radius:4px; cursor:pointer; height:40px; padding:0 1.5rem; min-width:180px; font-weight:700; transition:background-color .3s;}
.submit-btn:hover{ background-color:#005fa3 !important; color:#fff !important; }

/* Multi-Select Dropdown (Checkboxen als Panel) */
.ms-dropdown { position:relative; }
.ms-toggle {
  display:inline-flex; align-items:center; justify-content:space-between;
  width:100%; min-height:40px; padding:.5rem .75rem;
  background:#fafafa; border:1px solid #ccc; border-radius:6px; cursor:pointer; font-weight:600;
}
.ms-panel {
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:10;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:.5rem; max-height:260px; overflow:auto;
}
.ms-option { display:flex; align-items:center; gap:.45rem; padding:.35rem .25rem; cursor:pointer; }
.ms-option:hover { background:#f8fafc; }
.ms-chips { margin:.35rem 0 1rem; display:flex; flex-wrap:wrap; gap:.25rem .35rem; }
.ms-chip { display:inline-flex; align-items:center; padding:.15rem .5rem; background:#eef2ff; color:#3730a3; border-radius:999px; font-size:.85rem; }

/* Nur mobil anzeigen */
.mobile-only { display: none !important; }
.mobile-only.block { display: none !important; }

@media (max-width: 820px), (hover:none) and (pointer:coarse) {
  .mobile-only { display: inline-flex !important; }
  .mobile-only.block { display: block !important; }
}

/* Scroll-Lock wenn Modal offen */
.no-scroll { overflow: hidden !important; }