/*
Theme Name: Gustav Erb Osteopathie
Theme URI: https://www.gustaverb.de/
Author: Bergrath Marketing
Author URI: https://bergrath-marketing.de/
Description: Onepager fuer die Praxis Gustav Erb, integrative Osteopathie und traumasensible Therapie in Nettersheim und Koeln. Gestaltungsmotiv ist die Ueberlagerung: die drei Logokreise als treibende Farbfelder ueber die Abschnittsgrenzen hinweg. Keine externen Dienste, Schriften und Icons liegen im Theme.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gustav-erb
Tags: one-column, block-patterns, full-site-editing, accessibility-ready, custom-colors
*/
/* ============================================================
WordPress-Anpassungen
Der Blockeditor bringt eigene Abstaende und Wrapper mit. Hier
werden genau die neutralisiert, die dem Entwurf im Weg stehen.
Dieser Block steht bewusst VOR dem uebernommenen v6-CSS. Die
Klassen kollidieren teilweise, etwa .wp-block-group und .wrap,
und haben dieselbe Spezifitaet. Bei Gleichstand entscheidet die
Reihenfolge, und gewinnen soll immer der Entwurf. Steht dieser
Block hinten, verliert .wrap sein margin-inline:auto und die
ganze Seite rutscht 20 px nach links.
============================================================ */
/* Abschnitte muessen sich beruehren. Die Kreisfelder laufen ueber die
Abschnittsgrenze, ein Zwischenraum wuerde das Feld zerschneiden. */
.wp-site-blocks > * + *{ margin-block-start:0; }
.wp-site-blocks{ padding:0; }
/* Gruppen sind reine Traeger. Layout und Abstand kommen aus dem Entwurf. */
.wp-block-group{ margin:0; }
:where(.wp-block-group.wrap) > * + *{ margin-block-start:0; }
/* Bilder: core setzt margin und display, beides stoert die Raster. */
.wp-block-image{ margin:0; }
.wp-block-image img{ display:block; }
.wp-block-image.rund, .wp-block-image.s-bild{ margin:0; }
.wp-block-image.rund img{
width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:50%; display:block;
}
.wp-block-image.s-bild img{
width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
border-radius:var(--r-card); display:block;
}
.zusammenhang .wp-block-image.rund img{ object-position:center 58%; }
.s-bild.hoch img{ object-position:center 38%; }
/* Ueberschriften und Absaetze ohne core-Abstand. */
.wp-block-heading{ margin:0; }
.wp-block-details{ margin:0; }
.wp-block-list{ margin:0; }
/* core/details bringt eine eigene summary-Marke mit. */
.faq .wp-block-details summary{ list-style:none; }
/* Der Editor zeigt die Seite ohne die Klasse js. Dadurch sind alle
.auf-Elemente sichtbar und das Signet fertig gezeichnet, was fuer
die Bearbeitung genau richtig ist. */
/* ============================================================
Uebernommen aus design-osteopathie-v6.html, unveraendert bis auf
drei Stellen, die im Blockeditor anders aussehen muessen:
- Icons kommen aus einem SVG-Sprite statt aus der Phosphor-Webfont
- FAQ-Antworten sind aus core/details statt
- der Staffelindex --i steht in der Regel statt im inline-style
Alles Weitere ist Zeichen fuer Zeichen das Original.
============================================================ */
/* Die Schriften stehen in der theme.json, damit der Blockeditor sie
ebenfalls laedt. Dateien liegen unter assets/fonts. */
/* --- Icons aus dem Sprite --------------------------------------
Ersetzt die Phosphor-Webfont. Gleiche Groessen, gleiche Farbe,
aber 3 kB statt 147 kB und kein fremdes CDN. */
.sym{ fill:currentColor; flex:none; width:1em; height:1em; }
/* Ein svg ohne width und height ist im Browser 300 mal 150 Pixel gross.
Die Grundgroesse oben ist deshalb Pflicht, nicht Kosmetik. */
.menue-schalter .sym{ width:26px; height:26px; }
/* --- Icons im Fliesstext ----------------------------------------
Adresse und Zeiten sollen im Editor normale Absaetze bleiben, damit
Gustav sie ohne HTML aendern kann. Ein im Text wuerde das
verhindern, deshalb kommt das Icon hier aus einer CSS-Maske.
currentColor bleibt erhalten, die Groesse entspricht dem Sprite. */
.mit-icon.ic-map-pin, .mit-icon.ic-clock,
.mit-icon.ic-phone, .mit-icon.ic-envelope-simple{ display:flex; gap:10px; align-items:flex-start; }
.ic-map-pin::before, .ic-clock::before, .ic-phone::before, .ic-envelope-simple::before{
content:""; flex:none; width:1em; height:1em; margin-top:.16em;
background:currentColor; color:var(--tinte-2);
mask-repeat:no-repeat; mask-position:center; mask-size:contain;
-webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
}
.ic-map-pin::before{ mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M128%2C64a40%2C40%2C0%2C1%2C0%2C40%2C40A40%2C40%2C0%2C0%2C0%2C128%2C64Zm0%2C64a24%2C24%2C0%2C1%2C1%2C24-24A24%2C24%2C0%2C0%2C1%2C128%2C128Zm0-112a88.1%2C88.1%2C0%2C0%2C0-88%2C88c0%2C31.4%2C14.51%2C64.68%2C42%2C96.25a254.19%2C254.19%2C0%2C0%2C0%2C41.45%2C38.3%2C8%2C8%2C0%2C0%2C0%2C9.18%2C0A254.19%2C254.19%2C0%2C0%2C0%2C174%2C200.25c27.45-31.57%2C42-64.85%2C42-96.25A88.1%2C88.1%2C0%2C0%2C0%2C128%2C16Zm0%2C206c-16.53-13-72-60.75-72-118a72%2C72%2C0%2C0%2C1%2C144%2C0C200%2C161.23%2C144.53%2C209%2C128%2C222Z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M128%2C64a40%2C40%2C0%2C1%2C0%2C40%2C40A40%2C40%2C0%2C0%2C0%2C128%2C64Zm0%2C64a24%2C24%2C0%2C1%2C1%2C24-24A24%2C24%2C0%2C0%2C1%2C128%2C128Zm0-112a88.1%2C88.1%2C0%2C0%2C0-88%2C88c0%2C31.4%2C14.51%2C64.68%2C42%2C96.25a254.19%2C254.19%2C0%2C0%2C0%2C41.45%2C38.3%2C8%2C8%2C0%2C0%2C0%2C9.18%2C0A254.19%2C254.19%2C0%2C0%2C0%2C174%2C200.25c27.45-31.57%2C42-64.85%2C42-96.25A88.1%2C88.1%2C0%2C0%2C0%2C128%2C16Zm0%2C206c-16.53-13-72-60.75-72-118a72%2C72%2C0%2C0%2C1%2C144%2C0C200%2C161.23%2C144.53%2C209%2C128%2C222Z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-clock::before{ mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm0%2C192a88%2C88%2C0%2C1%2C1%2C88-88A88.1%2C88.1%2C0%2C0%2C1%2C128%2C216Zm64-88a8%2C8%2C0%2C0%2C1-8%2C8H128a8%2C8%2C0%2C0%2C1-8-8V72a8%2C8%2C0%2C0%2C1%2C16%2C0v48h48A8%2C8%2C0%2C0%2C1%2C192%2C128Z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm0%2C192a88%2C88%2C0%2C1%2C1%2C88-88A88.1%2C88.1%2C0%2C0%2C1%2C128%2C216Zm64-88a8%2C8%2C0%2C0%2C1-8%2C8H128a8%2C8%2C0%2C0%2C1-8-8V72a8%2C8%2C0%2C0%2C1%2C16%2C0v48h48A8%2C8%2C0%2C0%2C1%2C192%2C128Z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-phone::before{ mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M222.37%2C158.46l-47.11-21.11-.13-.06a16%2C16%2C0%2C0%2C0-15.17%2C1.4%2C8.12%2C8.12%2C0%2C0%2C0-.75.56L134.87%2C160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16%2C16%2C0%2C0%2C0%2C1.32-15.06l0-.12L97.54%2C33.64a16%2C16%2C0%2C0%2C0-16.62-9.52A56.26%2C56.26%2C0%2C0%2C0%2C32%2C80c0%2C79.4%2C64.6%2C144%2C144%2C144a56.26%2C56.26%2C0%2C0%2C0%2C55.88-48.92A16%2C16%2C0%2C0%2C0%2C222.37%2C158.46ZM176%2C208A128.14%2C128.14%2C0%2C0%2C1%2C48%2C80%2C40.2%2C40.2%2C0%2C0%2C1%2C82.87%2C40a.61.61%2C0%2C0%2C0%2C0%2C.12l21%2C47L83.2%2C111.86a6.13%2C6.13%2C0%2C0%2C0-.57.77%2C16%2C16%2C0%2C0%2C0-1%2C15.7c9.06%2C18.53%2C27.73%2C37.06%2C46.46%2C46.11a16%2C16%2C0%2C0%2C0%2C15.75-1.14%2C8.44%2C8.44%2C0%2C0%2C0%2C.74-.56L168.89%2C152l47%2C21.05h0s.08%2C0%2C.11%2C0A40.21%2C40.21%2C0%2C0%2C1%2C176%2C208Z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M222.37%2C158.46l-47.11-21.11-.13-.06a16%2C16%2C0%2C0%2C0-15.17%2C1.4%2C8.12%2C8.12%2C0%2C0%2C0-.75.56L134.87%2C160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16%2C16%2C0%2C0%2C0%2C1.32-15.06l0-.12L97.54%2C33.64a16%2C16%2C0%2C0%2C0-16.62-9.52A56.26%2C56.26%2C0%2C0%2C0%2C32%2C80c0%2C79.4%2C64.6%2C144%2C144%2C144a56.26%2C56.26%2C0%2C0%2C0%2C55.88-48.92A16%2C16%2C0%2C0%2C0%2C222.37%2C158.46ZM176%2C208A128.14%2C128.14%2C0%2C0%2C1%2C48%2C80%2C40.2%2C40.2%2C0%2C0%2C1%2C82.87%2C40a.61.61%2C0%2C0%2C0%2C0%2C.12l21%2C47L83.2%2C111.86a6.13%2C6.13%2C0%2C0%2C0-.57.77%2C16%2C16%2C0%2C0%2C0-1%2C15.7c9.06%2C18.53%2C27.73%2C37.06%2C46.46%2C46.11a16%2C16%2C0%2C0%2C0%2C15.75-1.14%2C8.44%2C8.44%2C0%2C0%2C0%2C.74-.56L168.89%2C152l47%2C21.05h0s.08%2C0%2C.11%2C0A40.21%2C40.21%2C0%2C0%2C1%2C176%2C208Z%22%2F%3E%3C%2Fsvg%3E"); }
.ic-envelope-simple::before{ mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M224%2C48H32a8%2C8%2C0%2C0%2C0-8%2C8V192a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V56A8%2C8%2C0%2C0%2C0%2C224%2C48ZM203.43%2C64%2C128%2C133.15%2C52.57%2C64ZM216%2C192H40V74.19l82.59%2C75.71a8%2C8%2C0%2C0%2C0%2C10.82%2C0L216%2C74.19V192Z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M224%2C48H32a8%2C8%2C0%2C0%2C0-8%2C8V192a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V56A8%2C8%2C0%2C0%2C0%2C224%2C48ZM203.43%2C64%2C128%2C133.15%2C52.57%2C64ZM216%2C192H40V74.19l82.59%2C75.71a8%2C8%2C0%2C0%2C0%2C10.82%2C0L216%2C74.19V192Z%22%2F%3E%3C%2Fsvg%3E"); }
/* --- Staffelindex ----------------------------------------------
In v6 stand --i als inline-style am Element. Der Blockeditor hat
dafuer kein Feld, also steht der Index jetzt in der Regel.
Wirkung identisch: 60 ms Versatz je Position. */
.b-liste > *:nth-child(1), .a-grid > *:nth-child(1){ --i:0; }
.b-liste > *:nth-child(2), .a-grid > *:nth-child(2){ --i:1; }
.b-liste > *:nth-child(3), .a-grid > *:nth-child(3){ --i:2; }
.b-liste > *:nth-child(4), .a-grid > *:nth-child(4){ --i:3; }
.b-liste > *:nth-child(5), .a-grid > *:nth-child(5){ --i:4; }
.b-liste > *:nth-child(6), .a-grid > *:nth-child(6){ --i:5; }
.b-liste > *:nth-child(7), .a-grid > *:nth-child(7){ --i:6; }
.b-liste > *:nth-child(8), .a-grid > *:nth-child(8){ --i:7; }
/* ============================================================
ENTWURF Gustav Erb - Onepager Osteopathie, Variante 2
Unterschied zu v1: die Kreisfelder treiben langsam. Eigenbewegung,
nicht an das Scrollen gekoppelt. Deutlich sichtbare Amplitude, lange
Dauer, jeder Kreis mit eigener Periode, damit nie ein sichtbares
Muster entsteht. Abschaltbar, und bei prefers-reduced-motion aus.
Gestaltungsidee: Ueberlagerung. Das Logo sind drei
ineinandergreifende Kreise. Koerper, Psyche und Biografie
ueberlappen, deshalb ueberlappen auch die Flaechen der Seite.
Schrift: Outfit Light als Genome-Thin-Substitut im Display,
Source Sans 3 als KievitPro-Substitut im Text.
Interaktionsfarbe: ausschliesslich --blau.
============================================================ */
:root{
--sand: #F4EFE7;
--leinen: #FBF8F3;
--tinte: #15181E;
--tinte-2: #4B5361;
--linie: #DDD3C4;
/* Die drei Logofarben, exakt aus der Marke. Nur Flaeche, nie Schrift. */
--logo-gelb: #FFE7AB;
--logo-rot: #FFB5C2;
--logo-blau: #C1E7FF;
/* Signal. Das Logoblau auf Interaktionsstaerke gebracht: gleicher
Farbton (203 Grad), abgedunkelt auf 30 Prozent Helligkeit.
6,2:1 auf Sand, 7,1:1 fuer weissen Text. #C1E7FF selbst hat
1,2:1 und kann deshalb nichts Klickbares tragen. */
--blau: #095C90;
--blau-dark: #074A73;
--blau-weich:#E6F3FB;
--platz-linie: #B9AC99;
--r-card: 14px;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-sanft: cubic-bezier(0.45, 0, 0.55, 1); /* easeInOutSine, easings.net */
--display: "Outfit", "Genome", system-ui, sans-serif;
--text: "Source Sans 3", "Kievit Pro", system-ui, -apple-system, sans-serif;
interpolate-size: allow-keywords;
--maxw: 1240px;
--gutter: clamp(20px, 5vw, 56px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
margin:0;
background:var(--sand);
color:var(--tinte);
font-family:var(--text);
font-size:17.5px;
line-height:1.62;
overflow-x:clip;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; }
p{ margin:0; }
a{ color:var(--blau); }
/* Display: duenn, weit, gross. Nur oberhalb 32px einsetzen. */
.d{
font-family:var(--display);
font-weight:200;
letter-spacing:-0.025em;
line-height:1.04;
}
.d strong{ font-weight:400; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:2; }
section{ position:relative; padding-block:clamp(72px, 11vw, 148px); }
section[id]{ scroll-margin-top:84px; }
.lead{ color:var(--tinte-2); max-width:60ch; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--blau); color:#fff; padding:12px 18px; }
.skip:focus{ left:0; }
:where(a,button,summary,[tabindex]):focus-visible{ outline:3px solid var(--blau); outline-offset:3px; border-radius:4px; }
/* --- Kreisfelder: das Gestaltungsmotiv -------------------------
Flache, halbtransparente Kreise mit Multiply. Kein Blur,
keine Verlaeufe. Ueberlappungen erzeugen neue Farben, genau
wie im Logo. Sie liegen hinter dem Inhalt und laufen ueber
Abschnittsgrenzen hinweg, damit die Seite ein Feld bleibt
und nicht in gestapelte Baender zerfaellt. */
.feld{ position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:0; }
.kreis{
position:absolute; border-radius:50%;
mix-blend-mode:multiply; opacity:.75;
}
/* Die Felder treiben. Amplitude 58 bis 90 px auf 28 bis 38 Sekunden,
dazu 9 bis 13 Prozent Groessenaenderung. Sichtbar, wenn man
hinsieht, ruhig genug, wenn man liest. Jeder Kreis hat eine eigene
Periode und einen negativen Verzug, damit sie nie gleichlaufen.
Nur translate3d und scale, also GPU, kein Layout.
Weil sich die Ueberlappungen mitverschieben, wandern die
Multiply-Mischfarben langsam mit. Das ist der eigentliche Effekt. */
@media (prefers-reduced-motion: no-preference){
.js:not(.ruhe) .kreis{
animation:treiben var(--dauer, 38s) var(--ease-sanft) var(--verzug, 0s) infinite alternate;
}
}
.pausiert .kreis{ animation-play-state:paused; }
@keyframes treiben{
from{ transform:translate3d(0,0,0) scale(1); }
to{ transform:translate3d(var(--dx, 60px), var(--dy, -70px), 0) scale(var(--skala, 1.10)); }
}
/* ------------------------------------------------------------------
HIER WIRD JUSTIERT. Sechs Felder, je vier Werte.
--dx / --dy Weg in Pixeln. Groesser = deutlicher sichtbar.
--skala Groessenaenderung. Bewegt die Ueberlappungen und damit
die Mischfarben. Der Wert mit der groessten Wirkung.
--dauer Zeit fuer einen Weg. Kleiner = schneller.
--verzug Negativ, damit jedes Feld mitten im Zyklus startet und
die sechs nie gleichlaufen.
Ruhiger haben wollen: --dx und --dy halbieren, --dauer lassen.
------------------------------------------------------------------ */
.f1{ --dauer:34s; --verzug:-3s; --dx: 74px; --dy:-88px; --skala:1.10; }
.f2{ --dauer:28s; --verzug:-11s; --dx:-82px; --dy: 62px; --skala:1.13; }
.f3{ --dauer:38s; --verzug:-19s; --dx: 66px; --dy: 84px; --skala:1.11; }
.f4{ --dauer:31s; --verzug:-6s; --dx:-58px; --dy:-76px; --skala:1.09; }
.f5{ --dauer:36s; --verzug:-24s; --dx: 78px; --dy: 70px; --skala:1.12; }
.f6{ --dauer:33s; --verzug:-14s; --dx:-70px; --dy: 90px; --skala:1.10; }
/* Schalter im Fuss. WCAG 2.2.2 verlangt eine Moeglichkeit, automatisch
startende Bewegung anzuhalten, die laenger als fuenf Sekunden laeuft. */
.ruhe-schalter{
font:inherit; color:var(--tinte-2); background:none; border:0; padding:0;
cursor:pointer; text-decoration:none;
}
.ruhe-schalter:hover{ color:var(--blau); text-decoration:underline; }
@media (prefers-reduced-motion: reduce){ .ruhe-schalter{ display:none; } }
/* --- Kopf ----------------------------------------------------- */
.kopf{
position:sticky; top:0; z-index:20;
background:rgba(244,239,231,.90); backdrop-filter:blur(10px);
}
.kopf .wrap{ height:76px; display:flex; align-items:center; gap:30px; }
.marke{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tinte); }
.marke img, .marke > svg{ width:32px; height:32px; flex:none; display:block; }
.marke b{ font-family:var(--display); font-weight:300; font-size:22px; letter-spacing:.005em; }
.kopf nav{ margin-left:auto; display:flex; gap:28px; align-items:center; }
.kopf nav a{ color:var(--tinte); text-decoration:none; font-size:16px; white-space:nowrap; transition:color 160ms var(--ease-out); }
.kopf nav a:hover{ color:var(--blau); }
/* .kopf nav a ist spezifischer als .btn-primaer und hat dem Knopf
die Schriftfarbe genommen. Hier wieder geradegerueckt. */
.kopf nav a.btn-primaer, .kopf nav a.btn-primaer:hover{ color:#fff; }
.kopf nav a.btn-sekundaer, .kopf nav a.btn-sekundaer:hover{ color:var(--blau); }
/* Der einzige Menuepunkt, der die Seite verlaesst. Er nennt einen Namen,
keine Rubrik, und traegt deshalb dieselbe Schrift wie die Wortmarke
links: Displayschrift, etwas groesser, engere Laufweite. Das genuegt
als Unterscheidung, ein zweiter Knopf waere zu viel - es gibt eine
Hauptaktion, und die ist die Terminbuchung. */
.kopf nav a.dreieins-verweis{
font-family:var(--display); font-weight:400; font-size:18.5px; letter-spacing:-.01em;
}
/* --- Hamburger unterhalb 1040 px ------------------------------- */
.menue-schalter{
display:none; margin-left:auto; align-items:center; justify-content:center;
width:44px; height:44px; padding:0; border:0; border-radius:999px;
background:transparent; color:var(--tinte); cursor:pointer;
font-size:26px; line-height:1;
transition:background-color 160ms var(--ease-out);
}
.menue-schalter:hover{ background:rgba(21,24,30,.06); }
.menue-schalter:active{ transform:scale(.94); }
.menue-schalter .sym-x{ display:none; }
.kopf.offen .menue-schalter .sym-list{ display:none; }
.kopf.offen .menue-schalter .sym-x{ display:block; }
@media (max-width:1040px){
.menue-schalter{ display:inline-flex; }
.kopf nav{
position:absolute; top:100%; left:0; right:0;
display:flex; flex-direction:column; align-items:stretch; gap:0; margin:0;
padding:4px var(--gutter) 22px;
background:var(--sand);
border-bottom:1px solid var(--linie);
box-shadow:0 18px 40px rgba(21,24,30,.10);
opacity:0; visibility:hidden; transform:translateY(-10px);
transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
}
.kopf.offen nav{ opacity:1; visibility:visible; transform:none; }
.kopf nav a{ padding:15px 0; font-size:17.5px; border-bottom:1px solid var(--linie); }
/* Im Klappmenue sind die Punkte groesser. Der Verweis geht mit, sonst
faellt er dort als einziger zurueck. */
.kopf nav a.dreieins-verweis{ font-size:20px; }
.kopf nav a.btn{ margin-top:18px; border-bottom:0; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
.kopf nav{ transition:opacity 120ms ease, visibility 120ms; transform:none; }
.menue-schalter:active{ transform:none; }
}
/* --- Icons (Phosphor) ------------------------------------------
Informierende Icons bleiben neutral. Blau ist weiterhin allein
der Interaktion vorbehalten, in Links faerben sie sich mit. */
.mit-icon{ display:flex; gap:10px; align-items:flex-start; }
/* 1em, nicht 19px. Die Phosphor-Webfont in v6 war ein Textzeichen und damit
immer so gross wie die umgebende Schrift. 19px stand zwar in v6, aber in
einer Regel, die durch eine Umbenennung ins Leere lief und nie gegriffen
hat. Wer die urspruenglich gemeinte Groesse will, setzt hier 19px ein. */
.mit-icon .sym{ flex:none; width:1em; height:1em; margin-top:.16em; color:var(--tinte-2); }
.mit-icon a .sym, a .sym{ color:inherit; }
.fuss .mit-icon{ align-items:center; }
.fuss nav a{ display:inline-flex; align-items:center; gap:7px; }
.doctolib-hinweis{
display:flex; align-items:center; justify-content:center; gap:9px;
margin-top:22px; font-size:15px; color:#CBE3F2;
}
.doctolib-hinweis svg{ width:15px; height:auto; flex:none; }
/* --- Buttons -------------------------------------------------- */
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding:14px 28px; border-radius:999px; white-space:nowrap;
font-size:16.5px; font-weight:600; text-decoration:none; border:1.5px solid transparent; cursor:pointer;
gap:9px;
transition:transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.btn-primaer{ background:var(--blau); color:#fff; }
.btn-primaer:hover{ background:var(--blau-dark); }
.btn-sekundaer{ background:transparent; color:var(--blau); border-color:rgba(46,78,168,.4); }
.btn-sekundaer:hover{ background:var(--blau-weich); border-color:var(--blau); }
.btn:active{ transform:scale(.97); }
.btn-klein{ padding:10px 22px; font-size:15.5px; }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } .btn:active{ transform:none; } }
/* Knopf-Icons nehmen die Schriftfarbe des Knopfes an. Dadurch bleibt die
Doctolib-Marke auf blauem Grund weiss und auf hellem Grund blau,
ohne dass ein zweiter Blauton ins Spiel kommt. */
.btn .doctolib{ width:.9em; height:1.04em; flex:none; fill:currentColor; }
.btn .sym{ width:1.15em; height:1.15em; flex:none; }
/* --- Platzhalter ---------------------------------------------- */
.bildplatz{
border:1.5px dashed var(--platz-linie);
background:repeating-linear-gradient(135deg, rgba(185,172,153,.10) 0 10px, transparent 10px 20px);
display:flex; align-items:center; justify-content:center; padding:24px; text-align:center;
color:#7A6E5D; font-size:13.5px; line-height:1.45; font-family:var(--text);
}
/* --- Einblenden beim Scrollen (nur mit JS) -------------------- */
.js .auf{ opacity:0; transform:translateY(18px); }
.js .auf.sichtbar{
opacity:1; transform:none;
transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
transition-delay:calc(var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce){
.js .auf{ opacity:1; transform:none; }
.js .auf.sichtbar{ transition:none; }
/* Deckkraft bleibt, Bewegung faellt weg. */
.js .signet-kontur circle{ animation:none; stroke-dashoffset:0; }
.js .signet-flaechen{ animation:flaechen-ein 300ms ease 100ms both; }
.js .zeichen .k{ animation:k-ein-sanft 400ms ease both; }
.js .zeichen .k2, .js .zeichen .k3{ animation-delay:0ms; }
.js .zeichen .marken-text{ animation:text-ein 300ms ease 200ms both; }
.kreis{ animation:none; transform:none; }
.js .a-spur.sichtbar .laeufer,
.js .a-spur.sichtbar .laeufer::after{ animation:none; opacity:0; }
.js .a-grid article.sichtbar::before{ animation:none; opacity:var(--punkt); }
.faq details::details-content{ transition:none; }
.faq summary::before{ transition:none; }
}
/* ===== HERO ==================================================== */
.hero{ padding-top:clamp(48px,7vw,96px); padding-bottom:clamp(80px,10vw,120px); }
.hero .wrap{ display:grid; grid-template-columns:1.22fr .78fr; gap:clamp(36px,5vw,72px); align-items:center; }
.hero h1{ font-size:clamp(38px, 5vw, 58px); max-width:20ch; }
.hero .lead{ margin-top:30px; font-size:clamp(17.5px,1.9vw,20px); max-width:44ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; }
/* Das Zeichen: drei Kreise, beschriftet. Traegt die These ohne Worte. */
.zeichen{ position:relative; width:100%; max-width:520px; margin-inline:auto; }
.zeichen svg{ width:100%; height:auto; display:block; }
/* Drei getrennte Felder finden sich zur Ueberlagerung zusammen.
Die Bewegung erklaert die These der Praxis. Laeuft einmal beim
Laden. CSS-Animation, damit sie waehrend des Schriftladens
nicht auf dem Hauptthread haengt. */
/* Das Signet zeichnet sich: erst die drei Konturen, dann die Farbflaechen.
Zweck ist Erklaerung, die Marke baut sich vor den Augen auf. Einmal beim
Laden. Die Linienzeichnung laeuft ueber stroke-dashoffset, die sanktionierte
Ausnahme fuer genau diesen Effekt. */
.signet{ width:100%; height:auto; display:block; }
.js .signet-kontur circle{
stroke-dasharray:2513; stroke-dashoffset:2513;
animation:kontur-zeichnen 2600ms var(--ease-sanft) both;
}
.js .signet-kontur circle:nth-child(2){ animation-delay:420ms; }
.js .signet-kontur circle:nth-child(3){ animation-delay:840ms; }
.js .signet-flaechen{ animation:flaechen-ein 1600ms var(--ease-sanft) 2200ms both; }
@keyframes kontur-zeichnen{ to{ stroke-dashoffset:0; } }
@keyframes flaechen-ein{ from{ opacity:0 } to{ opacity:1 } }
/* Der Blendmodus muss auf den Kreisen sitzen, nicht auf der Gruppe.
Eine Gruppe mit mix-blend-mode kapselt ihre Kinder, dann ueberdecken
sich die drei Kreise, statt sich zu mischen. Genau die Mischung ist
aber der Punkt: Gelb mal Blau ergibt Gruen, Rot mal Blau Lavendel,
Gelb mal Rot Pfirsich. So entstehen aus drei Logofarben sechs. */
.zeichen .k{ transform-box:fill-box; transform-origin:center; mix-blend-mode:multiply; }
.js .zeichen .k{ animation:k-ein 820ms var(--ease-out) both; }
.js .zeichen .k1{ --vx:0px; --vy:-26px; }
.js .zeichen .k2{ --vx:-24px; --vy:20px; animation-delay:110ms; }
.js .zeichen .k3{ --vx:24px; --vy:20px; animation-delay:220ms; }
.js .zeichen .marken-text{ animation:text-ein 520ms var(--ease-out) 640ms both; }
@keyframes k-ein{
from{ opacity:0; transform:translate(var(--vx), var(--vy)) scale(.94); }
to{ opacity:1; transform:none; }
}
@keyframes k-ein-sanft{ from{ opacity:0 } to{ opacity:1 } }
@keyframes text-ein{ from{ opacity:0 } to{ opacity:1 } }
.zeichen figcaption{ margin-top:26px; text-align:center; font-size:14px; color:var(--tinte-2); }
.zeichen figcaption .tbc{ display:inline-block; padding:2px 6px; }
.zeichen figcaption .tbc.felder-namen{ display:inline-flex; }
.zeichen .felder-namen{
display:flex; justify-content:center; gap:clamp(18px,3vw,38px);
letter-spacing:.06em; font-size:14.5px;
}
/* Nur fuer Screenreader */
.nur-sr{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Bilder in runden Ausschnitten */
.rund{
width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:50%;
position:relative; z-index:2; display:block;
}
.zusammenhang .rund{ object-position:center 58%; }
/* Standortbilder */
.s-bild{
width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
border-radius:var(--r-card); display:block;
}
.s-bild.hoch{ object-position:center 38%; }
@media (max-width:900px){
.hero .wrap{ grid-template-columns:1fr; }
.zeichen{ max-width:400px; }
}
/* ===== ZUSAMMENHANG (fruehere Arbeitsweise) ==================== */
.zusammenhang{ padding-block:clamp(88px,12vw,168px); }
.zusammenhang .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.zusammenhang h2{ font-size:clamp(26px,3.2vw,40px); max-width:15ch; }
.zusammenhang .antwort{ margin-top:26px; font-size:clamp(18px,1.9vw,20.5px); line-height:1.58; max-width:50ch; }
.zusammenhang .dazu{ margin-top:22px; color:var(--tinte-2); max-width:50ch; }
.zusammenhang .bildplatz{ aspect-ratio:1/1; border-radius:50%; background-color:var(--leinen); position:relative; z-index:2; }
@media (max-width:900px){ .zusammenhang .wrap{ grid-template-columns:1fr; } }
/* ===== BESCHWERDEN: versetztes Raster, kein Kartenteppich ====== */
.beschwerden h2{ font-size:clamp(26px,3.2vw,40px); }
.beschwerden .lead{ margin-top:22px; }
.b-liste{ margin-top:clamp(48px,6vw,80px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.5vw,52px) clamp(28px,4vw,64px); }
/* Die Logotoene sind Flaechenfarben. Als kleiner Punkt verschwinden sie
auf dem Sand, als 3-px-Kante ueber der ganzen Spaltenbreite tragen sie.
Nebenbei faellt damit die dekorative Punktreihe weg. */
.b-liste article{ position:relative; padding-top:26px; border-top:3px solid var(--linie); }
.b-liste article:nth-child(3n+1){ border-top-color:var(--logo-gelb); }
.b-liste article:nth-child(3n+2){ border-top-color:var(--logo-rot); }
.b-liste article:nth-child(3n+3){ border-top-color:var(--logo-blau); }
/* Versatz bricht das Raster auf, ohne die Lesbarkeit zu stoeren */
.b-liste article:nth-child(2){ transform:translateY(clamp(20px,3vw,44px)); }
.b-liste article:nth-child(3){ transform:translateY(clamp(40px,6vw,88px)); }
.b-liste article:nth-child(5){ transform:translateY(clamp(20px,3vw,44px)); }
.b-liste article:nth-child(6){ transform:translateY(clamp(40px,6vw,88px)); }
.b-liste h3{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2.1vw,25px); letter-spacing:-.015em; line-height:1.18; }
.b-liste p{ margin-top:12px; color:var(--tinte-2); font-size:16.5px; }
@media (max-width:880px){
.b-liste{ grid-template-columns:repeat(2,1fr); }
.b-liste article:nth-child(n){ transform:none; }
.b-liste article:nth-child(even){ transform:translateY(32px); }
}
@media (max-width:560px){
.b-liste{ grid-template-columns:1fr; }
.b-liste article:nth-child(n){ transform:none; }
}
/* ===== ABLAUF: Fortschritt auf einer Linie ===================== */
.ablauf h2{ font-size:clamp(26px,3.2vw,40px); }
.a-spur{ margin-top:clamp(48px,6vw,76px); position:relative; --luecke:clamp(22px,3vw,40px); }
.a-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--luecke); }
/* Die Verbindung liegt jetzt als Segment zwischen zwei Punkten, mit Luft an
beiden Enden. Vorher lief eine durchgehende Linie mitten durch die Punkte. */
.a-grid article::after{
content:""; position:absolute; top:11px; height:1px; background:var(--linie);
left:31px; right:calc(8px - var(--luecke));
}
.a-grid article:last-child::after{ display:none; }
/* Ein kleiner Punkt laeuft die Spur entlang. Die Laufbahn ist genau so breit
wie der Weg vom ersten zum vierten Punkt, der Laeufer ist so breit wie sie.
Dadurch entspricht translateX(100%) exakt der Strecke, ohne left oder
width zu animieren. */
/* z-index, weil die Liniensegmente im DOM spaeter kommen und den Laeufer
sonst ueberdecken. Genau 11,5 px, damit er mittig auf der Linie sitzt. */
.laufbahn{
position:absolute; top:11.5px; left:11.5px; height:0; pointer-events:none;
z-index:2;
width:calc(75% + 0.75 * var(--luecke));
}
.laeufer{ position:absolute; left:0; top:0; width:100%; height:0; }
.laeufer::after{
content:""; position:absolute; left:-4.5px; top:-4.5px; width:9px; height:9px;
border-radius:50%; background:var(--blau); opacity:0;
}
/* Strecke und Sichtbarkeit laufen getrennt, damit die Strecke je Abschnitt
eine eigene Kurve bekommen kann. Der Punkt bremst in jede Station hinein
und zieht wieder an, dadurch wird das Ankommen sichtbar statt nur das
Vorbeiziehen. */
.js .a-spur.sichtbar .laeufer{ animation:laeufer-strecke 20s infinite; }
.js .a-spur.sichtbar .laeufer::after{ animation:laeufer-sichtbar 20s linear infinite; }
@keyframes laeufer-strecke{
0% { transform:translateX(0); animation-timing-function:cubic-bezier(0.45,0,0.55,1); }
30% { transform:translateX(33.333%); animation-timing-function:cubic-bezier(0.45,0,0.55,1); }
60% { transform:translateX(66.667%); animation-timing-function:cubic-bezier(0.45,0,0.55,1); }
90%, 100% { transform:translateX(100%); }
}
/* Der Punkt taucht aus dem ersten Kreis auf und verschwindet im letzten. */
@keyframes laeufer-sichtbar{
0%, 1% { opacity:0; }
6% { opacity:1; }
90% { opacity:1; } /* erst am vierten Kreis angekommen */
95% { opacity:0; }
100% { opacity:0; }
}
/* Jeder grosse Punkt leuchtet in dem Moment auf, in dem der Laeufer
ihn erreicht: acht Sekunden Zyklus, zwei Sekunden Abstand je Punkt. */
/* Schnell hoch, langsam zurueck. Die Reaktion soll prompt kommen,
das Abklingen darf sich Zeit lassen. */
@keyframes punkt-leuchtet{
0% { opacity:var(--punkt); transform:scale(1); animation-timing-function:cubic-bezier(0.23,1,0.32,1); }
1.5% { opacity:1; transform:scale(1.45); animation-timing-function:cubic-bezier(0.4,0,0.6,1); }
9% { opacity:var(--punkt); transform:scale(1); }
100% { opacity:var(--punkt); transform:scale(1); }
}
.a-grid article{ position:relative; padding-top:44px; }
.a-grid article{ --punkt:.22; }
.a-grid article:nth-child(2){ --punkt:.45; }
.a-grid article:nth-child(3){ --punkt:.7; }
.a-grid article:nth-child(4){ --punkt:1; }
.a-grid article::before{
content:""; position:absolute; left:0; top:0; width:23px; height:23px; border-radius:50%;
background:var(--blau); opacity:var(--punkt);
}
.a-grid article::before{ transform-origin:center; }
.js .a-grid article.sichtbar::before{
animation:punkt-leuchtet 20s linear infinite;
animation-delay:calc(var(--i, 0) * 6s);
}
.a-grid h3{ font-family:var(--display); font-weight:400; font-size:clamp(19px,2vw,23px); letter-spacing:-.015em; }
.a-grid p{ margin-top:12px; color:var(--tinte-2); font-size:16.5px; }
@media (max-width:820px){
.a-grid{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
.a-spur::before{ display:none; }
.a-grid article{ padding-top:38px; }
}
@media (max-width:480px){ .a-grid{ grid-template-columns:1fr; } }
/* ===== UEBER MICH: Portraet im Kreis =========================== */
.vita .wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,80px); align-items:center; }
.vita .portraet{ position:relative; }
.vita .bildplatz{ aspect-ratio:1/1; border-radius:50%; background-color:var(--leinen); position:relative; z-index:2; }
.vita h2{ font-size:clamp(26px,3.2vw,40px); }
.vita .lead{ margin-top:24px; }
.vita ul{ margin:32px 0 0; padding:0; list-style:none; display:grid; gap:0; }
.vita li{ padding:14px 0 14px 0; border-top:1px solid var(--linie); color:var(--tinte-2); font-size:16.5px; }
.vita li:last-child{ border-bottom:1px solid var(--linie); }
@media (max-width:900px){ .vita .wrap{ grid-template-columns:1fr; } .vita .bildplatz{ max-width:320px; } }
/* ===== DREIEINS: Markenmoment auf Logogelb ===================== */
/* Auf Gelb braucht das Logo kein eigenes Feld mehr: multiply laesst das
Weiss der Datei direkt im Hintergrund verschwinden. Schrift bleibt
Tinte, 14,8:1 auf Gelb. Der Knopf ist der normale sekundaere,
Blau auf Gelb erreicht 5,7:1. */
.dreieins{ background:var(--logo-gelb); color:var(--tinte); overflow:hidden; }
.dreieins .wrap{ display:block; max-width:820px; text-align:center; }
/* Vektorfassung mit transparentem Grund, Schrift in Pfade gewandelt.
Dadurch kein Blendmodus mehr noetig und keine Schriftabhaengigkeit. */
.dreieins-marke{ margin:0 auto; max-width:560px; }
.dreieins-marke img{ width:100%; height:auto; display:block; }
.dreieins .lead{
margin:clamp(24px,3.5vw,38px) auto 0; color:var(--tinte-2);
max-width:50ch; font-size:18px;
}
/* ===== PRAKTISCHES: Linien statt Kaesten ======================= */
.praktisch h2{ font-size:clamp(26px,3.2vw,40px); }
.p-grid{ margin-top:clamp(40px,5vw,68px); display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(40px,6vw,88px); }
.p-grid > div{ padding:30px 0 34px; border-top:1px solid var(--linie); }
.p-grid h3{ font-size:15.5px; font-weight:600; color:var(--tinte-2); letter-spacing:.01em; }
.p-grid .wert{ font-family:var(--display); font-weight:200; font-size:clamp(26px,3.2vw,36px); letter-spacing:-.025em; margin-top:10px; line-height:1.1; }
.p-grid p{ margin-top:14px; color:var(--tinte-2); font-size:16.5px; max-width:40ch; }
@media (max-width:700px){ .p-grid{ grid-template-columns:1fr; } }
/* ===== STANDORTE =============================================== */
.standorte h2{ font-size:clamp(26px,3.2vw,40px); }
.standorte .lead{ margin-top:22px; }
.s-grid{ margin-top:clamp(40px,5vw,68px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.8vw,32px); }
.s-grid article{ display:flex; flex-direction:column; }
.s-grid .bildplatz{ aspect-ratio:4/3; border-radius:var(--r-card); }
.s-grid h3{ margin-top:22px; font-family:var(--display); font-weight:400; font-size:23px; letter-spacing:-.015em; }
.s-grid address, .s-grid .adresse{ font-style:normal; margin-top:10px; color:var(--tinte-2); font-size:16.5px; }
.s-grid .tage{ margin-top:12px; color:var(--tinte-2); font-size:16px; }
.s-grid .btn{ margin-top:22px; align-self:flex-start; }
@media (max-width:900px){ .s-grid{ grid-template-columns:1fr; gap:40px; } .s-grid .bildplatz{ max-width:420px; } }
/* ===== FAQ ===================================================== */
.faq h2{ font-size:clamp(26px,3.2vw,40px); }
/* Volle Inhaltsbreite. Die Trennlinien und die Fragen laufen damit so weit
wie die Ueberschrift darueber. Der Antworttext behaelt seine Lesebreite,
sonst werden die Zeilen bei 1128 px zu lang. */
.faq-liste{ margin-top:clamp(36px,4.5vw,60px); }
.faq details{ border-bottom:1px solid var(--linie); }
.faq details:first-child{ border-top:1px solid var(--linie); }
.faq summary{
cursor:pointer; list-style:none; padding:26px 48px 26px 0; position:relative;
font-family:var(--display); font-weight:300; font-size:clamp(19px,2.1vw,25px); letter-spacing:-.015em; line-height:1.25;
transition:color 160ms var(--ease-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--blau); }
.faq summary::after{ content:""; position:absolute; right:6px; top:50%; margin-top:-.75px; width:14px; height:1.5px; background:var(--blau); }
/* Der senkrechte Strich dreht sich auf den waagerechten. Plus wird Minus,
ohne dass etwas verschwindet. */
.faq summary::before{
content:""; position:absolute; right:12.25px; top:50%; margin-top:-7px; width:1.5px; height:14px; background:var(--blau);
transition:transform 240ms var(--ease-out);
}
.faq details[open] summary::before{ transform:rotate(90deg); }
/* Der Antworttext faehrt auf, statt zu springen. Hoehe ist hier die
zulaessige Ausnahme, ein Transform-Aequivalent gibt es nicht. */
.faq details::details-content{
block-size:0; overflow:hidden;
transition:block-size 240ms var(--ease-out), content-visibility 240ms allow-discrete;
}
.faq details[open]::details-content{ block-size:auto; }
.faq details > :not(summary){ margin:0; color:var(--tinte-2); max-width:64ch; }
.faq details > :not(summary):last-child{ padding-bottom:30px; }
/* ===== ABSCHLUSS =============================================== */
.abschluss{ background:var(--blau); color:#fff; overflow:hidden; }
.abschluss h2{ font-size:clamp(26px,3.2vw,40px); }
.abschluss p{ margin-top:22px; color:#CBE3F2; max-width:44ch; font-size:18px; }
.abschluss .btn-primaer{ background:#fff; color:var(--blau); }
.abschluss .btn-primaer:hover{ background:var(--blau-weich); }
.abschluss .btn-sekundaer{ color:#fff; border-color:rgba(255,255,255,.5); }
.abschluss .btn-sekundaer:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.abschluss .wrap{ display:grid; grid-template-columns:1.45fr .55fr; gap:clamp(32px,5vw,72px); align-items:center; }
.abschluss .aktionen{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:900px){ .abschluss .wrap{ grid-template-columns:1fr; } }
/* ===== FUSS ==================================================== */
.fuss{ padding-block:56px 44px; font-size:16px; }
.fuss .wrap{ display:flex; gap:22px 44px; flex-wrap:wrap; align-items:flex-start; }
.fuss address{ font-style:normal; color:var(--tinte-2); }
.fuss nav{ margin-left:auto; display:flex; gap:24px; flex-wrap:wrap; }
.fuss a{ color:var(--tinte-2); text-decoration:none; }
.fuss a:hover{ color:var(--blau); text-decoration:underline; }
/* ===== Mobile Aktionsleiste ==================================== */
.mobil-bar{
position:fixed; left:0; right:0; bottom:0; z-index:30; display:none; gap:10px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(251,248,243,.96); backdrop-filter:blur(10px); border-top:1px solid var(--linie);
}
.mobil-bar .btn{ flex:1; }
@media (max-width:1040px){ .mobil-bar{ display:flex; } body{ padding-bottom:78px; } }