@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --grund: #FBF8F2; --flaeche: #F5EFE3; --karte: #FFFFFF;
  --tinte: #2E2A26; --leise: #6F6A63; --linie: #E2D9C7;
  --leit: #4A2D52; --gold: #8B6F2E; --band-text: #F5EFE3;
  --glut: #A8452A; --glut-flaeche: #F6E7DD;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1A141C; --flaeche: #221A24; --karte: #2A202D;
    --tinte: #ECE7E0; --leise: #B3ABB4; --linie: #3A2F3D;
    --leit: #D2AEDD; --gold: #D4B26A; --band-text: #1A141C;
    --glut: #E08A5F; --glut-flaeche: #2E1F1C;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 18px/1.65 var(--sans); }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, .knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.innen { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.streifen { height: 6px; background: linear-gradient(90deg, var(--leit) 0 70%, var(--gold) 70% 100%); }
.streifen.feuer { background: linear-gradient(90deg, var(--glut) 0 70%, var(--gold) 70% 100%); }

header .innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 2rem; padding-top: 1.3rem; padding-bottom: 1.3rem; }
.marke { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 600 1.5rem/1 var(--serif); color: var(--leit); }
.marke svg { width: 1.6rem; height: 1.6rem; flex: none; }
.marke svg.sichel { width: 2.5rem; height: 2.5rem; margin: -.45rem 0 -.45rem -.2rem; }
.marke small { font: 700 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-left: .2rem; }
nav { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .95rem; }
nav a { text-decoration: none; color: var(--leise); }
nav a:hover, nav a[aria-current="page"] { color: var(--tinte); text-decoration: underline; }

.einstieg .innen { padding-top: 3rem; padding-bottom: 3.5rem; max-width: 52rem; margin-left: auto; margin-right: auto; }
.zeile-oben { margin: 0 0 .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 0 0 1.1rem; font: 600 clamp(2.3rem, 5.2vw, 3.8rem)/1.08 var(--serif); color: var(--leit); text-wrap: balance; }
h2 { margin: 0 0 1rem; font: 600 clamp(1.8rem, 3.6vw, 2.5rem)/1.12 var(--serif); color: var(--leit); text-wrap: balance; }
h3 { margin: 0 0 .35rem; font: 600 1.25rem/1.25 var(--serif); color: var(--leit); }
.gross { font-size: 1.2rem; max-width: 40rem; text-wrap: pretty; }
p { margin: 0 0 1rem; }

.knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.knopf { display: inline-block; padding: .7rem 1.25rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid var(--leit); color: var(--leit); }
.knopf.voll { background: var(--leit); color: var(--band-text); }
.knopf:hover { text-decoration: underline; }

.bereich { padding: 4rem 0; scroll-margin-top: 1rem; }
.bereich.flaeche { background: var(--flaeche); }
.einleitung { max-width: 42rem; font-size: 1.1rem; margin: 0 0 2rem; text-wrap: pretty; }

.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.karte { background: var(--karte); border-radius: 6px; padding: 1.3rem 1.5rem; border-top: 3px solid var(--gold); }
.karte p { margin: 0; color: var(--leise); text-wrap: pretty; }
.karte .preis { margin-top: .7rem; color: var(--tinte); font-weight: 700; }
.karte p + p { margin-top: .5rem; }
.karte p.dauer { margin-top: .3rem; color: var(--leit); font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.band { background: var(--leit); color: var(--band-text); border-radius: 6px; padding: 1.8rem 2rem; }
.band h2, .band h3 { color: var(--band-text); }
.band .knopf { border-color: var(--band-text); color: var(--band-text); }
.band .knopf.voll { background: var(--band-text); color: var(--leit); }

.feuer-bereich { background: var(--glut-flaeche); }
.feuer-bereich .zeile-oben { color: var(--glut); }
.feuer-bereich h2, .feuer-bereich h1, .feuer-bereich h3 { color: var(--glut); }
.feuer-bereich .karte { border-top-color: var(--glut); }
.feuer-bereich .knopf { border-color: var(--glut); color: var(--glut); }
.feuer-bereich .knopf.voll { background: var(--glut); color: #FFF7F0; }

table.preise { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 1rem; }
table.preise th, table.preise td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.preise th { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); font-weight: 700; }
table.preise td.betrag { white-space: nowrap; font-weight: 700; text-align: right; }
.tabelle-rahmen { overflow-x: auto; }

.foto { margin: 0 0 1.8rem; max-width: 42rem; }
.foto img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--linie); background: var(--flaeche); }
.foto.breit { max-width: none; margin-top: 2.2rem; }
.foto figcaption { margin-top: .5rem; font-size: .92rem; color: var(--leise); }

.hinweis { font-size: .92rem; color: var(--leise); max-width: 46rem; }
.kontakt dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; }
.kontakt dt { color: var(--leise); }
.kontakt dd { margin: 0; overflow-wrap: anywhere; }
.band.kontakt dt { color: inherit; opacity: .8; }

main.recht { max-width: 42rem; margin: 0 auto; padding: 2.5rem 1.5rem 2rem; overflow-wrap: break-word; }
main.recht h1 { font-size: 2.3rem; margin-bottom: 1.8rem; }
main.recht h2 { margin: 2rem 0 .4rem; font: 700 1.05rem/1.3 var(--sans); color: var(--tinte); }
main.recht address { font-style: normal; margin-bottom: .8rem; }
main.recht ul { padding-left: 1.2rem; }
main.recht a { color: var(--leit); }

footer { border-top: 1px solid var(--linie); }
footer .innen { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; padding-top: 1.4rem; padding-bottom: 3rem; font-size: .9rem; color: var(--leise); }

@media (max-width: 700px) {
  .karten { grid-template-columns: 1fr; }
  .bereich { padding: 3rem 0; }
  .band { padding: 1.4rem 1.3rem; }
}

:root {
  --ch1: #A8352B; --ch2: #B5591A; --ch3: #8C6F0E; --ch4: #2F6E49; --ch5: #1F6E8C; --ch6: #3C479A; --ch7: #6A3F94;
  --fehler: #A3261B;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ch1: #E3695C; --ch2: #EC8E3F; --ch3: #EDC54B; --ch4: #74BC8B; --ch5: #69C0E2; --ch6: #909BF2; --ch7: #BB92E6;
    --fehler: #F2A08C;
  }
}
[id] { scroll-margin-top: 1rem; }

/* Noch fehlender Inhalt – bewusst auffällig, damit nichts unbemerkt online geht */
mark.offen { background: #FFE58A; color: #2E2A26; font-weight: 700; font-size: .92em; padding: .05em .35em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Messe-Band ganz oben */
.messe-band { background: var(--leit); color: var(--band-text); font-size: .95rem; line-height: 1.45; }
.messe-band .innen { padding-top: .6rem; padding-bottom: .6rem; }
.messe-band p { margin: 0; text-wrap: balance; }
.messe-band span { white-space: nowrap; }

/* Hainfeuer-Sonne */
.sonne { display: block; width: 7rem; height: auto; color: var(--glut); margin: 0 0 1.1rem; }
.sonne.klein { width: 4rem; margin-bottom: .8rem; }

/* Kacheln: ganze Karte ist der Link */
a.kachel { display: block; text-decoration: none; color: inherit; }
a.kachel .weiter { display: inline-block; margin-top: .8rem; font-weight: 700; color: var(--leit); text-decoration: underline; text-underline-offset: 3px; }
a.kachel:hover h3 { text-decoration: underline; }
a.kachel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tuer { margin: 1.6rem 0 0; padding: 1rem 1.3rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--karte);
  color: var(--leise); max-width: 42rem; }
.tuer a { font-weight: 700; color: var(--leit); white-space: nowrap; }

/* Formulare */
.formular { max-width: 38rem; background: var(--karte); border-radius: 6px; border-top: 3px solid var(--gold); padding: 1.5rem 1.5rem 1.3rem; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.formular legend { padding: 0; margin-bottom: .5rem; font: 600 1.15rem/1.3 var(--serif); color: var(--leit); }
.formular .feld { display: block; margin-bottom: 1rem; }
.formular .feld > span { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.formular .feld small, .formular .wahl small { font-weight: 400; color: var(--leise); }
.formular input[type=text], .formular input[type=email], .formular select {
  width: 100%; min-height: 3rem; font: inherit; color: var(--tinte); background: var(--grund);
  border: 1.5px solid var(--leise); border-radius: 6px; padding: .6rem .8rem; }
.formular input.code { text-transform: uppercase; letter-spacing: .14em; font-variant-numeric: tabular-nums; max-width: 16rem; }
.formular input:focus-visible, .formular select:focus-visible, .formular button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.formular .wahl { display: grid; gap: .45rem; }
.formular .wahl label, .formular .einwilligung { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.formular input[type=checkbox] { width: 1.25rem; height: 1.25rem; margin: .25rem 0 0; flex: none; accent-color: var(--leit); }
.formular .einwilligung { font-size: .95rem; margin: 0 0 1rem; }
.formular .einwilligung a { color: var(--leit); }
.formular button { font: 700 1rem/1.2 var(--sans); min-height: 3rem; padding: .8rem 1.5rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--leit); background: var(--leit); color: var(--band-text); }
.formular button:hover { text-decoration: underline; }
.formular .fehler { color: var(--fehler); font-weight: 700; min-height: 1.4em; margin: 0 0 .6rem; }
.formular .fallen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.danke { max-width: 38rem; background: var(--karte); border-left: 4px solid var(--gold); border-radius: 6px; padding: 1.2rem 1.4rem; }
.danke h2 { font-size: 1.6rem; }

/* Link-Seite (Instagram, Facebook) */
.links-seite .innen { max-width: 36rem; }
.linkliste { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .8rem; }
.linkliste a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.2rem;
  padding: .85rem 1.2rem; border: 2px solid var(--leit); border-radius: 14px; background: var(--karte);
  color: var(--leit); text-decoration: none; font-weight: 700; font-size: 1.12rem; line-height: 1.3; }
.linkliste a small { display: block; margin-top: .15rem; font-weight: 400; font-size: .9rem; color: var(--leise); }
.linkliste a::after { content: "→"; flex: none; font-size: 1.2rem; }
.linkliste a.aussen::after { content: "↗"; }
.linkliste a:hover > span { text-decoration: underline; }
.linkliste a.voll { background: var(--leit); color: var(--band-text); }
.linkliste a.voll small { color: inherit; opacity: .85; }
.linkliste a.feuer { border-color: var(--glut); background: var(--glut); color: #FFF7F0; }
.linkliste a.feuer small { color: inherit; opacity: .9; }
.links-recht { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: 1rem; }
.links-recht a { color: var(--leit); display: inline-block; padding: .4rem 0; }

/* Titelliste der CD */
ol.titel { list-style: none; margin: 0 0 1rem; padding: 0; max-width: 42rem; }
ol.titel li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--linie); }
ol.titel .nr { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
ol.titel .zeit { color: var(--leise); font-variant-numeric: tabular-nums; }
.punkt { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .45em; vertical-align: .02em; }
.punkt.c1 { background: var(--ch1); } .punkt.c2 { background: var(--ch2); } .punkt.c3 { background: var(--ch3); }
.punkt.c4 { background: var(--ch4); } .punkt.c5 { background: var(--ch5); } .punkt.c6 { background: var(--ch6); }
.punkt.c7 { background: var(--ch7); }

/* Terminliste Hainfeuer – leer, bis ein Termin eingetragen ist */
.termine { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.termine:empty { display: none; }
.termine:not(:empty) + .termine-leer { display: none; }
.termin { background: var(--karte); border-radius: 6px; border-left: 4px solid var(--glut); padding: 1.2rem 1.4rem; }
.termin .termin-datum { margin: 0 0 .2rem; font-weight: 700; color: var(--glut); }
.termin p { margin: 0 0 .4rem; }
.termin dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem; margin: .6rem 0 0; }
.termin dt { color: var(--leise); }
.termin dd { margin: 0; }
.kostenlos { display: inline-block; padding: .05em .6em; border-radius: 999px; background: var(--glut); color: #FFF7F0; font-weight: 700; }
.feuer-bereich .orte .karte { border-top-color: var(--glut); }
h3.zwischen { margin: 2.4rem 0 .9rem; font-size: 1.4rem; }
@media (prefers-color-scheme: dark) {
  /* helle Glut im Dunkeln: dunkle Schrift statt Weiß, sonst zu wenig Kontrast */
  .kostenlos, .linkliste a.feuer, .feuer-bereich .knopf.voll { color: #1A141C; }
}

/* sehr schmale Telefone (320 px): Preistabelle enger, Tür-Link darf umbrechen */
@media (max-width: 400px) {
  table.preise { font-size: .92rem; }
  table.preise th, table.preise td { padding: .45rem .3rem; }
  .tuer a { white-space: normal; }
  .marke { flex-wrap: wrap; font-size: 1.35rem; }
}

/* Die Kartenmotive leben: Mondreihe (Licht wandert zum Vollmond), Sonne (Flammenzungen züngeln). Bild, kein Bedienelement. */
.mondreihe { display: block; width: clamp(9rem, 34vw, 13.5rem); height: auto; color: var(--gold); margin: 0 0 1.3rem; pointer-events: none; }
.mondreihe .mond { opacity: .72; animation: mondlicht 12s ease-in-out infinite; animation-delay: var(--v, 0s); }
@keyframes mondlicht { 0%, 50%, 100% { opacity: .72 } 18% { opacity: 1 } }
.mondreihe .schein { opacity: 0; animation: mondschein 12s ease-in-out infinite; animation-delay: 4.8s; }
@keyframes mondschein { 0%, 62%, 100% { opacity: 0 } 26% { opacity: .2 } }
.sonne.lebt .zunge { transform-origin: 0 0; animation: zuengeln var(--d, 4.2s) ease-in-out infinite alternate; animation-delay: var(--v, 0s); }
@keyframes zuengeln {
  0%   { transform: scale(1, 1) rotate(0deg) }
  30%  { transform: scale(.96, 1.1) rotate(2.4deg) }
  65%  { transform: scale(1.03, .94) rotate(-1.8deg) }
  100% { transform: scale(.99, 1.05) rotate(.8deg) }
}
/* Klang: Zeichen K2h – die stehende Welle über der Schale schwingt, innerer und äußerer Ring gegengleich.
   Türkis nur als Akzent (Zeichen, Streifen), der Rahmen bleibt Mondlichtung. */
:root { --klang: #0E7C7B; }
@media (prefers-color-scheme: dark) { :root { --klang: #1B8F8C; } }
.streifen.klang { background: linear-gradient(90deg, var(--klang) 0 70%, var(--gold) 70% 100%); }
.klangzeichen { display: block; width: clamp(6.5rem, 24vw, 8.5rem); height: auto; color: var(--klang); margin: 0 0 1.2rem; pointer-events: none; }
.klangzeichen .ring-i circle, .klangzeichen .ring-a circle { transform-box: fill-box; transform-origin: center;
  animation: schwingen 3.6s ease-in-out infinite alternate; }
.klangzeichen .ring-a circle { animation-delay: -3.6s; }
@keyframes schwingen { from { opacity: .35; transform: scale(.8) } to { opacity: 1; transform: scale(1) } }
@media (prefers-reduced-motion: reduce) {
  .klangzeichen .ring-i circle, .klangzeichen .ring-a circle { animation: none; }
  .mondreihe .mond, .mondreihe .schein, .sonne.lebt .zunge { animation: none; }
  .mondreihe .mond { opacity: 1; }
}