/* mabu-cms — Gestaltung der öffentlichen Seite * * Die drei Farben und die Schrift kommen aus den Einstellungen und stehen * als CSS-Variablen im . Alles hier baut nur noch darauf auf. Wer eine * Seite anders aussehen lassen will, ändert im Regelfall nichts an dieser * Datei, sondern die Werte im Redaktionsbereich. */ *, *::before, *::after { box-sizing: border-box; } :root { /* Aus den Einstellungen abgeleitet, damit nicht jede Nuance einzeln eingestellt werden muss. color-mix mischt im Browser. */ --gedaempft: color-mix(in srgb, var(--text) 62%, var(--grund)); --linie: color-mix(in srgb, var(--text) 14%, var(--grund)); --flaeche: color-mix(in srgb, var(--text) 4%, var(--grund)); --akzent-dunkel: color-mix(in srgb, var(--akzent) 82%, black); --akzent-hell: color-mix(in srgb, var(--akzent) 12%, var(--grund)); --rand: 1.5rem; /* Seitenabstand auf kleinen Geräten */ --breite: 68rem; --schmal: 44rem; --rundung: 0.7rem; --luft: clamp(3rem, 7vw, 6rem); /* Abstand zwischen Abschnitten */ } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Seitliches Überlaufen kappen — Animationen schieben und vergrößern Bausteine über den Rand. Wichtig: clip, nicht hidden. hidden machte das Wurzelelement zum Scrollbehälter und bräche jedes sticky (Kopfzeile, Haften); clip schneidet nur ab. */ html { overflow-x: clip; } body { margin: 0; font-family: var(--schrift); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem); line-height: 1.65; color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } img, picture, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); } h3 { font-size: 1.25rem; } p, ul, ol, blockquote { margin: 0 0 1.1em; } ul, ol { padding-left: 1.3em; } li { margin-bottom: 0.35em; } a { color: var(--akzent); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; } a:hover { color: var(--akzent-dunkel); } blockquote { margin-inline: 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 3px solid var(--akzent); color: var(--gedaempft); font-style: italic; } code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9em; background: var(--flaeche); padding: 0.1em 0.35em; border-radius: 0.3em; } hr { border: 0; border-top: 1px solid var(--linie); margin: 0; } /* Sichtbarer Fokus — Tastaturbedienung muss erkennbar bleiben. */ :focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 0.2rem; } .zum-inhalt { position: absolute; left: -9999px; background: var(--akzent); color: #fff; padding: 0.7rem 1.1rem; border-radius: 0 0 var(--rundung) 0; z-index: 100; } .zum-inhalt:focus { left: 0; top: 0; color: #fff; } /* ---- Raster und Hüllen ------------------------------------------- */ .huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } .huelle.schmal { max-width: var(--schmal); } .mitte { text-align: center; } .abschnitt { padding-block: var(--luft); } .abschnitt + .abschnitt { padding-top: 0; } .abschnitt-titel { margin-bottom: 1.6rem; } .gross { font-size: 1.15em; color: var(--gedaempft); } .fliesstext > :last-child { margin-bottom: 0; } /* ---- Kopf ---------------------------------------------------------- */ .kopf { border-bottom: 1px solid var(--linie); background: color-mix(in srgb, var(--grund) 88%, transparent); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.6) blur(10px); } .kopf-innen { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; min-height: 4.2rem; flex-wrap: wrap; } .marke { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .marke-logo { max-height: 2.4rem; width: auto; } .navigation { display: flex; align-items: center; gap: 0.4rem 1.4rem; flex-wrap: wrap; } .navigation a { color: var(--text); text-decoration: none; font-weight: 500; padding: 0.4rem 0; border-bottom: 2px solid transparent; } .navigation a:hover { border-bottom-color: var(--linie); } .navigation a[aria-current="page"] { border-bottom-color: var(--akzent); color: var(--akzent); } /* Unterseiten: der Hauptpunkt trägt ein Aufklappmenü. Reines CSS — :focus-within hält es auch für Tastaturbedienung offen. */ .nav-zweig { position: relative; display: flex; align-items: center; } .nav-zweig > a::after { content: ' ▾'; font-size: 0.7em; opacity: 0.6; } .unter-menue { position: absolute; top: 100%; left: -0.9rem; min-width: 12rem; display: grid; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--rundung); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.35); padding: 0.35rem 0.9rem; opacity: 0; visibility: hidden; transform: translateY(-0.4rem); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; z-index: 60; } .nav-zweig:hover > .unter-menue, .nav-zweig:focus-within > .unter-menue { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; } .unter-menue a { padding: 0.45rem 0; border-bottom: 1px solid var(--linie); } .unter-menue a:last-child { border-bottom: 0; } /* Menü auf schmalen Geräten: reines CSS, damit die Seite ohne JavaScript vollständig bedienbar bleibt. */ .menue-schalter { position: absolute; opacity: 0; pointer-events: none; } .menue-knopf { display: none; } @media (max-width: 46rem) { .menue-knopf { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; cursor: pointer; margin-right: -0.5rem; padding: 0 0.5rem; } .menue-knopf span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } /* Das aufgeklappte Menü legt sich als Schicht unter die Kopfzeile, statt den Seiteninhalt nach unten zu schieben. */ .navigation { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--grund); border-bottom: 1px solid var(--linie); padding: 0.4rem var(--rand) 0.8rem; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.25); /* Gleitet sanft von oben herein; zu: unsichtbar und unantastbar. visibility wartet beim Schließen, bis das Gleiten fertig ist. */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.7rem); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s; } /* Einblendrichtung nach Einstellung */ .kopf-einblenden-links .navigation { transform: translateX(-1.2rem); } .kopf-einblenden-rechts .navigation { transform: translateX(1.2rem); } .navigation a { padding: 0.8rem 0; border-bottom: 1px solid var(--linie); width: 100%; } .navigation a:last-child { border-bottom: 0; } /* Im Handy-Menü klappen Unterseiten nicht: sie stehen eingerückt darunter. */ .nav-zweig { position: static; width: 100%; } .nav-zweig > a::after { content: ''; } .unter-menue { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 0 1.1rem; } .unter-menue a { padding: 0.8rem 0; } .menue-schalter:checked ~ .navigation { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.28s ease, transform 0.28s ease; } /* Am Handy ist die Kopfzeile immer kompakt — egal welche Höhe für den Desktop gewählt ist. Große Köpfe fressen dort nur Bildschirm. */ .kopf-innen.kopf-hoehe-schmal, .kopf-innen.kopf-hoehe-mittel, .kopf-innen.kopf-hoehe-hoch { min-height: 3.5rem; } .menue-schalter:focus-visible ~ .menue-knopf { outline: 3px solid var(--akzent); outline-offset: 2px; } .menue-schalter:checked ~ .menue-knopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menue-schalter:checked ~ .menue-knopf span:nth-child(2) { opacity: 0; } .menue-schalter:checked ~ .menue-knopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ---- Knopf --------------------------------------------------------- */ .knopf { display: inline-block; background: var(--akzent); color: #fff; padding: 0.75rem 1.5rem; border: 0; border-radius: var(--rundung); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s, transform 0.15s; } .knopf:hover { background: var(--akzent-dunkel); color: #fff; transform: translateY(-1px); } .knopf:active { transform: none; } /* ---- Titelbereich -------------------------------------------------- */ .hero { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; } .hero h1 { margin-bottom: 0.5em; } .hero .gross { max-width: 40rem; } .hero-text { max-width: 44rem; } /* Höhe — bei allen außer Vollbild bestimmt der Inhalt die Höhe mit, die Stufen unterscheiden sich nur im Luftpolster. */ .hero-hoehe-flach { padding-block: clamp(1.5rem, 4vw, 3rem); } .hero-hoehe-hoch { padding-block: clamp(6rem, 14vw, 11rem); } .hero-hoehe-vollbild { /* Bildschirmhöhe minus Kopfleiste, damit unten nichts abgeschnitten wirkt. 100svh statt 100vh: rechnet auf dem Handy die Browserleisten richtig mit. */ min-height: calc(100vh - 4.5rem); min-height: calc(100svh - 4.5rem); display: flex; align-items: center; } .hero-hoehe-vollbild .hero-innen { width: 100%; } .hero-hoehe-vollbild.hero-v-oben { align-items: flex-start; } .hero-hoehe-vollbild.hero-v-unten { align-items: flex-end; } /* Waagerechte Lage des Textblocks */ .hero-lage-mitte .hero-text { margin-inline: auto; text-align: center; } .hero-lage-mitte .hero-text .gross { margin-inline: auto; } .hero-lage-rechts .hero-text { margin-left: auto; } /* Der Stil "Schlicht" hat keinen eingebauten Hintergrund mehr — den bestimmt der Redakteur über die Hintergrund-Felder im Zahnrad. */ .hero-bild { color: #fff; isolation: isolate; /* Der Parallax bewegt den ganzen Bildhintergrund (mitsamt Diaschau). Ohne diesen Beschnitt ragt das vergrößerte Bild beim Scrollen über den Titelbereich hinaus und legt sich über den Inhalt darunter. */ overflow: hidden; } .hero-bild .hero-hintergrund { position: absolute; inset: 0; z-index: -2; } .hero-bild .hero-hintergrund picture, .hero-bild .hero-hintergrund img { width: 100%; height: 100%; object-fit: cover; } .hero-bild::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.45); } .hero-schleier-hell::after { background: rgba(0, 0, 0, 0.25); } .hero-schleier-stark::after { background: rgba(0, 0, 0, 0.65); } .hero-bild .gross { color: rgba(255,255,255,0.92); } .hero-bild .knopf { background: #fff; color: #111; } .hero-bild .knopf:hover { background: #f0f0f0; color: #111; } .hero-geteilt .hero-innen { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 60rem) { .hero-geteilt .hero-innen { grid-template-columns: 1fr 1fr; } } .hero-beiwerk img { border-radius: var(--rundung); } /* ---- Textabschnitt ------------------------------------------------- */ .text-links, .text-rechts { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (min-width: 60rem) { .text-links, .text-rechts { grid-template-columns: 1fr 1fr; } .text-links .text-bild { order: -1; } } .text-bild img { border-radius: var(--rundung); } .text-oben .text-bild { margin-bottom: 2rem; } /* ---- Raster, Karten, Galerie --------------------------------------- */ .raster { display: grid; gap: clamp(1rem, 2.5vw, 1.8rem); } @media (min-width: 34rem) { .raster { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 56rem) { .raster-3 { grid-template-columns: repeat(3, 1fr); } .raster-4 { grid-template-columns: repeat(4, 1fr); } .raster-5 { grid-template-columns: repeat(5, 1fr); } .raster-6 { grid-template-columns: repeat(6, 1fr); } } .karte { display: block; color: inherit; text-decoration: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } a.karte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie)); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.28); } .karte-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .karte-text { padding: 1.2rem 1.3rem 1.4rem; } .karte-text h3 { margin-bottom: 0.4em; } .karte-text > :last-child { margin-bottom: 0; } .galerie-bild { margin: 0; } .galerie-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rundung); } /* ---- Beiträge ------------------------------------------------------ */ .beitrag-datum { color: var(--gedaempft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4em; } .beitrag-bild { margin-bottom: 2rem; } .beitrag-bild img { border-radius: var(--rundung); } .zurueck { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); } /* ---- Formular ------------------------------------------------------ */ .formular { display: grid; gap: 1.1rem; margin-top: 1.5rem; } .formular label { display: grid; gap: 0.35rem; font-weight: 600; } .formular label em { font-weight: 400; color: var(--gedaempft); font-style: normal; } .formular input, .formular textarea { font: inherit; font-weight: 400; color: inherit; padding: 0.7rem 0.85rem; border: 1px solid var(--linie); border-radius: var(--rundung); background: var(--grund); width: 100%; } .formular textarea { resize: vertical; min-height: 8rem; } .formular input:focus, .formular textarea:focus { border-color: var(--akzent); } .formular .knopf { justify-self: start; } /* Zustimmung und Datenschutzhinweis */ .formular .haekchen { grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem; font-weight: 400; font-size: 0.94rem; line-height: 1.5; } .formular .haekchen input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--akzent); } .hinweis-klein { font-size: 0.84rem; color: var(--gedaempft); line-height: 1.5; margin: 0.2rem 0 0; max-width: 34rem; } /* Der Honigtopf muss für Bots im Quelltext stehen, aber für Menschen unerreichbar sein — display:none würde manche Bots misstrauisch machen. */ .honigtopf { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .meldung { padding: 0.9rem 1.1rem; border-radius: var(--rundung); border: 1px solid var(--linie); margin: 1.5rem 0 0; } .meldung-gut { background: color-mix(in srgb, #16a34a 12%, var(--grund)); border-color: #16a34a; } .meldung-schlecht { background: color-mix(in srgb, #dc2626 10%, var(--grund)); border-color: #dc2626; } /* ---- Trenner ------------------------------------------------------- */ .trenner-klein { padding-block: 1rem; } .trenner-mittel { padding-block: 2.5rem; } .trenner-gross { padding-block: 5rem; } /* ---- Fuß ----------------------------------------------------------- */ /* Der Fuß besteht aus zwei Streifen, die bündig aneinanderliegen: oben das Raster (Bausteine, Hintergrund je Reihe frei), darunter die Leiste mit Text und Rechtslinks — eigene Farbe, Text mittig. */ .fuss { margin-top: 0; font-size: 0.94rem; color: var(--gedaempft); } .fuss-unten { background: var(--flaeche); border-top: 1px solid var(--linie); padding-block: 2rem; } .fuss-innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; } .fuss-text > :last-child { margin-bottom: 0; } .fuss-links { display: flex; gap: 1.2rem; flex-wrap: wrap; } .fuss-links a { color: var(--gedaempft); } .fuss-unten.hg-hell, .fuss-unten.hg-hell .fuss-links a, .fuss-unten.hg-hell .fuss-text { color: rgba(255,255,255,0.85); } .fuss-unten.hg-hell { border-top-color: rgba(255,255,255,0.18); } @media print { .kopf, .fuss-links, .zum-inhalt, .formular { display: none; } body { color: #000; background: #fff; } } /* ---- Module --------------------------------------------------------- Stile für die JavaScript-Module aus gestaltung/module/. Sie stören nicht, wenn kein Modul aktiv ist — die Klassen entstehen erst durch das Skript. */ .m-lichtkasten { position: fixed; inset: 0; z-index: 200; background: rgba(10, 10, 12, 0.92); display: flex; align-items: center; justify-content: center; padding: 2.5rem; } .m-lichtkasten[hidden] { display: none; } .m-lichtkasten img { max-width: 100%; max-height: 100%; border-radius: var(--rundung); cursor: e-resize; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.8); } .m-lichtkasten-zu { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.6rem; line-height: 1; background: rgba(255,255,255,0.12); color: #fff; border: 0; border-radius: 50%; cursor: pointer; } .m-lichtkasten-zu:hover { background: rgba(255,255,255,0.25); } body.m-lichtkasten-offen { overflow: hidden; } /* ---- Slider (klassisch: ein Bild pro Schritt) ------------------------ */ .slider-buehne { position: relative; } .slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Keine sichtbare Leiste — geblättert wird mit Pfeilen, Wischen, Tastatur. */ scrollbar-width: none; } .slider::-webkit-scrollbar { display: none; } .slider .dia { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; /* pro Wisch genau ein Bild weiter */ margin: 0; } .slider .dia img { width: 100%; } .slider:focus-visible { outline: 3px solid var(--akzent); outline-offset: 4px; } .slider-abstand-ohne { gap: 0; } .slider-abstand-klein { gap: 0.75rem; } .slider-abstand-mittel { gap: 2rem; } .slider-hoehe-klein .dia img { height: 40vh; object-fit: cover; } .slider-hoehe-mittel .dia img { height: 62vh; object-fit: cover; } .slider-hoehe-vollbild .dia img { height: calc(100vh - 4.5rem); height: calc(100svh - 4.5rem); object-fit: cover; } .slider:not(.slider-vollbreit) .dia img { border-radius: var(--rundung); } .slider-vollbreit .dia img { border-radius: 0; } /* Bewegtes Hintergrundbild braucht Beschnitt/* Bewegtes Hintergrundbild braucht Beschnitt, sonst ragt es beim Parallax heraus. */ .hero-bild .hero-hintergrund { overflow: hidden; } /* Diaschau: die Bilder liegen übereinander, sichtbar ist das mit m-dia-an. Ohne JavaScript bleibt das erste stehen — es bringt die Klasse schon mit. */ .hero-hintergrund .hero-dia { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; } .hero-hintergrund .hero-dia.m-dia-an { opacity: 1; } .hero-dia picture, .hero-dia img { width: 100%; height: 100%; object-fit: cover; } /* ---- Fragen und Antworten ------------------------------------------- */ .fragen { display: grid; gap: 0.6rem; } .frage { border: 1px solid var(--linie); border-radius: var(--rundung); background: var(--flaeche); } .frage summary { padding: 0.9rem 1.1rem; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 2.6rem; } .frage summary::-webkit-details-marker { display: none; } .frage summary::after { content: '+'; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 400; color: var(--akzent); transition: transform 0.2s; } .frage[open] summary::after { transform: translateY(-50%) rotate(45deg); } .frage-antwort { padding: 0 1.1rem 1rem; color: var(--gedaempft); } /* ---- Modul: Einblenden ---------------------------------------------- */ .m-anim { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; } .m-da.m-anim { opacity: 1; transform: none; } /* ---- Modul: Slider-Knöpfe und Punkte --------------------------------- */ .m-slider-knopf { position: absolute; top: 50%; transform: translateY(-50%); width: 2.9rem; height: 2.9rem; font-size: 1.6rem; line-height: 1; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; z-index: 5; transition: opacity 0.2s, background 0.2s; } .m-slider-knopf:hover { background: rgba(0, 0, 0, 0.7); } .m-slider-zurueck { left: 1rem; } .m-slider-vor { right: 1rem; } .m-slider-knopf.m-aus { opacity: 0; pointer-events: none; } .m-slider-punkte { display: flex; justify-content: center; gap: 0.55rem; padding-top: 1rem; } .m-punkt { width: 0.65rem; height: 0.65rem; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 25%, var(--grund)); cursor: pointer; transition: transform 0.15s, background 0.15s; } .m-punkt:hover { transform: scale(1.3); } .m-punkt-an { background: var(--akzent); transform: scale(1.25); } /* ---- Modul: Nach oben ----------------------------------------------- */ .m-nach-oben { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90; width: 2.9rem; height: 2.9rem; font-size: 1.25rem; line-height: 1; border: 1px solid var(--linie); border-radius: 50%; background: var(--grund); color: var(--text); cursor: pointer; box-shadow: 0 6px 20px -8px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; } .m-nach-oben.m-da { opacity: 1; pointer-events: auto; transform: none; } .m-nach-oben:hover { border-color: var(--akzent); color: var(--akzent); } /* ---- Spalten (Reihen mit Gewichten) ---------------------------------- Die Aufteilung einer Reihe (1-1, 3-1, 1-2-1 …) steckt als spf-Klasse an jeder Spalte: schlicht flex-grow. Unter mittlerer Breite stapeln die Spalten untereinander — dort zählt nur noch die Reihenfolge. */ .spalten { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 3rem); } @media (min-width: 56rem) { .spalten { flex-direction: row; align-items: flex-start; } .spalten > .spalte { flex-basis: 0; min-width: 0; } .spf-1 { flex-grow: 1; } .spf-2 { flex-grow: 2; } .spf-3 { flex-grow: 3; } .spf-4 { flex-grow: 4; } .spf-5 { flex-grow: 5; } .spf-6 { flex-grow: 6; } } /* In einer Spalte ist ein Baustein Inhalt, kein Seitenabschnitt. Der Stapel regelt die Abstände selbst: fester Zwischenraum (gap) zwischen den Bricks — dadurch ist jeder Abstand gleich, egal welche Bricks in welcher Reihenfolge. Die Bricks steuern KEINE eigenen Vertikal-Polster bei. */ .spalte, .spalte-voll { display: flex; flex-direction: column; gap: 1.1rem; } .spalte .abschnitt, .spalte-voll .abschnitt { padding-block: 0; } .spalte .huelle, .spalte-voll .huelle { padding-inline: 0; max-width: none; } .spalte .huelle.schmal { max-width: none; } /* Überschriften behalten in Spalten ihre gewählte Größe. Nur Fließtext- Zwischentitel (ohne Größenwahl) treten etwas zurück. */ .spalte .fliesstext h2 { font-size: 1.35rem; } /* ---- Breiten und Navigations-Lage ------------------------------------ */ /* Vollbreite Reihe: kein Satzspiegel, nur der Seitenrand als Luft. */ .spalten-vollbreit { width: 100%; max-width: none; padding-inline: var(--rand); } /* Kopfleiste über die volle Breite statt im Satzspiegel. */ .kopf-vollbreit { width: 100%; max-width: none; padding-inline: var(--rand); } /* ---- Lage von Logo und Navigation ------------------------------------ Alles über Flex-Reihenfolge und automatische Ränder — die Klassen kommen aus den Navigations-Einstellungen. */ .kopf-nav-rechts .navigation { margin-left: auto; } .kopf-nav-mitte .navigation { margin-inline: auto; } .kopf-nav-links .navigation { margin-left: 1.5rem; } .kopf-logo-rechts .marke { order: 10; margin-left: auto; } .kopf-logo-rechts.kopf-nav-rechts .navigation { margin-left: auto; margin-right: 1.5rem; } .kopf-logo-rechts.kopf-nav-links .navigation { margin-left: 0; } /* ---- Verhalten beim Scrollen ---------------------------------------- */ .kopf-verhalten-scrollt { position: static; } .kopf-verhalten-einblenden { transition: transform 0.25s ease; } .kopf-verhalten-einblenden.kopf-versteckt { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .kopf-verhalten-einblenden { transition: none; } } /* ---- Menüknopf am Handy ---------------------------------------------- */ @media (max-width: 46rem) { .kopf-mobil-rechts .menue-knopf { margin-left: auto; } .kopf-mobil-links .menue-knopf { order: -1; margin-left: -0.5rem; margin-right: 0; } .kopf-mobil-links .marke { margin-left: auto; margin-right: 0.5rem; } /* Am Handy zählt nur der Knopf — die Lage-Ränder der großen Ansicht stören dort nicht, weil die Navigation ausgeklappt die volle Breite hat. */ } /* ---- Höhe der Kopfleiste ---------------------------------------------- */ .kopf-innen.kopf-hoehe-schmal { min-height: 3rem; } .kopf-innen.kopf-hoehe-mittel { min-height: 4.2rem; } .kopf-innen.kopf-hoehe-hoch { min-height: 6rem; } /* ---- Fußzeilen-Raster -------------------------------------------------- */ .fuss-raster { padding-top: 0; } .fuss-raster .abschnitt { padding-block: 2rem; } .fuss-raster .abschnitt + .abschnitt { padding-top: 0; } /* Reihen mit eigenem Hintergrund im Raster: bündig, ohne Doppel-Luft. */ .fuss-raster .abschnitt-hg { padding-block: 2.5rem; } /* Die Fußzeile ist gedeckter als die Seite — Überschriften eine Stufe kleiner. */ .fuss-raster h2 { font-size: 1.15rem; } .fuss-raster h3 { font-size: 1rem; } /* ---- Reihen-Hintergründe ---------------------------------------------- */ /* Reihen mit eigenem Hintergrund brauchen innen etwas mehr Luft, damit die Farbe als Band wirkt und der Inhalt nicht an den Kanten klebt. */ .abschnitt-hg { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .abschnitt-hg + .abschnitt { padding-top: var(--luft); } /* Heller Text für dunkle Hintergründe — greift auf alles in der Reihe. */ .hg-hell { color: #fff; } .hg-hell h1, .hg-hell h2, .hg-hell h3 { color: #fff; } .hg-hell .gross, .hg-hell .fliesstext, .hg-hell .beitrag-datum { color: rgba(255, 255, 255, 0.88); } .hg-hell a:not(.knopf) { color: #fff; } .hg-hell blockquote { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.5); } .hg-hell hr { border-color: rgba(255, 255, 255, 0.3); } .hg-hell .knopf { background: #fff; color: #111; } .hg-hell .knopf:hover { background: #f0f0f0; color: #111; } /* Hintergrund-Band um einzelne Bausteine: der Abschnitt darin bleibt durchsichtig, sein Innenabstand lässt das Band als Fläche wirken. In Spalten fällt der Abschnitts-Abstand weg — dort polstert das Band. */ .hg-band { } /* ---- Atomare Bausteine: Überschrift, Text, Bild, Knopf ---------------- */ /* Schlanke Abschnitte: einzelne Elemente stapeln sich eng — die große Abschnitts-Luft gibt es nur am Seitenanfang und -ende. Die Regeln zielen exakt auf die Bühne (mit und ohne Editor-Hülle), sonst bekäme in einer Spalte jeder Baustein die Luft, weil er dort Erstgeborener seiner Hülle ist. */ .abschnitt-schlank { padding-block: 0.4rem; } main > .abschnitt-schlank:first-child, main > .e-block:first-child > .abschnitt-schlank, main > .e-block:first-child > .hg-band > .abschnitt-schlank { padding-top: var(--luft); } main > .abschnitt-schlank:last-of-type:last-child, main > .e-block:last-child > .abschnitt-schlank, main > .e-block:last-child > .hg-band > .abschnitt-schlank { padding-bottom: var(--luft); } .lage-mitte { text-align: center; } .lage-rechts { text-align: right; } .lage-mitte .fliesstext { margin-inline: auto; } .einzel-ueberschrift { margin-bottom: 0; } /* "Groß" entspricht exakt der Abschnitts-Überschrift (wie bei Kacheln, Galerie usw.) — gleiche Stufe, gleiches Bild. Mittel = h3, Klein = h4. */ .einzel-gross { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); } .einzel-mittel { font-size: 1.25rem; } .einzel-klein { font-size: 1.05rem; } /* Die gewählte Größe gilt überall — auch in Spalten und Gruppen. Wer "Groß" sagt, meint groß; automatisches Schrumpfen entmachtet die Wahl. */ .einzel-bild { margin: 0; } .einzel-bild img { width: 100%; } .einzel-bild-rund img { border-radius: var(--rundung); } .einzel-bild-mittel { max-width: 44rem; margin-inline: auto; } .einzel-bild-klein { max-width: 26rem; margin-inline: auto; } .einzel-bild figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--gedaempft); text-align: center; } .einzel-bild-leer { display: grid; place-items: center; min-height: 8rem; border: 2px dashed var(--linie); border-radius: var(--rundung); color: var(--gedaempft); font-style: italic; } /* Knopf-Varianten */ .knopf-rahmen { background: transparent; color: var(--akzent); border: 2px solid var(--akzent); } .knopf-rahmen:hover { background: var(--akzent); color: #fff; } .knopf-link { background: transparent; color: var(--akzent); padding: 0.2rem 0; border-radius: 0; } .knopf-link::after { content: ' →'; } .knopf-link:hover { background: transparent; transform: none; text-decoration: underline; } .knopf-gross { padding: 1rem 2.2rem; font-size: 1.1rem; } .knopf-link.knopf-gross { padding: 0.2rem 0; } .hg-hell .knopf-rahmen { color: #fff; border-color: #fff; } .hg-hell .knopf-rahmen:hover { background: #fff; color: #111; } .hg-hell .knopf-link { color: #fff; } /* Gruppe in einer Spalte: das Band trägt den Hintergrund und polstert, der Stapel darin folgt den Spaltenregeln. */ .spalte .hg-band { padding: 1.25rem; border-radius: var(--rundung); } .gruppe-band { border-radius: var(--rundung); } /* Trägt die Gruppe einen Hintergrund, braucht der Inhalt ordentlich Luft zur Kante — sonst klebt der Text an der Farbfläche. */ .gruppe-band[class*="hg-"] { padding: clamp(1.5rem, 3vw, 2.25rem); } /* ---- Karte (Anfahrt, OpenStreetMap in zwei Klicks) -------------------- */ .karte-titel { margin-bottom: 0.6rem; } .karte-flaeche { display: grid; gap: 0.8rem; justify-items: center; align-content: center; min-height: 16rem; padding: 1.5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung); text-align: center; } .karte-adresse { margin: 0; font-weight: 600; } .karte-hinweis { max-width: 30rem; } .karte-rahmen { width: 100%; height: 22rem; border: 0; border-radius: calc(var(--rundung) - 2px); } .karte-geladen { padding: 0.5rem; gap: 0.4rem; } .karte-geladen .karte-adresse, .karte-geladen .karte-hinweis { font-size: 0.85rem; } /* Scroll-Schutz der Karte: Deckel fängt Rad und Gesten, bis man die Karte ausdrücklich anklickt; verlässt die Maus die Karte, schützt er wieder. */ .karte-huelle { position: relative; width: 100%; } .karte-deckel { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: transparent; display: grid; place-items: end center; } .karte-deckel span { margin-bottom: 1rem; padding: 0.35rem 0.9rem; background: rgba(20, 22, 26, 0.75); color: #fff; border-radius: 1rem; font-size: 0.78rem; opacity: 0; transition: opacity 0.2s; } .karte-deckel:hover span { opacity: 1; } .karte-aktiv .karte-deckel { display: none; } /* Die Bühne ist ein Flex-Stapel — verhält sich wie der normale Fluss, erlaubt aber die geräteabhängige Reihenfolge über order. */ main { display: flex; flex-direction: column; } main > * { width: 100%; } /* ---- Baustein-Animationen -------------------------------------------- */ /* Alles hängt an html.anim-los — die Klasse setzt nur animation.js, und nur wenn "Bewegung reduzieren" NICHT eingestellt ist. Ohne JavaScript oder mit reduzierter Bewegung bleibt jeder Baustein ruhig sichtbar. */ /* Beim Erscheinen: Startzustand versteckt, .anim-da gleitet herein. */ .anim-los [data-anim="erscheinen"] { opacity: 0; transition: opacity var(--anim-t, 0.6s) ease, transform var(--anim-t, 0.6s) ease; transition-delay: var(--anim-w, 0s); } .anim-los [data-anim="erscheinen"][data-anim-ein="hoch"] { transform: translateY(2.2rem); } .anim-los [data-anim="erscheinen"][data-anim-ein="runter"] { transform: translateY(-2.2rem); } .anim-los [data-anim="erscheinen"][data-anim-ein="links"] { transform: translateX(-2.6rem); } .anim-los [data-anim="erscheinen"][data-anim-ein="rechts"] { transform: translateX(2.6rem); } .anim-los [data-anim="erscheinen"][data-anim-ein="wachsen"] { transform: scale(0.92); } .anim-los [data-anim="erscheinen"][data-anim-ein="schrumpfen"] { transform: scale(1.08); } .anim-los [data-anim-tempo="ruhig"] { --anim-t: 1s; } .anim-los [data-anim-tempo="schnell"] { --anim-t: 0.35s; } .anim-los [data-anim-warten="kurz"] { --anim-w: 0.18s; } .anim-los [data-anim-warten="lang"] { --anim-w: 0.45s; } .anim-los [data-anim="erscheinen"].anim-da { opacity: 1; transform: none; } /* Ausgang beim Verlassen — die Richtung setzt fort, statt zurückzuspulen. */ .anim-los [data-anim="erscheinen"].anim-raus { opacity: 0; transition-delay: 0s; } .anim-los .anim-raus[data-anim-aus="hoch"] { transform: translateY(-2.2rem); } .anim-los .anim-raus[data-anim-aus="runter"] { transform: translateY(2.2rem); } .anim-los .anim-raus[data-anim-aus="links"] { transform: translateX(2.6rem); } .anim-los .anim-raus[data-anim-aus="rechts"] { transform: translateX(-2.6rem); } .anim-los .anim-raus[data-anim-aus="wachsen"] { transform: scale(1.08); } .anim-los .anim-raus[data-anim-aus="schrumpfen"] { transform: scale(0.92); } /* An das Scrollen gekoppelt: --anim-p (0…1) kommt aus animation.js. */ .anim-los [data-anim="scrollen"] { opacity: var(--anim-p, 1); } .anim-los [data-anim="scrollen"][data-anim-ein="hoch"] { transform: translateY(calc((1 - var(--anim-p, 1)) * 3rem)); } .anim-los [data-anim="scrollen"][data-anim-ein="runter"] { transform: translateY(calc((1 - var(--anim-p, 1)) * -3rem)); } .anim-los [data-anim="scrollen"][data-anim-ein="links"] { transform: translateX(calc((1 - var(--anim-p, 1)) * -3.5rem)); } .anim-los [data-anim="scrollen"][data-anim-ein="rechts"] { transform: translateX(calc((1 - var(--anim-p, 1)) * 3.5rem)); } .anim-los [data-anim="scrollen"][data-anim-ein="wachsen"] { transform: scale(calc(0.9 + var(--anim-p, 1) * 0.1)); } .anim-los [data-anim="scrollen"][data-anim-ein="schrumpfen"] { transform: scale(calc(1.1 - var(--anim-p, 1) * 0.1)); } /* Haften: die Hülle trägt den Scrollweg als Polster, das Innere klebt unterhalb der Kopfzeile fest, bis der Weg abgelaufen ist. --haft-p (0…1) treibt die Wandlung währenddessen. */ /* Der Scrollweg ist ein ::after-Spacer, KEIN Padding: sticky darf sich nur in der Content-Box des Elternteils bewegen, Padding zählt nicht. */ .anim-los [data-haft]::after { content: ''; display: block; } .anim-los [data-haft="kurz"]::after { height: 60vh; } .anim-los [data-haft="mittel"]::after { height: 120vh; } .anim-los [data-haft="lang"]::after { height: 200vh; } .anim-los [data-haft] { /* clip, nicht hidden: hidden würde die Hülle zum Scrollbehälter machen und das sticky des Inneren lahmlegen. clip schneidet nur ab, damit das Wachsen keinen seitlichen Überlauf erzeugt. */ overflow-x: clip; } .anim-los [data-haft] > .haft-klebt { position: sticky; top: 6.5rem; } .anim-los [data-haft-wandlung="wachsen"] > .haft-klebt { transform: scale(calc(0.92 + var(--haft-p, 0) * 0.16)); } .anim-los [data-haft-wandlung="schrumpfen"] > .haft-klebt { transform: scale(calc(1.08 - var(--haft-p, 0) * 0.16)); } .anim-los [data-haft-wandlung="einblenden"] > .haft-klebt { opacity: calc(0.15 + var(--haft-p, 0) * 0.85); } /* Am Handy ist Haften aus: kleine Bildschirme haben keinen Platz für Standbilder, der Baustein fließt normal mit. */ @media (max-width: 40rem) { .anim-los [data-haft]::after { height: 0; } .anim-los [data-haft] > .haft-klebt { position: static; transform: none; opacity: 1; } } /* ---- Kicker, Pfeil-Verweise, Sterne ----------------------------------- */ .einzel-kicker { color: var(--akzent); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: 0.95rem; margin: 0; } /* Kicker + Überschrift direkt darunter rücken zusammen. */ .abschnitt-schlank + .abschnitt-schlank { padding-top: 0; } .pfeil-verweis { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--akzent); font-weight: 500; text-decoration: none; font-size: 0.95rem; } .pfeil-verweis svg { width: 2.1rem; height: auto; } a.pfeil-verweis:hover, a:hover .pfeil-verweis { color: var(--akzent-dunkel); } .karte-mehr { margin-top: 0.6rem; } .sterne { display: inline-flex; gap: 0.28rem; } .sterne i { display: inline-flex; } .sterne svg { width: 1em; height: 1em; } .stern-voll { color: var(--akzent); } .stern-leer { color: var(--linie); } /* Schlichte Kacheln: nur Text, kein Kasten. */ .raster-schlicht .karte { background: none; border: 0; box-shadow: none; padding: 0; } /* ---- Produkte ---------------------------------------------------------- */ .produkte { display: grid; gap: 1.6rem; margin-top: 0.5rem; } .produkte-raster.psp-2 { grid-template-columns: repeat(2, 1fr); } .produkte-raster.psp-3 { grid-template-columns: repeat(3, 1fr); } .produkte-raster.psp-4 { grid-template-columns: repeat(4, 1fr); } .produkte-raster.psp-5 { grid-template-columns: repeat(5, 1fr); } .produkte-raster.psp-6 { grid-template-columns: repeat(6, 1fr); } .produkte-slider { grid-auto-flow: column; grid-auto-columns: min(17rem, 74vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem; scrollbar-width: none; } .produkte-slider::-webkit-scrollbar { display: none; } .produkte-slider .produkt { scroll-snap-align: start; } .produkt { background: var(--grund); border-radius: var(--rundung); overflow: hidden; box-shadow: 0 18px 45px -32px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; } .produkt-bild { background: var(--flaeche); position: relative; aspect-ratio: 268 / 230; } /* Das Bild absolut im Feld verankern: aspect-ratio ist nur eine "bevorzugte" Höhe, die ein hohes Foto sonst überstimmt und damit die Karte sprengt. Absolut positioniert hat der Inhalt keinerlei Einfluss auf die Feldhöhe. */ .produkt-bild picture { position: absolute; inset: 1.2rem; } .produkt-bild img { width: 100%; height: 100%; object-fit: contain; } .produkt-text { padding: 1.1rem 1.3rem 1.4rem; display: grid; gap: 0.3rem; justify-items: start; } .produkt-kategorie { color: var(--gedaempft); font-size: 0.88rem; margin: 0; } .produkt-name { margin: 0; font-size: 1.12rem; } .produkt-text .sterne { font-size: 0.95rem; } .produkt-fuss { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 0.6rem; } .produkt-preis { font-weight: 700; font-size: 1.18rem; } .produkt-preis::first-letter { font-size: 0.8em; } .produkt-plus { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--text); color: var(--grund); display: grid; place-items: center; transition: transform 0.15s, background 0.15s; } .produkt-plus:hover { background: var(--akzent); color: #fff; transform: translateY(-2px); } .produkt-plus svg { width: 1.15rem; height: 1.15rem; } .produkte-mehr { text-align: center; margin: 2.2rem 0 0; } /* ---- Stimmen ----------------------------------------------------------- */ .stimmen { display: grid; gap: 1.8rem; margin-top: 0.5rem; } .stimmen-raster.ssp-2 { grid-template-columns: repeat(2, 1fr); } .stimmen-raster.ssp-3 { grid-template-columns: repeat(3, 1fr); } .stimmen-raster.ssp-4 { grid-template-columns: repeat(4, 1fr); } .stimmen-slider { grid-auto-flow: column; grid-auto-columns: min(23rem, 84vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem; scrollbar-width: none; } .stimmen-slider::-webkit-scrollbar { display: none; } .stimmen-slider .stimme { scroll-snap-align: start; } .stimme { display: grid; } .stimme-bild { border-radius: var(--rundung); overflow: hidden; aspect-ratio: 370 / 420; } .stimme-bild picture { width: 100%; height: 100%; display: block; } .stimme-bild img { width: 100%; height: 100%; object-fit: cover; } .stimme-karte { background: var(--grund); border-radius: var(--rundung); box-shadow: 0 24px 55px -35px rgba(0, 0, 0, 0.35); margin: -7.5rem 1.1rem 0; padding: 2.6rem 1.4rem 1.6rem; text-align: center; position: relative; } .stimme-gesicht { position: absolute; top: -1.9rem; left: 50%; transform: translateX(-50%); width: 3.8rem; height: 3.8rem; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45); display: block; } .stimme-gesicht picture { width: 100%; height: 100%; display: block; } .stimme-gesicht img { width: 100%; height: 100%; object-fit: cover; } .stimme-name { margin: 0; font-size: 1.05rem; } .stimme-rolle { color: var(--gedaempft); font-size: 0.8rem; margin: 0.15rem 0 0.9rem; } .stimme-zitat { font-size: 0.92rem; margin: 0 0 0.9rem; } .stimme-karte .sterne { font-size: 0.85rem; } /* Am Handy stapeln die Raster; die Slider bleiben Slider. */ @media (max-width: 40rem) { .produkte-raster.psp-3, .produkte-raster.psp-4 { grid-template-columns: 1fr 1fr; } .stimmen-raster.ssp-2, .stimmen-raster.ssp-3 { grid-template-columns: 1fr; } } /* ---- Containerübergänge ------------------------------------------------ Verlauf, Schräge oder Welle in einstellbarer Zielfarbe (--ueb-farbe, Standard: Seitenfarbe), die oben/unten in einen Baustein hineinragt. Die Übergänge sind ECHTE Kind-Elemente (.ueb-deck / .ueb-svg), keine Pseudo-Elemente — die kollidierten mit dem Abdunkelungs-Schleier des Titelbereichs, der ::after schon belegt. Der Innenabstand wächst bei Schräge/Welle über eine transparente Border mit (der Hintergrund läuft durch sie hindurch, der Inhalt endet davor); die Decks sitzen per negativem Versatz genau in dieser Border-Zone. */ .ueb { position: relative; /* Eigener Stapelkontext: Decks liegen über dem Hintergrund dieses Containers, aber unter seinem Inhalt. */ isolation: isolate; --ueb-h: clamp(2.5rem, 6vw, 5.5rem); --ueb-farbe: var(--grund); /* Zielfarbe; uebf-… überschreibt sie */ } .ueb-oben-schraege, .ueb-oben-schraege2, .ueb-oben-welle { border-top: var(--ueb-h) solid transparent; } .ueb-unten-schraege, .ueb-unten-schraege2, .ueb-unten-welle { border-bottom: var(--ueb-h) solid transparent; } .ueb-deck, .ueb-svg { position: absolute; left: 0; right: 0; height: var(--ueb-h); pointer-events: none; z-index: -1; display: block; } .ueb-deck-oben, .ueb-svg-oben { top: calc(-1 * var(--ueb-h)); } .ueb-deck-unten, .ueb-svg-unten { bottom: calc(-1 * var(--ueb-h)); } .ueb-svg-oben { transform: scaleY(-1); } .ueb-svg { width: 100%; color: var(--ueb-farbe); } /* Der Verlauf liegt IM Container (kein Extra-Abstand) und geht farbstabil von 0 auf 100 % Deckkraft derselben Zielfarbe. */ .ueb-deck-oben.ueb-deck-verlauf { top: 0; background: linear-gradient(to bottom, var(--ueb-farbe), rgb(from var(--ueb-farbe) r g b / 0%)); } .ueb-deck-unten.ueb-deck-verlauf { bottom: 0; background: linear-gradient(to bottom, rgb(from var(--ueb-farbe) r g b / 0%), var(--ueb-farbe)); } /* Schrägen: ein Keil in Zielfarbe schneidet die Kante schräg an. */ .ueb-deck-unten.ueb-deck-schraege { background: var(--ueb-farbe); clip-path: polygon(0 100%, 100% 0, 100% 100%); } .ueb-deck-unten.ueb-deck-schraege2 { background: var(--ueb-farbe); clip-path: polygon(0 0, 100% 100%, 0 100%); } .ueb-deck-oben.ueb-deck-schraege { background: var(--ueb-farbe); clip-path: polygon(0 0, 100% 0, 0 100%); } .ueb-deck-oben.ueb-deck-schraege2 { background: var(--ueb-farbe); clip-path: polygon(0 0, 100% 0, 100% 100%); } /* Titelbereich: dort liegt der Verlauf ÜBER Bild und Schleier, der Inhalt darüber — sonst dimmte der Schleier das Verlaufs-Ende ab. */ .hero .ueb-deck, .hero .ueb-svg { z-index: 1; } .hero > .huelle { position: relative; z-index: 2; } /* ---- CTA: der schwebende Hinweis --------------------------------------- */ .cta { --cta-rand: clamp(1rem, 2.5vw, 1.8rem); position: fixed; z-index: 80; display: inline-flex; align-items: stretch; max-width: min(24rem, calc(100vw - 2 * var(--cta-rand))); font-size: 1rem; border-radius: var(--rundung); box-shadow: 0 18px 45px -18px rgba(0, 0, 0, 0.4); } .cta-absolut { position: absolute; } /* Freie Position: left/top in Prozent (ctap-…-Regel), Mittelpunkt-Anker. */ .cta { transform: translate(-50%, -50%); } .cta-gr-klein { font-size: 0.85rem; } .cta-gr-gross { font-size: 1.2rem; } .cta-rund-ohne { border-radius: 0; } .cta-rund-rund { border-radius: 1.6rem; } .cta-rund-pille { border-radius: 999px; } /* Echter Kreis: feste Proportion, Text mittig, Schließen-Knopf in der Ecke. */ .cta-rund-kreis { border-radius: 50%; aspect-ratio: 1 / 1; width: 8.5em; text-align: center; } .cta-rund-kreis .cta-flaeche { place-content: center; justify-items: center; padding: 1em; } .cta-rund-kreis .cta-zu { top: 0.2em; right: 0.2em; } /* Ohne eigenen Hintergrund: Akzentfarbe mit hellem Text. */ .cta-akzent { background: var(--akzent); color: #fff; } .cta-akzent .cta-flaeche { color: #fff; } .cta-flaeche { display: grid; gap: 0.15em; padding: 0.85em 1.3em; color: inherit; text-decoration: none; min-width: 0; } a.cta-flaeche:hover { filter: brightness(1.08); } .cta-text { font-weight: 650; line-height: 1.3; } .cta-text p { margin: 0; } .cta-text a { color: inherit; } .cta .lage-links { text-align: left; } .cta .lage-mitte { text-align: center; } .cta .lage-rechts { text-align: right; } .cta-unter { font-size: 0.82em; opacity: 0.85; line-height: 1.3; } /* Bild-Hintergründe brauchen lesbaren Text — hg-hell liefert Weiß. */ .cta.hg-hell .cta-flaeche { color: #fff; } /* Der Schließen-Knopf schwebt ÜBER der Ecke des CTA. */ .cta-zu { position: absolute; top: -0.55em; right: -0.55em; font: inherit; font-size: 0.75em; line-height: 1; color: #fff; background: #1e1e1e; border: 2px solid var(--grund); border-radius: 999px; width: 2em; height: 2em; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); } .cta-zu:hover { background: #000; transform: scale(1.08); } .cta[hidden] { display: none; }