/* THE ESCAPE ROOM Hannover — dunkler Rot/Glut-Look mit Schluesselloch-Motiv. Markenrot vom Logo des Kunden uebernommen (#D9202B). Schriften lokal gehostet – kein Google-Fonts-Abruf (DSGVO + Ladezeit). */ @font-face { font-family: 'Bebas'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bebas-400.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-400.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-500.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-600.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-700.woff2') format('woff2'); } :root { --nacht: #08080B; --nacht-2: #0E0E13; --karte: #14141B; --rot: #D9202B; --rot-hell: #FF3B44; --glut: #FF9E2C; --text: #F3F1EE; --text-dim: #CFCBC6; /* gemessen: 4,9:1 ueber dem hellsten Punkt des Hintergrunds */ --linie: rgba(var(--rot-rgb), .28); --linie-weich: rgba(255, 255, 255, .09); --glow-rot: 0 0 16px rgba(var(--rot-rgb), .55), 0 0 44px rgba(var(--rot-rgb), .22); --glow-glut: 0 0 16px rgba(var(--glut-rgb), .5), 0 0 44px rgba(var(--glut-rgb), .2); --head: 'Bebas', 'Haettenschweiler', 'Arial Narrow', sans-serif; --body: 'Barlow', 'Segoe UI', Arial, sans-serif; --breit: 1180px; --rot-rgb: 217, 32, 43; --rot-hell-rgb: 255, 59, 68; --glut-rgb: 255, 158, 44; --dritt-rgb: 140, 45, 200; --rot-dunkel: #A5161F; --glut-dunkel: #D97706; --head-lh: 1.05; --head-ls: .02em; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--body); font-size: 1.07rem; line-height: 1.68; color: var(--text); background: var(--nacht); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--rot-hell); } :focus-visible { outline: 3px solid var(--glut); outline-offset: 3px; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--rot); color: #fff; padding: .7rem 1.2rem; border-radius: 6px; } /* ---------- Animierter Hintergrund: Glut-Orbs + Suchscheinwerfer + Korn ---------- Bewegung bewusst als geschlossene Schleife mit linearem Timing: bei ease-in-out/alternate steht das Bild die meiste Zeit fast still und wirkt tot. */ .bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--nacht); } .bg::after { content: ""; position: absolute; inset: -60%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(var(--rot-rgb), .26) 12deg, rgba(var(--glut-rgb), .14) 24deg, transparent 44deg, transparent 180deg, rgba(var(--rot-rgb), .14) 196deg, transparent 220deg, transparent 360deg); animation: strahler 15s linear infinite; will-change: transform; } @keyframes strahler { to { transform: rotate(360deg); } } .orb { position: absolute; border-radius: 50%; will-change: transform; } .orb-1 { width: 78vw; height: 78vw; top: -30vw; left: -24vw; animation: kreis1 17s linear infinite; background: radial-gradient(circle, rgba(var(--rot-rgb), .54) 0%, rgba(var(--rot-rgb), .21) 42%, transparent 70%); } .orb-2 { width: 66vw; height: 66vw; bottom: -26vw; right: -20vw; animation: kreis2 23s linear infinite; background: radial-gradient(circle, rgba(var(--glut-rgb), .34) 0%, rgba(var(--glut-rgb), .13) 42%, transparent 70%); } .orb-3 { width: 46vw; height: 46vw; top: 36%; left: 44%; animation: kreis3 13s linear infinite; background: radial-gradient(circle, rgba(var(--dritt-rgb), .38) 0%, rgba(var(--dritt-rgb), .13) 42%, transparent 70%); } @keyframes kreis1 { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(13vw, 7vh) scale(1.12); } 50% { transform: translate(6vw, 16vh) scale(1); } 75% { transform: translate(-7vw, 8vh) scale(1.1); } 100% { transform: translate(0, 0) scale(1); } } @keyframes kreis2 { 0% { transform: translate(0, 0) scale(1.05); } 33% { transform: translate(-14vw, -9vh) scale(1); } 66% { transform: translate(-5vw, -18vh) scale(1.14); } 100% { transform: translate(0, 0) scale(1.05); } } @keyframes kreis3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16vw, 11vh) scale(1.2); } 100% { transform: translate(0, 0) scale(1); } } /* Ziehender Dunst – sorgt fuer die Bewegung, die man auch wirklich sieht. Bewusst ueber transform statt background-position: transform laeuft auf dem Compositor, background-position wuerde jedes Bild komplett neu zeichnen. */ .dunst { position: absolute; top: -40%; left: -40%; width: 180%; height: 180%; pointer-events: none; background: radial-gradient(closest-side at 22% 30%, rgba(var(--rot-rgb), .24), transparent 70%), radial-gradient(closest-side at 68% 58%, rgba(var(--glut-rgb), .22), transparent 70%), radial-gradient(closest-side at 45% 82%, rgba(255,255,255,.06), transparent 70%); background-repeat: no-repeat; background-size: 60% 60%, 48% 48%, 34% 34%; animation: dunstzug 21s linear infinite; will-change: transform; } @keyframes dunstzug { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(6vw, -5vh, 0) scale(1.06); } 50% { transform: translate3d(-4vw, -9vh, 0) scale(1.02); } 75% { transform: translate3d(-8vw, 4vh, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } .korn { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; background-image: 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)'/%3E%3C/svg%3E"); } .maus-glow { position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s ease; background: radial-gradient(circle, rgba(var(--rot-hell-rgb), .16) 0%, rgba(var(--rot-rgb), .07) 38%, transparent 68%); } body.glow-an .maus-glow { opacity: 1; } @media (pointer: coarse) { .maus-glow { display: none; } } /* ---------- Aufploppen ---------- */ .pop { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(5px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1), filter .6s ease; } .pop.da { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .orb, .bg::after, .dunst, .puls, .tick { animation: none !important; } .pop { opacity: 1; transform: none; filter: none; transition: none; } html { scroll-behavior: auto; } .maus-glow { display: none; } } /* ---------- Kopfzeile mit Klappmenues ---------- */ .top { position: sticky; top: 0; z-index: 60; background: rgba(8,8,11,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); } .top-inhalt { max-width: var(--breit); margin: 0 auto; padding: .5rem 1.1rem; display: flex; align-items: center; gap: .9rem; } .logo img { height: 44px; width: auto; } .top nav { margin-left: auto; display: flex; gap: .75rem; align-items: center; } .top nav > a:not(.knopf), .klapp-knopf { color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: none; border: 0; font-family: var(--body); cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; padding: .4rem 0; } .top nav > a:not(.knopf):hover, .klapp-knopf:hover, .top nav > a:not(.knopf)[aria-current="page"], .klapp-knopf[aria-current="page"] { color: var(--rot-hell); text-shadow: var(--glow-rot); } .klapp-knopf svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .2s ease; } .klapp-knopf[aria-expanded="true"] svg { transform: rotate(180deg); } .klapp { position: relative; } /* Ohne Luecke zwischen Knopf und Feld: sonst verlaesst der Zeiger auf dem Weg nach unten das Menue und es klappt zu, bevor man etwas anklicken kann. */ .klapp-feld { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 290px; background: rgba(12,12,17,.99); border: 1px solid var(--linie); border-radius: 10px; padding: .5rem; box-shadow: 0 18px 50px rgba(0,0,0,.7); margin-top: .45rem; } /* Unsichtbare Bruecke ueber den Abstand, damit der Zeiger im Menue bleibt. */ .klapp-feld::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; } .klapp-feld[hidden] { display: none; } .klapp-feld ul { list-style: none; display: grid; gap: 1px; } .klapp-feld a { display: block; padding: .5rem .65rem; border-radius: 6px; text-decoration: none; color: var(--text); } .klapp-feld a:hover { background: rgba(255,255,255,.07); } .klapp-feld b { display: block; font-weight: 600; font-size: .93rem; letter-spacing: 0; text-transform: none; } .klapp-feld span { display: block; font-size: .78rem; color: var(--text-dim); margin-top: .05rem; } .klapp-alle { display: block; margin-top: .35rem; padding: .5rem .65rem; border-top: 1px solid var(--linie-weich); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--glut) !important; text-decoration: none; font-weight: 700; } .klapp-alle:hover { color: var(--rot-hell) !important; } .tel-oben { font-size: .9rem !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--text-dim) !important; } .tel-oben:hover { color: var(--glut) !important; text-shadow: none !important; } .menue-knopf { display: none; margin-left: auto; background: none; border: 1px solid var(--linie); color: var(--rot-hell); font-size: 1.5rem; line-height: 1; padding: .3rem .7rem; border-radius: 6px; cursor: pointer; } /* Zwischen 1051 und 1150 px wird die Leiste eng – dort faellt die Nummer weg. Im aufgeklappten Handymenue ist sie dagegen ausdruecklich erwuenscht. */ @media (max-width: 1150px) and (min-width: 1051px) { .top nav .tel-oben { display: none; } } @media (max-width: 1050px) { .top nav .tel-oben { display: block; padding: .85rem .2rem; border-bottom: 1px solid var(--linie-weich); color: var(--glut) !important; font-weight: 700; } } @media (max-width: 1050px) { .menue-knopf { display: block; } .top nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(8,8,11,.99); flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 1.1rem 1.4rem; border-bottom: 1px solid var(--linie); max-height: calc(100vh - 62px); overflow-y: auto; overscroll-behavior: contain; } .top nav.offen { display: flex; } /* Auf dem Handy sind die Gruppen ausklappbar: kurze Liste, ein Tipp öffnet. */ .top nav > a:not(.knopf) { padding: .85rem .2rem; border-bottom: 1px solid var(--linie-weich); } .klapp { position: static; border-bottom: 1px solid var(--linie-weich); } .klapp-knopf { display: flex; width: 100%; justify-content: space-between; padding: .85rem .2rem; font-size: .95rem; } .klapp-knopf svg { width: 18px; height: 18px; } .klapp-feld { position: static; transform: none; min-width: 0; background: none; border: 0; box-shadow: none; padding: 0 0 .5rem .2rem; } .klapp-feld a { padding: .5rem .2rem; border-radius: 0; } .klapp-feld b { font-size: .92rem; } .klapp-feld span { font-size: .76rem; } .klapp-alle { border-top: 0; padding: .5rem .2rem; } .top nav .knopf { margin-top: 1.1rem; text-align: center; } /* Solange das Menü offen ist, hat das Vorschau-Feld nichts zu suchen. */ body.menue-offen .umschalter, body.menue-offen .um-auf { display: none; } } /* ---------- Knöpfe ---------- */ .knopf { display: inline-block; padding: .72rem 1.7rem; border-radius: 4px; font-family: var(--head); font-size: 1.12rem; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; text-align: center; color: #fff; background: linear-gradient(120deg, var(--rot), var(--rot-dunkel)); box-shadow: var(--glow-rot); border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .knopf:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(var(--rot-rgb), .85), 0 0 62px rgba(var(--rot-rgb), .35); } .knopf.glut { background: linear-gradient(120deg, var(--glut), var(--glut-dunkel)); color: #1a1006; box-shadow: var(--glow-glut); } .knopf.glut:hover { box-shadow: 0 0 26px rgba(var(--glut-rgb), .8), 0 0 62px rgba(var(--glut-rgb), .35); } .knopf.leer { background: none; border: 1px solid var(--linie); color: var(--text); box-shadow: none; } .knopf.leer:hover { border-color: var(--rot-hell); color: var(--rot-hell); box-shadow: var(--glow-rot); } .knopf.gross { font-size: 1.32rem; padding: .92rem 2.4rem; } /* ---------- Typografie ---------- */ h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; line-height: var(--head-lh, 1.05); letter-spacing: var(--head-ls, .02em); text-transform: uppercase; } h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); } h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); margin-bottom: .9rem; } h3 { font-size: 1.5rem; margin-bottom: .45rem; } h4 { font-size: 1.2rem; margin-bottom: .3rem; } p + p { margin-top: .85rem; } .rot { color: var(--rot-hell); text-shadow: var(--glow-rot); } .glut-t { color: var(--glut); text-shadow: var(--glow-glut); } .kicker { display: flex; align-items: center; gap: .8rem; font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--glut); margin-bottom: .7rem; } .kicker::before { content: ""; width: 34px; height: 2px; background: var(--rot); box-shadow: var(--glow-rot); flex: none; } .dim { color: var(--text-dim); } .gross-text { font-size: 1.2rem; } /* ---------- Abschnitte ---------- */ main { position: relative; z-index: 1; } section { padding: 4.2rem 1.1rem; } .inhalt { max-width: var(--breit); margin: 0 auto; } .schmal { max-width: 780px; margin: 0 auto; } .dunkel { background: rgba(14,14,19,.72); border-top: 1px solid var(--linie-weich); border-bottom: 1px solid var(--linie-weich); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 84vh; display: flex; align-items: center; padding: 5rem 1.1rem 4rem; overflow: hidden; } .hero-medien { position: absolute; inset: 0; z-index: -1; } .hero-medien video, .hero-medien img { width: 100%; height: 100%; object-fit: cover; object-position: 74% center; } .hero-medien::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,11,.97) 0%, rgba(8,8,11,.93) 38%, rgba(8,8,11,.66) 70%, rgba(8,8,11,.5) 100%), linear-gradient(to top, rgba(8,8,11,.96), transparent 45%); } .hero .inhalt { width: 100%; } .hero-text { max-width: 700px; } .hero h1 { text-shadow: 0 0 26px rgba(var(--rot-rgb), .5), 0 4px 30px rgba(0,0,0,.9); } .hero p.lead { font-size: clamp(1.08rem, 2vw, 1.32rem); color: #e8e4e0; margin-top: 1rem; max-width: 620px; } .hero-knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; } .uhr { display: inline-flex; align-items: baseline; gap: .5rem; font-family: var(--head); font-size: clamp(2.6rem, 7vw, 4.2rem); color: var(--glut); text-shadow: var(--glow-glut); letter-spacing: .06em; } .uhr small { font-family: var(--body); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); text-shadow: none; } .tick { animation: tickt 1s steps(2) infinite; } @keyframes tickt { 50% { opacity: .25; } } /* ---------- Fakten-Streifen ---------- */ .fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--linie-weich); border: 1px solid var(--linie-weich); border-radius: 8px; overflow: hidden; margin-top: 2.4rem; } .fakt { background: rgba(14,14,19,.85); padding: 1.1rem 1.2rem; } .fakt b { display: block; font-family: var(--head); font-size: 2rem; color: var(--rot-hell); line-height: 1; text-shadow: var(--glow-rot); } .fakt span { display: block; font-size: .87rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; margin-top: .35rem; } /* Grid- und Flex-Kinder haben min-width:auto und schrumpfen nicht unter ihre Inhaltsbreite. Eine 504 px breite Tabelle in einer Spalte sprengt damit die ganze Seite: mobiles Safari zoomt heraus, die Schrift wirkt klein und die Kopfleiste reicht nicht mehr ueber die volle Breite. */ .duo > *, .raster > *, .tarife > *, .stimmen > *, .fuss > *, .kontaktzeile > *, .galerie > *, .schritt > *, .top-inhalt > * { min-width: 0; } /* ---------- Karten-Raster ---------- */ .raster { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); } .raster.zwei { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); } .raster.vier { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; } @media (max-width: 520px) { .raster, .raster.zwei { grid-template-columns: 1fr; } } .karte { position: relative; background: var(--karte); border: 1px solid var(--linie-weich); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .karte:hover { transform: translateY(-5px); border-color: var(--linie); box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 30px rgba(var(--rot-rgb), .22); } .karte-bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; } .karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .karte:hover .karte-bild img { transform: scale(1.06); } .karte-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,11,.92), transparent 62%); } .marke { position: absolute; top: .7rem; left: .7rem; z-index: 2; display: inline-block; padding: .2rem .65rem; border-radius: 3px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(var(--rot-rgb), .92); color: #fff; } .marke.grau { background: rgba(255,255,255,.14); color: var(--text); } .marke.glut-m { background: rgba(var(--glut-rgb), .92); color: #1a1006; } .karte-text { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; } /* Karten tragen je nach Seite h2 oder h3 – beide muessen gleich aussehen */ .karte-text h2, .karte-text h3 { font-size: 1.5rem; margin-bottom: .15rem; text-transform: uppercase; } .karte-kicker { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--glut); margin-bottom: .5rem; } .karte-text p { color: var(--text-dim); font-size: .99rem; } .karte-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 1rem; } .pille { font-size: .8rem; padding: .18rem .6rem; border: 1px solid var(--linie-weich); border-radius: 99px; color: var(--text-dim); } .karte-text .knopf { margin-top: auto; } .karte a.abdeckung { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden; } /* ---------- Filterleiste ---------- */ .filter { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.8rem; } .filter button { font-family: var(--body); font-size: .92rem; font-weight: 600; padding: .42rem 1.05rem; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--linie-weich); color: var(--text-dim); cursor: pointer; transition: all .2s ease; } .filter button:hover { color: var(--text); border-color: var(--linie); } .filter button[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); color: #fff; box-shadow: var(--glow-rot); } /* ---------- Preistafeln ---------- */ .tarife { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .tarif { position: relative; background: var(--karte); border: 1px solid var(--linie-weich); border-radius: 10px; padding: 1.9rem 1.6rem; } .tarif.top { border-color: var(--rot); box-shadow: 0 0 34px rgba(var(--rot-rgb), .2); } .tarif .empf { position: absolute; top: -.75rem; left: 1.5rem; background: var(--rot); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .7rem; border-radius: 3px; } .preis { font-family: var(--head); font-size: 3.6rem; line-height: 1; color: var(--text); letter-spacing: .02em; } .preis span { font-size: 1.1rem; font-family: var(--body); color: var(--text-dim); } .tarif h2, .tarif h3 { font-size: 1.5rem; } .tarif ul { list-style: none; margin: 1.2rem 0 1.5rem; } .tarif li { padding-left: 1.5rem; position: relative; margin-bottom: .45rem; color: var(--text-dim); } .tarif li::before { content: "→"; position: absolute; left: 0; color: var(--rot-hell); } /* ---------- Nummerierte Zeilen (Ablauf) ---------- */ .schritte { counter-reset: s; display: grid; gap: 0; } .schritt { counter-increment: s; display: grid; grid-template-columns: 4.2rem 1fr; gap: 1.2rem; align-items: start; padding: 1.5rem 0; border-top: 1px solid var(--linie-weich); } .schritt:last-child { border-bottom: 1px solid var(--linie-weich); } .schritt::before { content: counter(s, decimal-leading-zero); font-family: var(--head); font-size: 2.4rem; color: var(--rot); line-height: 1; text-shadow: var(--glow-rot); } /* ---------- Listen ---------- */ .haken { list-style: none; } .haken li { padding-left: 1.7rem; position: relative; margin-bottom: .55rem; } .haken li::before { content: "✔"; position: absolute; left: 0; color: var(--glut); } /* ---------- Zitate ---------- */ .stimmen { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .stimme { background: var(--karte); border: 1px solid var(--linie-weich); border-left: 3px solid var(--rot); border-radius: 8px; padding: 1.4rem 1.5rem; } .stimme p { font-size: 1rem; } .stimme footer { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie-weich); display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .9rem; color: var(--text-dim); background: none; } .stimme footer .g { width: 17px; height: 17px; flex: none; } .stimme footer b { color: var(--text); font-weight: 600; } .stimme .quelle { margin-left: auto; font-size: .82rem; } .stimme .quelle a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; } .stimme .quelle a:hover { color: var(--rot-hell); } .note .g { width: 18px; height: 18px; flex: none; } .sterne { color: var(--glut); letter-spacing: .12em; margin-bottom: .6rem; } .note { margin-top: 1.1rem; } .note a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--linie-weich); border-radius: 99px; padding: .34rem 1rem; transition: border-color .2s ease; } .note a:hover { border-color: var(--glut); } .note .sterne { margin: 0; font-size: .95rem; } .note strong { font-size: 1.05rem; } .note.klein a { font-size: .95rem; } /* ---------- Info-Box / Warnung ---------- */ .box { background: rgba(var(--rot-rgb), .09); border: 1px solid var(--linie); border-radius: 8px; padding: 1.15rem 1.35rem; margin: 1.6rem 0; } .box.glut-b { background: rgba(var(--glut-rgb), .09); border-color: rgba(var(--glut-rgb), .32); } .box strong { color: var(--glut); } /* ---------- Tabelle ---------- */ .tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 1.6rem 0; } /* Zweispaltige Fakten-Tabellen brauchen keine Mindestbreite – die soll man auf dem Handy lesen koennen, ohne seitlich zu wischen. */ .tab-wrap.schlank table { min-width: 0; } .tab-wrap.schlank th { width: 40%; } table { width: 100%; border-collapse: collapse; min-width: 520px; } th, td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--linie-weich); } th { font-family: var(--head); font-size: 1.1rem; letter-spacing: .04em; color: var(--glut); font-weight: 400; } tbody tr:hover { background: rgba(255,255,255,.03); } /* ---------- Ausklapper (FAQ) ---------- */ details { border-bottom: 1px solid var(--linie-weich); } details summary { cursor: pointer; padding: 1.1rem .5rem 1.1rem 0; font-family: var(--head); font-size: 1.28rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; color: var(--rot-hell); font-size: 1.7rem; line-height: 1; flex: none; transition: transform .2s ease; } details[open] summary::after { transform: rotate(45deg); } details summary:hover { color: var(--rot-hell); } details .antwort { padding: 0 .5rem 1.2rem 0; color: var(--text-dim); } /* ---------- Zweispalter ---------- */ .duo { display: grid; gap: 2.6rem; grid-template-columns: 1fr 1fr; align-items: center; } .duo.schmaler { grid-template-columns: 1.15fr .85fr; } @media (max-width: 860px) { .duo, .duo.schmaler { grid-template-columns: 1fr; gap: 1.8rem; } } .duo img { border-radius: 10px; border: 1px solid var(--linie-weich); } /* ---------- Galerie ---------- */ .galerie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .galerie img { border-radius: 8px; border: 1px solid var(--linie-weich); aspect-ratio: 4/3; object-fit: cover; width: 100%; } /* ---------- Buchungsbereich ---------- */ .buchung { background: var(--karte); border: 1px solid var(--linie-weich); border-radius: 10px; padding: 1.4rem; min-height: 220px; } .buchung-hinweis { color: var(--text-dim); font-size: .95rem; } /* ---------- Karte (laedt Google erst nach Klick) ---------- */ .karte-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--linie-weich); height: 420px; background: var(--karte); margin-top: 1.8rem; } .karte-wrap iframe { width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9); } .karte-fassade { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; cursor: pointer; border: none; color: var(--text); font-family: var(--body); text-align: center; padding: 1.5rem; background: radial-gradient(120% 140% at 50% 0%, rgba(var(--rot-rgb), .16), transparent 62%), var(--karte); transition: background .25s ease; } .karte-fassade:hover { background: radial-gradient(120% 140% at 50% 0%, rgba(var(--rot-rgb), .26), transparent 62%), var(--karte); } .karte-fassade svg { width: 38px; height: 38px; stroke: var(--rot-hell); fill: none; stroke-width: 1.6; filter: drop-shadow(0 0 10px rgba(var(--rot-rgb), .55)); } .karte-fassade b { font-family: var(--head); font-size: 1.45rem; letter-spacing: .03em; text-transform: uppercase; } .karte-fassade small { color: var(--text-dim); font-size: .9rem; max-width: 34ch; line-height: 1.5; } .region-zeile { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; } .region-zeile .lbl { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--glut); font-weight: 700; margin-right: .3rem; } .region-zeile .chip { font-size: .9rem; padding: .22rem .8rem; border-radius: 99px; border: 1px solid var(--linie-weich); color: var(--text-dim); } @media (max-width: 700px) { .karte-wrap { height: 320px; } } /* ---------- Brotkrumen ---------- */ .krumen { max-width: var(--breit); margin: 0 auto; padding: 1rem 1.1rem 0; font-size: .86rem; color: var(--text-dim); } .krumen a { color: var(--text-dim); text-decoration: none; } .krumen a:hover { color: var(--rot-hell); } /* ---------- Kontaktzeile ---------- */ .kontaktzeile { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1.8rem; } .kontaktzeile a { color: var(--text); text-decoration: none; } .kontaktzeile a:hover { color: var(--rot-hell); } /* ---------- Fußzeile ---------- */ /* Nur die Seiten-Fußzeile treffen, nicht jedes