@font-face { font-family: "Hanken Grotesk"; src: url("/gemeinsam/fonts/HankenGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("/gemeinsam/fonts/HankenGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("/gemeinsam/fonts/HankenGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("/gemeinsam/fonts/BricolageGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("/gemeinsam/fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } html, body { margin: 0; } /* Seitliches Verschieben verhindern (Tablets): "overflow-x: clip" auf dem -Element wird laut Spezifikation an den Viewport weitergereicht (und dort wie "hidden" behandelt) - aber iOS/iPadOS ignoriert Viewport- "hidden" beim TOUCH-Panning (bekannter WebKit-Bug). Der zuverlaessige Riegel auf Touch-Geraeten ist "touch-action: pan-y": quer wischen wird als Geste unterbunden, egal ob etwas uebersteht. "pinch-zoom" bleibt erlaubt, die klebende Kopfzeile (position: sticky) ebenfalls. */ html { max-width: 100%; overflow-x: clip; touch-action: pan-y pinch-zoom; } /* Fallback: aeltere Tablets (Safari < 16, alte Android-WebViews) kennen "clip" nicht - die Deklaration oben wird dort komplett verworfen und es klippt gar nichts. Dann lieber "hidden" (Sticky degradiert dort nur). */ @supports not (overflow: clip) { html, .site { overflow-x: hidden; } } .site { --s-bg: #FFF9F5; --s-surface: #FFFFFF; --s-ink: #241A22; --s-muted: #6E5F68; --s-line: #F0E2DA; --s-accent: #FF5A3C; --s-accent-soft: #FFE9DE; --s-accent-dark: #E1462B; /* Akzent als SCHRIFTFARBE (grosse Anfuehrungszeichen, Kennzahlen, FAQ-Pfeil). Normalerweise identisch mit --s-accent - auf dunklem Abschnittshintergrund wird nur dieser Wert aufgehellt, damit die Flaechen der Buttons unveraendert bleiben. */ --s-accent-text: var(--s-accent); --s-sun: #FFC24B; --s-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --s-display: "Bricolage Grotesque", var(--s-body); --s-deep: #241A22; --s-r-lg: 24px; --s-r-md: 18px; --s-r-sm: 12px; --s-r-btn: 14px; --s-shadow: 0 16px 40px rgba(36, 26, 34, .1); --s-shadow-sm: 0 8px 22px rgba(36, 26, 34, .07); background: var(--s-bg); color: var(--s-ink); font-family: var(--s-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; /* KEIN overflow-x hier. Ein overflow-Wert ausser "visible" macht den zum Clip- Container - und ein "position: sticky" darin haftet dann an ihm statt am Fenster. WebKit rechnet die Position bei jedem Scroll- Frame neu aus: genau das war das Zittern der Kopfzeile auf dem Tablet. Der Schutz gegen seitliches Verschieben bleibt vollstaendig: er sitzt auf (overflow-x: clip + touch-action: pan-y), siehe oben. Auch der 100vw-Ueberstand der Abschnitts-Farbbaender wird dort gekappt - eine Ebene hoeher, aber genauso wirksam. */ max-width: 100%; /* Eigene Stapel-Ebene: die Farbbaender der Abschnitte liegen mit z-index -1 hinter ihrem Inhalt. Ohne diese Zeile wuerden sie hinter den Hintergrund der ganzen Seite rutschen und waeren unsichtbar. */ isolation: isolate; /* Lange Woerter, URLs oder E-Mail-Adressen umbrechen, statt die Seite breiter als den Bildschirm zu machen. */ overflow-wrap: break-word; } .site * { box-sizing: border-box; } .site h1, .site h2, .site h3 { font-family: var(--s-display); letter-spacing: -.022em; line-height: 1.08; margin: 0 0 16px; } .site h1 { font-size: clamp(34px, 5.4vw, 54px); font-weight: 800; } .site h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; } .site h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; } .site p { margin: 0 0 16px; } .site img { max-width: 100%; height: auto; display: block; } .site section { max-width: 1080px; margin: 0 auto; padding: 64px 28px; } /* ---------- Abschnitts-Hintergrund (pro Block waehlbar) ------------- */ .site .s-bg-getoent, .site .s-bg-dunkel { position: relative; } /* Volle Fensterbreite, OHNE die Sektion selbst zu verbreitern: das Farbband liegt als Pseudo-Element dahinter. Bloecke mit eigener Breite (CTA-Karte, schmaler Hero) behalten damit ihre Form. Und weil hier nur "position: relative" dazukommt - kein clip-path, kein transform -, bleibt die Grossansicht der Galerie (position: fixed) weiterhin am Fenster verankert statt in der Sektion gefangen. Der Ueberstand von 100vw wird von "overflow-x: clip" auf .site gekappt. */ .site .s-bg-getoent::before, .site .s-bg-dunkel::before { content: ""; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--s-bg); z-index: -1; } /* Die CTA-Karte haelt aussen 24px Abstand - ohne diese Korrektur bliebe ober- und unterhalb des Bandes ein heller Spalt. */ .site .s-cta.s-bg-getoent::before, .site .s-cta.s-bg-dunkel::before { top: -24px; bottom: -24px; } /* Getoent: der weiche Ton der gewaehlten Farbwelt. Karten behalten die Flaechenfarbe und heben sich dadurch ab. In dunklen Farbwelten ist dieser Ton selbst dunkel - der Abschnitt kippt dort also nicht ploetzlich ins Helle. */ .site .s-bg-getoent { --s-bg: var(--s-accent-soft); } /* Dunkel: Schrift, Flaechen, Linien und Schatten drehen gemeinsam mit - sonst stuende dunkle Schrift auf dunklem Grund. Weil alle Bausteine diese Variablen verwenden, gilt das ohne Sonderregeln fuer jeden Blocktyp. */ .site .s-bg-dunkel { --s-bg: var(--s-deep); --s-ink: #FFFFFF; --s-muted: rgba(255, 255, 255, .72); --s-surface: rgba(255, 255, 255, .07); --s-line: rgba(255, 255, 255, .18); --s-shadow: 0 16px 40px rgba(0, 0, 0, .38); --s-shadow-sm: 0 8px 22px rgba(0, 0, 0, .3); color: var(--s-ink); } /* Grosse Akzentzeichen aufhellen: eine dunkle Farbwelt wie Anthrazit waere auf dunklem Grund sonst praktisch unsichtbar. Kennt ein Browser color-mix nicht, verwirft er die Zeile und es bleibt beim bisherigen Wert - blass, aber nicht kaputt. */ @supports (color: color-mix(in srgb, red 50%, white)) { .site .s-bg-dunkel { --s-accent-text: color-mix(in srgb, var(--s-accent) 52%, #fff); } } /* Die kleine Zeile darueber ist eine Pille in der weichen Akzentfarbe - auf einem GETOENTEN Abschnitt waere das exakt die Farbe des Hintergrunds, die Pille verschwaende also. Dort traegt sie die Flaechenfarbe. Auf dunklem Grund bleibt sie wie sie ist: helle Pille auf dunklem Abschnitt steht ohnehin klar da. */ .site .s-bg-getoent .s-eyebrow { background: var(--s-surface); } /* Der Hauptbutton behaelt seine Akzentflaeche und bekommt auf dunklem Grund eine feine helle Kante - damit hebt er sich auch dann ab, wenn die Akzentfarbe selbst dunkel ist. */ .site .s-bg-dunkel .s-btn span, .site .s-bg-dunkel .s-btn a { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 12px 26px rgba(0, 0, 0, .42); } .site .s-nav { position: sticky; top: 0; z-index: 40; background: var(--s-bg); border-bottom: 1px solid var(--s-line); /* Eigene Compositing-Ebene: der Browser verschiebt die Kopfzeile beim Scrollen, statt sie neu zu malen. Das allein behebt das Zittern auf dem Tablet NICHT (dessen Ursache sass im overflow des , siehe dort), macht das Scrollen aber spuerbar ruhiger - und backface-visibility glaettet die Subpixel-Rundung der 1px-Linie. Unbedenklich, weil die Navigation keine fest positionierten Kinder hat - die eigene Ebene faengt also nichts ein. */ will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .site .s-nav-in { max-width: 1080px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 28px; /* Umbrechen statt ueberlaufen: zwischen Handy (Burger-Menue) und Desktop stand die Navi in EINER Zeile - viele Menuepunkte machten die Seite dadurch auf Tablets breiter als den Bildschirm. */ flex-wrap: wrap; } .site .s-brand { font-family: var(--s-display); font-weight: 800; font-size: 19px; margin: 0; white-space: nowrap; } .site .s-nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; flex-wrap: wrap; } .site .s-nav-links a, .site .s-nav-links span { color: var(--s-ink); text-decoration: none; font-weight: 600; font-size: 15px; } .site .s-nav-links a:hover { color: var(--s-accent-dark); } .site .s-nav-links a.is-hier { color: var(--s-accent-dark); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--s-accent); } .site .s-nav .s-btn { margin: 0; } .site .s-nav .s-btn a, .site .s-nav .s-btn span { padding: 9px 18px; font-size: 14.5px; box-shadow: none; } .site .s-nav-toggle { display: none; } .site .s-nav-burger { display: none; margin-left: auto; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--s-line); border-radius: var(--s-r-sm); background: var(--s-surface); cursor: pointer; } .site .s-nav-burger i { display: block; width: 16px; height: 2px; background: var(--s-ink); box-shadow: 0 -5px 0 var(--s-ink), 0 5px 0 var(--s-ink); } @media (min-width: 1101px) { .site.site-nav-links .s-nav, .site.site-nav-rechts .s-nav { position: fixed; top: 0; bottom: 0; width: 280px; border-bottom: none; overflow-y: auto; } .site.site-nav-links .s-nav { left: 0; border-right: 1px solid var(--s-line); } .site.site-nav-rechts .s-nav { right: 0; border-left: 1px solid var(--s-line); } .site.site-nav-links .s-nav-in, .site.site-nav-rechts .s-nav-in { flex-direction: column; align-items: flex-start; gap: 22px; padding: 32px 26px; } .site.site-nav-links .s-nav-links, .site.site-nav-rechts .s-nav-links { flex-direction: column; align-items: flex-start; gap: 16px; margin-left: 0; } .site.site-nav-links .s-brand, .site.site-nav-rechts .s-brand { white-space: normal; } .site.site-nav-links section, .site.site-nav-links .s-footbar { margin-left: 280px; } .site.site-nav-rechts section, .site.site-nav-rechts .s-footbar { margin-right: 280px; } } .site .s-hero { display: grid; /* minmax(0, ...) statt blossem fr: fr-Spalten haben als Mindestbreite "auto" (= Inhaltsbreite). Ein langes Wort oder ein breites Bild wuerde die Spalte sonst aufblaehen und die ganze Seite breiter als den Bildschirm machen - auf Tablets liess sich die Seite dadurch seitlich verschieben. Mit minmax(0, ...) darf die Spalte schrumpfen. */ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding-top: 84px; padding-bottom: 84px; background: radial-gradient(900px 480px at 88% -12%, var(--s-accent-soft), transparent 62%); } .site .s-hero-img { border-radius: var(--s-r-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--s-shadow); } .site .s-hero-solo { grid-template-columns: 1fr; max-width: 820px; text-align: center; background: radial-gradient(760px 420px at 50% -16%, var(--s-accent-soft), transparent 64%); } .site .s-hero-cover { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; max-width: none; min-height: 72vh; padding: 120px 28px; overflow: hidden; background: var(--s-deep); } .site .s-hero-cover .s-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .site .s-hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(16, 11, 14, .35), rgba(16, 11, 14, .62)); z-index: 1; } /* Steht kein Text auf dem Bild, gibt es auch nichts lesbar zu halten - dann zeigt sich das Bild unverfaelscht. Die Klasse setzt der Renderer und nur dann, wenn Kleine Zeile, Ueberschrift, Beschreibung und Knopf allesamt leer sind. */ .site .s-hero-cover.s-hero-blank::after { content: none; } .site .s-hero-cover .s-hero-text { position: relative; z-index: 2; max-width: 820px; color: #fff; } .site .s-hero-cover h1 { color: #fff; font-size: clamp(40px, 6.6vw, 66px); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } .site .s-hero-cover .s-hero-text > p:not(.s-eyebrow):not(.s-btn), .site .s-hero-cover .s-hero-text .s-rich p { color: rgba(255, 255, 255, .88); font-size: 19px; } .site .s-hero-cover .s-eyebrow { background: rgba(255, 255, 255, .16); color: #fff; } .site .s-hero-text > p:not(.s-eyebrow):not(.s-btn), .site .s-hero-text .s-rich p { font-size: 18px; color: var(--s-muted); } .site .s-eyebrow { display: inline-block; background: var(--s-accent-soft); color: var(--s-accent-dark); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 6px 14px; border-radius: 999px; margin: 0 0 18px; } .site .s-text, .site .s-faq { max-width: 800px; } .site .s-grid { display: grid; /* minmax(0, 1fr): siehe .s-hero - Spalten duerfen schrumpfen, damit breite Inhalte die Seite nicht ueber den Bildschirmrand schieben. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; } .site .s-card { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r-md); padding: 24px; box-shadow: var(--s-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .site .s-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow); } .site .s-cards-schatten .s-card-img { box-shadow: 0 10px 26px rgba(0, 0, 0, .16); } .site .s-card p { margin: 0; color: var(--s-muted); font-size: 15.5px; } .site .s-card-img, .site .s-gal-img { border-radius: var(--s-r-sm); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 16px; } .site .s-gal-img { aspect-ratio: 4 / 3; margin-bottom: 0; box-shadow: var(--s-shadow-sm); display: block; overflow: hidden; cursor: zoom-in; } .site .s-gal-pic { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .site .s-lb { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(12, 8, 10, .93); padding: 4vh 4vw; } .site .s-lb:target, .site .s-lb-r:checked + .s-lb { display: flex; align-items: center; justify-content: center; } .site .s-lb-r { position: fixed; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } .site .s-lb-close { position: absolute; inset: 0; cursor: zoom-out; } .site .s-lb-pic { position: relative; z-index: 1; pointer-events: none; max-width: 100%; max-height: 92vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); } .site .s-lb::after { content: "\00d7"; position: absolute; top: 18px; right: 26px; color: #fff; font-size: 34px; line-height: 1; opacity: .85; pointer-events: none; } .site .s-lb-prev, .site .s-lb-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); color: #fff; border-radius: 999px; font-size: 36px; line-height: 1; text-decoration: none; padding-bottom: 4px; } .site .s-lb-prev { left: 20px; cursor: pointer; } .site .s-lb-next { right: 20px; cursor: pointer; } .site .s-gal-img { cursor: zoom-in; } /* Galerie-Eintrag: das Bild ist der Klickbereich fuer die Grossansicht, die Unterschrift liegt als Verlauf-Overlay darauf (Designer-Mockup) - so laufen die Reihen nicht mehr ungleich aus. Die figure ist das direkte Grid-Kind (Animationen und Slider-Keyframes greifen deshalb auf ".s-grid > *"). */ .site .s-gal-item { position: relative; margin: 0; min-width: 0; /* Die Proportion traegt die KACHEL, nicht mehr das Bild darin - sonst haette die Kachel keine Hoehe und das Bild kollabierte. Im Mosaik geben die Grid-Zeilen die Hoehe vor (siehe unten), im Slider 16:9. */ aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--s-r-md); box-shadow: 0 3px 10px rgba(36, 26, 34, .07); transition: transform .18s ease, box-shadow .18s ease; } .site .s-gal-item .s-gal-img { aspect-ratio: auto; width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; } .site .s-gal-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 42px 16px 13px; background: linear-gradient(transparent, rgba(24, 16, 20, .74)); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.45; text-align: left; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .site .s-gal-item:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(36, 26, 34, .18); } } /* --- Mosaik: ein grosses Bild (2x2) und ein Querformat (2x1) je Sechser- Gruppe. Das Muster WIEDERHOLT sich, damit es bei 3 wie bei 30 Fotos funktioniert. Unter 4 Bildern bleibt es bewusst ruhig. */ .site .s-gal-mosaik .s-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 14px; } /* Im Mosaik bestimmen die Grid-Zeilen die Kachelhoehe. */ .site .s-gal-mosaik .s-gal-item { aspect-ratio: auto; } .site .s-gal-mosaik .s-grid > * { grid-column: span 2; grid-row: span 1; } @media (min-width: 700px) { .site .s-gal-mosaik .s-grid > * { grid-column: span 1; } .site .s-gal-mosaik .s-grid > *:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; } .site .s-gal-mosaik .s-grid > *:nth-child(6n+6) { grid-column: span 2; } } /* Weniger als vier Fotos: gleichmaessige Kacheln statt Mosaik - eine einzelne Riesenkachel neben zwei kleinen sieht nach Fehler aus. */ @media (min-width: 700px) { .site .s-gal-mosaik .s-grid:has(> *:last-child:nth-child(-n+3)) { grid-auto-rows: 260px; } .site .s-gal-mosaik .s-grid:has(> *:last-child:nth-child(-n+3)) > *:nth-child(6n+1) { grid-column: span 2; grid-row: span 1; } } /* Der Slider nutzt dieselbe Kachel wie Raster und Mosaik (Bild fuellend, Unterschrift als Verlauf-Overlay) - nur ohne Rundung und Schatten, weil die Slides randlos aneinanderliegen. Das 16:9 der Slide kommt aus der Regel ".s-gal-slider .s-grid > *" weiter unten. */ .site .s-gal-slider .s-gal-item { border-radius: 0; box-shadow: none; } .site .s-gal-slider .s-gal-item:hover { transform: none; box-shadow: none; } /* Fusszeile der Grossansicht: Unterschrift links, Zaehler rechts (Designer-Mockup). Das Overlay ist ein zentrierender Flex-Container - ein normales Element waere darin ein zweites NEBEN dem Bild. Deshalb absolut am unteren Rand, ueber der Abdunklung, zwischen den Pfeilen. */ .site .s-lb-bar { position: absolute; left: 50%; bottom: max(2vh, 14px); transform: translateX(-50%); z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: min(960px, 78vw); pointer-events: none; } .site .s-lb-cap { color: #FFF7F2; font-size: 14.5px; font-weight: 600; line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } .site .s-lb-num { color: rgba(255, 247, 242, .55); font-size: 13px; font-weight: 700; white-space: nowrap; } /* Platz fuer die Fusszeile schaffen. */ .site .s-lb .s-lb-pic { max-height: 78vh; } .site .s-lb-prev:hover, .site .s-lb-next:hover { background: rgba(255, 255, 255, .3); } @media (prefers-reduced-motion: no-preference) { .site .s-lb:target .s-lb-pic, .site .s-lb-r:checked + .s-lb .s-lb-pic { animation: s-lb-zoom .22s ease; } } @keyframes s-lb-zoom { from { transform: scale(.97); } } .site .s-gal-slider .s-grid { display: flex; gap: 0; overflow: hidden; border-radius: var(--s-r-md); box-shadow: var(--s-shadow); } .site .s-gal-slider .s-grid > * { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; box-shadow: none; margin: 0; } @media (prefers-reduced-motion: reduce) { .site .s-gal-slider .s-grid { overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; /* Quer wischen hier wieder erlauben (html verbietet es global). */ touch-action: pan-x pan-y pinch-zoom; } .site .s-gal-slider .s-grid > * { scroll-snap-align: center; } } @media (prefers-reduced-motion: no-preference) { .site .s-sl2 .s-grid > * { animation: s-slide2 10s ease-in-out infinite; } @keyframes s-slide2 { 0.00%, 40.00% { transform: translateX(-0%); } 50.00%, 100.00% { transform: translateX(-100%); } } .site .s-sl3 .s-grid > * { animation: s-slide3 15s ease-in-out infinite; } @keyframes s-slide3 { 0.00%, 26.67% { transform: translateX(-0%); } 33.33%, 60.00% { transform: translateX(-100%); } 66.67%, 100.00% { transform: translateX(-200%); } } .site .s-sl4 .s-grid > * { animation: s-slide4 20s ease-in-out infinite; } @keyframes s-slide4 { 0.00%, 20.00% { transform: translateX(-0%); } 25.00%, 45.00% { transform: translateX(-100%); } 50.00%, 70.00% { transform: translateX(-200%); } 75.00%, 100.00% { transform: translateX(-300%); } } .site .s-sl5 .s-grid > * { animation: s-slide5 25s ease-in-out infinite; } @keyframes s-slide5 { 0.00%, 16.00% { transform: translateX(-0%); } 20.00%, 36.00% { transform: translateX(-100%); } 40.00%, 56.00% { transform: translateX(-200%); } 60.00%, 76.00% { transform: translateX(-300%); } 80.00%, 100.00% { transform: translateX(-400%); } } .site .s-sl6 .s-grid > * { animation: s-slide6 30s ease-in-out infinite; } @keyframes s-slide6 { 0.00%, 13.33% { transform: translateX(-0%); } 16.67%, 30.00% { transform: translateX(-100%); } 33.33%, 46.67% { transform: translateX(-200%); } 50.00%, 63.33% { transform: translateX(-300%); } 66.67%, 80.00% { transform: translateX(-400%); } 83.33%, 100.00% { transform: translateX(-500%); } } .site .s-sl7 .s-grid > * { animation: s-slide7 35s ease-in-out infinite; } @keyframes s-slide7 { 0.00%, 11.43% { transform: translateX(-0%); } 14.29%, 25.71% { transform: translateX(-100%); } 28.57%, 40.00% { transform: translateX(-200%); } 42.86%, 54.29% { transform: translateX(-300%); } 57.14%, 68.57% { transform: translateX(-400%); } 71.43%, 82.86% { transform: translateX(-500%); } 85.71%, 100.00% { transform: translateX(-600%); } } .site .s-sl8 .s-grid > * { animation: s-slide8 40s ease-in-out infinite; } @keyframes s-slide8 { 0.00%, 10.00% { transform: translateX(-0%); } 12.50%, 22.50% { transform: translateX(-100%); } 25.00%, 35.00% { transform: translateX(-200%); } 37.50%, 47.50% { transform: translateX(-300%); } 50.00%, 60.00% { transform: translateX(-400%); } 62.50%, 72.50% { transform: translateX(-500%); } 75.00%, 85.00% { transform: translateX(-600%); } 87.50%, 100.00% { transform: translateX(-700%); } } .site .s-sl9 .s-grid > * { animation: s-slide9 45s ease-in-out infinite; } @keyframes s-slide9 { 0.00%, 8.89% { transform: translateX(-0%); } 11.11%, 20.00% { transform: translateX(-100%); } 22.22%, 31.11% { transform: translateX(-200%); } 33.33%, 42.22% { transform: translateX(-300%); } 44.44%, 53.33% { transform: translateX(-400%); } 55.56%, 64.44% { transform: translateX(-500%); } 66.67%, 75.56% { transform: translateX(-600%); } 77.78%, 86.67% { transform: translateX(-700%); } 88.89%, 100.00% { transform: translateX(-800%); } } .site .s-sl10 .s-grid > * { animation: s-slide10 50s ease-in-out infinite; } @keyframes s-slide10 { 0.00%, 8.00% { transform: translateX(-0%); } 10.00%, 18.00% { transform: translateX(-100%); } 20.00%, 28.00% { transform: translateX(-200%); } 30.00%, 38.00% { transform: translateX(-300%); } 40.00%, 48.00% { transform: translateX(-400%); } 50.00%, 58.00% { transform: translateX(-500%); } 60.00%, 68.00% { transform: translateX(-600%); } 70.00%, 78.00% { transform: translateX(-700%); } 80.00%, 88.00% { transform: translateX(-800%); } 90.00%, 100.00% { transform: translateX(-900%); } } .site .s-sl11 .s-grid > * { animation: s-slide11 55s ease-in-out infinite; } @keyframes s-slide11 { 0.00%, 7.27% { transform: translateX(-0%); } 9.09%, 16.36% { transform: translateX(-100%); } 18.18%, 25.45% { transform: translateX(-200%); } 27.27%, 34.55% { transform: translateX(-300%); } 36.36%, 43.64% { transform: translateX(-400%); } 45.45%, 52.73% { transform: translateX(-500%); } 54.55%, 61.82% { transform: translateX(-600%); } 63.64%, 70.91% { transform: translateX(-700%); } 72.73%, 80.00% { transform: translateX(-800%); } 81.82%, 89.09% { transform: translateX(-900%); } 90.91%, 100.00% { transform: translateX(-1000%); } } .site .s-sl12 .s-grid > * { animation: s-slide12 60s ease-in-out infinite; } @keyframes s-slide12 { 0.00%, 6.67% { transform: translateX(-0%); } 8.33%, 15.00% { transform: translateX(-100%); } 16.67%, 23.33% { transform: translateX(-200%); } 25.00%, 31.67% { transform: translateX(-300%); } 33.33%, 40.00% { transform: translateX(-400%); } 41.67%, 48.33% { transform: translateX(-500%); } 50.00%, 56.67% { transform: translateX(-600%); } 58.33%, 65.00% { transform: translateX(-700%); } 66.67%, 73.33% { transform: translateX(-800%); } 75.00%, 81.67% { transform: translateX(-900%); } 83.33%, 90.00% { transform: translateX(-1000%); } 91.67%, 100.00% { transform: translateX(-1100%); } } } .site .s-steps ol { counter-reset: s-num; } .site .s-step { counter-increment: s-num; position: relative; padding: 24px 22px 20px; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r-md); } .site .s-step h3::before { content: counter(s-num); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--s-accent-soft); color: var(--s-accent-dark); font-size: 17px; margin-bottom: 14px; } .site .s-step p { margin: 0; color: var(--s-muted); font-size: 15.5px; } /* ---- Ablauf: senkrechte Linie ------------------------------------- Die Kartenoptik oben bleibt unangetastet - bereits veroeffentlichte Seiten tragen im HTML nur "s-steps" und sehen damit unveraendert aus. Hier wird nur ueberschrieben, was die Linie anders braucht. */ .site .s-steps-linie .s-grid { grid-template-columns: 1fr; gap: 0; max-width: 660px; margin: 0 auto; } .site .s-steps-linie .s-step { background: none; border: none; border-radius: 0; /* Links Platz fuer Punkt und Linie, unten der Abstand zum naechsten Schritt - die Linie laeuft durch diesen Abstand hindurch. */ padding: 0 0 34px 62px; } .site .s-steps-linie .s-step:last-child { padding-bottom: 0; } /* Die Linie beginnt UNTER dem Punkt und endet am naechsten - deshalb ein fester Startwert statt "inset". Beim letzten Schritt entfaellt sie, sonst zeigte der Ablauf ins Leere. */ .site .s-steps-linie .s-step::before { content: ""; position: absolute; left: 18px; top: 44px; bottom: 0; width: 2px; background: var(--s-line); } .site .s-steps-linie .s-step:last-child::before { display: none; } .site .s-steps-linie .s-step h3 { margin-bottom: 6px; /* Der Punkt sitzt jetzt links neben dem Titel statt darueber - der Titel darf deshalb nicht mehr um die Kreishoehe eingerueckt sein. */ padding-top: 6px; } /* Farben wie in der Kartendarstellung - die sind auf jedem Untergrund erprobt. Der Ring in der Hintergrundfarbe setzt den Punkt von der Linie ab, ohne eine weitere Farbe einzufuehren. */ .site .s-steps-linie .s-step h3::before { position: absolute; left: 0; top: 0; margin-bottom: 0; border: 3px solid var(--s-bg); } .site .s-faq-item { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r-md); padding: 18px 22px; margin-bottom: 12px; } .site .s-faq-item summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; } .site .s-faq-item summary::-webkit-details-marker { display: none; } .site .s-faq-item summary::after { content: "+"; margin-left: auto; font-family: var(--s-display); font-size: 22px; line-height: 1; color: var(--s-accent-text); transition: transform .18s ease; } .site .s-faq-item[open] summary::after { transform: rotate(45deg); } .site .s-faq-item p { margin: 12px 0 0; color: var(--s-muted); } .site .s-cta { background: linear-gradient(135deg, var(--s-accent), var(--s-accent-dark)); border-radius: var(--s-r-lg); color: #fff; text-align: center; max-width: 1024px; margin: 24px auto; padding: 64px 36px; box-shadow: var(--s-shadow); } .site .s-cta p { color: rgba(255, 255, 255, .92); max-width: 560px; margin-left: auto; margin-right: auto; } .site .s-cta .s-btn span, .site .s-cta .s-btn a { background: #fff; color: var(--s-accent-dark); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); } .site .s-btn { margin: 6px 0 0; } .site .s-btn span, .site .s-btn a { display: inline-block; background: var(--s-accent); color: #fff; font-weight: 700; text-decoration: none; padding: 14px 26px; border-radius: var(--s-r-btn); box-shadow: 0 12px 26px rgba(225, 70, 43, .32); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .site .s-btn a:hover { background: var(--s-accent-dark); transform: translateY(-2px); box-shadow: 0 16px 30px rgba(225, 70, 43, .36); } .site .s-cta .s-btn a:hover { background: #FFF1EC; } .site .s-btn a:focus-visible { outline: 3px solid var(--s-accent-dark); outline-offset: 3px; } .site .s-hours { max-width: 640px; } .site .s-hours-row { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 4px; border-bottom: 1px dashed var(--s-line); flex-wrap: wrap; } .site .s-hours-row:last-child { border-bottom: none; } .site .s-hours-day { font-weight: 700; } .site .s-hours-time { color: var(--s-muted); } .site .s-price-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site .s-price-head h3 { margin: 0; } .site .s-price-tag { font-family: var(--s-display); font-weight: 800; color: var(--s-accent-dark); white-space: nowrap; } .site .s-price-item p { margin: 6px 0 0; color: var(--s-muted); font-size: 15.5px; } /* ---- Preisliste: Liste untereinander (Standard) ------------------- Wie beim Team ueber ":not(...)" angesprochen, damit bereits veroeffentlichte Seiten - die im HTML nur "s-price" tragen - beim naechsten CSS-Update nicht ihr Aussehen verlieren. */ .site .s-price:not(.s-price-karten) { max-width: 720px; } .site .s-price:not(.s-price-karten) .s-price-item { padding: 16px 4px; border-bottom: 1px dashed var(--s-line); } .site .s-price:not(.s-price-karten) .s-price-item:last-child { border-bottom: none; } /* In der Liste ist das Faehnchen ein kleines Etikett ueber der Zeile. */ .site .s-price:not(.s-price-karten) .s-price-flag { display: inline-block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-accent-dark); } /* ---- Preisliste: Karten nebeneinander ------------------------------ */ /* auto-fit statt fester Spaltenzahl: zwei Angebote stehen nebeneinander, fuenf brechen von selbst um - ohne eigene Regel je Anzahl. */ .site .s-price-karten .s-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px; /* Ohne "align-items: start" strecken sich alle Karten einer Reihe auf dieselbe Hoehe - Ober- und Unterkante stehen damit buendig, auch wenn eine Beschreibung laenger ist als die andere. */ /* Platz fuer das Faehnchen, das oben ueber die Karte ragt - sonst stiesse es in die Ueberschrift darueber. */ margin-top: 14px; } .site .s-price-karten .s-price-item { position: relative; display: flex; flex-direction: column; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r-md); padding: 26px 24px 24px; box-shadow: var(--s-shadow-sm); } /* Die hervorgehobene Karte traegt den Akzent als kraeftigeren Rahmen und einen tieferen Schatten - Farbe allein waere fuer Farbfehlsichtige zu wenig. Bewusst OHNE Anheben: die Karte stuende dann versetzt zu ihren Nachbarn und ihr Faehnchen ruckte in die Ueberschrift. */ .site .s-price-karten .s-price-item.is-hervor { border: 2px solid var(--s-accent); box-shadow: var(--s-shadow); } .site .s-price-karten .s-price-flag { position: absolute; top: -12px; left: 24px; background: var(--s-accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } /* Preis unter den Namen statt daneben: in einer schmalen Karte wirkt die Zahl als eigene Zeile deutlich ruhiger. */ .site .s-price-karten .s-price-head { display: block; margin-bottom: 10px; } .site .s-price-karten .s-price-tag { display: block; margin-top: 6px; font-size: 30px; line-height: 1.1; color: var(--s-ink); } .site .s-price-karten .s-price-item p { margin: 0; } .site .s-team-card h3 { margin-bottom: 2px; } .site .s-team-role { margin: 0; color: var(--s-muted); font-size: 14.5px; } /* ---- Team: Rundes Portraet (Standard) ----------------------------- Bewusst ueber ":not(...)" statt ueber ".s-team-portraet" angesprochen: BEREITS veroeffentlichte Seiten tragen nur "s-team" im HTML - ihr Markup entsteht erst beim naechsten Veroeffentlichen neu, die gemeinsame CSS-Datei wirkt aber sofort. Ohne diese Schreibweise wuerden die runden Fotos auf allen bestehenden Seiten schlagartig zu unformatierten Bildern. */ .site .s-team:not(.s-team-karten):not(.s-team-overlay) .s-team-card { text-align: center; padding: 12px; } .site .s-team:not(.s-team-karten):not(.s-team-overlay) .s-team-img { width: 132px; height: 132px; aspect-ratio: 1; object-fit: cover; border-radius: 999px; margin: 0 auto 16px; box-shadow: var(--s-shadow-sm); } /* ---- Team: Karten ------------------------------------------------- */ .site .s-team-karten .s-team-card { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r-md); overflow: hidden; box-shadow: var(--s-shadow-sm); /* Gleich hohe Karten in einer Reihe, auch wenn eine Person mehr Text hat als die andere. */ display: flex; flex-direction: column; } .site .s-team-karten .s-team-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .site .s-team-karten .s-team-txt { padding: 18px 20px 20px; } .site .s-team-karten .s-team-role { margin-bottom: 10px; } .site .s-team-karten .s-team-txt p:last-child { margin-bottom: 0; } /* ---- Team: Foto mit Namen darauf ---------------------------------- */ .site .s-team-overlay .s-team-card { position: relative; border-radius: var(--s-r-md); overflow: hidden; box-shadow: var(--s-shadow-sm); /* Traegt die Form auch dann, wenn noch kein Foto gewaehlt ist - sonst faellt die Kachel im Editor auf null Hoehe zusammen. */ aspect-ratio: 4 / 5; background: var(--s-accent-soft); } .site .s-team-overlay .s-team-img { width: 100%; height: 100%; object-fit: cover; } /* Der dunkle Verlauf laeuft nach oben aus, damit die Schrift auch auf einem hellen Foto steht - eine feste Farbflaeche wuerde das Bild unnoetig abschneiden. */ .site .s-team-overlay .s-team-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 18px 16px; background: linear-gradient(transparent, rgba(24, 16, 20, .78)); color: #fff; } .site .s-team-overlay .s-team-txt h3 { color: #fff; } .site .s-team-overlay .s-team-role { color: rgba(255, 255, 255, .84); } .site .s-quote { margin: 0; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r-md); padding: 26px 24px 20px; box-shadow: var(--s-shadow-sm); position: relative; } .site .s-quote::before { content: "\00AB"; display: block; font-family: var(--s-display); font-size: 44px; line-height: .6; color: var(--s-accent-text); margin-bottom: 12px; } .site .s-quote blockquote { margin: 0; } .site .s-quote blockquote p { font-size: 16.5px; } .site .s-quote figcaption { color: var(--s-muted); font-size: 14px; font-weight: 700; } .site .s-stats { text-align: center; } .site .s-stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 64px; margin-top: 12px; } .site .s-stat { display: flex; flex-direction: column; gap: 2px; } .site .s-stat-value { font-family: var(--s-display); font-weight: 800; font-size: clamp(36px, 5vw, 54px); line-height: 1.05; color: var(--s-accent-text); } .site .s-stat-label { color: var(--s-muted); font-weight: 600; font-size: 14.5px; } .site .s-timeline { max-width: 720px; } .site .s-tl { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 2px solid var(--s-line); } .site .s-tl-item { position: relative; padding: 0 0 28px 18px; } .site .s-tl-item:last-child { padding-bottom: 0; } .site .s-tl-item::before { content: ""; position: absolute; left: -26px; top: 6px; width: 14px; height: 14px; border-radius: 999px; background: var(--s-accent); border: 3px solid var(--s-bg); transform: translateX(-50%); } .site .s-tl-time { display: inline-block; font-weight: 700; font-size: 13px; color: var(--s-accent-dark); background: var(--s-accent-soft); border-radius: 999px; padding: 3px 11px; margin-bottom: 8px; } .site .s-tl-item h3 { margin-bottom: 4px; } .site .s-tl-item p { color: var(--s-muted); font-size: 15.5px; margin: 0; } .site .s-links { max-width: 560px; text-align: center; } .site .s-links-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .site .s-link { display: block; background: var(--s-surface); border: 1.5px solid var(--s-line); border-radius: var(--s-r-btn); padding: 15px 20px; font-weight: 700; color: var(--s-ink); text-decoration: none; box-shadow: var(--s-shadow-sm); transition: transform .15s ease, border-color .15s ease, color .15s ease; } .site a.s-link:hover { transform: translateY(-2px); border-color: var(--s-accent); color: var(--s-accent-dark); } .site .s-place { max-width: 640px; } .site .s-place-line { margin: 0 0 8px; } .site .s-place-line strong { display: inline-block; min-width: 84px; font-size: 13.5px; color: var(--s-muted); } .site .s-place-line a { color: var(--s-accent-dark); font-weight: 600; text-decoration: none; } .site .s-place-line a:hover { text-decoration: underline; } .site .s-contact { max-width: 640px; } .site .s-form { margin-top: 10px; } .site .s-form p { margin: 0 0 14px; } .site .s-form label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; } .site .s-form input, .site .s-form textarea { width: 100%; font: inherit; font-size: 15px; padding: 13px 15px; border: 1.5px solid var(--s-line); border-radius: var(--s-r-sm); background: var(--s-surface); color: var(--s-ink); } .site .s-form input:focus, .site .s-form textarea:focus { outline: none; border-color: var(--s-accent); box-shadow: 0 0 0 3px rgba(255, 90, 60, .16); } .site .s-form button { font: inherit; font-weight: 700; background: var(--s-accent); color: #fff; border: none; border-radius: var(--s-r-btn); padding: 14px 28px; cursor: pointer; transition: transform .15s ease, background .15s ease; } .site .s-form button:hover { background: var(--s-accent-dark); transform: translateY(-1px); } /* Gedrueckter Zustand. KEIN Ladezustand - der waere ohne Skript nicht moeglich, und veroeffentlichte Seiten bleiben skriptfrei. Der Knopf bestaetigt damit nur den Klick; waehrend der SMTP-Verbindung zeigt der Browser seinen eigenen Ladeindikator. Ein zweiter Klick in dieser Zeit wird serverseitig von der Abkuehlzeit abgefangen. */ .site .s-form button:active { background: var(--s-accent-dark); transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .site .s-form button, .site .s-form button:hover, .site .s-form button:active { transition: none; transform: none; } } .site .s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .site .s-empty { color: var(--s-muted); text-align: center; } /* ---------- Fusszeilen-Balken -------------------------------------- Ein Balken fuer beides: Kunden-Fusszeile (Text + Links) und Systemzeile (Signatur + Meldelink). Der Kundenteil bleibt ein eigenes