: kein JavaScript nötig, tastaturbedienbar,
und der Inhalt steht auch zugeklappt im HTML - also für
Suchmaschinen und KI-Systeme lesbar.
========================================================= */
.gd-akk {
background: #EDEDED;
border-radius: 12px;
margin: .7rem 0;
overflow: hidden;
}
.gd-akk > summary {
display: flex; align-items: center; gap: .6em;
padding: .8em 1.15em;
font-size: .98rem;
font-weight: 400;
cursor: pointer;
list-style: none;
}
.gd-akk > summary::-webkit-details-marker { display: none; }
/* Dreieck links vor dem Titel, wie in der Vorlage. */
.gd-akk > summary::before {
content: '';
flex: 0 0 auto;
width: 0; height: 0;
border-left: .34em solid currentColor;
border-top: .27em solid transparent;
border-bottom: .27em solid transparent;
transition: transform .2s ease;
opacity: .7;
}
.gd-akk[open] > summary::before { transform: rotate(90deg); }
.gd-akk > summary:hover { background: #E5E5E5; }
/* Kein Einzug: der Inhalt beginnt buendig unter dem Titel, nicht
eingerueckt neben dem Dreieck - das wirkte wie ein Fehler. */
.gd-akk-inhalt { padding: 0 1.15em 1.1em; }
.gd-akk-inhalt > :first-child { margin-top: 0; }
.gd-akk-inhalt > :last-child { margin-bottom: 0; }
.gd-akk-inhalt ul { margin: .6em 0; padding-left: 1.15em; }
.gd-akk-inhalt li { margin: .25em 0; }
/* Auf dunklem Grund heller absetzen. */
.fs-dark .gd-akk { background: rgba(255, 255, 255, .10); }
.fs-dark .gd-akk > summary:hover { background: rgba(255, 255, 255, .15); }
/* Bilder im Fliesstext */
.md-bild { margin: 1.6rem 0; }
.md-bild img { width: 100%; height: auto; display: block; border-radius: var(--radius, 12px); }
.md-bild figcaption { margin-top: .5rem; font-size: .88rem; opacity: .75; }
/* =========================================================
Feinschliff nach Vorlage
========================================================= */
/* Hero: Startseite fast bildschirmfuellend, Unterseiten halbe Hoehe. */
main#inhalt > section.fs-hero-klein {
min-height: 52vh;
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.fs-hero-klein .fs-hero-logo { max-width: min(82%, 520px); }
.fs-hero-klein .fs-hero-title { margin-bottom: 0; }
/* Zwischentitel: schwarz, kraeftiger und groesser als der Fliesstext. */
.fs-band .prose h2,
main#inhalt > section.fs-gradient .prose h2 {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.2;
margin: 2rem 0 .8rem;
color: #fff;
}
.fs-band .prose h2:first-child { margin-top: 0; }
.fs-band .prose h3 {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
margin: 1.6rem 0 .5rem;
color: #fff;
}
/* Innerhalb der hellen Akkordeon-Karten bleiben Titel dunkel, sonst
waeren sie auf Hellgrau unlesbar. */
.gd-akk-inhalt h2, .gd-akk-inhalt h3 { color: var(--ink) !important; }
/* Links im Fliesstext: schwarz und unterstrichen, nicht farbig. */
main#inhalt > section.fs-gradient .prose a:not(.fs-btn),
.gd-akk-inhalt a:not(.fs-btn) {
color: var(--ink);
text-decoration: underline;
text-underline-offset: .16em;
text-decoration-thickness: 1px;
}
main#inhalt > section.fs-gradient .prose a:not(.fs-btn):hover,
.gd-akk-inhalt a:not(.fs-btn):hover { text-decoration-thickness: 2px; }
/* Aufzaehlungen mit echten Punkten. */
.fs-band .prose ul:not(.gd-liste-haken) { list-style: disc; padding-left: 1.3em; margin: .9em 0; }
/* Gutzeichen statt Punkt: sonst erscheinen beide. */
.fs-band .prose ul.gd-liste-haken { list-style: none; padding-left: 0; }
.fs-band .prose ol { padding-left: 1.4em; margin: .9em 0; }
.fs-band .prose li { margin: .35em 0; }
/* Bewertungsblock mit eigenem Hintergrundbild (fest, nicht bearbeitbar). */
/* (alter Bewertungsblock entfernt - ersetzt weiter unten) */Versalien, gleiche Auszeichnung wie die Zwischentitel. */
/* H1 einheitlich: gleiche Auszeichnung wie die Zwischentitel, keine
Versalien. Mit main#inhalt davor, damit die Zebra-artigen Regeln der
Vorlage sie nicht ueberschreiben. */
main#inhalt .fs-hero-title,
.fs-hero-title {
font-family: var(--font-display);
font-weight: 900;
/* Versalien und gross: Die H1 ist das Erste, was man sieht, und die
Marke richtet sich an junge Leute - da darf sie zupacken.
Negative Sperrung, damit die Grossbuchstaben nicht auseinanderfallen. */
text-transform: uppercase;
font-size: clamp(3rem, 8.5vw, 6.5rem);
letter-spacing: -.03em;
line-height: .95;
}
/* Logo auf Unterseiten so breit wie auf der Startseite. */
.fs-hero-klein .fs-hero-logo { max-width: min(88%, 620px); }
/* =========================================================
Listen: dritte Art mit Gutzeichen, sanftes Einblenden
========================================================= */
.gd-liste { margin: .9em 0; }
.gd-liste li { margin: .35em 0; }
/* Liste mit Gutzeichen */
.gd-liste-haken {
list-style: none;
padding-left: 0;
}
.gd-liste-haken li {
position: relative;
padding-left: 1.9em;
}
.gd-liste-haken li::before {
content: '';
position: absolute;
left: .25em; top: .42em;
width: .62em; height: .34em;
border-left: .17em solid currentColor;
border-bottom: .17em solid currentColor;
transform: rotate(-45deg);
}
/* Einträge blenden nacheinander ein, sobald die Liste sichtbar wird.
Ohne JavaScript oder bei reduzierter Bewegung sind sie sofort da -
Inhalt darf nie von einer Animation abhängen. */
.js .gd-liste[data-fade] > li {
opacity: 0;
transform: translateY(.5rem);
}
.js .gd-liste[data-fade].ist-sichtbar > li {
opacity: 1;
transform: none;
transition: opacity .5s ease, transform .5s ease;
transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
.js .gd-liste[data-fade] > li { opacity: 1; transform: none; }
.js .gd-liste[data-fade].ist-sichtbar > li { transition: none; }
}
/* Kopfzeile eines Akkordeon-Punkts im Studio */
/* =========================================================
Mobile Navigation
Kein Kreis um den Hamburger, Verlaufsfläche beim Öffnen,
Menüpunkte in Versalien mit Schriftdicke 900.
========================================================= */
/* Hamburger: weisses Icon direkt auf dem Verlauf, ohne Kreis. */
@media (max-width: 900px) {
.burger {
width: 44px; height: 44px;
background: none;
border-radius: 0;
box-shadow: none;
}
/* Schwarz auf dem Verlauf: besser sichtbar als Weiss, besonders
am gelben Ende. */
.burger span { background: var(--ink); }
}
/* Menüfläche im Markenverlauf statt Schwarz. */
.mm { background: var(--accent-gradient); color: var(--ink); }
.mm a, .mm a:hover, .mm a:focus { color: var(--ink); }
/* Menüpunkte: Versalien, Schriftdicke 900, durchgehend Schwarz.
Auf dem Handy zählt der Kontrast mehr als die Feinheit - Schwarz
trägt über den ganzen Verlauf, Weiss verliert am gelben Ende. */
.mm-main {
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
font-size: clamp(1.25rem, 5.2vw, 1.6rem);
color: var(--ink);
}
.mm a.mm-main { color: var(--ink); }
/* Aktiver Punkt zusätzlich mit Unterlinie. */
.mm-main::after {
content: ""; position: absolute; left: 0; right: 0; bottom: .1em;
height: 3px; background: currentColor;
transform: scaleX(0); transform-origin: left center;
transition: transform .32s cubic-bezier(.65, 0, .2, 1);
}
.mm a.mm-main[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .mm-main:hover::after { transform: scaleX(1); } }
.mm-sub a {
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
font-size: .95rem;
color: var(--ink);
opacity: 1;
}
/* Punkte blenden nacheinander ein, sobald sich das Menü öffnet -
dieselbe Handschrift wie bei den Listen im Inhalt. */
.js .mm .mm-item {
opacity: 0;
transform: translateY(.7rem);
}
body.menu-open .mm .mm-item {
opacity: 1;
transform: none;
transition: opacity .45s ease, transform .45s ease;
transition-delay: calc(.18s + var(--i, 0) * 65ms);
}
@media (prefers-reduced-motion: reduce) {
.js .mm .mm-item { opacity: 1; transform: none; }
body.menu-open .mm .mm-item { transition: none; }
}
/* =========================================================
Footer: eine zentrierte Zeile, darunter der Agentur-Hinweis
========================================================= */
.site-footer {
background: var(--petrol);
color: #fff;
padding: clamp(2.2rem, 5vw, 3.2rem) 0 clamp(2.4rem, 5vw, 3.4rem);
text-align: center;
}
.footer-zeile {
margin: 0;
font-size: .95rem;
font-weight: 700;
line-height: 1.7;
}
.footer-zeile a { color: var(--accent-from); text-decoration: none; }
.footer-zeile a:hover { text-decoration: underline; }
.footer-trenner { opacity: .45; margin: 0 .15em; font-weight: 400; }
.footer-agentur {
margin: .9rem 0 0;
font-size: .8rem;
}
/* Ganzer Ausdruck als Link, im selben Gruen wie die Zeile darueber -
aber kleiner, damit die Rechtslinks fuehrend bleiben. */
.footer-agentur a { color: var(--accent-from); text-decoration: none; }
.footer-agentur a:hover { text-decoration: underline; }
/* =========================================================
Google-Bewertungen
========================================================= */
/* Die Zebra-Regel `main#inhalt > section:nth-of-type(odd|even)` enthaelt
eine ID und schlaegt jede reine Klassenregel. Deshalb hier dieselbe
Struktur im Selektor, sonst bleibt die Flaeche weiss oder durchsichtig. */
main#inhalt > section.fs-bewertungen,
.fs-bewertungen {
position: relative;
/* Mittelgrau: das schwarz-weisse Zytglogge-Motiv hat darauf genug
Kontrast, ohne dass die weissen Karten erschlagen werden. */
background: #777777;
color: #fff;
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(2.6rem, 5vw, 3.8rem);
overflow: hidden;
isolation: isolate;
}
/* Das Motiv ist schwarz-weiss. Mit "multiply" wird Weiss zur Flaechenfarbe
und Schwarz bleibt Schwarz - dadurch verschwinden die hellen Bereiche des
Bildes im Grau, statt als weisse Flecken stehenzubleiben.
isolation sorgt dafuer, dass sich das Mischen auf diese Sektion beschraenkt
und nicht mit dem darunterliegenden Verlauf rechnet. */
.bw-grund {
/* Ueberstand oben und unten, damit beim Verschieben keine Kante
sichtbar wird - wie beim Bild im Kopfbereich. */
position: absolute; inset: -12% 0; z-index: 0;
mix-blend-mode: multiply;
will-change: transform;
}
.bw-grund img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Alles ueber dem Hintergrund: Ohne diese Zeile liegt ein Bereich
unter der Flaeche mit mix-blend-mode und bekommt das Reifenspur-
Muster ueber sich gelegt. */
.fs-bewertungen > .wrap,
.fs-bewertungen > .sf-band,
.fs-bewertungen > .bw-lauf { position: relative; z-index: 1; }
main#inhalt > section.fs-bewertungen .bw-titel,
.bw-titel {
margin: 0 0 clamp(1.4rem, 3.2vw, 2rem);
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.2;
color: #FFFFFF;
text-align: center;
}
/* Waagrechter Lauf: rollt mit dem Finger, Pfeile zum Blättern. */
.bw-lauf { position: relative; }
.bw-spur {
display: flex;
/* Mehr Abstand: Die versetzte Ebene ragt links heraus. */
gap: 1.8rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: .3rem clamp(1.1rem, 4vw, 2.6rem) 1.6rem;
scrollbar-width: none;
}
.bw-spur::-webkit-scrollbar { display: none; }
.bw-karte {
position: relative;
flex: 0 0 clamp(240px, 78vw, 300px);
scroll-snap-align: start;
background: #fff;
color: var(--ink);
border-radius: 12px;
padding: 1rem 1.1rem 1.2rem;
}
/* Versetzte Verlaufsebene wie bei den Selfies: gleiche Grösse, gleiche
Rundung, nach links unten geschoben. Ersetzt den weichen Schatten. */
.bw-karte::before {
content: '';
position: absolute;
inset: 0;
transform: translate(-10px, 10px);
background: var(--accent-gradient);
border-radius: 12px;
z-index: -1;
}
.bw-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.bw-avatar {
width: 2.2rem; height: 2.2rem; flex: 0 0 auto;
border-radius: 50%;
background: var(--accent-from);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: .95rem;
}
.bw-person { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.bw-person b { font-size: .92rem; }
.bw-datum { font-size: .76rem; color: var(--muted); }
.bw-google { flex: 0 0 auto; }
.bw-sterne { color: #F5B300; letter-spacing: .08em; font-size: 1rem; }
/* Karten stehen oben buendig, nicht auf gleicher Hoehe: sonst wuerde die
laengste Bewertung alle anderen aufblaehen. */
.bw-karte { align-self: start; }
.bw-text { margin: .5rem 0 0; font-size: .9rem; line-height: 1.55; }
.bw-text p { margin: 0; }
/* Gekuerzt per CSS - der volle Text steht im HTML und bleibt fuer
Suchmaschinen und Screenreader lesbar. */
.bw-text.ist-lang p {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bw-text.ist-offen p {
display: block;
overflow: visible;
}
.bw-mehr {
margin-top: .5rem;
padding: 0;
border: 0; background: none;
color: var(--muted);
font: inherit; font-size: .85rem;
cursor: pointer;
text-decoration: underline;
text-underline-offset: .16em;
}
.bw-mehr:hover { color: var(--ink); }
.bw-pfeil {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 2;
width: 2.4rem; height: 2.4rem;
border: 0; border-radius: 50%;
background: #fff; color: var(--ink);
font-size: 1.4rem; line-height: 1;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
display: flex; align-items: center; justify-content: center;
}
.bw-pfeil-links { left: .4rem; }
.bw-pfeil-rechts { right: .4rem; }
.bw-pfeil[hidden] { display: none; }
@media (max-width: 700px) { .bw-pfeil { display: none; } }
/* Zeile unter der Ueberschrift: helle Plakette mit Sternen, Anzahl und
Durchschnitt. Auf schmalen Schirmen brechen Sterne und Text umeinander,
statt die Plakette zu sprengen. */
.bw-summe {
margin: -.4rem 0 clamp(1.5rem, 3.4vw, 2.2rem);
text-align: center;
}
.bw-plakette {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .3rem .7rem;
max-width: 100%;
padding: .6em 1.2em;
background: #fff;
color: var(--ink);
border-radius: 999px;
font-size: clamp(.88rem, 2.4vw, 1rem);
line-height: 1.4;
text-decoration: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
a.bw-plakette { transition: transform .18s ease, box-shadow .18s ease; }
a.bw-plakette:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, .24); }
.bw-summe-sterne { color: #F5B300; letter-spacing: .06em; font-size: 1.05em; white-space: nowrap; }
.bw-summe-text { white-space: nowrap; }
/* Unter 480px: Sterne oben, Text darunter. */
@media (max-width: 480px) {
.bw-plakette { border-radius: 18px; padding: .7em 1.1em; }
.bw-summe-sterne { flex: 0 0 100%; }
.bw-summe-text { flex: 0 0 100%; white-space: normal; }
}
.visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Die Intro-Animation der Vorlage ist abgeschaltet (siehe layout.php).
Sie deckte den Inhalt beim ersten Aufruf kurz ab; Lighthouse fand
dadurch kein LCP-Element und meldete NO_LCP.
Sicherheitshalber auch hier: nichts verdeckt den Inhalt. */
#introOverlay, #introWrap { display: none !important; }
main#inhalt { opacity: 1 !important; }
/* Blogbeiträge: heller Schleier über dem Titelbild.
Das Beitragsbild ist ein Foto und oft dunkel oder unruhig - ohne
Aufhellung wäre die Überschrift darauf nicht lesbar. Nur hier, nicht
auf den übrigen Seiten, deren Kopfgrafik bewusst hell ist. */
.is-detail .fs-hero-bg::after {
content: '';
position: absolute; inset: 0;
background: rgba(255, 255, 255, .5);
pointer-events: none;
}
/* =========================================================
Blogbeitrag: zwei Spalten zu je 50 %, ohne Zwischenraum.
Die rechte Spalte ist bei allen Beiträgen gleich und steht
fest im Template - sie ist im Studio nicht bearbeitbar.
========================================================= */
.fs-beitrag-grid {
display: grid;
gap: 0;
align-items: start;
}
@media (min-width: 900px) {
.fs-beitrag-grid { grid-template-columns: 1fr 1fr; }
.fs-beitrag-grid > .prose { padding-right: clamp(1.5rem, 4vw, 3rem); }
.fs-autor { padding-left: clamp(1.5rem, 4vw, 3rem); }
}
@media (max-width: 899px) {
.fs-autor { margin-top: clamp(2rem, 6vw, 3rem); }
}
/* Kein eigener Kreis und keine Flaeche: das Bild bringt den Kreis selbst
mit. Ein zusaetzlicher weisser Grund waere darunter sichtbar. */
.fs-autor-bild {
width: min(62vw, 320px);
margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.fs-autor-bild img { width: 100%; height: auto; display: block; }
.fs-autor p { margin: 0 0 1rem; }
/* Weisser Button, wie in der Vorlage. */
.fs-btn-weiss {
display: inline-flex; align-items: center; gap: .6em;
margin-top: .6rem;
padding: .72em 1.5em;
background: #fff;
color: var(--ink);
font-weight: 700;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
transition: transform .18s ease, box-shadow .18s ease;
}
.fs-btn-weiss:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.fs-btn-weiss .fs-ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
/* =========================================================
Sanftes Einblenden beim Scrollen.
Die Klassen setzt das JavaScript - ohne JavaScript ist alles
sofort sichtbar, weil die Regeln dann gar nicht greifen.
========================================================= */
.gd-faden {
opacity: 0;
transform: translateY(1.1rem);
}
.gd-faden.ist-da {
opacity: 1;
transform: none;
transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
/* Versatz nur bei Kacheln und Karten (--i wird dort gesetzt).
Textbausteine erscheinen ohne Verzoegerung, sobald sie in den
Blick kommen - sonst wartet man beim Lesen auf den naechsten Absatz. */
transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
.gd-faden { opacity: 1; transform: none; }
.gd-faden.ist-da { transition: none; }
}
/* =========================================================
Startseite: Blog-Band schliesst nahtlos an das Band darueber an.
Beide tragen fs-gradient, wodurch der Verlauf zweimal neu beginnt
und eine sichtbare Kante entsteht. Statt background-attachment
(das auf Handys ruckelt) bekommt das zweite Band keinen eigenen
Verlauf mehr - es sitzt optisch im selben Band.
========================================================= */
/* Blog-Kacheln in einem statt einer : Damit greift die
Zebra-Regel der Vorlage nicht, die abwechselnd Weiss setzt. Der Verlauf
ist derselbe wie im Band darueber und geht ohne Kante ineinander ueber,
weil beide waagrecht verlaufen und die Farben identisch sind. */
/* Die Blog-Kacheln liegen jetzt INNERHALB der Sektion darueber (siehe
home.php). Damit traegt eine einzige Flaeche den Verlauf - der schraege
Verlauf laeuft ohne Kante durch, ohne Rechnerei im JavaScript. */
.fs-band-blog {
background: none;
padding-block: clamp(1.8rem, 4vw, 2.8rem) 0;
}
.fs-band-blog .fs-band-title { margin-top: 0; }
/* Blog-Kacheln: sanfter Zoom und Pfeil beim Überfahren der ganzen Kachel,
nicht nur des Knopfes. */
.fs-card { position: relative; overflow: hidden; }
.fs-card-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.fs-card-img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
.fs-card:hover .fs-card-img,
.fs-card:focus-within .fs-card-img { transform: scale(1.06); }
/* Der Pfeil im Knopf rückt nach rechts, sobald die Kachel berührt wird. */
.fs-card .fs-card-btn .fs-ico {
transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.fs-card:hover .fs-card-btn .fs-ico,
.fs-card:focus-within .fs-card-btn .fs-ico { transform: translateX(.35em); }
.fs-card .fs-card-btn { transition: box-shadow .3s ease, transform .3s ease; }
.fs-card:hover .fs-card-btn { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.22); }
}
/* Die ganze Kachel anklickbar machen: der Knopf legt sich unsichtbar
darüber, bleibt aber für Screenreader und Tastatur ein normaler Link. */
/* Die ganze Kachel ist anklickbar - umgesetzt im JavaScript, weil ein
CSS-Feld an overflow:hidden der Kachel scheitert. */
.fs-card-title { position: relative; z-index: 2; }
.fs-card-btn { position: relative; z-index: 2; }
/* Zeigefinger über der ganzen Kachel, nicht nur über dem Knopf. */
.fs-card { cursor: pointer; }
/* Kacheltitel: H3, aber mit der Auszeichnung der Zwischentitel. */
.fs-band-blog .fs-card-title,
.fs-card-title {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(1.15rem, 1.9vw, 1.35rem);
line-height: 1.2;
color: #fff;
margin: 0;
}
/* Blog-Übersicht: Einleitung über den Kacheln. */
.fs-blog-intro { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
/* Kacheln behalten ihre Breite, auch wenn die letzte Reihe nicht voll ist. */
.fs-cards { justify-content: start; }
/* =========================================================
Unterseiten: zweite Sektion zweispaltig, je 50 %.
Ist die rechte Spalte leer, läuft der Inhalt über die
volle Breite - so bleiben einspaltige Seiten möglich.
========================================================= */
.fs-zwei-spalten {
display: grid;
gap: 0;
align-items: start;
}
@media (min-width: 900px) {
.fs-zwei-spalten:not(.ist-einspaltig) { grid-template-columns: 1fr 1fr; }
.fs-zwei-spalten:not(.ist-einspaltig) > :first-child { padding-right: clamp(1.5rem, 4vw, 3rem); }
.fs-zwei-spalten:not(.ist-einspaltig) > :last-child { padding-left: clamp(1.5rem, 4vw, 3rem); }
}
@media (max-width: 899px) {
.fs-zwei-spalten > :last-child:not(:first-child) { margin-top: clamp(2rem, 6vw, 3rem); }
}
.fs-zwei-spalten.ist-einspaltig > :first-child { max-width: var(--measure); }
/* Buttons im Fliesstext: weisse Pillen, untereinander. */
.gd-button-zeile { margin: .5rem 0; }
.gd-button-zeile .fs-btn-weiss { margin-top: 0; }
/* Buttons: kräftige Schrift, dickere Symbole, keine Unterstreichung. */
main#inhalt .fs-btn-weiss,
.fs-btn-weiss {
font-weight: 900;
text-decoration: none;
}
.fs-btn-weiss:hover { text-decoration: none; }
.fs-btn-weiss .fs-ico { stroke-width: 2.6; width: 1.15em; height: 1.15em; }
.gd-button-zeile a { text-decoration: none; }
/* Bilder mit dem Haken «kleine Anzeige»: höchstens 300 Pixel, linksbündig. */
.md-bild.ist-klein { max-width: 300px; margin-inline: 0; }
/* Footer: Zeichen der Verlinkungen zwischen den beiden Zeilen. */
.footer-netz {
display: flex; justify-content: center; align-items: center;
gap: 1.3rem;
margin: 1rem 0 .8rem;
}
.footer-netz a {
display: inline-flex;
color: inherit;
opacity: .85;
transition: opacity .2s ease, transform .2s ease;
}
.footer-netz a:hover { opacity: 1; transform: translateY(-2px); }
.footer-netz svg { width: 28px; height: 28px; display: block; }
/* Terminbuchung: eingebetteter Kalender. */
.gd-termin {
margin: 1.4rem 0;
border-radius: var(--radius);
overflow: hidden;
background: #fff;
}
.gd-termin iframe {
width: 100%;
border: 0;
display: block;
}
/* =========================================================
Formulare: weisse Karte auf dem Verlaufsband.
========================================================= */
.gd-form {
background: #fff;
border-radius: var(--radius);
padding: clamp(1.4rem, 3.5vw, 2.2rem);
box-shadow: var(--shadow-sm);
color: var(--ink);
}
.gd-form label { display: block; margin-bottom: 1rem; font-size: .95rem; }
.gd-form input[type="text"],
.gd-form input[type="email"],
.gd-form input[type="tel"],
.gd-form input[type="number"],
.gd-form textarea {
width: 100%;
margin-top: .35rem;
padding: .7em .85em;
border: 0;
border-radius: var(--radius-sm);
background: #E9E9E9;
font: inherit;
color: var(--ink);
}
.gd-form input:focus-visible,
.gd-form textarea:focus-visible {
outline: 2px solid var(--accent-from);
outline-offset: 1px;
}
.gd-form textarea { resize: vertical; min-height: 6em; }
.gd-feld-gross { font-size: 1.08rem; font-weight: 700; margin: 1.4rem 0 .6rem; }
.gd-feld-gross:first-child { margin-top: 0; }
.gd-pflicht { color: var(--muted); font-weight: 400; }
.gd-hinweis { font-size: .84rem; color: var(--muted); margin: -.6rem 0 1.2rem; }
.gd-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .gd-zwei { grid-template-columns: 1fr; } }
/* Haken: Kästchen und Text nebeneinander, nicht untereinander. */
/* Mit .gd-form davor: sonst gewinnt die allgemeine label-Regel
(hoehere Spezifitaet) und setzt display:block. */
.gd-form .gd-haken {
display: grid;
grid-template-columns: auto 1fr;
gap: .7rem;
align-items: start;
margin: 1.2rem 0;
line-height: 1.5;
}
.gd-form .gd-haken input {
margin-top: .25rem;
width: 1.15rem; height: 1.15rem;
accent-color: var(--accent-from);
}
/* Honigtopf: für Menschen unsichtbar, für Maschinen ausfüllbar.
Bewusst nicht display:none - manche Skripte überspringen das. */
.gd-hp {
position: absolute;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
/* --- Schritte --- */
.gd-schritt { border: 0; padding: 0; margin: 0; min-width: 0; }
.gd-fortschritt { margin-bottom: 1.6rem; }
.gd-fortschritt-text { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.gd-fortschritt-bahn {
display: block;
height: 1.5rem;
border-radius: 999px;
background: #D8D8D8;
overflow: hidden;
}
.gd-fortschritt-fuellung {
display: flex; align-items: center; justify-content: flex-end;
height: 100%;
padding-right: .7rem;
border-radius: 999px;
background: var(--accent-gradient);
font-size: .78rem; font-weight: 700; color: var(--ink);
transition: width .35s cubic-bezier(.2, .7, .2, 1);
width: 33%;
}
.gd-schritt-knoepfe { display: flex; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.gd-summe { margin: 1.4rem 0 0; }
.gd-summe-titel { display: block; font-size: 1.08rem; font-weight: 700; margin-bottom: .3rem; }
.gd-summe-wert { display: block; font-size: 1rem; }
.gd-form-dank p { margin: 0; font-size: 1.05rem; }
.gd-form-fehler {
margin: 0 0 1.2rem;
padding: .8em 1em;
border-radius: var(--radius-sm);
background: #FDECEA;
color: #B3261E;
font-size: .92rem;
}
/* Knöpfe im Formular: ohne Rahmen und Schatten. Anders als auf den
übrigen Seiten sind es echte