/* ============================================================================ * coreforall.de — Drei Welten, ein Puls * * Aufbau in vier Schichten, von unten nach oben: * * 1. Werte — Farben, Abstände, Rundungen, Schrift. Als Variablen. * 2. Welten — dieselben Werte, je Welt anders belegt (data-welt). * 3. Grundlage — Rücksetzung, Typografie, Grundelemente. * 4. Bausteine — Kopf, Kacheln, Formulare, Fuß. * * Die Welten sind der Kern (siehe welten.py): Club ist laut und bunt, * House gediegen, Techno roh. Sie unterscheiden sich in Farbe, Rundung * UND Schriftcharakter — eine Themenschicht, die nur die Akzentfarbe * tauscht, merkt niemand. * * Kein Vorverarbeiter, keine Abhängigkeit. Eine Datei, die man lesen kann, * und ein Browser, der sie versteht. Was hier an Wiederholung entsteht, ist * billiger als eine Werkzeugkette, die jemand am Laufen halten muss. * ========================================================================= */ @import url("/statisch/schrift/schrift.css"); /* ── 1. Werte ───────────────────────────────────────────────────────────── * * Die Vorgabe ist ALLE: dunkel, ruhig, mit dem CORE-Verlauf. Sie muss für * sich stehen — die meisten Besucher wählen nie eine Welt. */ :root { color-scheme: dark; /* Flächen */ --grund: #08090C; --grund-2: #0D0F14; --flaeche: #111319; --flaeche-2: #171A22; --rand: rgba(255, 255, 255, .09); --rand-stark: rgba(255, 255, 255, .18); /* Schrift */ --text: #F4F5F7; --text-2: #B9BDC7; --text-3: #7C828F; /* Marke */ --marke: #E5096A; --akzent: #18E0FF; --akzent-2: #6D3BF5; --auf-marke: #FFFFFF; --verlauf: linear-gradient(105deg, var(--marke) 0%, var(--akzent-2) 52%, var(--akzent) 100%); --schein: 0 0 48px -12px color-mix(in srgb, var(--marke) 60%, transparent); /* Zustände */ --ok: #2ECC71; --warn: #F5A524; --gefahr: #F0364A; /* Schrift */ --schrift: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --schrift-titel: "Archivo", var(--schrift); --schrift-schild: var(--schrift-titel); --titel-sperrung: -.025em; --titel-gewicht: 800; /* Maße */ --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --breite: 1240px; --schatten: 0 24px 60px -28px rgba(0, 0, 0, .8); --schatten-klein: 0 2px 12px rgba(0, 0, 0, .45); --weich: cubic-bezier(.22, .61, .36, 1); } /* ── 2. Die drei Welten ───────────────────────────────────────────────── */ /* CLUB — Neon, elektrisch, laut. Rundungen bleiben weich. */ [data-welt="club"] { --grund: #07060C; --grund-2: #0C0A15; --flaeche: #14111F; --flaeche-2: #1B172A; --text: #F7F4FD; --text-2: #CFCBDD; --text-3: #948EAE; --marke: #FF2D9B; --akzent: #18E0FF; --akzent-2: #9A4DFF; --verlauf: linear-gradient(105deg, #FF2D9B 0%, #9A4DFF 50%, #18E0FF 100%); --schein: 0 0 56px -10px rgba(255, 45, 155, .6); } /* HOUSE — Champagner und Smaragd. Kanten schärfer, Schrift ruhiger. * Als einzige Welt hell: Das ist der Punkt — sie soll sich nicht wie * dieselbe Seite in anderer Farbe anfühlen. */ [data-welt="house"] { color-scheme: light; --grund: #ECE7DB; --grund-2: #E3DCCC; --flaeche: #F7F3EA; --flaeche-2: #EFEADC; --rand: rgba(26, 22, 17, .14); --rand-stark: rgba(26, 22, 17, .26); --text: #17140F; --text-2: #40392E; --text-3: #6E6555; --marke: #8A6E3A; --akzent: #1F4D3A; --akzent-2: #B6924E; --auf-marke: #FBF8F0; --verlauf: linear-gradient(105deg, #B6924E 0%, #8A6E3A 52%, #1F4D3A 100%); --schein: 0 0 0 rgba(0, 0, 0, 0); --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-xl: 12px; --titel-sperrung: -.005em; --titel-gewicht: 700; --schatten: 0 30px 70px -34px rgba(60, 46, 20, .38); --schatten-klein: 0 2px 10px rgba(60, 46, 20, .12); } /* TECHNO — roh, industriell, ohne Rundung. Schilder in Maschinenschrift. */ [data-welt="techno"] { --grund: #0B0C0E; --grund-2: #101216; --flaeche: #14171B; --flaeche-2: #1A1E23; --rand: rgba(255, 255, 255, .13); --rand-stark: rgba(255, 255, 255, .26); --text: #EAEAE6; --text-2: #BFC0BB; --text-3: #83878B; --marke: #FF4D00; --akzent: #C6FF00; --akzent-2: #FF4D00; --auf-marke: #0B0C0E; --verlauf: linear-gradient(105deg, #FF4D00 0%, #FF4D00 58%, #C6FF00 100%); --schein: 0 0 0 rgba(0, 0, 0, 0); --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0; --schrift-schild: "Space Mono", ui-monospace, monospace; --titel-sperrung: -.01em; --titel-gewicht: 900; } /* ── 3. Grundlage ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Damit ein Sprungziel nicht unter dem festen Kopf verschwindet. */ scroll-padding-top: 88px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: var(--fs-md); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); letter-spacing: var(--titel-sperrung); line-height: 1.1; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2rem, 5.2vw, 3.75rem); } h2 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); } h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); } p { margin: 0 0 var(--sp-3); text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--text); text-decoration-color: var(--rand-stark); text-underline-offset: .18em; } a:hover { text-decoration-color: currentColor; } /* ``height: auto`` ist hier kein Schönheitswert, sondern der Grund, warum Bilder überhaupt das Seitenverhältnis annehmen, das im Stil steht: Die Attribute ``width``/``height`` im HTML wirken wie eine feste Höhe. Ohne diese Zeile bleibt ein Bild mit ``height="400"`` 400 Pixel hoch, und jedes ``aspect-ratio`` daneben wird schlicht ignoriert — die Teamfotos standen deshalb hochkant statt quadratisch. Die Attribute selbst müssen bleiben: Sie halten den Platz frei, bevor das Bild da ist. */ img, video, svg { max-width: 100%; } img { height: auto; } ul, ol, dl, dd { margin: 0; padding: 0; } :focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; } .wrap { width: min(100% - 2 * var(--sp-4), var(--breite)); margin-inline: auto; } @media (min-width: 720px) { .wrap { width: min(100% - 2 * var(--sp-6), var(--breite)); } } .nur-vorleser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .springen { position: absolute; left: var(--sp-4); top: -100px; z-index: 100; padding: var(--sp-3) var(--sp-4); background: var(--marke); color: var(--auf-marke); border-radius: var(--r-md); font-weight: 600; text-decoration: none; transition: top .18s var(--weich); } .springen:focus { top: var(--sp-4); } /* Verlaufstext — der Markenakzent an genau einem Wort je Überschrift. * Mehr wäre kein Akzent mehr, sondern Dekoration. */ .verlaufstext { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; } .oberzeile { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); } .oberzeile::before { content: ""; width: 22px; height: 2px; background: var(--verlauf); border-radius: 2px; } /* ── Knöpfe ───────────────────────────────────────────────────────────── */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 46px; padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--r-pill); font: inherit; font-weight: 600; font-size: var(--fs-md); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .16s var(--weich), background .16s, border-color .16s, box-shadow .16s; } .knopf:active { transform: translateY(1px); } .knopf-haupt { background: var(--verlauf); color: var(--auf-marke); box-shadow: var(--schein); } .knopf-haupt:hover { filter: brightness(1.08); } .knopf-rand { border-color: var(--rand-stark); color: var(--text); background: transparent; } .knopf-rand:hover { background: var(--flaeche-2); border-color: var(--text-3); } .knopf-leise { color: var(--text-3); background: transparent; padding-inline: var(--sp-3); } .knopf-leise:hover { color: var(--text); } .knopf-gross { min-height: 54px; font-size: var(--fs-lg); padding-inline: var(--sp-6); } .knopf-klein { min-height: 38px; font-size: var(--fs-sm); padding-inline: var(--sp-4); } .knopf[aria-disabled="true"], .knopf:disabled { opacity: .45; pointer-events: none; } /* ── Schilder ─────────────────────────────────────────────────────────── */ .schild { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--sp-3); border-radius: var(--r-pill); background: var(--flaeche-2); border: 1px solid var(--rand); font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .schild-ok, .schild-gut { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .schild-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .schild-gefahr { color: var(--gefahr); border-color: color-mix(in srgb, var(--gefahr) 45%, transparent); } .schild-marke { background: var(--verlauf); color: var(--auf-marke); border-color: transparent; } .schild-punkt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ── 4. Kopfbereich der Seite ─────────────────────────────────────────── */ /* Banner. Ein Banner ist ein Streifen über die ganze Breite. Der Text stand darin bisher linksbündig am Rand der Inhaltsspalte — auf einem breiten Schirm klebt er dann in der linken Ecke und liest sich wie ein vergessener Textrest, nicht wie ein Hinweis. Vorgabe ist deshalb mittig; `links` bleibt für lange Texte, weil zentrierter Flattersatz ab etwa zwei Zeilen schlechter zu lesen ist. */ .banner { padding: var(--sp-3) 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--rand); } .banner-in { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .banner-mitte .banner-in { justify-content: center; text-align: center; } .banner-links .banner-in { justify-content: flex-start; text-align: left; } .banner-text { min-width: 0; } .banner-text strong { font-weight: 650; } /* Die Auszeichnung aus dem Bannertext (fett/unterstrichen/gestrichen). `u` bekommt Abstand zur Grundlinie: Eine Unterstreichung, die die Unterlängen von g und p durchschneidet, sieht nach Fehler aus. */ .banner-text u { text-underline-offset: .18em; text-decoration-thickness: .08em; } .banner-text s { opacity: .7; } .banner-knopf { flex: none; padding: .3rem .8rem; border-radius: 999px; border: 1px solid currentColor; text-decoration: none; font-weight: 600; line-height: 1.5; } .banner-knopf:hover { background: currentColor; } .banner-knopf:hover { color: var(--grund); } /* Bild oder Video im Banner. Feste Höhe, damit beim Nachladen nichts springt — ein Streifen, der nach zwei Sekunden wächst, schiebt die halbe Seite nach unten, und der Besucher klickt daneben. */ .banner-medium { flex: none; height: 2.6rem; } .banner-medium img, .banner-medium video { height: 100%; width: auto; max-width: 12rem; object-fit: cover; border-radius: var(--r-sm, 6px); display: block; } @media (prefers-reduced-motion: reduce) { /* Wer bewegte Bilder abgeschaltet hat, hat sie abgeschaltet. Ein Video, das trotzdem läuft, ist für manche Menschen nicht Geschmackssache. */ .banner-medium video { display: none; } } .banner-hinweis { background: var(--flaeche); } .banner-warnung { background: color-mix(in srgb, var(--warn) 16%, var(--grund)); } .banner-aktion { background: var(--verlauf); color: var(--auf-marke); } /* Sale ist bewusst nicht „Aktion in rot“: Ein Rabattstreifen soll auffallen und trotzdem lesbar bleiben — Weiß auf kräftigem Grund, nicht Farbe auf Farbe. */ .banner-sale { background: var(--marke, #f8189e); color: #fff; border-bottom-color: transparent; } .banner-sale .banner-knopf { border-color: #fff; } .banner-sale .banner-knopf:hover { background: #fff; color: var(--marke, #f8189e); } .kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--grund) 82%, transparent); border-bottom: 1px solid var(--rand); } @supports (backdrop-filter: blur(1px)) { .kopf { backdrop-filter: blur(18px) saturate(160%); } } .kopf-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 68px; } .wm { font-family: var(--schrift-titel); font-weight: 900; font-size: 1.375rem; letter-spacing: -.03em; text-decoration: none; display: inline-flex; align-items: center; } .wm em { font-style: normal; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; } .kopf-rechts { display: flex; align-items: center; gap: var(--sp-2); } .hauptnav { display: flex; align-items: center; gap: var(--sp-1); } /* NACH .hauptnav, sonst gewinnt deren display:flex — gleiche Spezifität, und dann entscheidet die Reihenfolge. Genau daran hing die Hauptnavigation auf dem Telefon quer im Kopf. */ .kopf-mitte { display: none; } .hauptnav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-md); font-weight: 500; color: var(--text-2); text-decoration: none; transition: color .16s, background .16s; } .hauptnav a:hover { color: var(--text); background: var(--flaeche-2); } .hauptnav a[aria-current="page"] { color: var(--text); background: var(--flaeche-2); } .menue-knopf { display: inline-grid; place-items: center; gap: 4px; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--rand-stark); border-radius: var(--r-md); cursor: pointer; } .menue-knopf span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; } .menue { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) 0 var(--sp-5); border-top: 1px solid var(--rand); } /* Ohne diese Zeile bleibt das Menü dauerhaft offen: ``hidden`` setzt nur ``display:none`` aus dem Browser-Grundstil, und jede eigene display-Angabe schlägt das. Der Fehler sieht auf dem Telefon so aus, als sei die Seite kaputt — und er fällt auf einem breiten Schirm nie auf. */ .menue[hidden] { display: none; } .menue a { padding: var(--sp-3); border-radius: var(--r-md); text-decoration: none; color: var(--text-2); } .menue a:hover { background: var(--flaeche-2); color: var(--text); } @media (min-width: 900px) { .kopf-mitte { display: block; } .menue-knopf, .menue { display: none !important; } } /* ── Weltwahl ─────────────────────────────────────────────────────────── */ .weltwahl { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-pill); } .weltwahl a { padding: 6px var(--sp-3); border-radius: var(--r-pill); font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); text-decoration: none; transition: color .16s, background .16s; } .weltwahl a:hover { color: var(--text); } .weltwahl a[aria-current="true"] { background: var(--verlauf); color: var(--auf-marke); } @media (max-width: 719px) { .weltwahl { display: none; } } /* ── Kopfbereich der Startseite ───────────────────────────────────────── */ .kopfbild { position: relative; isolation: isolate; overflow: hidden; min-height: min(78vh, 720px); display: flex; align-items: flex-end; padding: var(--sp-9) 0 var(--sp-7); background: var(--grund-2); } .kopfbild-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .kopfbild-schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--grund) 2%, color-mix(in srgb, var(--grund) 72%, transparent) 42%, color-mix(in srgb, var(--grund) 28%, transparent) 100%), linear-gradient(115deg, color-mix(in srgb, var(--marke) 26%, transparent), transparent 62%); } .kopfbild-inhalt { position: relative; max-width: 40ch; } .kopfbild h1 { margin: var(--sp-4) 0; } .kopfbild-text { color: var(--text-2); font-size: var(--fs-lg); margin-bottom: var(--sp-6); } .kopfbild-wege { display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* Kennzahlen unter dem Kopfbereich — nur echte, gerechnete Werte. */ .kennzahlen { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--rand); } .kennzahl .zahl { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; } .kennzahl .was { font-size: var(--fs-sm); color: var(--text-3); margin-top: 4px; } /* Laufband. Reine Zier — und deshalb aus der Vorlesereihenfolge heraus * und bei „weniger Bewegung“ stillgestellt. */ .laufband { overflow: hidden; border-block: 1px solid var(--rand); background: var(--grund-2); padding: var(--sp-3) 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .laufband-spur { display: flex; gap: var(--sp-6); width: max-content; animation: laufen 34s linear infinite; } .laufband-spur span { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(1.125rem, 2.4vw, 1.625rem); letter-spacing: -.02em; color: var(--text-3); display: inline-flex; align-items: center; gap: var(--sp-6); } .laufband-spur span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marke); } @keyframes laufen { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .laufband-spur { animation: none; } } /* ── Abschnitte ───────────────────────────────────────────────────────── */ .abschnitt { padding: var(--sp-9) 0; } .abschnitt-kopf { max-width: 60ch; margin-bottom: var(--sp-7); } .abschnitt-kopf h1, .abschnitt-kopf h2 { margin: var(--sp-3) 0; } .abschnitt-kopf p { color: var(--text-2); font-size: var(--fs-lg); } /* ── Terminkacheln ────────────────────────────────────────────────────── */ .terminliste { list-style: none; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .termin { min-width: 0; } .termin-flaeche { display: flex; flex-direction: column; height: 100%; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); overflow: hidden; text-decoration: none; transition: transform .2s var(--weich), border-color .2s, box-shadow .2s; } .termin-flaeche:hover { transform: translateY(-4px); border-color: var(--rand-stark); box-shadow: var(--schatten); } .termin-bild { position: relative; aspect-ratio: 3 / 2; background: var(--flaeche-2); } .termin-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Ausnahme von ``img { height: auto }``: Diese Kachel gibt die Höhe vor. */ .termin-bild-leer { position: absolute; inset: 0; background: var(--verlauf); opacity: .18; } .termin-datum { position: absolute; left: var(--sp-4); top: var(--sp-4); display: grid; place-items: center; gap: 0; padding: var(--sp-2) var(--sp-3); min-width: 58px; background: color-mix(in srgb, var(--grund) 78%, transparent); border: 1px solid var(--rand-stark); border-radius: var(--r-md); backdrop-filter: blur(10px); } .td-wochentag { font-family: var(--schrift-schild); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .td-tag { font-family: var(--schrift-titel); font-weight: 900; font-size: 1.5rem; line-height: 1; } .td-monat { font-family: var(--schrift-schild); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .termin-schild { position: absolute; right: var(--sp-4); top: var(--sp-4); } .termin-text { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; } .termin-text h3 { margin: 0; } .termin-zeile { font-size: var(--fs-sm); color: var(--text-3); margin: 0; } .termin-lineup { font-size: var(--fs-sm); color: var(--text-2); margin: 0; } .termin-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--rand); } .termin-preis { font-family: var(--schrift-titel); font-weight: 800; font-size: var(--fs-lg); } .termin-preis small { font-weight: 500; font-size: var(--fs-xs); color: var(--text-3); } /* Verkaufsbalken — die Zahl, die einen Kauf auslöst. Nur wenn wirklich * gemessen: Ein erfundener Balken ist eine Lüge, die sich rechnet, und * genau deshalb macht sie fast jeder. */ .verkaufsbalken { margin-top: var(--sp-3); } .vb-spur { height: 5px; border-radius: var(--r-pill); background: var(--flaeche-2); overflow: hidden; } .vb-spur i { display: block; height: 100%; background: var(--verlauf); border-radius: inherit; } .vb-text { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); } .vb-text b { color: var(--text); } .termin-zu .termin-flaeche { opacity: .62; } .termin-zu .termin-flaeche:hover { transform: none; } /* ── Versprechen der Marke (345.7) ────────────────────────────────────── */ .versprechen-band { border-block: 1px solid var(--rand); background: var(--grund-2); } .versprechen-leiste { display: grid; gap: var(--sp-4); padding: var(--sp-6) 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .versprechen { display: flex; flex-direction: column; gap: 4px; text-decoration: none; padding-left: var(--sp-4); border-left: 2px solid color-mix(in srgb, var(--marke) 55%, transparent); } .versprechen strong { font-family: var(--schrift-titel); font-size: var(--fs-md); } .versprechen span { font-size: var(--fs-sm); color: var(--text-3); } /* ── Ankündigung (leere Startseite, 344.5) ────────────────────────────── */ .ankuendigung { padding: var(--sp-9) 0; } .ank-inhalt { max-width: 56ch; } .ank-inhalt h2 { margin: var(--sp-4) 0; } .ank-text { color: var(--text-2); font-size: var(--fs-lg); margin-bottom: var(--sp-6); } .ank-form { max-width: 420px; } .ank-zustimmung { margin: var(--sp-4) 0; } /* ── Archiv ───────────────────────────────────────────────────────────── */ .archivliste { list-style: none; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .archivliste a { display: block; text-decoration: none; border: 1px solid var(--rand); border-radius: var(--r-lg); overflow: hidden; background: var(--flaeche); transition: border-color .18s; } .archivliste a:hover { border-color: var(--rand-stark); } .archivliste img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .arch-name { display: block; padding: var(--sp-3) var(--sp-4) 0; font-weight: 600; } .arch-datum { display: block; padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); } /* ── Formulare ────────────────────────────────────────────────────────── */ .feld { margin-bottom: var(--sp-4); } .feld label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; } .feld input, .feld select, .kontaktform textarea { width: 100%; padding: 13px var(--sp-4); min-height: 48px; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand-stark); border-radius: var(--r-md); font: inherit; font-size: 16px; /* unter 16px zoomt Safari beim Tippen */ transition: border-color .16s, background .16s; } .feld input:hover, .feld select:hover { border-color: var(--text-3); } .kontaktform textarea { resize: vertical; } .feld-paar { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; } .hilfetext { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-3); } .kasse-zustimmung, .ank-zustimmung { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--text-2); } .kasse-zustimmung input, .ank-zustimmung input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--marke); } /* Nicht display:none — manche Vorlesegeräte lesen solche Felder trotzdem * vor und verwirren damit genau die Menschen, die ohnehin die meiste Mühe * mit Formularen haben. */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── Kaufweg ──────────────────────────────────────────────────────────── */ .kasse { padding: var(--sp-7) 0 var(--sp-9); } .kasse-termin { color: var(--text-2); margin-bottom: var(--sp-6); } .kasse-abbruch { padding: var(--sp-4); margin-bottom: var(--sp-6); background: color-mix(in srgb, var(--warn) 14%, var(--grund)); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--rand)); border-radius: var(--r-md); } /* Der Testmodus-Hinweis trägt NICHT dieselbe Warnfarbe wie ein abgebrochener Bezahlvorgang. Der Abbruch ist ein Zwischenfall, der Testmodus eine Eigenschaft des ganzen Kaufs: Wer ihn übersieht, hält ein Testticket für ein bezahltes und merkt es erst am Einlass. Deshalb volle Fläche, weiße Schrift, eigene Zeile darüber. */ .kasse-test { padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); background: var(--gefahr); color: #fff; border-radius: var(--r-md); line-height: 1.5; } .kasse-test strong { display: block; font-size: var(--fs-lg); margin-bottom: 4px; } .kasse-raster { display: grid; gap: var(--sp-6); } .kasse-form fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-6); } .kasse-form legend { padding: 0; margin-bottom: var(--sp-4); font-family: var(--schrift-titel); font-size: var(--fs-xl); font-weight: var(--titel-gewicht); } .kasse-versprechen { list-style: none; display: grid; gap: var(--sp-2); margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--text-2); } .kasse-versprechen strong { color: var(--text); } .kasse-psp { margin-top: var(--sp-4); } .kasse-rechnung { padding: var(--sp-5); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); align-self: start; } .kasse-rechnung h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); } .kasse-zu { padding: var(--sp-6); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); max-width: 56ch; } .kasse-zu p { margin-bottom: var(--sp-4); } .rechnung { margin: 0 0 var(--sp-4); } .rechnung > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--rand); } .rechnung dt { color: var(--text-2); } .rechnung dd { margin: 0; font-variant-numeric: tabular-nums; } .rechnung-summe { border-bottom: 0 !important; font-weight: 800; font-size: var(--fs-xl); font-family: var(--schrift-titel); } .rechnung-summe dt { color: var(--text) !important; } .zahlwege { margin-top: var(--sp-5); } .zahlwege-titel { margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); } .zahlwege-liste { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); } .zahlwege-liste img { display: block; width: 56px; height: 39px; } .brotkrumen { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-5); } .brotkrumen a { color: var(--text-3); text-decoration: none; } .brotkrumen a:hover { color: var(--text); text-decoration: underline; } .bestellseite { padding: var(--sp-7) 0 var(--sp-9); } .bestellseite .rechnung { margin-top: var(--sp-5); } /* ── Nach dem Bezahlen ──────────────────────────────────────────────── Die Buchungsnummer ist das Einzige, was von dieser Seite mitgenommen wird — sie steht deshalb groß und abgesetzt, nicht als Fettung mitten in einem Satz. Vorher stand sie im Fließtext neben der Adresse, und wer sie abschreiben wollte, musste sie erst suchen. */ .danke { max-width: 46rem; margin-inline: auto; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); overflow: hidden; } .danke-kopf { padding: var(--sp-7) var(--sp-6) var(--sp-5); text-align: center; border-bottom: 1px solid var(--rand); } /* Der Haken ist eine Form und kein Emoji: Emoji werden je nach System verschieden gezeichnet, und eines davon sieht immer nach Spielzeug aus. */ .danke-haken { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-4); border-radius: var(--r-pill); color: #fff; background: var(--ok); } .danke-kopf h1 { font-size: clamp(1.5rem, 3.6vw, 2.125rem); margin-bottom: var(--sp-3); } .danke-text { color: var(--text-2); font-size: var(--fs-lg); margin: 0; } .danke-text strong { color: var(--text); } .danke-nummer { display: grid; gap: var(--sp-1); justify-items: center; text-align: center; padding: var(--sp-5) var(--sp-6); background: color-mix(in srgb, var(--text) 3%, transparent); border-bottom: 1px solid var(--rand); } .danke-nummer-label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } /* Tabellenziffern und weite Laufweite: Diese Nummer wird abgetippt und am Telefon vorgelesen. */ .danke-nummer-wert { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .06em; /* Auswählbar lassen — der häufigste nächste Schritt ist Kopieren. */ user-select: all; } .danke-nummer-hilfe { font-size: var(--fs-sm); color: var(--text-3); } .danke-rechnung { margin: 0; padding: var(--sp-4) var(--sp-6) 0; } /* Abstand nach oben, damit der Hauptknopf nicht wie die letzte Zeile der Rechnung aussieht — er ist der nächste Schritt und nicht ihr Abschluss. */ .danke-wege { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-5) var(--sp-6) var(--sp-6); } .danke-zusatz { padding: var(--sp-4) var(--sp-6); margin: 0; font-size: var(--fs-sm); color: var(--text-3); border-top: 1px solid var(--rand); } @media (max-width: 480px) { .danke-wege .knopf { width: 100%; } } /* ── Hinweisseiten ────────────────────────────────────────────────────── */ .hinweisseite { padding: var(--sp-9) 0; } .hinweis-karte { max-width: 58ch; margin-inline: auto; padding: var(--sp-7); background: var(--flaeche); border: 1px solid var(--rand); border-left: 3px solid var(--rand-stark); border-radius: var(--r-xl); } .hinweis-gut { border-left-color: var(--ok); } .hinweis-schlecht { border-left-color: var(--gefahr); } .hinweis-karte h1 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); margin-bottom: var(--sp-4); } .hinweis-text { color: var(--text); font-size: var(--fs-lg); } .hinweis-zusatz { margin-top: var(--sp-4); color: var(--text-3); font-size: var(--fs-sm); } .hinweis-wege { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); } /* ── Fehlerseite ──────────────────────────────────────────────────────── */ .fehlerseite { padding: var(--sp-9) 0; text-align: center; } .fehlercode { font-family: var(--schrift-titel); font-size: clamp(72px, 18vw, 160px); font-weight: 900; line-height: .9; letter-spacing: -.05em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--sp-4); } .fehlerseite p { color: var(--text-2); max-width: 52ch; margin-inline: auto; } .fehler-wege { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); } /* ── Textseiten ───────────────────────────────────────────────────────── */ .textseite { padding: var(--sp-7) 0 var(--sp-9); } .textseite section { margin-top: var(--sp-7); max-width: 68ch; } .textseite h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); } .textseite p { color: var(--text-2); max-width: 68ch; } .schnellwege { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0; } .fragenblock { margin-top: var(--sp-7); } .fragen dt { font-family: var(--schrift-titel); font-weight: 700; font-size: var(--fs-lg); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--rand); } .fragen dt:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .fragen dd { margin: var(--sp-2) 0 0; color: var(--text-2); max-width: 68ch; } .stufenliste { list-style: none; margin: var(--sp-6) 0 0; counter-reset: stufe; } .stufenliste > li { counter-increment: stufe; position: relative; padding: 0 0 var(--sp-6) var(--sp-8); max-width: 68ch; } .stufenliste > li::before { content: counter(stufe); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--verlauf); color: var(--auf-marke); font-family: var(--schrift-titel); font-weight: 800; font-size: var(--fs-sm); } .stufenliste h2 { margin-bottom: var(--sp-2); } .regelliste { margin: 0 0 var(--sp-3) var(--sp-5); color: var(--text-2); max-width: 68ch; } .regelliste li { margin-bottom: var(--sp-2); } .regelliste strong { color: var(--text); } .textkasten { margin-top: var(--sp-6); padding: var(--sp-6); max-width: 68ch; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); } .textkasten-wichtig { border-left: 3px solid var(--marke); } .textschluss { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--rand); } /* ── Betriebszustand ──────────────────────────────────────────────────── */ .statusliste { list-style: none; margin-top: var(--sp-6); max-width: 68ch; } .statuszeile { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--rand); } .statuspunkt { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; } .statuspunkt.gut { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); } .statuspunkt.schlecht { background: var(--gefahr); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gefahr) 18%, transparent); } .status-titel { font-weight: 600; margin-bottom: 2px; } .status-text { font-size: var(--fs-sm); color: var(--text-3); margin: 0; } .stoerungen { margin-top: var(--sp-5); } .stoerungen .banner { border: 1px solid var(--rand); border-radius: var(--r-md); padding: var(--sp-4); } /* ── Team ─────────────────────────────────────────────────────────────── */ .teamseite { padding: var(--sp-7) 0 var(--sp-9); } .team-bereich { margin-top: var(--sp-7); } .team-bereich h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rand); } .team-raster { list-style: none; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .team-karte { min-width: 0; } .team-bild { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); background: var(--flaeche-2); border: 1px solid var(--rand); margin-bottom: var(--sp-3); } .team-initialen { display: grid; place-items: center; font-family: var(--schrift-titel); font-weight: 900; font-size: clamp(28px, 7vw, 44px); background: var(--verlauf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .team-name { font-weight: 700; margin-bottom: 2px; } .team-rolle { font-size: var(--fs-sm); color: var(--text-3); } .team-satz { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); } .team-schluss { margin-top: var(--sp-8); padding: var(--sp-6); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); max-width: 60ch; } .team-schluss h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); } .team-schluss p { color: var(--text-2); margin-bottom: var(--sp-5); } /* ── Meine Tickets ────────────────────────────────────────────────────── */ .kontoseite { padding: var(--sp-7) 0 var(--sp-9); } .konto-vorspann, .konto-zeile { color: var(--text-2); margin-bottom: var(--sp-6); } /* ── Der Kopf der Bestellung ────────────────────────────────────────── Eine Karte statt einer Überschrift mit Beistrichen: Wer hier landet, will drei Dinge in einem Blick — welche Bestellung, welche Veranstaltung, wie viele Karten — und dann sofort das PDF. Der wichtigste Knopf steht deshalb oben und nicht hinter der Liste. */ .kkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-6); margin-bottom: var(--sp-6); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); } .kkopf-label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-1); } /* Tabellenziffern: Die Buchungsnummer wird abgetippt und vorgelesen. In einer Proportionalschrift stehen 1 und 7 verschieden breit, und beim Vergleichen mit der Mail verrutscht der Blick. */ .kkopf-nummer { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .01em; margin-bottom: var(--sp-2); } .kkopf-zeile { color: var(--text-2); font-size: var(--fs-md); margin: 0; } .kkopf-zeile strong { color: var(--text); font-weight: 650; } .kkopf-wege { display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* ── Eine Karte je Ticket ───────────────────────────────────────────── In ihr steht ALLES zu diesem Ticket: Zustand, Wallet, Wege. Vorher lagen die Wege als eigenes Listenelement darunter und die Wallet-Knöpfe in einem dritten Block weiter unten — bei drei Tickets neun Blöcke, und zu welchem Ticket der fünfte gehörte, musste man abzählen. */ .tkarten { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); } .tkarte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-lg); overflow: hidden; } .tkarte-aus { opacity: .55; } /* Das Schild steht oben, nicht mittig: Lange Titel („Sitzplatz Kat. 1 · Block B, Reihe 7, Platz 112“) brechen auf dem Telefon auf drei Zeilen, und ein mittig gesetztes „Gültig“ steht dann neben der zweiten — es liest sich, als gehöre es zu ihr. */ .tkarte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); } .tkarte-kopf .schild { flex: none; } .tkarte-text { min-width: 0; } .tkarte-titel { font-weight: 650; font-size: var(--fs-lg); } .tkarte-inhaber { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; } /* Wallet-Abzeichen an der Karte, zu der sie gehören. Feste Höhe, Breite automatisch: Apple und Google geben das Seitenverhältnis vor, und ein verzerrtes Abzeichen ist ein Richtlinienverstoß, den man sofort sieht. Kein Rahmen, kein Schatten, keine Umfärbung — die Abzeichen kommen so, wie sie kommen. */ .tkarte-wallet { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; padding: 0 var(--sp-5) var(--sp-5); } .tkarte-wallet img { height: 40px; width: auto; display: block; } /* Die Wege sitzen abgesetzt am Fuß der Karte — sichtbar zugehörig, aber nicht so laut wie der Zustand darüber. */ .tkarte-wege { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-5) var(--sp-4); border-top: 1px solid var(--rand); background: color-mix(in srgb, var(--text) 3%, transparent); } .konto-wallet-hinweis { margin: calc(-1 * var(--sp-3)) 0 var(--sp-6); max-width: 60ch; } .konto-wege { display: grid; gap: var(--sp-5); } .konto-form { padding: var(--sp-6); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); } .konto-form h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); } .konto-form > .hilfetext { margin-bottom: var(--sp-4); } .konto-form .knopf { width: 100%; } .konto-fehler { padding: var(--sp-4); margin-bottom: var(--sp-5); max-width: 60ch; background: color-mix(in srgb, var(--gefahr) 12%, var(--grund)); border: 1px solid color-mix(in srgb, var(--gefahr) 40%, var(--rand)); border-radius: var(--r-md); } .konto-fehler p + p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); } .konto-hilfe { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--rand); max-width: 60ch; } .konto-hilfe h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); } .konto-hilfe p { color: var(--text-2); margin-bottom: var(--sp-3); } /* ── Galerie ──────────────────────────────────────────────────────────── */ .galerieseite { padding: var(--sp-7) 0 var(--sp-9); } .bildraster { list-style: none; margin-top: var(--sp-6); display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .bildkachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-lg); overflow: hidden; } .bildkachel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .bild-text { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); } .bild-name { display: block; margin-top: 4px; color: var(--text-3); } .einsenden { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--rand); max-width: 60ch; } .einsendeform { margin-top: var(--sp-5); } .einsendeform input[type=file] { width: 100%; padding: var(--sp-4); background: var(--flaeche-2); border: 1px dashed var(--rand-stark); border-radius: var(--r-md); font: inherit; font-size: var(--fs-sm); color: var(--text-2); } /* ── Rechtstexte ──────────────────────────────────────────────────────── */ .rechtstext { padding: var(--sp-7) 0 var(--sp-9); max-width: 72ch; } .rechtstext-inhalt { color: var(--text-2); } .rechtstext-inhalt h2, .rechtstext-inhalt h3 { margin: var(--sp-6) 0 var(--sp-3); color: var(--text); } .rechtstext-inhalt ul, .rechtstext-inhalt ol { margin: 0 0 var(--sp-3) var(--sp-5); } .fassung { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-6); } /* ── Fuß ──────────────────────────────────────────────────────────────── */ .fuss { border-top: 1px solid var(--rand); background: var(--grund-2); margin-top: var(--sp-9); } .fuss-in { display: grid; gap: var(--sp-6); padding: var(--sp-8) 0 var(--sp-6); } .fuss-marke { max-width: 34ch; } .fuss-marke p { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--sp-3); } .fuss-gruppe h2 { font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-3); } .fuss-gruppe ul { list-style: none; display: grid; gap: var(--sp-2); } .fuss-gruppe a { color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); } .fuss-gruppe a:hover { color: var(--text); } .fuss-verweis { padding: var(--sp-4) 0; border-top: 1px solid var(--rand); font-size: var(--fs-sm); color: var(--text-3); } .fuss-verweis a { color: var(--text-2); } .fuss-recht { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4) 0 var(--sp-7); border-top: 1px solid var(--rand); font-size: var(--fs-sm); color: var(--text-3); } .fuss-recht a { color: var(--text-3); text-decoration: none; } .fuss-recht a:hover { color: var(--text); } @media (min-width: 760px) { .fuss-in { grid-template-columns: 1.6fr repeat(3, minmax(140px, 1fr)); } .konto-wege { grid-template-columns: 1fr 1fr; } } @media (min-width: 860px) { .kasse-raster { grid-template-columns: 1.6fr 1fr; gap: var(--sp-7); } } @media (min-width: 720px) { .team-raster { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .bildraster { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } /* ── Veranstaltungsseite (345) ──────────────────────────────────────────── * * 345.1: Bild, Titel, Datum, Ort, Alter, Preis und der Kaufknopf sind ohne * Scrollen sichtbar. 345.7: Die Versprechen stehen UNMITTELBAR am Knopf — * dort entsteht die Entscheidung, und dort nimmt die Zusage das Risiko aus * dem Kauf. */ .ev { display: block; } .ev-kopf { position: relative; isolation: isolate; padding: var(--sp-8) 0 var(--sp-7); background: var(--grund-2); border-bottom: 1px solid var(--rand); } .ev-kopf-bild::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--kopfbild); background-size: cover; background-position: center; } .ev-kopf-bild::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--grund) 6%, color-mix(in srgb, var(--grund) 78%, transparent) 55%, color-mix(in srgb, var(--grund) 45%, transparent) 100%); } /* Nicht am Element selbst begrenzen: ``.wrap`` zentriert per ``margin-inline:auto``, und eine Breitenbegrenzung auf derselben Ebene rückt damit den ganzen Kopf in die Mitte — während die Navigation darüber weiterhin die volle Breite nutzt. Das sieht nach Versehen aus, weil es eines ist. */ .ev-kopf-in > * { max-width: 64ch; } .ev-oberzeile { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-3); } .ev-oberzeile a { color: var(--text-3); text-decoration: none; } .ev-oberzeile a:hover { color: var(--text); } .ev-kopf h1 { margin-bottom: var(--sp-6); } .ev-fakten { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .ev-fakten dt { font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; } .ev-fakten dd { margin: 0; font-weight: 600; } .ev-kauf { padding: var(--sp-6); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); box-shadow: var(--schatten); max-width: 52ch; } .ev-kauf > .knopf { width: 100%; } /* Der angenommene Zugangscode (353.2) — über dem Knopf, weil er die Aussage des Knopfes ändert. Darunter läse ihn niemand mehr. */ .ev-vorverkauf { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); border-left: 3px solid var(--akzent); padding-left: var(--sp-4); } .ev-vorverkauf strong { color: var(--text); } .ev-zusagen { list-style: none; display: grid; gap: var(--sp-2); margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--text-2); } .ev-zusagen strong { color: var(--text); } .ev-gebuehr { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); } .ev-warteliste h2, .ev-hinweis h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); } .ev-warteliste p, .ev-hinweis p { color: var(--text-2); margin-bottom: var(--sp-4); } .ev-hinweis-gefahr { border-left: 3px solid var(--gefahr); padding-left: var(--sp-5); } .ev-hinweis-warn { border-left: 3px solid var(--warn); padding-left: var(--sp-5); } .ev-koerper { padding: var(--sp-8) 0; display: grid; gap: var(--sp-8); } .ev-haupt { max-width: 68ch; } .ev-haupt p { color: var(--text-2); } .ev-neben { display: grid; gap: var(--sp-5); align-content: start; } .ev-teilen { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); } .lineup { list-style: none; display: grid; gap: var(--sp-3); } .lineup li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rand); } .act-name { font-family: var(--schrift-titel); font-weight: 700; font-size: var(--fs-lg); } .act-info { font-size: var(--fs-sm); color: var(--text-3); } .act-zeit { font-family: var(--schrift-schild); font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; } .karte { padding: var(--sp-5); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-lg); } .karte h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); } @media (min-width: 940px) { .ev-koerper { grid-template-columns: 1.8fr 1fr; gap: var(--sp-8); } } /* ── Unser Modell ─────────────────────────────────────────────────────── */ .modell-raster { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .modell-karte { padding: var(--sp-6); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); } .modell-karte h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); } .modell-karte p { color: var(--text-2); } .abschnitt-eng { padding: var(--sp-7) 0; max-width: 72ch; } .hinweise { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); } .rechtlicher-hinweis { padding: var(--sp-5); border-left: 3px solid var(--marke); background: var(--flaeche); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2); } .rechtstext-stand { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-6); } .wortmarke { text-decoration: none; color: var(--text); } .kopf-konto { display: none; } @media (min-width: 720px) { .kopf-konto { display: inline-flex; } } /* ── Bildmarke ──────────────────────────────────────────────────────────── * * Sie steht VOR der Wortmarke und ist bewusst klein: Ein Logo, das größer * ist als die Navigation daneben, verschiebt das Gewicht der Seite auf die * Selbstdarstellung. Auf schmalen Bildschirmen bleibt das Zeichen und der * Schriftzug geht — das Zeichen allein ist wiedererkennbar, ein * abgeschnittener Schriftzug nicht. */ .wortmarke { display: inline-flex; align-items: center; gap: var(--sp-3); } .bildmarke { display: block; width: 30px; height: auto; flex: none; } @media (min-width: 720px) { .bildmarke { width: 34px; } } .fuss-marke .wm { display: flex; align-items: center; gap: var(--sp-3); } /* ── Ein kurzes Hallo ───────────────────────────────────────────────────── * * Der Vorhang hebt sich ALLEIN mit CSS. Kein Skript ist beteiligt, und das * ist der ganze Punkt: Ein Vorhang, der auf JavaScript wartet, bleibt * hängen, sobald das Skript nicht lädt — und dann ist die Seite weg. So * verschwindet er auch dann, wenn sonst nichts funktioniert. * * 1,5 s sichtbar, 0,45 s zum Verschwinden. Danach ``visibility: hidden`` * statt nur durchsichtig: Ein unsichtbares Element, das noch da ist, fängt * weiterhin jeden Klick ab — der klassische Fehler bei Ladeschirmen. */ .hallo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--grund); animation: hallo-weg .45s var(--weich) 1.5s forwards; } .hallo-innen { display: grid; justify-items: center; gap: var(--sp-4); animation: hallo-auf .5s var(--weich) both; } .hallo-marke { width: 76px; height: auto; } .hallo-wort { margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); letter-spacing: var(--titel-sperrung); font-size: clamp(1.6rem, 7vw, 2.4rem); background: var(--verlauf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @keyframes hallo-auf { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes hallo-weg { to { opacity: 0; visibility: hidden; } } /* Beim zweiten Aufruf innerhalb derselben Sitzung gar nicht erst zeigen. Ein Gruß, der bei jedem Klick wiederkommt, ist keiner mehr. */ html[data-hallo="gesehen"] .hallo { display: none; } /* Wer weniger Bewegung eingestellt hat, will keinen Vorhang. Nicht abschwächen, sondern weglassen — das ist die Bitte. */ @media (prefers-reduced-motion: reduce) { .hallo { display: none; } } /* ── Kostentransparenz (343.6) ──────────────────────────────────────────── * * Die Tabelle ist breiter als ein Telefon. Sie bekommt deshalb einen * eigenen Scrollbereich, statt die ganze Seite waagerecht schiebbar zu * machen — der häufigste Weg, wie eine Seite auf dem Handy kaputtgeht. */ .kostenblock { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); } .rechnung-breit { width: 100%; min-width: 460px; } .kostenblock > .rechnung-breit { display: table; } .kostenblock { overflow-x: auto; } .rechnung-breit thead th { font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-align: right; padding-bottom: var(--sp-3); } .rechnung-breit thead th:first-child { text-align: left; } .rechnung-breit td, .rechnung-breit tbody th { text-align: right; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-top: 1px solid var(--rand); font-variant-numeric: tabular-nums; } .rechnung-breit tbody th { text-align: left; font-weight: 700; } .rechnung-summe-zelle { font-weight: 700; color: var(--text); } .rechnung-abzug { color: var(--text-3); } .rechnung-minus { color: var(--warn); font-weight: 600; } .kosten-fussnote { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); max-width: 70ch; } .kosten-spalten { display: grid; gap: var(--sp-7); margin-top: var(--sp-7); } .kosten-spalten h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rand); } .postenliste { margin: 0; } .postenliste dt { font-weight: 700; margin-top: var(--sp-4); } .postenliste dt:first-child { margin-top: 0; } .postenliste dd { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-sm); } .kosten-schluss { margin-top: var(--sp-7); padding: var(--sp-5); border-left: 3px solid var(--akzent); background: var(--flaeche); border-radius: var(--r-md); max-width: 70ch; color: var(--text-2); } @media (min-width: 860px) { .kosten-spalten { grid-template-columns: 1fr 1fr; } } /* ── Impressum ────────────────────────────────────────────────────────── */ .angaben { margin: var(--sp-6) 0 var(--sp-7); display: grid; gap: 0; } .angaben dt { font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--rand); } .angaben dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .angaben dd { margin: var(--sp-2) 0 0; font-size: var(--fs-lg); } .angabe-zusatz { font-size: var(--fs-sm); color: var(--text-3); } .rechtstext-zusatz { margin-top: var(--sp-7); } /* ── Chat unten rechts (E-01) ───────────────────────────────────────────── * * Er sitzt in der unteren Ecke und respektiert die Gerätekante * (``env(safe-area-inset-*)``) — sonst liegt er auf einem iPhone unter dem * Balken für die Gestensteuerung und ist nicht zu treffen. * * Auf dem Telefon nimmt das geöffnete Fenster fast den ganzen Bildschirm. * Ein kleines Chatfenster auf einem kleinen Bildschirm ist eine Briefmarke, * in der man tippen soll. */ .chat { position: fixed; z-index: 90; right: max(var(--sp-4), env(safe-area-inset-right)); bottom: max(var(--sp-4), env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); } .chat-knopf { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-pill); background: var(--verlauf); color: var(--auf-marke); font: inherit; font-weight: 700; font-size: var(--fs-md); box-shadow: var(--schatten), var(--schein); cursor: pointer; transition: transform .18s var(--weich); } .chat-knopf:hover { transform: translateY(-2px); } .chat-knopf:active { transform: none; } .chat[data-offen="ja"] .chat-knopf span { display: none; } .chat[data-offen="ja"] .chat-knopf { padding-inline: var(--sp-4); } .chat-fenster { width: min(calc(100vw - 2 * var(--sp-4)), 380px); max-height: min(70vh, 560px); display: flex; flex-direction: column; overflow: hidden; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand-stark); border-radius: var(--r-xl); box-shadow: var(--schatten); animation: chat-auf .22s var(--weich); } @keyframes chat-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .chat-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rand); background: var(--flaeche-2); } .chat-kopf strong { font-family: var(--schrift-titel); font-size: var(--fs-lg); } .chat-warte { font-size: var(--fs-xs); color: var(--text-3); } .chat-beenden, .chat-mensch { border: 1px solid var(--rand-stark); background: transparent; color: var(--text-3); border-radius: var(--r-pill); padding: 6px var(--sp-3); font: inherit; font-size: var(--fs-xs); cursor: pointer; } .chat-beenden:hover, .chat-mensch:hover { color: var(--text); border-color: var(--text-3); } /* Der Weg zum Menschen steht im Kopf und ist der auffälligere der beiden Knöpfe (376.6): Wer ihn erst suchen muss, sucht ihn genau dann, wenn er ohnehin schon verärgert ist. */ .chat-mensch { color: var(--text-2); border-color: var(--text-3); } .chat-mensch[disabled] { opacity: .5; cursor: default; } /* Automatische Auskunft: Quellen und Wege gehören AN die Antwort. Eine Auskunft, die man nicht nachlesen kann, ist eine Behauptung (372.5). */ .chat-quellen { margin: 4px 0 0; padding-inline: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); background: transparent; } .chat-handlungen { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding-inline: var(--sp-2); background: transparent; } /* Die geführten Dialoge stehen über dem Eingabefeld — sie lesen echte Daten und prüfen die Adresse, während der Bot nur aus der Wissensbasis antwortet. Die Regel bleibt führend, also steht sie auch oben. */ .chat-wege-klein { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-2); } .chat-wege-klein:empty { display: none; } .chat-koerper, .chat-form { padding: var(--sp-5); overflow-y: auto; } .chat-koerper p { color: var(--text-2); } .chat-wege { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); } .chat-klein { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--text-3); } .chat-fehler { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--gefahr); } .knopf-breit { width: 100%; } .chat-verlauf { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); overscroll-behavior: contain; } .chat-nachricht { max-width: 85%; } .chat-nachricht p { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--flaeche-2); border-radius: var(--r-lg); font-size: var(--fs-md); overflow-wrap: anywhere; } .chat-von-kunde { align-self: flex-end; } .chat-von-kunde p { background: var(--marke); color: var(--auf-marke); } .chat-von-system { align-self: center; max-width: 100%; } .chat-von-system p { background: transparent; color: var(--text-3); font-size: var(--fs-sm); text-align: center; padding-inline: 0; } .chat-autor { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 3px; padding-inline: var(--sp-2); } .chat-zeit { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; padding-inline: var(--sp-2); } .chat-von-kunde .chat-zeit { text-align: right; } .chat-eingabe { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--rand); background: var(--flaeche-2); } .chat-eingabe input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--sp-4); background: var(--grund); color: var(--text); border: 1px solid var(--rand); border-radius: var(--r-pill); /* 16px, sonst zoomt iOS beim Antippen in das Feld hinein und die ganze Seite steht schief. */ font: inherit; font-size: 16px; } .chat-eingabe input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; } @media (max-width: 559px) { .chat { left: max(var(--sp-3), env(safe-area-inset-left)); align-items: stretch; } .chat-fenster { width: 100%; max-height: 72vh; } .chat-knopf { align-self: flex-end; } } /* ── Handy: was nur beim Messen auffällt ───────────────────────────────── * * Der Reihe nach die Fehler, die auf einem Telefon wirklich weh tun und * auf einem Schirm unsichtbar bleiben: * * 1. Waagerechter Überlauf. Ein einziges zu breites Element macht die * GANZE Seite schiebbar; danach wackelt jeder Wisch. Gefunden wird das * nur, indem man scrollWidth gegen clientWidth misst — hinsehen * genügt nicht, vierzehn Pixel sieht niemand. * 2. Eingabefelder unter 16px. iOS zoomt beim Antippen hinein und die * Seite steht danach schief. * 3. Gerätekanten. Mit ``viewport-fit=cover`` läuft die Seite unter die * abgerundeten Ecken und unter den Balken für die Gestensteuerung. * 4. Zu kleine Ziele. Ein 38-Pixel-Knopf ist mit der Maus präzise und mit * dem Daumen Glückssache. */ /* 1 — KEIN ``overflow-x: hidden`` und kein ``clip``. Das war der erste Versuch, und er hat den Fehler nicht behoben, sondern versteckt: Der Menüknopf lag auf dem Telefon 150 Pixel außerhalb des Bildschirms und war damit unerreichbar — die Messung meldete trotzdem „kein Überlauf“, weil der Deckel ihn wegschnitt. Ein Deckel macht aus einem sichtbaren Fehler einen unsichtbaren. Die Maße darunter müssen stimmen; dann braucht es ihn nicht. */ /* Die Kopfzeile muss schrumpfen dürfen. Ohne ``min-width: 0`` weigern sich Flex-Elemente, unter ihre Inhaltsbreite zu gehen — die Weltwahl schiebt dann den Menüknopf aus dem Bild, und zwar lautlos. */ .kopf-rechts { min-width: 0; } .kopf-rechts .weltwahl { min-width: 0; flex: 0 1 auto; } .menue-knopf { flex: none; } /* 3 — die seitlichen Ränder respektieren die Gerätekante. */ .wrap { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .fuss { padding-bottom: env(safe-area-inset-bottom); } @media (max-width: 719px) { /* Kopfzeile: Marke und Menüknopf, sonst nichts. Alles Weitere steht im Klappmenü — dort ist Platz, oben nicht. */ .kopf-in { gap: var(--sp-3); } .wm { font-size: 1.125rem; } /* 4 — Fingerziele. 44px ist die Größe, ab der ein Daumen zuverlässig trifft; darunter beginnt das Zielen. */ .knopf-klein { min-height: 44px; } .menue a { min-height: 44px; display: flex; align-items: center; } /* Die Weltwahl war unter 720px ausgeblendet — und damit war das stärkste Merkmal der Seite auf dem Gerät weg, auf dem die meisten sie öffnen. Sie steht jetzt als schiebbare Zeile unter dem Kopf. */ .weltwahl { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; padding: 3px; } .weltwahl::-webkit-scrollbar { display: none; } .weltwahl a { white-space: nowrap; min-height: 36px; } .kopfbild { padding-top: var(--sp-7); } .kopfbild-wege { gap: var(--sp-2); } .kopfbild-wege .knopf { flex: 1 1 auto; justify-content: center; } .kennzahlen { gap: var(--sp-5); } /* Abschnittsabstände: auf 96px Luft zwischen zwei Blöcken scrollt man auf einem Telefon spürbar ins Leere. */ .abschnitt { padding-block: var(--sp-7); } .kostenblock { padding: var(--sp-4); } .modell-karte, .ev-kauf { padding: var(--sp-5); } } /* 2 — jedes Eingabefeld mindestens 16px, sonst zoomt iOS. ``max-width`` statt Medienabfrage: Der Wert ist auch auf großen Bildschirmen richtig, dort fällt er nur nicht auf. */ input, select, textarea { font-size: max(16px, var(--fs-md)); } /* Auf Geräten ohne genaue Zeigeeinrichtung sind alle Ziele größer. ``pointer: coarse`` trifft den Finger, nicht die Bildschirmbreite — ein Tablet im Querformat ist breit UND wird angetippt. */ @media (pointer: coarse) { .knopf-klein { min-height: 44px; } .fuss-recht a, .fuss-gruppe a { display: inline-block; padding-block: 6px; } } /* Der Menüeintrag, der die Kopfschaltfläche ersetzt. Abgesetzt, damit er nicht wie ein weiterer Navigationspunkt aussieht. */ .menue-aktion { margin-top: var(--sp-2); padding-top: var(--sp-4) !important; border-top: 1px solid var(--rand); font-weight: 700; color: var(--text) !important; } /* Wege am Ende der Hilfe: sechs Kacheln statt eines Satzes „schreib uns“. Ein einzelner Kontaktweg sammelt alles in einem Postfach und lässt es dort sortieren — die Sortierung macht besser der, der die Frage hat. */ .hilfewege { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .hilfeweg { text-decoration: none; color: inherit; display: block; transition: border-color .18s var(--weich), transform .18s var(--weich); } .hilfeweg:hover { border-color: var(--rand-stark); transform: translateY(-2px); } .hilfeweg h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); } .hilfeweg p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; } /* Honigtopf: für Menschen unsichtbar, für Vorlesegeräte weg, für Bots da. Nicht ``display:none`` — manche Bots überspringen genau das. */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rechnung-anteil { color: var(--text-2); font-weight: 600; } /* ── Wohin ein Ticket geht ──────────────────────────────────────────────── * * Betrag und Balken nebeneinander. Der Balken ist Beiwerk — er macht die * Größenverhältnisse auf einen Blick sichtbar, sagt aber nichts, was nicht * auch als Zahl dasteht. Deshalb ist er für Vorlesegeräte ausgeblendet. * * Die Beträge in Tabellenziffern (``tabular-nums``): Ohne sie stehen die * Kommas nicht untereinander, und eine Kostenaufstellung, deren Spalten * wackeln, sieht nach Schätzung aus. */ .ticketweg { margin-top: var(--sp-7); } .ticketweg h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); } .ticketweg-vorspann { color: var(--text-2); max-width: 68ch; } .ticketkarte { margin-top: var(--sp-5); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-xl); overflow: hidden; } .ticketkarte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--rand); background: var(--flaeche-2); } .ticketkarte-name { font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .ticketkarte-summe { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; } .ticketposten { list-style: none; margin: 0; } .ticketposten li { display: grid; align-items: center; gap: var(--sp-3); grid-template-columns: 1fr auto; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rand); } .ticketposten li:last-child { border-bottom: 0; } .tp-text { display: grid; min-width: 0; } .tp-text strong { font-weight: 600; } .tp-unter { font-size: var(--fs-sm); color: var(--text-3); } .tp-balken { display: none; width: 84px; height: 6px; border-radius: var(--r-pill); background: var(--flaeche-2); overflow: hidden; } .tp-balken i { display: block; height: 100%; background: var(--text); } .tp-betrag { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; text-align: right; } /* Die Gebühr gehört NICHT zum Kartenpreis — sie kommt oben drauf. Deshalb abgesetzt: eigene Fläche, Markenfarbe im Balken. Ohne diese Trennung liest sich die Liste, als wäre die Gebühr ein weiterer Kostenposten des Abends, und genau das ist sie nicht. */ .ticketposten-gebuehr { background: var(--grund-2); } .ticketposten-gebuehr .tp-balken i { background: var(--marke); } .ticketkarte-fuss { margin: 0; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--rand); font-size: var(--fs-sm); color: var(--text-3); } @media (min-width: 620px) { .ticketposten li { grid-template-columns: 1fr 84px auto; } .tp-balken { display: block; } .tp-betrag { min-width: 6.5ch; } } /* Die enthaltene Gebühr steht unter der Summe und kleiner: Sie ist eine Erläuterung des Betrags darüber, kein zweiter Posten. Stünde sie gleichrangig daneben, läse sie sich wie etwas, das dazukommt — genau das Missverständnis, das die Umstellung beseitigen sollte. */ .rechnung-darin dt, .rechnung-darin dd { font-size: var(--fs-sm); color: var(--text-3); font-weight: 400; border-top: 0; padding-top: 2px; } .chat-zeiten { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); } /* Ein Weg, der kein Ziel hat: Der Chat sitzt unten rechts, es gibt keine Seite dafür. Er steht trotzdem in der Liste, weil er sonst niemandem auffällt — aber ohne Zeigefinger, denn es gibt nichts zu klicken. */ .hilfeweg-still { cursor: default; } .hilfeweg-still:hover { border-color: var(--rand); transform: none; } /* ── Reihenseite (353.6) ──────────────────────────────────────────────── Der Kopf folgt der Veranstaltungsseite, damit der Wechsel zwischen beiden nicht wie ein Wechsel zwischen zwei Websites wirkt. Was anders ist, ist der Schwerpunkt: Hier trägt der VERLAUF die Seite, dort der nächste Termin. */ .rh { display: block; } .rh-kopf { position: relative; isolation: isolate; padding: var(--sp-8) 0 var(--sp-7); background: var(--grund-2); border-bottom: 1px solid var(--rand); } .rh-kopf-bild::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--kopfbild); background-size: cover; background-position: center; } .rh-kopf-bild::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--grund) 6%, color-mix(in srgb, var(--grund) 78%, transparent) 55%, color-mix(in srgb, var(--grund) 45%, transparent) 100%); } .rh-kopf-in > * { max-width: 64ch; } .rh-oberzeile { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-3); } .rh-oberzeile a { color: var(--text-3); text-decoration: none; } .rh-oberzeile a:hover { color: var(--text); } .rh-kopf h1 { margin-bottom: var(--sp-4); } .rh-kurz { font-size: var(--fs-lg); color: var(--text-2); margin-bottom: var(--sp-4); } .rh-zahlen { font-size: var(--fs-sm); color: var(--text-3); } .rh-zahlen strong { color: var(--akzent); font-size: var(--fs-md); } .rh-ruht { color: var(--warn); } .rh-koerper { padding: var(--sp-8) 0; display: grid; gap: var(--sp-8); } .rh-block h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); } .rh-text p { max-width: 68ch; color: var(--text-2); margin-bottom: var(--sp-3); } .rh-leer { color: var(--text-3); max-width: 60ch; } .rh-hinweis { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); } .rh-liste { list-style: none; display: grid; gap: var(--sp-2); } .rh-zeile a { display: grid; grid-template-columns: 12rem 1fr auto; gap: var(--sp-4); align-items: baseline; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--rand); border-radius: var(--r-md); text-decoration: none; color: inherit; background: var(--grund-2); } .rh-zeile a:hover { border-color: var(--akzent); } .rh-datum { color: var(--text-3); font-size: var(--fs-sm); } .rh-name { font-weight: 600; } .rh-ort { color: var(--text-3); font-size: var(--fs-sm); } /* Das Archiv ist ruhiger gesetzt als die kommenden Termine — sonst konkurriert eine vierzig Zeilen lange Liste mit dem einen Termin, auf den es ankommt. */ .rh-archiv .rh-zeile a { background: transparent; } @media (max-width: 640px) { .rh-zeile a { grid-template-columns: 1fr; gap: var(--sp-1); } } /* ── Reihenauftritte: corehouse.de, coretechno.de, coreclub.de ────────── * * Diese Adressen bekommen KEINE eigene Stildatei. Ihr Gesicht ist die * Welt, die sie fest tragen (``data-welt`` am Dokument, siehe oben) — * House hell und gediegen, Techno ohne Rundung, Club neon. Was hier * dazukommt, sind die drei Bauteile, die es auf dem Dach so nicht gibt: * die Liste der Reihen, der Verweis auf die eigene Adresse und der * Abschnitt, der zurück aufs Dach führt. * * Drei eigene Dateien wären drei Stände. Der Unterschied zwischen den * Auftritten steckt in den Werten, nicht in den Bauteilen — genau wie bei * den Welten, für die dasselbe seit dem ersten Ausbau gilt. */ .reihe-auftakt { padding-top: var(--sp-8); } .reihe-auftakt .oberzeile { margin-bottom: var(--sp-2); } /* Der nächste Termin steht direkt unter dem Namen und ist ein LINK auf den Abend — nicht nur eine Zeile Text. Er ist der häufigste Grund, warum jemand diese Seite öffnet. */ .reihe-naechster { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); font-size: var(--fs-lg); } .rn-schild { font-family: var(--schrift-schild); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .reihe-naechster a { font-weight: 600; text-decoration-color: var(--akzent); } .reihenliste { list-style: none; display: grid; gap: var(--sp-3); } .reihenliste > li { min-width: 0; } .reihenliste a { display: grid; gap: var(--sp-1); padding: var(--sp-5); border: 1px solid var(--rand); border-radius: var(--r-lg); background: var(--flaeche); text-decoration: none; color: inherit; transition: border-color .18s var(--weich); } .reihenliste a:hover { border-color: var(--akzent); } .rl-titel { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: var(--fs-xl); letter-spacing: var(--titel-sperrung); } .rl-kurz { color: var(--text-2); } .rl-zahlen { font-size: var(--fs-sm); color: var(--text-3); } /* Der Verweis steht UNTER der Kachel und nicht darin: Er führt auf eine andere Domain, und ein zweites Ziel innerhalb derselben Fläche wäre ein Link im Link — anklickbar wäre dann zufällig einer von beiden. */ .rl-auftritt, .rh-auftritt { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); } .rl-auftritt a, .rh-auftritt a { color: var(--akzent); } .dach-hinweis { border-top: 1px solid var(--rand); } .dach-hinweis .abschnitt-kopf { margin-bottom: var(--sp-5); } @media (min-width: 720px) { .reihenliste { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } /* ── Rückmeldung nach der Veranstaltung (353.7) ───────────────────────── Bewusst karg. Wer hier ist, macht uns einen Gefallen — eine Seite mit Verkaufswegen daneben ist die sicherste Art, beim nächsten Mal keine Antwort zu bekommen. */ .rm { padding: var(--sp-8) 0; max-width: 60ch; } .rm h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); } .rm-text { color: var(--text-2); margin-bottom: var(--sp-6); } .rm-form { display: grid; gap: var(--sp-6); } .rm-skala { border: 0; padding: 0; display: grid; gap: var(--sp-2); } .rm-legende { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--sp-2); } /* Volle Breite und untereinander: Auf dem Telefon ist das der Unterschied zwischen „ein Klick“ und „danebengetippt“. */ .rm-stufe { width: 100%; justify-content: flex-start; text-align: left; } .rm-stufe-5, .rm-stufe-4 { border-color: color-mix(in srgb, var(--akzent) 45%, var(--rand)); } .rm-stufe-2, .rm-stufe-1 { border-color: color-mix(in srgb, var(--warn) 45%, var(--rand)); } .rm-freitext { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); } .rm-freitext textarea { width: 100%; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--rand); background: var(--grund-2); color: var(--text); font: inherit; resize: vertical; } .rm-fuss { margin-top: var(--sp-8); font-size: var(--fs-sm); color: var(--text-3); } /* Weitere Bilder einer Veranstaltung. Ein Raster mit fester Kachelhöhe und nicht das freie Fließen der Originalgrößen: Fotos kommen in Hoch- und Querformat durcheinander an, und ein Raster, dessen Zeilen unterschiedlich hoch sind, sieht nach Panne aus. `aspect-ratio` schneidet dafür zu — beim Plakat sichtbar, aber besser als eine zerrissene Seite. */ .ev-galerie { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .ev-galerie figure { margin: 0; } .ev-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; background: var(--flaeche); } .ev-galerie figcaption { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); } /* Selbstbedienung: die Wege je Karte.
und nicht ein Dialog mit Skript — diese Seite ist der Weg für jemanden, dessen Ticket gerade nicht funktioniert, und das ist der schlechteste Moment für eine Seite, die erst etwas nachladen muss. */ .ticket-weg { font-size: var(--fs-sm); } .ticket-weg > summary { cursor: pointer; padding: 6px 0; font-weight: 600; list-style-position: outside; } .ticket-weg[open] > summary { margin-bottom: var(--sp-2); } .ticket-weg form { display: flex; flex-direction: column; gap: var(--sp-2); } .ticket-weg .knopf { align-self: flex-start; } .ticket-grund { opacity: .75; } .feld-paar { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr; } @media (max-width: 480px) { .feld-paar { grid-template-columns: 1fr; } } /* Ein Formular, das wie ein Knopf neben einem Knopf steht. Ohne das bricht das Formularelement die Reihe um. */ .knopf-form { display: inline; } /* Die Neuausstellung entwertet alles, was vorher verschickt wurde. Ein Knopf dieser Wirkung braucht Abstand und eine andere Farbe — direkt neben „PDF herunterladen“ wird er irgendwann versehentlich gedrückt. */ .konto-warnung { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--rand)); background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: var(--r-md); padding: var(--sp-4); } /* ── Wegbeschreibung (19.08.2026) ───────────────────────────────────────── * * Alle Kartendienste stehen im Dokument; hier wird entschieden, welcher * auf welchem Gerät sichtbar ist. `data-system` setzt `auftritt.js`. * * OHNE JavaScript trägt das Dokument kein `data-system` — dann greift nur * die erste Regel: Der `geo:`-Link ist weg (er tut auf einem Rechner * nichts), Google Maps und Apple Karten bleiben. Beide sind Webadressen * und funktionieren überall. Ein Bedienelement, das ohne Skript * verschwindet, hätte hier den ganzen Weg zur Veranstaltung gekostet. */ .wegweiser-titel { display: block; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-2); } /* Oben ausrichten, nicht mittig: Ein Eintrag mit Hinweis darunter ist * höher als einer ohne, und mittig gesetzt stünden die Knöpfe dann auf * verschiedenen Höhen nebeneinander. */ .wegweiser-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; } .wegweiser-hinweis { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-1); } /* Ein Eintrag mit `data-fuer` gilt nur für die genannten Systeme. */ .wegweiser-eintrag[data-fuer="android"] { display: none; } [data-system="android"] .wegweiser-eintrag[data-fuer="android"] { display: block; } .wegweiser-eintrag[data-fuer="apple"] { display: block; } [data-system="android"] .wegweiser-eintrag[data-fuer="apple"], [data-system="windows"] .wegweiser-eintrag[data-fuer="apple"], [data-system="sonstiges"] .wegweiser-eintrag[data-fuer="apple"] { display: none; } /* Reihenfolge: Was das Gerät selbst entscheidet, steht vorn. Auf Android * ist das die eingestellte Karten-App, auf dem iPhone sind es die Karten — * beides ist die Wahl der Person und nicht unsere. */ [data-system="android"] .wegweiser-eintrag[data-fuer="android"] { order: -1; } [data-system="apple-mobil"] .wegweiser-eintrag[data-fuer="apple"] { order: -1; } /* ── Veranstalterzugang (#85) ───────────────────────────────────────────── * * Ein Portal fuer jemanden, der bei uns kein Mitarbeiter ist: die eigenen * Veranstaltungen, der Verkaufsstand von jetzt, die eigenen Abrechnungen. * Bewusst naeher an einem Dokument als an einem Cockpit — wer hier ist, * schaut nach und arbeitet nicht. * * Die Zahlenkacheln sind gross und wenige. Am Veranstaltungsabend wird * diese Seite auf einem Telefon in einem dunklen Backstage gelesen; sechs * kleine Werte nebeneinander liest dort niemand. */ .vp { padding: var(--sp-7) 0 var(--sp-9); } .vp-anmeldung { padding: var(--sp-9) 0; max-width: 46ch; margin-inline: auto; } .vp-anmeldung h1 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); margin-bottom: var(--sp-3); } .vp-text { color: var(--text-2); } .vp-fehler { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--rand-stark); border-left: 3px solid var(--gefahr); background: var(--flaeche); font-size: var(--fs-sm); } .vp-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); } .vp-feld { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); } .vp-feld input { padding: var(--sp-3) var(--sp-4); font: inherit; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: var(--r-md); } .vp-feld input:focus-visible { outline: 2px solid var(--rand-stark); outline-offset: 2px; } .vp-fuss { margin-top: var(--sp-6); color: var(--text-3); font-size: var(--fs-sm); } /* Kopfzeile: Wege links, Abmelden rechts. Umbrechend, weil die Adresse * lang sein kann und auf dem Telefon sonst die Knoepfe hinausschiebt. */ .vp-kopf { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rand); margin-bottom: var(--sp-6); } .vp-nav { display: flex; gap: var(--sp-5); } .vp-abmelden { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; } .vp-wer { color: var(--text-3); font-size: var(--fs-sm); } .vp-liste { display: grid; gap: var(--sp-4); } .vp-karte { display: grid; gap: var(--sp-2); padding: var(--sp-5); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-lg); color: inherit; text-decoration: none; } .vp-karte:hover { border-color: var(--rand-stark); } .vp-karte-kopf { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; } .vp-termin { color: var(--text-3); font-size: var(--fs-sm); } .vp-termin-gross { color: var(--text-2); margin-bottom: var(--sp-6); } .vp-ort, .vp-modell { color: var(--text-3); font-size: var(--fs-sm); } .vp-zahlen { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-2); } .vp-kacheln { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .vp-kachel { display: grid; gap: var(--sp-1); padding: var(--sp-5); background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-lg); } /* Zahlen mit gleichbreiten Ziffern: Sonst springt die Kachel bei jeder * Auffrischung, weil aus 199 eine 200 wird und die Breite wechselt. */ .vp-wert { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .vp-marke { color: var(--text-3); font-size: var(--fs-sm); } .vp-h2 { font-size: 1.15rem; margin-bottom: var(--sp-4); } /* Der Rahmen scrollt, nicht die Seite: Vier Spalten passen auf einem * Telefon nicht, und eine waagerecht scrollende SEITE verliert man. */ .vp-tabelle-rahmen { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--rand); } .vp-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .vp-tabelle th, .vp-tabelle td { padding: var(--sp-3) var(--sp-4); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--rand); } .vp-tabelle th { color: var(--text-3); font-weight: 600; } .vp-tabelle tbody tr:last-child td { border-bottom: 0; } .vp-tabelle td { font-variant-numeric: tabular-nums; } .vp-mono { font-family: var(--schrift-mono, monospace); } .vp-leer { color: var(--text-2); max-width: 60ch; } .vp-zurueck { margin-bottom: var(--sp-4); font-size: var(--fs-sm); } .vp-hinweis { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--flaeche); border: 1px solid var(--rand); border-left: 3px solid var(--rand-stark); border-radius: var(--r-md); max-width: 70ch; } .vp-warnung { border-left-color: var(--gefahr); } .vp-belegtext { margin-top: var(--sp-5); color: var(--text-2); max-width: 70ch; } .vp-stand { color: var(--text-3); font-size: var(--fs-sm); margin-bottom: var(--sp-7); }