/* Beispielseiten von zehnbyte - gemeinsame Grundlage.
   Jede Seite setzt ihre Farben ueber die Variablen im <body style>. */
/* Cormorant Garamond (SIL Open Font License 1.1) - liegt auf dem eigenen
   Server, kein Aufruf an Google. Nur fuer die Beispielseiten. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/schriften/cormorant-garamond-normal-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/schriften/cormorant-garamond-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url("/schriften/cormorant-garamond-kursiv-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url("/schriften/cormorant-garamond-kursiv-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --grund: #F4F0EA; --grund-2: #EAE3D8; --tinte: #1C1A17; --leise: #5E5850;
  --akzent: #9C4A2F; --akzent-hell: #C06A4A; --linie: rgba(28, 26, 23, .14);
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --auf-akzent: #fff;   /* Schrift auf der Akzentflaeche - helle Akzente brauchen dunkle Schrift */
  --rand: 32px; --breite: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--tinte); font-family: var(--sans);
       font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* Hinweis: erfundener Betrieb */
.demo-hinweis { position: fixed; z-index: 70; left: 16px; bottom: 16px; max-width: min(420px, calc(100% - 32px));
                background: rgba(12, 12, 12, .82); color: #E4DFD7; font-size: 12px; line-height: 1.45;
                padding: 9px 14px; border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
                box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.demo-hinweis a { color: #fff; }
.demo-hinweis { padding-right: 38px; }
.demo-hinweis__zu { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%;
                    background: rgba(255,255,255,.12); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.demo-hinweis__zu:hover { background: rgba(255,255,255,.24); }

/* Kopf: liegt ueber dem Titelbild, wird beim Scrollen fest */
.kopf { position: fixed; left: 0; right: 0; top: 0; z-index: 50; color: #fff;
        transition: background-color .35s ease, color .35s ease, top .35s ease, box-shadow .35s ease; }
.kopf.fest { top: 0; background: var(--kopf-grund, rgba(244, 240, 234, .94)); color: var(--tinte);
             backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.logo { text-decoration: none; line-height: 1; }
.logo b { display: block; font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: .12em; text-transform: uppercase; }
.logo small { display: block; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; opacity: .8; margin-top: 5px; }
.menue { display: flex; align-items: center; gap: 30px; }
.menue a { text-decoration: none; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; opacity: .85;
           transition: opacity .2s ease; }
.menue a:hover { opacity: 1; }
.knopf { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
         font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
         padding: 16px 26px; border: 1px solid transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.knopf.voll { background: var(--akzent); color: var(--auf-akzent); }
.knopf.voll:hover { background: var(--akzent-hell); transform: translateY(-1px); }
.knopf.rand { border-color: currentColor; }
.knopf.rand:hover { background: rgba(127,127,127,.14); background: color-mix(in srgb, currentColor 12%, transparent); transform: translateY(-1px); }
.menue .knopf { opacity: 1; padding: 13px 20px; }

/* Titelbild */
.held { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.held__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06);
              animation: heranfahren 2.4s cubic-bezier(.2,.7,.2,1) both; }
.held::after { content: ""; position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.72) 100%); }
.held .huelle { position: relative; z-index: 1; width: 100%; padding-top: 180px; padding-bottom: 88px; }
.ueber { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; opacity: .9; margin: 0 0 22px; }
.held h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 7.4vw, 104px); line-height: .98;
           letter-spacing: -.01em; margin: 0 0 26px; max-width: 13ch; }
/* Der helle Akzent steht ueber dem dunklen Titelbild, der satte im hellen
   Abschnitt darunter - sonst verschwindet das hervorgehobene Wort. */
.held h1 em { font-style: italic; color: var(--akzent-hell); }
.titel em { font-style: italic; color: var(--akzent); }
.held p.fuehrung { font-size: clamp(17px, 1.5vw, 20px); max-width: 44ch; margin: 0 0 38px; opacity: .92; }
.tasten { display: flex; flex-wrap: wrap; gap: 14px; }
.held__fuss { position: absolute; z-index: 1; right: var(--rand); bottom: 34px; font-size: 11px; letter-spacing: .3em;
              text-transform: uppercase; opacity: .75; writing-mode: vertical-rl; }
@keyframes heranfahren { from { transform: scale(1.14); } to { transform: scale(1.06); } }
.held .ueber, .held h1, .held p.fuehrung, .held .tasten { animation: auftauchen 1.1s cubic-bezier(.2,.7,.2,1) both; }
.held h1 { animation-delay: .12s; } .held p.fuehrung { animation-delay: .24s; } .held .tasten { animation-delay: .36s; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(26px); } }

/* Abschnitte */
section { padding: clamp(84px, 11vw, 150px) 0; }
.marke { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--akzent); margin: 0 0 26px; }
.titel { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 68px); line-height: 1.04;
         letter-spacing: -.005em; margin: 0 0 28px; max-width: 16ch; }
.text { color: var(--leise); max-width: 56ch; font-size: 18px; }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.zwei--bild-links > :first-child { order: -1; }
.bildrahmen { position: relative; overflow: hidden; }
.bildrahmen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.bildrahmen:hover img { transform: scale(1.03); }
.hoch { aspect-ratio: 4 / 5; } .quer { aspect-ratio: 3 / 2; }

/* Band mit Vollbild */
.band { position: relative; min-height: 78vh; display: flex; align-items: center; color: #fff; overflow: hidden; padding: 120px 0; }
.band img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.band .huelle { position: relative; z-index: 1; }
.zitat { font-family: var(--serif); font-style: italic; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.15; max-width: 20ch; margin: 0 0 22px; }
.zitat + p { letter-spacing: .26em; text-transform: uppercase; font-size: 12px; opacity: .85; margin: 0; }

/* Listen mit Punktlinie (Karte, Preise, Leistungen) */
.karte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 22px 80px; }
.karte h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 18px; }
.posten { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline; padding: 14px 0;
          border-bottom: 1px solid var(--linie); }
.posten b { font-weight: 600; font-size: 17px; }
.posten i { border-bottom: 1px dotted var(--linie); transform: translateY(-5px); }
.posten span { font-family: var(--serif); font-size: 21px; color: var(--akzent); white-space: nowrap; }
.posten small { grid-column: 1 / -1; color: var(--leise); font-size: 14.5px; margin-top: -8px; }

/* Besuch / Kontakt */
.besuch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 50px; }
.besuch h3 { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--akzent); margin: 0 0 16px; font-weight: 600; }
.besuch p { margin: 0; line-height: 1.9; }
.zeiten { width: 100%; border-collapse: collapse; }
.zeiten td { padding: 5px 0; } .zeiten td:last-child { text-align: right; }

/* Fuss */
.fuss { background: var(--fuss, #151412); color: #CFC8BD; padding: 80px 0 40px; }
.fuss .logo b { color: #fff; }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.fuss a { text-decoration: none; display: block; line-height: 2.1; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.fuss a:hover { color: #fff; }
.fuss__zeile { margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; opacity: .7; }

/* Einblenden beim Scrollen - nur Elemente unterhalb des Fensters (siehe beispiele.js) */
.wartet { opacity: 0; transform: translateY(34px); }
.wartet.bildrahmen { transform: none; clip-path: inset(12% 0 0 0); }
.da { opacity: 1; transform: none; clip-path: inset(0 0 0 0);
      transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), clip-path 1.3s cubic-bezier(.2,.7,.2,1);
      transition-delay: calc(var(--v, 0) * 110ms); }

@media (max-width: 900px) {
  :root { --rand: 22px; }
  .menue a:not(.knopf) { display: none; }
  .zwei, .fuss__raster, .besuch { grid-template-columns: 1fr !important; }
  .besuch h3 { letter-spacing: .2em; }
  .held__fuss { display: none; }
  .kopf .huelle { height: 64px; gap: 12px; }
  .logo b { font-size: 21px !important; letter-spacing: .08em !important; white-space: nowrap; }
  .logo small { font-size: 9px; letter-spacing: .18em; white-space: nowrap; }
  .menue .knopf { padding: 10px 13px; font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
  .held .huelle { padding-top: 130px; padding-bottom: 96px; }
}
@media (max-width: 360px) {
  .logo b { font-size: 18px !important; letter-spacing: .05em !important; }
  .logo small { display: none; }
  .menue .knopf { padding: 9px 10px; font-size: 10.5px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .held__bild { transform: none; }
  .fortschritt { display: none; }
}

/* --- Links ohne Ziel -----------------------------------------------------
   Beispielseiten sind Schaufenster: Impressum, Datenschutz und aehnliche
   Verweise fuehren bewusst nirgendwohin. Sie sehen aus wie Links, reagieren
   aber nur mit einem kurzen Hinweis (siehe beispiele.js). */
.tot { cursor: default; }
.tot:hover { opacity: .55; }
.blase { position: fixed; z-index: 90; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
         background: rgba(14, 14, 14, .93); color: #fff; font-family: var(--sans); font-size: 13px;
         letter-spacing: 0; text-transform: none; padding: 11px 20px; border-radius: 999px;
         opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
         box-shadow: 0 16px 40px -18px rgba(0,0,0,.8); }
.blase.an { opacity: 1; transform: translate(-50%, 0); }

/* --- Schaltflaechen-Reihe (Filter, Reiter, Auswahl) ---------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: inherit; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
        padding: 11px 18px; border: 1px solid var(--linie); background: transparent; color: inherit;
        cursor: pointer; border-radius: 0;
        transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.chip:hover { border-color: var(--akzent); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.chip:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* --- Ein- und Ausblenden von Listeneintraegen ---------------------------- */
[hidden] { display: none !important; }
.faellt { animation: faellt .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes faellt { from { opacity: 0; transform: translateY(18px); } }

/* --- Feiner Fortschrittsbalken am oberen Rand ---------------------------- */
.fortschritt { position: fixed; z-index: 60; left: 0; top: 0; height: 2px; width: 100%;
               transform: scaleX(0); transform-origin: 0 50%; background: var(--akzent); }