/* * {
  outline: 2px solid rgba(255, 0, 0, 0.5);
  background-color: rgba(255, 0, 0, 0.1);
} */


/* ==========================================================================
   1 — BASIS
   ========================================================================== */

.fa-sr-only,
.fa-sr-only-focusable:not(:focus),
.sr-only,
.sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  accent-color: var(--e-global-color-primary);
}

figcaption.widget-image-caption.wp-caption-text {
  background-color: rgb(255 255 255 / 63%);
  position: absolute;
  bottom: 0;
  padding: 4px;
  font-size: 14px;
  width: 100%;
}

/* Seitenverhaeltnis der Objekt-Kacheln aus dem Loop-Template 259.
   Wird in Abschnitt 3.6 fuer das Objekt-Grid auf 3/4 uebersteuert. */
.aspect_2_3 {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}

label a { 
  color: inherit;
}
label a:hover {
  color: var(--e-global-color-primary);
}

p{
  padding: 0px 0px 8px 0px !important;
  margin: 0px 0px 8px 0px;
}


/* ==========================================================================
   2 — LOGIN / PASSWORTGESCHUETZTE SEITE
   ========================================================================== */

main#content.post-password-required {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1d1f20;
  color: #f2f1ee;
}
main#content.post-password-required .page-content {
  max-width: 100%;
}

#member_login_prompt_container {
  --login-accent: #d7a464;
  --login-text: #b8bbbd;
  --login-muted: #747d84;
  --login-rule: #464a4c;
  width: 990px;
  max-width: 90%;
  margin: auto;
  font-family: Arial, sans-serif;
}

#member_login_prompt_container .login_overline {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 16px;
  color: var(--login-muted);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

#member_login_prompt_container h1 {
  margin: 0;
  color: var(--login-accent);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.protected-page-form {
  display: flex;
  flex-direction: row;
  gap: 120px;
  margin-top: 16px;
  padding-top: 64px;
  border-top: 1px solid var(--login-rule);
}

.protected-page-form__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.protected-page-form__intro {
  max-width: 560px;
  margin: 0;
  color: var(--login-text);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.45;
}

.protected-page-form__fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.protected-page-form input,
.protected-page-form button {
  width: 350px;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
}

.protected-page-form input {
  height: auto;
  padding: 18px 20px;
  border: 1px solid #686157;
  outline: 0;
  background: transparent;
  color: #f2f1ee;
  letter-spacing: 0.04em;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.protected-page-form input::placeholder {
  color: #85898b;
  opacity: 1;
}

.protected-page-form input:focus {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 1px var(--login-accent);
}

.protected-page-form button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
  height: auto;
  padding: 18px 22px;
  border: 1px solid var(--login-accent);
  background: transparent;
  color: var(--login-accent);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.protected-page-form button:hover,
.protected-page-form button:focus-visible {
  background: var(--login-accent);
  color: #1d1f20;
}

@media (max-width: 767px) {
  /* .protected-page-form nutzt Flex, nicht Grid — grid-template-columns
     hatte hier keine Wirkung und ist durch flex-direction ersetzt. */
  .protected-page-form {
    flex-direction: column;
    gap: 34px;
  }

  .protected-page-form button {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .protected-page-form input,
  .protected-page-form button {
    transition: none;
  }
}


/* ==========================================================================
   3 — SOL NACIENTE — KOMPONENTEN

   Gilt seitenuebergreifend. Die Bausteine sind ueber den Praefix snb-
   eindeutig; die wenigen Sektions-IDs (#lage, #masterplan, #faq,
   #sicherheit, #kontakt, #whitepaper) sind pro Seite eindeutig.

   Zusammengefuehrt aus dem frueheren Theme-Custom-CSS, dem seiteneigenen
   CSS der Startseite und einem Inline-<style>-Widget. Alle drei Quellen
   sind inzwischen geleert bzw. geloescht.

   Verbleibende data-id-Selektoren betreffen Container ohne CSS-ID. Wird
   so ein Container in Elementor kopiert, vergibt Elementor eine neue ID
   und die Regel greift nicht mehr — in dem Fall entweder die ID hier
   nachziehen oder dem Container eine sprechende CSS-ID geben.
   ========================================================================== */


/* ==========================================================================
   3.1 — TOKENS
   Werte entsprechen dem Elementor-Styleset (Primaer, Text, Tertiaer).
   ========================================================================== */

:root {
  --snb-text:  #1D2022;
  --snb-prim:  #CFA16A;
  --snb-mut:   #717B83;
  --snb-line:  rgba(29,32,34,.14);
  --snb-light: #F5F4F2;
  --snb-dline: rgba(245,244,242,.2);
}


/* ==========================================================================
   3.2 — SCHRIFT
   DM Sans wird ueber Elementor geladen. Icon-Fonts sind ausgenommen,
   sonst verschwinden Font-Awesome- und eicon-Glyphen.
   ========================================================================== */

.elementor-widget:not(.elementor-widget-icon-box) *,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-heading-title {
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

.fa, .fas, .fa-solid   { font-family:"Font Awesome 6 Free","Font Awesome 5 Free"; font-weight:900 }
.far, .fa-regular      { font-family:"Font Awesome 6 Free","Font Awesome 5 Free"; font-weight:400 }
.fab, .fa-brands       { font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands" }
[class^="eicon-"],
[class*=" eicon-"]     { font-family:"eicons" }
svg text               { font-family:"DM Sans",Arial,sans-serif }


/* ==========================================================================
   3.3 — TYPOGRAFISCHE BAUSTEINE
   ========================================================================== */

/* Kleine gesperrte Versalzeile ueber den Sektionsueberschriften */
.snb-kicker .elementor-heading-title{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--snb-mut);
  font-weight:500;
}

/* Gerahmtes Label, z. B. "50 / 52 Grundstuecke verfuegbar" */
.snb-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--snb-prim);
  border:1px solid rgba(207,161,106,.55);
  padding:7px 14px;
}
body.home .snb-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  padding:7px 14px;
}
/* Sektionen auf dunklem Grund */
.snb-dark,
.snb-dark .elementor-heading-title,
.snb-dark p,
.snb-dark li{ color:var(--snb-light) }
.snb-dark .snb-kicker .elementor-heading-title{ color:rgba(245,244,242,.55) }

/* Karte mit Oberlinie */
.snb-card{ border-top:1px solid var(--snb-line); padding-top:22px }
.snb-dark .snb-card{ border-color:var(--snb-dline) }

/* Groessenangabe in den Wohnen-Karten */
.snb-size{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--snb-prim);
}

/* Fussnote unter Tabellen und Listen */
.snb-note{
  font-size:13px;
  color:var(--snb-mut);
  margin:22px 0 0;
  max-width:82ch;
}


/* ==========================================================================
   3.4 — DATENBLATT-TABELLEN
   Unter 768 px klappt die Tabelle in Karten um: Kopfzeile wird versteckt,
   jede Zeile wird ein Block.
   ========================================================================== */

/* Abgeloest durch den Blattkopf-Container in 3.13. In den beiden
   Tabellen-Textbloecken steckt noch ein leerer <div> mit dieser Klasse —
   diese Regel haelt ihn unsichtbar. Sobald die <div> entfernt sind,
   kann die Zeile weg. */
.snb-sheet__head{ display:none }

.snb-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  color:var(--snb-text);
}
.snb-table th{
  text-align:left;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--snb-mut);
  font-weight:500;
  padding:16px 20px 12px 0;
  border-bottom:1px solid var(--snb-line);
}
.snb-table td{
  padding:18px 20px 18px 0;
  border-bottom:1px solid var(--snb-line);
  vertical-align:top;
}
.snb-table td:first-child{
  color:var(--snb-mut);
  font-variant-numeric:tabular-nums;
  width:52px;
}
.snb-table td:nth-child(3){ font-weight:600;white-space:nowrap }
.snb-table td:last-child{ color:var(--snb-mut);font-size:14px }

@media (max-width:767px){
  .snb-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  }
  .snb-table,
  .snb-table tbody,
  .snb-table tr,
  .snb-table td{ display:block;width:100% }
  .snb-table tr{ border-bottom:1px solid var(--snb-line);padding:18px 0 }
  .snb-table td{ border:0;padding:2px 0 }
  .snb-table td:first-child{ font-size:11px;letter-spacing:.14em;width:auto }
  .snb-table td:nth-child(2){ font-size:19px;font-weight:600 }
  .snb-table td:nth-child(3){ font-size:17px;color:var(--snb-prim) }
}


/* ==========================================================================
   3.5 — LISTEN
   .snb-dl      — Begriff links, Wert rechts, Hairline dazwischen
   .snb-bullets — Aufzaehlung mit Strich statt Punkt, intrinsisches Raster
   ========================================================================== */

.snb-dl{ list-style:none;margin:0;padding:0 }
.snb-dl li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--snb-line);
  font-size:15px;
  color:var(--snb-text);
}
.snb-dl li span:last-child{ font-weight:600;white-space:nowrap }
.snb-dark .snb-dl li{ border-color:var(--snb-dline);color:var(--snb-light) }

.snb-bullets{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:14px 48px;
}
.snb-bullets li{
  display:flex;
  gap:12px;
  font-size:15px;
  color:var(--snb-mut);
}
.snb-bullets li::before{
  content:"";
  flex:none;
  width:18px;
  height:1px;
  background:var(--snb-prim);
  margin-top:12px;
}


/* ==========================================================================
   3.6 — OBJEKT-GRID  (Container 5bff586, DCE Dynamic Posts + Loop 259)
   Aufteilung wie der Parzellenplan: 13 Spalten, zwei Reihen, das Band
   "Camino Central", zwei weitere Reihen. Auf schmalen Viewports bleibt die
   Aufteilung erhalten und das Raster wird selbst zum Scroll-Container.
   ========================================================================== */

/* Sektionsrhythmus: Kopfzeile und Raster teilen sich das Satzmass */
#masterplan,
.elementor-element[data-id="5bff586"]{
  --content-width:1376px;
  padding-left:32px;
  padding-right:32px;
  max-width:1440px;
  margin-inline:auto;
}
#masterplan{ padding-top:clamp(72px,8vw,110px);padding-bottom:24px }
.elementor-element[data-id="5bff586"]{ padding-bottom:clamp(72px,8vw,110px) }

@media (max-width:1024px){
  #masterplan,
  .elementor-element[data-id="5bff586"]{ padding-left:24px;padding-right:24px }
}
@media (max-width:767px){
  #masterplan,
  .elementor-element[data-id="5bff586"]{ padding-left:16px;padding-right:16px }
}

/* Das Raster */
.elementor-element[data-id="5bff586"] div:has(> article){
  display:grid !important;
  grid-template-columns:repeat(13,minmax(0,1fr));
  grid-template-rows:auto auto 34px auto auto;
  gap:10px;
  align-items:stretch;
  width:100%;
}

/* Das Band zwischen Reihe 2 und 3 */
.elementor-element[data-id="5bff586"] div:has(> article)::before{
  content:"CAMINO CENTRAL";
  grid-column:1 / -1;
  grid-row:3;
  display:flex;
  align-items:center;
  padding:0 12px;
  margin:8px 0;
  border:1px dashed rgba(29,32,34,.25);
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(29,32,34,.5);
}

/* Die Karte fuellt ihre Rasterzelle.
   DCE setzt auf <article> eine prozentuale Spaltenbreite — die wird hier
   ausgehebelt, sonst schrumpft jede Kachel auf einen Bruchteil der Zelle. */
.elementor-element[data-id="5bff586"] article{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  flex:none !important;
  margin:0 !important;
  padding:0 !important;
}
.elementor-element[data-id="5bff586"] article .e-con{
  width:100% !important;
  max-width:none !important;
  aspect-ratio:3/4;
  min-height:0;
  border-radius:0;
  border-color:var(--snb-line);
  transition:border-color .16s ease;
}
.elementor-element[data-id="5bff586"] article:hover .e-con{
  border-color:var(--snb-prim);
}

/* Parzellennummer. Der Zellhintergrund traegt den Status und bleibt
   unangetastet — er kommt aus dem Loop-Template. */
.elementor-element[data-id="5bff586"] article .elementor-heading-title{
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--snb-text);
}

@media (max-width:1100px){
  .elementor-element[data-id="5bff586"] div:has(> article){
    grid-template-columns:repeat(13,minmax(76px,1fr));
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding-bottom:10px;
  }
}
@media (max-width:767px){
  .elementor-element[data-id="5bff586"] div:has(> article){
    grid-template-columns:repeat(13,minmax(50px,1fr));
    gap:6px;
    grid-template-rows:auto auto 24px auto auto;
  }
  .elementor-element[data-id="5bff586"] div:has(> article)::before{
    font-size:10px;letter-spacing:.10em;padding:0 8px;margin:5px 0;
  }
  .elementor-element[data-id="5bff586"] article .elementor-heading-title{
    font-size:11px;letter-spacing:0;
  }
  .elementor-element[data-id="5bff586"] article .e-con{ padding:4px }
}
@media (max-width:480px){
  .elementor-element[data-id="5bff586"] div:has(> article){
    grid-template-columns:repeat(13,minmax(42px,1fr));
    gap:5px;
    grid-template-rows:auto auto 20px auto auto;
  }
  .elementor-element[data-id="5bff586"] article .elementor-heading-title{ font-size:10px }
  .elementor-element[data-id="5bff586"] div:has(> article)::before{
    font-size:9px;padding:0 6px;margin:4px 0;
  }
}


/* ==========================================================================
   3.7 — LEGENDE UNTER DEM RASTER  (Container f4a421e)
   Die drei kleinen Farbfelder sind Container, keine Widgets.
   ========================================================================== */

.elementor-element[data-id="f4a421e"]{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  border-top:1px solid var(--snb-line);
  margin-top:28px;
  padding-top:16px;
}
.elementor-element[data-id="f4a421e"] .elementor-heading-title{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--snb-mut);
  font-weight:500;
}
.elementor-element[data-id="d8ca836"],
.elementor-element[data-id="7c5a29e"],
.elementor-element[data-id="04b6308"]{
  width:14px;min-width:14px;
  height:14px;min-height:14px;
  border-radius:0;
  border:1px solid var(--snb-line);
  padding:0;margin:0;
  flex:0 0 14px;
}
.elementor-element[data-id="f4a421e"] .elementor-widget-shortcode,
.elementor-element[data-id="f4a421e"] .elementor-shortcode{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--snb-mut);
  margin-left:auto;
}
@media (max-width:600px){
  .elementor-element[data-id="f4a421e"] .elementor-widget-shortcode,
  .elementor-element[data-id="f4a421e"] .elementor-shortcode{
    margin-left:0;flex-basis:100%;
  }
}


/* ==========================================================================
   3.8 — SEKTION SICHERHEIT  (#sicherheit)
   Links die Ringskizze (Widget 046aba6e), rechts die vier Ringzeilen
   (Container 2e45784e). Jede Zeile ist ein Raster aus Nummer, Titel,
   Subline und Fliesstext.
   ========================================================================== */

/* 50 / 50 */
#sicherheit .elementor-element[data-id="0cde4aa9"]{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:0 64px;
}
#sicherheit .elementor-element[data-id="046aba6e"]{
  order:-1;
  width:calc(50% - 32px);
  max-width:calc(50% - 32px);
  flex:0 0 calc(50% - 32px);
}
#sicherheit .elementor-element[data-id="2e45784e"]{
  width:calc(50% - 32px);
  max-width:calc(50% - 32px);
  flex:0 0 calc(50% - 32px);
  border-top:1px solid var(--snb-dline);
}
#sicherheit .elementor-element[data-id="046aba6e"] > .elementor-widget-container{ width:100% }

.snb-plan-wrap{ overflow-x:auto;width:100%;margin:0;padding:0 }
#sicherheit .snb-plan4{
  width:100%;
  max-width:none;
  height:auto;
  display:block;
}

/* Zeilenraster: Nr | Titel + Subline | Text */
#sicherheit .elementor-element[data-id="2e45784e"] > .elementor-element,
#sicherheit .elementor-element[data-id="2e45784e"] > .e-con-inner > .elementor-element{
  display:grid;
  grid-template-columns:44px minmax(0,.9fr) minmax(0,1.15fr);
  column-gap:28px;
  row-gap:2px;
  align-items:start;
  padding:26px 0;
  border-bottom:1px solid var(--snb-dline);
}
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget{ width:auto;max-width:none }
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(1){ grid-column:1;grid-row:1 }
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(2){ grid-column:2;grid-row:1 }
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(3){ grid-column:2;grid-row:2 }
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(4){ grid-column:3;grid-row:1 / span 2 }

#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(1) .elementor-heading-title{
  font-size:13px;
  font-weight:500;
  color:rgba(245,244,242,.5);
  font-variant-numeric:tabular-nums;
  padding-top:7px;
}
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(2) .elementor-heading-title{
  font-size:clamp(20px,1.7vw,26px);
  line-height:1.2;
  font-weight:600;
  color:var(--snb-light);
}
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(3) .elementor-heading-title{
  font-size:15px;
  line-height:1.4;
  font-weight:400;
  color:var(--snb-prim);
}
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(4),
#sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(4) p{
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  color:rgba(245,244,242,.78);
  margin:0;
  padding-top:5px;
}

@media (max-width:1024px){
  #sicherheit .elementor-element[data-id="0cde4aa9"]{ gap:44px 0 }
  #sicherheit .elementor-element[data-id="046aba6e"],
  #sicherheit .elementor-element[data-id="2e45784e"]{
    width:100%;max-width:100%;flex:0 0 100%;
  }
}
@media (max-width:767px){
  #sicherheit .elementor-element[data-id="2e45784e"] > .elementor-element,
  #sicherheit .elementor-element[data-id="2e45784e"] > .e-con-inner > .elementor-element{
    grid-template-columns:34px minmax(0,1fr);
    column-gap:16px;
    row-gap:6px;
  }
  #sicherheit .elementor-element[data-id="2e45784e"] .elementor-widget:nth-child(4){
    grid-column:2;grid-row:3;padding-top:10px;
  }
}


/* ==========================================================================
   3.9 — AUFBAU-ANIMATION DER RINGSKIZZE
   Das ausloesende Skript liegt im HTML-Widget 046aba6e direkt unter dem
   SVG. Es setzt .snb-anim-ready auf <html>, sobald JavaScript laeuft;
   .is-in kommt vom IntersectionObserver. Ohne JS bleibt die Grafik
   vollstaendig sichtbar — deshalb steht der Ausgangszustand
   ausschliesslich hinter .snb-anim-ready.
   ========================================================================== */

.snb-anim-ready #sicherheit .snb-plan4 .snb-r rect,
.snb-anim-ready #sicherheit .snb-plan4 .snb-l text,
.snb-anim-ready #sicherheit .snb-plan4 > text,
.snb-anim-ready #sicherheit .snb-plan4 .snb-plants use{
  opacity:0;
  transform:scale(.93);
  transform-origin:230px 170px;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),
             transform .5s cubic-bezier(.22,.61,.36,1);
}
.snb-anim-ready #sicherheit .snb-plan4.is-in .snb-r rect,
.snb-anim-ready #sicherheit .snb-plan4.is-in .snb-l text,
.snb-anim-ready #sicherheit .snb-plan4.is-in > text{ opacity:1;transform:none }
.snb-anim-ready #sicherheit .snb-plan4.is-in .snb-plants use{ opacity:.9;transform:none }

.snb-plan4 .snb-plants use{ transition-delay:calc(var(--i,0) * 15ms) }
.snb-plan4 .snb-l text:nth-of-type(1){ transition-delay:1.20s }
.snb-plan4 .snb-r rect:nth-of-type(1){ transition-delay:1.20s }
.snb-plan4 .snb-l text:nth-of-type(2){ transition-delay:1.32s }
.snb-plan4 .snb-r rect:nth-of-type(2){ transition-delay:1.44s }
.snb-plan4 .snb-l text:nth-of-type(3){ transition-delay:1.56s }
.snb-plan4 .snb-r rect:nth-of-type(3){ transition-delay:1.68s }
.snb-plan4 .snb-l text:nth-of-type(4){ transition-delay:1.80s }
.snb-plan4 > text{ transition-delay:1.92s }


/* ==========================================================================
   3.10 — FAQ  (#faq, Nested-Tabs mit Nested-Accordions)
   Tabs als kleine gesperrte Textlabels auf einer Hairline, aktiver Reiter
   mit sandfarbener Unterlinie. Akkordeons als Hairline-Zeilen.
   ========================================================================== */

#faq{
  --content-width:1376px;
  max-width:1440px;
  margin-inline:auto;
  padding:clamp(72px,8vw,110px) 32px;
}
@media (max-width:1024px){ #faq{ padding-left:24px;padding-right:24px } }
@media (max-width:767px){  #faq{ padding-left:16px;padding-right:16px } }

/* Tabs */
#faq .e-n-tabs-heading{
  gap:0 28px;
  margin-bottom:8px;
}
#faq .e-n-tab-title{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:14px 0 !important;
  margin:0 0 -1px 0;
  border-bottom:2px solid transparent !important;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--snb-mut) !important;
  transition:color .16s ease,border-color .16s ease;
}
#faq .e-n-tab-title:hover{ color:var(--snb-text) !important }
#faq .e-n-tab-title[aria-selected="true"]{
  color:var(--snb-text) !important;
  border-bottom-color:var(--snb-prim) !important;
}
#faq .e-n-tab-title-text{ font:inherit;letter-spacing:inherit }
#faq .e-n-tabs-content{ padding:0 }

/* Akkordeons in den Tabs */
#faq .e-n-accordion{ display:block }
#faq .e-n-accordion-item{
  border:0 !important;
  border-bottom:1px solid var(--snb-line) !important;
  border-radius:0 !important;
  background:transparent !important;
  margin:0 !important;
}
#faq .e-n-accordion-item:first-child{
  border-top:1px solid var(--snb-line) !important;
}
#faq .e-n-accordion-item-title{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:26px 48px 26px 0 !important;
  cursor:pointer;
  position:relative;
  transition:color .16s ease;
}
#faq .e-n-accordion-item-title-text{
  font-size:clamp(18px,1.6vw,24px);
  line-height:1.25;
  font-weight:600;
  color:var(--snb-text);
}
#faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{
  color:var(--snb-prim);
}
#faq .e-n-accordion-item-title-icon{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--snb-prim);
  font-size:14px;
}
#faq .e-n-accordion-item-title-icon svg,
#faq .e-n-accordion-item-title-icon i{
  fill:var(--snb-prim);
  color:var(--snb-prim);
}
#faq .e-n-accordion-item .e-con{
  padding:0 48px 28px 0 !important;
  background:transparent !important;
}
#faq .e-n-accordion-item p{
  color:var(--snb-mut);
  font-size:16px;
  line-height:1.7;
  margin:0;
  max-width:76ch;
}

@media (max-width:767px){
  #faq .e-n-tabs-heading{ gap:0 18px }
  #faq .e-n-accordion-item-title{ padding:22px 36px 22px 0 !important }
  #faq .e-n-accordion-item .e-con{ padding:0 0 22px 0 !important }
}


/* ==========================================================================
   3.11 — FORMULARE
   Gemeinsame Grundform fuer #kontakt (heller Grund) und #whitepaper
   (grauer Grund). Elementor setzt den Spaltenabstand als negative Raender
   auf .elementor-form-fields-wrapper plus Innenabstand je Feldgruppe —
   beides wird neutralisiert, damit die Formularkante exakt auf der
   Containerkante sitzt. Die Spaltenbreiten rechnen den Gap heraus.
   ========================================================================== */

#kontakt .elementor-form-fields-wrapper,
#whitepaper .elementor-form-fields-wrapper{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-left:0 !important;
  margin-right:0 !important;
  column-gap:32px;
  row-gap:0;
  width:100%;
}
#kontakt .elementor-field-group,
#whitepaper .elementor-field-group{
  padding-left:0 !important;
  padding-right:0 !important;
  margin-bottom:34px;
  position:relative;
  box-sizing:border-box;
}
#kontakt .elementor-field-group.elementor-col-100,
#whitepaper .elementor-field-group.elementor-col-100{ width:100% }
#kontakt .elementor-field-group.elementor-col-50,
#whitepaper .elementor-field-group.elementor-col-50{ width:calc(50% - 16px) }
#kontakt .elementor-field-group.elementor-col-33,
#whitepaper .elementor-field-group.elementor-col-33{ width:calc(33.333% - 21.34px) }
#kontakt .elementor-field-group.elementor-col-25,
#whitepaper .elementor-field-group.elementor-col-25{ width:calc(25% - 24px) }

#kontakt .elementor-field-group > label,
#whitepaper .elementor-field-group > label{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 6px;
  font-weight:500;
}
#kontakt .elementor-field-group .elementor-field,
#whitepaper .elementor-field-group .elementor-field{
  background:transparent;
  border:0;
  width:100%;
  border-radius:0;
  box-shadow:none;
  padding:12px 0 14px;
  font-size:16px;
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  transition:border-color .18s ease;
}
#kontakt textarea.elementor-field,
#whitepaper textarea.elementor-field{ min-height:110px;resize:vertical;line-height:1.6 }

#kontakt .elementor-field-type-submit,
#whitepaper .elementor-field-type-submit{ margin-top:8px }
#kontakt .elementor-button[type="submit"],
#whitepaper .elementor-button[type="submit"]{
  background:var(--snb-prim);
  color:var(--snb-text);
  border:0;
  border-radius:2px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  padding:20px 44px;
  min-width:220px;
  justify-content:center;
  transition:background .18s ease,color .18s ease;
}
#kontakt .elementor-message,
#whitepaper .elementor-message{ font-size:14px;margin-top:16px }

/* Zustimmungsfeld: Kaestchen und Text auf einer Linie */
#kontakt .elementor-field-type-acceptance .elementor-field-subgroup,
#whitepaper .elementor-field-type-acceptance .elementor-field-subgroup,
#kontakt .elementor-field-type-acceptance .elementor-field-option,
#whitepaper .elementor-field-type-acceptance .elementor-field-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.5;
}
#kontakt .elementor-field-type-acceptance input[type="checkbox"],
#whitepaper .elementor-field-type-acceptance input[type="checkbox"]{
  width:auto;
  margin-top:3px;
  accent-color:var(--snb-prim);
}

/* --- Kontakt: dunkle Schrift auf hellem Grund ---------------------------- */
#kontakt .elementor-field-group > label{ color:var(--snb-mut) }
#kontakt .elementor-field-group .elementor-field{
  border-bottom:1px solid rgba(29,32,34,.22);
  color:var(--snb-text);
}
#kontakt .elementor-field-group .elementor-field::placeholder{ color:rgba(29,32,34,.32) }
#kontakt .elementor-field-group .elementor-field:hover{ border-bottom-color:rgba(29,32,34,.4) }
#kontakt .elementor-field-group .elementor-field:focus{ outline:none;border-bottom-color:var(--snb-prim) }
#kontakt .elementor-mark-required .elementor-field-label:after{ color:var(--snb-prim);margin-left:3px }
#kontakt .elementor-button[type="submit"]:hover{ background:var(--snb-text);color:var(--snb-light) }
#kontakt .elementor-message.elementor-message-success{
  color:var(--snb-text);
  border-left:2px solid var(--snb-prim);
  padding-left:14px;
}

/* --- Whitepaper: helle Schrift auf grauem Grund -------------------------- */
#whitepaper .elementor-heading-title,
#whitepaper p,
#whitepaper li{ color:var(--snb-light) }
#whitepaper .snb-kicker .elementor-heading-title{ color:rgba(245,244,242,.6) }
#whitepaper .elementor-field-group > label{ color:rgba(245,244,242,.7) }
#whitepaper .elementor-field-group .elementor-field{
  border-bottom:1px solid rgba(245,244,242,.38);
  color:var(--snb-light) !important; /* uebersteuert die Feldtextfarbe #000000 im Widget */
}
#whitepaper .elementor-field-group .elementor-field::placeholder{ color:rgba(245,244,242,.45) }
#whitepaper .elementor-field-group .elementor-field:hover{ border-bottom-color:rgba(245,244,242,.6) }
#whitepaper .elementor-field-group .elementor-field:focus{ outline:none;border-bottom-color:var(--snb-prim) }
#whitepaper .elementor-mark-required .elementor-field-label:after{ color:var(--snb-prim);margin-left:3px }
#whitepaper .elementor-field-type-acceptance,
#whitepaper .elementor-field-type-acceptance a{ color:var(--snb-light) }
#whitepaper .elementor-field-type-acceptance a{ text-decoration:underline;text-underline-offset:3px }
#whitepaper .elementor-button[type="submit"]:hover{ background:var(--snb-light);color:var(--snb-text) }
#whitepaper .elementor-message{ color:var(--snb-light) }
#whitepaper .elementor-message.elementor-message-success{
  border-left:2px solid var(--snb-prim);
  padding-left:14px;
}
/* Chrome faerbt automatisch ausgefuellte Felder blau ein */
#whitepaper .elementor-field:-webkit-autofill{
  -webkit-text-fill-color:var(--snb-light);
  transition:background-color 9999s ease-in-out 0s;
}

@media (max-width:767px){
  #kontakt .elementor-form-fields-wrapper,
  #whitepaper .elementor-form-fields-wrapper{ column-gap:0 }
  #kontakt .elementor-field-group.elementor-col-50,
  #whitepaper .elementor-field-group.elementor-col-50,
  #kontakt .elementor-field-group.elementor-col-33,
  #whitepaper .elementor-field-group.elementor-col-33,
  #kontakt .elementor-field-group.elementor-col-25,
  #whitepaper .elementor-field-group.elementor-col-25{ width:100% }
  #kontakt .elementor-button[type="submit"],
  #whitepaper .elementor-button[type="submit"]{ width:100% }
}


/* ==========================================================================
   3.12 — SCHLUESSEL-WERT-ZEILEN UND BLATTKOEPFE
   Ersetzen die frueheren HTML-Konstrukte. Aufbau: Container (Reihe) mit
   zwei Heading-Widgets — beide Beschriftungen sind einzeln anklickbar
   und damit uebersetzbar.
   ========================================================================== */

/* --- Eckdaten in #konditionen (dunkler Grund) ---------------------------- */
.snb-kv,
.elementor-element[data-id="7b0f022b"]{ width:100%; gap:0 }

.snb-kv__row,
.elementor-element[data-id="7b0f022b"] > .e-con{
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  width:100%;
  padding:14px 0;
  border-bottom:1px solid var(--snb-dline);
}
.snb-kv__row .elementor-widget,
.elementor-element[data-id="7b0f022b"] > .e-con .elementor-widget{ width:auto }

.snb-kv__row .elementor-widget:first-child .elementor-heading-title,
.elementor-element[data-id="7b0f022b"] > .e-con .elementor-widget:first-child .elementor-heading-title{
  font-size:15px; font-weight:400; color:var(--snb-light);
}
.snb-kv__row .elementor-widget:last-child .elementor-heading-title,
.elementor-element[data-id="7b0f022b"] > .e-con .elementor-widget:last-child .elementor-heading-title{
  font-size:15px; font-weight:600; white-space:nowrap; color:var(--snb-light);
}
.snb-kv__note p{
  font-size:13px; color:rgba(245,244,242,.6); margin:22px 0 0; max-width:82ch;
}

/* --- Blattkopf ueber den Datenblatt-Tabellen (heller Grund) -------------- */
.snb-sheethead,
.elementor-element[data-id="82ff4cc3"],
.elementor-element[data-id="6cb07b3f"]{
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  width:100%;
  padding:0 0 16px;
  border-bottom:1px solid var(--snb-line);
}
.snb-sheethead .elementor-widget,
.elementor-element[data-id="82ff4cc3"] .elementor-widget,
.elementor-element[data-id="6cb07b3f"] .elementor-widget{ width:auto }

.snb-sheethead .elementor-heading-title,
.elementor-element[data-id="82ff4cc3"] .elementor-heading-title,
.elementor-element[data-id="6cb07b3f"] .elementor-heading-title{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--snb-mut);
  font-weight:500;
}


/* ==========================================================================
   3.13 — BEWEGUNG REDUZIEREN
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .snb-anim-ready #sicherheit .snb-plan4 *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .snb-anim-ready #sicherheit .snb-plan4 .snb-plants use{ opacity:.9 !important }
}