/*
 * Southvision: Stilrichtungen und Bauteil-Stile
 * Southvision 1.2, P2 B1, nur geladen, wenn eine Stilrichtung oder ein Bauteil-Stil gewählt ist.
 *
 * Zweck: Formsprache, Schatten, Rahmen, Knöpfe, Slider-Pfeile, Karten, Trenner, Kopf, Fuß und
 * Bewegung als Body-Klassen. Portiert aus der Stil-Werkstatt (werkzeuge/werkstatt-hilfen/sv-werkstatt-stil.php),
 * Präfix sw zu sv. Keine Farben und keine Schriften: Farben kommen von der Instanz (dynamic.css) und
 * ab B2 aus den Farbrollen (--sv-farbe-*), Schriften ab B3.
 *
 * Aufbau: 1 Grundwerte und Masken, 2 Bauteil-Stufen (setzen Tokens und legen die Theme-Variablen um),
 * 3 Tokens je Stilrichtung, 4 Regeln je Bauteil, 5 Feinheiten je Stilrichtung, 6 Bewegung.
 * Bauteil-Regeln hängen an der Bauteil-Klasse (body.sv-schatten-fein ...), nicht an sv-stil-aktiv,
 * damit eine Instanz auch einzelne Bauteile wählen kann. Inline-Werte der Blöcke gewinnen immer:
 * hier stehen nur Variablen am body (oder am Abschnitt) und Regeln ohne !important.
 *
 * Rückbau: Datei löschen und das Laden in der Theme-Einbindung entfernen; die Body-Klassen wirken dann nicht mehr.
 */

/* ===== 1 Grundwerte: Farbrollen mit Rückfall auf die Theme-Variablen, Masken ===== */
body:is([class*="sv-stil-"],[class*="sv-form-"],[class*="sv-schatten-"],[class*="sv-knopf-"],[class*="sv-pfeil-"],[class*="sv-karte-"],[class*="sv-trenner-"],[class*="sv-kopf-"],[class*="sv-fuss-"],[class*="sv-bewegung-"],.sv-bild-zoom){
--sv-f-rand:var(--sv-farbe-rand,color-mix(in srgb,var(--textColor) 16%,transparent));
--sv-f-wechsel:var(--sv-farbe-wechsel,color-mix(in srgb,var(--bodyBackgroundColor) 94%,var(--textColor)));
--sv-f-flaeche:var(--sv-farbe-flaeche,var(--bodyBackgroundColor));
--sv-f-kontrast:var(--sv-farbe-kontrast,var(--textColor));
--sv-f-invers:var(--sv-farbe-textinvers,#fff);
--sv-f-akzent:var(--sv-farbe-akzent,var(--ctaBtnStandardBg));
--sv-f-textakzent:var(--sv-farbe-textakzent,var(--ctaBtnStandardTextColor));
--sv-dauer-farbe:.15s;
--sv-maske-chevron-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
--sv-maske-chevron-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
--sv-maske-linie-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 12H3M11 4l-8 8 8 8'/%3E%3C/svg%3E");
--sv-maske-linie-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h59M53 4l8 8-8 8'/%3E%3C/svg%3E")}

body[class*="sv-trenner-"]{
--sv-maske-welle-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C200 14 400 14 600 50 C800 86 1000 90 1200 40 L1200 100 L0 100 Z'/%3E%3C/svg%3E");
--sv-maske-welle-u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C200 14 400 14 600 50 C800 86 1000 90 1200 40 L1200 100 L0 100 Z' transform='matrix(1 0 0 -1 0 100)'/%3E%3C/svg%3E");
--sv-maske-kante-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L1200 18 L1200 100 Z'/%3E%3C/svg%3E");
--sv-maske-kante-u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 L1200 18 L1200 100 Z' transform='matrix(1 0 0 -1 0 100)'/%3E%3C/svg%3E");
--sv-maske-bogen-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q600 -60 1200 100 Z'/%3E%3C/svg%3E");
--sv-maske-bogen-u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q600 -60 1200 100 Z' transform='matrix(1 0 0 -1 0 100)'/%3E%3C/svg%3E");
--sv-maske-zacken-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L20 0 L40 20 Z'/%3E%3C/svg%3E");
--sv-maske-zacken-u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L20 0 L40 20 Z' transform='matrix(1 0 0 -1 0 20)'/%3E%3C/svg%3E")}

/* ===== 2 Bauteil-Stufen ===== */

/* Form: Radius-Stufen, legen die Theme-Variablen für Karten, Bilder und Textflächen um */
body.sv-form-ohne{--sv-radius:0;--sv-radius-knopf:0;--sv-radius-bild:0;--sv-radius-nummer:0}
body.sv-form-eckig{--sv-radius:2px;--sv-radius-knopf:2px;--sv-radius-bild:2px;--sv-radius-nummer:2px}
body.sv-form-leicht{--sv-radius:8px;--sv-radius-knopf:8px;--sv-radius-bild:8px;--sv-radius-nummer:6px}
body.sv-form-rund{--sv-radius:20px;--sv-radius-knopf:999px;--sv-radius-bild:20px;--sv-radius-nummer:50%}
body[class*="sv-form-"]{--borderRadiusCard:var(--sv-radius);--borderRadiusImage:var(--sv-radius-bild);--borderRadius:var(--sv-radius)}

/* Schatten und Rahmen: legen --cardBorder, --boxShadowCard, --boxShadowImage um */
body.sv-schatten-keine{--sv-schatten:none;--sv-schatten-hover:none;--sv-schatten-bild:none;--sv-rand-karte:0 solid transparent}
body.sv-schatten-fein{--sv-schatten:none;--sv-schatten-hover:none;--sv-schatten-bild:none;--sv-rand-karte:1px solid var(--sv-f-rand)}
body.sv-schatten-schwebend{
--sv-schatten:0 2px 6px color-mix(in srgb,var(--textColor) 5%,transparent),0 14px 34px color-mix(in srgb,var(--textColor) 9%,transparent);
--sv-schatten-hover:0 4px 10px color-mix(in srgb,var(--textColor) 6%,transparent),0 24px 48px color-mix(in srgb,var(--textColor) 15%,transparent);
--sv-schatten-bild:0 18px 40px color-mix(in srgb,var(--textColor) 14%,transparent);
--sv-rand-karte:0 solid transparent;
--sv-knopf-schatten:0 8px 20px color-mix(in srgb,var(--sv-f-akzent) 28%,transparent);
--sv-pfeil-schatten:0 6px 18px color-mix(in srgb,var(--textColor) 14%,transparent);
--sv-pfeil-schatten-h:0 10px 26px color-mix(in srgb,var(--textColor) 22%,transparent)}
/* Neumorph rechnet Licht und Schatten aus der Grundfläche; am Abschnitt neu, damit farbige Abschnitte eigene Töne bekommen */
body.sv-schatten-neumorph{--sv-neu-grund:var(--sv-f-flaeche)}
body.sv-schatten-neumorph main section{--sv-neu-grund:var(--block-bg-color,var(--sv-f-flaeche))}
/* Seit 1.3, P3a (N197): Ist die Blockfarbe ein Farbverlauf, wäre color-mix ungültig und der Schatten fiele weg; dann rechnet Neumorph mit der Grundfläche */
body.sv-schatten-neumorph main section[style*="gradient("]{--sv-neu-grund:var(--sv-f-flaeche)}
body.sv-schatten-neumorph,body.sv-schatten-neumorph main section{
--sv-neu-licht:color-mix(in srgb,var(--sv-neu-grund) 15%,#fff);
--sv-neu-dunkel:color-mix(in srgb,var(--sv-neu-grund) 82%,#000);
--sv-schatten:9px 9px 18px var(--sv-neu-dunkel),-9px -9px 18px var(--sv-neu-licht);
--sv-schatten-hover:inset 6px 6px 12px var(--sv-neu-dunkel),inset -6px -6px 12px var(--sv-neu-licht);
--sv-schatten-klein:5px 5px 10px var(--sv-neu-dunkel),-5px -5px 10px var(--sv-neu-licht);
--sv-schatten-innen:inset 5px 5px 10px var(--sv-neu-dunkel),inset -5px -5px 10px var(--sv-neu-licht);
--sv-schatten-bild:var(--sv-schatten);
--sv-rand-karte:1px solid color-mix(in srgb,var(--sv-neu-licht) 55%,transparent);
--sv-karte-flaeche:var(--sv-neu-grund);
--sv-pfeil-bg:var(--sv-neu-grund);
--sv-pfeil-schatten:var(--sv-schatten-klein);
--sv-pfeil-schatten-h:inset 4px 4px 8px var(--sv-neu-dunkel),inset -4px -4px 8px var(--sv-neu-licht);
--cardBorder:var(--sv-rand-karte);--boxShadowCard:var(--sv-schatten);--boxShadowImage:var(--sv-schatten-bild)}
body.sv-schatten-hart{
--sv-schatten:.6rem .6rem 0 var(--sv-f-kontrast);
--sv-schatten-hover:1rem 1rem 0 var(--sv-f-kontrast);
--sv-schatten-bild:1.2rem 1.2rem 0 var(--sv-f-akzent);
--sv-rand-karte:2px solid var(--sv-f-kontrast);
--sv-knopf-schatten:.4rem .4rem 0 var(--sv-f-kontrast)}
body[class*="sv-schatten-"]{--cardBorder:var(--sv-rand-karte);--boxShadowCard:var(--sv-schatten);--boxShadowImage:var(--sv-schatten-bild)}

/* Knöpfe */
body.sv-knopf-voll{--sv-knopf-pad:1.5rem 2.6rem}
body.sv-knopf-pille{--sv-radius-knopf:999px;--sv-knopf-pad:1.5rem 3rem}
body.sv-knopf-erhaben{--sv-radius-knopf:999px;--sv-knopf-pad:1.5rem 3rem}
body.sv-knopf-kontur{--sv-knopf-pad:1.6rem 2.8rem;--sv-knopf-rand:1px}
body.sv-knopf-pfeil{--sv-knopf-pad:1.6rem 2.6rem}
/* Erhabene Knöpfe brauchen die Neumorph-Schatten auch ohne Schatten-Stufe Neumorph */
body.sv-knopf-erhaben:not(.sv-schatten-neumorph){
--sv-neu-grund:var(--sv-f-flaeche);
--sv-neu-licht:color-mix(in srgb,var(--sv-neu-grund) 15%,#fff);
--sv-neu-dunkel:color-mix(in srgb,var(--sv-neu-grund) 82%,#000);
--sv-schatten-klein:5px 5px 10px var(--sv-neu-dunkel),-5px -5px 10px var(--sv-neu-licht);
--sv-schatten-innen:inset 5px 5px 10px var(--sv-neu-dunkel),inset -5px -5px 10px var(--sv-neu-licht)}

/* Slider-Pfeile */
body.sv-pfeil-kreis{--sv-pfeil-radius:50%}
body.sv-pfeil-quadrat{--sv-pfeil-radius:var(--sv-radius-knopf,0);--sv-pfeil-bg:var(--sv-f-kontrast);--sv-pfeil-farbe:var(--sv-f-akzent);--sv-pfeil-schatten-farbe:var(--sv-f-akzent)}

/* Bewegung: Dauer, Versatz beim Einblenden, Hover-Verschiebung */
body.sv-bewegung-aus{--sv-dauer:0s;--sv-hover-karte:none;--sv-hover-knopf:none;--sv-rein-weg:0px}
body.sv-bewegung-ruhig{--sv-dauer:.15s;--sv-hover-karte:none;--sv-hover-knopf:none;--sv-rein-weg:0px}
body.sv-bewegung-normal{--sv-dauer:.3s;--sv-hover-karte:translateY(-.5rem);--sv-hover-knopf:translateY(-.2rem);--sv-rein-weg:2rem}
body.sv-bewegung-lebendig{--sv-dauer:.2s;--sv-hover-karte:translate(-.4rem,-.4rem);--sv-hover-knopf:translate(-.2rem,-.2rem);--sv-rein-weg:4rem;--sv-rein-skala:.97}

/* ===== 3 Tokens je Stilrichtung (feinere Werte als die Stufen) ===== */
body.sv-stil-klar{--sv-nummer-rand:var(--sv-f-akzent);--sv-karte-innen:2.8rem;--sv-trenner-h:clamp(20px,3.6vw,52px);--sv-kopf-linie:1px solid var(--sv-f-rand);--sv-nummer-bg:var(--sv-f-akzent);--sv-nummer-text:var(--sv-f-textakzent)}
body.sv-stil-weich{--sv-nummer-rand:var(--sv-f-akzent);--sv-karte-innen:3rem;--sv-trenner-h:clamp(32px,6vw,80px);--sv-pfeil-bg:var(--sv-f-flaeche);--sv-pfeil-farbe:var(--sv-f-kontrast);--sv-kopf-schatten-fest:0 6px 24px color-mix(in srgb,var(--textColor) 10%,transparent);--sv-nummer-bg:var(--sv-f-akzent);--sv-nummer-text:var(--sv-f-textakzent)}
body.sv-stil-neumorph{--sv-radius:22px;--sv-radius-bild:16px;--sv-karte-innen:3rem;--sv-dauer:.25s;--sv-hover-karte:none;--sv-hover-knopf:none;--sv-rein-weg:0px;--sv-trenner-h:clamp(28px,5vw,64px);--sv-pfeil-farbe:var(--sv-f-kontrast)}
body.sv-stil-neumorph,body.sv-stil-neumorph main section{--sv-nummer-bg:var(--sv-neu-grund);--sv-nummer-schatten:4px 4px 8px var(--sv-neu-dunkel),-4px -4px 8px var(--sv-neu-licht)}
body.sv-stil-editorial{--sv-karte-innen:0;--sv-karte-innen-8a:0;--sv-zahl-ausrichtung:left;--sv-dauer:.4s;--sv-kopf-linie:1px solid var(--sv-f-kontrast);--sv-fuss-oben:10rem}
body.sv-stil-kraeftig{--sv-radius-nummer:6px;--sv-pfeil-radius:6px;--sv-karte-innen:3rem;--sv-trenner-h:18px;--sv-nummer-bg:var(--sv-f-akzent);--sv-nummer-text:var(--sv-f-textakzent);--numberBorderColor:var(--sv-f-kontrast);--imgBorder:2px solid var(--sv-f-kontrast)}

/* ===== 4 Regeln je Bauteil ===== */

/* Karten: Rahmen und Radius kommen über --cardBorder und --borderRadiusCard; den Schatten zeigt das Theme nur mit body.imgShadow */
body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) section .cardWrap:not(.noShadow){box-shadow:var(--boxShadowCard)}
body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) section .cardWrap:not(.noShadow):hover{box-shadow:var(--sv-schatten-hover,var(--boxShadowCard))}
body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) section.hasGlobalImgStylings .imgWrap:not(.noShadow){box-shadow:var(--boxShadowImage)}
body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) .sliderWrap .slick-list{padding:2.4rem 2.4rem 3.2rem;margin:0 -2.4rem}
/* P2d (GB-03): am Handy nur so weit hinaus, wie der Container Innenabstand hat (sonst 7 px Überbreite bei 375 px) */
@media (max-width:767px){body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) .sliderWrap .slick-list{padding-left:1.2rem;padding-right:1.2rem;margin:0 -1.2rem}}

/* Kartentypen (Block 6 Teaser, Block 8a); Grundform für alle Typen, dann kompakt und Bild als Hintergrund */
body[class*="sv-karte-"] .block-6-teaser:not([class*="sv-kv-"]) .cardWrap{padding-bottom:var(--sv-karte-innen,2.8rem)}
body[class*="sv-karte-"] .block-6-teaser:not([class*="sv-kv-"]) .cardImgWrap img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
body[class*="sv-karte-"] .block-6-teaser:not([class*="sv-kv-"]) .textWrap{padding:var(--sv-karte-innen,2.8rem) var(--sv-karte-innen,2.8rem) 0}
body[class*="sv-karte-"] .block-6-teaser:not([class*="sv-kv-"]) .ctaWrap{padding:0 var(--sv-karte-innen,2.8rem);margin-top:2rem}
body[class*="sv-karte-"] .block-8a-karten-einfach:not([class*="sv-kv-"]) .cardImgWrap:not(:has(img)){display:none}
body[class*="sv-karte-"] .block-8a-karten-einfach:not([class*="sv-kv-"]) .cardWrap{padding:var(--sv-karte-innen-8a,3.2rem)}
body[class*="sv-karte-"] .block-8a-karten-einfach:not([class*="sv-kv-"]) .cardNumberWrap{margin-bottom:1.2rem;text-align:var(--sv-zahl-ausrichtung,center)}
body[class*="sv-karte-"] .block-8a-karten-einfach:not([class*="sv-kv-"]) .cardNumberWrap + .textWrap{text-align:var(--sv-zahl-ausrichtung,center)}
body.sv-karte-kompakt .block-6-teaser:not([class*="sv-kv-"]) .cardWrap{padding:var(--sv-karte-innen,2.8rem);align-content:flex-start}
body.sv-karte-kompakt .block-6-teaser:not([class*="sv-kv-"]) .cardWrap > div:first-child{display:grid;grid-template-columns:9.6rem minmax(0,1fr);column-gap:2.4rem;align-items:start}
body.sv-karte-kompakt .block-6-teaser:not([class*="sv-kv-"]) .cardImgWrap img{width:9.6rem;aspect-ratio:1/1;border-radius:var(--sv-radius-bild,0)}
body.sv-karte-kompakt .block-6-teaser:not([class*="sv-kv-"]) .textWrap{padding:0}
body.sv-karte-kompakt .block-6-teaser:not([class*="sv-kv-"]) .ctaWrap{padding:0 0 0 12rem;margin-top:1.2rem}
@media (max-width:479px){
body.sv-karte-kompakt .block-6-teaser:not([class*="sv-kv-"]) .cardWrap > div:first-child{grid-template-columns:7.2rem minmax(0,1fr);column-gap:1.6rem}
body.sv-karte-kompakt .block-6-teaser:not([class*="sv-kv-"]) .cardImgWrap img{width:7.2rem}
body.sv-karte-kompakt .block-6-teaser:not([class*="sv-kv-"]) .ctaWrap{padding-left:8.8rem}
}
body.sv-karte-overlay .block-6-teaser:not([class*="sv-kv-"]) .cardWrap:has(.cardImgWrap img){position:relative;min-height:44rem;align-content:flex-end;background-color:var(--sv-f-kontrast);color:var(--sv-f-invers);--ctaBtnGhostBorder:var(--sv-f-invers);--ctaBtnGhostTextColor:var(--sv-f-invers);--ctaBtnGhostBgHover:var(--sv-f-invers);--ctaBtnGhostTextHover:var(--sv-f-kontrast)}
body.sv-karte-overlay .block-6-teaser:not([class*="sv-kv-"]) .cardWrap:has(.cardImgWrap img) .cardImgWrap{position:absolute;inset:0;z-index:0;border-radius:inherit}
body.sv-karte-overlay .block-6-teaser:not([class*="sv-kv-"]) .cardWrap:has(.cardImgWrap img) .cardImgWrap img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
body.sv-karte-overlay .block-6-teaser:not([class*="sv-kv-"]) .cardWrap:has(.cardImgWrap img) .cardImgWrap::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--sv-f-kontrast) 97%,transparent) 0%,color-mix(in srgb,var(--sv-f-kontrast) 90%,transparent) 48%,color-mix(in srgb,var(--sv-f-kontrast) 40%,transparent) 100%)}
body.sv-karte-overlay .block-6-teaser:not([class*="sv-kv-"]) .cardWrap:has(.cardImgWrap img) :is(.textWrap,.ctaWrap){position:relative;z-index:1}
body.sv-karte-overlay .block-6-teaser:not([class*="sv-kv-"]) .cardWrap:has(.cardImgWrap img) :is(h2,h3,h4,p){color:var(--sv-f-invers)}

/* Bild-Zoom in Karten */
body.sv-bild-zoom section .cardImgWrap{overflow:hidden}

/* Knöpfe */
body[class*="sv-knopf-"] .multipleCtaWrap{display:flex;flex-wrap:wrap;gap:1.2rem 1.6rem;align-items:center}
body[class*="sv-knopf-"] .ctaBtn{display:inline-flex;align-items:center;justify-content:center;gap:1rem;margin:0;line-height:1.2;padding:var(--sv-knopf-pad,1.5rem 2.6rem);border-radius:var(--sv-radius-knopf,0);border-width:var(--sv-knopf-rand,2px);border-style:solid;text-decoration:none}
body[class*="sv-knopf-"] .ctaBtn.ctaBtnStandard{border-color:var(--ctaBtnStandardBg);box-shadow:var(--sv-knopf-schatten,none)}
body[class*="sv-knopf-"] .ctaBtn.ctaBtnStandard:hover{border-color:var(--ctaBtnStandardBgHover)}
body[class*="sv-knopf-"] .ctaBtn.ctaBtnInverse{border-color:var(--ctaBtnInverseBg)}
body[class*="sv-knopf-"] .ctaBtn.ctaBtnInverse:hover{border-color:var(--ctaBtnInverseBgHover)}
body[class*="sv-knopf-"] .ctaBtn.ctaBtnGhost{background:transparent;color:var(--ctaBtnGhostTextColor);border-color:var(--ctaBtnGhostBorder)}
body[class*="sv-knopf-"] .ctaBtn.ctaBtnGhost:hover{background:var(--ctaBtnGhostBgHover);color:var(--ctaBtnGhostTextHover)}
body[class*="sv-knopf-"] header .ctaBtn{padding:var(--sv-knopf-pad-kopf,1.1rem 2rem);margin-left:3rem}
body.sv-knopf-kontur .ctaBtn.ctaBtnStandard{background:transparent;color:var(--ctaBtnGhostTextColor);border-color:var(--ctaBtnGhostBorder)}
body.sv-knopf-kontur .ctaBtn.ctaBtnStandard:hover{background:var(--ctaBtnGhostBgHover);color:var(--ctaBtnGhostTextHover);border-color:var(--ctaBtnGhostBgHover)}
body.sv-knopf-kontur .ctaBtn.ctaBtnGhost{border-color:transparent;border-radius:0;padding-left:0;padding-right:0;box-shadow:inset 0 -1px 0 currentColor}
body.sv-knopf-kontur .ctaBtn.ctaBtnGhost:hover{background:transparent;color:var(--ctaBtnGhostTextColor);box-shadow:inset 0 -2px 0 currentColor}
/* html davor: hebt über die Theme-Regel header.buttonStyle1 .ctaBtn:after, die das Pseudo-Element ausblendet */
html body:is(.sv-knopf-kontur,.sv-knopf-pfeil) .ctaBtn::after{content:"\2192";display:inline-block;position:static;width:auto;height:auto;margin:0;background:none;-webkit-mask:none;mask:none;font-weight:400}
body.sv-knopf-erhaben .ctaBtn{box-shadow:var(--sv-schatten-klein)}
body.sv-knopf-erhaben .ctaBtn:active{box-shadow:var(--sv-schatten-innen)}
body.sv-knopf-erhaben .ctaBtn.ctaBtnGhost{background:var(--block-bg-color,var(--bodyBackgroundColor));border-color:transparent;color:var(--linkColor)}
body.sv-knopf-erhaben .ctaBtn.ctaBtnGhost:hover{background:var(--block-bg-color,var(--bodyBackgroundColor));color:var(--linkColor);box-shadow:var(--sv-schatten-innen)}

/* Fragen (Block 10) und Ablauf (Block 9); P2d (GB-01): Fläche in farbigen Abschnitten aus der Blockfarbe, sonst hätte
   der Kontrastschutz hellen Text auf heller Karte */
body[class*="sv-schatten-"] .block-10-akkordeon .akkordeonHeadline{border-bottom:1px solid var(--sv-f-rand);padding-top:.4rem}
body.sv-schatten-keine .block-10-akkordeon .akkordeonHeadline{border-bottom-color:var(--sv-f-kontrast)}
body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) .block-10-akkordeon .singleAkkordeon{background:var(--block-bg-color,var(--sv-karte-flaeche,var(--sv-f-flaeche)));border:var(--sv-rand-karte);border-radius:var(--sv-radius,0);box-shadow:var(--sv-schatten);padding:2.2rem 0 .6rem;margin-bottom:2rem}
body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) .block-10-akkordeon .akkordeonHeadline{border-bottom:0;margin-bottom:0;padding-bottom:1.6rem}
body.sv-schatten-neumorph .block-10-akkordeon .singleAkkordeon:has(.isOpen){box-shadow:var(--sv-schatten-innen)}
body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) .block-9-prozess .akkordeonInner{background:var(--block-bg-color,var(--sv-karte-flaeche,var(--sv-f-flaeche)));border:var(--sv-rand-karte);border-radius:var(--sv-radius,0);box-shadow:var(--sv-schatten)}
body[class*="sv-form-"] .block-9-prozess .prozessNumber{border-radius:var(--sv-radius-nummer,50%);box-shadow:var(--sv-nummer-schatten,none)}
body[class*="sv-stil-"] .block-9-prozess .prozessNumber{background:var(--sv-nummer-bg,var(--block-bg-color,var(--bodyBackgroundColor)));color:var(--sv-nummer-text,var(--numberColor));border-color:var(--sv-nummer-rand,var(--numberBorderColor))}

/* Slider-Pfeile: seit 1.2.0-dev.7 (P2 B8) am Ende von style.css, damit die Wahl je Slider auch ohne Stilrichtung wirkt */

/* Trenner zwischen Abschnitten (seit P2 B5): welche Form ein Abschnitt zeigt, entscheidet der Render-Helfer
   (lib/trenner.php, Klasse trennlinieTyp<form>; die globale Form ersetzt die alten Werte Welle und Kante, „keiner“
   blendet sie aus). Hier nur die Höhe als Token und die feineren Formen Welle und Kante der Stilrichtungen;
   Bogen, Zacken, Berg und Tannenkamm stehen in style.css, weil ein Block sie auch ohne Stilrichtung wählen kann. */
body:is([class*="sv-trenner-"],[class*="sv-trennerhoehe-"]) .trennlinieBlock{height:var(--sv-trenner-h,clamp(32px,6vw,80px))}
body[class*="sv-trenner-"] :is(.trennlinieTypwelle,.trennlinieTypkante){-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 100%;mask-position:50% 100%}
body[class*="sv-trenner-"] .trennlinieBlockOben.trennlinieTypwelle{-webkit-mask-image:var(--sv-maske-welle-o);mask-image:var(--sv-maske-welle-o)}
body[class*="sv-trenner-"] .trennlinieBlockUnten.trennlinieTypwelle{-webkit-mask-image:var(--sv-maske-welle-u);mask-image:var(--sv-maske-welle-u)}
body[class*="sv-trenner-"] .trennlinieBlockOben.trennlinieTypkante{-webkit-mask-image:var(--sv-maske-kante-o);mask-image:var(--sv-maske-kante-o)}
body[class*="sv-trenner-"] .trennlinieBlockUnten.trennlinieTypkante{-webkit-mask-image:var(--sv-maske-kante-u);mask-image:var(--sv-maske-kante-u)}

/* Kopfzeile: Farben bleiben die der Instanz (--headerBackground, --headerLinkColor, --headerLinkHover) */
body[class*="sv-kopf-"] header.banner{border-bottom:var(--sv-kopf-linie,0 solid transparent);box-shadow:var(--sv-kopf-schatten,none)}
@media (min-width:1200px){
body[class*="sv-kopf-"] header :is(.container-fluid,.container){align-items:center}
body[class*="sv-kopf-"] header .menuHelper{margin-bottom:0}
}
/* Transparent über dem Einstiegsbild; die Klasse sv-gescrollt am body und die Höhe --sv-kopf-hoehe setzt das Kopf-Skript (B6) */
body.sv-kopf-transparent{--sv-kopf-bg-fest:var(--headerBackground);--sv-kopf-link-fest:var(--headerLinkColor)}
/* P2d (GB-02): ohne Hintergrundfarbe auf der Header-Seite nimmt der fixierte Kopf die Seitenfarbe (Klasse aus lib/kopf-fuss.php) */
body.sv-kopf-transparent.sv-kopf-ohne-grund{--headerBackground:var(--bodyBackgroundColor)}
body.sv-kopf-transparent header.banner{position:fixed;top:0;left:0;right:0;z-index:60}
body.sv-kopf-transparent:not(.sv-gescrollt):has(main > section:first-child:is(.block-1-hero-full-screen,.block-2-hero-split-screen)) header.banner{--headerBackground:transparent;--headerLinkColor:var(--sv-kopf-link-hero,var(--sv-f-invers));--headerLinkHover:var(--sv-kopf-link-hero,var(--sv-f-invers));background-color:transparent;border-bottom-color:transparent;box-shadow:none}
body.sv-kopf-transparent:not(.sv-gescrollt):has(main > section:first-child:is(.block-1-hero-full-screen,.block-2-hero-split-screen)) header.banner a:not(.ctaBtn){color:var(--headerLinkColor)}
body.sv-kopf-transparent.sv-gescrollt header.banner,body.sv-kopf-transparent:not(:has(main > section:first-child:is(.block-1-hero-full-screen,.block-2-hero-split-screen))) header.banner{box-shadow:var(--sv-kopf-schatten-fest,0 6px 24px color-mix(in srgb,var(--textColor) 10%,transparent))}
body.sv-kopf-transparent:not(:has(main > section:first-child:is(.block-1-hero-full-screen,.block-2-hero-split-screen))) .wrap{padding-top:var(--sv-kopf-hoehe,9rem)}
body.sv-kopf-transparent main > section.block-1-hero-full-screen:first-child{padding-top:calc(var(--sv-kopf-hoehe,9rem) + 4rem)}
body.admin-bar.sv-kopf-transparent header.banner{top:32px}
@media (max-width:782px){body.admin-bar.sv-kopf-transparent header.banner{top:46px}}
@media (max-width:1199px){
body.sv-kopf-transparent header .navbar-collapse{background:var(--sv-kopf-bg-fest)}
body.sv-kopf-transparent header .navbar-collapse a:not(.ctaBtn),body.sv-kopf-transparent header .navbar-close{color:var(--sv-kopf-link-fest)}
}
/* Zentriert: Logo über dem Menü */
@media (min-width:1200px){
body.sv-kopf-zentriert header :is(.container-fluid,.container){flex-direction:column;align-items:center;justify-content:center;padding-left:1.5rem}
body.sv-kopf-zentriert header .navbar-header{float:none;display:flex;justify-content:center;width:100%}
body.sv-kopf-zentriert header .navbar-brand{float:none;margin:0 auto}
body.sv-kopf-zentriert header .navbar-collapse{width:100%;border-top:1px solid var(--headerLinkColor)}
body.sv-kopf-zentriert header .menuHelper{justify-content:center;margin-bottom:0}
body.sv-kopf-zentriert header .navbar-nav{float:none;display:flex;justify-content:center}
}

/* Fußzeile: Farben bleiben die der Instanz (--footer*, --subFooter*) */
body[class*="sv-fuss-"] footer.content-info{padding-top:var(--sv-fuss-oben,8rem)}
body[class*="sv-fuss-"] footer.content-info ul{list-style:none;margin:0;padding:0}
body[class*="sv-fuss-"] footer.content-info li{margin:0 0 .8rem}
body[class*="sv-fuss-"] footer.content-info .subFooterWrap{border-top:1px solid var(--sv-fuss-linie,color-mix(in srgb,var(--footerTextColor,var(--textColor)) 16%,transparent));margin-top:6rem;padding:2rem 0}
body[class*="sv-fuss-"] footer.content-info .subFooterText{margin:0}
@media (min-width:768px){
body.sv-fuss-zwei footer .footerRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4.8rem 8rem}
body.sv-fuss-zwei footer .footerRow > [class*="col-"]{width:auto;max-width:none;float:none;flex:none;margin:0}
/* Seit P2 B6 (RZ-125): links Logo, Adresse und Text 2, rechts Text 3, Bewertungen und Siegel */
body.sv-fuss-zwei footer .footerRow > [class*="col-"]:nth-child(1){grid-column:1;grid-row:1}
body.sv-fuss-zwei footer .footerRow > [class*="col-"]:nth-child(2){grid-column:1;grid-row:2}
body.sv-fuss-zwei footer .footerRow > [class*="col-"]:nth-child(3){grid-column:2;grid-row:1}
body.sv-fuss-zwei footer .footerRow > [class*="col-"]:nth-child(4){grid-column:2;grid-row:2}
}
body.sv-fuss-minimal footer.content-info{padding-top:4.8rem}
body.sv-fuss-minimal footer .footerRow > [class*="col-"]:not(:first-child){display:none}
body.sv-fuss-minimal footer .footerRow > [class*="col-"]:first-child{width:100%;max-width:100%;flex:0 0 100%}
body.sv-fuss-minimal footer .footer1{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.6rem 4.8rem}
body.sv-fuss-minimal footer .footer1 > p{margin:0}
body.sv-fuss-minimal footer .subFooterWrap{margin-top:3.2rem}

/* Fokus: sichtbarer Rahmen für die Tastatur */
body:is([class*="sv-stil-"],[class*="sv-form-"],[class*="sv-schatten-"],[class*="sv-knopf-"]) :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--sv-farbe-akzent,var(--linkColor));outline-offset:3px}

/* ===== 5 Feinheiten je Stilrichtung ===== */

/* Klar */
body.sv-stil-klar section .cardWrap:hover{border-color:var(--sv-f-akzent)}
body.sv-stil-klar main .headlineWrap > h2:first-child::before{content:"";display:block;width:4rem;height:3px;background:var(--sv-f-akzent);margin-bottom:2rem}

/* Neumorph */
body.sv-stil-neumorph section.hasGlobalImgStylings .imgWrap{padding:1.2rem;border-radius:26px;background:var(--sv-neu-grund,var(--sv-f-flaeche))}
body.sv-stil-neumorph .block-6-teaser .cardImgWrap{margin:1.4rem 1.4rem 0;border-radius:14px;overflow:hidden;box-shadow:var(--sv-schatten-innen)}
body.sv-stil-neumorph .block-6-teaser .cardImgWrap img{border-radius:14px;padding:4px}
body.sv-stil-neumorph .sliderWrap .slick-dots li button::before{opacity:.45}
body.sv-stil-neumorph .sliderWrap .slick-dots li.slick-active button::before{opacity:1}
body.sv-stil-neumorph footer.content-info{box-shadow:inset 0 8px 12px -10px var(--sv-neu-dunkel,var(--sv-f-rand))}
@media (min-width:1200px){
body.sv-stil-neumorph header.banner{padding:1.4rem 2.4rem 0}
body.sv-stil-neumorph header.banner > .navbar{border:0;border-radius:22px;box-shadow:var(--sv-schatten-klein);padding:0 1.6rem;margin:0;background:var(--headerBackground)}
}

/* Editorial: Haarlinien statt Flächen */
body.sv-stil-editorial main section .headlineWrap{border-top:1px solid currentColor;padding-top:2.4rem}
body.sv-stil-editorial .block-6-teaser .textWrap{padding-top:2.4rem}
body.sv-stil-editorial .block-6-teaser .ctaWrap{margin-top:1.2rem}
body.sv-stil-editorial .block-8a-karten-einfach .flexRow .cardWrap{border-left:1px solid currentColor;padding:0 0 0 2.4rem;text-align:left}
body.sv-stil-editorial .block-8a-karten-einfach .cardNumberWrap{text-align:left}
body.sv-stil-editorial .sliderWrap .cardWrap{border-top:1px solid currentColor;padding:2.4rem 2.4rem 0 0}
body.sv-stil-editorial .block-9-prozess .prozessNumber{border-width:1px}
body.sv-stil-editorial header .ctaBtn{--sv-knopf-pad-kopf:.9rem 1.8rem}
body.sv-stil-editorial footer.content-info{border-top:1px solid var(--sv-f-kontrast)}

/* Kräftig: harte Kanten, Akzent als Fläche */
body.sv-stil-kraeftig .ctaBtn.ctaBtnStandard{border-color:var(--sv-f-kontrast)}
body.sv-stil-kraeftig .ctaBtn.ctaBtnStandard:hover{box-shadow:.6rem .6rem 0 var(--sv-f-kontrast)}
body.sv-stil-kraeftig header .ctaBtn{box-shadow:none;border-color:var(--sv-f-akzent)}
body.sv-stil-kraeftig .block-9-prozess .prozessNumber{border-width:2px}
body.sv-stil-kraeftig .block-10-akkordeon .singleAkkordeon:has(.isOpen){box-shadow:.6rem .6rem 0 var(--sv-f-akzent)}
body.sv-stil-kraeftig .block-10-akkordeon .akkordeonHeadline::before{color:var(--sv-f-kontrast)}

/* ===== 6 Bewegung ===== */
/* Übergänge und Verschiebungen nur, wenn niemand weniger Bewegung wünscht */
@keyframes sv-rein{from{opacity:0;transform:translateY(var(--sv-rein-weg,1.6rem)) scale(var(--sv-rein-skala,1))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
body[class*="sv-knopf-"] .ctaBtn{transition:background-color var(--sv-dauer-farbe,.15s) ease,color var(--sv-dauer-farbe,.15s) ease,border-color var(--sv-dauer-farbe,.15s) ease,box-shadow var(--sv-dauer,.2s) ease,transform var(--sv-dauer,.2s) ease}
body[class*="sv-bewegung-"] .ctaBtn:hover{transform:var(--sv-hover-knopf,none)}
body:is(.sv-knopf-kontur,.sv-knopf-pfeil) .ctaBtn::after{transition:transform var(--sv-dauer,.2s) ease}
body:is(.sv-knopf-kontur,.sv-knopf-pfeil):not(.sv-bewegung-aus) .ctaBtn:hover::after{transform:translateX(.5rem)}
body[class*="sv-bewegung-"] section .cardWrap{transition:transform var(--sv-dauer,.2s) ease,box-shadow var(--sv-dauer,.2s) ease,border-color var(--sv-dauer-farbe,.15s) ease,background-color var(--sv-dauer-farbe,.15s) ease}
body[class*="sv-bewegung-"] section .cardWrap:hover{transform:var(--sv-hover-karte,none)}
body:is(.sv-schatten-schwebend,.sv-schatten-neumorph,.sv-schatten-hart) .block-10-akkordeon .singleAkkordeon{transition:box-shadow var(--sv-dauer,.2s) ease}
:is(body:is(.sv-pfeil-kreis,.sv-pfeil-quadrat) .sliderWrap:not([class*="sv-pfeil-"]),.sliderWrap:is(.sv-pfeil-kreis,.sv-pfeil-quadrat)) .slick-arrow{transition:background-color var(--sv-dauer-farbe,.15s) ease,box-shadow var(--sv-dauer,.2s) ease,transform var(--sv-dauer,.2s) ease}
:is(body.sv-pfeil-quadrat:not(.sv-bewegung-aus) .sliderWrap:not([class*="sv-pfeil-"]),body:not(.sv-bewegung-aus) .sliderWrap.sv-pfeil-quadrat) .slick-arrow:hover{transform:translateY(-50%) translate(-.2rem,-.2rem)}
:is(body.sv-pfeil-linie .sliderWrap:not([class*="sv-pfeil-"]),.sliderWrap.sv-pfeil-linie) .slick-arrow{transition:background-color var(--sv-dauer-farbe,.15s) ease}
body.sv-karte-overlay:not(.sv-bewegung-aus) .block-6-teaser:not([class*="sv-kv-"]) .cardWrap:has(.cardImgWrap img) .cardImgWrap img{transition:transform .6s ease}
body.sv-karte-overlay:not(.sv-bewegung-aus) .block-6-teaser:not([class*="sv-kv-"]) .cardWrap:hover .cardImgWrap img{transform:scale(1.05)}
body.sv-bild-zoom:not(.sv-bewegung-aus) section .cardImgWrap img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
body.sv-bild-zoom:not(.sv-bewegung-aus) section .cardWrap:hover .cardImgWrap img{transform:scale(1.045)}
body.sv-kopf-transparent header.banner{transition:background-color .3s ease,box-shadow .3s ease}
@supports (animation-timeline:view()){
body:is(.sv-bewegung-normal,.sv-bewegung-lebendig) main section :is(.headlineWrap,.flexRow > [class*="col-"],.singleAkkordeon){animation:sv-rein linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
}

/* Bewegung aus: nur Farbübergänge, kein Einblenden. Das :not(#sv-ohne-id) hebt die Spezifität über die
   Übergänge des Themes (z. B. .buttonStyle1 .ctaBtn), ohne !important; ein Element mit dieser ID gibt es nicht. */
body.sv-bewegung-aus:not(#sv-ohne-id) *,body.sv-bewegung-aus:not(#sv-ohne-id) *::before,body.sv-bewegung-aus:not(#sv-ohne-id) *::after{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;animation:none}
body.sv-bewegung-aus.fadeInEffects :is(.textWrap,.imgWrap){opacity:1;transition:none}

/* Weniger Bewegung gewünscht: alles still, auch das Einblenden des Themes (fadeInEffects) */
@media (prefers-reduced-motion:reduce){
body[class*="sv-bewegung-"]:not(#sv-ohne-id) *,body[class*="sv-bewegung-"]:not(#sv-ohne-id) *::before,body[class*="sv-bewegung-"]:not(#sv-ohne-id) *::after{transition:none;animation:none;scroll-behavior:auto}
body[class*="sv-bewegung-"].fadeInEffects :is(.textWrap,.imgWrap){opacity:1;transition:none}
body[class*="sv-bewegung-"]{--sv-hover-karte:none;--sv-hover-knopf:none;--sv-rein-weg:0px}
}

/* Trennerhöhe der Design-Seite (seit P2 B5, Feld sv_trenner_hoehe): steht am Ende, damit sie die Höhe der
   Stilrichtung (Abschnitt 3) überschreibt */
body.sv-trennerhoehe-s{--sv-trenner-h:clamp(16px,2.4vw,32px)}
body.sv-trennerhoehe-m{--sv-trenner-h:clamp(24px,4vw,56px)}
body.sv-trennerhoehe-l{--sv-trenner-h:clamp(36px,6vw,88px)}
body.sv-trennerhoehe-xl{--sv-trenner-h:clamp(48px,8.5vw,128px)}

/* P2d (GB-05): weiches Scrollen am html-Element bei „Bewegung reduzieren“ aus (wie R142 nur mit gewählter Bewegung) */
@media (prefers-reduced-motion:reduce){html:has(body[class*="sv-bewegung-"]){scroll-behavior:auto}}