/*
Theme Name: erfolgreich miteinander
Description: Boxed-Theme mit weißer, gerundeter Hauptbox, farblich anpassbaren Sektionen, Logo + Navigation oben, Footer-Widgetflächen, lokalen Schriften und frei konfigurierbaren Sprungmarken. Für den Classic Editor.
Version: 1.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: erfolgreich-miteinander
Author: Melanie Bieber
Author URI: https://www.erfolgreich-miteinander.de
*/
/* =====================================================================
WO KONFIGURIERE ICH WAS?
1 Variablen ............ Standardwerte (Customizer überschreibt sie)
2 Grundlagen ........... Body, Links, Ãœberschriften, Fokus
3 Hauptbox ............. weiße Box, Rundung, Schatten
4 Header & Logo ........ Kopfbereich, Burger-Button
5 Navigation ........... Menü, aktiver Punkt, Untermenü
6 Sektionen ............ Farben je Sektion, Abstände, Titel, Links
7 Spalten-Raster ....... .sb-cols (2/3 Spalten, Quer-Box, Sonderraster)
8 Bausteine ............ Karten, Bilder, Zitatkarte, Intro, Banner,
Merkmale, Logos, Bilder-Raster, weiche Bildränder,
Aufhänger
9 Knöpfe ............... .sb-btn und Varianten
10 Editor-Inhalte ....... Bildausrichtung, Zitate, Bildunterschriften
11 Blog ................. Beitragskarten, Seitenzahlen
12 Footer ............... Widgetspalten, untere Zeile
13 Formulare ............ Felder, Absende-Knöpfe, Forminator
14 Mobil (bis 860 px) ... alle Anpassungen für kleine Bildschirme
15 Admin-Leiste ......... Abstand des Headers bei eingeloggten Nutzern
WAS KOMMT AUS DEM CUSTOMIZER (nicht hier ändern)?
Farben, Schriftarten, Schriftgrößen, Rundung, Boxbreite, Header-Layout
und Footer-Spalten werden von functions.php als Variablen ausgegeben
und überschreiben die Standardwerte aus Abschnitt 1.
WAS IST HIER FEST EINGETRAGEN?
Stellen mit "FEST" sind absichtlich nicht im Customizer einstellbar
(z. B. das halbtransparente Lila der Sektion 2).
===================================================================== */
/* ---------------------------------------------------------------------
1 VARIABLEN – Standardwerte (der Customizer überschreibt diese)
--------------------------------------------------------------------- */
:root{
--sb-page:#f9f0bf;--sb-box:#fff;--sb-primary:#df7f15;--sb-primary-fg:#333;--sb-accent:#9e92b7;--sb-accent-fg:#333;
--sb-text:#333;--sb-heading:#2f2366;--sb-radius:25px;--sb-width:1200px;
--sb-font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--sb-font-heading:var(--sb-font-body);--sb-font-menu:var(--sb-font-body);
--sb-fs-body:16px;--sb-fs-menu:17px;--sb-fs-h1:38px;--sb-fs-h2:30px;--sb-fs-h3:21px;--sb-fs-footer:15px;
--sb-sec-1-bg:#fff;--sb-sec-1-fg:#333;--sb-sec-1-hd:#333;--sb-sec-2-bg:#fdf7f7;--sb-sec-2-fg:#333;--sb-sec-2-hd:#333;--sb-sec-3-bg:#df7f15;--sb-sec-3-fg:#333;--sb-sec-3-hd:#333;
--sb-sec-4-bg:#b5acc9;--sb-sec-4-fg:#333;--sb-sec-4-hd:#333;--sb-sec-5-bg:#2f2366;--sb-sec-5-fg:#fff;--sb-sec-5-hd:#fff;
}
/* ---------------------------------------------------------------------
2 GRUNDLAGEN
--------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;padding:24px;background:var(--sb-page);color:var(--sb-text);font:var(--sb-fs-body)/1.7 var(--sb-font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--sb-primary)}
:focus-visible{outline:3px solid var(--sb-accent);outline-offset:2px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.sb-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--sb-box);padding:10px 16px;border-radius:12px}
.sb-skip:focus{left:16px}
/* Überschriften: Größen kommen aus dem Customizer (Variablen --sb-fs-h1 bis h3) */
h1,h2,h3,h4{font-family:var(--sb-font-heading);color:var(--sb-heading);line-height:1.2;font-weight:700;margin:0 0 .6em}
h1{font-size:var(--sb-fs-h1)}h2{font-size:var(--sb-fs-h2)}h3{font-size:var(--sb-fs-h3)}h4{font-size:1.05rem}
/* ---------------------------------------------------------------------
3 HAUPTBOX (weiße Fläche mit Rundung und Schatten)
--------------------------------------------------------------------- */
.sb-box{overflow:clip;max-width:var(--sb-width);margin:0 auto;background:var(--sb-box);border-radius:var(--sb-radius);box-shadow:0 4px 18px rgba(120,100,40,.22);padding:0 clamp(16px,3vw,36px)}
/* ---------------------------------------------------------------------
4 HEADER & LOGO (sitzt in der Box, klebt beim Scrollen oben)
--------------------------------------------------------------------- */
.sb-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:32px;margin:0 calc(clamp(16px,3vw,36px) * -1);padding:18px clamp(16px,3vw,36px);background:var(--sb-box)}
.custom-logo-link,.sb-sitename{flex:none;display:flex;align-items:center}
.custom-logo{display:block;max-height:84px;width:auto}
.sb-sitename{font-family:var(--sb-font-heading);font-size:1.5rem;font-weight:700;text-decoration:none;color:var(--sb-primary)}
/* Burger-Button (nur mobil sichtbar, siehe Abschnitt 14) */
.sb-burger{display:none;margin-left:auto;width:46px;height:46px;border:0;border-radius:50%;background:var(--sb-page);cursor:pointer;position:relative}
.sb-burger::before{content:"";position:absolute;left:13px;top:22px;width:20px;height:2px;border-radius:2px;background:var(--sb-text);box-shadow:0 -7px var(--sb-text),0 7px var(--sb-text)}
/* Variante "Logo zentriert, Navigation darunter" (Customizer: Header-Layout) */
.sb-header-center .sb-header{flex-direction:column;gap:10px;padding-top:28px}
.sb-header-center .sb-menu{justify-content:center}
.sb-header-center .custom-logo{max-height:130px}
@media (max-width:860px){
/* Spalten mit .sb-aufloesen: Kinder werden einzeln im Raster sortiert */
.sb-cols:has(>.sb-aufloesen){gap:0}
.sb-cols>.sb-aufloesen{display:contents}
.sb-aufloesen>*{order:3} /* Standard: Text, Knopf, Zertifikate, Siegel */
.sb-aufloesen>h1,.sb-aufloesen>h2{order:1} /* zuerst die Überschriften */
.sb-aufloesen>.wp-caption{order:2} /* dann das Bild */
}
/* ---------------------------------------------------------------------
5 NAVIGATION
--------------------------------------------------------------------- */
.sb-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.sb-menu li{position:relative}
.sb-menu a{display:block;padding:8px 16px;border-radius:999px;font-family:var(--sb-font-menu);color:var(--sb-text);text-decoration:none;font-size:var(--sb-fs-menu);transition:background .2s,color .2s}
.sb-menu a:hover{background:color-mix(in srgb,var(--sb-primary) 14%,transparent)}
.sb-menu .current-menu-item>a,.sb-menu a[aria-current="true"]{color:var(--sb-primary);background:color-mix(in srgb,var(--sb-primary) 12%,transparent)}
.sb-menu .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:210px;list-style:none;margin:0;padding:8px;background:var(--sb-box);border-radius:20px;box-shadow:0 12px 32px rgba(60,50,20,.18)}
.sb-menu li:hover>.sub-menu,.sb-menu li:focus-within>.sub-menu{display:block}
/* Social-Media-Icons im Menü (Menüpunkte mit der CSS-Klasse sb-social) */
.sb-menu .sb-social>a{display:flex;align-items:center;padding:8px 10px}
.sb-icon{display:block;width:25px;height:25px;color:var(--sb-accent)}
.sb-menu .sb-social>a:hover .sb-icon{color:var(--sb-primary)}
/* ---------------------------------------------------------------------
6 SEKTIONEN (eckig, innerhalb der Box)
Sektionsfarben 1 bis 5 stellst du im Customizer ein, mit zwei Ausnahmen:
- Sektion 2: FEST halbtransparentes Lila (siehe unten)
- Ãœberschriften: FEST in der globalen Ãœberschriftenfarbe (siehe unten)
--------------------------------------------------------------------- */
.sb-sec-1{--sec-bg:var(--sb-sec-1-bg);--sec-fg:var(--sb-sec-1-fg);--sec-hd:var(--sb-sec-1-hd)}
.sb-sec-2{--sec-bg:#9e92b74d;--sec-fg:var(--sb-sec-2-fg);--sec-hd:var(--sb-sec-2-hd)} /* FEST: Lila, 30 % deckend (der Customizer-Hintergrund für Sektion 2 wirkt dadurch nicht) */
.sb-sec-3{--sec-bg:var(--sb-sec-3-bg);--sec-fg:var(--sb-sec-3-fg);--sec-hd:var(--sb-sec-3-hd)}
.sb-sec-4{--sec-bg:var(--sb-sec-4-bg);--sec-fg:var(--sb-sec-4-fg);--sec-hd:var(--sb-sec-4-hd)}
.sb-sec-5{--sec-bg:var(--sb-sec-5-bg);--sec-fg:var(--sb-sec-5-fg);--sec-hd:var(--sb-sec-5-hd)}
.sb-section{display:flow-root;padding:clamp(24px,4.5vw,64px);margin-top:20px;border-radius:0;background:var(--sec-bg,var(--sb-sec-1-bg));color:var(--sec-fg,var(--sb-sec-1-fg));scroll-margin-top:130px}
.sb-narrow{padding-inline:max(clamp(24px,4.5vw,64px),calc((100% - 820px) / 2))}
.sb-section>:last-child{margin-bottom:0}
/* Ãœberschriften in Sektionen: FEST in der globalen Ãœberschriftenfarbe (Customizer: Ãœberschriftenfarbe).
Dadurch wirken die Customizer-Felder "Sektion n: Überschriften" nicht. Zum Reaktivieren die Zeile löschen. */
.sb-section :is(h1,h2,h3,h4){color:var(--sb-heading)}
/* Links in Sektionen: FEST in der Primärfarbe (Customizer: Primärfarbe) */
.sb-section a:not(.sb-btn){color:var(--sb-primary);text-underline-offset:3px}
.sb-section__title{margin:0 0 1em;text-align:left} /* linksbündig; zentriert mit der Klasse .sb-text-center */
.sb-lead{font-size:1.25em;opacity:.85}
.sb-text-center{text-align:center}
/* ---------------------------------------------------------------------
7 SPALTEN-RASTER (.sb-cols, einfaches HTML im Editor)
Aufbau: … Kinder …
--------------------------------------------------------------------- */
.sb-cols{display:grid;gap:clamp(20px,3vw,44px);align-items:start;margin-bottom:1.5em}
.sb-cols>*{min-width:0}
.sb-cols>*>:first-child{margin-top:0}
.sb-cols p:last-child{margin-bottom:0}
/* Spaltenzahl */
.sb-cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-cols--3w{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.7fr)} /* dritte Spalte breiter */
/* Ausrichtung im Raster */
.sb-center{align-items:flex-start} /* Klasse .sb-center richtet oben aus. Für Mittig: center eintragen */
.sb-cols--stretch{align-items:stretch} /* alle Kinder gleich hoch */
/* Quer-Box: Kind über die volle Breite, in eigener Zeile (z. B. für "Über mich") */
.sb-cols>.sb-quer{grid-column:1 / -1}
/* Sonderraster .sb-cols--3w: Karte 1 und 2 gleich hoch, Karte 3 rechts über beide Zeilen mit eigener Höhe */
.sb-cols.sb-cols--3w{align-items:start;grid-template-rows:auto 1fr;row-gap:0}
.sb-cols--3w>:nth-child(-n+2){align-self:stretch}
.sb-cols--3w>:nth-child(3){grid-column:3;grid-row:1 / span 2;align-self:start}
/* Merkmale (.sb-feature): Nr. 3 direkt unter Nr. 1 (links), Nr. 2 rechts über die volle Höhe */
.sb-cols:has(>.sb-feature){grid-template-rows:auto 1fr;align-items:start}
.sb-cols>.sb-feature:nth-child(1){grid-column:1;grid-row:1}
.sb-cols>.sb-feature:nth-child(2){grid-column:2;grid-row:1 / span 2}
.sb-cols>.sb-feature:nth-child(3){grid-column:1;grid-row:2}
/* ---------------------------------------------------------------------
8 BAUSTEINE
--------------------------------------------------------------------- */
/* Karten (.sb-card-box) */
.sb-card-box{background:var(--sb-box);color:var(--sb-text);border-radius:var(--sb-radius);box-shadow:0 4px 22px rgba(60,50,20,.10);padding:clamp(16px,2.5vw,28px)}
.sb-card-box img{display:block;width:100%;margin-bottom:1em}
.sb-card-box :is(h1,h2,h3,h4){color:var(--sb-heading)}
.sb-cols>.sb-card-box{align-self:stretch;margin:0} /* Karten im Raster: volle Zeilenhöhe, kein Zusatzabstand */
/* Kartenbilder */
.sb-card-box--icon img{width:64px;height:64px;margin-bottom:.9em} /* Karte mit kleinem Icon: Klasse .sb-card-box--icon */
.sb-cols .sb-card-box.sb-quer img{aspect-ratio:16/5;object-fit:cover} /* Quer-Box: flaches Bild, zugeschnitten */
/* Bilder auf höchstens 64 px: nur Karten/Merkmale mit der Klasse .sb-img-64 */
body .sb-cols .sb-card-box.sb-img-64 img,
.sb-feature.sb-img-64 img{
width:auto;
height:auto;
max-width:64px;
max-height:64px;
aspect-ratio:auto;
object-fit:contain;
}
/* Bild mit überlappender Zitatkarte (.sb-figure) */
.sb-figure{position:relative;padding-bottom:70px}
.sb-figure img{display:block;width:100%}
.sb-figure__card{position:absolute;left:8%;bottom:0;max-width:78%;padding:20px 24px;background:var(--sb-box);color:var(--sb-text);border-radius:var(--sb-radius);font-style:italic}
.sb-figure__card p{margin:0}
/* Einleitungsblock, zentriert und schmal (.sb-intro) */
.sb-intro{max-width:760px;margin:0 auto 2.2em;text-align:center}
.sb-intro:last-child{margin-bottom:0}
.sb-intro>:last-child{margin-bottom:0}
/* Banner über die volle Boxbreite mit Textkasten (.sb-banner) */
.sb-banner{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:clamp(380px,44vw,610px);margin-inline:calc(clamp(16px,3vw,36px) * -1);padding:clamp(24px,5vw,64px) clamp(16px,6vw,90px);overflow:hidden}
.sb-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sb-banner>div{position:relative;width:min(110%,560px);padding:clamp(24px,4vw,56px);background:var(--sb-box);border-radius:var(--sb-radius)}
.sb-banner h1{margin-bottom:.5em}
.sb-banner>div>:last-child{margin-bottom:0}
/* Banner mit Siegeln im freien Platz links unter dem Bild (Klasse sb-banner--siegel zusätzlich zu sb-banner) */
.sb-banner--siegel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-rows:521px auto;align-items:start;column-gap:clamp(16px,3vw,40px);height:auto;min-height:0;padding:0 clamp(16px,6vw,90px) 0 0}
.sb-banner--siegel img{position:absolute;top:0;left:0;width:100%;height:521px;object-fit:cover} /* Hintergrundbild nur in der oberen Zeile */
.sb-banner--siegel>div:not(.sb-logos){grid-column:2;grid-row:1 / span 2;margin-top:clamp(24px,5vw,64px)}
.sb-banner--siegel>.sb-logos{grid-column:1;grid-row:2;width:auto;padding:16px 0 24px clamp(16px,6vw,90px);background:none;border-radius:0;justify-content:flex-start}
.sb-banner--siegel .sb-logos img{position:static;width:auto;height:90px;padding-left:1.9em;margin-top:2.9em;}
/* Merkmale mit Icon (.sb-feature); die Anordnung im Raster steht in Abschnitt 7 */
.sb-feature img{width:36px;height:36px;margin-bottom:.6em}
.sb-feature h3{font-size:1rem;margin-bottom:.4em}
/* Logos nebeneinander (.sb-logos): feste Höhe 90 px, Breite automatisch */
.sb-logos{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:center}
.sb-logos img{width:auto;height:90px}
/* Bilder-Raster (.sb-bilder): zwei Spalten, die erste etwas breiter */
.sb-bilder{display:grid;grid-template-columns:.9fr .5fr;gap:1.5rem}
/* Aufzählung neben schwebendem Bild: Punkte bündig innerhalb der Textspalte */
.sb-liste-buendig{display:flow-root;margin:0 0 1em;padding-left:1.4em}
/* Bild mit weichen Rändern (Klasse .sb-weich am ![]()
). Randbreite über --sb-fade einstellbar */
.sb-weich{
--sb-fade:10%;
-webkit-mask-image:
linear-gradient(to right,transparent,#000 var(--sb-fade),#000 calc(100% - var(--sb-fade)),transparent),
linear-gradient(to bottom,transparent,#000 var(--sb-fade),#000 calc(100% - var(--sb-fade)),transparent);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(to right,transparent,#000 var(--sb-fade),#000 calc(100% - var(--sb-fade)),transparent),
linear-gradient(to bottom,transparent,#000 var(--sb-fade),#000 calc(100% - var(--sb-fade)),transparent);
mask-composite:intersect;
}
/* Aufhänger über einer Überschrift (.akzent-headline), z. B. ERFAHRUNG · HALTUNG · QUALITÄT */
.akzent-headline{font-weight:300;text-transform:uppercase;letter-spacing:.2em;color:var(--sb-heading)}
/* FAQ, aufklappbar. Einzelne Frage: details.sb-faq. Übergeordnete Gruppe: details.sb-faq-gruppe mit mehreren .sb-faq darin */
.sb-faq,.sb-faq-gruppe{margin:0 0 12px;padding:0 24px;border-radius:var(--sb-radius)}
.sb-faq{background:var(--sb-box);box-shadow:0 4px 22px rgba(60,50,20,.10)}
.sb-faq-gruppe{background:color-mix(in srgb,var(--sb-accent) 22%,var(--sb-box))}
.sb-faq[open],.sb-faq-gruppe[open]{padding-bottom:20px}
:is(.sb-faq,.sb-faq-gruppe)>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;list-style:none;cursor:pointer;font-weight:700;color:var(--sb-heading)}
:is(.sb-faq,.sb-faq-gruppe)>summary::-webkit-details-marker{display:none}
:is(.sb-faq,.sb-faq-gruppe)>summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--sb-primary) 14%,transparent);color:var(--sb-primary);text-align:center;font-size:1.2rem;font-weight:400;line-height:28px}
:is(.sb-faq,.sb-faq-gruppe)[open]>summary::after{content:"\2212"}
:is(.sb-faq,.sb-faq-gruppe)>:last-child{margin-bottom:0}
.sb-faq-gruppe>summary>h3{margin:0;font-size:1.2rem;color:inherit}
/* Anpassung Testimonials (.tm-item) */
.tm-item blockquote{
position:relative;
margin:0 0 1em;
padding:5px 0 0 !important; /* oben Platz für das Anführungszeichen */
border:0;
}
.tm-item blockquote::before{
content:"";
position:absolute;
top:10px;
left:0;
width:32px;
height:32px;
background:url("/wp-content/uploads/2026/10/quotes-orange.png") no-repeat center / contain;
}
.tm-item blockquote,
.tm-item blockquote p,
.tm-item blockquote em,
.tm-item blockquote strong,
.tm-item blockquote span{
font-style:normal !important;
font-weight:400 !important;
}
.tm-item blockquote p{font-size:16px;text-align:left}
.tm-item blockquote p:first-child{text-indent:5ch}
.tm-item blockquote p:last-child{margin-bottom:0}
/* ---------------------------------------------------------------------
9 KNÖPFE
Normalzustand = angehoben mit Schatten, Hover = flach (gegenüber dem
ursprünglichen Verhalten umgedreht).
Textfarbe der Primär-Variante: FEST weiß, 75 % deckend.
--------------------------------------------------------------------- */
.sb-btn{display:inline-block;padding:12px 26px;border:2px solid transparent;border-radius:999px;font-weight:400;line-height:1.2;text-decoration:none!important;transition:transform .15s,box-shadow .2s;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.14)}
.sb-btn:hover{transform:none;box-shadow:none}
.sb-btn--primaer{background:var(--sb-primary);color:#ffffffbf!important}
.sb-btn--akzent{background:var(--sb-accent);color:var(--sb-accent-fg)!important}
.sb-btn--rahmen{border-color:currentColor;color:inherit!important}
/* ---------------------------------------------------------------------
10 EDITOR-INHALTE (Classic Editor)
--------------------------------------------------------------------- */
.alignleft{float:left;margin:.3em 1.5em 1em 0}.alignright{float:right;margin:.3em 0 1em 1.5em}.aligncenter{display:block;margin:0 auto 1em}
.gallery-caption{font-size:.9rem;opacity:.75}
/* Zitate () */
blockquote p{color:var(--sb-heading);font-size:18px;text-align:center;font-weight:500;font-style:italic}
/* Bildunterschriften: Browser-Rand weg, feste Pixelbreite aus dem Editor ignorieren, Text rechtsbündig unter dem Bild */
:where(figure.wp-caption){margin:0 0 1em}
figure.wp-caption{width:fit-content!important;max-width:100%}
.wp-caption img{display:block;max-width:100%;height:auto}
.wp-caption-text{margin:.4em 0 0;font-size:.8rem;opacity:.75;text-align:right}
/* ---------------------------------------------------------------------
11 BLOG
--------------------------------------------------------------------- */
main>.sb-card-box+.sb-card-box{margin-top:20px} /* nur Karten direkt unter , nicht die Karten im Raster */
main>.sb-card-box:first-child{margin-top:20px}
.sb-card-box h2{margin-top:0}.sb-card-box h2 a{text-decoration:none;color:var(--sb-heading)}
.sb-meta{font-size:.9rem;opacity:.7}
.pagination{margin:20px 0;text-align:center}
.pagination .page-numbers{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--sb-sec-2-bg);text-decoration:none;margin:0 2px}
.pagination .current{background:var(--sb-primary);color:var(--sb-primary-fg)}
/* ---------------------------------------------------------------------
12 FOOTER (im weißen Bereich, wie der Header)
Spaltenzahl und Inhalte: Customizer + Design > Widgets (Footer 1 bis 4)
--------------------------------------------------------------------- */
.sb-footer{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:clamp(24px,4vw,48px);padding-bottom:28px;font-size:var(--sb-fs-footer)}
.sb-footer section{margin-bottom:1.2em}
.sb-footer h3{font-size:1.05rem;margin-bottom:.5em}
.sb-footer ul{margin:0;padding-left:1.1em}
.sb-footer__bottom p{margin:0}
.sb-footer__bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:center}
.sb-footer .sb-menu a{padding:6px 12px;font-size:inherit}
/* ---------------------------------------------------------------------
13 FORMULARE (Spezifität 0, damit Plugin-Styles Vorrang haben)
Absende-Knöpfe: Normalzustand leicht aufgehellt, Hover ohne Filter
(gegenüber dem ursprünglichen Verhalten umgedreht).
--------------------------------------------------------------------- */
:where(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=search],input[type=number],textarea,select){width:100%;max-width:100%;padding:10px 14px;border:1px solid #ccc;border-radius:10px;background:#fff;color:#333;font:inherit}
:where(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=search],input[type=number],textarea,select):focus{border-color:var(--sb-primary);outline:2px solid color-mix(in srgb,var(--sb-primary) 35%,transparent);outline-offset:0}
:where(input[type=submit],button[type=submit]){padding:12px 26px;border:0;border-radius:999px;background:var(--sb-primary);color:var(--sb-primary-fg);font:inherit;font-weight:700;cursor:pointer;filter:brightness(1.06)}
:where(input[type=submit],button[type=submit]):hover{filter:none}
::placeholder{color:#8a8a8a}
/* Forminator: Absende-Knopf aller Formulare (!important nötig, das Plugin arbeitet mit Formular-IDs im Selektor) */
.forminator-ui.forminator-design--material .forminator-button-submit{border-radius:25px!important;padding-inline:25px!important}
/* ---------------------------------------------------------------------
14 MOBIL (bis 860 px Breite)
--------------------------------------------------------------------- */
@media (max-width:860px){
/* Grundlagen */
h1{font-size:calc(var(--sb-fs-h1) * .8)}h2{font-size:calc(var(--sb-fs-h2) * .85)}
body{padding:12px}
/* Header & Navigation: Burger-Menü */
.sb-header{flex-wrap:wrap;gap:12px;padding-block:12px}
.sb-header-center .sb-header{flex-direction:row}
.sb-burger{display:block}
#sb-nav{display:none;flex-basis:100%}
#sb-nav.is-open{display:block}
.sb-header .sb-menu{flex-direction:column}
.sb-menu .sub-menu{display:block;position:static;box-shadow:none;padding:0 0 0 12px}
/* Spalten: alles untereinander */
.sb-cols--2,.sb-cols--3,.sb-cols--3w{grid-template-columns:1fr}
.sb-cols.sb-cols--3w{grid-template-rows:none;row-gap:20px}
.sb-cols--3w>:nth-child(3){grid-column:auto;grid-row:auto}
.sb-cols:has(>.sb-feature){grid-template-rows:none}
.sb-cols>.sb-feature:nth-child(n){grid-column:auto;grid-row:auto}
/* Bausteine */
@media (max-width:860px){
/* Banner mobil: Hintergrundbild ausblenden, Text bleibt */
.sb-banner{display:block;height:auto;min-height:0;margin-inline:0;padding:0;overflow:visible}
.sb-banner>img,.sb-banner>p:has(>img){display:none}
.sb-banner>div{width:100%;padding:24px}
}
.sb-figure{padding-bottom:0}.sb-figure__card{position:static;max-width:none;margin-top:-30px;margin-inline:12px}
.alignleft,.alignright{float:none;display:block;margin:0 auto 1em}
/* Footer */
.sb-footer{grid-template-columns:1fr}
}
/* ---------------------------------------------------------------------
15 ADMIN-LEISTE (nur für eingeloggte Nutzer)
WordPress: 32 px am Desktop, 46 px bis 782 px, ab 600 px nicht mehr fixiert
--------------------------------------------------------------------- */
.admin-bar .sb-header{top:32px}
@media (max-width:782px){.admin-bar .sb-header{top:46px}}
@media (max-width:600px){.admin-bar .sb-header{top:0}}