/* Escape Room Berlin / Spandau Dunkel, kinematisch, Messing als einzige Signalfarbe. Keine externen Schriften und keine Frameworks: eine deutsche Seite laedt kein Google Fonts, und ein Buildschritt lohnt fuer diese Menge CSS nicht. */ :root { --ink: #0b0c0d; --ink-2: #111315; --panel: #16191c; --panel-2: #1c2024; --line: #2a2f35; --line-soft: #21262b; --text: #e9e6df; --text-dim: #a8aeb6; --text-faint: #767d86; --brass: #d3a34a; --brass-hi: #f0c470; --brass-dim: #8a6a2c; --seal: #9d2f24; --ok: #6f9c5a; --muted: var(--text-faint); --bad: #d98a7a; --link: var(--brass-hi); --btn-bg: var(--brass); --btn-bg-hi: var(--brass-hi); --btn-fg: #16120a; --hero-top: #101215; --tint-brass: rgba(211,163,74,.15); --tint-brass-soft: rgba(211,163,74,.06); --pp-blue: #0070ba; --pp-navy: #003087; --tint-seal: rgba(157,47,36,.14); --tint-soft: rgba(211,163,74,.06); --grain-op: .05; --shade: rgba(0,0,0,.35); --maxw: 1120px; --pad: clamp(22px, 5vw, 44px); --r: 3px; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* Helles Thema. Dunkel ist die Vorgabe, hell schaltet der Besucher selbst ein; die Wahl steht in localStorage und wird im gesetzt, damit beim Laden nichts aufblitzt. */ :root[data-theme="light"] { --ink: #faf8f4; --ink-2: #f2efe8; --panel: #ffffff; --panel-2: #f6f3ec; --line: #ddd7cb; --line-soft: #e9e4da; --text: #16181a; --text-dim: #4c535b; --text-faint: #79808a; --brass: #8a6a2c; --brass-hi: #6b5120; --brass-dim: #c4b184; --seal: #9d2f24; --ok: #4c7239; --muted: var(--text-faint); --bad: #a33a26; --link: #7a5c22; /* Im hellen Modus traegt der Knopf die Siegelfarbe. Ein dunkelgrauer Knopf ging auf dem warmen Papierton unter, rot springt sofort ins Auge. */ --btn-bg: #9d2f24; --btn-bg-hi: #7d241b; --btn-fg: #fffaf6; --hero-top: #fffdf8; --tint-brass: rgba(138,106,44,.10); --tint-brass-soft: rgba(138,106,44,.05); --pp-blue: #0070ba; --pp-navy: #003087; --tint-seal: rgba(157,47,36,.07); --tint-soft: rgba(138,106,44,.07); --grain-op: .028; --shade: rgba(20,18,14,.10); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--ink); color: var(--text); font: 400 17px/1.65 var(--sans); letter-spacing: .005em; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--text); } h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; } h1 { font-size: clamp(2.6rem, 7.5vw, 5rem); line-height: 1.02; margin: 0; } h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12; margin: 0 0 .5em; } h3 { font-size: 1.22rem; line-height: 1.3; margin: 0 0 .4em; } p { margin: 0 0 1.1em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } .narrow { max-width: 720px; } /* Seiten mit reinem Fliesstext laufen auf derselben Achse wie der Rest der Seite; nur die Zeilenlaenge des Absatzes wird begrenzt, nicht die Spalte. */ .legal p, .legal li { max-width: 80ch; } /* Kleines Versalien-Label ueber jeder Ueberschrift, das Aktenmappen-Motiv */ .kicker { font: 600 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin: 0 0 1.1rem; display: flex; align-items: center; gap: .8rem; } .kicker::after { content: ""; flex: 1; height: 1px; max-width: 90px; background: linear-gradient(90deg, var(--brass-dim), transparent); } .kicker.center { justify-content: center; } .kicker.center::before { content: ""; flex: 1; height: 1px; max-width: 90px; background: linear-gradient(270deg, var(--brass-dim), transparent); } .lead { font-size: 1.15rem; color: var(--text-dim); max-width: 62ch; } .muted { color: var(--text-faint); font-size: .92rem; } /* ------------------------------------------------------------------ Kopf */ /* Die Leiste laeuft ueber die volle Breite, ihr Inhalt steht auf derselben Achse wie der Seiteninhalt. */ .top { position: sticky; top: 0; z-index: 100; padding: .8rem 0; background: color-mix(in srgb, var(--ink) 84%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line-soft); } .top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wordmark { font: 500 clamp(1.12rem, 1.6vw, 1.3rem)/1 var(--serif); letter-spacing: .005em; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: .6rem; } .wordmark { gap: 0; } .top nav { display: flex; align-items: center; gap: 1.3rem; } /* Umschalter hell/dunkel. Sitzt in der Leiste und bleibt auch auf dem Handy. */ .top nav a { font: 500 .9rem/1 var(--sans); color: var(--text-dim); text-decoration: none; } .top nav a:hover { color: var(--text); } /* Der Knopf in der Leiste ist ein , .top nav a ist spezifischer als .btn und hat ihm sonst die graue Schrift verpasst. */ .top nav a.btn { color: var(--btn-fg); font-weight: 600; } .top nav a.btn:hover { color: var(--btn-fg); } @media (max-width: 720px) { .top nav a:not(.btn) { display: none; } } /* --------------------------------------------------------------- Buttons */ .btn { --bg: var(--btn-bg); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.6rem; background: var(--bg); color: var(--btn-fg); font: 600 .96rem/1 var(--sans); letter-spacing: .01em; border: 1px solid var(--bg); border-radius: var(--r); text-decoration: none; cursor: pointer; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset; } .btn:hover { background: var(--btn-bg-hi); border-color: var(--btn-bg-hi); color: var(--btn-fg); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn.ghost { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; } .btn.ghost:hover { border-color: var(--brass-dim); color: var(--brass); background: var(--tint-soft); } .btn.small { padding: .6rem 1.05rem; font-size: .86rem; } .btn.block { width: 100%; } .btn[disabled] { opacity: .45; pointer-events: none; } .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.6rem; } /* ------------------------------------------------------------------ Hero */ .hero { position: relative; isolation: isolate; padding: clamp(6rem, 17vh, 10.5rem) 0 clamp(4.5rem, 10vh, 7rem); border-bottom: 1px solid var(--line-soft); background: radial-gradient(120% 90% at 78% 8%, var(--tint-brass), transparent 58%), linear-gradient(180deg, var(--hero-top) 0%, var(--ink) 72%); } /* Optionales Foto, sobald es eins gibt: --hero-image im style-Attribut setzen */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--hero-image, none); background-size: cover; background-position: center; opacity: .3; filter: grayscale(.55) contrast(1.1); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: var(--grain-op); mix-blend-mode: overlay; } .hero .wrap { position: relative; } .hero h1 { max-width: 19ch; } /* Sechseckraster ueber dem Verlauf. Eine Kachel, die sich wiederholt, nach unten und nach rechts ausgeblendet, damit sie Kulisse bleibt. */ .hero.hexed::before { background-image: url("hexnet.svg"); background-repeat: repeat; /* Bewusst grob: eine Kachel deckt gut die vierfache Flaeche der ersten Fassung ab und wirkt dadurch ruhiger und teurer. Die Linie ist in der Kachel entsprechend duenner gezeichnet. */ background-size: 760px 494px; background-position: center top; opacity: .5; filter: none; -webkit-mask-image: radial-gradient(86% 92% at 76% 32%, #000 0%, rgba(0,0,0,.45) 52%, transparent 80%); mask-image: radial-gradient(86% 92% at 76% 32%, #000 0%, rgba(0,0,0,.45) 52%, transparent 80%); } :root[data-theme="light"] .hero.hexed::before { opacity: .62; } /* Zwei Spalten, sobald Platz ist: Text links, Wappen rechts. */ .hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); } } /* Markenname ueber dem Falltitel, gross genug, um als Absender zu gelten */ .hero-brand { font: 600 clamp(1.05rem, 2.2vw, 1.5rem)/1.1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 .55rem; } /* Der Falltitel traegt die Seite, darum groesser und mit mehr Gewicht als die uebrigen Ueberschriften. */ /* Kleiner als in der ersten Fassung, damit ein Falltitel wie "Der leere Turm" in eine Zeile passt und der Hero nicht in Stufen zerfaellt. */ .hero h1.big { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; letter-spacing: -.026em; line-height: 1.02; max-width: 20ch; } .hero .hero-text .claim { max-width: 40ch; } /* ------------------------------------------------------------- Wappen */ /* ------------------------------------------------------------ Bildplatte Nachgestellte Aufnahme im Stil von 1914. Die Bilder liegen in Graustufen, die Waermung passiert hier, damit sie zum Messing der Marke passen. */ .plate { margin: 0; display: grid; justify-items: stretch; } .plate-frame { position: relative; border: 1px solid var(--brass-dim); padding: 8px; background: var(--ink-2); box-shadow: 0 24px 60px rgba(0,0,0,.45); } .plate-frame::after { /* Innenkante, damit die Platte nicht wie ein nackter Bildrahmen wirkt. */ content: ""; position: absolute; inset: 8px; border: 1px solid rgba(211,163,74,.28); pointer-events: none; } .plate-frame img { display: block; width: 100%; height: auto; filter: sepia(.16) contrast(1.06) brightness(.98); } :root[data-theme="light"] .plate-frame { background: var(--panel); } :root[data-theme="light"] .plate-frame img { filter: sepia(.1) contrast(1.03); } .plate figcaption { margin: .9rem 0 0; font: 400 .86rem/1.5 var(--sans); color: var(--text-faint); } @media (max-width: 899px) { .plate { max-width: 420px; } } /* Der Fall: Text und Bild nebeneinander, das Bild laeuft mit. */ .story-grid { display: grid; gap: clamp(2rem, 5vw, 3.4rem); grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .story-grid { grid-template-columns: minmax(0, 1.55fr) minmax(220px, .45fr); align-items: start; } .plate.sticky { position: sticky; top: 5.5rem; } } .plate.small .plate-frame { padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.35); } .plate.small .plate-frame::after { inset: 6px; } /* Ganzflaechiges Bildband zwischen zwei Textbaendern. Es bricht die Folge aus dunklen und grauen Flaechen auf, ohne eine eigene Spalte zu brauchen. */ .shot { position: relative; isolation: isolate; overflow: hidden; } .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: sepia(.18) contrast(1.05) brightness(.62); z-index: -2; } .shot::after { /* Lesbarkeit von links, damit der Text nicht im Bild verschwindet. */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ink) 4%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.34)); } .shot-in { padding: clamp(4.5rem, 12vw, 8rem) 0; } .shot-in h2 { margin: .3rem 0 1rem; } .shot-in .lead { max-width: 46ch; } .shot-in .kicker, .shot-in h2, .shot-in .lead { color: #f3efe6; } .shot-cap { margin-top: 2rem; font-size: .86rem; color: rgba(243,239,230,.6); } .hero .claim { font-family: var(--serif); font-size: clamp(1.2rem, 2.6vw, 1.65rem); color: var(--text-dim); max-width: 46ch; margin-top: 1.8rem; line-height: 1.45; } .hero .hook { font-family: var(--mono); font-size: .84rem; letter-spacing: .02em; color: var(--brass); margin-top: 2.4rem; padding-left: .9rem; border-left: 2px solid var(--brass-dim); max-width: 46ch; } /* Faktenleiste unter dem Hero */ .facts { list-style: none; margin: 3.8rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line-soft); } .facts li { background: var(--ink-2); padding: 1.35rem 1.4rem; } .facts strong { display: block; font: 400 1.3rem/1.2 var(--serif); color: var(--text); } .facts span { display: block; margin-top: .3rem; font: 500 .74rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } /* ---------------------------------------------------------------- Baender */ .band { padding: clamp(6rem, 15vh, 10.5rem) 0; border-bottom: 1px solid var(--line-soft); } .band.alt { background: var(--ink-2); } .band.dark { background: #08090a; } /* Waben auch weiter unten, damit der Hero nicht der einzige Ort bleibt, an dem das Muster vorkommt. Schwaecher als oben und nach unten ausgeblendet. */ .band.hexed { position: relative; isolation: isolate; overflow: hidden; } .band.hexed::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("hexnet.svg"); background-repeat: repeat; background-size: 760px 494px; background-position: center -60px; opacity: .32; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 92%); } :root[data-theme="light"] .band.hexed::before { opacity: .45; } /* Story: grosser Serifentext, wie ein Vorspann */ .story p { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.42rem); line-height: 1.62; color: var(--text); max-width: 68ch; } .story .signature { font-family: var(--mono); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-top: 2rem; } /* Schritte */ .steps { list-style: none; counter-reset: s; margin: 3.6rem 0 0; padding: 0; display: grid; gap: 2.4rem 1.8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .steps li { counter-increment: s; padding-top: 1.6rem; border-top: 1px solid var(--line); position: relative; } .steps li::before { content: counter(s, decimal-leading-zero); font: 500 .76rem/1 var(--mono); letter-spacing: .12em; color: var(--brass); position: absolute; top: -.62rem; left: 0; background: var(--ink); padding-right: .7rem; } .band.alt .steps li::before { background: var(--ink-2); } .steps p { color: var(--text-dim); font-size: .97rem; margin: 0; } /* Ablauf in vier Schritten, versetzt: 1 und 3 links, 2 und 4 rechts. Die senkrechte Messinglinie in der Mitte haelt die Folge zusammen. */ .flow { list-style: none; margin: 3.4rem 0 0; padding: 0; display: grid; gap: 1.4rem; } .flow-item { display: grid; gap: 1.1rem; align-items: start; grid-template-columns: auto minmax(0, 1fr); } .flow-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.6rem; } /* Die Ziffer sitzt gross in einem Kreis mittig an der Kante, die zur Mittellinie zeigt. Der Text bleibt immer linksbuendig, das liest sich leichter als Flattersatz von rechts. */ .flow-n { position: absolute; top: 50%; right: 1.1rem; transform: translateY(-50%); width: 66px; height: 66px; border-radius: 50%; display: grid; place-content: center; background: var(--ink); box-shadow: inset 0 0 0 1px var(--brass-dim); font: 400 1.75rem/1 var(--serif); color: var(--brass); } .flow-card h3 { margin: 0 0 .4rem; font: 400 1.22rem/1.25 var(--serif); } @media (max-width: 819px) { .flow-card { padding-right: 5.4rem; } .flow-n { width: 54px; height: 54px; font-size: 1.45rem; right: .8rem; } } .flow-card p { margin: 0; color: var(--text-dim); font-size: .96rem; } .flow-card p + p { margin-top: .5rem; } .flow-mark { width: 92px; aspect-ratio: .866; flex: 0 0 auto; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(180deg, rgba(211,163,74,.14), var(--ink-2) 70%); border: 0; display: grid; place-content: center; box-shadow: inset 0 0 0 1px var(--brass-dim); } .flow-mark svg { width: 42px; height: 42px; fill: none; stroke: var(--brass); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; } /* Flaechen im Symbol duerfen Messing sein, nur die Kontur bleibt Linie. */ .flow-mark svg .fill { fill: var(--brass); fill-opacity: .18; stroke: none; } @media (min-width: 820px) { .flow { gap: 0; position: relative; } .flow::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--line), transparent); } .flow-item { grid-template-columns: 1fr auto 1fr; gap: 0; padding: 0 0 2.2rem; align-items: center; } /* Beide Kinder ausdruecklich in Zeile eins. Ohne das rutscht die Karte der ungeraden Schritte eine Zeile nach unten, weil Spalte 1 hinter dem Platzierungs-Cursor der Wabe in Spalte 2 liegt. */ .flow-item > * { grid-row: 1; } .flow-item .flow-mark { grid-column: 2; margin: 0 1.9rem; } .flow-item .flow-card { grid-column: 1; } .flow-item:nth-child(even) .flow-card { grid-column: 3; } /* Kreis auf der jeweils inneren Kante, Platz dafuer im Padding. */ .flow-item .flow-card { padding-right: 6.4rem; } .flow-item:nth-child(even) .flow-card { padding-right: 1.6rem; padding-left: 6.4rem; } .flow-item:nth-child(even) .flow-n { right: auto; left: 1.1rem; } .flow-item:nth-child(even) { direction: ltr; } .flow-item:last-child { padding-bottom: 0; } } /* Zwischenueberschrift innerhalb eines Bandes */ .sub { margin: 3rem 0 0; font: 400 1.28rem/1.3 var(--serif); color: var(--text); } /* Packliste: kurze Zeilen mit Messingpunkt, nichts weiter */ .pack { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; } .pack li { position: relative; padding-left: 1.5rem; color: var(--text); font-size: .98rem; } .pack li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 8px; background: var(--brass); opacity: .75; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } /* Nummerierte Fassung derselben Liste: Ziffer in Messing statt Wabe. Der Zaehler steht selbst da, damit die Ziffer die Serifenschrift bekommt. */ .pack.num { counter-reset: pack; } .pack.num li { padding-left: 2rem; counter-increment: pack; font-weight: 500; } .pack.num li::before { content: counter(pack); position: absolute; left: 0; top: 0; width: auto; height: auto; background: none; clip-path: none; opacity: 1; font: 600 1rem/1.65 var(--serif); color: var(--brass); } /* Karten, fuer Bezirke und Stationen */ .cards { list-style: none; margin: 3.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card { background: var(--panel); border: 1px solid var(--line); padding: 1.5rem; border-radius: var(--r); display: flex; flex-direction: column; gap: .5rem; transition: border-color .16s ease, transform .16s ease; } .card:hover { border-color: var(--brass-dim); transform: translateY(-2px); } .card p { color: var(--text-dim); font-size: .95rem; margin: 0; } .card .card-meta { font: 500 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 0; } .card .card-link { margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: .93rem; } .card.muted-card { opacity: .6; } .card.muted-card:hover { transform: none; border-color: var(--line); } /* Stationenliste, spoilerfrei */ .stations { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .stations li { counter-increment: st; padding: 1.15rem 1.2rem; border: 1px solid var(--line-soft); margin: -1px 0 0 -1px; display: flex; gap: .9rem; align-items: baseline; } .stations { counter-reset: st; } .stations li::before { content: counter(st, decimal-leading-zero); font: 500 .74rem/1 var(--mono); color: var(--brass-dim); flex: 0 0 auto; } .stations b { font-weight: 500; font-size: .97rem; } .stations em { display: block; font-style: normal; color: var(--text-faint); font-size: .83rem; } /* FAQ */ .faq { margin: 3rem 0 0; } .faq details { border-bottom: 1px solid var(--line-soft); padding: 1.35rem 0; } .faq summary { padding-block: .25rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--brass); font: 400 1.3rem/1 var(--sans); } .faq details[open] summary::after { content: "\2212"; } .faq p { color: var(--text-dim); margin: .8rem 0 0; max-width: 68ch; font-size: .98rem; } /* Hinweiskasten */ .note { border: 1px solid var(--line); border-left: 2px solid var(--brass-dim); background: var(--panel); padding: 1.2rem 1.4rem; border-radius: var(--r); margin-top: 1.8rem; } .note p:last-child { margin-bottom: 0; } .note.warn { border-left-color: var(--seal); } /* ---------------------------------------------------------------- Kaufen */ .buy { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.6rem, 4vw, 2.4rem); max-width: 560px; } .persons { display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0; } .persons button { width: 42px; height: 42px; flex: 0 0 42px; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: var(--r); font: 400 1.4rem/1 var(--sans); cursor: pointer; } .persons button:hover { border-color: var(--brass-dim); color: var(--brass-hi); } .persons output { font: 400 1.6rem/1 var(--serif); min-width: 5.5ch; text-align: center; } .price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; } .price-line .total { font: 400 2rem/1 var(--serif); color: var(--text); } .price-line .per { font-size: .88rem; color: var(--text-faint); } label { display: block; font: 500 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .5rem; } input[type=email], input[type=text] { width: 100%; padding: .85rem 1rem; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); font: 400 1rem/1.3 var(--sans); } input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } .field { margin-bottom: 1.2rem; } input.mono { font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; } .small { font-size: .85rem; } .code { font: 500 1.5rem/1.3 var(--mono); letter-spacing: .12em; color: var(--brass-hi); background: var(--ink); border: 1px dashed var(--brass-dim); padding: 1rem 1.2rem; border-radius: var(--r); display: inline-block; } .error { border-left: 2px solid var(--seal); background: rgba(157,47,36,.1); padding: .9rem 1.1rem; margin-bottom: 1.2rem; font-size: .95rem; } /* ------------------------------------------------------------------- Fuss */ .foot { padding: 4rem 0 4.5rem; font-size: .9rem; background: #08090a; color: #9aa0a8; } .foot .wrap { display: grid; gap: 1.6rem; } .foot a { color: #d6d2c9; } .foot a:hover { color: #ffffff; } .foot .brandline, .foot strong { color: #efece5; } .foot .muted, .foot .copyright { color: #8b9199; } .foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; } .foot .brandline { font-family: var(--serif); font-size: 1.05rem; } /* ---------------------------------------------------------------- Sonstig */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .tag { display: inline-block; font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--brass-dim); border-radius: 100px; padding: .42rem .8rem; } .tag.soon { color: var(--text-faint); border-color: var(--line); } /* ------------------------------------------------------------------ Karte */ /* Erst eine selbst gezeichnete Vorschau, damit sofort etwas steht. Die echte Karte mit OpenStreetMap-Kacheln laedt direkt danach und ersetzt sie. */ .map { /* isolation macht die Karte zu einem eigenen Stapelkontext. Leaflet vergibt seinen Panes z-index bis 1000; ohne das legen sie sich ueber die Kopfleiste, sobald man scrollt. */ position: relative; z-index: 0; isolation: isolate; margin: 3.2rem 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); } .map > svg { display: block; width: 100%; height: auto; } .map .grid { stroke: var(--line-soft); stroke-width: 1; } .map .route { fill: var(--tint-soft); stroke: var(--brass); stroke-width: 2.4; stroke-dasharray: 8 7; stroke-linejoin: round; } .map .pin circle { fill: var(--panel); stroke: var(--brass); stroke-width: 1.6; } .map .pin.first circle, .map .pin.peak circle { fill: var(--brass); stroke: var(--brass); } .map .pin text { fill: var(--text); font: 600 10.5px var(--sans); text-anchor: middle; dominant-baseline: central; } .map .pin.first text, .map .pin.peak text { fill: var(--btn-fg); } .map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; padding: .95rem 1.15rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--text-faint); } .map-foot b { color: var(--text-dim); font-weight: 500; } .map-credit { font-size: .8rem; } .map-credit a { color: inherit; text-decoration: underline; } .map-live { height: min(70vh, 480px); background: var(--ink-2); } .map-live .leaflet-container { background: var(--ink-2); } /* Zoomknoepfe im Stil der Seite statt im Leaflet-Weiss */ .map-live .leaflet-control-zoom { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.28); margin: 14px; } .map-live .leaflet-control-zoom a { width: 34px; height: 34px; line-height: 32px; background: var(--panel); color: var(--text); border-bottom: 1px solid var(--line); font-weight: 400; } .map-live .leaflet-control-zoom a:last-child { border-bottom: 0; } .map-live .leaflet-control-zoom a:hover { background: var(--ink-2); color: var(--brass); } .map-live .leaflet-control-zoom a.leaflet-disabled { opacity: .45; } /* --------------------------------------------------------------- Bezahlen */ .summary { display: grid; gap: .55rem; margin: 0 0 2rem; padding: 1.15rem 1.3rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); } .summary .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; } .summary .row.total { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .5rem; align-items: baseline; font: 400 1.05rem/1.2 var(--sans); color: var(--text); } /* Der Betrag ist die wichtigste Zahl der Seite, deshalb steht er gross hier und nicht klein in jeder einzelnen Zahlwegkarte. */ .summary .row.total span:last-child { font: 400 clamp(2rem, 5vw, 2.7rem)/1 var(--serif); color: var(--text); } .summary .row.total span:first-child { color: var(--text-dim); } .summary .row span:first-child { color: var(--text-faint); } /* Drei Zahlwege nebeneinander, wie beim Speech-Generator: Karte, PayPal, Ueberweisung. Karte und PayPal liefern sofort, die Ueberweisung klappt ihre Bankdaten unter den Karten aus. */ .pay-head { margin: 0 0 1.2rem; font: 400 1.24rem/1.3 var(--serif); color: var(--text); } .pay { display: grid; gap: 1.1rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); align-items: stretch; } .pay-card { position: relative; display: flex; flex-direction: column; gap: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.4rem 1.4rem; } /* Empfohlen: Messingrand statt farbiger Flaeche, damit die Seite ruhig bleibt */ .pay-card.hot { border-color: var(--brass-dim); } .pay-card.slow { border-style: dashed; } /* PayPal tritt in seinen eigenen Farben auf, das erkennen Leute schneller als eine Messingkarte mit PayPal-Text. */ .pay-card.pp { border-color: var(--pp-blue); } .pay-card.pp .pay-ico { stroke: var(--pp-blue); } .pay-card.pp .pay-badge { color: var(--pp-blue); border-color: var(--pp-blue); } .pay-card.pp .pay-list li::before { background: var(--pp-blue); } .pay-card.pp .btn { background: var(--pp-blue); border-color: var(--pp-blue); color: #fff; box-shadow: none; } .pay-card.pp .btn:hover { background: var(--pp-navy); border-color: var(--pp-navy); } .pay-card h3 { margin: 0; font: 400 1.32rem/1.2 var(--serif); } .pay-card p { margin: 0; font-size: .89rem; color: var(--text-dim); } .pay-card form { margin: 0; display: contents; } .pay-card .btn { margin-top: auto; } .pay-ico { width: 30px; height: 30px; display: block; fill: none; stroke: var(--brass); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .pay-card.slow .pay-ico { stroke: var(--text-faint); } .pay-badge { position: absolute; top: -.62rem; right: 1rem; font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); background: var(--ink); border: 1px solid var(--brass-dim); padding: .34rem .5rem; border-radius: 100px; } .pay-badge.slow { color: var(--text-faint); border-color: var(--line); } .pay-price { margin: 0; font: 400 1.85rem/1 var(--serif); color: var(--text); } .pay-price s { font-size: 1rem; color: var(--text-faint); margin-right: .5rem; } .pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; } .pay-list li { font-size: .86rem; color: var(--text-dim); padding-left: 1rem; position: relative; } .pay-list li::before { content: ""; position: absolute; left: 0; top: .52em; width: 5px; height: 5px; background: var(--brass-dim); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .pay-card.slow .pay-list li::before { background: var(--line); } .pay-brands { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; } .pay-brands li { width: 42px; height: 27px; border-radius: 4px; background: #fff; border: 1px solid rgba(0,0,0,.12); display: grid; place-content: center; } .pay-brands svg { display: block; height: 15px; width: auto; } .pay-hint { margin: 1.1rem 0 0; font-size: .86rem; color: var(--text-faint); max-width: 64ch; } .linkish { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--brass); text-decoration: underline; text-underline-offset: 3px; } .linkish:hover { color: var(--text); } .bank { margin: 1.6rem 0 0; position: relative; } .bank-zu { position: absolute; top: 1.1rem; right: 1.2rem; font-size: .84rem; } .bank dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.4rem; margin: 0; font-size: .94rem; } .bank dt { font: 500 .74rem/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .bank dd { margin: 0; font-family: var(--mono); font-size: .92rem; color: var(--text); } .bank dd.plain { font-family: var(--sans); } .map-num { display: grid; place-items: center; box-sizing: border-box; background: var(--brass); color: #16120a; border-radius: 50%; font: 700 11px/1 var(--sans); border: 2px solid #16120a; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); } .map-num b { display: block; transform: translateY(.5px); } /* Themenschalter: Kippschalter in der Navigation. */ .themeswitch { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; } .themeswitch .track { position: relative; display: inline-flex; align-items: center; width: 52px; height: 28px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); transition: background .18s ease, border-color .18s ease; } .themeswitch:hover .track { border-color: var(--brass); } .themeswitch:focus-visible .track { outline: 2px solid var(--brass); outline-offset: 2px; } .themeswitch .ic { position: absolute; font-size: 13px; line-height: 1; color: var(--muted); transition: color .18s ease; } .themeswitch .moon { left: 7px; } .themeswitch .sun { right: 7px; } .themeswitch .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--brass); transition: transform .18s ease; } .themeswitch[aria-checked="true"] .knob { transform: translateX(24px); } .themeswitch[aria-checked="false"] .moon { color: #16120a; } .themeswitch[aria-checked="true"] .sun { color: #fdfaf3; } .copyright { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .82rem; } /* Rechtstexte. Laufender Text, keine Karten. */ .legal h2 { font-size: 1.15rem; margin: 2.6rem 0 .8rem; color: var(--text); letter-spacing: .01em; } .legal h2:first-child { margin-top: 0; } .legal p, .legal li { color: var(--muted); line-height: 1.75; } .legal p { margin: 0 0 1rem; } .legal ul { margin: 0 0 1rem; padding-left: 1.2rem; } .legal li { margin-bottom: .4rem; } .legal a { color: var(--link); } .legal .box { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.2rem 1.35rem; color: var(--text); } .legal code { font-family: var(--mono, ui-monospace, monospace); font-size: .9em; background: var(--tint-soft); padding: .1em .35em; border-radius: 2px; } /* Leaflet. Die Zoomknoepfe bleiben, die eingeblendete Attribution mit ihrer Flagge nicht. Der Hinweis auf OpenStreetMap steht als Text unter der Karte, das erfuellt die Lizenz. */ .map .leaflet-control-attribution { display: none; } .leaflet-attribution-flag { display: none !important; } /* Chat-Demo auf der Verkaufsseite. Nur Schau, kein echter Zustand. */ .chatdemo { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .chatdemo-head { display: flex; align-items: center; gap: .55rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); font: 500 .82rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); } .chatdemo-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); } .chatdemo-body { display: grid; align-content: end; gap: .6rem; padding: 1.1rem; /* Feste Hoehe, damit der Kasten beim Einlaufen der Zeilen nicht springt. */ min-height: 19rem; max-height: 19rem; overflow: hidden; scroll-behavior: smooth; } .chatdemo .msg { margin: 0; max-width: 86%; padding: .65rem .85rem; border-radius: 12px; font-size: .9rem; line-height: 1.5; animation: chatin .5s ease both; } .chatdemo .msg.them { background: var(--panel); border: 1px solid var(--line-soft); color: var(--text-dim); border-bottom-left-radius: 3px; } .chatdemo .msg.you { justify-self: end; background: var(--brass); color: var(--btn-fg); border-bottom-right-radius: 3px; } /* Die Reihenfolge macht das Skript in city.html, nicht mehr nth-child. */ .chatdemo .msg.hid { display: none; } .chatdemo .msg.typing { display: flex; gap: 5px; padding: .8rem .85rem; } .chatdemo .msg.typing.hid { display: none; } .chatdemo .msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: chatdot 1.2s infinite ease-in-out; } .chatdemo .msg.typing span:nth-child(2) { animation-delay: .18s; } .chatdemo .msg.typing span:nth-child(3) { animation-delay: .36s; } @keyframes chatin { from { opacity: 0; transform: translateY(6px); } } @keyframes chatdot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .chatdemo .msg, .chatdemo .msg.typing span { animation: none; } } /* Formularfehler auf Deutsch, serverseitig und im Browser dieselbe Meldung. */ .field-error { margin: .45rem 0 0; font-size: .86rem; color: var(--bad, #d98a7a); } .buy input.bad, .buy select.bad { border-color: var(--bad, #d98a7a); } /* Gruppenseite: Auswahl und Rechner. */ .choice { border: 0; padding: 0; margin: 0 0 1.6rem; } .choice legend { padding: 0; margin-bottom: .8rem; font: 500 .78rem/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .choice .opt { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; padding: 1rem 1.1rem; margin-bottom: .7rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s ease; } .choice .opt:has(input:checked) { border-color: var(--brass); } .choice .opt input { margin-top: .25rem; accent-color: var(--brass); } .choice .opt b { display: block; font-weight: 600; } .choice .opt em { display: block; margin-top: .25rem; font-style: normal; font-size: .86rem; color: var(--text-faint); line-height: 1.5; } .calc { display: grid; gap: .5rem; margin: 0 0 1.6rem; padding: 1.1rem 1.25rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); } .calc .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; } .calc .row span { color: var(--text-faint); } .calc .row.total { border-top: 1px solid var(--line); padding-top: .55rem; margin-top: .25rem; } .calc .row.total b { font: 400 1.3rem/1.2 var(--serif); color: var(--text); } .codes { display: grid; gap: .8rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .codecard { display: grid; gap: .3rem; padding: 1rem 1.15rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); } .codecard.locked { border-style: dashed; } .codecard .lbl { font: 500 .72rem/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .codecard b { font-size: 1.08rem; letter-spacing: .04em; color: var(--text); } .codecard em { font-style: normal; font-size: .82rem; color: var(--text-faint); }