@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Alegreya-500i-latin-ext.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: 'Alegreya';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Alegreya-500i-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: 'Alegreya';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Alegreya-500-latin-ext.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: 'Alegreya';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Alegreya-500-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: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Alegreya-700-latin-ext.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: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Alegreya-700-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: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/AlegreyaSans-400-latin-ext.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: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/AlegreyaSans-400-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: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/AlegreyaSans-700-latin-ext.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: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/AlegreyaSans-700-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;
}
/* =====================================================================
   bogenbau.jetzt — Joe Knauer, Werkstatt am Dorfplatz (aus dem Visionssuche-Stylesheet abgeleitet)
   Palette aus seiner Bildwelt: warmes Papier, Glut-Bernstein (Feuer,
   Morgenlicht), Waldgrün, Nachtdunkel. Schrift: Alegreya + Alegreya Sans.
   ===================================================================== */
:root {
  --papier:    #f4eee3;
  --flaeche:   #fdf9f2;
  --tinte:     #2a2119;
  --tinte-m:   #5d4f43;
  --glut:      #a8531f;   /* Bernstein-Akzent (Links, Buttons) */
  --glut-tief: #86401a;
  --wald:      #4e5a3d;
  --nacht:     #24201b;   /* dunkle Sektionen */
  --nacht-2:   #1a1714;
  --gold-hell: #e0a95a;   /* Akzent auf dunklen Flächen */
  --linie:     #e6dccb;
  --radius:    14px;
  --schatten:  0 10px 30px rgba(41, 36, 27, .10);
  --termine-akzent: var(--glut);
  --termine-datum-bg: var(--wald);
  --termine-flaeche: var(--flaeche);
  --termine-linie: var(--linie);
  --termine-text: var(--tinte);
  --termine-text-2: var(--tinte-m);
}

/* ---------- Reset & Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  font-family: 'Alegreya Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 1.075rem; line-height: 1.65;
  color: var(--tinte); background: var(--papier);
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: 'Alegreya', Georgia, serif;
  font-weight: 700; line-height: 1.18; color: var(--tinte);
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.28rem; }
p + p { margin-top: .9em; }
a { color: var(--glut); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--glut-tief); }
::selection { background: var(--glut); color: #fff; }
:focus-visible { outline: 3px solid var(--glut); outline-offset: 2px; border-radius: 3px; }
ul { padding-left: 1.2em; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.wrap--schmal { max-width: 820px; }

/* ---------- Kopf / Navigation ---------- */
/* Dunkle Kopfzeile wie die Altseite: weisses Logo (vision-logo.png), Menue, Adler rechts */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: var(--nacht);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; }
.marke { display: flex; align-items: center; text-decoration: none; color: #fff; flex: none; }
.marke img { height: 76px; width: auto; display: block; }
.marke svg { width: 40px; height: 40px; flex: none; }   /* Schwesterseite bogenbau.jetzt (SVG-Logo, leitet dieses CSS ab) */
.kopf__adler { display: none; }
@media (min-width: 1180px) { .kopf__adler { display: block; height: 66px; width: auto; margin-left: 4px; flex: none; } }
@media (max-width: 860px) { .kopf__zeile { min-height: 76px; } .marke img { height: 60px; } }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-weight: 700; text-decoration: none; border-radius: 999px; padding: .7em 1.5em; border: 2px solid transparent; cursor: pointer; font-size: 1rem; font-family: inherit; }
.btn--primaer { background: var(--glut); color: #fff; }
.btn--primaer:hover { background: var(--glut-tief); color: #fff; }
.btn--ghost { border-color: var(--glut); color: var(--glut-tief); background: transparent; }
.btn--ghost:hover { background: var(--glut); color: #fff; }
.hero .btn--ghost, .sektion--dunkel .btn--ghost { border-color: #fff; color: #fff; }
.hero .btn--ghost:hover, .sektion--dunkel .btn--ghost:hover { background: #fff; color: var(--nacht); }
.btn--gross { padding: .85em 1.9em; font-size: 1.08rem; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: clamp(520px, 78vh, 760px); display: flex; align-items: flex-end; color: #fff; background: var(--nacht); padding-top: 96px; }
.hero__bild { position: absolute; inset: 0; z-index: 0; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(27,22,15,.28) 0%, rgba(27,22,15,.18) 45%, rgba(23,19,13,.78) 100%); }
.hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(40px, 7vh, 84px); }
.hero h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 22px rgba(0,0,0,.45); }
/* Startseite 07.10.2026 (Joe): zweite Zeile der Hauptueberschrift etwas kleiner */
.hero h1.hero__h1--lang { max-width: 23ch; font-size: clamp(2rem, 4.2vw, 3rem); text-wrap: balance; }
.hero h1 .hero__h1-zeile { display: block; font-size: .64em; line-height: 1.25; margin-top: .45em; max-width: 34ch; }
.hero__zeile { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 52ch; margin-top: 1rem; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.hero__ort { text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; font-weight: 700; color: var(--gold-hell); margin-bottom: .8rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---------- Sektionen ---------- */
.sektion { padding: clamp(56px, 9vw, 104px) 0; }
.sektion--flaeche { background: var(--flaeche); border-block: 1px solid var(--linie); }
.sektion--dunkel { background: var(--nacht); color: #eee7d9; }
.sektion--dunkel h2, .sektion--dunkel h3 { color: #fff; }
.sektion--dunkel a { color: var(--gold-hell); }
.sektion--wald { background: var(--wald); color: #edeadf; }
.sektion--wald h2, .sektion--wald h3 { color: #fff; }
.sektion--wald a { color: var(--gold-hell); }
.vorzeile { text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; font-weight: 700; color: var(--glut); margin-bottom: .55rem; }
.sektion--dunkel .vorzeile, .sektion--wald .vorzeile { color: var(--gold-hell); }
.sektion__kopf { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sektion__kopf--mitte { margin-inline: auto; text-align: center; }
.leise { color: var(--tinte-m); }
.sektion--dunkel .leise, .sektion--wald .leise { color: #cfc8b6; }

/* ---------- Karten / Raster ---------- */
.raster { display: grid; gap: clamp(18px, 2.6vw, 30px); }
.raster > * { min-width: 0; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.karte:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(41,36,27,.16); }
.karte__bild { aspect-ratio: 16 / 10; overflow: hidden; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.karte__rumpf { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.karte__rumpf p { color: var(--tinte-m); }
.karte__fuss { margin-top: auto; padding-top: .6rem; }
.karte h3 a { color: var(--tinte); text-decoration: none; }
.karte h3 a:hover { color: var(--glut); }
.badge { display: inline-block; background: var(--papier); border: 1px solid var(--linie); color: var(--tinte-m); font-size: .82rem; font-weight: 700; border-radius: 999px; padding: .18em .8em; }

/* ---------- Medien-Splits ---------- */
.split { display: grid; gap: clamp(22px, 4vw, 54px); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } .split--breit { grid-template-columns: 3fr 2fr; } }
.split__bild img { border-radius: var(--radius); box-shadow: var(--schatten); width: 100%; }
.rund { border-radius: 50% !important; aspect-ratio: 1; object-fit: cover; }

/* ---------- Zitate ---------- */
.zitat { font-family: 'Alegreya', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.45; max-width: 30ch; margin-inline: auto; text-align: center; }
.zitat footer { font-family: 'Alegreya Sans', sans-serif; font-style: normal; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 1.1rem; color: var(--gold-hell); }
blockquote.einschub { border-left: 4px solid var(--glut); padding: .4em 0 .4em 1.1em; font-style: italic; font-family: 'Alegreya', Georgia, serif; font-size: 1.12rem; color: var(--tinte-m); margin: 1.2em 0; }
blockquote.einschub footer { font-style: normal; font-family: 'Alegreya Sans', sans-serif; font-size: .88rem; margin-top: .5em; }

/* ---------- Ablauf (3 Phasen) ---------- */
.phasen { counter-reset: phase; }
.phase { position: relative; padding-left: 64px; margin-bottom: clamp(26px, 4vw, 40px); }
.phase::before { counter-increment: phase; content: counter(phase); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--wald); color: #fff; font-family: 'Alegreya', serif; font-weight: 700; font-size: 1.3rem; display: grid; place-items: center; }
.phase h3 { margin-bottom: .35rem; }
.phase p { color: var(--tinte-m); }

/* ---------- Info-Kästen ---------- */
.kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); box-shadow: var(--schatten); }
.kasten--wald { background: var(--wald); border-color: var(--wald); color: #edeadf; }
.kasten--wald h3, .kasten--wald h4 { color: #fff; }
.kasten--wald a { color: var(--gold-hell); }
.fakten { list-style: none; padding: 0; display: grid; gap: .55rem; }
.fakten li { padding-left: 1.5em; position: relative; }
.fakten li::before { content: ""; position: absolute; left: 0; top: .5em; width: .65em; height: .65em; border-radius: 50%; background: var(--glut); }
.sektion--dunkel .fakten li::before, .sektion--wald .fakten li::before, .kasten--wald .fakten li::before { background: var(--gold-hell); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--linie); padding: 1rem 0; }
.faq summary { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.15rem; cursor: pointer; list-style: none; position: relative; padding-right: 2.2em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2em; top: 50%; transform: translateY(-50%); font-size: 1.5em; color: var(--glut); font-family: 'Alegreya Sans', sans-serif; font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: .7rem; color: var(--tinte-m); max-width: 65ch; }

/* ---------- Bänder (schmale Panoramabilder) ---------- */
.band { margin: 0; }
.band img { width: 100%; height: clamp(180px, 30vw, 320px); object-fit: cover; }
.band--frei img { height: auto; }

/* ---------- Formular ---------- */
.form { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(22px, 3.4vw, 36px); box-shadow: var(--schatten); }
.form h3 { margin-bottom: 1rem; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field label { font-weight: 700; font-size: .95rem; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--tinte); background: #fff;
  border: 1px solid #cfc5ae; border-radius: 8px; padding: .65em .8em; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--glut); outline-offset: 1px; }
.hp-field { position: absolute; left: -9999px; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 18px; font-size: .95rem; }
.consent-row input { margin-top: .3em; }
.form__status { margin-top: 14px; font-weight: 700; }
.form__status.is-ok { color: #2b6a3f; }
.form__status.is-err { color: #a12b1e; }
.formular__ziel { display: none; margin-top: 14px; font-weight: 700; }
.formular__ziel:target { display: block; }
.formular__ziel--ok { color: #2b6a3f; }
.formular__ziel--fehler { color: #a12b1e; }

/* ---------- Kontaktzeile ---------- */
.kontaktwege { list-style: none; padding: 0; display: grid; gap: .9rem; }
.kontaktwege a { font-weight: 700; }


/* ---------- Blog ---------- */
.beitrag__inhalt { max-width: 720px; }
.beitrag__inhalt h2 { margin-top: 1.6em; margin-bottom: .5em; }
.beitrag__inhalt h3 { margin-top: 1.3em; margin-bottom: .4em; }
.beitrag__inhalt ul { margin: .8em 0; }
.beitrag__inhalt blockquote { border-left: 4px solid var(--glut); padding: .4em 0 .4em 1.1em; font-style: italic; font-family: 'Alegreya', Georgia, serif; color: var(--tinte-m); margin: 1.2em 0; }
.beitrag__inhalt img { border-radius: var(--radius); margin: 1.4em 0; }
.beitrag__meta { color: var(--tinte-m); font-size: .95rem; margin-bottom: 1.6rem; }
/* (.blog-liste-Raster hier entfernt 16.09.2026: kollidierte mit der Kartenliste aus blog-vorlage.html) */


/* ---------- Fußzeile ---------- */
.fuss { background: var(--nacht-2); color: #d9d2c0; padding: clamp(44px, 7vw, 72px) 0 28px; }
.fuss h4 { color: #fff; font-size: 1.05rem; margin-bottom: .8rem; }
.fuss a { color: #d9d2c0; text-decoration: none; }
.fuss a:hover { color: var(--gold-hell); text-decoration: underline; }
.fuss__raster { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); margin-bottom: 38px; }
.fuss__raster > * { min-width: 0; }
.fuss ul { list-style: none; padding: 0; display: grid; gap: .45rem; }
.fuss__zeile { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; font-size: .92rem; }
.fuss__zeile ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.credit { opacity: .55; font-size: .85em; }
.credit:hover { opacity: 1; }

/* ---------- Entwurfs-Badge ---------- */
.entwurf-badge { position: fixed; right: 14px; bottom: 14px; z-index: 80; background: var(--nacht); color: #fff; text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .06em; padding: .5em 1em; border-radius: 999px; opacity: .85; }
.entwurf-badge:hover { opacity: 1; color: var(--gold-hell); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Unterseiten-Kopfbereich ---------- */
.seitenkopf { padding: clamp(130px, 18vw, 180px) 0 clamp(30px, 5vw, 54px); }
.seitenkopf--band { position: relative; color: #fff; background: var(--nacht); display: flex; align-items: flex-end; min-height: 340px; padding: 0; }
.seitenkopf--band .seitenkopf__bild { position: absolute; inset: 0; }
.seitenkopf--band .seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf--band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,22,15,.25), rgba(23,19,13,.72)); }
.seitenkopf--band .wrap { position: relative; z-index: 2; padding-top: 140px; padding-bottom: 34px; width: 100%; }
.seitenkopf--band h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.seitenkopf--band .leise { color: #eee3cd; text-shadow: 0 1px 10px rgba(0,0,0,.6); }

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .hero { min-height: 560px; }
  .split { grid-template-columns: 1fr; }
}

/* =====================================================================
   Ergaenzungen 16.09.2026: zusammengefuehrte Seite (Visionssuche + Bogenbau)
   ===================================================================== */
/* ---------- Menue-Baustein: Kundenpalette + Desktop-Darstellung ---------- */
:root {
  --menue-hg: #fdf9f2; --menue-farbe: #2a2119; --menue-linie: #e6dccb;
  --menue-schleier: rgba(27, 22, 15, .6); --menue-burger: #fff;
  --menue-burger-offen: #2a2119; --menue-kopf: 76px; --menue-oben: 0px;
  --menue-klapp-hg: #fffdf8; --menue-klapp-hover: #f3ecdd;
  --rot: var(--glut); --rund: 14px; --rund-s: 8px;
}
.menue { display: flex; align-items: center; gap: clamp(6px, 1.2vw, 18px); }
.menue a { text-decoration: none; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.menue a.btn { padding: .55em 1.15em; border-radius: 999px; }
.menue a.btn--primaer { background: var(--glut); color: #fff; }
.menue a.btn--primaer:hover { background: var(--glut-tief); color: #fff; }
/* Desktop: weisse Eintraege auf der dunklen Kopfzeile, Aufklappmenues hell (Baustein-Tokens oben) */
@media (min-width: 861px) {
  .menue > a:not(.btn), .menue-gruppe > a, .menue-gruppe__pfeil { color: #fff; }
  .menue > a:not(.btn):hover, .menue-gruppe > a:hover, .menue-gruppe:hover > a { color: var(--gold-hell); }
  .menue-gruppe--aktiv > a { color: var(--gold-hell); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .menue-gruppe > a { padding: 6px 2px; }
  .menue-untermenue a { white-space: normal; max-width: 380px; font-size: .97rem; }
  .menue-untermenue a.ebene2 { padding-left: 2.4em; font-weight: 500; }
  .menue-untermenue a.ebene2::before { content: "– "; color: var(--tinte-m); }
}
@media (max-width: 860px) {
  .menue-untermenue a.ebene2 { padding-left: 1.1rem; }
}
/* Header heisst hier .kopf (Baustein erwartet .header): X-Knopf ueber den Schleier heben */
body.menue-offen .kopf { z-index: 206; }
body.menue-offen .entwurf-badge { visibility: hidden; }

/* ---------- Kapitel-Navigation (Unterseiten eines Bereichs) ---------- */
.kapitel { background: var(--flaeche); border-bottom: 1px solid var(--linie); position: relative; z-index: 3; }
.kapitel .wrap { display: flex; align-items: baseline; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.kapitel .wrap::-webkit-scrollbar { display: none; }
.kapitel__titel { font-family: 'Alegreya', Georgia, serif; font-weight: 700; color: var(--wald); white-space: nowrap; padding: 12px 0; }
.kapitel ul { list-style: none; padding: 0; display: flex; gap: 4px; }
@media (min-width: 861px) { .kapitel ul { flex-wrap: wrap; gap: 0; } .kapitel li a { padding-left: 6px; padding-right: 6px; font-size: .93rem; } }   /* 06.10.2026: 9 Formate passen bei 1280 px in eine Zeile */
/* 05.10.2026: baseline statt center - bricht die Liste am Laptop um (Visionssuche: 10 Punkte), steht der Titel
   auf Hoehe der ersten Zeile statt mittig zwischen beiden; schmalere Abstaende -> passt bei 1440 px in eine Zeile */
.seitenkopf--band .vorzeile { color: var(--gold-hell); }
.kapitel a { display: block; white-space: nowrap; padding: 12px 10px; text-decoration: none; color: var(--tinte-m); font-weight: 700; font-size: .95rem; border-bottom: 3px solid transparent; }
.kapitel a:hover { color: var(--glut); }
.kapitel a[aria-current="page"] { color: var(--glut); border-bottom-color: var(--glut); }

/* ---------- Inhaltstexte (1:1 aus den Altseiten) ---------- */
.sektion--text { padding: clamp(40px, 6vw, 72px) 0; }
.sektion--kompakt { padding: clamp(28px, 4vw, 48px) 0; }
.inhalt h2 { margin: 1.6em 0 .55em; }
.inhalt h2:first-child, .inhalt > h2:first-child { margin-top: 0; }
.inhalt .vorzeile + h2, .inhalt .vorzeile + h3 { margin-top: .1em; }   /* 07.10.2026: Vorzeile gehoert zur Ueberschrift - vorher 1,6em Luecke dazwischen */
.inhalt h3 { margin: 1.4em 0 .4em; }
.inhalt h4 { margin: 1.2em 0 .3em; font-size: 1.05rem; }
.inhalt p { margin: 0 0 1em; }
.inhalt ul, .inhalt ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.inhalt ul ul { margin: .3em 0 .2em; }
.inhalt li { margin-bottom: .35em; }
.inhalt hr { border: 0; border-top: 1px solid var(--linie); margin: 2em 0; }
.inhalt blockquote { border-left: 4px solid var(--glut); padding: .5em 0 .5em 1.2em; font-family: 'Alegreya', Georgia, serif; font-style: italic; font-size: 1.15rem; color: var(--tinte-m); margin: 1.4em 0; }
.inhalt blockquote p { margin-bottom: .6em; }
.inhalt blockquote footer { font-family: 'Alegreya Sans', sans-serif; font-style: normal; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wald); }
.inhalt blockquote.stimme { border-left-color: var(--wald); font-size: 1.08rem; }
.inhalt .figur { margin: 1.6em 0; }
.inhalt .figur img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); }
.inhalt .figur--band img { border-radius: 10px; box-shadow: none; }
.inhalt .figur--klein { max-width: 320px; }
.inhalt .figur--klein img { width: auto; max-width: 100%; box-shadow: none; }
.inhalt figcaption { font-size: .92rem; color: var(--tinte-m); margin-top: .5em; }
.inhalt .kontaktzeile { font-weight: 700; }
.inhalt h2.frei { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; }
.kasten.inhalt h3 { margin-top: 0; }
.kasten.inhalt h4 { font-size: 1rem; }
.kasten .kontaktzeile { margin-bottom: .9rem; font-size: 1.05rem; }
.kasten .kontaktzeile a { color: var(--gold-hell); }
.knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.kasten--wald .btn--ghost { border-color: var(--gold-hell); color: #fff; }
.kasten--wald .btn--ghost:hover { background: var(--gold-hell); color: var(--nacht); }
.kasten--wald h2 { color: #fff; }

/* ---------- Galerie-Raster (Klick = Lightbox, Galerie-Baustein) ---------- */
.galerie { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); margin: 1.4em 0; }
.galerie__bild { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--linie); }
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.galerie__bild:hover img { transform: scale(1.04); }
.galerie__text { color: var(--tinte-m); margin: .6em 0 1.6em; }
@media (max-width: 600px) { .galerie { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ---------- Startseite: zwei Welten ---------- */
.welt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); display: flex; flex-direction: column; }
.welt__bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.welt__bild img { width: 100%; height: 100%; object-fit: cover; }
.welt__rumpf { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: .7rem; }
.welt__rumpf h2 a { color: var(--tinte); text-decoration: none; }
.welt__rumpf h2 a:hover { color: var(--glut); }
.welt__rumpf .btn { margin-top: .4rem; }
.zitat--lang { max-width: 44ch; text-align: left; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.zitat--lang p { margin-bottom: 1em; }
.zitat--lang footer { text-align: right; }
blockquote.einschub--hell { border-left-color: var(--gold-hell); color: #edeadf; }

/* ---------- Anmeldewege (Kontaktseite): drei Kaesten, Knopf unten buendig ---------- */
.anmeldewege .kasten { display: flex; flex-direction: column; }
.anmeldewege .kasten h3 { margin: .2rem 0 .6rem; }
.anmeldewege .kasten p:last-child { margin-top: auto; padding-top: .6rem; }
.kontaktwege li strong { color: var(--wald); }

/* ---------- Termin-Modul: Projektlook ---------- */
:root { --termine-seite-innen: 0; }
/* (.termin-liste { display: block } entfernt 05.10.2026 - schaltete das Kartenraster der Terminuebersicht ab) */
.termine__monat { margin: 1.6em 0 .6em; }

/* ---------- Galerie-Baustein (E:/Websites/_Bausteine/Galerie/galerie.css, unveraendert) ---------- */
/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.galerie img{aspect-ratio:16/9;object-fit:cover;border-radius:var(--rund-s);width:100%}
.galerie--drei{grid-template-columns:repeat(3,1fr);gap:1.1rem}
.galerie__bild{margin:0;border-radius:var(--rund);overflow:hidden;background:#f0f0f0}
.galerie__bild img{aspect-ratio:3/2;border-radius:0;display:block;transition:transform .3s ease}
.galerie__bild:hover img{transform:scale(1.03)}
@media (max-width:900px){.galerie--drei{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.galerie--drei{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.galerie__bild img{transition:none}
  .galerie__bild:hover img{transform:none}}

/* ---------- Bilder-Galerie (Lightbox) ---------- */
[data-galerie] img{cursor:zoom-in}
[data-galerie] img:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(10,10,10,.95);
  display:flex;align-items:center;justify-content:center;padding:4rem 1rem 5.5rem}
.lightbox[hidden]{display:none}
.lightbox__bild{max-width:min(1400px,94vw);max-height:78vh;width:auto;height:auto;
  border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.lightbox__zeile{position:absolute;left:0;right:0;bottom:1.3rem;text-align:center;
  color:#fff;font-size:.97rem;padding:0 4.5rem;margin:0}
.lightbox__zaehler{display:block;color:#c9c9c9;font-size:.86rem;margin-top:.25rem}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);color:#fff;width:52px;height:52px;border-radius:50%;
  cursor:pointer;font-size:1.6rem;line-height:1;display:grid;place-items:center;
  transition:background .18s,border-color .18s}
.lightbox button:hover,.lightbox button:focus-visible{background:var(--rot);border-color:var(--rot)}
.lightbox__zu{top:1.1rem;right:1.1rem;font-size:1.9rem}
.lightbox__vor{right:1.1rem;top:50%;transform:translateY(-50%)}
.lightbox__zurueck{left:1.1rem;top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .lightbox{padding:3.6rem .5rem 6.5rem}
  .lightbox__bild{max-height:66vh}
  .lightbox__zeile{padding:0 1rem}
  .lightbox button{width:44px;height:44px;font-size:1.35rem}
  .lightbox__vor{right:.5rem}
  .lightbox__zurueck{left:.5rem}
}

/* =====================================================================
   Umbau 16.09.2026 abends: Aufbau nach dem Menue der Altseite, Knoepfe der
   Altseite, Newsletter, Fusszeile mit Terminen, Seminar-Anmeldeformular
   ===================================================================== */
/* Knopfgruppen der Altseite (wp-block-buttons) */
.inhalt .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2em 0 1.6em; }
.inhalt .knoepfe .btn { font-size: .95rem; padding: .6em 1.2em; }
.inhalt mark { background: #f6e2b3; color: inherit; padding: 0 .15em; border-radius: 3px; }
.inhalt .mitte { text-align: center; }
.inhalt .rechts { text-align: right; }
.inhalt blockquote.rechts { text-align: left; }
.linkliste { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: .45rem; }
.linkliste li { padding-left: 1.3em; position: relative; }
.linkliste li::before { content: "→"; position: absolute; left: 0; color: var(--glut); }
.linkliste a { font-weight: 700; text-decoration: none; }
.linkliste a:hover { text-decoration: underline; }
.linkliste .leise { font-size: .88rem; margin-left: .4em; }

/* Zitat-Band der Startseite mit dem Adler der Altseite */
.zitat-band { position: relative; overflow: hidden; }
.zitat-band__adler { position: absolute; right: 4%; top: 8%; width: clamp(90px, 13vw, 180px); height: auto; opacity: .92; pointer-events: none; }
@media (max-width: 720px) { .zitat-band__adler { width: 80px; right: 8px; top: 12px; opacity: .8; } }

/* Team-Karten */
.personen { margin-top: clamp(20px, 3vw, 36px); }
.person { text-align: center; }
.person img { width: 176px; height: 176px; border-radius: 50%; object-fit: cover; object-position: center 20%; margin: 0 auto 1rem; box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.person h3 a { color: #fff; text-decoration: none; }
.person h3 a:hover { color: var(--gold-hell); }
.person p { color: #cfc8b6; margin-top: .3rem; }

/* Auswahlfelder (Seminarauswahl, Interesse/Anmeldung, Erreichbarkeit) */
fieldset.field { border: 0; padding: 0; margin: 0 0 16px; }
fieldset.field legend { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; padding: 0; }
.wahl label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: 1rem; padding: .25em 0; cursor: pointer; }
.wahl input { margin-top: .3em; flex: none; width: 1.1em; height: 1.1em; accent-color: var(--glut); }
.wahl--reihe { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.wahl--reihe legend { width: 100%; }
.consent-row input { accent-color: var(--glut); }

/* Newsletter-Formular (Startseite/Kontakt + kompakt in der Fusszeile) */
.newsletter .btn { margin-top: .2rem; }
.fuss .form { background: transparent; border: 1px solid rgba(255,255,255,.16); box-shadow: none; padding: 18px; }
.fuss .field label { color: #fff; }
.fuss .field input { background: #fff; border-color: transparent; }
.fuss .consent-row { color: #d9d2c0; font-size: .88rem; }
.fuss .consent-row a { color: var(--gold-hell); }
.fuss .form__status.is-ok { color: #b9e4c4; }
.fuss .form__status.is-err { color: #f4b8ae; }
.fuss .fuss__raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Termin-Widget in der Fusszeile (dunkle Flaeche) */
.fuss #termine-liste { --termine-flaeche: #26302a; --termine-text: #f1ece0; --termine-text-2: #cfc8b6; --termine-linie: rgba(255,255,255,.14); --termine-akzent: var(--gold-hell); --termine-datum-bg: var(--glut); font-size: .95rem; }
.fuss #termine-liste a { color: var(--gold-hell); }
.kasten--wald .leise { color: #d7d0bd; }
/* Termin-Widget in der Fusszeile: Knoepfe lesbar, Datumsfeld ruhig */
.fuss #termine-liste { --termine-datum-bg: rgba(255,255,255,.14); }
.fuss #termine-liste .termin__link, .fuss #termine-liste .termine__mehr a { background: var(--gold-hell); color: var(--nacht) !important; }
.fuss #termine-liste .termin__info { display: none; }
.fuss #termine-liste .termin__meta { font-size: .82rem; }
.fuss #termine-liste .termin__titel { font-size: 1.02rem; }
/* Aufklappbare Anrisse auf der Startseite (Joe, Visionssuche) - man bleibt auf der Seite */
.faq { margin: 1.2rem 0 1.4rem; border-top: 1px solid var(--linie); }
.faq--kompakt summary { font-size: 1.05rem; }
.faq details p + p { margin-top: .6rem; }
.faq details p a { font-weight: 700; }
.faq summary:hover { color: var(--glut); }
/* Fusszeile: Termine als schlanke Zeilen statt Karten - die Spalte ist nur ~330 px breit,
   die Karte mit gestrecktem Datumsfeld wurde dort zum grauen Turm (Benjamin, 16.09. abends) */
.fuss #termine-liste .termine__list { gap: 0; max-width: none; }
.fuss #termine-liste .termin { display: block; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); border-radius: 0; padding: 12px 0; box-shadow: none; }
.fuss #termine-liste .termin:hover { transform: none; box-shadow: none; }
.fuss #termine-liste .termin__date { width: auto; flex-direction: row; gap: .4em; align-items: baseline; justify-content: flex-start; background: transparent; color: var(--gold-hell); padding: 0; margin: 0 0 .2em; border-radius: 0; line-height: 1.2; }
.fuss #termine-liste .termin__wd { opacity: 1; font-size: .8rem; }
.fuss #termine-liste .termin__tag { font-size: 1.05rem; margin: 0; }
.fuss #termine-liste .termin__mon { opacity: 1; font-size: .8rem; }
.fuss #termine-liste .termin__body { align-self: auto; }
.fuss #termine-liste .termin__titel { font-size: 1rem; margin: 0 0 .15em; }
.fuss #termine-liste .termin__kat { display: none; }
.fuss #termine-liste .termin__wdh { color: var(--gold-hell); }
.fuss #termine-liste .termin__link { margin-top: .45em; font-size: .85rem; padding: 6px 14px; }
.fuss #termine-liste .termine__mehr { margin: 14px 0 0; text-align: left; }
/* Kleine Altseiten-Bilder in natuerlicher Groesse (max-width steht inline am figure), Bilder mitten im Text */
.inhalt .figur--klein { max-width: 100%; }
.inhalt .inline-bild { display: block; margin: 1em 0; border-radius: 10px; max-width: 100%; height: auto; }
.form h2 { font-size: 1.28rem; margin-bottom: 1rem; }
/* Fehlerseite */
.fehlerseite { text-align: center; padding: clamp(150px, 22vw, 220px) 0 clamp(60px, 9vw, 110px); }
.fehlerseite p { max-width: 52ch; margin-inline: auto; }

/* =====================================================================
   Seitenkopf geteilt (05.10.2026): Titel auf dunkler Flaeche links, Foto rechts in
   voller Hoehe und Aufloesung. Ersetzt den 340-px-Streifen ueber die ganze Breite,
   der bei 1920 px nur ein Drittel des Fotos zeigte und es hochskalierte.
   ===================================================================== */
:root { --kopfhoehe: 96px; }
@media (max-width: 860px) { :root { --kopfhoehe: 76px; } }
.seitenkopf.seitenkopf--split {
  --wrapb: min(1120px, 100vw);
  display: grid; padding: var(--kopfhoehe) 0 0; min-height: 0;
  grid-template-columns: calc((100vw - var(--wrapb)) / 2 + var(--wrapb) * .5) minmax(0, 1fr);
  grid-template-rows: minmax(clamp(360px, 52vh, 520px), auto);
  background: var(--nacht); color: #eee3cd;
}
.seitenkopf--split .seitenkopf__text {
  display: flex; align-items: flex-end;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 3.5vw, 56px) clamp(32px, 4.5vw, 56px) calc((100vw - var(--wrapb)) / 2 + clamp(16px, 4vw, 32px));
}
.seitenkopf--split .seitenkopf__innen { max-width: 560px; }
.seitenkopf--split h1 { color: #fff; font-size: clamp(2rem, 3.1vw, 2.9rem); text-wrap: pretty; }
.seitenkopf--split .vorzeile { color: var(--gold-hell); }
.seitenkopf--split .leise { color: #d9d0bd; margin-top: .9rem; font-size: 1.08rem; }
.seitenkopf--split .seitenkopf__bild { position: relative; overflow: hidden; min-height: 280px; background: var(--nacht-2); }
.seitenkopf--split .seitenkopf__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* grosse Variante (Startseite bogenbau.jetzt) */
.seitenkopf.seitenkopf--hero { grid-template-columns: calc((100vw - var(--wrapb)) / 2 + var(--wrapb) * .58) minmax(0, 1fr); grid-template-rows: minmax(clamp(520px, calc(88vh - var(--kopfhoehe)), 760px), auto); }
.seitenkopf--hero .seitenkopf__innen { max-width: 620px; }
.seitenkopf--hero h1 { font-size: clamp(2.2rem, 3.5vw, 3.3rem); text-wrap: pretty; }
.seitenkopf--hero .hero__zeile { color: #eee3cd; font-size: clamp(1.05rem, 1.4vw, 1.2rem); margin-top: 1.1rem; max-width: 46ch; text-shadow: none; }
.seitenkopf--hero .hero__ort { text-shadow: none; }
.seitenkopf--hero .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.8rem; }
.seitenkopf--hero .btn--ghost { border-color: rgba(255,255,255,.85); color: #fff; }
.seitenkopf--hero .btn--ghost:hover { background: #fff; color: var(--nacht); }
@media (max-width: 860px) {
  .seitenkopf.seitenkopf--split { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .seitenkopf--split .seitenkopf__bild { order: -1; aspect-ratio: 2 / 1; min-height: 0; }   /* 06.10.2026: flacher, vorher 16:10 */
  .seitenkopf--hero .seitenkopf__bild { aspect-ratio: 4 / 3; }
  .seitenkopf--split .seitenkopf__text { padding: 26px clamp(16px, 4vw, 32px) 32px; }
}

/* ---------- Termine auf den Angebotsseiten (06.10.2026) ----------
   Kasten "Nächste Termine" (termine.js data-termine + data-suche): Liste buendig mit der Ueberschrift,
   ohne Kategorie-Plakette (sie wiederholte auf der Nächte-Seite nur "Nächte unter Sternen"). */
.termine-angebot { margin-top: 14px; }
.termine-angebot.termine__list, .termine-angebot .termine__list { max-width: none; margin: 0; }   /* termine.js setzt die Klasse auf den Kasten selbst */
.termine-angebot .termin__kat { display: none; }
.termine-angebot .termine__mehr { text-align: left; margin-top: 16px; }
.termine-angebot .termine__leer { text-align: left; padding: 4px 0; }
.kasten .termine-angebot { margin: 10px 0 16px; }
/* Fusszeile: "Anmelden" und "Mehr erfahren" nebeneinander */
.fuss #termine-liste .termin__aktionen { margin-top: .45em; gap: 4px 14px; }
.fuss #termine-liste .termin__aktionen .termin__link { margin-top: 0; }
.fuss #termine-liste .termin__mehrlink { font-size: .85rem; }

/* ---------- Online-Anmeldung (06.10.2026, ersetzt die Word-Anmeldeformulare) ----------
   Der Anmeldeteil erscheint erst bei "Ich möchte mich gerne anmelden" (script.js, ohne JavaScript immer). */
.anmeldung-details { border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(14px, 2.6vw, 22px); margin: 2px 0 18px; background: var(--papier); min-width: 0; }
.anmeldung-details[hidden] { display: none; }
.anmeldung-details > legend { font-family: 'Alegreya', Georgia, serif; font-weight: 700; font-size: 1.12rem; padding: 0 .4em; margin-left: -.4em; }
.anmeldung-details__hinweis { color: var(--tinte-m); font-size: .92rem; margin: 0 0 12px; }
.anmeldung-details__info { color: var(--tinte-m); font-size: .9rem; margin: 0; }
.anmeldung-details details { margin: 2px 0 14px; }
.anmeldung-details summary { cursor: pointer; font-weight: 700; color: var(--glut); padding: 4px 0; }
.anmeldung-details summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.anmeldung-details__bedingungen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 8px 0 12px; }
.anmeldung-details__bedingungen h3, .anmeldung-details__bedingungen h4 { font-size: 1rem; margin: 1em 0 .3em; }
.anmeldung-details__bedingungen p, .anmeldung-details__bedingungen li,
.anmeldung-details__hilfe li { font-size: .93rem; color: var(--tinte-m); }
.anmeldung-details__bedingungen p + p { margin-top: .5em; }
.anmeldung-details__bedingungen ul, .anmeldung-details__hilfe ul { padding-left: 1.2em; margin: .4em 0; }
.anmeldung-details .consent-row { margin-bottom: 0; }
.stern[hidden] { display: none; }

/* ---------- Instagram / Facebook als Symbol + Wort (06.10.2026, Call: "Instagram!") ---------- */
.sozial { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: .9rem; }
.sozial a { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; text-decoration: none; }
.sozial a:hover span { text-decoration: underline; text-underline-offset: .2em; }
.sozial svg { width: 1.4em; height: 1.4em; flex: none; }
.sozial--gross { gap: 10px 26px; margin-top: 1.4rem; font-size: 1.08rem; }
.sozial--kasten { margin-top: 1rem; font-size: .95rem; }

/* ---------- Handy (Call 06.10.2026: "Foto und Zitate zu viel") ----------
   Zitate im Kopf und im Text kleiner und enger; das Kopffoto ist oben auf 2:1 gestellt. */
@media (max-width: 720px) {
  .seitenkopf--split .leise { font-size: .95rem; margin-top: .55rem; }
  .inhalt blockquote, .inhalt blockquote.stimme, blockquote.einschub, .beitrag__inhalt blockquote {
    font-size: 1rem; padding: .25em 0 .25em .9em; margin: 1em 0; border-left-width: 3px; }
  .inhalt blockquote footer, blockquote.einschub footer { font-size: .78rem; }
}

/* ---------- Anmeldung Schritt fuer Schritt (06.10.2026, schritte.js/.css v2 aus dem Kontaktformular-Baustein) ----------
   Die Baustein-Datei bleibt unveraendert - hier nur ihre Variablen auf Joes Palette abgebildet. */
form[data-schritte] {
  --ink: var(--tinte); --ink-m: var(--tinte-m); --line: var(--linie); --paper: #fff; --navy: #fff;
  --gold: var(--glut); --gold-deep: var(--glut-tief); --radius-s: 12px;
  --wahl-hover: #fbf3e8; --wahl-aktiv: #f8ebdc; --wahl-ring: rgba(146, 72, 24, .18);
}
.form--schritte h2 { margin-bottom: 1.1rem; }
.form--schritte .schritt legend { font-family: 'Alegreya', Georgia, serif; font-size: 1.3rem; line-height: 1.25; color: var(--tinte); margin-bottom: 14px; }
.form--schritte .wahl label { font-weight: 400; }
.form--schritte .wahl label b { font-family: 'Alegreya', Georgia, serif; font-size: 1.08rem; font-weight: 700; }
.form--schritte .schritt-hinweis { margin: 12px 0 0; }
.form--schritte .schritt-nav .schritt-weiter { color: #fff; }
/* einfache Kaestchen/Knoepfe in einem Schritt (Erreichbarkeit, Verpflegung, Fotos) - NICHT als Karten */
.optionen label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: 1rem; padding: .25em 0; cursor: pointer; }
.optionen input { margin-top: .3em; flex: none; width: 1.1em; height: 1.1em; accent-color: var(--glut); }
.optionen--reihe { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.optionen--reihe legend { width: 100%; }
.form--schritte .anmeldung-details { margin-top: 6px; }

/* ---------- Bedingungen am Angebot (Lavanttal, Ballcourt) - 1:1 aus den frueheren Word-Formularen ---------- */
details.bedingungen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 10px 0; margin: 14px 0 6px; }
details.bedingungen summary { cursor: pointer; font-weight: 700; color: var(--glut); }
details.bedingungen summary:hover { text-decoration: underline; text-underline-offset: .2em; }
details.bedingungen p, details.bedingungen h4 { margin-top: .7em; }
details.bedingungen p { font-size: .95rem; color: var(--tinte-m); }

/* ---------- Infoabend als erster Schritt (06.10.2026: Haupt-Knopf der Startseite) ---------- */
.hero__direkt { margin-top: 1.1rem; color: #eee3cd; font-size: 1rem; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.hero__direkt a { color: #fff; font-weight: 700; }
.infoabend-band .kasten h3 { margin-bottom: .4rem; }
.infoabend-band__direkt { margin-top: 1rem; }

/* ---------- Kontrast (07.10.2026): Haupt-Knopf in gruenen Kaesten ----------
   ".kasten--wald a" faerbte auch den orangen Knopf gold - 2,6:1 (bogenbau) bzw. 3,2:1 (visionssuche), zu wenig. */
.kasten--wald .btn--primaer, .sektion--wald .btn--primaer, .kasten--wald .btn--primaer:hover { color: #fff; }
/* Startseite bogenbau.jetzt: auf dem Handy "Auf einen Blick" (Preise, Dauer) vor dem langen Kurstext */
@media (max-width: 860px) { .split--kasten-zuerst > .reveal:last-child { order: -1; } }

/* =====================================================================
   Bogenbau.jetzt: dunkler Werkstatt-Kopf, Karte, Rezensionen
   ===================================================================== */
.kopf { border-bottom-color: rgba(255,255,255,.08); }
/* Kopfzeile 84 px mit dem freigestellten Logo der alten bogenbau.jetzt (weiss auf dunkel) */
.kopf__zeile { min-height: 84px; }
:root { --kopfhoehe: 84px; }
@media (max-width: 860px) { :root { --kopfhoehe: 74px; } }
.marke img { height: 66px; }
@media (max-width: 860px) { .kopf__zeile { min-height: 74px; } .marke img { height: 56px; } }
:root { --menue-kopf: 74px; }
html { scroll-padding-top: 108px; }
.hero { padding-top: 84px; }
.seitenkopf { padding-top: clamp(124px, 18vw, 172px); }
.seitenkopf--band .wrap { padding-top: 128px; }
/* Videos: eigenes MP4 (Gaestebuch, Wie es begonnen hat) und YouTube erst auf Klick (Bogendesigns) */
.video--extern .video__platzhalter { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); text-align: center; box-shadow: var(--schatten); }
.video--extern .video__platzhalter p { margin: 0 0 .8em; }
.video--extern .video__platzhalter .btn { margin: .4em 0 .8em; }
.video__rahmen { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--schatten); }
.video__rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
.marke { color: #f5eee2; }
.marke__name > span { color: var(--gold-hell); }
.marke__name small { color: #cdbfae; }
.menue a { color: #f5eee2; }
.menue a:hover { color: var(--gold-hell); }
@media (max-width: 860px) { .menue > a:not(.btn) { color: var(--menue-farbe); } }
.hero--werkstatt { min-height: clamp(560px, 82vh, 820px); }
.hero--werkstatt::after { background: linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.18) 40%, rgba(20,16,12,.84) 100%); }
@media (min-width: 861px) {
  .hero--werkstatt::after { background: linear-gradient(90deg, rgba(20,16,12,.06) 0%, rgba(20,16,12,.22) 42%, rgba(20,16,12,.80) 70%, rgba(20,16,12,.86) 100%); }
  .hero--werkstatt .wrap { display: flex; justify-content: flex-end; align-items: flex-end; }
  .hero--werkstatt .hero__text { max-width: 600px; }
}
.hero--werkstatt .hero__bild img { object-position: 28% 45%; }
.hero--werkstatt h1 { max-width: 24ch; }
@media (max-width: 720px) { .hero--werkstatt .hero__bild img { object-position: 35% 40%; } }
.stimmen { align-items: stretch; }
.stimme { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); box-shadow: var(--schatten); margin: 0; font-family: 'Alegreya Sans', sans-serif; font-style: normal; font-size: 1.02rem; color: var(--tinte); display: flex; flex-direction: column; }
.stimme p { margin: 0 0 .8rem; }
.stimme__sterne { color: var(--gold-hell); letter-spacing: .12em; font-size: 1.1rem; margin-bottom: .6rem !important; }
.stimme footer { margin-top: auto; font-size: .9rem; color: var(--tinte-m); }
.stimme footer a { color: var(--tinte-m); }
.inhalt blockquote.stimme { border-left: 4px solid var(--wald); font-family: 'Alegreya', Georgia, serif; font-style: italic; box-shadow: none; padding: .5em 0 .5em 1.2em; border-radius: 0; background: transparent; }
/* Anfahrts-Karte (Leaflet lokal, Kacheln erst auf Klick) */
.map { position: relative; height: clamp(320px, 42vw, 460px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); border: 1px solid var(--linie);
  background: radial-gradient(circle at 1px 1px, rgba(78,90,61,.16) 1px, transparent 0) 0 0/22px 22px, linear-gradient(135deg, #ece5d6, #e2dccc); }
.map__canvas { position: absolute; inset: 0; z-index: 1; }
.map__canvas .leaflet-container { width: 100%; height: 100%; background: #e2dccc; font-family: 'Alegreya Sans', sans-serif; }
.map__laden { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; width: 100%; border: 0; cursor: pointer; background: rgba(244,238,227,.35); color: var(--tinte); text-align: center; padding: 1.2rem; transition: background .2s; font-family: inherit; }
.map__laden:hover { background: rgba(244,238,227,.12); }
.map__ic { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--flaeche); color: var(--glut); box-shadow: var(--schatten); }
.map__ic svg { width: 30px; height: 30px; }
.map__laden strong { font-family: 'Alegreya', Georgia, serif; font-size: 1.2rem; font-weight: 700; }
.map__laden small { color: var(--tinte-m); max-width: 34ch; font-size: .86rem; }
.map__laden--busy strong { opacity: .5; }
.map--geladen .map__laden { display: none; }
.map__noscript { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.map__noscript a { font-weight: 700; }
/* Video (Gaestebuch) */
.inhalt .video { margin: 1.4em 0 1.8em; }
.inhalt .video video { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--schatten); background: #000; }
/* langes Zitat zum Aufklappen (Fortgeschrittene) */
.zitat-mehr { margin: 1.2em 0; }
.zitat-mehr summary { cursor: pointer; font-family: 'Alegreya', Georgia, serif; font-style: italic; color: var(--glut); font-size: 1.05rem; }
.zitat-mehr summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.zitat-mehr[open] summary { margin-bottom: .6em; }
/* Film direkt unter dem Kopf der Startseite (07.10.2026, Benjamin): spielt stumm von selbst, "Ton einschalten" schaltet zu.
   640x360 - darum hoechstens 960 px breit (1,5-fach), nicht als Vollbild-Hintergrund. Der Link im Kopf springt hierher. */
.hero__film { margin-top: 1.3rem; }
.hero__film a { display: inline-flex; align-items: center; gap: .7em; color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.hero__film a:hover .hero__film-text { text-decoration: underline; text-underline-offset: .2em; }
.hero__film small { font-weight: 400; color: #d9d0bd; font-size: .92rem; }
.hero__film-knopf { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold-hell); color: var(--nacht); flex: none; box-shadow: 0 4px 16px rgba(0,0,0,.35); transition: transform .2s ease; }
.hero__film-knopf svg { width: 20px; height: 20px; margin-left: 3px; }
.hero__film a:hover .hero__film-knopf, .hero__film a:focus-visible .hero__film-knopf { transform: scale(1.08); }
.film { background: var(--nacht); padding: clamp(24px, 4.5vw, 52px) 0 clamp(20px, 3.5vw, 40px); }
.film__rahmen { position: relative; max-width: 960px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.film__ton { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: .55em; padding: .7em 1.15em; border: 0; border-radius: 999px;
  background: rgba(20,16,12,.8); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: background .2s ease; }
.film__ton:hover, .film__ton:focus-visible { background: var(--glut); }
.film__ton:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 2px; }
.film__ton svg { width: 22px; height: 22px; flex: none; }
.film__ton[hidden] { display: none; }
/* Ton an: Knopf nach oben rechts, unten liegen dann die Bedienelemente des Players */
.film__ton--an { left: auto; right: 14px; bottom: auto; top: 14px; padding: .5em .9em; font-size: .88rem; }
.film__unterschrift { text-align: center; color: #cdbfae; font-size: .9rem; margin: 12px 0 0; }
@media (max-width: 600px) { .film__ton { left: 10px; bottom: 10px; font-size: .92rem; padding: .6em 1em; } .film__ton--an { right: 10px; top: 10px; left: auto; bottom: auto; } }
@media (prefers-reduced-motion: reduce) { .hero__film-knopf, .film__ton { transition: none; } }