/* * stayintouch: die Gaeste-App. * Mobil zuerst, logische CSS-Eigenschaften (Rechts-nach-links spaeter ohne * Umbau), Tippflaechen ab 44 px, sichtbarer Fokus, hell und dunkel nach * Systemeinstellung, reduzierte Bewegung (Konzept Kap. 13.5, WCAG 2.2 AA). * Markenfarben kommen als Variablen am -Element. */ :root { --marke: #0f5e56; --marke-text: #fff; --link: #0f5e56; --akzent: #f2a541; --grund: #f4f5f2; --flaeche: #ffffff; --tinte: #1b2126; --tinte-2: #56606a; --linie: #e3e6e1; --notfall: #c62828; --notfall-grund: #fdecec; --radius: 18px; --schatten: 0 1px 2px rgba(20, 28, 36, 0.06), 0 6px 20px rgba(20, 28, 36, 0.06); color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --grund: #0f1316; --flaeche: #181e22; --tinte: #eef1f3; --tinte-2: #a9b3bb; --linie: #2a3339; --notfall-grund: #3a1414; --notfall: #ff8a80; --link: #8fd3c8; --schatten: none; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } body { margin: 0; font: 16px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinte); background: var(--grund); padding-block-end: calc(76px + env(safe-area-inset-bottom)); } a { color: var(--link); text-underline-offset: 2px; } :focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 6px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sprung { position: absolute; inset-inline-start: -999px; top: 0; background: var(--flaeche); padding: 10px; z-index: 50; } .sprung:focus { inset-inline-start: 10px; } .klein { font-size: 0.86rem; color: var(--tinte-2); margin: 0; } svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ------------------------------------------------------------- Kopf */ .vorschaubalken, .offlinebalken { background: var(--akzent); color: #1b2126; font-size: 0.85rem; font-weight: 600; text-align: center; padding: 6px 12px; } .kopf { background: var(--marke); color: var(--marke-text); padding: 14px 18px 22px; padding-block-start: calc(14px + env(safe-area-inset-top)); border-end-start-radius: 26px; border-end-end-radius: 26px; position: relative; } .kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .marke-name { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; } .sprachwahl select { appearance: none; font: inherit; font-size: 0.9rem; color: var(--marke-text); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; } .sprachwahl select option { color: #1b2126; } .kopf h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); line-height: 1.15; margin: 18px 0 6px; letter-spacing: -0.02em; } .objektname { display: block; font-size: 1rem; font-weight: 500; opacity: 0.9; margin-top: 4px; letter-spacing: 0; } .phase { margin: 10px 0 16px; } .phase strong { display: block; font-size: 1rem; } .phase .klein { color: inherit; opacity: 0.85; } .phase-anreise, .phase-aufenthalt { background: rgba(255,255,255,.14); border-radius: 14px; padding: 10px 14px; } .suche { display: flex; align-items: center; gap: 10px; background: var(--flaeche); color: var(--tinte); border-radius: 14px; padding: 4px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); margin-block-end: -48px; position: relative; z-index: 2; } .suche svg { color: var(--tinte-2); } .suche input { flex: 1; border: 0; background: transparent; font: inherit; color: inherit; min-height: 48px; outline: none; } /* ------------------------------------------------------------- Inhalt */ main { max-width: 720px; margin: 0 auto; padding: 60px 16px 24px; } .willkommen { font-size: 1.05rem; color: var(--tinte-2); margin: 4px 4px 18px; } .wlan-schnell { margin-block-end: 12px; } .kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-block-end: 18px; } .kachel { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-decoration: none; color: var(--tinte); background: var(--flaeche); border-radius: 16px; padding: 14px; box-shadow: var(--schatten); border: 1px solid var(--linie); min-height: 88px; font-weight: 600; } .kachel svg { color: var(--marke); width: 26px; height: 26px; } @media (prefers-color-scheme: dark) { .kachel svg { color: var(--link); } } .kachel.notfall svg { color: var(--notfall); } .hinweis-vorort, .gesperrt { display: flex; gap: 10px; align-items: flex-start; background: var(--flaeche); border: 1px dashed var(--linie); border-radius: 14px; padding: 12px 14px; color: var(--tinte-2); font-size: 0.92rem; margin: 0 0 18px; } .gesperrt p { margin: 0; } .bereich { margin-block-start: 26px; } .bereichstitel { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinte-2); margin: 0 4px 8px; } .thema { margin-block-end: 18px; scroll-margin-top: 90px; } .themenkopf { font-size: 1.3rem; margin: 22px 4px 10px; letter-spacing: -0.01em; } .karte { background: var(--flaeche); border-radius: var(--radius); padding: 16px 18px; margin-block-end: 10px; box-shadow: var(--schatten); border: 1px solid var(--linie); } .karte h3 { font-size: 1.05rem; margin: 0 0 6px; } .karte .rumpf > :last-child { margin-block-end: 0; } .karte p { margin: 0 0 8px; } .karte ul, .karte ol { margin: 0 0 8px; padding-inline-start: 22px; } .schritte { counter-reset: s; list-style: none; padding-inline-start: 0 !important; } .schritte li { counter-increment: s; position: relative; padding-inline-start: 38px; margin-block-end: 10px; min-height: 28px; } .schritte li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--marke); color: var(--marke-text); font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; } .name { font-weight: 700; } .preis { font-weight: 700; color: var(--marke); font-size: 1.1rem; } @media (prefers-color-scheme: dark) { .preis { color: var(--link); } } .zeiten .klein { margin-inline-end: 6px; } .notfall.karte, .karte.notfall { border-inline-start: 5px solid var(--notfall); } .regel.karte { border-inline-start: 5px solid var(--akzent); } .sensibel { border-inline-start: 5px solid var(--marke); } .uebersetzt { font-size: 0.8rem; color: var(--tinte-2); margin: 10px 0 0 !important; font-style: italic; } details.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; min-height: 32px; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary h3 { margin: 0; } details.faq .pfeil { transition: transform 0.2s; } details.faq[open] .pfeil { transform: rotate(90deg); } details.faq .rumpf { margin-top: 10px; } .kopierfeld { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--grund); border-radius: 12px; padding: 10px 12px; margin-block-end: 8px; } .kopierfeld div { min-width: 0; } .kopierfeld .klein { display: block; } .kopierfeld strong { display: block; font-size: 1.05rem; word-break: break-all; font-variant-numeric: tabular-nums; } .kopierfeld.gross strong { font-size: 1.35rem; letter-spacing: 0.04em; } .wlan-schnell .kopierfeld { background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); } .knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--marke); color: var(--marke-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .knopf.leise { background: transparent; color: var(--link); border: 1px solid var(--linie); } .knopf.breit { width: 100%; } .knopf svg { width: 18px; height: 18px; } /* ------------------------------------------------------------ Suche */ .suchergebnis { background: var(--flaeche); border-radius: var(--radius); padding: 14px 16px; margin-block-end: 16px; border: 1px solid var(--linie); } .suchergebnis .keine p { margin: 0 0 10px; } .ki { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 12px; } .ki-hinweis { font-size: 0.8rem; color: var(--tinte-2); background: var(--grund); border-radius: 10px; padding: 8px 10px; } .ki-antwort { font-size: 1rem; margin: 10px 0; } .ki-quellen { margin: 4px 0 0; padding-inline-start: 18px; font-size: 0.9rem; } .versteckt { display: none !important; } mark { background: color-mix(in srgb, var(--akzent) 45%, transparent); color: inherit; border-radius: 3px; } /* ------------------------------------------------------------- Hilfe */ .hilfe-karte { margin-top: 12px; } .notruf { display: flex; align-items: center; justify-content: space-between; background: var(--notfall-grund); color: var(--notfall); border-radius: 14px; padding: 12px 16px; margin-block-end: 12px; font-weight: 700; } .notruf a { color: var(--notfall); font-size: 2rem; font-weight: 800; text-decoration: none; } .fuss { text-align: center; color: var(--tinte-2); margin-top: 36px; font-size: 0.92rem; } .fuss p { margin: 0 0 8px; } .erstellt a { font-weight: 700; } /* ------------------------------------------------------ untere Leiste */ .unten { position: fixed; inset-inline: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--flaeche); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); } .unten a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; text-decoration: none; color: var(--tinte-2); font-size: 0.74rem; font-weight: 600; min-height: 56px; } .unten a[aria-current="true"] { color: var(--marke); } @media (prefers-color-scheme: dark) { .unten a[aria-current="true"] { color: var(--link); } } /* ------------------------------------------------------------ Dialog */ .dialog { border: 0; border-radius: 20px; padding: 0; width: min(560px, calc(100vw - 24px)); background: var(--flaeche); color: var(--tinte); } .dialog::backdrop { background: rgba(10, 14, 18, 0.55); } .dialog form { padding: 20px; display: flex; flex-direction: column; gap: 8px; } .dialog h2 { margin: 0; font-size: 1.2rem; } .dialog label { font-weight: 600; font-size: 0.9rem; margin-top: 6px; } .dialog select, .dialog textarea { font: inherit; color: inherit; background: var(--grund); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; min-height: 44px; } .fehler { color: var(--notfall); margin: 0; } .erfolg { color: #1b7f3a; font-weight: 600; } .meldungsseite main { text-align: center; padding-top: 25vh; } .meldungsseite h1 { font-size: 1.4rem; } @media (min-width: 900px) { .kopf { padding-inline: calc(50vw - 360px + 18px); } .kacheln { grid-template-columns: repeat(5, 1fr); } } @media print { .unten, .suche, .sprachwahl, .knoepfe, .hilfe-karte button, .vorschaubalken { display: none !important; } body { padding: 0; background: #fff; } .kopf { background: #fff; color: #000; border-bottom: 2px solid #000; } }