@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("../schriften/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("../schriften/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #060609; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.035em; line-height: 1.02; }
p { margin: 0; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.farbwahl { position: absolute; opacity: 0; pointer-events: none; }

.seite { --acc: #4f8cff; --acc2: #a66bff; --bg: #060609; --txt: #f3f4f8; --txt2: #a3a6b3; --txt3: #6b6f7d; --trenn: rgba(255, 255, 255, .08);
  --insel: rgba(18, 18, 26, .55); --kante: rgba(255, 255, 255, .12); --verlauf: linear-gradient(120deg, var(--acc), var(--acc2));
  --schatten: 0 20px 60px -20px rgba(0, 0, 0, .8); --r: 24px;
  position: relative; isolation: isolate; min-height: 100vh; background: var(--bg); color: var(--txt); font: 400 .95rem/1.65 "Inter", system-ui, sans-serif; letter-spacing: -.008em; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
#farbe-nacht:checked ~ .seite { --acc: #4f8cff; --acc2: #a66bff; }
#farbe-gold:checked ~ .seite { --acc: #d6b777; --acc2: #eba47c; }
#farbe-lila:checked ~ .seite { --acc: #b27bff; --acc2: #ff5fa8; }
#farbe-rosa:checked ~ .seite { --acc: #ff5b92; --acc2: #ffa052; }
#farbe-rot:checked ~ .seite { --acc: #ff5a52; --acc2: #ffa640; }
#farbe-orange:checked ~ .seite { --acc: #ff9a2e; --acc2: #ffd84a; }
#farbe-eis:checked ~ .seite { --acc: #4f8cff; --acc2: #2fd2f0; }
#farbe-graphit:checked ~ .seite { --acc: #b4b7c0; --acc2: #7d818d; }

/* Nordlicht: große weiche Farbflächen, die langsam wandern */
.nordlicht { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.nordlicht i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5; mix-blend-mode: screen; }
.nordlicht i:nth-child(1) { left: -20vmax; top: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 70%, transparent), transparent); animation: wandern1 26s ease-in-out infinite alternate; }
.nordlicht i:nth-child(2) { right: -25vmax; top: -10vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc2) 65%, transparent), transparent); animation: wandern2 32s ease-in-out infinite alternate; }
.nordlicht i:nth-child(3) { left: 10vmax; bottom: -40vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 45%, var(--acc2)), transparent); opacity: .3; animation: wandern3 38s ease-in-out infinite alternate; }
.nordlicht::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, transparent 30%, var(--bg) 80%); }
@keyframes wandern1 { to { transform: translate(30vmax, 18vmax) scale(1.2); } }
@keyframes wandern2 { to { transform: translate(-25vmax, 25vmax) scale(.9); } }
@keyframes wandern3 { to { transform: translate(20vmax, -20vmax) scale(1.15); } }

.huelle { width: min(100% - 32px, 1180px); margin: 0 auto; }
.insel { background: var(--insel); border: 1px solid var(--kante); border-radius: var(--r); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: var(--schatten), inset 0 1px 0 rgba(255, 255, 255, .08); }
.verlauf { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--kante); background: rgba(255, 255, 255, .05); font-size: .74rem; color: var(--txt2); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verlauf); box-shadow: 0 0 10px var(--acc); }
.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--verlauf); color: #fff; text-decoration: none; font-weight: 600; font-size: .86rem; border: 0; cursor: pointer; font-family: inherit;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--acc) 70%, transparent); transition: transform .2s, box-shadow .2s; }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px color-mix(in srgb, var(--acc2) 80%, transparent); }
.knopf.glas { background: rgba(255, 255, 255, .07); border: 1px solid var(--kante); box-shadow: none; }
.knopf.glas:hover { background: rgba(255, 255, 255, .12); }

/* Schwebende Navigationsinsel */
.kopf { position: sticky; top: 14px; z-index: 30; margin: 14px auto 0; width: min(100% - 32px, 1180px); }
.kopf .insel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 999px; }
.kopf .marke { display: flex; align-items: center; gap: 10px; font-weight: 650; text-decoration: none; letter-spacing: -.02em; }
.kopf .marke img { width: 42px; }
.kopf nav { display: flex; gap: 4px; }
.kopf nav a { padding: 8px 14px; border-radius: 999px; font-size: .84rem; text-decoration: none; color: var(--txt2); }
.kopf nav a:hover { background: rgba(255, 255, 255, .08); color: var(--txt); }
.kopf .knopf { padding: 10px 18px; }
.kopf details { display: none; }

/* Titel */
.titel { padding: 90px 0 60px; }
.titel .huelle { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 50px; align-items: center; }
.titel h1 { font-size: clamp(3rem, 7vw, 5.8rem); margin: 22px 0 20px; }
.titel p { color: var(--txt2); font-size: 1.05rem; max-width: 44ch; margin-bottom: 30px; }
.titel .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.titel .foto { padding: 10px; transform: rotate(2deg); }
.titel .foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.titel .schild { position: absolute; left: -26px; bottom: 34px; padding: 14px 18px; border-radius: 18px; transform: rotate(-4deg); font-size: .8rem; }
.titel .schild b { display: block; font-size: 1.3rem; letter-spacing: -.02em; }
.titel .rechts { position: relative; }

/* Buchungsinsel */
.buchen { padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 30px; max-width: 560px; }
.buchen .knopf { grid-column: span 2; justify-content: center; padding: 14px; }
.buchen label { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--trenn); min-width: 0; cursor: pointer; }
.buchen label span { font-size: .7rem; color: var(--txt3); display: flex; align-items: center; gap: 6px; }
.buchen input, .buchen select { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--txt); font: 600 1.05rem "Inter", sans-serif; outline: none; color-scheme: dark; }
.buchen select option { background: #14141c; }
.buchen .knopf { border-radius: 16px; }

/* Bento-Raster */
.abschnitt { padding: 70px 0; }
.kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; flex-wrap: wrap; }
.kopfzeile h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-top: 14px; }
.kopfzeile p { color: var(--txt2); max-width: 44ch; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; }
.kachel { position: relative; overflow: hidden; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; text-decoration: none; min-width: 0; transition: transform .25s, border-color .25s; }
.kachel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
.kachel.b2 { grid-column: span 2; } .kachel.h2 { grid-row: span 2; }
.kachel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.kachel.foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(6, 6, 9, .85)); }
.kachel .etikett { position: absolute; top: 16px; left: 16px; }
.kachel h3 { font-size: 1.5rem; }
.kachel p { font-size: .84rem; color: var(--txt2); }
.kachel .wert { font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.kachel .icon.gross { width: 2rem; height: 2rem; color: var(--acc); margin-bottom: auto; }
.zeiten { display: grid; gap: 6px; font-size: .84rem; margin-top: auto; }
.zeiten div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--trenn); }
.zeiten b { font-weight: 600; } .zeiten span { color: var(--txt2); }

/* Reihen */
.reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.reihe .text { padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.reihe .text h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 14px 0 16px; }
.reihe .text p { color: var(--txt2); margin-bottom: 14px; }
.reihe .bild { padding: 10px; } .reihe .bild img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 16px; }
.liste { display: grid; gap: 8px; margin: 10px 0 24px; }
.liste div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: .86rem; }
.liste b { font-weight: 600; white-space: nowrap; }
.zitat { padding: 44px; display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: center; }
.zitat img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08), 0 0 50px -10px var(--acc); }
.zitat blockquote { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.zitat cite { display: block; margin-top: 16px; font-style: normal; font-size: .84rem; color: var(--txt2); }
.kontakt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kontakt > div { padding: 26px; }
.kontakt h3 { font-size: 1.1rem; margin: 12px 0 8px; } .kontakt .icon { width: 1.6rem; height: 1.6rem; color: var(--acc); }
.kontakt p { color: var(--txt2); font-size: .88rem; } .kontakt a { color: var(--txt); text-decoration: none; } .kontakt a:hover { color: var(--acc); }

/* Fuß mit Farbwahl */
.fuss { padding: 30px 0 30px; }
.fuss .insel { padding: 26px; display: grid; gap: 22px; }
.farben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.farben > span { font-size: .84rem; color: var(--txt2); }
.farben div { display: flex; flex-wrap: wrap; gap: 10px; }
.farben label { position: relative; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--f1), var(--f2)); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); transition: transform .2s, box-shadow .3s; }
.farben label:hover { transform: scale(1.12); }
.farben label span { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); white-space: nowrap; font-size: .7rem; padding: 4px 8px; border-radius: 8px; background: #14141c; border: 1px solid var(--kante); color: var(--txt2); opacity: 0; pointer-events: none; transition: opacity .2s; }
.farben label:hover span { opacity: 1; }
#farbe-nacht:checked ~ .seite .farben label[for="farbe-nacht"],
#farbe-gold:checked ~ .seite .farben label[for="farbe-gold"],
#farbe-lila:checked ~ .seite .farben label[for="farbe-lila"],
#farbe-rosa:checked ~ .seite .farben label[for="farbe-rosa"],
#farbe-rot:checked ~ .seite .farben label[for="farbe-rot"],
#farbe-orange:checked ~ .seite .farben label[for="farbe-orange"],
#farbe-eis:checked ~ .seite .farben label[for="farbe-eis"],
#farbe-graphit:checked ~ .seite .farben label[for="farbe-graphit"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--f1), 0 0 20px var(--f2); }
.farben label[for="farbe-nacht"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--f1), 0 0 20px var(--f2); }
.farbwahl:checked ~ .seite .farben label[for="farbe-nacht"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
#farbe-nacht:checked ~ .seite .farben label[for="farbe-nacht"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--f1), 0 0 20px var(--f2); }
.fuss .unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 26px; font-size: .8rem; color: var(--txt3); padding-top: 20px; border-top: 1px solid var(--trenn); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 20px; } .fuss a { text-decoration: none; } .fuss a:hover { color: var(--txt); }

/* Speisekarte, Unterseiten */
.seitenkopf { padding: 80px 0 30px; text-align: center; }
.seitenkopf h1 { font-size: clamp(2.8rem, 7vw, 5rem); margin-top: 18px; }
.seitenkopf p { color: var(--txt2); margin-top: 14px; }
.sprung { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px; margin: 20px auto 30px; width: fit-content; max-width: 100%; border-radius: 22px; }
.sprung a { padding: 7px 13px; border-radius: 999px; text-decoration: none; font-size: .8rem; color: var(--txt2); } .sprung a:hover { background: rgba(255, 255, 255, .08); color: var(--txt); }
.karte-seite { columns: 2; column-gap: 14px; padding-bottom: 40px; }
.karte-seite .teil { background: var(--insel); border: 1px solid var(--kante); border-radius: 20px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 24px 26px; margin-bottom: 14px; break-inside: avoid; scroll-margin-top: 100px; }
.karte-seite h3 { font-size: 1.3rem; margin-bottom: 8px; }
.karte-seite .hinweis { font-size: .8rem; color: var(--txt3); margin-bottom: 12px; }
.gerichte { display: grid; gap: 8px; }
.g { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: .88rem; }
.g .n { display: flex; flex-direction: column; min-width: 0; } .g .n small { font-size: .76rem; color: var(--txt3); }
.g i { flex: 1; border-bottom: 1px dotted var(--trenn); min-width: 16px; transform: translateY(-.3em); }
.g .p { white-space: nowrap; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; color: var(--acc); }
.g .p small { font-size: .72rem; color: var(--txt3); font-weight: 400; }
.lauftext { max-width: 820px; margin: 0 auto 60px; padding: 34px 38px; } .lauftext h2 { font-size: 1.4rem; margin: 28px 0 8px; } .lauftext h3 { font-size: 1.1rem; margin: 20px 0 6px; }
.lauftext p, .lauftext li { margin-bottom: 10px; color: var(--txt2); } .lauftext a { color: var(--acc); }
@media (max-width: 960px) {
  .kopf nav { display: none; } .kopf details { display: block; position: relative; }
  .kopf summary { list-style: none; cursor: pointer; font-size: .84rem; padding: 8px 12px; display: flex; align-items: center; gap: 6px; }
  .kopf summary::-webkit-details-marker { display: none; }
  .kopf details nav { display: grid; position: absolute; right: 0; top: 48px; min-width: 200px; padding: 8px; border-radius: 18px; background: rgba(18, 18, 26, .95); border: 1px solid var(--kante); }
  .kopf .rechts { display: flex; align-items: center; gap: 6px; }
  .titel .huelle, .reihe { grid-template-columns: 1fr; } .titel .foto { max-width: 460px; margin: 0 auto; } .titel .schild { left: 0; }
  .bento { grid-template-columns: 1fr 1fr; } .kontakt { grid-template-columns: 1fr; } .karte-seite { columns: 1; }
  .zitat { grid-template-columns: 1fr; text-align: center; } .zitat img { margin: 0 auto; }
}
@media (max-width: 560px) {
  .kopf .marke span { display: none; } .kopf .knopf { padding: 9px 14px; font-size: .78rem; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 200px; } .kachel.b2 { grid-column: auto; } .kachel.h2 { grid-row: span 1; }
  .reihe .text, .zitat { padding: 26px; } .titel { padding-top: 60px; }
}
@media (prefers-reduced-motion: reduce) { .nordlicht i { animation: none; } html { scroll-behavior: auto; } .kachel, .knopf { transition: none; } }