/*! Mitgliedschaftsformular: Stile nur innerhalb von #app. Die Seite selbst nutzt css/style.css unverändert. */ /* ============================================================ Grundlage für alle Varianten: Farben der Moschee-Webseite, Schrift, Felder, Bewegung ============================================================ */ :root { --petrol: #194a57; --petrol-dunkel: #183442; --petrol-hell: #e9f1f3; --petrol-zart: #f3f8f9; --gelb: #fedc00; --gelb-dunkel: #e8c800; --gelb-hell: #fff7c2; --auf-gelb: #1e3744; --blaugrau: #426d7f; --rand: #a5b7bc; --rand-feld: #7d9399; --linie: #e1e8ea; --titel: #000000; --text: #666; --text-dunkel: #4b5559; --flaeche: #f5f5f5; --weiss: #fff; --fehler: #b42318; --fehler-hell: #fef3f2; --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --schrift-titel: var(--schrift); --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --rund: 'Manrope', var(--schrift); --r: 10px; --r-gross: 16px; --r-knopf: 10px; --feld-h: 50px; --schatten-1: 0 1px 2px rgba(30, 55, 68, 0.06), 0 2px 10px rgba(30, 55, 68, 0.06); --schatten-2: 0 10px 30px rgba(30, 55, 68, 0.14), 0 2px 6px rgba(30, 55, 68, 0.06); --schatten-3: 0 24px 60px rgba(22, 58, 69, 0.22); --ein: cubic-bezier(0.05, 0.7, 0.1, 1); --aus: cubic-bezier(0.3, 0, 0.8, 0.15); --normal: cubic-bezier(0.2, 0, 0, 1); --feder: cubic-bezier(0.34, 1.56, 0.64, 1); --kurz: 160ms; --mittel: 260ms; --lang: 420ms; --oben: 0px; --rechts: 0px; --hg: var(--flaeche); --muster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.2'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3C/g%3E%3C/svg%3E"); color-scheme: light; } #app *, #app *::before, #app *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--oben) + 16px); } #app { margin: 0; background: var(--hg); color: var(--text); font: 400 16px/1.6 var(--schrift); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; } #app [hidden] { display: none !important; } #app img { max-width: 100%; } #app img.medaille { border-radius: 50%; } #app h1, #app h2, #app h3, #app h4 { margin: 0 0 0.5em; color: var(--titel); font-family: var(--schrift-titel); line-height: 1.2; letter-spacing: -0.012em; } #app p { margin: 0 0 1em; } #app a { color: var(--petrol); text-underline-offset: 3px; text-decoration-thickness: 1px; } #app a:hover { text-decoration-thickness: 2px; } #app button { font: inherit; color: inherit; } #app :focus-visible { outline: 3px solid var(--blaugrau); outline-offset: 2px; } #app .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } #app ::selection { background: var(--gelb); color: var(--auf-gelb); } #app { min-height: calc(100vh - var(--oben)); } #app .pfeil-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ---------- Knöpfe ---------- */ #app .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-knopf); font-weight: 650; font-size: 16px; line-height: 1.2; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--kurz) ease, color var(--kurz) ease, box-shadow var(--kurz) ease, transform 120ms var(--normal); } #app .knopf:active { transform: scale(0.97); } #app .knopf--haupt { background: var(--petrol); color: #fff; } #app .knopf--haupt:hover { background: var(--petrol-dunkel); } #app .knopf--gelb { background: var(--gelb); color: var(--auf-gelb); } #app .knopf--gelb:hover { background: var(--gelb-dunkel); } #app .knopf--leise { background: transparent; color: var(--petrol); box-shadow: inset 0 0 0 1.5px var(--rand); } #app .knopf--leise:hover { background: var(--petrol-hell); box-shadow: inset 0 0 0 1.5px var(--blaugrau); } #app .knopf--gross { min-height: 56px; padding: 0 28px; font-size: 17px; } #app .knopf--breit { width: 100%; } #app .knopf .pfeil-svg { transition: transform var(--mittel) var(--normal); } #app .knopf:hover .pfeil-svg { transform: translateX(3px); } #app .knopf svg:not(.pfeil-svg) { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } #app .knopf--hinzu { min-height: 44px; padding: 0 16px 0 10px; background: #fff; color: var(--petrol); box-shadow: inset 0 0 0 1.5px var(--rand); font-weight: 600; font-size: 15px; } #app .knopf--hinzu:hover { background: var(--petrol-zart); box-shadow: inset 0 0 0 1.5px var(--petrol); } #app .knopf--hinzu .plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--petrol-hell); font-size: 18px; line-height: 1; transition: transform var(--mittel) var(--feder); } #app .knopf--hinzu:hover .plus { transform: rotate(90deg); } #app .linkknopf { padding: 0; border: 0; background: none; color: var(--petrol); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; } #app .linkknopf:hover { text-decoration-thickness: 2px; } /* ---------- Raster und Abstände ---------- */ #app .raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; } #app .item { grid-column: 1 / -1; min-width: 0; padding-bottom: 22px; } #app .item--halb { grid-column: span 3; } /* Strasse und Nr., PLZ und Ort: auch am Handy nebeneinander */ #app .item--gross { grid-column: span 4; } #app .item--klein { grid-column: span 2; } #app .item.klappe { padding-bottom: 0; } #app .item.klappe > .klappe__innen > * { margin-bottom: 22px; } @media (max-width: 560px) { #app .item--halb { grid-column: 1 / -1; } } /* ---------- Klappe: weich auf und zu ---------- */ #app .klappe { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--lang) var(--normal); } #app .klappe.offen { grid-template-rows: 1fr; } #app .klappe__innen { min-height: 0; overflow: hidden; padding: 4px; margin: -4px; opacity: 0; transition: opacity var(--mittel) ease, visibility 0s linear var(--lang); visibility: hidden; } #app .klappe.offen > .klappe__innen { opacity: 1; visibility: visible; transition: opacity var(--lang) ease 60ms, visibility 0s; } #app .baut *, #app .baut *::before, #app .baut *::after { transition: none !important; } /* ---------- Felder ---------- */ #app .feld { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; } #app .feld__label, #app .feld legend.feld__label { display: block; margin: 0 0 6px; padding: 0; color: var(--titel); font-weight: 600; font-size: 15.5px; line-height: 1.35; } #app .stern { color: var(--fehler); font-weight: 600; } #app .frei { color: var(--text); font-weight: 400; } #app .hilfe { margin: -2px 0 8px; color: var(--text); font-size: 14.5px; line-height: 1.45; } #app .fehler-text { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; color: var(--fehler); font-weight: 600; font-size: 14.5px; line-height: 1.4; } #app .fehler-text::before { content: '!'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--fehler); color: #fff; font-size: 12px; font-weight: 800; } #app .feld.hat-fehler::before { content: ''; position: absolute; left: -14px; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--fehler); } #app .eingabe { display: block; width: 100%; height: var(--feld-h); padding: 0 14px; border: 1.5px solid var(--rand-feld); border-radius: var(--r); background: #fff; color: var(--titel); font: inherit; font-size: 16px; transition: border-color var(--kurz) ease, box-shadow var(--kurz) ease; appearance: none; } #app .eingabe:hover { border-color: var(--blaugrau); } #app .eingabe:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px var(--gelb), 0 0 0 4.5px var(--petrol); } #app .eingabe[aria-invalid="true"] { border-color: var(--fehler); } #app .eingabe--lang { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: vertical; } #app .liste { position: relative; } #app .liste::after { content: ''; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--petrol); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; } #app .eingabe--liste { padding-right: 44px; cursor: pointer; text-overflow: ellipsis; } #app .tel { display: flex; gap: 8px; } #app .tel__vorwahl { position: relative; flex: none; display: flex; align-items: center; min-height: 48px; padding: 0 30px 0 12px; border: 1.5px solid var(--rand-feld); border-radius: var(--r); background: #fff; color: var(--titel); font-variant-numeric: tabular-nums; white-space: nowrap; } #app .tel__vorwahl::after { content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border: solid var(--petrol); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); } #app .tel__vorwahl:has(select:focus-visible) { outline: 3px solid var(--blaugrau); outline-offset: 2px; } #app .hat-fehler .tel__vorwahl { border-color: var(--fehler); } #app .tel__land { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; cursor: pointer; } #app .tel__nummer { flex: 1 1 auto; min-width: 0; } #app .vorschlag { margin: 6px 0 0; font-size: 15px; color: var(--text-dunkel); } /* Geburtsdatum: Tag, Monat, Jahr nebeneinander */ #app .datum__wahl { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr) minmax(0, 1fr); gap: 8px; } #app .datum__teil .eingabe--liste { padding-right: 32px; font-variant-numeric: tabular-nums; } #app .datum__teil.liste::after { right: 13px; } #app .datum__hinweis { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--gelb-dunkel); border-radius: 6px; background: var(--gelb-hell); color: var(--titel); font-size: 14.5px; line-height: 1.45; } #app .datum__echo { margin: 6px 0 0; color: var(--petrol); font-size: 14.5px; font-weight: 600; } #app .datum__echo:empty { display: none; } #app .datum__echo.ist-beispiel { color: var(--text); font-weight: 400; } #app .hilfe--unten { margin: 6px 0 0; } #app .zusatzknopf { display: block; font-size: 15.5px; } #app .zusatzknopf__hilfe { display: block; margin: 2px 0 0; font-size: 14px; } /* Auswahl als Kacheln: Kreis immer links, Text daneben (auch wenn er umbricht), alle Kacheln einer Frage gleich gross */ #app .feld--auswahl { container-type: inline-size; } #app .wahlen { display: grid; grid-auto-rows: 1fr; gap: 8px; } #app .wahlen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } @container (min-width: 500px) { #app .wahlen--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #app .wahl { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 48px; padding: 9px 14px; border: 1.5px solid var(--rand-feld); border-radius: var(--r); background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--kurz) ease, background-color var(--kurz) ease, box-shadow var(--kurz) ease, transform 120ms var(--normal); } #app .wahl:hover { border-color: var(--blaugrau); } #app .wahl:active { transform: scale(0.99); } #app .wahl:has(:checked) { border-color: var(--petrol); background: var(--petrol-zart); box-shadow: inset 0 0 0 1px var(--petrol); } #app .wahl:has(:focus-visible) { outline: 3px solid var(--blaugrau); outline-offset: 2px; } #app .wahl__input, #app .haken__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } #app .wahl__marke { position: relative; flex: none; width: 22px; height: 22px; border: 2px solid var(--rand-feld); border-radius: 50%; background: #fff; transition: border-color var(--kurz) ease; } #app .wahl__marke::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--petrol); transform: scale(0); transition: transform 240ms var(--feder); } #app .wahl:has(:checked) .wahl__marke { border-color: var(--petrol); } #app .wahl:has(:checked) .wahl__marke::after { transform: scale(1); } #app .wahl__text { min-width: 0; color: var(--titel); font-weight: 500; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; } #app .wahl__label { display: block; } #app .wahl__mehr { display: block; margin-top: 2px; line-height: 1.35; } #app .wahl__mehr small { color: var(--text); font-weight: 400; font-size: 14px; } #app .wahl__preis + small::before { content: ' · '; } #app .wahl__preis { color: var(--petrol); font-weight: 650; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } #app .feld[aria-invalid="true"] .wahl, #app .hat-fehler .wahl { border-color: var(--fehler); } /* Häkchen */ #app .haken { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; color: var(--text-dunkel); line-height: 1.5; cursor: pointer; } #app .haken__kasten { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 0; border: 2px solid var(--rand-feld); border-radius: 6px; background: #fff; transition: background-color var(--kurz) ease, border-color var(--kurz) ease, transform 120ms var(--normal); } #app .haken__kasten svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } #app .haken__kasten path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 260ms var(--ein) 40ms; } #app .haken__input:checked + .haken__kasten { background: var(--petrol); border-color: var(--petrol); } #app .haken__input:checked + .haken__kasten path { stroke-dashoffset: 0; } #app .haken:active .haken__kasten { transform: scale(0.92); } #app .haken__input:focus-visible + .haken__kasten { outline: 3px solid var(--blaugrau); outline-offset: 2px; } #app .haken__input[aria-invalid="true"] + .haken__kasten { border-color: var(--fehler); } #app .haken--alle { padding: 14px 16px; border-radius: var(--r); background: var(--petrol-hell); color: var(--titel); font-weight: 650; } #app .gruppe { padding-top: 6px; } #app .gruppe h3 { margin: 0 0 4px; font-size: 19px; } #app .gruppe p { margin: 0; font-size: 15px; } #app .hinweis { margin: 0; padding: 12px 16px; border-left: 4px solid var(--blaugrau); border-radius: 0 var(--r) var(--r) 0; background: var(--petrol-hell); color: var(--text-dunkel); font-size: 15px; } #app .hinweis.hinweis--warnung { border-left-color: #c9a400; background: var(--gelb-hell); color: #3d3500; } /* ---------- Fehlerübersicht (oben auf der Seite) ---------- */ #app .fehlerbox { margin: 0 0 24px; padding: 16px 20px 14px; border: 3px solid var(--fehler); border-radius: var(--r); background: #fff; } #app .fehlerbox:focus { outline: 3px solid var(--blaugrau); outline-offset: 3px; } #app .fehlerbox__titel { margin: 0 0 8px; font-size: 18px; } #app .fehlerbox ul { margin: 0; padding: 0 0 0 18px; } #app .fehlerbox li { margin: 4px 0; } #app .fehlerbox a { color: var(--fehler); font-weight: 600; } /* ---------- Pakete: Leistungslisten ---------- */ #app .leistungen__titel { margin: 14px 0 6px; color: var(--titel); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } #app .leistungen__titel:first-child { margin-top: 0; } #app .leistungen ul { margin: 0; padding: 0; list-style: none; } #app .leistungen li { position: relative; padding: 3px 0 3px 26px; color: var(--text-dunkel); font-size: 15px; line-height: 1.45; } #app .leistungen li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 12px; height: 7px; border: solid var(--petrol); border-width: 0 0 2px 2px; transform: rotate(-45deg); } #app .leistungen__neu li { color: var(--titel); } #app .leistungen mark { padding: 0 2px; background: linear-gradient(transparent 58%, rgba(254, 219, 0, 0.55) 58%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; } #app .leistungen__fehlt li { color: #66747a; } #app .leistungen__fehlt li::before { width: 10px; height: 0; top: 13px; border-width: 0 0 2px 0; border-color: #a9b5b8; transform: none; } #app .leistungen .ab { color: #66747a; font-size: 13px; } /* Vergleichstabelle (aufklappbar) */ #app .vergleich__knopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--rand); border-radius: var(--r); background: #fff; color: var(--petrol); font-weight: 650; cursor: pointer; transition: background-color var(--kurz) ease, border-color var(--kurz) ease; } #app .vergleich__knopf:hover { background: var(--petrol-zart); border-color: var(--blaugrau); } #app .pfeil { width: 10px; height: 10px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--mittel) var(--normal); } #app [aria-expanded="true"] > .pfeil { transform: translateY(4px) rotate(-135deg); } #app .vergleich__inhalt { padding: 18px 4px 4px; } #app .vergleich__inhalt h3 { font-size: 16px; } #app .basis { margin: 0 0 18px; padding: 0 0 0 20px; columns: 2 240px; column-gap: 24px; font-size: 15px; } #app .tabelle-wrap { overflow-x: auto; } #app .tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; } #app .tabelle th, #app .tabelle td { padding: 10px 8px; border-bottom: 1px solid var(--linie); text-align: center; vertical-align: middle; } #app .tabelle th[scope="row"] { text-align: left; color: var(--text-dunkel); font-weight: 500; } #app .tabelle thead th { color: var(--titel); font-weight: 700; } #app .tabelle .ja { color: var(--petrol); font-weight: 700; } #app .tabelle .nein { color: #66747a; } #app .tabelle .gewaehlt { background: var(--gelb-hell); } @media (max-width: 560px) { #app .tabelle { table-layout: fixed; font-size: 13.5px; } #app .tabelle th[scope="row"] { width: 38%; } #app .tabelle th, #app .tabelle td { padding: 8px 4px; } } /* ---------- Personen ---------- */ #app .personen { display: grid; gap: 14px; } #app .person { min-width: 0; margin: 0; padding: 16px 18px 0; border: 1.5px solid var(--linie); border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten-1); } #app .person__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; } #app .person__titel { color: var(--titel); font-weight: 700; font-size: 17px; } #app .person__rolle { color: var(--text); font-size: 14.5px; font-weight: 500; } #app .uebersicht__rolle { color: var(--text); font-weight: 400; font-size: 14.5px; } #app .person__weg { margin-left: auto; font-size: 15px; } #app .marke { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--petrol-hell); color: var(--petrol); font-size: 13px; font-weight: 600; } #app .marke--kostet { background: var(--gelb-hell); color: var(--auf-gelb); } #app .marke--fehler { background: var(--fehler-hell); color: var(--fehler); } #app .personen__leer { margin: 0; padding: 22px 16px; border: 1.5px dashed var(--rand); border-radius: var(--r-gross); color: var(--text); text-align: center; } #app .hinzu { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } #app #personen-hinweis { margin: 14px 0 0; } /* ---------- Übersicht zum Prüfen ---------- */ #app .uebersicht__liste { margin: 0; } #app .uebersicht__zeile { display: grid; grid-template-columns: minmax(9em, 0.4fr) 1fr auto; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--linie); } #app .uebersicht__zeile:first-child { border-top: 1px solid var(--linie); } #app .uebersicht__zeile dt { color: var(--titel); font-weight: 650; } #app .uebersicht__zeile dd { margin: 0; color: var(--text-dunkel); line-height: 1.55; overflow-wrap: anywhere; } #app .uebersicht__aktion { text-align: right; } /* Alle Angaben je Abschnitt: Feld und Wert in zwei Spalten */ #app .uebersicht__werte { margin: 0; display: grid; gap: 4px; } #app .uebersicht__wert { display: grid; grid-template-columns: minmax(8em, 0.8fr) 1.2fr; gap: 12px; } #app .uebersicht__wert dt { color: var(--text); font-weight: 400; font-size: 14.5px; line-height: 1.55; } #app .uebersicht__wert dd { margin: 0; color: var(--titel); line-height: 1.55; overflow-wrap: anywhere; } #app .uebersicht__leer { color: var(--rand-feld); } #app .uebersicht__person + .uebersicht__person { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--linie); } #app .uebersicht__ptitel { margin: 0 0 4px; color: var(--titel); font-weight: 650; } @media (max-width: 560px) { #app .uebersicht__wert { grid-template-columns: 1fr; gap: 0; } #app .uebersicht__wert + .uebersicht__wert { margin-top: 6px; } } #app .uebersicht__total { margin-top: 18px; padding: 16px 18px; border-radius: var(--r); background: var(--petrol); color: #dce9ec; } #app .uebersicht__total span { color: #fff; font-weight: 600; } #app .uebersicht__total strong { float: right; color: var(--gelb); font-size: 20px; font-variant-numeric: tabular-nums; } #app .uebersicht__total p { clear: both; margin: 6px 0 0; font-size: 14.5px; } @media (max-width: 560px) { #app .uebersicht__zeile { grid-template-columns: 1fr auto; } #app .uebersicht__zeile dt { grid-column: 1; } #app .uebersicht__zeile dd:not(.uebersicht__aktion) { grid-column: 1 / -1; grid-row: 2; } #app .uebersicht__aktion { grid-column: 2; grid-row: 1; } } /* ---------- Kosten ---------- */ #app .kosten h3 { margin: 14px 0 4px; color: var(--text); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } #app .posten { margin: 0; padding: 0; list-style: none; } #app .posten li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--text-dunkel); font-size: 15px; } #app .posten li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--titel); } #app .posten .neben, #app .posten .neben span:last-child { color: var(--text); font-size: 14px; } #app .posten .summe { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--linie); font-weight: 650; } #app .kosten__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--titel); color: var(--titel); font-weight: 650; } #app .kosten__total strong { font-size: 21px; font-variant-numeric: tabular-nums; } #app .kosten__satz { margin: 8px 0 0; font-size: 14px; line-height: 1.5; } #app .kosten__leer { margin: 0; font-size: 15px; } #app [data-gesamt] { font-variant-numeric: tabular-nums; } /* ---------- Unterschrift ---------- */ #app .pad { display: block; width: 100%; height: 170px; border: 1.5px dashed var(--rand-feld); border-radius: var(--r); cursor: crosshair; touch-action: none; background: #fff; transition: border-color var(--kurz) ease; } #app .pad.hat-strich { border-style: solid; border-color: var(--petrol); } #app .pad[aria-invalid="true"] { border-color: var(--fehler); } #app #unterschrift-loeschen { margin-top: 10px; font-size: 15px; } /* ---------- Blatt (Dialog) ---------- */ #app .blatt { padding: 0; border: 0; background: #fff; color: var(--text); box-shadow: var(--schatten-3); overflow: hidden; max-width: none; max-height: none; } #app .blatt[open] { display: flex; flex-direction: column; } #app .blatt::backdrop { background: rgba(14, 34, 41, 0.48); animation: schleier 320ms ease both; } @keyframes schleier { from { opacity: 0; } } #app .blatt--rechts { inset: 0 0 0 auto; width: min(580px, 100vw); height: 100dvh; margin: 0; } #app .blatt--unten { inset: auto 0 0 0; width: min(720px, 100vw); max-height: 88dvh; margin: 0 auto; border-radius: 22px 22px 0 0; } #app .blatt--mitte { width: min(680px, calc(100vw - 32px)); max-height: 86dvh; margin: auto; border-radius: 18px; } #app .blatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 24px; border-bottom: 1px solid var(--linie); } #app .blatt--unten .blatt__kopf { padding-top: 22px; position: relative; } #app .blatt--unten .blatt__kopf::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #cfd9dc; } #app .blatt__kopf h2 { margin: 0; font-size: 20px; } #app .blatt__zu { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--petrol-hell); color: var(--petrol); font-size: 17px; cursor: pointer; transition: background-color var(--kurz) ease, transform var(--mittel) var(--normal); } #app .blatt__zu:hover { background: #d8e6ea; transform: rotate(90deg); } #app .blatt__inhalt { overflow: auto; padding: 20px 24px calc(28px + env(safe-area-inset-bottom)); overscroll-behavior: contain; } /* ---------- Einleitung (wörtlich) ---------- */ #app .einleitung { color: var(--text-dunkel); font-size: 15.5px; } #app .einleitung h3 { margin: 26px 0 8px; font-size: 18px; } #app .einleitung h4 { margin: 18px 0 6px; font-size: 16px; } #app .einleitung ul, #app .einleitung ol { margin: 0 0 14px; padding-left: 22px; } #app .einleitung li { margin: 3px 0; } #app .einleitung li::marker { color: var(--blaugrau); } #app .einleitung ol.abc { list-style: lower-alpha; } #app .einleitung__lead { color: var(--titel); font-size: 17px; line-height: 1.6; } #app .einleitung .betont { padding: 12px 16px; border-radius: var(--r); background: var(--gelb-hell); color: var(--auf-gelb); } /* ---------- Ergebnis ---------- */ #app .ergebnis { max-width: 640px; margin: 32px auto; padding: 48px 28px 36px; border-radius: 22px; background: #fff; box-shadow: var(--schatten-2); text-align: center; } #app .ergebnis:focus { outline: none; } #app .ergebnis__zeichen { width: 88px; height: 88px; margin-bottom: 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; } #app .ergebnis__zeichen circle { fill: var(--petrol); stroke: var(--gelb); stroke-width: 3; stroke-dasharray: 183; stroke-dashoffset: 0; transform-origin: center; } #app .ergebnis__zeichen path { stroke: #fff; stroke-width: 5; stroke-dasharray: 46; stroke-dashoffset: 0; } #app .ergebnis.zeichnet .ergebnis__zeichen circle { animation: kreis 700ms var(--normal) both, plopp 560ms var(--feder) both; } #app .ergebnis.zeichnet .ergebnis__zeichen path { animation: strich 460ms var(--ein) 420ms both; } @keyframes kreis { from { stroke-dashoffset: 183; } } @keyframes plopp { from { transform: scale(0.6); } } @keyframes strich { from { stroke-dashoffset: 46; } } #app .ergebnis h2 { font-size: 30px; } #app .ergebnis p { max-width: 460px; margin-left: auto; margin-right: auto; } #app .ergebnis.ohne-zeichen .ergebnis__zeichen { display: none; } #app .ergebnis__nr { white-space: nowrap; } #app .ergebnis__test { padding: 12px 14px; border-left: 4px solid var(--gelb-dunkel); border-radius: 6px; background: var(--gelb-hell); color: var(--titel); text-align: left; font-size: 15px; line-height: 1.5; } #app .ergebnis details { margin: 22px 0 8px; text-align: left; } #app .ergebnis summary, #app .inspektor summary { color: var(--petrol); font-weight: 600; cursor: pointer; } #app .ergebnis pre, #app .inspektor pre { max-height: 340px; margin: 10px 0 0; padding: 14px 16px; overflow: auto; border-radius: var(--r); background: #10262d; color: #d6e6ea; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ---------- Nur Mockup ---------- */ #app .inspektor { max-width: 760px; margin: 48px auto 32px; padding: 16px 20px; border: 1px dashed var(--rand); border-radius: var(--r); background: rgba(255, 255, 255, 0.7); font-size: 14.5px; } #app .inspektor h3 { margin-top: 16px; font-size: 15px; } #app .inspektor p { margin: 8px 0 0; } /* ---------- Seitenwechsel: Grundeinstellung der View Transitions ---------- */ ::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: var(--normal); } ::view-transition-old(root) { animation: 160ms ease both vt-weg; } ::view-transition-new(root) { animation: 260ms ease 40ms both vt-da; } html[data-vt="variante"]::view-transition-old(root) { animation: 220ms var(--aus) both vt-weg-zurueck; } html[data-vt="variante"]::view-transition-new(root) { animation: 460ms var(--ein) 80ms both vt-da-vor; } html[data-vt="erfolg"]::view-transition-old(root) { animation: 220ms var(--aus) both vt-weg-zurueck; } html[data-vt="erfolg"]::view-transition-new(root) { animation: 520ms var(--ein) 60ms both vt-da-hoch; } @keyframes vt-weg { to { opacity: 0; } } @keyframes vt-da { from { opacity: 0; } } @keyframes vt-weg-zurueck { to { opacity: 0; transform: scale(0.985); } } @keyframes vt-da-vor { from { opacity: 0; transform: scale(1.015); } } @keyframes vt-da-hoch { from { opacity: 0; transform: translateY(24px); } } /* Wer weniger Bewegung möchte, sieht die Änderungen sofort. */ @media (prefers-reduced-motion: reduce) { #app *, #app *::before, #app *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Farbtöne der Pakete (Karten, Tafeln, Kacheln) */ #app [data-stufe="rahmah"] { --tint-1: #fcf3ea; --tint-2: #efd8c3; --tint-tief: #9a6237; } #app [data-stufe="barakah"] { --tint-1: #f7f9fa; --tint-2: #dfe6ea; --tint-tief: #5d6d74; } #app [data-stufe="noor"] { --tint-1: #fffbea; --tint-2: #f6e3a1; --tint-tief: #8a6a09; } #app [data-stufe="noor-ala-noor"] { --tint-1: #eef5fc; --tint-2: #cfe0f2; --tint-tief: #2f5378; } /* Diamant eisblau */ /* ---------- Adresse: Suchfeld mit Auswahlliste ---------- */ #app .adresse { position: relative; } #app .adresse__eingabe { padding-right: 44px; } #app .adresse__haken { position: absolute; right: 12px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--petrol); opacity: 0; transform: scale(.6); transition: opacity var(--kurz) ease, transform 240ms var(--feder); pointer-events: none; } #app .adresse__haken svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; } #app .adresse__haken.an { opacity: 1; transform: none; } #app .adresse__liste { position: absolute; left: 0; right: 0; top: calc(var(--feld-h) + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none; max-height: 290px; overflow: auto; background: #fff; border: 1.5px solid var(--petrol); border-radius: var(--r); box-shadow: 0 12px 28px rgba(22,58,69,.18); } #app .adresse__option { padding: 10px 12px; border-radius: 8px; cursor: pointer; line-height: 1.35; } #app .adresse__option:hover, #app .adresse__option[aria-selected="true"] { background: var(--petrol-zart); } #app .adresse__strasse { color: var(--titel); font-weight: 600; } #app .adresse__ort { color: var(--text); } #app .adresse__marke { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--gelb-hell); color: #5a4b00; font-size: 12.5px; } #app .adresse__status { margin: 6px 0 0; color: var(--text); font-size: 14px; } #app .adresse__status:empty { display: none; } #app .adresse__quelle { display: block; margin-top: 2px; color: var(--text-dunkel); font-size: 12.5px; } #app .eingabe[readonly] { background: var(--flaeche); color: var(--text-dunkel); } /* Live-Test: Hinweis beim Senden der Anmeldung */ #app .sende-status { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1500; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 18px; border-radius: 12px; background: #194a57; color: #fff; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } #app .sende-status.ist-fehler { background: #9b2c1f; } #app button[aria-disabled="true"] { opacity: 0.6; cursor: progress; } /* Adresszusatz: hinzufügen und entfernen nebeneinander */ #app .zusatzknopf__reihe { display: inline-flex; flex-wrap: wrap; gap: 4px 20px; } /* Felder nebeneinander (halb, gross, klein): Beschriftung, Hilfe, Fehler, Eingabe und die Zeilen darunter stehen über beide Spalten auf gleicher Höhe, auch wenn nur ein Feld eine Hilfe oder einen Fehler hat (CSS subgrid). */ @supports (grid-template-rows: subgrid) { #app .raster > :is(.item--halb, .item--gross, .item--klein):has(> .feld) { display: grid; grid-row: span 6; grid-template-rows: subgrid; } #app .raster > :is(.item--halb, .item--gross, .item--klein) > .feld { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; align-content: start; } #app .raster > :is(.item--halb, .item--gross, .item--klein) > .feld > * { grid-row: 4; } #app .raster > :is(.item--halb, .item--gross, .item--klein) > .feld > :is(.feld__label, legend, label.sr, .sr:first-child) { grid-row: 1; } #app .raster > :is(.item--halb, .item--gross, .item--klein) > .feld > legend { float: left; width: 100%; } #app .raster > :is(.item--halb, .item--gross, .item--klein) > .feld > .hilfe:not(.hilfe--unten) { grid-row: 2; } #app .raster > :is(.item--halb, .item--gross, .item--klein) > .feld > .fehler-text { grid-row: 3; } #app .raster > :is(.item--halb, .item--gross, .item--klein) > .feld > :is(.datum__echo, .vorschlag) { grid-row: 5; } #app .raster > :is(.item--halb, .item--gross, .item--klein) > .feld > :is(.hilfe--unten, .datum__hinweis) { grid-row: 6; } } /* Prüfseite: Familie nachträglich anmelden */ #app .uebersicht__familie { margin-top: 18px; padding: 16px 18px; border: 1.5px dashed var(--rand); border-radius: var(--r); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } #app .uebersicht__familie p { margin: 0; flex: 1 1 280px; color: var(--text-dunkel); } /* Kostenliste am Ende der letzten Seite */ #app .endkosten { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--linie); } #app .endkosten__titel { margin: 0 0 12px; font: 600 20px/1.25 var(--serif); color: var(--titel); } :root { --logo-muster: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-233.8195%20-185.46550000000002%20985.169%20780.881%22%20role%3D%22img%22%20aria-label%3D%22Moscheeverein%20D%C3%BCbendorf%22%3E%0A%20%20%3Cpath%20id%3D%22swoosh%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%20d%3D%22M57.3%20409.95C44.611%20406.137%2018.468%20387.991%2010.115%20377.662C5.518%20371.976%202.208%20365.242%200.741%20358.065C-3.665%20336.521%2013.404%20318.737%2029.76%20307.533C99.74%20259.595%20242.783%20250.808%20326.162%20256.344C374.197%20259.532%20434.748%20269.039%20479.52%20286.557C488.659%20290.133%20511.759%20299.628%20517.5%20306.7C507.682%20304.956%20483.52%20294.88%20470.041%20291.284C394.22%20271.062%20295.246%20267.152%20217.4%20276.56C200.908%20278.552%20184.552%20281.638%20168.283%20284.959C135.514%20291.646%20103.366%20300.589%2073.753%20316.501C55.089%20326.53%2031.99%20341.353%2030.397%20364.936C28.559%20392.131%2054.312%20402.522%2057.3%20409.95Z%22%2F%3E%0A%20%20%3Cpath%20id%3D%22moschee%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%20d%3D%22M243.248%20107.517C246.091%20110.558%20248.885%20113.702%20251.951%20116.519C256.592%20120.783%20261.691%20124.606%20266.619%20128.53C277.056%20136.844%20287.569%20145.066%20298.297%20153.003C307.351%20159.702%20316.408%20166.396%20325.228%20173.405C345.134%20189.223%20367.611%20209.963%20368.185%20237.376C368.246%20240.273%20367.893%20243.143%20367.51%20246C367.215%20248.203%20366.638%20250.607%20365.96%20253.111C365.881%20253.399%20365.603%20253.586%20365.307%20253.549C360.691%20252.978%20356.07%20252.453%20351.444%20251.974C351.277%20251.957%20351.124%20251.871%20351.024%20251.736C350.924%20251.601%20350.885%20251.431%20350.916%20251.266C351.198%20249.785%20351.495%20248.359%20351.785%20246.965C353.035%20240.968%20354.163%20235.553%20353.414%20228.817C350.169%20199.611%20320.912%20178.269%20299.292%20161.808C297.851%20160.711%20286.881%20152.096%20286.365%20151.948C286.207%20151.903%20286.033%20151.908%20285.862%20151.912C285.624%20151.918%20285.39%20151.925%20285.2%20151.8C285.226%20151.824%20285.176%20151.821%20285.116%20151.818C285.043%20151.813%20284.955%20151.808%20284.969%20151.849C285.082%20152.162%20288.15%20154.598%20288.636%20155.015C293.168%20158.906%20297.49%20163.008%20301.855%20167.083C307.442%20172.297%20313.026%20177.531%20318.168%20183.192C328.196%20194.235%20340.033%20210.78%20341.599%20225.918C342.278%20232.473%20341.007%20238.844%20339.734%20245.227C339.523%20246.285%20339.312%20247.343%20339.109%20248.402L338.759%20250.239C338.701%20250.54%20338.425%20250.75%20338.119%20250.724C332.788%20250.274%20327.452%20249.885%20322.112%20249.577C298.219%20248.2%20274.257%20248.059%20250.341%20248.898C213.99%20250.174%20176.458%20253.756%20140.714%20260.517C134.878%20261.621%20129.06%20262.82%20123.267%20264.122C122.946%20264.194%20122.628%20263.995%20122.552%20263.676C122.003%20261.388%20121.343%20259.073%20120.695%20256.799C119.605%20252.975%20118.547%20249.267%20118.11%20246C117.727%20243.143%20117.374%20240.273%20117.435%20237.376C118.009%20209.963%20140.486%20189.223%20160.392%20173.405C169.212%20166.396%20178.269%20159.702%20187.323%20153.003C198.051%20145.066%20208.564%20136.844%20219.001%20128.53C223.929%20124.606%20229.028%20120.783%20233.669%20116.519C236.735%20113.702%20239.529%20110.558%20242.372%20107.517C242.485%20107.396%20242.644%20107.327%20242.81%20107.327C242.976%20107.327%20243.135%20107.396%20243.248%20107.517ZM79.28%20123.32L104.88%20123.32C106.979%20123.32%20107.553%20123.369%20108.42%20124.703C108.551%20124.905%20108.549%20125.166%20108.415%20125.365C108.036%20125.927%20107.321%20126.912%20106.95%20126.77L104.795%20125.943C104.611%20125.872%20104.403%20125.897%20104.24%20126.008C104.077%20126.12%20103.98%20126.305%20103.98%20126.503L103.98%20232.44C103.98%20232.771%20103.711%20233.04%20103.38%20233.04L86.43%20233.04C86.099%20233.04%2085.83%20232.771%2085.83%20232.44L85.83%20212.69C85.83%20209.073%2082.897%20206.14%2079.28%20206.14C75.663%20206.14%2072.73%20209.073%2072.73%20212.69L72.73%20232.44C72.73%20232.771%2072.461%20233.04%2072.13%20233.04L55.18%20233.04C54.849%20233.04%2054.58%20232.771%2054.58%20232.44L54.58%20126.503C54.58%20126.305%2054.483%20126.12%2054.32%20126.008C54.157%20125.897%2053.949%20125.872%2053.765%20125.943L51.61%20126.77C51.239%20126.912%2050.524%20125.927%2050.145%20125.365C50.011%20125.166%2050.009%20124.905%2050.14%20124.703C51.007%20123.369%2051.581%20123.32%2053.68%20123.32L79.28%20123.32ZM96.922%2017.362C96.922%2026.108%2090.563%2033.368%2082.216%2034.772C81.982%2034.811%2081.793%2034.985%2081.734%2035.215C81.676%2035.445%2081.758%2035.688%2081.944%2035.835C82.659%2036.398%2083.341%2036.998%2083.923%2037.681C85.768%2039.846%2085.041%2041.667%2084.396%2043.284C83.984%2044.315%2083.606%2045.263%2083.948%2046.164C84.138%2046.664%2084.664%2047.219%2085.298%2047.887C86.813%2049.485%2088.944%2051.733%2088.587%2055.441C88.391%2057.472%2087.358%2058.989%2086.504%2060.242C85.734%2061.373%2085.11%2062.29%2085.38%2063.176C86.194%2065.851%2096.297%2071.321%2097.986%2081.089C98.317%2083.007%2098.305%2084.99%2097.72%2086.86C96.671%2090.213%2094.178%2091.02%2090.88%2091.02L67.68%2091.02C64.382%2091.02%2061.889%2090.213%2060.84%2086.86C60.255%2084.99%2060.243%2083.007%2060.574%2081.089C62.263%2071.321%2072.366%2065.851%2073.18%2063.176C73.45%2062.29%2072.826%2061.373%2072.056%2060.242C71.202%2058.989%2070.169%2057.472%2069.973%2055.441C69.616%2051.733%2071.747%2049.485%2073.262%2047.887C73.896%2047.219%2074.422%2046.664%2074.612%2046.164C74.954%2045.263%2074.576%2044.315%2074.164%2043.284C73.519%2041.667%2072.792%2039.846%2074.637%2037.681C75.217%2036.999%2075.898%2036.401%2076.611%2035.838C76.798%2035.691%2076.88%2035.448%2076.821%2035.218C76.762%2034.988%2076.573%2034.814%2076.339%2034.775C70.582%2033.814%2065.768%2030.068%2063.33%2024.968C66.302%2028.735%2070.909%2031.153%2076.08%2031.153C85.045%2031.153%2092.312%2023.886%2092.312%2014.921C92.312%208.228%2088.26%202.48%2082.476%20-0.002C90.694%201.507%2096.922%208.707%2096.922%2017.362ZM55.18%20255.9L103.38%20255.9C103.711%20255.9%20103.98%20256.169%20103.98%20256.5L103.98%20268.881C103.98%20269.152%20103.798%20269.389%20103.537%20269.46C87.127%20273.91%2070.732%20279.422%2055.428%20286.383C55.243%20286.467%2055.027%20286.452%2054.855%20286.341C54.684%20286.231%2054.58%20286.041%2054.58%20285.837L54.58%20256.5C54.58%20256.169%2054.849%20255.9%2055.18%20255.9ZM79.28%20101.175L108.18%20101.175C108.511%20101.175%20108.78%20101.444%20108.78%20101.775L108.78%20121.275C108.78%20121.606%20108.511%20121.875%20108.18%20121.875L102.98%20121.875C102.649%20121.875%20102.38%20121.606%20102.38%20121.275L102.38%20112.533C102.38%20111.689%20102.022%20110.886%20101.396%20110.322C100.635%20109.637%2099.79%20109.053%2098.88%20108.585C97.97%20109.053%2097.125%20109.637%2096.364%20110.322C95.738%20110.886%2095.38%20111.689%2095.38%20112.533L95.38%20121.275C95.38%20121.606%2095.111%20121.875%2094.78%20121.875L83.62%20121.875C83.289%20121.875%2083.02%20121.606%2083.02%20121.275L83.02%20112.525C83.02%20110.459%2081.346%20108.785%2079.28%20108.785C77.214%20108.785%2075.54%20110.459%2075.54%20112.525L75.54%20121.275C75.54%20121.606%2075.271%20121.875%2074.94%20121.875L63.78%20121.875C63.449%20121.875%2063.18%20121.606%2063.18%20121.275L63.18%20112.533C63.18%20111.689%2062.822%20110.886%2062.196%20110.322C61.435%20109.637%2060.59%20109.053%2059.68%20108.585C58.77%20109.053%2057.925%20109.637%2057.164%20110.322C56.538%20110.886%2056.18%20111.689%2056.18%20112.533L56.18%20121.275C56.18%20121.606%2055.911%20121.875%2055.58%20121.875L50.38%20121.875C50.049%20121.875%2049.78%20121.606%2049.78%20121.275L49.78%20101.775C49.78%20101.444%2050.049%20101.175%2050.38%20101.175L79.28%20101.175ZM79.28%20234.485L108.18%20234.485C108.511%20234.485%20108.78%20234.754%20108.78%20235.085L108.78%20253.855C108.78%20254.186%20108.511%20254.455%20108.18%20254.455L102.62%20254.455C102.289%20254.455%20102.02%20254.186%20102.02%20253.855L102.02%20245.808C102.02%20245.011%20101.682%20244.251%20101.089%20243.717C100.37%20243.07%2099.57%20242.518%2098.71%20242.075C97.85%20242.518%2097.05%20243.07%2096.331%20243.717C95.738%20244.251%2095.4%20245.011%2095.4%20245.808L95.4%20253.855C95.4%20254.186%2095.131%20254.455%2094.8%20254.455L83.56%20254.455C83.229%20254.455%2082.96%20254.186%2082.96%20253.855L82.96%20245.535C82.96%20243.503%2081.312%20241.855%2079.28%20241.855C77.248%20241.855%2075.6%20243.503%2075.6%20245.535L75.6%20253.855C75.6%20254.186%2075.331%20254.455%2075%20254.455L63.76%20254.455C63.429%20254.455%2063.16%20254.186%2063.16%20253.855L63.16%20245.808C63.16%20245.011%2062.822%20244.251%2062.229%20243.717C61.51%20243.07%2060.71%20242.518%2059.85%20242.075C58.99%20242.518%2058.19%20243.07%2057.471%20243.717C56.878%20244.251%2056.54%20245.011%2056.54%20245.808L56.54%20253.855C56.54%20254.186%2056.271%20254.455%2055.94%20254.455L50.38%20254.455C50.049%20254.455%2049.78%20254.186%2049.78%20253.855L49.78%20235.085C49.78%20234.754%2050.049%20234.485%2050.38%20234.485L79.28%20234.485ZM79.28%2096.83L106.12%2096.83C106.99%2096.83%20107.86%2097.79%20108.72%2098.28C107.86%2098.77%20106.99%2099.73%20106.12%2099.73L79.28%2099.73L52.44%2099.73C51.57%2099.73%2050.7%2098.77%2049.84%2098.28C50.7%2097.79%2051.57%2096.83%2052.44%2096.83L79.28%2096.83ZM78.928%206.776C80%2012.68%2081.846%2014.02%2087.792%2013.217C82.509%2016.061%2081.804%2018.231%2084.406%2023.637C80.068%2019.492%2077.787%2019.492%2073.449%2023.637C76.051%2018.231%2075.346%2016.061%2070.063%2013.217C76.009%2014.02%2077.855%2012.68%2078.928%206.776ZM79.28%2092.465L92.65%2092.465C93.55%2092.465%2094.49%2093.425%2095.37%2093.925C94.49%2094.425%2093.55%2095.385%2092.65%2095.385L79.28%2095.385L65.91%2095.385C65.01%2095.385%2064.07%2094.425%2063.19%2093.925C64.07%2093.425%2065.01%2092.465%2065.91%2092.465L79.28%2092.465Z%22%2F%3E%0A%3C%2Fsvg%3E"); } /* ============================================================ Zweigeteilt: links auf Petrol, was schon feststeht, rechts das Formular in Kapiteln ============================================================ */ html[data-variante="geteilt"] { --hg: #fff; --schrift-titel: var(--serif); --r: 10px; --r-knopf: 999px; } #app .v7 { display: grid; grid-template-columns: minmax(360px, 42%) minmax(0, 1fr); min-height: calc(100vh - var(--oben)); padding-bottom: var(--kosten-h, 72px); } #app .v7-seite { position: relative; background-color: var(--petrol); background-image: var(--logo-muster), var(--logo-muster); background-size: 190px 150px; background-position: 0 0, 95px 75px; color: #cfe0e5; } #app .v7-seite__innen { position: sticky; top: var(--oben); display: flex; flex-direction: column; height: calc(100vh - var(--oben) - var(--kosten-h, 72px)); padding: 36px clamp(24px, 4vw, 60px) 24px; overflow: hidden; } #app .v7-verein { margin: 0 0 4px; color: var(--gelb); font-size: 12.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; } #app .v7-h1 { margin: 0; color: #fff; font: 600 18px var(--schrift); letter-spacing: 0; } #app .v7-kapitel { margin-top: clamp(24px, 6vh, 64px); } #app .v7-kapitel__nr { margin: 0 0 8px; color: #9fc1ca; font-size: 14px; font-weight: 600; } #app .v7-kapitel__titel { margin: 0 0 14px; color: #fff; font: 560 clamp(36px, 4vw, 50px)/1.08 var(--serif); letter-spacing: -0.005em; } #app .v7-kapitel__warum { max-width: 30em; margin: 0; font-size: 16.5px; line-height: 1.6; } #app .v7-link { align-self: flex-start; margin-top: 18px; padding: 0; border: 0; background: none; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } #app .v7-seite :focus-visible { outline-color: var(--gelb); } #app .v7-main { min-width: 0; padding: 26px clamp(20px, 5vw, 72px) 0; } #app .v7-reiter { position: relative; max-width: 780px; margin-bottom: 36px; border-bottom: 1px solid var(--linie); } #app .v7-reiter ol { display: flex; gap: 2px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; } #app .v7-reiter__knopf { display: inline-flex; align-items: center; gap: 6px; padding: 12px 12px 14px; border: 0; background: none; color: var(--text); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--kurz) ease; } #app .v7-reiter__knopf:not(:disabled):hover, #app .v7-reiter__knopf[aria-current] { color: var(--titel); } #app .v7-reiter__knopf:disabled { color: #7a878b; cursor: default; } #app .v7-reiter__nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--petrol-hell); color: var(--petrol); font-size: 12px; font-weight: 750; transition: background-color 300ms ease, color 300ms ease; } #app .v7-reiter__knopf.ist-fertig .v7-reiter__nr { background: var(--gelb); color: var(--auf-gelb); } #app .v7-reiter__knopf[aria-current] .v7-reiter__nr { background: var(--petrol); color: #fff; } #app .v7-reiter__strich { position: absolute; left: 0; bottom: -1px; width: 100px; height: 3px; border-radius: 2px; background: var(--petrol); transform-origin: left; transition: transform 480ms var(--normal); } #app .v7-form { max-width: 780px; } #app .v7 .seite__titel { margin-bottom: 10px; font: 560 clamp(30px, 3.4vw, 40px)/1.12 var(--serif); letter-spacing: -0.005em; } #app .v7 .seite__titel:focus { outline: none; } #app .v7 .seite__kopf { margin-bottom: 26px; } #app .v7 .seite__text { margin: 0; font-size: 17px; } #app .v7-aktionen { display: flex; align-items: center; gap: 12px; padding: 20px 0 14px; } #app .v7-kontakt { margin: 0 0 40px; color: var(--text); font-size: 14px; } #app .v7-kontakt a { color: var(--petrol); font-weight: 650; } #app .v7-aktionen [data-weiter], #app .v7-aktionen [type="submit"] { margin-left: auto; } @media (max-width: 920px) { #app .v7 { grid-template-columns: minmax(0, 1fr); } #app .v7-seite__innen { position: static; height: auto; padding: 24px 20px 26px; } #app .v7-kapitel { margin-top: 18px; } #app .v7-kapitel__titel { font-size: 32px; } #app .v7-kapitel__warum { font-size: 15.5px; } #app .v7-main { padding: 0 20px; } #app .v7-reiter { margin: 0 -20px 26px; padding: 0 12px; } } /* Seitenwechsel: Kapitel gleiten von unten nach oben */ /* Beim Vor- und Zurückblättern: der sichtbare Ausschnitt blendet in 200 ms über (alt und neu genau gegenläufig, darum kein weisses Aufblitzen). Der Inhalt gleitet nicht mehr als eigene Ebene: dabei tauchte kurz der obere Teil der alten Seite auf, und alte und neue Seite lagen halbdurchsichtig übereinander. Kostenleiste und Reiter stehen fest. */ html[data-variante="geteilt"]:not([data-vt="vor"]):not([data-vt="zurueck"]) #app #buehne { view-transition-name: buehne; } html[data-variante="geteilt"] #app .v7-kosten { view-transition-name: v7-kosten; } @media (max-width: 920px) { html[data-variante="geteilt"] #app .v7-reiter { view-transition-name: v7-reiter; } } /* nur dort klebt der Reiter oben */ html[data-variante="geteilt"]::view-transition-group(v7-kosten), html[data-variante="geteilt"]::view-transition-group(v7-reiter) { animation: none; } html[data-variante="geteilt"]::view-transition-old(v7-kosten), html[data-variante="geteilt"]::view-transition-old(v7-reiter) { display: none; } html[data-variante="geteilt"]::view-transition-new(v7-kosten), html[data-variante="geteilt"]::view-transition-new(v7-reiter) { animation: none; } html[data-variante="geteilt"]:is([data-vt="vor"], [data-vt="zurueck"])::view-transition-old(root) { animation: 200ms linear both v7-ueber-aus; mix-blend-mode: plus-lighter; } html[data-variante="geteilt"]:is([data-vt="vor"], [data-vt="zurueck"])::view-transition-new(root) { animation: 200ms linear both v7-ueber-ein; mix-blend-mode: plus-lighter; } html[data-variante="geteilt"]:is([data-vt="vor"], [data-vt="zurueck"])::view-transition-image-pair(root) { isolation: isolate; } @keyframes v7-ueber-aus { from { opacity: 1; } to { opacity: 0; } } @keyframes v7-ueber-ein { from { opacity: 0; } to { opacity: 1; } } html[data-variante="geteilt"]::view-transition-group(buehne) { animation-duration: 480ms; } html[data-variante="geteilt"][data-vt="vor"]::view-transition-old(buehne) { animation: 220ms var(--aus) both v7-hoch-weg; } html[data-variante="geteilt"][data-vt="vor"]::view-transition-new(buehne) { animation: 500ms var(--ein) 60ms both v7-von-unten; } html[data-variante="geteilt"][data-vt="zurueck"]::view-transition-old(buehne) { animation: 220ms var(--aus) both v7-runter-weg; } html[data-variante="geteilt"][data-vt="zurueck"]::view-transition-new(buehne) { animation: 500ms var(--ein) 60ms both v7-von-oben; } @keyframes v7-hoch-weg { to { opacity: 0; transform: translateY(-36px); } } @keyframes v7-von-unten { from { opacity: 0; transform: translateY(48px); } } @keyframes v7-runter-weg { to { opacity: 0; transform: translateY(36px); } } @keyframes v7-von-oben { from { opacity: 0; transform: translateY(-48px); } } /* ---------- Pakete im Karussell ---------- */ #app .v7-karussell { position: relative; margin: 0 -8px; } #app .v7-spur { position: relative; display: flex; gap: 14px; padding: 12px calc(50% - 150px) 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } #app .v7-spur::-webkit-scrollbar { display: none; } #app .v7-paket { flex: 0 0 300px; scroll-snap-align: center; scroll-snap-stop: always; } #app .v7-paket__innen { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 22px 20px 18px; border: 1.5px solid var(--linie); border-radius: 24px; background: linear-gradient(165deg, #fff 30%, var(--tint-1) 70%, var(--tint-2)); text-align: center; transition: border-color var(--mittel) ease, box-shadow var(--lang) var(--normal), opacity var(--lang) ease; } #app .v7-paket.ist-gewaehlt .v7-paket__innen { border-color: var(--petrol); box-shadow: 0 0 0 1px var(--petrol), var(--schatten-2); opacity: 1; } #app .v7-paket__medaille { width: 84px; height: 84px; transition: transform 600ms var(--feder); } #app .v7-paket.ist-gewaehlt .v7-paket__medaille { transform: scale(1.08) rotate(-8deg); } #app .v7-paket__name { margin: 8px 0 0; font: 560 27px/1.15 var(--serif); } #app .v7-paket__preis { margin: 6px 0 0; color: var(--text-dunkel); font-size: 14px; } #app .v7-paket__preis strong { color: var(--titel); font-size: 19px; } #app .v7-paket__jahr { margin: 0 0 8px; color: var(--text); font-size: 13px; } #app .v7-paket__kern { align-self: stretch; margin: 6px 0 10px; color: var(--text-dunkel); font-size: 14.5px; line-height: 1.45; text-align: left; text-wrap: pretty; hyphens: auto; } #app .v7-paket__zahl { margin: 2px 0 12px; color: var(--text); font-size: 13px; } #app .v7-paket__knopf { width: 100%; margin-top: auto; } #app .v7-pfeil { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 1.5px solid var(--rand); border-radius: 50%; background: #fff; color: var(--petrol); box-shadow: var(--schatten-1); cursor: pointer; transition: opacity var(--mittel) ease, transform 120ms var(--normal), background-color var(--kurz) ease; } #app .v7-pfeil:hover { background: var(--petrol-zart); } #app .v7-pfeil:active { transform: scale(0.92); } #app .v7-pfeil:disabled { opacity: 0; pointer-events: none; } #app .v7-pfeil--links { left: 0; } #app .v7-pfeil--rechts { right: 0; } #app .v7-punkte { display: flex; justify-content: center; } #app .v7-punkt { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } #app .v7-punkt::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: #9fb0b5; transition: width 320ms var(--normal), background-color 320ms ease; } #app .v7-punkt.ist-an { min-width: 34px; } #app .v7-punkt.ist-an::before { width: 26px; background: var(--petrol); } @supports (animation-timeline: view()) { #app .v7-paket { animation: v7-paket linear both; animation-timeline: view(inline); } @keyframes v7-paket { 0% { opacity: 0.5; transform: scale(0.88); } 50% { opacity: 1; transform: none; } 100% { opacity: 0.5; transform: scale(0.88); } } } @media (prefers-reduced-motion: reduce) { #app .v7-paket { animation: none !important; } } @media (max-width: 520px) { #app .v7-pfeil { display: none; } #app .v7-paket { flex-basis: 78%; } #app .v7-spur { padding-inline: 11%; } #app .v7-karussell { margin: 0 -20px; } } /* ---------- Kostenleiste unten über die ganze Breite ---------- */ #app .v7-kosten { position: fixed; z-index: 40; left: 0; right: var(--rechts); bottom: 0; background: var(--petrol-dunkel); color: #cfe0e5; box-shadow: 0 -10px 34px rgba(14, 34, 41, 0.28); } #app .v7-kosten__innen { max-height: min(64vh, 620px); overflow: auto; overscroll-behavior: contain; background: #fff; color: var(--text); border-bottom: 1px solid var(--linie); } #app .v7-kosten__breite { max-width: 1100px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 48px) 18px; } #app .v7-kosten__leiste { background: var(--petrol-dunkel); } #app .v7-kosten__reihe { display: flex; align-items: center; gap: 14px; max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) env(safe-area-inset-bottom); } #app .v7-kosten__knopf { flex: 1 1 auto; display: flex; align-items: center; gap: 18px; min-width: 0; min-height: 40px; padding: 4px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } #app .v7-kosten__knopf:focus-visible { outline: 3px solid var(--gelb); outline-offset: -3px; } /* Wie eine Rechnung: links was, dann «CHF» in einer Spalte, rechts die Zahl. Alle Beträge gleich gross, untereinander bündig. */ #app .v7-kosten__zeilen { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-width: 0; align-items: baseline; color: #fff; font-size: 12.5px; line-height: 1.3; } #app .v7-kz { display: contents; } #app .v7-kz__name { min-width: 0; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #app .v7-kurz { display: none; } #app .v7-kz__name strong { font-weight: 700; } #app .v7-kz__punkt, #app .v7-kz__iv { color: #cfe0e5; font-weight: 400; } #app .v7-kz__chf, #app .v7-kz__betrag { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } #app .v7-kz__chf { padding: 0 6px 0 24px; } #app .v7-kz__betrag { text-align: right; } /* Gelb: was man im Jahr zahlt. Ohne Fond die eine Zeile, mit Fond das Total mit einer Linie darüber. */ #app .v7-kz.ist-gelb > .v7-kz__chf, #app .v7-kz.ist-gelb > .v7-kz__betrag, #app .v7-kz--total > * { color: var(--gelb); font-weight: 750; } #app .v7-kz--total > * { margin-top: 2px; padding-top: 1px; border-top: 1px solid rgba(255, 255, 255, 0.4); } #app .v7-kz--total > .v7-kz__chf { padding-left: 24px; } #app .v7-kosten__mehr { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: 999px; color: #fff; font-weight: 600; font-size: 13px; transition: background-color var(--kurz) ease, border-color var(--kurz) ease; } #app .v7-kosten__knopf:hover .v7-kosten__mehr { background: rgba(255, 255, 255, 0.08); border-color: #fff; } #app .v7-kosten__mehr .pfeil { margin-top: 4px; transform: rotate(-135deg); } #app .v7-kosten__knopf[aria-expanded="true"] .pfeil { margin-top: -4px; transform: rotate(45deg); } #app .v7-kosten-offen .v7-kosten { box-shadow: 0 -20px 60px rgba(14, 34, 41, 0.4); } #app .v7-schleier { position: fixed; z-index: 39; inset: 0; background: rgba(14, 34, 41, 0.42); opacity: 0; visibility: hidden; transition: opacity var(--lang) ease, visibility 0s linear var(--lang); } #app .v7-kosten-offen .v7-schleier { opacity: 1; visibility: visible; transition: opacity var(--lang) ease, visibility 0s; } @media (max-width: 640px) { #app .v7-kosten__knopf { gap: 10px; } #app .v7-kosten__zeilen { font-size: 11.5px; } #app .v7-kz__chf, #app .v7-kz--total > .v7-kz__chf { padding-left: 10px; } #app .v7-kosten__vor, #app .v7-kosten__mehr-text, #app .v7-lang { display: none; } #app .v7-kurz { display: inline; } #app .v7-kosten__mehr { padding: 6px 8px; } } /* Liste aller Beträge */ #app .v7-liste { width: 100%; border-collapse: collapse; font-size: 15px; } #app .v7-liste th, #app .v7-liste td { padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; } #app .v7-liste thead th:first-child { text-align: left; } #app .v7-liste thead th { position: sticky; top: 0; z-index: 1; background: #fff; color: var(--text); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } #app .v7-liste th[scope="row"] { color: var(--titel); font-weight: 600; text-align: left; } #app .v7-liste th small { display: block; margin-top: 2px; color: var(--text); font-weight: 400; font-size: 13.5px; line-height: 1.4; } #app .v7-liste .v7-sp-m, #app .v7-liste .v7-sp-j { width: 9.5em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-dunkel); } #app .v7-liste[data-iv="monat"] .v7-sp-m, #app .v7-liste[data-iv="jahr"] .v7-sp-j { background: var(--gelb-hell); color: var(--titel); font-weight: 650; } #app .v7-liste[data-iv="monat"] thead .v7-sp-m, #app .v7-liste[data-iv="jahr"] thead .v7-sp-j { background: var(--gelb); color: var(--auf-gelb); border-radius: 8px 8px 0 0; } #app .v7-liste__gruppe th { padding-top: 20px; border-bottom: 2px solid var(--titel); color: var(--titel); font: 600 19px var(--serif); text-align: left; } #app .v7-liste__gruppe small { display: block; margin-top: 2px; font: 400 13.5px var(--schrift) !important; } #app .v7-liste__mtl { display: none !important; } #app .v7-liste tbody tr:first-child.v7-liste__gruppe th { padding-top: 6px; } #app .v7-liste__frei td { color: var(--text) !important; font-weight: 400 !important; } #app .v7-liste__summe th, #app .v7-liste__summe td { font-weight: 700 !important; } #app .v7-liste tfoot th, #app .v7-liste tfoot td { border-bottom: 0; padding-top: 7px; padding-bottom: 7px; } #app .v7-liste tfoot tr:first-child th, #app .v7-liste tfoot tr:first-child td { padding-top: 16px; border-top: 2px solid var(--titel); } #app .v7-liste__total th, #app .v7-liste__total td { font-size: 17px; font-weight: 800 !important; color: var(--titel) !important; } #app .v7-liste__satz { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--r); background: var(--petrol-zart); color: var(--text-dunkel); font-size: 14.5px; } /* Schmal: nur «Posten» und «pro Jahr»; der Monatsbetrag steht klein unter dem Paket. */ @media (max-width: 560px) { #app .v7-liste { font-size: 14.5px; } #app .v7-liste .v7-sp-m { display: none; } #app .v7-liste .v7-sp-j { width: 8.5em; padding-left: 8px; padding-right: 8px; } #app .v7-liste th, #app .v7-liste td { padding: 9px 8px; } #app .v7-liste__mtl { display: block !important; } #app .v7-liste__gruppe th { font-size: 18px; } } html[data-variante="geteilt"] { scroll-padding-bottom: calc(var(--kosten-h, 72px) + 24px); } /* ---------- Links: was schon feststeht ---------- */ #app .v7-stand { display: grid; gap: 4px; margin: 30px 0 0; padding: 0; list-style: none; } #app .v7-stand__punkt { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; } #app .v7-stand__zeichen { position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: #cfe0e5; font-size: 13px; font-weight: 800; transition: background-color 360ms ease, border-color 360ms ease, color 360ms ease, transform 480ms var(--feder); } #app .v7-stand__zeichen > span { transition: opacity 200ms ease, transform 300ms var(--normal); } #app .v7-stand__zeichen svg { position: absolute; width: 16px; height: 16px; fill: none; stroke: var(--auf-gelb); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } #app .v7-stand__zeichen path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 460ms var(--ein) 140ms; } #app .v7-stand__punkt.ist-jetzt .v7-stand__zeichen { border-color: #fff; background: #fff; color: var(--petrol); transform: scale(1.08); } #app .v7-stand__punkt.ist-fertig:not(.ist-jetzt) .v7-stand__zeichen { border-color: var(--gelb); background: var(--gelb); } #app .v7-stand__punkt.ist-fertig:not(.ist-jetzt) .v7-stand__zeichen > span { opacity: 0; transform: scale(0.4); } #app .v7-stand__punkt.ist-fertig:not(.ist-jetzt) .v7-stand__zeichen path { stroke-dashoffset: 0; } #app .v7-stand__text { display: grid; min-width: 0; padding-top: 4px; } #app .v7-stand__name { color: #fff; font-weight: 650; } #app .v7-stand__info { color: #a9c6ce; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; } #app .v7-seite .v7-link { margin-top: auto; padding-top: 18px; } @media (max-width: 920px) { #app .v7-stand { display: none; } #app .v7-seite .v7-link { margin-top: 14px; padding-top: 0; } } html[data-vt] #app .v7 .seite * { animation: none !important; } @keyframes v7-auf { from { opacity: 0; transform: translateY(14px); } } /* ---------- Alle Vorteile in der Karte, neue fett ---------- */ #app .v7-paket__vorteile { align-self: stretch; margin: 4px 0 14px; padding: 0; list-style: none; text-align: left; } #app .v7-paket__vorteile li { position: relative; padding: 5px 0 5px 24px; border-top: 1px solid rgba(30, 55, 68, 0.08); color: var(--text-dunkel); font-size: 14px; line-height: 1.35; } #app .v7-paket__vorteile li::before { content: ''; position: absolute; left: 3px; top: 10px; width: 11px; height: 6px; border: solid var(--petrol); border-width: 0 0 2px 2px; transform: rotate(-45deg); } #app .v7-paket__vorteile li.ist-neu { color: var(--titel); } #app .v7-paket__vorteile li.ist-neu strong { font-weight: 750; } #app .v7-paket__zahl { align-self: stretch; margin: 0 0 2px; text-align: left; } /* Vergleich als Knopf: über die ganze Breite, die vier Medaillen links, Verlauf in den Farben der Pakete */ #app .v7-vergleich-link { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 18px 10px 12px; border: 1.5px solid rgba(31,75,88,.18); border-radius: var(--r); background: linear-gradient(90deg, #f3e1cf 0%, #e6ecef 36%, #f9eab4 68%, #d6eef3 100%); color: var(--petrol-dunkel); font: inherit; font-weight: 700; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(22,58,69,.08); transition: border-color var(--kurz) ease, box-shadow var(--kurz) ease, transform 120ms var(--normal); } #app .v7-vergleich-link__text { flex: 1 1 auto; } #app .v7-vergleich-link__medaillen { display: flex; flex: none; } #app .v7-vergleich-link__medaille { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.18); transition: transform var(--mittel) var(--normal); } #app .v7-vergleich-link__medaille + .v7-vergleich-link__medaille { margin-left: -10px; } #app .v7-vergleich-link:hover { border-color: var(--petrol); box-shadow: 0 4px 12px rgba(22,58,69,.14); } #app .v7-vergleich-link:hover .v7-vergleich-link__medaille:nth-child(2) { transform: translateX(3px); } #app .v7-vergleich-link:hover .v7-vergleich-link__medaille:nth-child(3) { transform: translateX(6px); } #app .v7-vergleich-link:hover .v7-vergleich-link__medaille:nth-child(4) { transform: translateX(9px); } #app .v7-vergleich-link:active { transform: scale(0.99); } #app .v7-vergleich-link:focus-visible { outline: 3px solid var(--blaugrau); outline-offset: 2px; } #app .v7-vergleich-link .pfeil-svg { transition: transform var(--mittel) var(--normal); } #app .v7-vergleich-link:hover .pfeil-svg { transform: translateX(3px); } #app .v7-vergleich h3 { font-size: 16px; } /* ---------- Die Münze in der Kostenleiste und ihr Flug dorthin ---------- */ #app .v7-muenze { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); transition: opacity 200ms ease; } #app .v7-muenze img { width: 30px; height: 30px; } #app .v7-muenze.wartet { opacity: 0; } #app .v7-flug { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 10px 18px rgba(14, 34, 41, 0.35)); } @media (max-width: 640px) { #app .v7-muenze { width: 30px; height: 30px; } #app .v7-muenze img { width: 26px; height: 26px; } #app .v7-kosten__reihe { gap: 10px; } } /* ---------- Der ganze Text der Moschee, gegliedert ---------- Überall die gleiche Schrift, Grösse und Zeilenhöhe. Abstände nur in zwei Stufen: 12px zwischen Blöcken, 44px zwischen Teilen. */ #app .v7-einleitung { margin-bottom: 56px; } #app .v7-einleitung__ueber { margin: 0 0 10px; color: var(--petrol); font-size: 13px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; } #app .v7-einleitung__titel { margin: 0 0 18px; font: 560 clamp(32px, 4vw, 46px)/1.08 var(--serif); letter-spacing: -0.005em; text-wrap: balance; } #app .v7-text { --v7-schrift: 400 16.5px/1.6 var(--schrift); color: var(--titel); font: var(--v7-schrift); hyphens: auto; -webkit-hyphens: auto; } #app .v7-text p, #app .v7-text li { margin: 0; font: inherit; text-wrap: pretty; } #app .v7-text p + p, #app .v7-text p + ol, #app .v7-text p + ul, #app .v7-text ol + p, #app .v7-text ul + p, #app .v7-text div + p, #app .v7-text p + div, #app .v7-text p + h4, #app .v7-text div + h4 { margin-top: 12px; } #app .v7-text__lead { color: var(--titel); } #app .v7-text__teil { margin-top: 44px; } #app .v7-text h3 { margin: 0 0 16px; font: 560 24px/1.25 var(--serif); text-wrap: balance; hyphens: manual; } #app .v7-text h4 { margin: 24px 0 12px !important; color: var(--titel); font: 560 19px/1.3 var(--serif); } #app .v7-text strong { color: var(--titel); font-weight: 650; } #app .v7-text__haken { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--gelb); } #app .v7-text__haken svg { width: 13px; height: 13px; fill: none; stroke: var(--auf-gelb); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* Listen mit Häkchen: alle gleich */ #app .v7-text__kacheln, #app .v7-text__liste, #app .v7-text__stufe ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } /* «Eine Mitgliedschaft dient»: eine Spalte, Zeilen mit feiner Linie, der erste Punkt hervorgehoben */ #app .v7-text__kacheln { gap: 0; } #app .v7-text__kacheln li { padding: 11px 4px; border-top: 1px solid var(--linie); } #app .v7-text__kacheln li:last-child { border-bottom: 1px solid var(--linie); } #app .v7-text__kacheln li, #app .v7-text__liste li, #app .v7-text__stufe li { display: flex; align-items: flex-start; gap: 12px; color: var(--titel); } #app .v7-text__kacheln li:first-child { margin-bottom: 10px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--petrol); color: #fff; font-weight: 650; } /* Kästen: alle mit gleichem Innenabstand und Radius */ #app .v7-text__betont, #app .v7-text__notiz, #app .v7-text__zahl, #app .v7-text__stufe { padding: 16px 18px; border-radius: 14px; } #app .v7-text__betont { display: flex; align-items: flex-start; gap: 18px; background: var(--gelb-hell); color: var(--auf-gelb); } #app .v7-text__betont p:first-child { color: var(--auf-gelb); font-weight: 600; } #app .v7-text__medaillen { display: flex; flex: none; padding-top: 2px; } #app .v7-text__medaillen img + img { margin-left: -14px; } #app .v7-text__notiz { background: var(--petrol-zart); color: var(--titel); } #app .v7-text__betont + .v7-text__notiz, #app .v7-text__schritte + .v7-text__notiz { margin-top: 12px; } #app .v7-text__schritte { display: grid; margin: 0; padding: 4px 18px; border: 1.5px solid var(--linie); border-radius: 14px; background: #fff; list-style: none; } #app .v7-text__schritte li { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; } #app .v7-text__schritte li + li { border-top: 1px solid var(--linie); } #app .v7-text__bild { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--petrol-zart); color: var(--petrol); } #app .v7-text__bild svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #app .v7-text__leistung { display: grid; gap: 2px; padding-top: 1px; } #app .v7-text__leistung > span:last-child { color: var(--text-dunkel); } /* Wartezeit: drei gleiche Zeilen, links die Zahl, rechts der Text */ #app .v7-text__wartezeit { display: grid; gap: 10px; } #app .v7-text__zahl { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: center; gap: 0 16px; background: var(--petrol); color: #dce9ec; } #app .v7-text__tage { display: grid; justify-items: center; } #app .v7-text__zahl strong { color: var(--gelb); font: 800 44px/1 var(--rund); } #app .v7-text__tage span { color: #fff; font-weight: 700; } #app .v7-text__klein { color: var(--text); } #app .v7 .seite:not([hidden]) .v7-text__teil { animation: v7-auf 700ms var(--ein) both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @supports not (animation-timeline: view()) { #app .v7 .seite:not([hidden]) .v7-text__teil { animation: none; } } @keyframes v7-auf { from { opacity: 0; transform: translateY(24px); } } @media (max-width: 640px) { #app .v7-text { --v7-schrift: 400 16px/1.6 var(--schrift); } #app .v7-text__zahl { grid-template-columns: 4.2em minmax(0, 1fr); gap: 0 12px; } #app .v7-text__zahl strong { font-size: 36px; } #app .v7-text__betont { flex-direction: column; gap: 12px; } #app .v7-text h3 { font-size: 22px; } } /* ---------- Das Karussell taucht beim Hinunterscrollen auf ---------- */ #app .v7-auftauchen { padding-top: 36px; border-top: 1px solid var(--linie); opacity: 0; transform: translateY(56px) scale(0.98); transition: opacity 600ms ease, transform 900ms var(--ein); } #app .v7-auftauchen.ist-da { opacity: 1; transform: none; } #app .v7-auftauchen.ist-da .v7-paket__innen { animation: v7-karte-ein 800ms var(--ein) both; } #app .v7-auftauchen.ist-da .v7-paket:nth-child(2) .v7-paket__innen { animation-delay: 90ms; } #app .v7-auftauchen.ist-da .v7-paket:nth-child(3) .v7-paket__innen { animation-delay: 180ms; } #app .v7-auftauchen.ist-da .v7-paket:nth-child(4) .v7-paket__innen { animation-delay: 270ms; } @keyframes v7-karte-ein { from { opacity: 0; translate: 0 40px; } } #app .einleitung.v7-text ul, #app .einleitung.v7-text ol { margin-left: 0; padding-left: 0; list-style: none; } #app .einleitung.v7-text li::marker { content: none; } /* Zusätzliche Vorteile als Stufen: links die Stufe mit Medaille, rechts was dazukommt */ #app .v7-text__stufen { display: grid; gap: 10px; } #app .v7-text__stufe { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 12px 18px; align-items: center; background: linear-gradient(100deg, var(--tint-1), #fff 70%); border: 1.5px solid var(--linie); } #app .v7-text__ab { display: flex; align-items: center; gap: 12px; color: var(--titel); font: 560 18px/1.25 var(--serif) !important; hyphens: manual; } #app .v7-text__medaille { flex: none; width: 48px; height: 48px; } @media (max-width: 640px) { #app .v7-text__stufe { grid-template-columns: minmax(0, 1fr); } } /* ---------- Vergleich im Pop-up ---------- */ #app .v7-vergleich h3 { margin: 0 0 12px; font: 560 19px/1.3 var(--serif); } #app .v7-vergleich h3 + .tabelle-wrap { margin-top: 4px; } #app .v7-v__basis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin: 0 0 26px; padding: 0; list-style: none; } #app .v7-v__basis li { display: flex; align-items: flex-start; gap: 10px; color: var(--titel); font-size: 15px; line-height: 1.45; } #app .v7-v__basis .v7-text__haken { width: 22px; height: 22px; margin-top: 0; } #app .v7-v__basis .v7-text__haken svg { width: 12px; height: 12px; } #app .v7-v__tabelle { table-layout: fixed; font-size: 15px; } #app .v7-v__tabelle th, #app .v7-v__tabelle td { padding: 12px 6px; line-height: 1.35; } #app .v7-v__tabelle thead th { padding-top: 0; vertical-align: bottom; color: var(--titel); font-size: 13px; font-weight: 700; } #app .v7-v__tabelle thead th img { display: block; width: 30px; height: 30px; margin: 0 auto 4px; } #app .v7-v__tabelle thead th:first-child { width: 50%; } #app .v7-v__tabelle th[scope="row"] { padding-left: 0; color: var(--titel); font-size: 14px; font-weight: 600; } #app .v7-v__ja { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gelb); vertical-align: middle; } #app .v7-v__ja svg { width: 13px; height: 13px; fill: none; stroke: var(--auf-gelb); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } #app .v7-v__wert { color: var(--titel); font-weight: 700; font-variant-numeric: tabular-nums; } #app .v7-v__nein { color: #7a878b; } @media (max-width: 560px) { #app .v7-v__basis { grid-template-columns: minmax(0, 1fr); } /* Am Handy: der Vorteil über die ganze Breite, darunter die vier Werte genau unter den Stufen */ #app .v7-v__tabelle, #app .v7-v__tabelle thead, #app .v7-v__tabelle tbody { display: block; } #app .v7-v__tabelle tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } #app .v7-v__tabelle thead th:first-child { display: none; } #app .v7-v__tabelle th[scope="row"] { grid-column: 1 / -1; width: auto; border: 0; text-align: left; } #app .v7-v__tabelle td { border-bottom: 0; } #app .v7-v__tabelle thead th { border-bottom: 0; } } /* ---------- Handy: kein Kopf mit «Paket», gleich der Text; der Reiter klebt schmal oben ---------- */ @media (max-width: 920px) { #app .v7-seite { display: none; } #app .v7.v7-fertig .v7-seite { display: block; } #app .v7-main { padding-top: 0; } #app .v7[data-v7-schritt="0"] .v7-main { padding-top: 0; } #app .v7[data-v7-schritt="0"] .v7-reiter { display: none; } #app .v7-reiter { position: sticky; top: var(--oben); z-index: 30; margin: 0 -20px 22px; padding: 0 14px; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #app .v7-reiter ol { justify-content: space-between; overflow: visible; } #app .v7-reiter__knopf { padding: 10px 6px 12px; } #app .v7-reiter__knopf:not([aria-current]) .v7-reiter__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html[data-variante="geteilt"] { scroll-padding-top: calc(var(--oben) + 64px); } /* Kopf der Einleitung auf Petrol mit dem Logo-Muster, über die ganze Breite */ #app .v7-einleitung > .v7-einleitung__ueber, #app .v7-einleitung > .v7-einleitung__titel { margin-inline: -20px; padding-inline: 20px; background-color: var(--petrol); background-image: var(--logo-muster), var(--logo-muster); background-size: 190px 150px; background-position: 0 0, 95px 75px; } #app .v7-einleitung > .v7-einleitung__ueber { margin-bottom: 0; padding-top: 26px; padding-bottom: 8px; color: var(--gelb); background-position: 0 0, 95px 75px; } #app .v7-einleitung > .v7-einleitung__titel { margin-bottom: 24px; padding-bottom: 28px; color: #fff; background-position: 0 -40px, 95px 35px; } } #app .einleitung.v7-text .v7-text__schritte { padding: 4px 20px; } /* Liste aller Beträge: «CHF» und Zahl wie in einer Rechnung untereinander */ #app .v7-geld { display: flex; justify-content: space-between; gap: 0.4em; } /* Jede Spalte in der Farbe ihrer Stufe: so sieht man sofort, welcher Wert zu welchem Paket gehört */ #app .v7-v__tabelle [data-stufe] { background: color-mix(in srgb, var(--tint-2) 50%, #fff); border-bottom-color: #fff; } #app .v7-v__tabelle thead th[data-stufe] { padding-top: 10px; border-radius: 12px 12px 0 0; background: var(--tint-2); color: var(--tint-tief); } #app .v7-v__tabelle tbody tr:last-child td[data-stufe] { border-radius: 0 0 12px 12px; } #app .v7-v__tabelle td[data-stufe], #app .v7-v__tabelle thead th[data-stufe] { border-left: 3px solid #fff; } /* Am Handy: vier Farbstreifen hinter der Tabelle, durchgehend von der Medaille bis zur letzten Zeile. Die Vorteile stehen als kleine weisse Etiketten darüber, die Streifen laufen ununterbrochen weiter. */ #app .v7-v__wrap { position: relative; } #app .v7-v__streifen { display: none; } @media (max-width: 560px) { #app .v7-v__streifen { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 4px; } /* Oben bei Medaille und Name kräftiger, wie der Kopf am PC */ #app .v7-v__streifen span { border-radius: 14px; background: linear-gradient(var(--tint-2) 0 var(--v7-kopf, 70px), color-mix(in srgb, var(--tint-2) 55%, #fff) var(--v7-kopf, 70px)); } #app .v7-v__tabelle { position: relative; } #app .v7-v__tabelle tr { column-gap: 4px; } #app .v7-v__tabelle [data-stufe] { background: none !important; border: 0 !important; border-radius: 0 !important; } #app .v7-v__tabelle thead th[data-stufe] { height: 70px; padding: 10px 2px 6px; box-sizing: border-box; } /* Der Vorteil als durchgehender, durchsichtiger Balken quer über alle Spalten; die Farben scheinen durch */ #app .v7-v__tabelle th[scope="row"] { margin: 12px 0 2px; padding: 0; background: none; border-radius: 0; } #app .v7-v__tabelle th[scope="row"] span { display: block; padding: 6px 12px; background: rgba(255, 255, 255, 0.38); color: var(--petrol); font-size: 13.5px; font-weight: 700; line-height: 1.3; } #app .v7-v__tabelle td[data-stufe] { display: flex; align-items: center; justify-content: center; padding: 6px 4px 8px; } #app .v7-v__tabelle tbody tr:last-child td[data-stufe] { padding-bottom: 16px; } } /* ---------- Familie: zuerst die Zahl der Kinder, dann pro Kind ein Feld ---------- */ #app .kinderzahl { display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; margin-bottom: 16px; padding: 16px 18px; border-radius: var(--r-gross); background: var(--petrol-zart); } #app .kinderzahl__frage { margin: 0; color: var(--titel); font-size: 17px; font-weight: 700; } #app .kinderzahl .hilfe { margin: 2px 0 0; } #app .kinderzahl__regler { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rand); } #app .kinderzahl__knopf { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--petrol); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background-color var(--kurz) ease, transform 120ms var(--normal); } #app .kinderzahl__knopf:hover:not(:disabled) { background: var(--petrol-dunkel); } #app .kinderzahl__knopf:active:not(:disabled) { transform: scale(0.92); } #app .kinderzahl__knopf:disabled { background: var(--petrol-hell); color: #6b7a7f; cursor: default; } #app .kinderzahl__wert { min-width: 2.2ch; color: var(--titel); font: 800 24px/1 var(--rund); text-align: center; font-variant-numeric: tabular-nums; } @media (max-width: 520px) { #app .kinderzahl { flex-wrap: wrap; } #app .kinderzahl__regler { margin-left: auto; } } /* Meldung im Kind, wenn es über 21 ist */ #app .person__info { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid var(--gelb); border-radius: 4px 12px 12px 4px; background: var(--gelb-hell); color: var(--auf-gelb); font-size: 15px; line-height: 1.5; } #app .person__info strong { font-weight: 700; } #app .person__info--fehler { border-left-color: var(--fehler); background: var(--fehler-hell); color: var(--fehler); } #app .person__info--gut { border-left-color: var(--petrol); background: var(--petrol-zart); color: var(--titel); } #app .person__info .linkknopf { color: inherit; font-weight: 700; } /* Kontakt unter der Fehlerübersicht */ #app .fehlerbox__hilfe { margin: 12px 0 0; color: var(--text-dunkel); font-size: 14.5px; } #app .fehlerbox__hilfe a { color: var(--petrol); font-weight: 650; } /* Unterschrift des Kindes für den eigenen Bestattungsfond */ #app .pad--person { height: 150px; } #app .pad__loeschen { margin-top: 8px; font-size: 15px; } #app .hilfe--iv { color: var(--titel); font-weight: 600; } /* Übersprungener Schritt im Reiter (Familie bei «Nein, nur ich») */ #app .v7-reiter__knopf.ist-weg { opacity: .4; text-decoration: line-through; } /* Letzte Seite: ohne Kostenleiste unten, darum kein Platz dafür nötig */ #app .v7.v7-ohne-leiste { --kosten-h: 0px; } /* Personen in der Kostenliste: eine pro Zeile */ #app .v7-liste__person { display: block; } /* ============================================================ Onepager (Version 9): aufgebaut wie die Webseite duebi-moschee.ch Hero auf Petrol, Abschnitte in einer mittigen Spalte (abwechselnd weiss und leicht grau, wie .section und .section--tint der Webseite), Karten wie die Angebote (weiss, leichter Schatten, 4 px Rundung), gelbe Knöpfe. Keine dunkle Fläche links, keine Leiste über die ganze Breite. ============================================================ */ html[data-variante="onepager"] { --hg: #fff; scroll-padding-bottom: calc(var(--kosten-h, 64px) + 24px); } #app .v9 { display: block; min-height: 0; padding: 0; } #app .v9 .v7-seite { display: none !important; } #app .v9 .v7-main { padding: var(--sec-pad, 51px) 0 32px; } /* ---------- Hero wie auf der Startseite, etwas niedriger ---------- */ #app .v9-hero { padding: 72px 0 64px; } #app .v9-hero .wrap { max-width: 860px; } #app .v9-hero__ueber { margin: 0 0 14px; color: var(--gelb); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } #app .v9-hero h1 { margin: 0 0 22px; color: #fff; font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: 0; text-wrap: balance; } #app .v9-hero__text { max-width: 720px; margin: 0 auto 32px; color: #dce9ec; font-size: 18px; line-height: 1.7; } #app .v9 .btn { text-decoration: none; font-family: var(--font-display); font-weight: 700; } #app .v9 .btn:hover { text-decoration: none; } /* ---------- Abschnitte mit dem Text der Moschee (seit 9.11.2026 neu geordnet und gestaltet) ---------- */ #app .v9-abschnitt h2 { margin: 0 0 14px; font-weight: 700; text-align: center; letter-spacing: 0; text-wrap: balance; } #app .v9-abschnitt .lede { max-width: 760px; margin: 0 auto 36px; text-align: center; } #app .v9-abschnitt h2 + .v9-liste { margin-top: 36px; } #app .v9-zwischentitel { margin: 56px 0 24px; font-size: 22px; font-weight: 700; letter-spacing: 0; text-align: center; } /* Gelbe Häkchen wie auf der Startseite */ #app .v9 .v7-text__haken { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--gelb); } #app .v9 .v7-text__haken svg { width: 13px; height: 13px; fill: none; stroke: var(--auf-gelb); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* Lange Listen: zwei gleich hohe Spalten mit feinen Linien, damit nichts schief steht */ #app .v9-liste { max-width: 980px; margin: 0 auto; padding: 0; list-style: none; columns: 2; column-gap: 56px; } #app .v9-liste li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); break-inside: avoid; color: var(--titel); line-height: 1.55; } #app .v9-haken { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } #app .v9-haken li { display: flex; align-items: flex-start; gap: 12px; color: var(--titel); line-height: 1.55; } /* Symbole: Linien in Petrol auf hellem Petrol, rund (wie die Symbole der Startseite) */ #app .v9-symbol, #app .v9 .v7-text__bild { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--petrol-hell); color: var(--petrol); } #app .v9-symbol svg, #app .v9 .v7-text__bild svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Pakete: vier gleich breite Kacheln mit Münze, Name und Beitrag */ #app .v9-pakete-kurz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 0 auto 32px; padding: 0; list-style: none; } #app .v9-pakete-kurz li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px 18px; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); text-align: center; } #app .v9-pakete-kurz .medaille { margin-bottom: 8px; } #app .v9-pakete-kurz__name { color: var(--titel); font-size: 18px; font-weight: 700; line-height: 1.25; } #app .v9-pakete-kurz__preis { color: var(--petrol); font-size: 15px; font-weight: 700; } #app .v9-pakete-kurz__preis small { color: var(--text); font-size: 13px; font-weight: 500; } #app .v9-text-mitte { max-width: 720px; margin: 0 auto; text-align: center; } #app .v9-text-mitte p { margin: 0 0 14px; color: var(--titel); line-height: 1.7; } /* Merksatz: Symbol links, ruhiger weisser Kasten */ #app .v9-merke { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 28px auto 0; padding: 16px 22px; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); color: var(--titel); font-weight: 600; line-height: 1.55; } #app .v9-merke--leise { display: block; padding: 12px 18px; box-shadow: none; border: 1px solid var(--linie); font-weight: 500; text-align: center; } /* Leistungen des Bestattungsfonds: acht gleich grosse Karten, 4 × 2 */ #app .v9-leistungen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } #app .v9-leistungen li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } #app .v9-leistungen h3 { margin: 4px 0 0; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: 0; } #app .v9-leistungen p { margin: 0; color: var(--text-dunkel); font-size: 14.5px; line-height: 1.6; } /* Wartezeit: «0 Tage» als Vorteil, gelber Kreis wie die Häkchen */ #app .v9-wartezeit { display: flex; align-items: center; gap: 28px; max-width: 820px; margin: 40px auto 0; padding: 26px 32px; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } #app .v9-wartezeit__zahl { flex: none; display: grid; place-content: center; width: 104px; height: 104px; margin: 0; border-radius: 50%; background: var(--gelb); color: var(--auf-gelb); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } #app .v9-wartezeit__zahl strong { display: block; font-size: 44px; line-height: 1; letter-spacing: 0; } #app .v9-wartezeit__titel { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: 0; } #app .v9-wartezeit p { margin: 0; color: var(--titel); line-height: 1.6; } #app .v9-wartezeit p + p { margin-top: 6px; } #app .v9-wartezeit .v9-wartezeit__mehr { margin-top: 10px; } #app .v9-wartezeit__mehr a { color: var(--petrol); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* Treppe der Pakete: vier Säulen, unten bündig; jede Stufe trägt einen Block mehr (Auftraggeber 9.11.2026). Block für alle unten, Neues oben und in der Farbe des Pakets. Am Handy untereinander, jede Stufe etwas breiter. */ #app .v9-treppe__hinweis { max-width: 640px; margin: -12px auto 28px; color: var(--text-dunkel); text-align: center; } #app .v9-treppe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; } #app .v9-treppe__stufe { display: flex; flex-direction: column; padding: 16px 14px 14px; border-radius: 8px 8px 0 0; background: var(--tint-1); border-top: 4px solid var(--tint-tief); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } #app .v9-treppe__kopf { display: flex; align-items: center; gap: 10px; } #app .v9-treppe__kopf .medaille { flex: none; } #app .v9-treppe__kopf h4 { margin: 0; color: var(--titel); font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.25; } #app .v9-treppe__kopf p { margin: 2px 0 0; color: var(--titel); font-size: 14px; } #app .v9-treppe__zahl { margin: 12px 0; color: var(--titel); font-size: 14px; } #app .v9-treppe__zahl strong { font-size: 26px; line-height: 1; margin-right: 2px; } #app .v9-treppe__bloecke { display: flex; flex-direction: column-reverse; gap: 6px; margin: 0; padding: 0; list-style: none; } #app .v9-treppe__block { display: flex; align-items: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 8px 10px; border-radius: 4px; background: #fff; border: 1px solid var(--tint-2); color: var(--titel); font-size: 14px; line-height: 1.3; } #app .v9-treppe__block.ist-neu { background: var(--tint-2); border-color: var(--tint-2); font-weight: 700; } #app .v9-treppe__block--alle { background: var(--petrol); border-color: var(--petrol); color: #fff; font-weight: 700; } /* Aufklappen: «Vorteile für alle» und die Details zu einem Vorteil (Sätze des Texters), Pfeil rechts nach unten */ #app .v9-treppe__block.v9-treppe__block--alle, #app .v9-treppe__block.hat-info { display: flex; flex-direction: column; justify-content: center; padding: 0; } #app .v9-treppe__block details { width: 100%; } #app .v9-treppe__block summary { display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 8px 10px; cursor: pointer; list-style: none; border-radius: 4px; } #app .v9-treppe__block summary::-webkit-details-marker { display: none; } #app .v9-treppe__block summary:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; } #app .v9-treppe__alle summary:focus-visible { outline-color: var(--gelb); } #app .v9-treppe__text { flex: 1; min-width: 0; } #app .v9-treppe__pfeil { flex: none; width: 8px; height: 8px; margin: -3px 4px 0 auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.2s ease; } #app .v9-treppe__block details[open] .v9-treppe__pfeil { margin-top: 3px; transform: rotate(-135deg); } #app .v9-treppe__alle ul { margin: 0; padding: 2px 12px 12px 40px; font-weight: 400; font-size: 13.5px; line-height: 1.4; } #app .v9-treppe__alle li + li { margin-top: 5px; } #app .v9-treppe__mehr p { margin: 0; padding: 0 12px 12px 40px; font-weight: 400; font-size: 13.5px; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { #app .v9-treppe__pfeil { transition: none; } } #app .v9 .v9-treppe__block .v7-text__haken { width: 20px; height: 20px; } #app .v9 .v9-treppe__block .v7-text__haken svg { width: 11px; height: 11px; } #app .v9-treppe__plus { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--tint-tief); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; } @media (max-width: 1000px) { #app .v9-treppe { gap: 10px; } #app .v9-treppe__stufe { padding: 14px 10px 10px; } #app .v9-treppe__kopf { flex-direction: column; align-items: flex-start; gap: 6px; } #app .v9-treppe__block { min-height: 60px; font-size: 13px; padding: 6px 8px; gap: 8px; } } @media (max-width: 900px) { #app .v9-treppe { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 640px; } #app .v9-treppe__stufe { border-radius: 0 8px 8px 0; border-top: 0; border-left: 4px solid var(--tint-tief); } #app .v9-treppe__stufe:nth-child(1) { width: 76%; } #app .v9-treppe__stufe:nth-child(2) { width: 84%; } #app .v9-treppe__stufe:nth-child(3) { width: 92%; } #app .v9-treppe__kopf { flex-direction: row; align-items: center; gap: 10px; } #app .v9-treppe__zahl { margin: 10px 0 8px; } #app .v9-treppe__bloecke { flex-direction: column; } #app .v9-treppe__block { min-height: 44px; font-size: 14px; padding: 8px 10px; } } /* Diamant mit leisem Schein: nur Deckkraft und Grösse einer Fläche dahinter (läuft auf der Grafikkarte, kein Neuzeichnen), 5 s pro Atemzug. Bei «Bewegung reduzieren» ruhig. */ #app .v9-glanz { position: relative; display: inline-grid; flex: none; isolation: isolate; } /* Der Schein richtet sich nach dem Rahmen um die Münze: Abstände der Münze gehören an den Rahmen, sonst sitzt er schief */ #app .v9-glanz > .medaille { margin: 0; } #app .v9-pakete-kurz .v9-glanz { margin-bottom: 8px; } #app .v9-glanz::before { content: ""; position: absolute; inset: -24%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, #fff 38%, rgba(160, 196, 232, 0.75) 52%, rgba(160, 196, 232, 0) 70%); opacity: 0.35; transform: scale(0.92); animation: v9-glanz 5s ease-in-out infinite alternate; pointer-events: none; } @keyframes v9-glanz { to { opacity: 1; transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { #app .v9-glanz::before { animation: none; opacity: 0.6; transform: none; } } @media (max-width: 1000px) { #app .v9-leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } #app .v9-pakete-kurz { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { #app .v9-liste { columns: 1; } #app .v9-leistungen { grid-template-columns: minmax(0, 1fr); } #app .v9-leistungen li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; } #app .v9-leistungen li > .v7-text__bild { grid-row: span 2; } #app .v9-leistungen h3 { margin: 0; } #app .v9-pakete-kurz { gap: 12px; } #app .v9-wartezeit { flex-direction: column; gap: 16px; padding: 24px 20px; text-align: center; } #app .v9-wartezeit__zahl { width: 88px; height: 88px; } #app .v9-wartezeit__zahl strong { font-size: 38px; } #app .v9-merke { align-items: flex-start; padding: 14px 16px; } #app .v9-zwischentitel { margin-top: 44px; } } /* ---------- Formular: schlichte Schrittanzeige, mittige Spalte ---------- */ #app .v9 .v7-form, #app .v9 .ergebnis { max-width: 760px; margin-inline: auto; } #app .v9[data-v7-schritt="0"] .v7-form { max-width: none; } #app .v9[data-v7-schritt="0"] .v7-aktionen, #app .v9[data-v7-schritt="0"] .v7-kontakt, #app .v9[data-v7-schritt="0"] .seite .item:not(.item--pakete) { width: 100%; max-width: 760px; margin-inline: auto; } #app .v9-fortschritt { max-width: 760px; margin: 0 auto 36px; } #app .v9-fortschritt__text { margin: 0 0 14px; color: var(--text); font-size: 15px; text-align: center; } #app .v9-fortschritt__text strong { color: var(--titel); } #app .v9 .v7-reiter { position: static; max-width: none; margin: 0; padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; } #app .v9 .v7-reiter ol { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; overflow: visible; } #app .v9 .v7-reiter li { position: relative; } #app .v9 .v7-reiter li:not(:first-child)::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--linie); } #app .v9 .v7-reiter li:has(.ist-fertig)::before, #app .v9 .v7-reiter li:has([aria-current])::before { background: var(--petrol); } #app .v9 .v7-reiter__knopf { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 2px; color: var(--text); font-size: 13.5px; } #app .v9 .v7-reiter__nr { width: 32px; height: 32px; border: 2px solid var(--linie); background: #fff; color: var(--text); font-size: 13px; } #app .v9 .v7-reiter__knopf.ist-fertig .v7-reiter__nr { border-color: var(--gelb); background: var(--gelb); color: var(--auf-gelb); } #app .v9 .v7-reiter__knopf[aria-current] .v7-reiter__nr { border-color: var(--petrol); background: var(--petrol); color: #fff; } #app .v9 .v7-reiter__strich { display: none; } /* Namen aller Schritte bis 600 px zeigen (die zweigeteilte Fassung blendet sie schon unter 920 px aus) */ #app .v9 .v7-reiter__knopf:not([aria-current]) .v7-reiter__name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } #app .v9 .seite__kopf { margin-bottom: 28px; } #app .v9 .seite__titel { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; letter-spacing: 0; } #app .v9[data-v7-schritt="0"] .seite__kopf { text-align: center; } #app .v9[data-v7-schritt="0"] .seite__text { max-width: 720px; margin-inline: auto; } /* ---------- Pakete als Karten wie die Angebote ---------- */ #app .v9-pakete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; } #app .v9-paket__innen { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 24px 20px 20px; border: 2px solid transparent; border-radius: 4px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); text-align: center; transition: border-color var(--mittel) ease, box-shadow var(--mittel) ease; } #app .v9-paket:hover .v9-paket__innen { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); } #app .v9-paket.ist-gewaehlt .v9-paket__innen { border-color: var(--petrol); box-shadow: 0 6px 18px rgba(25, 74, 87, 0.18); } #app .v9 .v7-paket__medaille { width: 72px; height: 72px; } #app .v9-paket__name { margin: 10px 0 2px; font-size: 22px; font-weight: 700; letter-spacing: 0; } #app .v9-paket__preis { margin: 0; color: var(--text-dunkel); font-size: 14px; } #app .v9-paket__preis strong { color: var(--titel); font-size: 20px; } #app .v9-paket__jahr { margin: 0 0 12px; color: var(--text); font-size: 13px; } #app .v9-paket__kern { margin: 0 0 12px; color: #555; font-size: 14px; line-height: 1.5; text-align: left; hyphens: auto; } #app .v9-paket__kern strong { color: var(--titel); } #app .v9-paket__dazu { align-self: stretch; margin: 0 0 6px; color: var(--titel); font-size: 13px; font-weight: 700; text-align: left; } #app .v9 .v7-paket__vorteile { align-self: stretch; margin: 0 0 16px; padding: 0; list-style: none; text-align: left; } #app .v9 .v7-paket__vorteile li { position: relative; padding: 5px 0 5px 22px; border-top: 1px solid var(--linie); color: var(--text-dunkel); font-size: 13.5px; line-height: 1.4; } #app .v9 .v7-paket__vorteile li::before { content: ''; position: absolute; left: 3px; top: 10px; width: 10px; height: 5px; border: solid var(--petrol); border-width: 0 0 2px 2px; transform: rotate(-45deg); } #app .v9 .v7-paket__knopf { width: 100%; margin-top: auto; } #app .v9 .v7-vergleich-link { max-width: 760px; margin-inline: auto; border-radius: 4px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); border: 0; } @media (max-width: 1000px) { #app .v9-pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { #app .v9-pakete { grid-template-columns: minmax(0, 1fr); } #app .v9-hero { padding: 48px 0 44px; } #app .v9-hero__text { font-size: 16px; } #app .v9 .v7-reiter__knopf:not([aria-current]) .v7-reiter__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ---------- Kosten: heller Kasten unten, so breit wie der Inhalt ---------- */ #app .v9 ~ .v7-kosten, html[data-variante="onepager"] #app .v7-kosten { position: sticky; bottom: 0; left: auto; right: auto; z-index: 40; max-width: 1080px; margin: 0 auto; padding: 0 24px; background: none; box-shadow: none; color: var(--titel); } html[data-variante="onepager"] #app .v7-kosten__leiste { border: 1px solid var(--linie); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fff; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08); } html[data-variante="onepager"] #app .v7-kosten__innen { border: 1px solid var(--linie); border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1); } html[data-variante="onepager"] #app .v7-kosten__details:not(.offen) + .v7-kosten__leiste, html[data-variante="onepager"] #app .v7-kosten__details.offen + .v7-kosten__leiste { border-radius: 0; } html[data-variante="onepager"] #app .v7-kosten__details:not(.offen) + .v7-kosten__leiste { border-radius: 8px 8px 0 0; } html[data-variante="onepager"] #app .v7-kosten__reihe { padding: 4px 20px env(safe-area-inset-bottom); } html[data-variante="onepager"] #app .v7-kosten__zeilen, html[data-variante="onepager"] #app .v7-kz__name { color: var(--titel); } html[data-variante="onepager"] #app .v7-kz__punkt, html[data-variante="onepager"] #app .v7-kz__iv { color: var(--text); } html[data-variante="onepager"] #app .v7-kz.ist-gelb > .v7-kz__chf, html[data-variante="onepager"] #app .v7-kz.ist-gelb > .v7-kz__betrag, html[data-variante="onepager"] #app .v7-kz--total > * { color: var(--petrol); font-weight: 800; } html[data-variante="onepager"] #app .v7-kz--total > * { border-top-color: var(--linie); } html[data-variante="onepager"] #app .v7-kosten__mehr { border-color: var(--rand); color: var(--petrol); } html[data-variante="onepager"] #app .v7-kosten__knopf:hover .v7-kosten__mehr { border-color: var(--petrol); background: var(--petrol-zart); } html[data-variante="onepager"] #app .v7-kosten__knopf:focus-visible { outline-color: var(--petrol); } html[data-variante="onepager"] #app .v7-muenze { background: var(--petrol-zart); } @media (max-width: 600px) { html[data-variante="onepager"] #app .v7-kosten { padding: 0; } html[data-variante="onepager"] #app .v7-kosten__leiste, html[data-variante="onepager"] #app .v7-kosten__innen { border-radius: 0; border-inline: 0; } } /* ---------- Seitenwechsel: der sichtbare Ausschnitt blendet über, die Kostenleiste steht fest ---------- */ html[data-variante="onepager"] #app .v7-kosten { view-transition-name: v7-kosten; } html[data-variante="onepager"]::view-transition-group(v7-kosten) { animation: none; } html[data-variante="onepager"]::view-transition-old(v7-kosten) { display: none; } html[data-variante="onepager"]::view-transition-new(v7-kosten) { animation: none; } html[data-variante="onepager"]:is([data-vt="vor"], [data-vt="zurueck"])::view-transition-old(root) { animation: 200ms linear both v7-ueber-aus; mix-blend-mode: plus-lighter; } html[data-variante="onepager"]:is([data-vt="vor"], [data-vt="zurueck"])::view-transition-new(root) { animation: 200ms linear both v7-ueber-ein; mix-blend-mode: plus-lighter; } html[data-variante="onepager"]:is([data-vt="vor"], [data-vt="zurueck"])::view-transition-image-pair(root) { isolation: isolate; } /* Letzte Seite und Bestätigung: ohne Kostenleiste */ #app .v9.v7-ohne-leiste { --kosten-h: 0px; } /* Gelber Knopf wie auf der Webseite: dunkle Schrift */ #app .v9 .btn--gold { color: var(--c-darker, #183442); } #app .v9 .btn--gold:hover { color: var(--c-darker, #183442); } /* Titel und Text jedes Schritts mittig, wie die Abschnitte der Webseite */ #app .v9 .seite__kopf { text-align: center; } #app .v9 .seite__text { max-width: 640px; margin-inline: auto; } /* Die Karussell-Animation aus «Zweigeteilt» (Karten am Rand halb durchsichtig) gilt hier nicht */ #app .v9 .v7-paket { animation: none !important; opacity: 1; transform: none; } /* Kostenleiste besser lesbar (vorher 12.5 px, am Handy 11.5 px) */ html[data-variante="onepager"] #app .v7-kosten__zeilen { font-size: 14px; } @media (max-width: 640px) { html[data-variante="onepager"] #app .v7-kosten__zeilen { font-size: 13px; } } /* ============================================================ Formular auf der Webseite duebi-moschee.ch (Seite «Mitgliedschaft») ------------------------------------------------------------ Übernimmt Schrift, Farben und Knöpfe der Webseite (css/style.css), ohne diese zu ändern. Alle Regeln des Formulars gelten nur innerhalb von #app (beim Bauen vorangestellt). ============================================================ */ html[data-webseite][data-variante] { /* Schrift der Webseite: Montserrat */ --schrift: var(--font-body); --serif: var(--font-display); --rund: var(--font-display); --schrift-titel: var(--font-display); /* Farben der Webseite */ --petrol: #194a57; --petrol-dunkel: #183442; --gelb: #fedc00; --gelb-dunkel: #e8c800; --titel: #212121; /* Rundungen wie die Knöpfe und Karten der Webseite */ --r: 4px; --r-knopf: 4px; --r-gross: 8px; --hg: #fff; } #app { background: #fff; } /* Die Webseite setzt alle Abstände auf 0 und Links ohne Unterstreichung: im Formular wieder wie gewohnt */ #app a { text-decoration: underline; } #app a:hover { text-decoration: underline; } #app img { display: inline; } #app ul, #app ol { padding-left: 1.4em; } /* Knöpfe wie auf der Webseite: kräftig, gerade Kanten */ #app .knopf { font-weight: 700; letter-spacing: 0; } /* Nur im Mockup */ #app .nur-mockup { display: none !important; } /* Kostenleiste: klebt unten, solange man im Formular ist, und bleibt am Ende des Formulars über der Fusszeile stehen (sticky statt fixed: so deckt sie die Fusszeile nie zu und verschwindet trotzdem nicht). */ #app .v7 { padding-bottom: 0; } #app .v7-main { padding-bottom: 40px; } #app .v7-kosten { /* in V9 in onepager.css genauer */ position: sticky; bottom: 0; left: auto; right: auto; } /* Der aufklappbare Teil der Kostenleiste hat keinen negativen Rand: Am Handy (volle Breite) ragte er sonst 4 px hinaus. */ #app .v7-kosten__details > .klappe__innen { margin-inline: 0; padding-inline: 0; } /* Zwei Kacheln mit langen Wörtern: in schmalen Spalten (Handy, Familienkarten) untereinander */ @container (max-width: 380px) { #app .wahlen--zwei.wahlen--lang { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } } /* Kopf einer Person: «Entfernen» steht immer oben rechts neben dem Namen */ #app .person__kopf { position: relative; padding-right: 96px; } #app .person__weg { position: absolute; top: 1px; right: 0; margin: 0; } @media (max-width: 640px) { /* Am Handy: Name und «Entfernen» in der ersten Zeile, Rolle und Marke darunter über die ganze Breite */ #app .person__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding-right: 0; } #app .person__titel { grid-column: 1; grid-row: 1; } #app .person__weg { position: static; grid-column: 2; grid-row: 1; } #app .person__kopf > .person__rolle, #app .person__kopf > .marke { grid-column: 1 / -1; justify-self: start; } } /* Sehr schmale Spalten (Familienkarte auf kleinem Handy): zwei Kacheln untereinander statt «männlic-h» */ @container (max-width: 300px) { #app .wahlen--zwei { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }