/* Kafi mit Herz, Jonen */

:root {
  --rahm: #F5EBD7;
  --tapete: #EEDFC2;
  --papier: #FFFAF0;
  --nussholz: #7A4B2A;
  --holz-dunkel: #3B2416;
  --kafi: #3A2A20;
  --herzrot: #E10613;

  --schrift: "Nunito", Verdana, sans-serif;
  --titel: "Young Serif", Georgia, serif;
  --hand: "Caveat Brush", "Segoe Print", cursive;

  --breite: 1120px;
  --rand: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--rahm);
  color: var(--kafi);
  font-family: var(--schrift);
  font-size: 1.1875rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; height: auto; display: block; }

h2, h3 { font-family: var(--titel); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(2rem, 4.6vw, 3rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--herzrot); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.nur-vorlesen, .sprung:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung:focus {
  position: fixed; top: 10px; left: 10px; z-index: 20;
  background: var(--kafi); color: var(--papier); padding: 10px 16px; border-radius: 8px;
}

/* Illustrationen: schwarzer Strich mit rotem Versatz, wie im Logo */
.illu { fill: none; stroke: var(--kafi); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.illu { stroke-width: 4; }
.illu-rot { display: none; }
.illu-herz { stroke: var(--herzrot); }

/* Knoepfe */
.knopf {
  display: inline-block;
  background: var(--kafi);
  color: var(--papier);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 10px;
  border: 2px solid var(--kafi);
  transition: background-color .15s ease;
}
.knopf:hover { background: var(--nussholz); border-color: var(--nussholz); }
.knopf-hell { background: transparent; color: var(--kafi); }
.knopf-hell:hover { background: var(--tapete); border-color: var(--kafi); }
.knopf-creme { background: var(--rahm); color: var(--kafi); border-color: var(--rahm); }
.knopf-creme:hover { background: var(--papier); border-color: var(--papier); }
.knopf-klein { padding: 9px 18px; font-size: 1.0625rem; white-space: nowrap; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--rand);
  background: var(--rahm);
  border-bottom: 1px solid #DCC9A8;
}
.kopf-name {
  font-family: var(--hand);
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.kopf-nav { display: flex; gap: 28px; }
.kopf-nav a { text-decoration: none; font-weight: 700; padding: 8px 2px; border-bottom: 3px solid transparent; }
.kopf-nav a:hover { border-bottom-color: var(--nussholz); }

/* Stube (Einstieg): gestreifte Tapete, darunter Sims und Holztaefer */
.stube {
  background: var(--rahm);
}
.stube-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) var(--rand) clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.leitsatz {
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(3.1rem, 6vw, 4.75rem);
  line-height: .98;
  margin: 0 0 .45em;
}
.leitsatz .zeile { display: block; }
.klebt { white-space: nowrap; }
.wort {
  display: inline-block;
  clip-path: inset(-25% 105% -25% -10%);
  animation: schreiben .5s ease-out forwards;
  animation-delay: calc(.4s + var(--i) * .34s);
}
@keyframes schreiben { to { clip-path: inset(-25% -12% -25% -10%); } }

.leitsatz-herz {
  display: inline-block;
  width: .82em; height: .82em;
  vertical-align: -.08em;
  margin-left: .1em;
  overflow: visible;
  fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 50% 60%;
  animation: herzschlag 1.5s ease-in-out 4.2s 2;
}
.leitsatz-herz path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen .9s ease-in-out forwards; }
.leitsatz-herz .rot { display: none; }
.leitsatz-herz .schwarz { stroke: var(--herzrot); animation-delay: 3.15s; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes herzschlag {
  0%, 30%, 60%, 100% { transform: scale(1); }
  15% { transform: scale(1.22); }
  45% { transform: scale(1.14); }
}

.stube-lead { font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.45; max-width: 30em; }

.offen {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--papier);
  border: 1px solid #DCC9A8;
  border-radius: 10px;
  padding: 10px 20px 10px 16px;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: 1.5em;
}
.offen::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--nussholz); flex: none; }
.offen.ist-offen::before { background: #1E8A3C; }
.offen.ist-zu::before { background: var(--herzrot); }

.ovalrahmen {
  aspect-ratio: 5 / 6;
  max-width: 420px;
  margin: 0 auto;
  background: var(--papier);
  border: 8px solid var(--nussholz);
  border-radius: 50%;
  box-shadow: 0 18px 40px rgba(59, 36, 22, .16);
  display: grid; place-items: center;
  overflow: hidden;
}
.ovalrahmen img { width: 128%; max-width: none; }

.sims-sachen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  display: flex; justify-content: space-around; align-items: flex-end;
}
.sims-sachen .illu { width: clamp(60px, 8vw, 96px); margin-bottom: -2px; stroke: var(--nussholz); }
.sims-sachen .illu:nth-child(1) { width: clamp(66px, 9vw, 106px); }
.sims-brett { height: 3px; max-width: var(--breite); margin: 0 auto; background: var(--nussholz); border-radius: 3px; }
.sims-taefer {
  display: none;
}

/* Abschnitte */
.abschnitt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 112px) var(--rand);
}
.abschnitt-lead { font-size: 1.3rem; max-width: 34em; margin-top: .7em; }

/* Bilderrahmen (Platzhalter fuer Fotos) */
.bilderrahmen {
  position: relative;
  aspect-ratio: 1;
  background: var(--papier);
  border: 1px solid #DCC9A8;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(59, 36, 22, .08);
  display: grid; place-items: center;
}
.bilderrahmen .illu { width: 62%; }
.bilderrahmen.hoch { aspect-ratio: 4 / 5; }
.rahmen-hinweis {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center; font-size: 1rem; color: var(--nussholz);
}

/* Ursula */
.ursula {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.ursula-text h2 { margin-bottom: .6em; }
.ursula-text p { max-width: 32em; font-size: 1.3rem; }
.ursula-text .unterschrift {
  font-family: var(--hand); font-size: 2.4rem; line-height: 1;
  margin: .6em 0 0;
}

/* Angebot: Bilderwand */
.angebot { padding-top: 0; }
.wand {
  list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.wand h3 { margin: 20px 0 6px; }
.wand p { font-size: 1.0625rem; line-height: 1.5; margin: 0; }

/* Speisekarte */
.karte { padding-top: 0; }
.reiter { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 22px; }
.reiter button {
  font: inherit; font-weight: 700; color: var(--kafi);
  background: var(--papier);
  border: 1px solid #C9B28E;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}
.reiter button:hover { background: var(--tapete); }
.reiter button[aria-selected="true"] { background: var(--kafi); border-color: var(--kafi); color: var(--papier); }
html:not(.js) .reiter { display: none; }

.karte-blatt {
  background: var(--papier);
  border: 1px solid #DCC9A8;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(59, 36, 22, .08);
  padding: clamp(22px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px clamp(32px, 6vw, 80px);
  margin-bottom: 28px;
}
.js .karte-blatt[hidden] { display: none; }
.gruppe h3 { color: var(--nussholz); margin: 0 0 10px; }
.gruppe ul + h3 { margin-top: 34px; }

.posten { list-style: none; margin: 0; padding: 0; }
.posten li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.posten li > span { flex: 0 1 auto; }
.posten li::after { content: ""; flex: 1 1 24px; order: 1; border-bottom: 2px dotted #B89A78; transform: translateY(-5px); }
.posten li > b { order: 2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.posten small { display: block; font-size: .92rem; color: #5E4634; line-height: 1.35; }
.posten.ohne-preis li { display: block; padding: 4px 0; }
.posten.ohne-preis li::after { content: none; }
.posten.ohne-preis + .posten { margin-top: 8px; border-top: 2px solid var(--tapete); padding-top: 6px; }

/* Besuch */
.besuch { background: var(--holz-dunkel); color: var(--rahm); }
.besuch-innen {
  max-width: var(--breite); margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--rand);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 80px);
  align-items: end;
}
.zeiten { border-collapse: collapse; width: 100%; margin-top: 28px; font-size: 1.3rem; }
.zeiten caption { text-align: left; font-weight: 700; padding-bottom: 8px; color: #DCC9A8; }
.zeiten th, .zeiten td { text-align: left; font-weight: 400; padding: 14px 0; border-top: 2px solid rgba(245, 235, 215, .3); vertical-align: top; }
.zeiten td { text-align: right; font-weight: 700; padding-left: 16px; }
.adresse { font-size: 1.3rem; margin-bottom: .6em; }
.telefon {
  font-family: var(--titel);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.1;
  text-decoration: none;
  display: inline-block;
  margin-bottom: .5em;
  border-bottom: 3px solid #C9B28E;
}

.fuss { background: var(--kafi); color: #D9C7AB; padding: 26px var(--rand); font-size: 1rem; text-align: center; }
.fuss p { margin: 0; }

/* Tablet */
@media (max-width: 960px) {
  .wand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kopf-nav { gap: 18px; }
}

/* Handy */
@media (max-width: 720px) {
  body { font-size: 1.125rem; }
  .kopf-nav { display: none; }
  .kopf-name { font-size: 1.7rem; }
  .stube-innen { grid-template-columns: 1fr; }
  .sims-sachen { padding-top: 8px; }
  .stube-bild { order: -1; }
  .ovalrahmen { max-width: 230px; border-width: 10px; }
  .knoepfe .knopf { flex: 1 1 100%; text-align: center; }
  .offen { font-size: 1.0625rem; }
  .sims-sachen .illu:nth-child(4) { display: none; }
  .ursula { grid-template-columns: 1fr; }
  .ursula-bild { max-width: 240px; }
  .wand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }

  .wand li:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: center; margin-top: 0; }
  .wand li:last-child .bilderrahmen { grid-row: span 2; }
  .wand li:last-child h3 { margin-top: 0; align-self: end; }
  .wand li:last-child p { align-self: start; }
  .karte-blatt { grid-template-columns: 1fr; gap: 34px; }
  .besuch-innen { grid-template-columns: 1fr; }
  .zeiten { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wort { animation: none; clip-path: none; }
  .leitsatz-herz, .leitsatz-herz path { animation: none; stroke-dashoffset: 0; }
  .knopf { transition: none; }
}

.kopf-herz { display: inline-block; width: .55em; height: .55em; stroke-width: 12; vertical-align: -.02em; }

/* Einstieg mit Video: laeuft leicht durchscheinend ueber die ganze Breite, Text liegt darauf */

/* Kopfzeile: oben durchsichtig. Beim Scrollen wandert das grosse Logo hinein:
   die Tasse schrumpft an ihren Platz, der Schriftzug faechert sich daneben auf.
   Die Werte --kopf, --tasse und --wort (0 bis 1) setzt script.js beim Scrollen. */
.kopf { position: fixed; left: 0; right: 0; top: 0; }
.kopf-name { display: flex; align-items: center; gap: 10px; }
.kopf-name img { height: 46px; width: auto; }
.js .kopf {
  background: rgba(245, 235, 215, var(--kopf, 0));
  border-bottom-color: rgba(220, 201, 168, var(--kopf, 0));
}
.js .kopf-name { pointer-events: none; }
.js .kopf.gescrollt .kopf-name { pointer-events: auto; }
.js .kopf-name img { opacity: var(--tasse, 0); }
.js .kopf-wort {
  display: inline-block;
  opacity: var(--wort, 0);
  clip-path: inset(-20% calc((1 - var(--wort, 0)) * 100%) -20% -5%);
  transform: translateX(calc((1 - var(--wort, 0)) * -16px));
}
.js .marke-logo { position: fixed; z-index: 11; transform-origin: 0 0; will-change: transform, opacity; }
.stube { position: relative; overflow: hidden; background: var(--rahm); }
.buehne { position: absolute; inset: 0; }
.buehne-rahmen { position: absolute; inset: 0; background: var(--rahm); }
.buehne-rahmen::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(245, 235, 215, 0) 68%, rgba(245, 235, 215, .7) 88%, rgba(245, 235, 215, 1) 100%),
    linear-gradient(90deg, rgba(245, 235, 215, .84) 0%, rgba(245, 235, 215, .64) 38%, rgba(245, 235, 215, 0) 68%);
}
.buehne-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; opacity: .88; }
.js .buehne-video { opacity: 0; transition: opacity .8s ease; }
.js .buehne-video.bereit { opacity: .88; }

.stube .stube-innen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 720px);
  align-content: center;
  max-width: var(--breite);
  margin: 0 auto;
  min-height: min(88vh, 56.25vw);
  padding: calc(clamp(130px, 13vw, 176px) + 44px) var(--rand) clamp(28px, 4vw, 56px);
}

/* Logo ohne Rahmen oben links in der Ecke, der Leitsatz steht gross fuer sich */
.marke-logo { position: absolute; z-index: 1; top: 14px; left: var(--rand); width: clamp(130px, 13vw, 176px); height: auto; }
.marke .leitsatz { margin: 0 0 .4em; font-size: clamp(3.2rem, 6.2vw, 5.2rem); }
.stube .stube-lead { max-width: 28em; }

/* bis das Video laeuft, wartet die Schrift */
.js .stube:not(.los) .wort,
.js .stube:not(.los) .leitsatz-herz,
.js .stube:not(.los) .leitsatz-herz path { animation-play-state: paused; }

/* Tablet und Handy: Video oben ueber die ganze Breite, Logo und Text darunter */
@media (max-width: 900px) {
  .buehne { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .buehne-rahmen::after { background: linear-gradient(180deg, rgba(245, 235, 215, 0) 72%, rgba(245, 235, 215, 1) 100%); }
  .buehne-video { object-position: 100% 50%; opacity: .96; }
  .js .buehne-video.bereit { opacity: .96; }
  .stube .stube-innen { grid-template-columns: 1fr; min-height: 0; padding: 22px var(--rand) 44px; }
  .marke-logo { top: 10px; left: 12px; width: 104px; background: rgba(245, 235, 215, calc(.86 * (1 - var(--kopf, 0)))); border-radius: 14px; padding: 6px 8px; }
  .marke .leitsatz { font-size: 3rem; }
  .kopf-name img { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .buehne-video { opacity: .88; transition: none; }
}

/* Portrait von Ursula */
.ursula-foto { display: block; width: 100%; height: auto; }

/* Scroll-Pause beim Portrait: der Abschnitt bleibt kurz stehen (Huelle und Platz legt script.js an) */
.ursula-halt > .ursula { position: sticky; top: var(--halt-oben, 96px); }
.ursula-halt.frei > .ursula { position: static; }
.halt-raum { height: var(--halt-weg, 160px); }
@media (max-width: 720px) {
  .ursula-bild { max-width: 300px; }
}

/* Herzflug: das rote Herz vom Leitsatz fliegt beim Scrollen mit bis zum Portrait,
   schlaegt dort zweimal, waechst und gibt Ursula in Herzform frei (gesteuert in script.js) */
.herzflieger {
  position: fixed; left: 0; top: 0; z-index: 9;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}
.herzflieger svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: var(--herzrot); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
}
.herzflieger.landet svg { animation: herzlandung 1.2s ease-in-out forwards; }
@keyframes herzlandung {
  0% { transform: scale(1); opacity: 1; }
  16% { transform: scale(1.35); }
  30% { transform: scale(1); }
  46% { transform: scale(1.4); }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(7); opacity: 0; }
}
.herzflug .leitsatz-herz.unterwegs { visibility: hidden; }

.herzflug .ursula-foto { opacity: 0; }
.herzflug .ursula-foto.erscheint {
  opacity: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 104C28 80 12 58 16 38c4-18 30-22 44 0 14-22 40-18 44 0 4 20-12 42-44 66z'/%3E%3C/svg%3E") center / 0% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 104C28 80 12 58 16 38c4-18 30-22 44 0 14-22 40-18 44 0 4 20-12 42-44 66z'/%3E%3C/svg%3E") center / 0% no-repeat;
  animation: herzoeffnung 1.1s ease-out .7s forwards;
}
@keyframes herzoeffnung {
  to { -webkit-mask-size: 460%; mask-size: 460%; }
}
.herzflug .ursula-foto.da { opacity: 1; }

/* Holzschild mit den Oeffnungszeiten: haengt rechts im Einstieg an zwei Seilen und pendelt aus */
.schild {
  position: absolute; z-index: 1;
  top: -6px; right: clamp(16px, 4vw, 64px);
  width: clamp(230px, 25vw, 350px);
  container-type: inline-size;
  transform-origin: 50% -35%;
  animation: schild-kommt 4.2s ease-in-out 1s both;
}
.schild.haengt { animation: none; }
.schild.haengt.stupser { animation: schild-stupser 3s ease-in-out; }
.schild img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%);
}
.schild-text {
  position: absolute; left: 8%; right: 8%; top: 44%; bottom: 7%;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--hand);
  line-height: 1;
  color: #3B2416;
  text-shadow: 0 1px 0 rgba(255, 226, 180, .55);
}
.schild-gross { font-size: 38px; font-size: 13.5cqw; }
.schild-klein { font-size: 20px; font-size: 7.4cqw; margin-top: .22em; white-space: nowrap; }
@keyframes schild-kommt {
  0% { opacity: 0; transform: translateY(-46px) rotate(9deg); }
  10% { opacity: 1; transform: translateY(0) rotate(8deg); }
  28% { transform: rotate(-6deg); }
  46% { transform: rotate(4deg); }
  64% { transform: rotate(-2.4deg); }
  82% { transform: rotate(1.1deg); }
  100% { opacity: 1; transform: rotate(0); }
}
@keyframes schild-stupser {
  0% { transform: rotate(0); }
  18% { transform: rotate(4.5deg); }
  38% { transform: rotate(-3.2deg); }
  58% { transform: rotate(2deg); }
  76% { transform: rotate(-1deg); }
  90% { transform: rotate(.4deg); }
  100% { transform: rotate(0); }
}
@media (max-width: 900px) {
  .schild { top: calc(66.67vw * .34); right: 10px; width: min(48vw, 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .schild, .schild.haengt.stupser { animation: none; }
}

/* Solange man oben ist, ruecken Menue und Telefonnummer nach links, damit das Schild rechts frei haengt */
@media (min-width: 901px) {
  .js .kopf { transition: padding-right .35s ease; }
  .js .kopf:not(.gescrollt) { padding-right: calc(clamp(16px, 4vw, 64px) + clamp(230px, 25vw, 350px) + 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .kopf { transition: none; }
}
.kopf-nav a { white-space: nowrap; }

/* Kopfzeile: die zwei Menuepunkte als Knoepfe */
.kopf-nav { gap: 12px; }
.kopf-nav a {
  padding: 9px 20px;
  border: 2px solid var(--kafi);
  border-radius: 999px;
  background: rgba(255, 250, 240, .9);
  color: var(--kafi);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kopf-nav a:hover { background: var(--tapete); border-color: var(--kafi); }
.kopf-nav a:last-child { background: var(--kafi); color: var(--papier); }
.kopf-nav a:last-child:hover { background: var(--nussholz); border-color: var(--nussholz); }

/* Einstieg: mehr Luft */
.marke .leitsatz { margin-bottom: .62em; }
.stube .stube-lead { margin-bottom: 1.9em; }
.stube .knoepfe { gap: 18px; }
@media (min-width: 901px) {
  .stube .stube-innen {
    min-height: min(100vh, 66vw);
    padding-top: calc(clamp(130px, 13vw, 176px) + 72px);
    padding-bottom: clamp(96px, 11vw, 168px);
  }
  .marke-logo { top: 22px; }
  .schild { right: clamp(24px, 5vw, 84px); }
  .js .kopf:not(.gescrollt) { padding-top: 20px; padding-right: calc(clamp(24px, 5vw, 84px) + clamp(230px, 25vw, 350px) + 40px); }
  .js .kopf { transition: padding .35s ease; }
}
@media (max-width: 900px) {
  .stube .stube-innen { padding: 36px var(--rand) 68px; }
}
@media (max-width: 720px) {
  .kopf { gap: 12px; }
  .kopf-nav { display: flex; gap: 8px; }
  .kopf-nav a { padding: 7px 13px; font-size: 1rem; }
  .kopf-wort { display: none !important; }
}

/* Angebot: gezeichnete Bilder im Stil des Logos, das Weiss verschmilzt mit der Karte */
.bilderrahmen img { width: 86%; height: auto; mix-blend-mode: multiply; }

/* Angebot: beim Darueberfahren hebt sich die Kachel, die Zeichnung federt hoch
   und unter dem Titel zieht sich ein Strich */
.wand .bilderrahmen { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.wand .bilderrahmen img { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.wand h3 {
  display: inline-block; justify-self: start;
  padding-bottom: 5px;
  background: linear-gradient(var(--herzrot), var(--herzrot)) no-repeat 0 100% / 0 3px;
  transition: background-size .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .wand .bilderrahmen, .wand .bilderrahmen img, .wand h3 { transition: none; }
  .wand li:hover .bilderrahmen, .wand li:nth-child(even):hover .bilderrahmen,
  .wand li:hover .bilderrahmen img, .wand li:nth-child(even):hover .bilderrahmen img { transform: none; }
}
.wand .bilderrahmen { overflow: hidden; }

/* Speisekarte neu: geschriebene Karte, Zeichnungen leicht durchsichtig im Hintergrund */
.karte-blatt.karte-neu {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  padding: clamp(26px, 4.4vw, 58px) clamp(20px, 4.6vw, 64px) clamp(30px, 4.6vw, 60px);
  background: var(--papier);
  border: 2.5px solid var(--kafi);
  border-radius: 26px 18px 28px 16px / 18px 28px 16px 26px;
  box-shadow: 6px 7px 0 var(--herzrot);
}
.blatt-deko { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blatt-deko img {
  position: absolute; left: var(--x); top: var(--y);
  width: auto; height: auto; max-width: clamp(74px, 11.5vw, 150px); max-height: clamp(66px, 10vw, 132px);
  transform: translate(-50%, -50%) rotate(var(--r));
  opacity: .17; mix-blend-mode: multiply;
}
.blatt-titel {
  margin: 0 0 clamp(22px, 3vw, 38px); text-align: center;
  font-family: "Caveat Brush", cursive; font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 3.6rem); line-height: 1; color: var(--kafi);
}
.blatt-titel svg { display: inline-block; vertical-align: .04em; width: .6em; height: .6em; margin: 0 .28em; fill: var(--herzrot); stroke: var(--kafi); stroke-width: 1.6; stroke-linejoin: round; transform: rotate(-8deg); }
.blatt-titel svg:last-child { transform: rotate(8deg); }
.blatt-spalten { columns: 2; column-gap: clamp(40px, 7vw, 96px); }
.sorte { break-inside: avoid; padding-bottom: 34px; }
.sorte:last-child { padding-bottom: 0; }
.sorte-titel {
  display: flex; align-items: center; gap: 12px; margin: 0 0 8px;
  font-family: "Caveat Brush", cursive; font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.3rem); line-height: 1.1; color: var(--kafi);
}
.sorte-titel::after { content: ""; flex: 1; border-bottom: 3px solid var(--kafi); border-radius: 3px; transform: rotate(-.4deg); }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.liste li::after { content: ""; flex: 1 1 20px; order: 1; border-bottom: 2px dotted var(--nussholz); transform: translateY(-6px); }
.liste-name { flex: 0 1 auto; font-weight: 800; font-size: 1.18rem; line-height: 1.3; color: var(--kafi); }
.liste-name small { display: block; font-weight: 600; font-size: .98rem; color: #4E3828; }
.liste-preis {
  order: 2; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap;
  font-family: "Caveat Brush", cursive; font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--kafi);
}
.liste-preis i { font-family: "Nunito", sans-serif; font-style: normal; font-weight: 700; font-size: .95rem; color: #4E3828; }
@media (max-width: 760px) {
  .blatt-spalten { columns: 1; }
  .karte-blatt.karte-neu { box-shadow: 4px 5px 0 var(--herzrot); }
  .blatt-deko img { opacity: .15; }
  .blatt-titel { font-size: clamp(1.8rem, 8.4vw, 2.6rem); white-space: nowrap; }
  .blatt-titel svg { margin: 0 .18em; }
}

/* Kartenblatt: Zeilen ohne Preis und Zeilen mit mehreren Groessen */
.liste li.nur-name::after { content: none; }
.liste li.nur-name { padding: 5px 0; }
.liste li.breit { flex-wrap: wrap; gap: 2px 10px; }
.liste li.breit::after { content: none; }
.liste li.breit .liste-name { flex: 1 1 100%; }
.liste li.breit .liste-preis { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 2px 22px; }
.liste li.nur-name + li.breit { margin-top: 6px; padding-top: 10px; border-top: 2px dotted var(--nussholz); }

/* Speisekarte: sanfter Wechsel der Rubrik (altes Blatt gleitet weg, neues gleitet herein) */
.karte { position: relative; overflow-x: clip; }
.karte-blatt.blatt-kopie { position: absolute; z-index: 1; margin: 0; box-sizing: border-box; pointer-events: none; }
.karte-blatt.blatt-geht { animation: blatt-geht .38s ease-in forwards; }
.karte-blatt.blatt-kommt { position: relative; z-index: 2; animation: blatt-kommt .5s cubic-bezier(.2,.7,.2,1) .12s both; }
@keyframes blatt-geht {
  to { transform: translateX(calc(var(--richtung, 1) * -42px)) rotate(calc(var(--richtung, 1) * -1.2deg)); opacity: 0; }
}
@keyframes blatt-kommt {
  from { transform: translateX(calc(var(--richtung, 1) * 48px)) rotate(calc(var(--richtung, 1) * 1.2deg)); opacity: 0; }
}
/* Besuch: Aquarell vom Haus leicht durchsichtig am unteren Rand */
.besuch { position: relative; overflow: hidden; padding-bottom: clamp(110px, 17vw, 250px); }
.besuch::after {
  content: ""; position: absolute; left: 50%; bottom: 0; z-index: 0;
  width: min(1500px, max(100%, 780px)); aspect-ratio: 3 / 1;
  transform: translateX(-50%);
  background: url(bilder/fusszeile-sommer.webp) center bottom / contain no-repeat;
  opacity: .3; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%);
  mask-image: linear-gradient(180deg, transparent 0, #000 38%);
}
.besuch-innen { position: relative; z-index: 1; }

/* Fusszeile: Adresse links, "Designed by Novein" klein ganz rechts */
.fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; padding: 18px var(--rand); text-align: left; }
.fuss-novein { display: block; margin-left: auto; line-height: 0; opacity: .75; transition: opacity .2s ease; }
.fuss-novein:hover, .fuss-novein:focus-visible { opacity: 1; }
.fuss-novein img { display: block; width: auto; height: 44px; }
@media (max-width: 720px) { .fuss-novein img { height: 38px; } }

/* Fusszeile im gleichen Braun wie der Abschnitt Besuch */
.fuss { background: var(--holz-dunkel); }

/* Seite Besuch: Anfahrt mit Auto und OeV */
.seite-besuch main { padding-top: 72px; }
.weg-kopf { padding-bottom: clamp(20px, 3vw, 36px); }
.weg-zurueck { margin: 0 0 18px; }
.weg-zurueck a { font-weight: 700; color: var(--nussholz); text-underline-offset: 4px; }
.weg-zurueck a::before { content: "\2190\00a0"; }
.weg-fakten { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 28px; }
.weg-fakten li { padding-top: 12px; border-top: 3px solid var(--kafi); }
.weg-fakten span { display: block; font-family: "Caveat Brush", cursive; font-size: 1.5rem; line-height: 1.1; color: var(--nussholz); }
.weg-fakten b { font-size: 1.18rem; }
.abschnitt.weg { padding-top: clamp(18px, 3vw, 34px); padding-bottom: clamp(18px, 3vw, 34px); }
.abschnitt.weg:last-of-type { padding-bottom: clamp(56px, 9vw, 112px); }
.weg-blatt {
  padding: clamp(24px, 4vw, 50px) clamp(20px, 4.4vw, 56px) clamp(28px, 4.2vw, 52px);
  background: var(--papier);
  border: 2.5px solid var(--kafi);
  border-radius: 26px 18px 28px 16px / 18px 28px 16px 26px;
  box-shadow: 6px 7px 0 var(--herzrot);
}
.weg-titel {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-family: "Caveat Brush", cursive; font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3rem); line-height: 1.05; color: var(--kafi);
}
.weg-titel::after { content: ""; flex: 1; border-bottom: 3px solid var(--kafi); border-radius: 3px; transform: rotate(-.4deg); }
.weg-herz { flex: none; width: .62em; height: .62em; fill: var(--herzrot); stroke: var(--kafi); stroke-width: 1.6; stroke-linejoin: round; transform: rotate(-8deg); }
.weg-blatt p { font-size: 1.2rem; max-width: 36em; }
.weg-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.weg-formular { margin-top: 22px; }
.weg-formular label { display: block; font-weight: 800; font-size: 1.15rem; margin-bottom: 8px; }
.weg-eingabe { display: flex; flex-wrap: wrap; gap: 10px; }
.weg-eingabe input {
  flex: 1 1 220px; min-width: 0;
  font: inherit; font-size: 1.15rem; color: var(--kafi);
  padding: 14px 16px; background: #fff;
  border: 2px solid var(--kafi); border-radius: 10px;
}
.weg-eingabe input::placeholder { color: #8A7462; }
.weg-eingabe input:focus-visible, .weg-eingabe button:focus-visible { outline: 3px solid var(--herzrot); outline-offset: 2px; }
.weg-eingabe button { font-family: inherit; cursor: pointer; }
.weg-blatt p.weg-hinweis { margin: 12px 0 0; font-size: 1.02rem; color: #4E3828; }
.weg-blatt p.weg-navi { margin-top: 26px; padding-top: 18px; border-top: 2px dotted var(--nussholz); }
.weg-karte { position: relative; overflow: hidden; min-height: 340px; border: 2.5px solid var(--kafi); border-radius: 16px; background: var(--holz-dunkel); }
.weg-karte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.weg-karte-innen { position: relative; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--rahm); }
.weg-karte-innen p { margin: 0; font-family: "Young Serif", serif; font-size: 1.6rem; line-height: 1.3; }
.weg-karte-innen small { font-size: .95rem; color: #D9C7AB; }
.weg-karte-innen button { font-family: inherit; cursor: pointer; }
.weg-karte-link { color: var(--rahm); font-weight: 700; text-underline-offset: 4px; }
.weg-karte iframe { display: block; width: 100%; height: 420px; border: 0; }
.weg-blatt p.weg-halt { font-size: 1.3rem; }
.weg-linien { list-style: none; margin: 22px 0 0; padding: 0; }
.weg-linien li { display: grid; grid-template-columns: minmax(150px, auto) 1fr auto; align-items: center; gap: 8px 24px; padding: 16px 0; border-top: 2px dotted var(--nussholz); }
.weg-linien li:last-child { border-bottom: 2px dotted var(--nussholz); }
.weg-linie { justify-self: start; padding: 6px 16px; background: var(--kafi); color: var(--papier); font-weight: 800; font-size: 1.1rem; border-radius: 999px; white-space: nowrap; }
.weg-linien p { margin: 0; }
.weg-linien p b { display: block; font-size: 1.2rem; }
.weg-linien p small { display: block; font-size: 1.02rem; color: #4E3828; }
.weg-dauer { font-family: "Caveat Brush", cursive; font-size: 1.7rem; line-height: 1.1; white-space: nowrap; }
.weg-knoepfe { margin-top: 16px; }
@media (max-width: 820px) {
  .weg-raster { grid-template-columns: 1fr; }
  .weg-linien li { grid-template-columns: 1fr; gap: 6px; }
  .weg-blatt { box-shadow: 4px 5px 0 var(--herzrot); }
  .weg-eingabe button { flex: 1 1 100%; }
}
.weg-kopf h1 { font-family: var(--titel); font-weight: 400; line-height: 1.12; margin: 0; font-size: clamp(2.3rem, 5.4vw, 3.6rem); }

/* Seite Besuch: echte Google-Karte */
.weg-karte { min-height: 0; background: var(--tapete); }
.weg-karte iframe { height: clamp(320px, 38vw, 440px); }
.weg-blatt p.weg-karte-unten { margin: 12px 0 0; font-size: 1.08rem; }
.weg-karte-unten a { font-weight: 700; color: var(--nussholz); text-underline-offset: 4px; }

/* Seite Besuch: drei Aquarelle gross hinter den Blaettern, die Blaetter lassen sie leicht durchscheinen */
.seite-besuch main { overflow-x: clip; }
.weg-kopf { position: relative; isolation: isolate; }
.weg-kopf::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc((100% - 100vw) / 2 + 2vw); top: clamp(-20px, -1vw, 0px);
  height: clamp(400px, 50vw, 660px); aspect-ratio: 600 / 800;
  background: url(bilder/besuch-strasse-sommer.webp) center / contain no-repeat;
  opacity: .42;
}
.abschnitt.weg { position: relative; isolation: isolate; }
.abschnitt.weg::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 50%; transform: translateY(-50%);
  height: clamp(460px, 62vw, 820px);
  background: center / contain no-repeat;
  opacity: .62;
}
#auto::before { right: calc((100% - 100vw) / 2 - 1vw); aspect-ratio: 600 / 744; background-image: url(bilder/besuch-haus-sommer.webp); }
#oev::before { left: calc((100% - 100vw) / 2 - 2vw); aspect-ratio: 600 / 960; background-image: url(bilder/besuch-haltestelle-sommer.webp); }
.weg-blatt { position: relative; background: rgba(255, 250, 240, .8); }
.weg-eingabe input { background: rgba(255, 255, 255, .92); }
@media (max-width: 820px) {
  .weg-kopf::before { opacity: .24; left: -6px; top: 40px; height: 420px; }
  .abschnitt.weg::before { height: 520px; opacity: .5; }
  .weg-blatt { background: rgba(255, 250, 240, .86); }
}
/* Seite Besuch: Google-Karte mit Rahmen im Stil des Logos */
.weg-karte {
  padding: 8px; background: #fff;
  border: 2.5px solid var(--kafi);
  border-radius: 20px 15px 22px 14px / 15px 22px 14px 20px;
  box-shadow: 5px 6px 0 var(--herzrot);
  overflow: visible;
}
.weg-karte iframe { border-radius: 11px; }
.weg-blatt p.weg-karte-unten { margin-top: 20px; }

/* Seite Besuch: Kopfzeile oben durchsichtig, damit sie das Bild nicht zerschneidet (wird beim Scrollen fest) */
.seite-besuch .kopf { background: rgba(245, 235, 215, var(--kopf, 0)); border-bottom-color: rgba(220, 201, 168, var(--kopf, 0)); }
.weg-kopf::before { top: -72px; }
@media (max-width: 820px) { .weg-kopf::before { top: -40px; } }

/* Kontakt (E-Mail als Platzhalter) statt Telefonnummer */
.kontakt { margin: 0 0 1.1em; }
.kontakt span { display: block; font-weight: 700; color: #DCC9A8; margin-bottom: 2px; }
.kontakt a { font-family: var(--titel); font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.25; overflow-wrap: anywhere; text-decoration: none; border-bottom: 2px solid #C9B28E; }
.weg-fakten b a { overflow-wrap: anywhere; }

/* Seite Besuch: Bezeichnung ueber dem Strich, Angabe darunter */
.weg-fakten li { padding-top: 0; border-top: 0; }
.weg-fakten span { padding-bottom: 6px; margin-bottom: 10px; border-bottom: 3px solid var(--kafi); }

/* Seite Besuch: erstes Bild laeuft an den Raendern weich aus */
.weg-kopf::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 72%, transparent 100%), linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 72%, transparent 100%), linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Unterschrift: kleines Herz nach dem a, leicht schraeg */
.unterschrift-herz { display: inline-block; width: .42em; height: .42em; margin-left: .12em; vertical-align: .34em; fill: var(--herzrot); transform: rotate(14deg); }
.unterschrift-herz-vorn { margin-left: 0; margin-right: .1em; transform: rotate(-14deg); }

/* Speisekarte: kleines Herz neben dem Wort Herz */
.liste-herz { display: inline-block; width: .62em; height: .62em; margin-left: .2em; vertical-align: .02em; fill: var(--herzrot); transform: rotate(10deg); }
.liste li.abstand { margin-top: 16px; }

/* Fusszeile: Impressum und Datenschutz in der Mitte */
.fuss { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px 28px; }
.fuss-recht { display: flex; gap: 26px; justify-content: center; }
.fuss-recht a { color: #E6D6BA; font-weight: 700; text-underline-offset: 4px; padding: 6px 2px; white-space: nowrap; }
.fuss-recht a:hover, .fuss-recht a[aria-current="page"] { color: var(--papier); }
.fuss-novein { justify-self: end; margin-left: 0; }
@media (max-width: 900px) {
  .fuss { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .fuss-novein { justify-self: center; }
}
/* Seiten Impressum und Datenschutz */
.seite-recht main { padding-top: 72px; }
.recht { max-width: 800px; }
.recht h1 { font-family: var(--titel); font-weight: 400; line-height: 1.12; margin: 0 0 .4em; font-size: clamp(2.3rem, 5.4vw, 3.4rem); }
.recht h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin: 1.9em 0 .45em; padding-top: .9em; border-top: 2px dotted var(--nussholz); }
.recht p { font-size: 1.15rem; margin: 0 0 .9em; }
.recht a { color: var(--nussholz); font-weight: 700; text-underline-offset: 4px; overflow-wrap: anywhere; }
.recht-liste { margin: 0; }
.recht-liste div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 20px; padding: 9px 0; border-bottom: 1px solid #DCC9A8; font-size: 1.15rem; }
.recht-liste dt { color: #4E3828; }
.recht-liste dd { margin: 0; font-weight: 700; }
.recht p.recht-stand { margin-top: 2.4em; font-size: 1rem; color: #4E3828; }
@media (max-width: 560px) { .recht-liste div { grid-template-columns: 1fr; } }
.fuss-zeile { white-space: nowrap; }

/* Angebot: die Kacheln werden der Reihe nach automatisch hervorgehoben (Klasse setzt script.js) */
.wand li.dran .bilderrahmen { transform: translateY(-10px) rotate(-1.5deg); border-color: var(--nussholz); box-shadow: 0 22px 36px rgba(59,36,22,.18); }
.wand li.dran:nth-child(even) .bilderrahmen { transform: translateY(-10px) rotate(1.5deg); }
.wand li.dran .bilderrahmen img { transform: scale(1.14) rotate(-5deg); }
.wand li.dran:nth-child(even) .bilderrahmen img { transform: scale(1.14) rotate(5deg); }
.wand li.dran h3 { background-size: 100% 3px; }

/* Jahreszeiten: feine Bewegung im Hintergrund (Herbst Laub, Winter Schnee, Fruehling Schmetterlinge, Sommer Pusteblumen-Samen).
   Die Ebene liegt hinter dem Inhalt, script.js baut sie je nach Monat auf. */
.wetter { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.flocke { position: absolute; top: -12vh; left: var(--x); width: var(--gross); opacity: var(--deck); filter: blur(var(--unscharf, 0)); animation: wetter-fallen var(--dauer) linear var(--verzug) infinite; will-change: transform; }
.flocke i { display: block; }
.flocke svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes wetter-fallen { to { transform: translate3d(var(--drift), 126vh, 0); } }

/* Herbst: Blaetter taumeln und drehen sich im Fallen */
.wetter-herbst .flocke i { animation: wetter-taumeln var(--wieg) ease-in-out infinite alternate; }
.wetter-herbst svg { filter: drop-shadow(0 3px 2px rgba(59, 36, 22, .2)); }
@keyframes wetter-taumeln {
  0% { transform: translateX(-26px) rotate3d(.2, 1, .3, -65deg) rotate(-30deg); }
  50% { transform: translateX(4px) rotate3d(1, .3, .2, 50deg) rotate(20deg); }
  100% { transform: translateX(26px) rotate3d(.3, 1, .5, 150deg) rotate(55deg); }
}

/* Winter: weiche Flocken, die fernen kleiner und unscharf */
.wetter-winter .flocke i {
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff 0, #fff 42%, rgba(255, 255, 255, .55) 62%, rgba(255, 255, 255, 0) 74%);
  filter: drop-shadow(0 0 1.500px rgba(110, 130, 165, .7));
  animation: wetter-schweben var(--wieg) ease-in-out infinite alternate;
}
@keyframes wetter-schweben { from { transform: translateX(-14px); } to { transform: translateX(14px); } }

/* Fruehling: Schmetterlinge flattern unregelmaessig durchs Bild.
   Sie schauen in Flugrichtung, steigen und sinken, verweilen kurz und schlagen in Schueben mit den Fluegeln. */
.wetter-fruehling .flocke { top: var(--y); left: -8vw; animation-name: wetter-flattern; animation-timing-function: ease-in-out; }
.wetter-fruehling .flocke.rueck { left: auto; right: -8vw; animation-name: wetter-flattern-rueck; }
.wetter-fruehling .flocke i { animation: wetter-huepfen var(--huepf) ease-in-out infinite alternate; }
.wetter-fruehling svg { filter: drop-shadow(0 4px 3px rgba(59, 36, 22, .16)); }
.wetter-fruehling .fluegel { transform-origin: 30px 22px; animation: wetter-fluegel var(--takt) linear infinite; }
@keyframes wetter-flattern {
  0% { transform: translate3d(0, 0, 0) rotate(55deg); }
  11% { transform: translate3d(13vw, -11vh, 0) rotate(40deg); }
  20% { transform: translate3d(19vw, -3vh, 0) rotate(115deg); }
  33% { transform: translate3d(37vw, -15vh, 0) rotate(48deg); }
  45% { transform: translate3d(47vw, 2vh, 0) rotate(120deg); }
  56% { transform: translate3d(51vw, -5vh, 0) rotate(20deg); }
  62% { transform: translate3d(53vw, -3vh, 0) rotate(75deg); }
  75% { transform: translate3d(76vw, -13vh, 0) rotate(52deg); }
  88% { transform: translate3d(97vw, 3vh, 0) rotate(112deg); }
  100% { transform: translate3d(124vw, -8vh, 0) rotate(60deg); }
}
@keyframes wetter-flattern-rueck {
  0% { transform: translate3d(0, 0, 0) rotate(-60deg); }
  14% { transform: translate3d(-18vw, 6vh, 0) rotate(-115deg); }
  25% { transform: translate3d(-27vw, -8vh, 0) rotate(-35deg); }
  31% { transform: translate3d(-29vw, -6vh, 0) rotate(-80deg); }
  46% { transform: translate3d(-52vw, -16vh, 0) rotate(-50deg); }
  58% { transform: translate3d(-63vw, -2vh, 0) rotate(-118deg); }
  71% { transform: translate3d(-82vw, -12vh, 0) rotate(-45deg); }
  84% { transform: translate3d(-99vw, 1vh, 0) rotate(-110deg); }
  100% { transform: translate3d(-124vw, -9vh, 0) rotate(-58deg); }
}
/* kleines Auf und Ab bei jedem Fluegelschlag */
@keyframes wetter-huepfen { from { transform: translate(-3px, 7px); } to { transform: translate(3px, -9px); } }
/* drei schnelle Schlaege, dann kurz mit offenen Fluegeln gleiten */
@keyframes wetter-fluegel {
  0% { transform: scaleX(1); } 9% { transform: scaleX(.16); } 18% { transform: scaleX(1); }
  27% { transform: scaleX(.16); } 36% { transform: scaleX(1); } 45% { transform: scaleX(.22); }
  56% { transform: scaleX(.95); } 78% { transform: scaleX(.8); } 100% { transform: scaleX(1); }
}
/* Sommer: Pusteblumen-Samen steigen langsam auf */
.wetter-sommer .flocke { top: auto; bottom: -12vh; animation-name: wetter-steigen; }
.wetter-sommer .flocke i { transform-origin: 50% 90%; animation: wetter-pendeln var(--wieg) ease-in-out infinite alternate; }
@keyframes wetter-steigen { to { transform: translate3d(calc(var(--drift) * 3), -128vh, 0); } }
@keyframes wetter-pendeln { from { transform: translateX(-14px) rotate(-16deg); } to { transform: translateX(14px) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .wetter { display: none; } }
/* Winter: Flocken sind klein, darum nur halb so unscharf */
.wetter-winter .flocke { filter: blur(calc(var(--unscharf, 0px) * .5)); }

/* Seite Besuch: Jahreszeiten-Effekte bleiben hinter den Aquarellen.
   Die Bilder sind dafuer deckend und werden mit einem Creme-Schleier aufgehellt (statt durchsichtig gemacht),
   die Maske in Bildform sorgt dafuer, dass nur das Bild selbst abdeckt und kein Rechteck. */
.weg-kopf::before, .abschnitt.weg::before { opacity: 1; --schleier: .58; }
.abschnitt.weg::before { --schleier: .38; }
.weg-kopf::before {
  background: linear-gradient(rgba(245, 235, 215, var(--schleier)), rgba(245, 235, 215, var(--schleier))), url(bilder/besuch-strasse-sommer.webp);
  background-position: center; background-size: contain; background-repeat: no-repeat;
  -webkit-mask-image: url(bilder/besuch-strasse-sommer.webp), linear-gradient(90deg, transparent 0, #000 12%, #000 72%, transparent 100%), linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
  mask-image: url(bilder/besuch-strasse-sommer.webp), linear-gradient(90deg, transparent 0, #000 12%, #000 72%, transparent 100%), linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain, 100% 100%, 100% 100%; mask-size: contain, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
#auto::before { background-image: linear-gradient(rgba(245, 235, 215, var(--schleier)), rgba(245, 235, 215, var(--schleier))), url(bilder/besuch-haus-sommer.webp); -webkit-mask-image: url(bilder/besuch-haus-sommer.webp); mask-image: url(bilder/besuch-haus-sommer.webp); }
#oev::before { background-image: linear-gradient(rgba(245, 235, 215, var(--schleier)), rgba(245, 235, 215, var(--schleier))), url(bilder/besuch-haltestelle-sommer.webp); -webkit-mask-image: url(bilder/besuch-haltestelle-sommer.webp); mask-image: url(bilder/besuch-haltestelle-sommer.webp); }
.abschnitt.weg::before { -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@media (max-width: 820px) {
  .weg-kopf::before { opacity: 1; --schleier: .76; }
  .abschnitt.weg::before { opacity: 1; --schleier: .5; }
}

/* Gebaeude-Bilder je Jahreszeit (data-jahreszeit setzt jahreszeit.js, ohne Skript gilt Sommer) */
:root {
  --b-strasse: url(bilder/besuch-strasse-sommer.webp); --b-haus: url(bilder/besuch-haus-sommer.webp);
  --b-halt: url(bilder/besuch-haltestelle-sommer.webp); --b-fuss: url(bilder/fusszeile-sommer.webp);
}
:root[data-jahreszeit="fruehling"] {
  --b-strasse: url(bilder/besuch-strasse-fruehling.webp); --b-haus: url(bilder/besuch-haus-fruehling.webp);
  --b-halt: url(bilder/besuch-haltestelle-fruehling.webp); --b-fuss: url(bilder/fusszeile-fruehling.webp);
}
:root[data-jahreszeit="herbst"] {
  --b-strasse: url(bilder/besuch-strasse-herbst.webp); --b-haus: url(bilder/besuch-haus-herbst.webp);
  --b-halt: url(bilder/besuch-haltestelle-herbst.webp); --b-fuss: url(bilder/fusszeile-herbst.webp);
}
:root[data-jahreszeit="winter"] {
  --b-strasse: url(bilder/besuch-strasse-winter.webp); --b-haus: url(bilder/besuch-haus-winter.webp);
  --b-halt: url(bilder/besuch-haltestelle-winter.webp); --b-fuss: url(bilder/fusszeile-winter.webp);
}
.besuch::after { background-image: var(--b-fuss); }
.weg-kopf::before {
  background-image: linear-gradient(rgba(245, 235, 215, var(--schleier)), rgba(245, 235, 215, var(--schleier))), var(--b-strasse);
  -webkit-mask-image: var(--b-strasse), linear-gradient(90deg, transparent 0, #000 12%, #000 72%, transparent 100%), linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
  mask-image: var(--b-strasse), linear-gradient(90deg, transparent 0, #000 12%, #000 72%, transparent 100%), linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
}
#auto::before { background-image: linear-gradient(rgba(245, 235, 215, var(--schleier)), rgba(245, 235, 215, var(--schleier))), var(--b-haus); -webkit-mask-image: var(--b-haus); mask-image: var(--b-haus); }
#oev::before { background-image: linear-gradient(rgba(245, 235, 215, var(--schleier)), rgba(245, 235, 215, var(--schleier))), var(--b-halt); -webkit-mask-image: var(--b-halt); mask-image: var(--b-halt); }

/* Jahreszeiten an Ort: die Elemente sitzen an festen Stellen im freien Raum der Seite, scrollen mit
   und bewegen sich nur leicht. script.js platziert sie so, dass sie keine Texte und Bilder beruehren. */
.wetter.wetter-ort { position: absolute; inset: 0 0 auto 0; }
.wetter.wetter-ort .flocke { right: auto; bottom: auto; animation: none; }
.wetter-ort.wetter-herbst .flocke i { animation: ort-wiegen var(--wieg) ease-in-out var(--verzug) infinite alternate; }
@keyframes ort-wiegen {
  from { transform: rotate(calc(var(--dreh) - 9deg)) translateY(-2px); }
  to { transform: rotate(calc(var(--dreh) + 11deg)) translateY(3px); }
}
.wetter-ort.wetter-fruehling .flocke i { animation: ort-sitzen var(--huepf) ease-in-out var(--verzug) infinite alternate; }
@keyframes ort-sitzen {
  from { transform: rotate(calc(var(--dreh) * .5 - 4deg)) translate(0, 2px); }
  to { transform: rotate(calc(var(--dreh) * .5 + 5deg)) translate(2px, -3px); }
}
/* Schnee rieselt nur ein kurzes Stueck und taucht dann wieder auf */
.wetter-ort.wetter-winter .flocke i { animation: ort-rieseln var(--dauer) linear var(--verzug) infinite; }
@keyframes ort-rieseln {
  0% { transform: translate(-3px, 0); opacity: 0; }
  18% { opacity: 1; } 80% { opacity: 1; }
  100% { transform: translate(4px, 40px); opacity: 0; }
}
/* Pusteblumen-Samen steigen nur ein kurzes Stueck */
.wetter-ort.wetter-sommer .flocke i { transform-origin: 50% 90%; animation: ort-steigen var(--dauer) ease-in-out var(--verzug) infinite; }
@keyframes ort-steigen {
  0% { transform: translate(-4px, 42px) rotate(-12deg); opacity: 0; }
  20% { opacity: 1; } 50% { transform: translate(4px, 20px) rotate(10deg); } 80% { opacity: 1; }
  100% { transform: translate(-2px, 0) rotate(-8deg); opacity: 0; }
}

/* Seite Besuch: durch den Kasten sieht man das Haus, aber keine Jahreszeiten-Elemente.
   Unter dem Haus liegt dafuer eine deckende Creme-Flaeche in Kastenform. */
.weg-blatt::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--rahm); }

/* Fruehling an Ort: jeder Schmetterling fliegt in seinem eigenen freien Feld herum (Groesse --bx mal --by setzt script.js),
   der Kopf zeigt in Flugrichtung. Jeder zweite fliegt die Runde spiegelverkehrt. */
.wetter-ort.wetter-fruehling .flocke { animation: ort-flug var(--flug) ease-in-out var(--verzug) infinite; }
.wetter-ort.wetter-fruehling .flocke.rueck { animation-name: ort-flug-rueck; }
.wetter-ort.wetter-fruehling .flocke i { animation: wetter-huepfen var(--huepf) ease-in-out infinite alternate; }
@keyframes ort-flug {
  0% { transform: translate(0, calc(var(--by) * .6)) rotate(35deg); }
  15% { transform: translate(calc(var(--bx) * .35), calc(var(--by) * .1)) rotate(114deg); }
  30% { transform: translate(calc(var(--bx) * .8), calc(var(--by) * .3)) rotate(156deg); }
  42% { transform: translate(var(--bx), calc(var(--by) * .75)) rotate(238deg); }
  55% { transform: translate(calc(var(--bx) * .6), var(--by)) rotate(311deg); }
  68% { transform: translate(calc(var(--bx) * .25), calc(var(--by) * .7)) rotate(405deg); }
  80% { transform: translate(calc(var(--bx) * .55), calc(var(--by) * .4)) rotate(291deg); }
  90% { transform: translate(calc(var(--bx) * .15), calc(var(--by) * .25)) rotate(203deg); }
  100% { transform: translate(0, calc(var(--by) * .6)) rotate(395deg); }
}
@keyframes ort-flug-rueck {
  0% { transform: translate(var(--bx), calc(var(--by) * .6)) rotate(-35deg); }
  15% { transform: translate(calc(var(--bx) * .65), calc(var(--by) * .1)) rotate(-114deg); }
  30% { transform: translate(calc(var(--bx) * .2), calc(var(--by) * .3)) rotate(-156deg); }
  42% { transform: translate(0, calc(var(--by) * .75)) rotate(-238deg); }
  55% { transform: translate(calc(var(--bx) * .4), var(--by)) rotate(-311deg); }
  68% { transform: translate(calc(var(--bx) * .75), calc(var(--by) * .7)) rotate(-405deg); }
  80% { transform: translate(calc(var(--bx) * .45), calc(var(--by) * .4)) rotate(-291deg); }
  90% { transform: translate(calc(var(--bx) * .85), calc(var(--by) * .25)) rotate(-203deg); }
  100% { transform: translate(var(--bx), calc(var(--by) * .6)) rotate(-395deg); }
}

/* Herbst an Ort: jedes Blatt faellt in seinem eigenen freien Feld ein Stueck (--by), taumelt dabei und taucht oben wieder auf */
.wetter-ort.wetter-herbst .flocke { animation: ort-fallen var(--dauer) linear var(--verzug) infinite; }
.wetter-ort.wetter-herbst .flocke i { animation: ort-taumeln var(--wieg) ease-in-out infinite alternate; }
@keyframes ort-fallen {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: var(--deck); } 86% { opacity: var(--deck); }
  100% { transform: translateY(var(--by)); opacity: 0; }
}
@keyframes ort-taumeln {
  0% { transform: translateX(-7px) rotate3d(.2, 1, .3, -60deg) rotate(calc(var(--dreh) - 25deg)); }
  50% { transform: translateX(2px) rotate3d(1, .3, .2, 45deg) rotate(var(--dreh)); }
  100% { transform: translateX(7px) rotate3d(.3, 1, .5, 140deg) rotate(calc(var(--dreh) + 30deg)); }
}

/* Winter an Ort: es schneit. Jede Flocke faellt in ihrem eigenen freien Feld (--by) und schwebt dabei leicht hin und her */
.wetter-ort.wetter-winter .flocke { animation: ort-fallen var(--dauer) linear var(--verzug) infinite; }
.wetter-ort.wetter-winter .flocke i { animation: wetter-schweben var(--wieg) ease-in-out infinite alternate; }

/* Sommer an Ort: Pusteblumen-Samen sinken langsam in ihrem eigenen freien Feld (--by) und pendeln dabei */
.wetter-ort.wetter-sommer .flocke { animation: ort-fallen var(--dauer) linear var(--verzug) infinite; }
.wetter-ort.wetter-sommer .flocke i { transform-origin: 50% 10%; animation: wetter-pendeln var(--wieg) ease-in-out infinite alternate; }

/* Fallbahnen: Laub, Schnee und Samen fallen von ganz oben bis ganz unten durch und fangen nie sichtbar neu an.
   Sie starten verdeckt (unter dem Einstieg oder oberhalb der Seite) und enden hinter dem braunen Abschluss. */
.wetter-ort.wetter-bahn .flocke {
  top: calc(var(--start) - var(--gross) * 2 - 12px); opacity: var(--deck);
  animation: ort-durch var(--dauer) linear var(--verzug) infinite;
}
@keyframes ort-durch { from { transform: translateY(0); } to { transform: translateY(calc(var(--strecke) + var(--gross) * 4 + 24px)); } }

/* Weicher Hof um die Texte in der Hintergrundfarbe: faellt Laub oder Schnee dahinter durch, bleibt die Schrift klar lesbar.
   In den Kaesten und auf Knoepfen braucht es das nicht (dort kommt nichts durch). */
.abschnitt { text-shadow: 0 0 2px var(--rahm), 0 0 5px var(--rahm), 0 0 5px var(--rahm), 0 0 9px var(--rahm), 0 0 9px var(--rahm), 0 0 14px var(--rahm), 0 0 20px var(--rahm); }
.karte-blatt, .weg-blatt, .bilderrahmen, .knopf, .reiter { text-shadow: none; }

/* ============================================================
   Handy (bis 720px): eigene, ruhigere Gestaltung.
   Alles in diesem Block gilt nur auf schmalen Bildschirmen.
   ============================================================ */
@media (max-width: 720px) {
  h1, h2, h3 { text-wrap: balance; }
  .abschnitt { padding-top: 52px; padding-bottom: 52px; }
  .angebot, .karte { padding-top: 8px; }

  /* Abschnitts-Titel: kleines Herz mit Strich als Auftakt */
  .abschnitt > h2::before, .ursula-text h2::before, .besuch h2::before {
    content: ""; display: block; height: 20px; margin-bottom: 14px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C5 15.5 2 11.4 2.8 7.6 3.7 3.9 8.6 3.3 12 7.6c3.4-4.3 8.3-3.700 9.200 0C22 11.400 19 15.500 12 21z' fill='%23E10613' stroke='%233A2A20' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") left center / 20px 20px no-repeat,
      linear-gradient(currentColor, currentColor) 30px 55% / 58px 3px no-repeat;
  }

  /* Einstieg: Video etwas hoeher, Text mit mehr Ruhe */
  .buehne { aspect-ratio: 5 / 4; }
  .schild { top: 30vw; right: 12px; width: min(46vw, 200px); }
  .marke-logo { border-radius: 18px; box-shadow: 0 6px 18px rgba(59, 36, 22, calc(.18 * (1 - var(--kopf, 0)))); }
  .stube .stube-innen { padding: 26px var(--rand) 54px; }
  .marke .leitsatz { font-size: clamp(2rem, 10.2vw, 2.8rem); line-height: 1.12; }
  .stube .stube-lead { font-size: 1.2rem; }
  .stube .knoepfe .knopf { padding: 17px 20px; font-size: 1.2rem; border-radius: 14px; }

  /* Ursula: Portrait in der Mitte, Text darunter */
  .ursula { gap: 22px; }
  .ursula-bild { max-width: 290px; margin: 0 auto; }
  .ursula-text p { font-size: 1.2rem; }
  .ursula-text .unterschrift { font-size: 2.3rem; margin-top: .5em; }

  /* Angebot: ruhige Liste, Zeichnung links, Text rechts */
  .wand { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .wand li {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: center;
    padding: 12px 16px 12px 12px;
    background: var(--papier); border: 1.500px solid #DCC9A8; border-radius: 18px;
    box-shadow: 0 6px 16px rgba(59, 36, 22, .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .wand li:last-child { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; }
  .wand .bilderrahmen, .wand li:last-child .bilderrahmen { grid-row: 1 / span 2; border: 0; box-shadow: none; background: none; border-radius: 12px; }
  .wand .bilderrahmen img { width: 100%; }
  .wand h3 { margin: 0 0 2px; align-self: end; font-size: 1.4rem; }
  .wand p { align-self: start; font-size: 1.05rem; line-height: 1.4; }
  /* die automatische Hervorhebung hebt hier die ganze Zeile leicht an */
  .wand li.dran, .wand li.dran:nth-child(even) { transform: translateY(-3px); border-color: var(--nussholz); box-shadow: 0 14px 24px rgba(59, 36, 22, .14); }
  .wand li.dran .bilderrahmen, .wand li.dran:nth-child(even) .bilderrahmen { transform: none; box-shadow: none; }
  .wand li.dran .bilderrahmen img, .wand li.dran:nth-child(even) .bilderrahmen img { transform: scale(1.1) rotate(-4deg); }

  /* Speisekarte: Rubriken als gleich grosse Knoepfe in zwei Spalten */
  .reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 22px; }
  .reiter button { padding: 13px 8px; font-size: 1.08rem; border-radius: 14px; border-width: 1.500px; text-align: center; line-height: 1.2; }
  .karte-blatt.karte-neu { padding: 26px 18px 30px; border-radius: 22px 16px 24px 15px / 16px 24px 15px 22px; }
  .sorte { padding-bottom: 28px; }
  .liste-name { font-size: 1.14rem; }

  /* Abschluss: Zeiten untereinander, das Haus bekommt seinen eigenen Platz */
  .besuch-innen { padding: 48px var(--rand) 8px; gap: 30px; }
  .besuch { padding-bottom: 232px; }
  .besuch::after { width: 760px; opacity: .42; }
  .zeiten { margin-top: 20px; }
  .zeiten tr { display: block; padding: 12px 0; border-top: 2px solid rgba(245, 235, 215, .3); }
  .zeiten th, .zeiten td { display: block; padding: 0; border: 0; text-align: left; }
  .zeiten td { padding: 2px 0 0; font-size: 1.3rem; }
  .besuch .adresse { margin-bottom: 1em; }
  .besuch .knoepfe .knopf { padding: 17px 20px; font-size: 1.2rem; border-radius: 14px; }
  .fuss { padding: 22px var(--rand) 26px; gap: 14px; }

  /* Seite Besuch */
  .weg-kopf h1 { font-size: 2.4rem; }
  .weg-kopf .abschnitt-lead { font-size: 1.2rem; }
  .weg-fakten { gap: 18px; margin-top: 26px; }
  .weg-blatt { padding: 24px 18px 28px; border-radius: 22px 16px 24px 15px / 16px 24px 15px 22px; }
  .weg-titel { font-size: 2.1rem; }
  .weg-eingabe input { flex-basis: 100%; }
  .weg-eingabe button, .weg-knoepfe .knopf { padding: 16px 18px; font-size: 1.15rem; border-radius: 12px; }
  .weg-karte iframe { height: 300px; }
  .weg-linien li { padding: 18px 0; }
  .weg-navi b { display: block; white-space: nowrap; }
}

/* Handy: Einstieg neu. Grosses Video mit Bogen unten, das Logo sitzt als rundes Abzeichen auf dem Bogen,
   Leitsatz und Knoepfe stehen mittig darunter. */
.nur-handy { display: none; }
@media (max-width: 720px) {
  .nur-handy { display: inline-block; }
  .buehne { aspect-ratio: auto; height: 58vh; height: 58svh; min-height: 340px; max-height: 540px; clip-path: ellipse(125% 100% at 50% 0); }
  .buehne-rahmen::after { background: linear-gradient(180deg, rgba(59, 36, 22, .16) 0, rgba(59, 36, 22, 0) 24%); }
  .buehne-video { object-position: 72% 50%; opacity: 1; }
  .js .buehne-video.bereit { opacity: 1; }
  /* Startseite oben: Menueknoepfe stehen links, das Schild haengt rechts an Seilen vom oberen Rand.
     Beim Scrollen gleiten die Knoepfe nach rechts, damit links die Tasse in der Kopfzeile Platz hat. */
  .js .seite-start .kopf { gap: 0; }
  .js .seite-start .kopf-name { flex: 0 1 calc(var(--kopf, 0) * 100%); min-width: 0; margin-right: 0; }
  .js .seite-start .kopf-nav { flex: none; gap: 6px; margin-left: calc(var(--kopf, 0) * 12px); }
  .seite-start .kopf-nav a { padding: 7px 12px; }
  /* so breit, wie es rechts neben den Knoepfen Platz hat: das linke Seil laeuft knapp rechts am Knopf "Besuch" vorbei */
  .schild {
    top: 46px; right: 6px; left: auto; width: clamp(120px, calc((100vw - 244px) / .906), 180px);
    filter: drop-shadow(0 8px 10px rgba(59, 36, 22, .35));
    transform-origin: 50% -60%;
  }
  .schild img { -webkit-mask-image: none; mask-image: none; }
  /* kleineres Schild, darum groessere Schrift; die kleine Zeile darf zweizeilig werden */
  .schild-text { top: 43%; bottom: 5%; left: 7%; right: 7%; }
  .schild-gross { font-size: 15.5cqw; }
  .schild-klein { font-size: 8.6cqw; white-space: normal; line-height: 1.02; margin-top: .12em; }
  .schild::before, .schild::after {
    content: ""; position: absolute; top: -52px; height: 58px; width: 2.8%; min-width: 5px; border-radius: 3px;
    background: repeating-linear-gradient(-58deg, #dcb37c 0 3px, #a8743f 3px 5px, #e8c793 5px 7px);
    box-shadow: 0 0 0 .5px rgba(90, 55, 25, .45);
  }
  .schild::before { left: 9.4%; }
  .schild::after { left: 87.8%; }

  /* das runde Abzeichen gehoert zum Bild und bleibt auf dem Bogen, das Logo darin wandert beim Scrollen in die Kopfzeile */
  .stube { --abz: 132px; --abz-oben: calc(clamp(340px, 58vh, 540px) - var(--abz) * .56); }
  @supports (height: 1svh) { .stube { --abz-oben: calc(clamp(340px, 58svh, 540px) - var(--abz) * .56); } }
  .stube::after {
    content: ""; position: absolute; z-index: 1; top: var(--abz-oben); left: calc(50% - var(--abz) / 2);
    width: var(--abz); height: var(--abz); border-radius: 50%;
    background: var(--papier); border: 4px solid var(--rahm);
    box-shadow: 0 10px 24px rgba(59, 36, 22, .22);
    opacity: calc(1 - var(--kopf, 0) * 1.5);
  }
  .marke-logo {
    top: var(--abz-oben); left: calc(50% - var(--abz) / 2); width: var(--abz); height: var(--abz); object-fit: contain;
    padding: 22px 19px 18px; border-radius: 0; background: none; box-shadow: none;
  }
  .stube .stube-innen { padding: 78px var(--rand) 56px; text-align: center; }
  .marke .leitsatz { font-size: clamp(2rem, 10vw, 2.8rem); margin-bottom: .5em; }
  .stube .stube-lead { margin: 0 auto 1.6em; max-width: 21em; }
  .stube .knoepfe { gap: 12px; }
}

/* Handy: Seite Besuch, Bilder im Hintergrund kraeftiger (Melvins Wunsch), Kaesten etwas durchsichtiger. Desktop bleibt. */
@media (max-width: 720px) {
  .weg-kopf::before { --schleier: .42; }
  .abschnitt.weg::before { --schleier: .14; height: 640px; }
  #auto::before { right: auto; left: 50%; transform: translate(-50%, -50%); }
  #oev::before { left: 50%; transform: translate(-50%, -50%); }
  .weg-blatt { background: rgba(255, 250, 240, .72); }
}

/* Handy: im braunen Abschnitt ist das Aquarell in seine drei Haeuser aufgeteilt. Sie liegen gross und blass hinter der Schrift
   und schauen abwechselnd zur Haelfte vom Rand herein: oben von links, weiter unten von rechts, dann wieder von links.
   Jedes zeigt nur seinen Ausschnitt und laeuft an den Schnittkanten weich aus. Desktop behaelt das ganze Bild (.besuch::after). */
.fuss-haeuser { display: none; }
@media (max-width: 720px) {
  .besuch::after { display: none; }
  /* die Fusszeile liegt mit im braunen Abschnitt, damit die Haeuser bis ganz nach unten reichen */
  .besuch { padding-bottom: calc(56px + 200px); }
  .seite-start .fuss, .seite-besuch .fuss { position: relative; z-index: 1; margin-top: -200px; min-height: 200px; align-content: end; background: transparent; }
  .fuss-haeuser { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .fuss-haeuser i {
    position: absolute; display: block; opacity: .26;
    background-image: var(--b-fuss); background-repeat: no-repeat;
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .fuss-haeuser i:nth-child(1) {
    top: 1.5%; left: -22vw; width: 78vw; aspect-ratio: 1.11;
    background-size: 270.3% 100%; background-position: 0 0;
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent), linear-gradient(180deg, transparent 0, #000 14%);
    mask-image: linear-gradient(90deg, #000 84%, transparent), linear-gradient(180deg, transparent 0, #000 14%);
  }
  .fuss-haeuser i:nth-child(2) {
    top: 49%; transform: translateY(-50%); right: -18vw; width: 66vw; aspect-ratio: .87;
    background-size: 344.8% 100%; background-position: 51.4% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent), linear-gradient(180deg, transparent 0, #000 12%);
    mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent), linear-gradient(180deg, transparent 0, #000 12%);
  }
  .fuss-haeuser i:nth-child(3) {
    bottom: 0; left: -20vw; width: 80vw; aspect-ratio: 1.08;
    background-size: 277.8% 100%; background-position: 100% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%), linear-gradient(180deg, transparent 0, #000 14%);
    mask-image: linear-gradient(90deg, transparent, #000 16%), linear-gradient(180deg, transparent 0, #000 14%);
  }
  .besuch-innen, .seite-start .fuss, .seite-besuch .fuss { text-shadow: 0 1px 8px rgba(59, 36, 22, .9), 0 0 2px rgba(59, 36, 22, .7); }
  .besuch-innen .knopf { text-shadow: none; }
}

/* Handy: Impressum, Datenschutz und Novein auf einer Zeile unter der Adresse */
@media (max-width: 720px) {
  .fuss { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 16px 18px; }
  .fuss > p { grid-column: 1 / -1; }
  .fuss-recht { gap: 18px; }
  .fuss-novein { justify-self: start; }
  .fuss-novein img { height: 30px; }
}

.weg-nur-handy { display: none; }
@media (max-width: 720px) { .weg-blatt p.weg-nur-handy { display: block; } .weg-nur-gross { display: none; } }
/* Handy: Seite Besuch kompakter. Statt Eingabefeld ein Knopf, der Google Maps mit dem eigenen Standort oeffnet.
   Mehr Luft vor dem braunen Abschnitt. */
@media (max-width: 720px) {
  .seite-besuch .weg-formular { display: none; }
  .weg-handy-knopf { display: block; text-align: center; margin: 18px 0 0; padding: 14px 18px; font-size: 1.1rem; border-radius: 12px; }
  .weg-knoepfe { flex-direction: column; gap: 10px; }
  .weg-knoepfe .knopf { width: 100%; text-align: center; padding: 13px 18px; font-size: 1.05rem; }
  .weg-knoepfe .weg-handy-knopf { margin: 0; font-size: 1.1rem; padding: 14px 18px; }
  .weg-kopf h1 { font-size: 2.1rem; }
  .weg-kopf .abschnitt-lead { font-size: 1.1rem; }
  .weg-fakten { gap: 14px; margin-top: 20px; }
  .abschnitt.weg { padding-top: 14px; padding-bottom: 14px; }
  #oev { padding-bottom: 90px; }
  .weg-blatt { padding: 20px 16px 22px; }
  .weg-titel { font-size: 1.8rem; margin-bottom: 12px; }
  .weg-blatt p { font-size: 1.08rem; }
  .weg-blatt p.weg-halt { font-size: 1.12rem; margin-bottom: 4px; }
  .weg-blatt p.weg-navi { margin-top: 18px; padding-top: 14px; }
  .weg-karte iframe { height: 220px; }
  .weg-blatt p.weg-karte-unten { margin-top: 14px; }
  .weg-linien li { padding: 12px 0; }
  .weg-blatt p.weg-hinweis { margin-bottom: 16px; font-size: .98rem; }
}

/* Handy: Kopf der Seite Besuch. Das Bild mit Kirche und Strasse steht als ruhiges Titelbild oben (blendet unten weich aus),
   Titel und Angaben stehen darunter auf Creme statt auf dem Bild. */
@media (max-width: 720px) {
  .seite-besuch main { padding-top: 0; }
  .weg-kopf { padding-top: 250px; }
  .weg-kopf::before {
    top: 0; left: 0; right: 0; width: auto; height: 330px; aspect-ratio: auto; transform: none;
    --schleier: .08;
    background-size: cover; background-position: center 38%;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .weg-zurueck { margin-bottom: 10px; font-size: 1rem; }
  .weg-kopf h1 { font-size: 2.2rem; }
  .weg-kopf .abschnitt-lead { margin-top: 10px; }
  .weg-fakten { margin-top: 22px; padding: 18px 18px 6px; background: rgba(255, 250, 240, .85); border: 2px solid var(--kafi); border-radius: 16px; gap: 0; }
  .weg-fakten li { padding-bottom: 14px; }
  .weg-fakten, .weg-fakten * { text-shadow: none; }
  .weg-fakten span { border-bottom-width: 2px; margin-bottom: 6px; padding-bottom: 4px; }
}

/* Handy: Zeichnungen der Speisekarte locker ueber das Blatt gestreut (Positionen --hx/--hy setzt script.js) */
@media (max-width: 720px) {
  .blatt-deko { overflow: hidden; border-radius: inherit; }
  .blatt-deko img {
    left: var(--hx, var(--x)); top: var(--hy, var(--y));
    max-width: 104px; max-height: 92px; opacity: .14;
  }
}

/* Kein blaues Aufblitzen beim Antippen auf dem Handy */
html { -webkit-tap-highlight-color: transparent; }

/* Seite Besuch: Hinweis auf die reservierten Parkplaetze */
.weg-parken-text { display: flex; gap: 14px; align-items: flex-start; }
.weg-parken { margin-top: 24px; padding: 14px 16px; border: 2px solid var(--kafi); border-radius: 14px; background: var(--papier); }
.weg-p { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--kafi); color: var(--papier); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.weg-blatt .weg-parken p { margin: 0; font-size: 1.08rem; }
.weg-parken b { display: block; margin-bottom: 2px; font-size: 1.15rem; }
.weg-skizze { margin: 16px 4px 0 0; }
.weg-skizze img, .weg-skizze svg { display: block; width: 100%; height: auto; border-radius: 16px 11px 17px 10px / 11px 17px 10px 16px; border: 2.5px solid var(--kafi); box-shadow: 4px 5px 0 var(--herzrot); }
.weg-skizze figcaption { margin-top: 6px; font-size: .85rem; color: #6B5444; text-align: right; }
.sk-gruen { fill: #DDE6C8; }
.sk-strasse path { fill: none; stroke: #8C7560; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.sk-strasse-innen path { fill: none; stroke: #FFFDF8; stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; }
.sk-haus { fill: #CDB79A; stroke: #7A4B2A; stroke-width: 2.5; }
.sk-kafi { fill: #F3E2C6; stroke: var(--kafi); stroke-width: 4; }
.sk-park { fill: #FFFAF0; stroke: var(--kafi); stroke-width: 3.5; stroke-dasharray: 7 5; }
.sk-p { font-family: Nunito, sans-serif; font-weight: 800; font-size: 32px; fill: #FFFAF0; }
.sk-n { font-family: Nunito, sans-serif; font-weight: 800; font-size: 17px; fill: var(--kafi); }
.sk-weg { fill: none; stroke: var(--kafi); stroke-width: 5; stroke-dasharray: 10 9; stroke-linecap: round; stroke-linejoin: round; }
.sk-herz { fill: var(--herzrot); }
.sk-schrift text { font-family: "Caveat Brush", cursive; font-size: 34px; fill: var(--kafi); paint-order: stroke; stroke: #FBF4E6; stroke-width: 6px; stroke-linejoin: round; }
.sk-schrift .sk-klein { font-family: Nunito, sans-serif; font-weight: 800; font-size: 23px; fill: #5A4334; }
@media (max-width: 720px) {
  .weg-parken { padding: 14px 14px 12px; }
  .weg-parken-text { display: block; }
  .weg-p { float: left; width: 34px; height: 34px; font-size: 1.3rem; margin: 0 10px 4px 0; border-radius: 8px; }
  .weg-parken b { min-height: 34px; padding-top: 4px; }
  .weg-skizze { margin-left: -4px; margin-right: -4px; }
}

/* Handy: im Kasten Auto zuerst die Google-Karte, danach Parkplaetze und Navi-Adresse */
@media (max-width: 720px) {
  #auto .weg-raster { display: flex; flex-direction: column; gap: 0; }
  #auto .weg-raster > div:first-child { display: contents; }
  #auto .weg-karte-feld { order: 1; margin-top: 22px; }
  #auto .weg-parken { order: 2; }
  #auto .weg-navi { order: 3; align-self: stretch; }
  #auto .weg-handy-knopf { align-self: stretch; }
}