/* 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) 97%, 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 { position: relative; 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: .34; /* Das Muster laeuft fast bis zur Unterkante durch. Es verliert nach unten nur wenig, damit die Sektion nicht ins Schwarze kippt und die Waben bis zum Schluss zu erkennen bleiben. */ -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.7) 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.7) 100%); } :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; } /* Code plus Kopierknopf. Der Knopf steht daneben, nicht darunter, damit die Zeile als eine Einheit gelesen wird. Auf schmalen Schirmen rutscht er um. */ .code-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .copy { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-radius: var(--r); cursor: pointer; background: transparent; border: 1px solid var(--line); color: var(--text-faint); font: 500 .85rem/1 var(--sans); transition: color .15s, border-color .15s, background .15s; } .copy:hover { color: var(--brass); border-color: var(--brass-dim); background: var(--tint-soft); } .copy svg { width: 15px; height: 15px; } .copy.done { color: var(--brass-hi); border-color: var(--brass-dim); } .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); } /* ------------------------------------------------------------- Ornamente */ /* Strichzeichnungen der Orte, an denen gespielt wird. Sie schmuecken die Raender der Sektionen und stehen so schwach, dass sie Kulisse bleiben. Auf schmalen Fenstern ist dafuer kein Platz, dort kommen sie nur in der Reihe ueber dem Fuss vor. */ .orn { display: none; } .band > .wrap { position: relative; z-index: 1; } @media (min-width: 1100px) { .orn { display: block; position: absolute; pointer-events: none; width: clamp(104px, 9.5vw, 158px); } .orn svg { width: 100%; height: auto; fill: none; stroke: var(--brass); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .2; } :root[data-theme="light"] .orn svg { opacity: .22; } /* Ausserhalb der Textspalte, solange das Fenster den Platz hergibt. Wird es enger, ruecken sie an den Seitenrand und liegen dann leicht hinter dem Text, was bei dieser Deckkraft nicht stoert. */ .orn-left { left: max(.75rem, calc(50% - var(--maxw) / 2 - 8.5rem)); } .orn-right { right: max(.75rem, calc(50% - var(--maxw) / 2 - 8.5rem)); } .orn-top { top: clamp(2.5rem, 6vh, 5rem); } .orn-bottom { bottom: clamp(2.5rem, 6vh, 5rem); } } /* Die Reihe auf der Kante zum Fuss. Gleicher Grund wie der Fuss, damit die Zeichnungen auf seiner Oberkante zu stehen scheinen. */ .balustrade { background: #08090a; padding: 2.2rem 0 0; } .balustrade .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 1.2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(211,163,74,.2); } .balustrade svg { width: auto; height: 62px; fill: none; stroke: #d3a34a; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; opacity: .5; } @media (max-width: 700px) { .balustrade { padding-top: 1.8rem; } .balustrade .wrap { gap: .9rem 1rem; justify-content: center; } .balustrade svg { height: 46px; stroke-width: 2.4; } }