/* Prototyp 3B Gruppe und Villa Michels. Mobil zuerst. Farben provisorisch, siehe ENTSCHEIDUNGEN.md */

/* ---------- Schriften, selbst gehostet ---------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/CormorantGaramond-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/CormorantGaramond-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/CormorantGaramond-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/CormorantGaramond-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter-600-normal.woff2') format('woff2'); }
/* Ersatzdarstellung waehrend des Ladens, metrisch angenaehert */
@font-face { font-family: 'Cormorant Ersatz'; src: local('Georgia'), local('Times New Roman'); size-adjust: 88%; ascent-override: 92%; descent-override: 26%; }
@font-face { font-family: 'Inter Ersatz'; src: local('Segoe UI'), local('Arial'); size-adjust: 100%; }

/* ---------- Farben und Masse ---------- */
:root {
  --tinte: #23272A;
  --tinte-weich: #4A5054;
  --papier: #F8F5EF;
  --papier-tief: #F0EBE1;
  --weiss: #FFFFFF;
  --sandstein: #D9CFBF;
  --sandstein-tief: #B9AA8F;
  --linie: #DDD5C7;
  --salon: #2E5F58;        /* Blaugruen der Deckenmalerei in Treppenhaus und Salon */
  --salon-tief: #1F423D;
  --salbei: #7E8660;       /* Wandfarbe der Bueroraeume, Themenfarbe der bisherigen Seite */
  --salbei-tief: #5C6442;
  --salbei-hell: #E6E7DA;
  --messing: #A6813F;      /* Tuergriff aus Messing */
  --messing-tief: #7A5C27;
  --messing-hell: #F1E7D2;
  --gruen-3b: #00FF00;     /* Logo 3B laut Corporate Manual 2021, nur auf dunklem Grund oder als Linie */
  --nacht: #14201C;
  --nacht-hell: #1E2D27;
  --akzent: var(--salon);
  --akzent-tief: var(--salon-tief);
  --akzent-hell: var(--papier-tief);
  --serif: 'Cormorant Garamond', 'Cormorant Ersatz', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Inter Ersatz', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --wrap: 1180px;
  --gutter: 20px;
  --radius: 6px;
  --bogen: 50% 50% 0 0 / 40% 40% 0 0;
}
[data-bereich="events"] { --akzent: var(--messing-tief); --akzent-tief: #5E4519; --akzent-hell: var(--messing-hell); }
[data-bereich="balance"] { --akzent: var(--salbei-tief); --akzent-tief: #454B31; --akzent-hell: var(--salbei-hell); }
[data-bereich="3b"] { --akzent: var(--nacht); --akzent-tief: #000000; --akzent-hell: #E8ECE9; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--sans); font-size: 1rem; line-height: 1.6; }
img, picture, svg, video { max-width: 100%; display: block; }
picture img { width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: var(--titel-gewicht, 500); line-height: 1.12; margin: 0 0 .5em; color: var(--tinte); letter-spacing: var(--titel-spacing, -.005em); }
h1 { font-size: clamp(2.2rem, 5.2vw + 1rem, 4.4rem); }
h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.7rem); }
h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); }
p { margin: 0 0 1em; }
a { color: var(--akzent); text-underline-offset: .16em; }
a:hover { color: var(--akzent-tief); }
:focus-visible { outline: 3px solid var(--salon); outline-offset: 3px; }
[data-bereich="3b"] :focus-visible { outline-color: var(--gruen-3b); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--tinte-weich); max-width: 42rem; }
.eyebrow { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); font-weight: 600; margin: 0 0 .8em; }
.skip { position: absolute; left: -999px; top: 0; background: var(--nacht); color: #fff; padding: .6em 1em; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
main { display: block; }
section { padding-block: clamp(3rem, 7vw, 6rem); }
ul, ol { padding-left: 1.2em; }
.zentriert { text-align: center; }
.max-text { max-width: 44rem; }
small { font-size: .85em; }
strong { font-weight: 600; }

/* ---------- Schaltflaechen: Bogen als Pille ---------- */
.btn { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.2; padding: .95em 1.7em; border-radius: 999px; background: var(--akzent); color: #fff; text-decoration: none; border: 2px solid var(--akzent); transition: background .2s, border-color .2s, transform .2s; min-height: 48px; }
.btn:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); color: #fff; transform: translateY(-1px); }
.btn-sekundaer { background: transparent; color: var(--akzent); }
.btn-sekundaer:hover { background: var(--akzent-hell); color: var(--akzent-tief); }
.btn-klein { padding: .6em 1.2em; font-size: .92rem; min-height: 40px; }
.btn-hell { background: #fff; border-color: #fff; color: var(--nacht); }
.btn-hell:hover { background: var(--papier); border-color: var(--papier); color: var(--nacht); }
[data-bereich="3b"] .btn-gruen { background: var(--gruen-3b); border-color: var(--gruen-3b); color: var(--nacht); }
[data-bereich="3b"] .btn-gruen:hover { background: #B7FFB7; border-color: #B7FFB7; color: var(--nacht); }
button.btn { cursor: pointer; }

/* ---------- Prototyp-Leiste ---------- */
.proto-bar { font-size: .78rem; background: var(--nacht); color: #C8CFCB; padding: .35em var(--gutter); display: flex; gap: 1.1em; align-items: center; flex-wrap: wrap; }
.proto-bar a { color: #C8CFCB; text-decoration: none; padding: .2em 0; border-bottom: 2px solid transparent; }
.proto-bar a:hover { color: #fff; }
.proto-bar a[aria-current="true"] { color: #fff; border-bottom-color: var(--gruen-3b); }
.proto-bar-label { letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #fff; }

/* ---------- Kopf ---------- */
.site-header { background: var(--papier); border-bottom: 1px solid var(--linie); position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tinte); font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.brand img { width: 58px; height: auto; }
.brand-text small { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); font-weight: 500; margin-top: .1em; }
.brand-mark { width: 30px; height: 36px; border-radius: 999px 999px 0 0; border: 2px solid var(--akzent); border-bottom-width: 3px; display: inline-block; position: relative; }
.brand-mark::after { content: ''; position: absolute; inset: 6px 6px 0; border-radius: 999px 999px 0 0; background: var(--akzent-hell); }
.nav-toggle { background: none; border: 0; padding: 10px; cursor: pointer; display: inline-flex; flex-direction: column; gap: 5px; margin-right: -10px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--tinte); display: block; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav { display: none; width: 100%; padding-bottom: 1rem; }
.nav.offen { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.nav-list a { display: block; padding: .7em .2em; text-decoration: none; color: var(--tinte); font-weight: 500; border-bottom: 1px solid var(--linie); }
.nav-list a[aria-current="page"] { color: var(--akzent); }
.nav-list-sub { margin-top: .6rem; padding-left: 1rem; border-left: 2px solid var(--akzent-hell); }
.nav-list-sub a { font-weight: 400; font-size: .95rem; padding: .5em .2em; }
.subnav-bar { display: none; }
.site-header-meta .brand-text { font-size: 1.1rem; }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .nav { display: block; width: auto; padding: 0; }
  .nav-list { flex-direction: row; gap: 1.6rem; }
  .nav-list a { border: 0; padding: .5em 0; position: relative; }
  .nav-list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--akzent); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
  [data-bereich="3b"] .nav-list a::after { background: var(--gruen-3b); }
  .nav-mobile-sub { display: none; }
  .subnav-bar { display: block; background: var(--papier-tief); border-top: 1px solid var(--linie); }
  .subnav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; }
  .subnav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.3rem; flex-wrap: wrap; }
  .subnav-list a { text-decoration: none; color: var(--tinte-weich); font-size: .92rem; padding: .5em 0; display: inline-block; }
  .subnav-list a:hover, .subnav-list a[aria-current="page"] { color: var(--akzent-tief); text-decoration: underline; text-underline-offset: .3em; }
}

/* ---------- Fuss ---------- */
.site-footer { background: var(--nacht); color: #D6DBD8; margin-top: 3rem; }
.site-footer a { color: #fff; }
.footer-inner { display: grid; gap: 2rem; padding-block: 3rem 2rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-haus p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: #fff; }
.footer-proto { border-top: 1px solid #2C3A34; padding-block: 1rem 1.2rem; }
.proto-hinweis { font-size: .82rem; color: #A9B3AE; margin: 0; }
@media (min-width: 720px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1.4fr; } }

/* ---------- Platzhalter ---------- */
.ph { background: repeating-linear-gradient(135deg, var(--papier-tief) 0 12px, #E7E0D3 12px 24px); border: 1px dashed var(--sandstein-tief); color: var(--tinte-weich); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-size: .9rem; font-family: var(--sans); width: 100%; }
.ph span { max-width: 26ch; }
.ph.bogen { border-radius: var(--bogen); }
.ph-grid { display: grid; gap: 1rem; margin-block: 1rem; }
@media (min-width: 640px) { .ph-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.ph-liste li { margin-bottom: .4em; }
.badge { display: inline-block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: .35em .8em; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent-tief); margin-bottom: 1rem; }
.badge-geruest { background: #FFF1C2; color: #6B4E00; }
.badge-demo { background: #FFE2CF; color: #7A3400; }
.hinweis { font-size: .9rem; color: var(--tinte-weich); }
.hinweis-box { background: var(--papier-tief); border-left: 3px solid var(--akzent); padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; margin-block: 1.5rem; }
.geruest { padding-block: 2.5rem 3rem; }
.geruest-abschnitt { padding-block: 1.8rem; border-top: 1px solid var(--linie); }
.geruest-abschnitt h2 { font-size: 1.6rem; }
.geruest-cta { padding-top: 1.5rem; }

/* ---------- Bogen ---------- */
.bogen { border-radius: var(--bogen); overflow: hidden; }
.bogen img, .bogen picture { width: 100%; height: 100%; object-fit: cover; }
.bogen-bild { aspect-ratio: 4 / 5; border-radius: var(--bogen); overflow: hidden; background: var(--papier-tief); }
.bogen-bild img { width: 100%; height: 100%; object-fit: cover; }
.bogen-bild picture { height: 100%; }
.bogen-rand { position: relative; }
.bogen-rand::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: clamp(28px, 6vw, 80px); background: var(--papier); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.bogen-rand-hell::before { background: var(--papier); }

/* ---------- Bildhelden ---------- */
.hero { position: relative; overflow: hidden; padding: 0; background: var(--nacht); color: #fff; }
.hero-media { position: absolute; inset: 0; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,28,.15) 0%, rgba(20,32,28,.35) 45%, rgba(20,32,28,.82) 100%); }
.hero-inner { position: relative; z-index: 1; min-height: min(78vh, 720px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 5rem; padding-bottom: clamp(2rem, 6vw, 4rem); }
.hero h1 { color: #fff; max-width: 14ch; text-wrap: balance; }
.hero .lead { color: #E9ECEA; max-width: 36rem; }
.hero .eyebrow { color: #E4E9E6; }
.hero-aktionen { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.hero-hell { background: var(--papier); color: var(--tinte); }
.hero-hell .hero-media::after { background: linear-gradient(180deg, rgba(248,245,239,0) 40%, rgba(248,245,239,.92) 100%); }
.hero-hell h1 { color: var(--tinte); }
.hero-hell .lead { color: var(--tinte-weich); }
.hero-hell .eyebrow { color: var(--akzent); }

/* Ruhiger Held mit Bild im Bogen neben dem Text (Balance) */
.hero-ruhig { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.hero-ruhig-grid { display: grid; gap: 2rem; align-items: end; }
.hero-ruhig .bogen-bild { max-width: 420px; }
@media (min-width: 860px) { .hero-ruhig-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; } .hero-ruhig .bogen-bild { margin-left: auto; } }

/* ---------- Raster ---------- */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.zwei-spalten { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .zwei-spalten { grid-template-columns: 1fr 1fr; gap: 4rem; } .zwei-spalten.text-rechts > :first-child { order: 2; } }

/* Kacheln mit Bogen (Anlaesse, Raeume, Geschaeftsfelder) */
.kachel { text-decoration: none; color: inherit; display: block; }
.kachel .bogen-bild { margin-bottom: 1rem; transition: transform .35s; }
.kachel:hover .bogen-bild { transform: translateY(-4px); }
.kachel h3 { margin-bottom: .3em; }
.kachel p { color: var(--tinte-weich); margin: 0; font-size: .95rem; }
.kachel .mehr { display: inline-block; margin-top: .6em; font-weight: 600; color: var(--akzent); }
.kachel:hover .mehr { text-decoration: underline; }

/* ---------- Abschnitte ---------- */
.abschnitt-kopf { max-width: 42rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.abschnitt-dunkel { background: var(--nacht); color: #E3E8E5; }
.abschnitt-dunkel h2, .abschnitt-dunkel h3 { color: #fff; }
.abschnitt-dunkel .lead { color: #C9D1CD; }
.abschnitt-dunkel a { color: #fff; }
.abschnitt-sand { background: var(--papier-tief); }
.abschnitt-akzent { background: var(--akzent-hell); }
.abschnitt-schmal { padding-block: clamp(2rem, 5vw, 4rem); }

/* Zitat */
.zitat { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw + .8rem, 2.2rem); line-height: 1.3; font-style: italic; margin: 0; }
.zitat-quelle { font-family: var(--sans); font-style: normal; font-size: .9rem; color: var(--tinte-weich); margin-top: 1rem; display: block; }
.zitat-box { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 2rem 0; }

/* Fakten in einer Zeile */
.fakten { display: grid; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.fakten li { border-top: 2px solid var(--akzent); padding-top: .8rem; }
.fakten strong { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.1; white-space: nowrap; }
.fakten span { font-size: .92rem; color: var(--tinte-weich); }
@media (min-width: 640px) { .fakten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .fakten { grid-template-columns: repeat(4, 1fr); } }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .75em .8em; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-weich); }
caption { text-align: left; caption-side: top; font-size: .9rem; color: var(--tinte-weich); padding-bottom: .6em; }

/* Kapazitaeten-Uebersicht */
.raum-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.raum { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; padding: 1rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
.raum-bogen { width: 64px; height: 76px; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--papier-tief); }
.raum-bogen img { width: 100%; height: 100%; object-fit: cover; }
.raum h3 { font-size: 1.25rem; margin: 0 0 .2em; }
.raum p { margin: 0; font-size: .92rem; color: var(--tinte-weich); }
.raum .kap { font-family: var(--sans); font-weight: 600; color: var(--akzent-tief); }
@media (min-width: 860px) { .raum-liste { grid-template-columns: repeat(2, 1fr); } }

/* FAQ */
.faq-item { border-top: 1px solid var(--linie); }
.faq-item:last-child { border-bottom: 1px solid var(--linie); }
.faq-item summary { cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none; position: relative; padding-right: 2rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: .2rem; top: .9rem; font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--akzent); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-a { padding-bottom: 1rem; color: var(--tinte-weich); }

/* Ablauf (Hochzeitstag) */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ablauf li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--linie); }
.ablauf time { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.1; color: var(--akzent-tief); }
.ablauf h3 { font-size: 1.2rem; margin: 0 0 .2em; }
.ablauf p { margin: 0; color: var(--tinte-weich); font-size: .95rem; }

/* Leistungen als Liste mit Haken */
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.leistungen li { padding-left: 1.8rem; position: relative; }
.leistungen li::before { content: ''; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg); }
@media (min-width: 640px) { .leistungen { grid-template-columns: repeat(2, 1fr); } }

/* Bildpaar / Galerie */
.galerie { display: grid; gap: 1rem; }
.galerie figure { margin: 0; }
.galerie figcaption { font-size: .85rem; color: var(--tinte-weich); margin-top: .5em; }
.galerie picture img, .galerie .ph { border-radius: var(--radius); }
@media (min-width: 640px) { .galerie { grid-template-columns: repeat(2, 1fr); } .galerie .breit { grid-column: 1 / -1; } }
@media (min-width: 960px) { .galerie-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Formular ---------- */
.form { max-width: 40rem; }
.feld { margin-bottom: 1.3rem; }
.feld label, .feld legend { display: block; font-weight: 600; margin-bottom: .4em; }
.feld .hilfe { font-size: .85rem; color: var(--tinte-weich); margin: .3em 0 0; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld input[type="number"], .feld input[type="date"], .feld input[type="time"], .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 1.05rem; padding: .85em 1em; min-height: 52px; border: 1.5px solid var(--sandstein-tief); border-radius: var(--radius); background: #fff; color: var(--tinte); }
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); outline: 3px solid var(--akzent-hell); }
.feld.fehler input, .feld.fehler select, .feld.fehler textarea { border-color: #B3261E; }
.feld .fehlertext { color: #B3261E; font-size: .9rem; margin-top: .3em; display: none; }
.feld.fehler .fehlertext { display: block; }
.pflicht { color: var(--akzent); }
.optionen { display: grid; gap: .5rem; }
.option { display: flex; align-items: center; gap: .7rem; padding: .8em 1em; border: 1.5px solid var(--sandstein-tief); border-radius: var(--radius); background: #fff; cursor: pointer; min-height: 52px; }
.option:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.option input { width: 20px; height: 20px; accent-color: var(--akzent); margin: 0; }
@media (min-width: 640px) { .optionen-3 { grid-template-columns: repeat(3, 1fr); } .optionen-2 { grid-template-columns: repeat(2, 1fr); } }
.check { display: flex; gap: .8rem; align-items: flex-start; font-weight: 400; }
.check input { width: 22px; height: 22px; flex: none; margin-top: .1em; accent-color: var(--akzent); }
fieldset { border: 0; padding: 0; margin: 0 0 1.3rem; }
.form-aktionen { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }
.form-schritt[hidden] { display: none; }
.fortschritt { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 2rem; list-style: none; padding: 0; }
.fortschritt li { border-top: 4px solid var(--linie); padding-top: .5rem; font-size: .9rem; color: var(--tinte-weich); border-radius: 999px 999px 0 0; }
.fortschritt li[aria-current="step"] { border-top-color: var(--akzent); color: var(--tinte); font-weight: 600; }
.fortschritt li.fertig { border-top-color: var(--akzent); }
.zusammenfassung { background: var(--papier-tief); padding: 1rem 1.2rem; border-radius: var(--radius); font-size: .95rem; margin-bottom: 1.5rem; }
.zusammenfassung dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
.zusammenfassung dt { font-weight: 600; }
.zusammenfassung dd { margin: 0; }
.demo-hinweis-form { font-size: .85rem; color: var(--tinte-weich); }

/* ---------- Filter und Listen ---------- */
.filter { display: grid; gap: .8rem; padding: 1rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 1.5rem; }
.filter label { font-size: .85rem; font-weight: 600; display: block; margin-bottom: .3em; }
.filter select, .filter input { width: 100%; font: inherit; padding: .6em .8em; min-height: 44px; border: 1.5px solid var(--sandstein-tief); border-radius: var(--radius); background: #fff; }
.filter .check { align-items: center; min-height: 44px; }
.filter-ergebnis { font-size: .9rem; color: var(--tinte-weich); margin-bottom: 1rem; }
@media (min-width: 640px) { .filter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .filter { grid-template-columns: repeat(4, 1fr); align-items: end; } }

/* Flaechenliste */
.flaechen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.flaeche { display: grid; gap: 1rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.flaeche-bild { aspect-ratio: 16/10; background: var(--papier-tief); }
.flaeche-bild img { width: 100%; height: 100%; object-fit: cover; }
.flaeche-bild .ph { height: 100%; border: 0; }
.flaeche-text { padding: 0 1.2rem 1.2rem; }
.flaeche h3 { font-size: 1.35rem; margin-bottom: .2em; }
.flaeche .adresse { color: var(--tinte-weich); font-size: .92rem; margin-bottom: .8em; }
.flaeche dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.flaeche dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-weich); }
.flaeche dd { margin: 0; font-weight: 600; }
.flaeche .flaeche-aktionen { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.tag { display: inline-block; font-size: .78rem; padding: .25em .7em; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent-tief); font-weight: 600; }
@media (min-width: 720px) { .flaeche { grid-template-columns: 240px 1fr; } .flaeche-bild { aspect-ratio: auto; min-height: 100%; } .flaeche-text { padding: 1.2rem 1.2rem 1.2rem 0; } }

/* Kursliste */
.kurs-woche { margin-bottom: 2rem; }
.kurs-woche h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-weich); border-bottom: 1px solid var(--linie); padding-bottom: .4em; }
.kurs-liste { list-style: none; margin: 0; padding: 0; }
.kurs { display: grid; grid-template-columns: 5.2rem 1fr; gap: .8rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linie); align-items: start; }
.kurs time { font-weight: 600; line-height: 1.35; }
.kurs time small { display: block; font-weight: 400; color: var(--tinte-weich); }
.kurs h4 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 .15em; }
.kurs p { margin: 0; font-size: .92rem; color: var(--tinte-weich); }
.kurs .status { font-size: .8rem; font-weight: 600; padding: .2em .6em; border-radius: 999px; display: inline-block; margin-top: .3em; }
.status-findet { background: var(--salbei-hell); color: var(--salbei-tief); }
.status-ausgebucht { background: #F3E3DE; color: #8A3B2B; }
.status-entfaellt { background: #E9E9E9; color: #555; text-decoration: line-through; }
.kurs.entfaellt h4 { color: var(--tinte-weich); }
.kurs .aktion { grid-column: 1 / -1; }
.kurs .tag-neu { background: #FFF1C2; color: #6B4E00; }
@media (min-width: 720px) { .kurs { grid-template-columns: 6rem 1fr auto; } .kurs .aktion { grid-column: auto; align-self: center; } }
.demo-leiste { background: #FFF1C2; color: #5A4200; padding: .8rem 1rem; border-radius: var(--radius); font-size: .9rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.demo-leiste button { font: inherit; font-size: .85rem; background: none; border: 1.5px solid #8A6A00; color: #5A4200; border-radius: 999px; padding: .4em 1em; cursor: pointer; }

/* ---------- Effekte ---------- */
/* Grundregel: Alles ist ohne Effekt sichtbar. Effekte werden nur ergaenzt, wenn JS aktiv ist und keine reduzierte Bewegung gewuenscht wird. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-verz-1 { transition-delay: .1s; }
.js .reveal-verz-2 { transition-delay: .2s; }
.js .reveal-verz-3 { transition-delay: .3s; }

/* Eintritt: der Bogen oeffnet sich, sobald der Abschnitt wirklich im Sichtfeld steht.
   IntersectionObserver statt scrollgekoppelter Animation, siehe main.js und ENTSCHEIDUNGEN.md
   Punkt 6 - laeuft dadurch auch in Firefox und Safari, nicht nur in Chrome und Edge.
   Ohne JS oder mit reduzierter Bewegung bleibt die Innenansicht direkt vollstaendig offen. */
.eintritt { position: relative; padding: 0; background: var(--nacht); }
.eintritt-aussen { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 80vh; overflow: hidden; }
.eintritt-aussen picture, .eintritt-aussen img { width: 100%; height: 100%; object-fit: cover; }
.eintritt-innen { position: absolute; inset: 0; clip-path: inset(0 0 0 0 round 0); overflow: hidden; }
.eintritt-innen picture, .eintritt-innen img { width: 100%; height: 100%; object-fit: cover; }
.eintritt-text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.2rem, 4vw, 3rem) 0; background: linear-gradient(180deg, rgba(20,32,28,0), rgba(20,32,28,.85)); color: #fff; }
.eintritt-text p { max-width: 34rem; font-family: var(--serif); font-size: clamp(1.3rem, 2vw + .6rem, 2rem); line-height: 1.3; margin: 0; }
.js .eintritt-innen { clip-path: inset(46% 41% 0 41% round 999px 999px 0 0); transition: clip-path 1.2s cubic-bezier(.22, .61, .36, 1); }
.js .eintritt.in .eintritt-innen { clip-path: inset(0 0 0 0 round 0 0 0 0); }

/* Wo der Browser scrollgesteuerte Animationen kann (Chrome, Edge, neuere Firefox und Safari),
   haengt das Oeffnen direkt am Scrollstand: Der Bogen geht genau so weit auf, wie man gescrollt
   hat, und zwar waehrend der Abschnitt durchs Bild wandert. Das ist der eigentliche Effekt.
   Der einmalige Uebergang darueber bleibt als Rueckfallebene fuer aeltere Browser stehen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .eintritt { view-timeline-name: --bogen; }
    .js .eintritt-innen,
    .js .eintritt.in .eintritt-innen {
      transition: none;
      animation: bogen-oeffnet linear both;
      animation-timeline: --bogen;
      animation-range: cover 25% cover 70%;
    }
  }
}
@keyframes bogen-oeffnet {
  from { clip-path: inset(46% 41% 0 41% round 999px 999px 0 0); }
  to { clip-path: inset(0 0 0 0 round 0 0 0 0); }
}

/* Raeume-Kacheln auf der Dachseite: Licht geht an, sobald die Kachel im Sichtfeld steht. */
.js .licht-an img { filter: saturate(.2) brightness(.5); transition: filter .9s cubic-bezier(.22, .61, .36, 1); }
.js .licht-an.in img { filter: saturate(1) brightness(1); }

/* Leises Licht auf Balance: ein weicher Lichtstreifen wandert langsam ueber das Bild */
.licht-wandert { position: relative; }
.licht-wandert::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,250,235,.28) 50%, rgba(255,255,255,0) 65%); background-size: 260% 100%; background-position: 120% 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .js .licht-wandert::after { animation: lichtwandert 14s ease-in-out infinite alternate; } }
@keyframes lichtwandert { from { background-position: 120% 0; } to { background-position: -20% 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  /* View-Transitions-Pseudoelemente liegen ausserhalb des DOM und werden vom *-Selektor oben
     nicht erfasst, deshalb hier gezielt: Seite wechselt ohne Ueberblendung, nur der Sprung bleibt. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Dachseite 3B ---------- */
.dach-hero { background: var(--papier); padding: 0; position: relative; overflow: hidden; }
.dach-hero-inner { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 6vw, 4rem); display: grid; gap: 2rem; }
.dach-hero h1 { font-size: clamp(2.6rem, 6.5vw + 1rem, 5.6rem); max-width: 12ch; }
.dach-hero .lead { font-size: 1.25rem; }
.dach-hero-illu { position: relative; }
.dach-hero-illu img { mix-blend-mode: multiply; width: 100%; height: auto; }
@media (min-width: 860px) { .dach-hero-inner { grid-template-columns: 1fr 1fr; align-items: center; } }
.vision { background: var(--nacht); color: #E3E8E5; }
.vision .wrap { max-width: 52rem; }
.vision h2 { color: #fff; font-size: clamp(2.2rem, 4.5vw + 1rem, 4rem); }
.vision p { font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); line-height: 1.6; color: #D5DCD8; }
.vision .gruen-linie { width: 64px; height: 3px; background: var(--gruen-3b); margin-bottom: 2rem; }
.raeume-4 { display: grid; gap: 1.5rem; }
.raeume-4 .kachel h3 { font-size: 1.6rem; }
.raeume-4 .kachel .eyebrow { margin-bottom: .3em; font-size: .72rem; }
@media (min-width: 640px) { .raeume-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .raeume-4 { grid-template-columns: repeat(4, 1fr); } }
.standort-grid { display: grid; gap: 1.5rem; }
.standort-grid .gross { grid-column: 1 / -1; }
.standort-grid picture img, .standort-grid .ph { border-radius: var(--radius); }
@media (min-width: 720px) { .standort-grid { grid-template-columns: repeat(3, 1fr); } .standort-grid .gross { grid-column: span 3; } }
.kontakt-3b { display: grid; gap: 2rem; }
.kontakt-3b address { font-style: normal; font-size: 1.1rem; line-height: 1.7; }
.kontakt-3b address a { text-decoration: none; }
@media (min-width: 860px) { .kontakt-3b { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- Uebersicht ---------- */
.ueber-einstiege { display: grid; gap: 1.5rem; }
.einstieg { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.einstieg h2 { font-size: 1.7rem; margin: 0; }
.einstieg .domain { font-family: var(--sans); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich); font-weight: 600; }
.einstieg ul { margin: .4rem 0 0; padding-left: 1.1em; font-size: .95rem; color: var(--tinte-weich); }
.einstieg .btn { align-self: flex-start; margin-top: .6rem; }
@media (min-width: 860px) { .ueber-einstiege { grid-template-columns: repeat(2, 1fr); } }
.sitemap { columns: 1; gap: 2rem; font-size: .95rem; }
.sitemap ul { list-style: none; padding: 0; margin: 0 0 1.2rem; break-inside: avoid; }
.sitemap li { padding: .25em 0; }
.sitemap li ul { padding-left: 1.2em; margin: 0; }
.sitemap .grad { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-weich); margin-left: .5em; }
@media (min-width: 720px) { .sitemap { columns: 2; } }
@media (min-width: 1000px) { .sitemap { columns: 3; } }

/* ---------- Hilfsklassen ---------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.aktionen { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.text-weich { color: var(--tinte-weich); }

/* ---------- Demo Redaktionsoberflaeche ---------- */
.seite-demo { background: #EEF0EE; }
.demo-warn { background: #FFE2CF; color: #5A2600; padding: .9rem 0; font-size: .95rem; border-bottom: 1px solid #E9B99A; }
.redaktion { display: grid; gap: 1.5rem; padding-block: 1.5rem 6rem; }
.red-seite { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; align-self: start; }
.red-marke { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 1rem; }
.red-marke small { display: block; font-family: var(--sans); font-size: .75rem; color: var(--tinte-weich); }
.red-typen { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.red-typ { width: 100%; text-align: left; font: inherit; font-size: .95rem; padding: .55em .8em; border: 0; background: none; border-radius: var(--radius); cursor: pointer; color: var(--tinte); }
.red-typ:hover { background: var(--papier-tief); }
.red-typ[aria-current="true"] { background: var(--nacht); color: #fff; font-weight: 600; }
.red-nutzer { font-size: .8rem; color: var(--tinte-weich); margin: 1.2rem 0 0; }
.red-haupt { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem; min-height: 60vh; }
.red-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
.red-kopf h2 { font-size: 1.8rem; margin: 0 0 .3em; }
.red-pfad { font-size: .85rem; color: var(--tinte-weich); margin: 0 0 .4em; }
.red-werkzeuge { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; font-size: .9rem; }
.red-werkzeuge select { font: inherit; padding: .4em .6em; min-height: 40px; border: 1.5px solid var(--sandstein-tief); border-radius: var(--radius); }
.red-tabelle { font-size: .9rem; }
.red-tabelle th, .red-tabelle td { padding: .5em .5em; white-space: nowrap; }
.red-tabelle td:nth-child(8) { min-width: 180px; }
.red-tabelle select, .red-tabelle input { font: inherit; font-size: .9rem; padding: .4em .5em; min-height: 40px; border: 1.5px solid var(--linie); border-radius: var(--radius); background: #fff; max-width: 100%; }
.red-tabelle input[type="number"] { width: 5.5em; }
.red-tabelle input[type="text"] { width: 100%; min-width: 170px; }
.red-tabelle tr.geaendert td { background: #FFF8DD; }
.red-tabelle tr.neu td { background: #F1F7EA; }
.red-tabelle .sort { font: inherit; font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-weich); background: none; border: 0; padding: 0; cursor: pointer; }
.red-tabelle .sort:hover { color: var(--tinte); text-decoration: underline; }
button.link { font: inherit; background: none; border: 0; padding: 0; color: var(--salon); text-decoration: underline; cursor: pointer; }
button.link:disabled { color: var(--tinte-weich); cursor: not-allowed; }
.red-einzel { display: grid; gap: 2rem; }
.red-form { max-width: none; }
.feld-reihe { display: grid; gap: 1rem; }
.red-info { background: var(--papier-tief); border-left: 3px solid var(--salon); padding: .8rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: .92rem; margin-top: .6rem; }
.red-info .check { margin-top: .5rem; }
.red-neben { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; align-self: start; }
.red-neben h3 { font-family: var(--sans); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-weich); margin: 0 0 .6em; }
.red-neben h3 + * { margin-bottom: 1.4rem; }
.red-versionen { list-style: none; margin: 0; padding: 0; font-size: .9rem; display: grid; gap: .8rem; }
.red-formate { display: grid; gap: .8rem; }
.red-format { border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 1rem; background: var(--papier); }
.red-format summary { padding: .9rem 0; cursor: pointer; }
.red-format.geaendert { border-color: #C9A400; background: #FFF8DD; }
.red-format form { padding-bottom: 1rem; }
.red-bild-reihe { display: grid; gap: 1rem; }
.red-bild-vorschau { aspect-ratio: 16/10; background: repeating-linear-gradient(135deg, var(--papier-tief) 0 12px, #E7E0D3 12px 24px); border: 1px dashed var(--sandstein-tief); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-size: .85rem; color: var(--tinte-weich); }
.red-bild-felder input[type="file"] { font: inherit; font-size: .9rem; }
.red-bild.fehler input[type="text"] { border-color: #B3261E; }
.red-speichern, .red-erfolg { position: fixed; left: 0; right: 0; bottom: 0; background: var(--nacht); color: #fff; padding: .8rem 0; z-index: 50; box-shadow: 0 -4px 20px rgba(0,0,0,.2); }
.red-erfolg { background: #2E5F58; }
.red-speichern-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.red-speichern .btn-sekundaer { color: #fff; border-color: #fff; }
.red-speichern .btn { background: var(--gruen-3b); border-color: var(--gruen-3b); color: var(--nacht); }
.red-erfolg .btn { background: #fff; border-color: #fff; color: var(--nacht); }
@media (min-width: 720px) { .feld-reihe { grid-template-columns: repeat(3, 1fr); } .red-bild-reihe { grid-template-columns: 220px 1fr; } }
@media (min-width: 900px) { .redaktion { grid-template-columns: 220px 1fr; } .red-einzel { grid-template-columns: 1fr 280px; } }

/* Standortraster: kleine Bilder gleich hoch */
.standort-grid > div picture, .standort-grid > div img { aspect-ratio: 4 / 3; object-fit: cover; height: 100%; }
.standort-grid > div picture { display: block; overflow: hidden; border-radius: var(--radius); }

/* Korrekturen nach Sichtung */
[hidden] { display: none !important; }
.hero h1 { max-width: 18ch; }
.hero-hell .hero-media::after { background: linear-gradient(90deg, rgba(248,245,239,.96) 0%, rgba(248,245,239,.9) 38%, rgba(248,245,239,.35) 68%, rgba(248,245,239,.05) 100%), linear-gradient(180deg, rgba(248,245,239,0) 55%, rgba(248,245,239,.9) 100%); }
.red-tabelle { font-size: .85rem; }
.red-tabelle td { white-space: normal; }
.red-tabelle td:first-child, .red-tabelle td:nth-child(2) { white-space: nowrap; }
.red-tabelle td:nth-child(5) { min-width: 110px; }
.red-tabelle td:nth-child(8) { min-width: 140px; }
.red-tabelle input[type="text"] { min-width: 130px; }

/* ---------- Dunkle Abschnitte: Korrekturen ---------- */
/* Die allgemeine Regel "Links in dunklen Abschnitten weiß" traf auch den hellen Knopf: weiße Schrift auf Weiß. */
.abschnitt-dunkel .btn-hell,
.abschnitt-dunkel .btn-hell:hover { color: var(--nacht); }
.abschnitt-dunkel .eyebrow { color: #C9D1CD; }
[data-bereich="3b"] .abschnitt-dunkel .eyebrow { color: var(--gruen-3b); }
/* Bogenkante in der Farbe des Abschnitts darüber, sonst bleibt ein heller Streifen stehen. */
.abschnitt-sand + .bogen-rand::before { background: var(--papier-tief); }
.abschnitt-akzent + .bogen-rand::before { background: var(--akzent-hell); }

/* Vorschau freier Flächen im dunklen Abschnitt der Immobilien-Seite */
.freiraum-karten { display: grid; gap: 1rem; margin-block: 2rem; text-align: left; }
@media (min-width: 860px) { .freiraum-karten { grid-template-columns: repeat(3, 1fr); } }
.abschnitt-dunkel .freiraum-karte { display: block; padding: 1.2rem 1.3rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.04); color: #E3E8E5; text-decoration: none; transition: background .25s, border-color .25s; }
.abschnitt-dunkel .freiraum-karte:hover { background: rgba(255,255,255,.09); border-color: var(--gruen-3b); color: #fff; }
.freiraum-karte .tag { background: rgba(1,255,0,.14); color: #B7FFB7; }
.abschnitt-dunkel .freiraum-karte h3 { font-size: 1.3rem; margin: .6rem 0 .7rem; color: #fff; }
.freiraum-karte dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; margin: 0; font-size: .92rem; }
.freiraum-karte dt { color: #A9B3AE; }
.freiraum-karte dd { margin: 0; }

/* Wegweiser im Kopfbild der Immobilien-Seite: wie das Hausschild im Treppenhaus.
   Inhalte immer sichtbar, die grüne Linie wird beim Überfahren nur länger. */
.hero-wegweiser { display: grid; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.3); }
.hero .hero-wegweiser a, .hero .hero-wegweiser a:hover { display: block; padding: 1rem 0; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.hero-wegweiser strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.2; }
.hero-wegweiser strong::after { content: ''; display: block; width: 28px; height: 2px; margin-top: .55rem; background: var(--gruen-3b); transition: width .3s ease; }
.hero-wegweiser a:hover strong::after, .hero-wegweiser a:focus-visible strong::after { width: 72px; }
.hero-wegweiser span { display: block; margin-top: .45rem; font-size: .92rem; color: #D5DCD8; }
@media (min-width: 860px) {
  .hero-wegweiser { grid-template-columns: repeat(3, 1fr); }
  .hero .hero-wegweiser a, .hero .hero-wegweiser a:hover { border-bottom: 0; padding: 1.2rem 1.5rem .2rem 0; }
  .hero .hero-wegweiser a + a { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,.18); }
}

/* ---------- 3B Graustufen: Grün, Hellgrau, Dunkelgrau, Schwarz ---------- */
/* Provisorisch bis zur CI-Karte. Klassisch bleiben Serifenschrift und Bogen, modern sind Schwarz, Linien und Nummern.
   Das Grün hat auf Hellgrau kaum Kontrast und steht deshalb nur auf dunklem Grund. */
[data-bereich="3b"] {
  --papier: #F4F4F3;
  --papier-tief: #E6E7E6;
  --linie: #D2D4D3;
  --sandstein-tief: #A9ACAD;
  --tinte: #111213;
  --tinte-weich: #4A4D4F;
  --nacht: #000000;      /* Schwarz laut Corporate Manual 2021 */
  --nacht-hell: #2E3133;
  --grau-dunkel: #53585F; /* dunkles Grau laut Corporate Manual 2021 */
  --grau-hell: #C6C6C6;    /* Grau der Ziffer im Logo, Corporate Manual 2021 */
  --akzent: #111213; --akzent-tief: #000000; --akzent-hell: #E6E7E6;
}
[data-bereich="3b"] .proto-bar { background: var(--grau-dunkel); }
[data-bereich="3b"] .hero-media::after { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.85) 100%); }
[data-bereich="3b"] .footer-proto { border-top-color: var(--nacht-hell); }

/* Kopf schwarz: das Logo mit grauer Drei und grünem B steht auf Schwarz am besten */
.site-header[data-bereich="3b"] { background: var(--nacht); border-bottom-color: #000; }
.site-header[data-bereich="3b"] .brand { color: #fff; }
.site-header[data-bereich="3b"] .brand-text small { color: var(--grau-hell); }
.site-header[data-bereich="3b"] .nav-toggle span { background: #fff; }
.site-header[data-bereich="3b"] .nav-list a { color: #fff; border-bottom-color: var(--nacht-hell); }
.site-header[data-bereich="3b"] .nav-list a[aria-current="page"] { color: var(--gruen-3b); }

/* Kleine Linie vor jeder Dachzeile */
[data-bereich="3b"] .eyebrow { display: flex; align-items: center; gap: .7em; color: var(--tinte-weich); }
[data-bereich="3b"] .eyebrow::before { content: ''; flex: none; width: 22px; height: 3px; background: var(--gruen-3b); }
[data-bereich="3b"] .zentriert .eyebrow { justify-content: center; }
[data-bereich="3b"] .hero .eyebrow, [data-bereich="3b"] .vision .eyebrow, [data-bereich="3b"] .abschnitt-grau .eyebrow, [data-bereich="3b"] .abschnitt-werte .eyebrow { color: var(--grau-hell); }
[data-bereich="3b"] .hero .eyebrow::before, [data-bereich="3b"] .vision .eyebrow::before, [data-bereich="3b"] .abschnitt-dunkel .eyebrow::before,
[data-bereich="3b"] .abschnitt-grau .eyebrow::before, [data-bereich="3b"] .abschnitt-werte .eyebrow::before { background: var(--gruen-3b); }
[data-bereich="3b"] .btn:not(.btn-hell):not(.btn-sekundaer):not(.btn-gruen):hover { color: var(--gruen-3b); }

/* Vision */
.gruen-punkt { color: var(--gruen-3b); }
.vision-mehr { margin: 1.5rem 0 0; }
.vision .vision-mehr a { color: #fff; font-family: var(--sans); font-size: 1rem; font-weight: 600; text-decoration-color: var(--gruen-3b); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.vision .vision-mehr a:hover { color: var(--gruen-3b); }
.vision-lang .wrap { max-width: 56rem; }
.vision-lang h2 { font-size: clamp(1.9rem, 3vw + 1rem, 3.2rem); text-wrap: balance; }
.vision .vision-zusatz { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); line-height: 1.35; color: var(--grau-hell); margin: 0; }
/* Mission als kleinerer Erklärtext ohne eigene Überschrift, durch eine feine Linie von der Vision abgesetzt */
.mission { margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(1.5rem, 4vw, 2rem); border-top: 1px solid rgba(255,255,255,.18); max-width: 40rem; }
.vision .mission p { font-size: 1rem; line-height: 1.7; color: #B9BCBD; }
.vision .mission p:last-child { margin-bottom: 0; }

/* Vier Räume: nummeriert, der Raum als Satz, der Geschäftsbereich als Beschriftung */
.raeume-abschnitt { background: var(--weiss); }
.raum-nr { display: block; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .14em; color: var(--tinte); padding-bottom: .55rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--tinte); position: relative; }
.raum-nr::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; background: var(--tinte); transition: width .35s ease; }
.feld-raum:hover .raum-nr::after, .feld-raum:focus-visible .raum-nr::after { width: 100%; }
.kachel .raum-satz { font-family: var(--serif); font-size: clamp(1.75rem, 1vw + 1.3rem, 2.1rem); line-height: 1.05; color: var(--tinte); margin: 0 0 .55rem; }
.raum-satz em { display: block; font-style: italic; }
.raeume-4 .feld-raum h3 { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-weich); margin: 0 0 .7rem; line-height: 1.4; }

/* Dunkelgraue Abschnitte */
.abschnitt-grau, .abschnitt-werte { background: var(--grau-dunkel); color: #E6E7E7; }
.abschnitt-grau h2, .abschnitt-grau h3, .abschnitt-werte h2, .abschnitt-werte h3 { color: #fff; }
.abschnitt-grau .lead, .abschnitt-werte .lead { color: #C9CBCB; }
.abschnitt-grau a:not(.btn) { color: #fff; }
.abschnitt-grau .btn { background: var(--gruen-3b); border-color: var(--gruen-3b); color: var(--nacht); }
.abschnitt-grau .btn:hover { background: #fff; border-color: #fff; color: var(--nacht); }
.abschnitt-grau .btn.btn-sekundaer { background: transparent; border-color: #fff; color: #fff; }
.abschnitt-grau .btn.btn-sekundaer:hover { background: #fff; color: var(--nacht); }
.abschnitt-werte .hinweis { color: #A9ACAD; }

/* Werte */
.werte-leiste { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid rgba(255,255,255,.25); }
.werte-leiste li { padding: 1.2rem 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.werte-leiste strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 2.5vw + 1rem, 3rem); line-height: 1.1; color: #fff; }
.werte-leiste .hinweis { display: block; margin-top: .35rem; }
@media (min-width: 860px) {
  .werte-leiste { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(255,255,255,.25); }
  .werte-leiste li { border-bottom: 0; padding: 1.6rem 1.5rem 1.6rem 0; }
  .werte-leiste li + li { border-left: 1px solid rgba(255,255,255,.25); padding-left: 1.5rem; }
}
.werte-team-titel { margin: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; }
.werte-symbole { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
.werte-symbole li { display: flex; flex-direction: column; gap: .9rem; padding: 1.2rem 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); background: rgba(255,255,255,.04); color: #fff; font-size: .95rem; line-height: 1.4; }
.symbol { display: block; flex: none; width: 52px; height: 52px; background: var(--gruen-3b); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.werte-quelle { margin: 1.2rem 0 0; }
@media (min-width: 860px) {
  .werte-symbole { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .werte-symbole li { flex-direction: row; align-items: center; gap: 1.2rem; padding: 1.6rem 1.4rem; font-size: 1.05rem; }
  .symbol { width: 64px; height: 64px; }
}

/* Grün als durchgehender Akzent, auch auf hellem Grund.
   Linien und Flächen dürfen grün sein. Schrift bleibt auf hellem Grund schwarz, weil reines Grün auf Weiß kaum lesbar ist;
   die kursiven Raum-Wörter bekommen deshalb eine grüne Unterlegung statt grüner Schrift. */
.raum-nr { border-bottom: 3px solid var(--gruen-3b); }
.raum-nr::after { background: var(--tinte); }
.raum-satz em { justify-self: start; width: fit-content; background: linear-gradient(transparent 62%, var(--gruen-3b) 62%, var(--gruen-3b) 88%, transparent 88%); padding-inline: .06em; }
[data-bereich="3b"] .fakten li { border-top: 3px solid var(--gruen-3b); }

/* ---------- Events: Rundgang, Catering-Partner, Bewertungen ---------- */
.rundgang { position: relative; aspect-ratio: 16 / 9; min-height: 340px; overflow: hidden; border-radius: var(--radius); background: var(--nacht); color: #fff; }
.rundgang-bild, .rundgang-bild picture, .rundgang-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rundgang-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,28,.25) 0%, rgba(20,32,28,.88) 100%); }
.rundgang-hinweis { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(1.2rem, 4vw, 2.5rem); max-width: 40rem; }
.rundgang-hinweis p { color: #E3E8E5; font-size: .95rem; }
.rundgang-hinweis a { color: #fff; }
.rundgang .rundgang-titel { font-family: var(--serif); font-size: clamp(1.5rem, 1.5vw + 1rem, 2.1rem); line-height: 1.15; color: #fff; margin-bottom: .5rem; }
.rundgang .btn-hell, .rundgang .btn-hell:hover { color: var(--nacht); }
.rundgang iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 639px) { .rundgang:not(.geladen) { aspect-ratio: auto; } .rundgang.geladen { aspect-ratio: 4 / 5; } }

.partner-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.partner-karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem; }
.partner-karte .ph { margin-bottom: 1rem; }
.partner-karte h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.partner-karte p { margin: 0; color: var(--tinte-weich); }
@media (min-width: 760px) { .partner-liste { grid-template-columns: repeat(3, 1fr); } }

.bewertung-kopf { display: grid; gap: 1rem; align-items: end; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.bewertung-kopf .abschnitt-kopf { margin-bottom: 0; }
.bewertung-schnitt { display: flex; align-items: center; gap: 1rem; font-size: .95rem; line-height: 1.5; }
.bewertung-zahl { font-family: var(--serif); font-size: 3.6rem; line-height: 1; color: var(--tinte); }
.sterne { color: var(--messing); letter-spacing: .12em; font-size: 1.05rem; font-family: 'Segoe UI Symbol', 'Arial', sans-serif; }
.bewertung-karte { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; }
.bewertung-karte blockquote { margin: 0; }
.bewertung-karte blockquote p { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.35; margin: 0; }
.bewertung-karte figcaption { font-size: .88rem; color: var(--tinte-weich); margin-top: auto; }
@media (min-width: 860px) { .bewertung-kopf { grid-template-columns: 1fr auto; } }

/* ---------- Balance: Kursarten, Kurskarten, kompakte Terminliste, Kursanfrage ---------- */
.kursarten { display: grid; gap: .6rem 2rem; margin-bottom: 1.8rem; max-width: 60rem; }
.kursarten p { margin: 0; padding-left: 1rem; border-left: 3px solid var(--akzent); color: var(--tinte-weich); }
.kursarten strong { color: var(--tinte); }
@media (min-width: 860px) { .kursarten { grid-template-columns: 1fr 1fr; } }

.kurskarten { display: grid; gap: 1rem; }
@media (min-width: 700px) { .kurskarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kurskarten { grid-template-columns: repeat(3, 1fr); } }
.kurskarte { background: #fff; border: 1px solid var(--linie); border-top: 3px solid var(--salbei); border-radius: var(--radius); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.kurskarte-reihe { border-top-color: var(--akzent); }
.kurskarte-typ { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); }
.kurskarte h3 { font-size: 1.45rem; margin: 0; }
.kurskarte p { margin: 0; font-size: .93rem; }
.kurskarte-wann { color: var(--tinte-weich); }
.kurskarte-wann strong { color: var(--tinte); font-weight: 600; }
.kurskarte-kurz { color: var(--tinte-weich); }
.kurskarte-mehr { border-top: 1px solid var(--linie); padding-top: .5rem; font-size: .92rem; }
.kurskarte-mehr summary { cursor: pointer; font-weight: 600; color: var(--akzent); padding: .35rem 0; min-height: 40px; display: flex; align-items: center; }
.kurskarte-mehr dl { margin: .4rem 0 .2rem; }
.kurskarte-mehr dt { font-weight: 600; margin-top: .5rem; }
.kurskarte-mehr dd { margin: 0; color: var(--tinte-weich); }
.kurskarte .btn { align-self: flex-start; margin-top: auto; }

.termin-liste { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
.termin { display: grid; grid-template-columns: 6.2rem 1fr; gap: .15rem .9rem; padding: .7rem 1rem; border-bottom: 1px solid var(--linie); align-items: center; }
.termin:last-child { border-bottom: 0; }
.termin time { font-weight: 600; font-size: .92rem; white-space: nowrap; }
.termin time span { font-weight: 400; color: var(--tinte-weich); }
.termin-was strong { font-weight: 600; }
.termin-zusatz { display: block; font-size: .85rem; color: var(--tinte-weich); line-height: 1.35; }
.termin-status { grid-column: 2; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.termin-status:empty { display: none; }
.termin .status { font-size: .78rem; font-weight: 600; padding: .15em .55em; border-radius: 999px; }
.termin-anfrage { font-size: .9rem; font-weight: 600; color: var(--akzent); }
.termin.entfaellt strong, .termin.entfaellt time { color: var(--tinte-weich); text-decoration: line-through; }
.termin-neu { background: #FFF8DD; }
@media (min-width: 720px) {
  .termin { grid-template-columns: 7rem 1fr auto; }
  .termin-status { grid-column: auto; justify-content: flex-end; }
}

.schritte { margin: 1.5rem 0 0; padding-left: 1.3rem; display: grid; gap: .7rem; }
.schritte li { padding-left: .3rem; }
.termin time span { display: block; font-size: .85rem; }
@media (max-width: 719px) { .termin { grid-template-columns: 4.6rem 1fr; padding: .6rem .8rem; } .termin-status { gap: .6rem; } }

/* Kopfbild 3B: mehr Kontrast hinter dem Text (Rückmeldung zum Immobilien-Kopfbild).
   Auf breiten Bildschirmen dunkelt ein Verlauf die Textseite links ab, rechts bleibt das Bild hell.
   Auf dem Telefon liegt der Text über der ganzen Breite, dort dunkelt der Verlauf von oben nach unten stärker ab. */
[data-bereich="3b"] .hero-media::after {
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.9) 100%);
}
[data-bereich="3b"] .hero h1, [data-bereich="3b"] .hero .lead, [data-bereich="3b"] .hero .eyebrow { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
[data-bereich="3b"] .hero .lead { color: #F1F2F2; }
@media (min-width: 860px) {
  [data-bereich="3b"] .hero-media::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 38%, rgba(0,0,0,.2) 68%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.1) 45%, rgba(0,0,0,.85) 100%);
  }
}

/* Bogenkante: Abstand zum Inhalt. Der Bogen ragt in den Abschnitt hinein, deshalb kommt seine Höhe
   zum normalen Innenabstand dazu (Rückmeldung: Bogen drückte auf die Dachzeile). */
section.bogen-rand { padding-top: calc(clamp(28px, 6vw, 80px) + clamp(2.5rem, 5.5vw, 5rem)); }

/* Freiräume finden: Kopfbild wie auf der Immobilien-Startseite dunkel mit heller Schrift (vorher hell, nach der Farbumstellung schwarz auf dunkel) */
.hero .eyebrow a { color: inherit; text-decoration-color: rgba(255,255,255,.5); }
.hero-kompakt .hero-inner { min-height: min(56vh, 520px); }

/* Balance: Einstieg ohne Hürde in drei kurzen Hinweisen, Kurse auf Anfrage unter den Karten */
@media (min-width: 860px) { .kursarten { grid-template-columns: repeat(3, 1fr); max-width: none; } }
.kurs-weitere { margin: 1rem 0 0; color: var(--tinte-weich); }
.kurs-weitere a { font-weight: 600; }

/* Flächenkarten: alle öffentlichen Felder der Pflegeliste, Exposé als Download statt eigener Objektseite */
.flaeche-tags { margin: 0 0 .5rem; }
.tag-reserviert { background: #FFF1C2; color: #6B4E00; }
.flaeche dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 479px) { .flaeche dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flaeche-kontakt, .flaeche-energie { font-size: .88rem; color: var(--tinte-weich); margin: 0 0 .45rem; }
.flaeche-kontakt span, .flaeche-energie span { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.flaeche-energie { margin-bottom: 1rem; }
.flaeche-kontakt a { color: var(--tinte); }

/* ---------- Balance: Wochenplan ----------
   Ruhig und leicht fernöstlich: Papierton, viel Luft, große Uhrzeit in der Serifenschrift,
   feine Liniensymbole je Kursart statt Fotos, keine harten Rahmen. */
.wochenplan { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 700px) { .wochenplan { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .wochenplan-3 { grid-template-columns: repeat(3, 1fr); } .wochenplan-4 { grid-template-columns: repeat(4, 1fr); } .wochenplan-5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1040px) { .wochenplan-6, .wochenplan-7 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .wochenplan-6 { grid-template-columns: repeat(6, 1fr); } .wochenplan-7 { grid-template-columns: repeat(7, 1fr); } .wochenplan-6, .wochenplan-7 { gap: 1.6rem .8rem; }
  /* Alle Tage in einem Raster: die Kurse einer Zeile beginnen auf gleicher Hoehe */
  .wochenplan-6 .wochentag, .wochenplan-7 .wochentag { display: contents; }
  .wochenplan-6 .wochentag-name, .wochenplan-7 .wochentag-name { grid-column: var(--tag); grid-row: 1; }
  .wochenplan-6 .kurs-kachel, .wochenplan-7 .kurs-kachel { grid-column: var(--tag); grid-row: var(--platz); }
  .wochenplan-6 .kurs-kachel, .wochenplan-7 .kurs-kachel { padding: 1rem .85rem 1rem; }
  .wochenplan-6 .kurs-kachel h4, .wochenplan-7 .kurs-kachel h4 { font-size: 1.05rem; margin-right: 0; }
  .wochenplan-6 .kurs-symbol, .wochenplan-7 .kurs-symbol { width: 30px; height: 30px; top: .7rem; right: .7rem; }
  .wochenplan-6 .kurs-zeit, .wochenplan-7 .kurs-zeit { font-size: 1.15rem; }
}
.wochentag { padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.wochentag-name { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--salbei-tief); margin: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--salbei); }
.kurs-kachel { position: relative; background: var(--papier-tief); border-radius: var(--radius); padding: 1.4rem 1.3rem 1.2rem; overflow: hidden; transition: background .4s ease; }
.kurs-kachel:hover { background: var(--salbei-hell); }
.kurs-symbol { position: absolute; top: .9rem; right: .9rem; width: 46px; height: 46px; fill: none; stroke: var(--salbei); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.kurs-zeit { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--tinte); margin: 0 0 .7rem; }
.kurs-zeit span { font-family: var(--sans); font-size: .82rem; color: var(--tinte-weich); letter-spacing: .02em; }
.kurs-kachel h4 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; line-height: 1.15; hyphens: auto; overflow-wrap: break-word; margin: 0 3.2rem .25rem 0; }
.kurs-leitsatz { font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--salbei-tief); margin: 0 0 .6rem; }
.kurs-meta { font-size: .85rem; color: var(--tinte-weich); margin: 0 0 .2rem; }
.kurs-mehr { margin-top: .8rem; font-size: .9rem; }
.kurs-mehr-link { display: inline-block; margin-top: .8rem; font-size: .9rem; font-weight: 600; color: var(--akzent); }
.kurs-beispiel { margin: .8rem 0 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich); }
.kurs-mehr summary { cursor: pointer; color: var(--akzent); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.kurs-mehr dl { margin: .2rem 0 .4rem; }
.kurs-mehr dt { font-weight: 600; margin-top: .5rem; }
.kurs-mehr dd { margin: 0; color: var(--tinte-weich); }
.kurs-anfragen { display: inline-block; margin-top: .3rem; font-weight: 600; font-size: .92rem; color: var(--akzent); text-underline-offset: .25em; }
#kurse .kursarten { margin: 2.5rem 0 0; }
@media (prefers-reduced-motion: reduce) { .kurs-kachel { transition: none; } }
/* Cormorant setzt Ziffern als Mediävalziffern („o9:oo“); für Uhrzeiten Versalziffern */
.kurs-zeit { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* Prototyp-Leiste: Einstieg in die Redaktion rechts */
.proto-bar-cms { margin-left: auto; padding-left: .9em; border-left: 1px solid #3A4440; }

/* Prototyp-Leiste: Umschalter fuer die Designvarianten */
.proto-bar-designs { display: inline-flex; gap: .2em; margin-left: .6em; padding-left: .9em; border-left: 1px solid #3A4440; }
.proto-bar-designs a { padding: .2em .45em; border-radius: 3px; }
.proto-bar-designs a[aria-current="true"] { background: var(--gruen-3b); color: #111; border-bottom-color: transparent; font-weight: 600; }

/* ---------- Bausteine der Startseiten (Design-Schritt). Elemente nur fuer Varianten sind im Stand ausgeblendet ---------- */
.hero-zeichnung, .hero-portrait, .hero-breit, .dach-hero-foto, .cta-leiste, .signatur { display: none; }
.hero-beleg { margin: 1.1rem 0 0; font-size: .9rem; color: #E9ECEA; }
.hero-beleg .sterne { color: #E8C36A; }
.einstieg-paar { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .einstieg-paar { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.einstieg-gross { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.einstieg-bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-tief); }
.einstieg-bild picture, .einstieg-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.einstieg-gross:hover .einstieg-bild img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .einstieg-bild img { transition: none; } .einstieg-gross:hover .einstieg-bild img { transform: none; } }
.einstieg-text { padding: 1.4rem 1.5rem 1.6rem; }
.einstieg-marke { margin: 0 0 .5rem; }
.marke-text { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-weich); }
.marke-bereich { font-weight: 600; color: var(--akzent); }
.marke-bild { max-width: 200px; }
.einstieg-gross h3 { font-size: 2rem; margin: 0 0 .4rem; }
.einstieg-gross p { color: var(--tinte-weich); }
.einstieg-gross .mehr { font-weight: 600; color: var(--akzent); }
.villa-haus-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.villa-haus-bilder .gross { grid-column: 1 / -1; margin: 0; }
.villa-haus-bilder picture img { border-radius: var(--radius); }
.villa-haus-bilder > div picture img { aspect-ratio: 4 / 3; object-fit: cover; }
.momente-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 860px) { .momente-raster { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }
.momente-raster figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--papier-tief); }
.momente-raster picture, .momente-raster img { width: 100%; height: 100%; object-fit: cover; }
.prinzipien .raum-nr { border-bottom-color: var(--gruen-3b); }
.brand-zeichnung { width: 64px; height: auto; }
.brand-logo { width: 190px; height: auto; }
.brand-versal { display: block; font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; }
.villa-stimmen .grid-2 { align-items: stretch; }
.brand-logo, .brand-zeichnung, .marke-bild, .signatur picture { display: block; }
.brand-logo img, .brand-zeichnung img, .marke-bild img, .signatur img { display: block; width: 100%; height: auto; }

/* ---------- Vergleichsseite Designvarianten (/design/) ---------- */
.dv-konzepte { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .dv-konzepte { grid-template-columns: repeat(3, 1fr); } }
.dv-konzept { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem 1.6rem 1.7rem; }
.dv-konzept h3 { font-size: 1.7rem; margin: 0 0 .6rem; }
.dv-punkte { margin: 1.2rem 0 0; display: grid; gap: .7rem; }
.dv-punkte div { border-top: 1px solid var(--linie); padding-top: .6rem; }
.dv-punkte dt { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-weich); }
.dv-punkte dd { margin: .2rem 0 0; font-size: .95rem; }
.dv-seite { padding: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid var(--linie); margin-top: clamp(2rem, 4vw, 3rem); }
.dv-seite .abschnitt-kopf h2 { font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); }
.dv-raster { display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .dv-raster { grid-template-columns: repeat(3, 1fr); } }
.dv-bild { margin: 0; }
.dv-bild a { display: block; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.dv-bild a:hover { border-color: var(--akzent); }
.dv-bild img { display: block; width: 100%; height: auto; }
.dv-bild figcaption { margin-top: .5rem; font-size: .9rem; font-weight: 600; }
.dv-raster-mobil { margin-top: 1.5rem; }
.dv-bild-mobil a { max-width: 240px; margin: 0 auto; border-radius: 18px; }
.dv-bild-mobil figcaption { text-align: center; font-weight: 400; color: var(--tinte-weich); }

/* ==================================================================================================
   Stand vom 18. September 2026, zweite Runde: 3B serifenlos (wie A), Villa Michels in Taubengrau mit
   Zeichnung plus Pinselschrift als Logo (wie B), Events mit Bogenfenster im Kopf (wie C).
   ================================================================================================== */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/PlayfairDisplay-variable.woff2') format('woff2'); }

/* ---------- 3B: serifenlos, Boxen mit Halbbogen ---------- */
[data-bereich="3b"] { --serif: var(--sans); --titel-gewicht: 600; --titel-spacing: -.015em; }
[data-bereich="3b"] h1 { font-size: clamp(2rem, 4.2vw + 1rem, 3.6rem); line-height: 1.08; }
[data-bereich="3b"] .dach-hero h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4.4rem); }
[data-bereich="3b"] .kachel .raum-satz { font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; }
[data-bereich="3b"] .raum-satz em { font-style: normal; background: none; padding: 0; }
[data-bereich="3b"] .zitat, [data-bereich="3b"] .vision .vision-zusatz { font-style: normal; }
[data-bereich="3b"] .hero-wegweiser strong { font-size: 1.1rem; font-weight: 600; }
[data-bereich="3b"] .fakten strong, [data-bereich="3b"] .ablauf time { font-weight: 600; }
.raeume-4 .feld-raum { padding: 1.2rem 1.2rem 1.4rem; border: 1px solid #C4C6C6; background: #fff; border-radius: var(--radius); }
.raeume-4 .feld-raum .raum-nr { margin-bottom: 1rem; }

/* ---------- Kopfzeile 3B: Logo, rechts daneben zweizeilig im Grau der 3, buendig mit dem Logo ---------- */
.brand-3b { gap: .8rem; }
.brand-3b img { width: 66px; height: auto; }
.brand-text-3b { display: flex; flex-direction: column; justify-content: space-between; height: 42px; font-family: var(--sans); }
.brand-zeile { display: block; font-size: 1.45rem; font-weight: 600; line-height: .82; color: #C0C0C0; letter-spacing: -.01em; }
.site-header[data-bereich="3b"] .brand-text-3b small { margin: 0; font-size: .68rem; line-height: .9; letter-spacing: .12em; color: #C0C0C0; font-weight: 500; }

/* ---------- Kopfzeile Villa Michels: Zeichnung mit gruenem Lichtrand und Pinselschrift ---------- */
.brand-vm { gap: .8rem; }
.brand-vm .brand-zeichnung { width: 84px; flex: none; }
.brand-schrift { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.brand-wortmarke { width: 150px; }
.brand-schrift small { display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tinte-weich); font-weight: 600; margin: 0; padding-left: .25rem; }
@media (max-width: 479px) { .brand-vm .brand-zeichnung { width: 56px; } .brand-wortmarke { width: 110px; } .brand-schrift small { font-size: .56rem; } }

/* ---------- Eine Navigation je Angebot: Marke, Liste und Anfrage-Knopf in einer Zeile (ab 1200 px), darunter Menue ---------- */
.header-cta { order: 2; margin-left: auto; }
.header-inner .nav-toggle { order: 3; }
.header-inner .nav { order: 4; }
@media (max-width: 859px) { .header-cta { font-size: .8rem; padding: .6em .9em; } }
@media (min-width: 860px) {
  .header-inner-bereich .brand { margin-right: auto; }
}

/* ---------- Fuss: kein heller Streifen mehr, Signatur der Villa ---------- */
.site-footer { margin-top: 0; }
.footer-haus .signatur { display: block; max-width: 170px; margin: 0 0 .8rem; }
.footer-haus .signatur img { width: 100%; height: auto; }

/* ---------- Dachseite: breiter schwarzer Rahmen um das aufgehende Bogenfenster ---------- */
.eintritt-rahmen { position: absolute; inset: 0; background: var(--nacht); clip-path: inset(0 0 0 0 round 0); }
.js .eintritt-rahmen { clip-path: inset(41.5% 38.5% 0 38.5% round 999px 999px 0 0); transition: clip-path 1.2s cubic-bezier(.22, .61, .36, 1); }
.js .eintritt.in .eintritt-rahmen { clip-path: inset(0 0 0 0 round 0 0 0 0); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .eintritt-rahmen, .js .eintritt.in .eintritt-rahmen { transition: none; animation: bogen-rahmen-oeffnet linear both; animation-timeline: --bogen; animation-range: cover 25% cover 70%; }
  }
}
@keyframes bogen-rahmen-oeffnet {
  from { clip-path: inset(41.5% 38.5% 0 38.5% round 999px 999px 0 0); }
  to { clip-path: inset(0 0 0 0 round 0 0 0 0); }
}

/* ---------- Beteiligungen: Logos und Stimmen ---------- */
.partner-karte-logo { display: block; text-decoration: none; color: inherit; }
.partner-karte-logo:hover { border-color: var(--tinte); }
.partner-logo { aspect-ratio: 3 / 1; display: flex; align-items: center; justify-content: center; padding: .6rem 1rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 1rem; }
.partner-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.partner-karte-logo .mehr { display: block; margin-top: .6rem; font-size: .85rem; color: var(--tinte-weich); }
.zitate-2 { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 860px) { .zitate-2 { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.geruest-bild { max-width: 360px; margin: 1rem 0; }
.geruest-bild img { border-radius: var(--bogen); aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Villa Michels: Taubengrau (CI 2023), kraeftigere Serife fuer Titel ---------- */
[data-bereich="events"], [data-bereich="balance"] {
  --papier: #F7F8F8; --papier-tief: #EDF0F1; --linie: #D3DBDE; --sandstein: #C9D3D7; --sandstein-tief: #889197;
  --tinte: #253439; --tinte-weich: #5B6467; --nacht: #1C272B; --nacht-hell: #2A3A40;
  --messing: #889197; --messing-tief: #5F6B70; --messing-hell: #E4EBEE; --salbei: #889197; --salbei-tief: #5F6B70; --salbei-hell: #E4EBEE;
  --akzent: #253439; --akzent-tief: #131C21; --akzent-hell: #BED0D7;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --titel-gewicht: 600; --titel-spacing: -.01em;
}
/* Sanftes Salbeigruen als dritter Ton neben Schiefer und Taubenblau: nur Flaechen, Linien und kleine Akzente.
   Vorschlag fuer die CI der Villa Michels, deshalb nur im Stand und in einem Block, der sich leicht wieder herausnehmen laesst. */
[data-bereich="events"]:not([data-design]), [data-bereich="balance"]:not([data-design]) {
  --mint-hell: #E7F0E9;   /* Abschnittsflaeche */
  --mint: #BDD3C6;        /* Linien und Flaechenakzente */
  --mint-tief: #4F6E5D;   /* Text und Symbole auf hellem Grund, Kontrast 5,2:1 */
}
.abschnitt-mint { background: var(--mint-hell, var(--papier-tief)); }
[data-bereich="balance"]:not([data-design]) .abschnitt-sand { background: var(--mint-hell); }
[data-bereich="balance"]:not([data-design]) .abschnitt-sand + .bogen-rand::before { background: var(--mint-hell); }
.abschnitt-mint + .bogen-rand::before, .abschnitt-mint .bogen-rand::before { background: var(--mint-hell, var(--papier-tief)); }
[data-bereich="balance"]:not([data-design]) .kursarten p { border-left-color: var(--mint-tief); }
[data-bereich="balance"]:not([data-design]) .kurs-kachel:hover { background: var(--mint-hell); }
[data-bereich="balance"]:not([data-design]) .kurs-termine li::before { background: var(--mint-tief); }
[data-bereich="balance"]:not([data-design]) .kurs-symbol { stroke: var(--mint-tief); opacity: .85; }
[data-bereich="balance"]:not([data-design]) .kursblatt:target { border-color: var(--mint-tief); box-shadow: 0 0 0 2px var(--mint); }
[data-bereich="balance"]:not([data-design]) .abschnitt-mint .kursblatt { border-color: var(--mint); }
[data-bereich="events"] h1, [data-bereich="balance"] h1 { font-size: clamp(2rem, 4vw + 1rem, 3.6rem); line-height: 1.1; }
[data-bereich="events"] .zitat, [data-bereich="balance"] .zitat { font-weight: 500; }
.sterne { color: #D9A93A; }

/* Startseite villa-michels.de: Zeichnung auf Papier, Einstiege als Bogenfenster (wie B) */
.hero-villa { background: var(--nacht); color: #fff; }
.hero-villa .hero-media { display: none; }
.hero-villa .hero-zeichnung { display: block; position: absolute; right: 4%; top: 50%; transform: translateY(-46%); width: min(48vw, 640px); pointer-events: none; }
.hero-villa .hero-zeichnung img { width: 100%; height: auto; }
.hero-villa .hero-inner { min-height: min(70vh, 640px); justify-content: center; padding-top: clamp(2.5rem, 6vw, 5rem); }
.hero-villa h1 { color: #fff; font-size: clamp(2.8rem, 6.5vw, 5.4rem); max-width: 10ch; }
.hero-villa .lead { color: #C9D3D7; max-width: 26rem; }
.hero-villa .eyebrow { color: #BED0D7; }
.hero-villa .signatur { display: none; }
.hero-villa .btn:not(.btn-hell) { background: #BED0D7; border-color: #BED0D7; color: #1C272B; }
.hero-villa .btn:not(.btn-hell):hover { background: #fff; border-color: #fff; color: #1C272B; }
.hero-villa .btn-hell { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.hero-villa .btn-hell:hover { background: #fff; border-color: #fff; color: #1C272B; }
@media (max-width: 859px) {
  .hero-villa .hero-zeichnung { position: static; transform: none; width: 100%; margin: 0; padding: 2rem var(--gutter) 0; }
  .hero-villa .hero-inner { min-height: 0; padding-bottom: 0; }
}
.einstieg-gross { background: transparent; border: 0; }
.einstieg-bild { aspect-ratio: 4 / 5; border-radius: var(--bogen); }
.einstieg-text { padding: 1.4rem .2rem 0; }
.einstieg-gross h3 { font-size: 2rem; }
.villa-haus-bilder .gross picture img { border-radius: var(--bogen); }

/* Events: Portraet als Bogenfenster neben dem Titel, Signatur groesser, Kopf bleibt dunkel (wie C) */
[data-bereich="events"] .hero-empfang { background: var(--nacht); }
[data-bereich="events"] .hero-empfang .hero-inner { min-height: min(84vh, 760px); justify-content: center; padding-block: clamp(3rem, 7vw, 6rem); }
[data-bereich="events"] .hero-empfang .hero-media { display: none; }
[data-bereich="events"] .hero-empfang .hero-portrait { display: block; position: absolute; inset: 0; }
[data-bereich="events"] .hero-empfang .hero-portrait picture, [data-bereich="events"] .hero-empfang .hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
[data-bereich="events"] .hero-empfang .signatur { display: block; max-width: 420px; margin: 0 0 1.2rem; }
[data-bereich="events"] .hero-empfang .signatur img { width: 100%; height: auto; }
[data-bereich="events"] .hero-beleg { color: #C9D3D7; }
@media (min-width: 860px) {
  [data-bereich="events"] .hero-empfang .hero-portrait { inset: clamp(1.5rem, 4vw, 3rem) 4vw clamp(1.5rem, 4vw, 3rem) auto; width: 40%; border-radius: 999px 999px 0 0; overflow: hidden; }
  [data-bereich="events"] .hero-empfang .hero-inner { padding-right: 46%; }
}
@media (max-width: 859px) {
  [data-bereich="events"] .hero-empfang .hero-portrait { inset: 0 0 auto 0; height: 58vh; border-radius: 0 0 999px 999px / 0 0 22% 22%; overflow: hidden; }
  [data-bereich="events"] .hero-empfang .hero-inner { min-height: 0; padding-top: calc(58vh + 1.5rem); }
  [data-bereich="events"] .hero-empfang .signatur { max-width: 260px; }
}
.momente-raster { grid-template-columns: repeat(3, 1fr); }
.momente-raster figure { aspect-ratio: 4 / 5; }
.anlaesse-raster { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .anlaesse-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .anlaesse-raster { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }
.anlaesse-raster .kachel { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem; }
.anlaesse-raster .kachel:hover { border-color: var(--akzent); }
.anlaesse-raster .kachel:hover .bogen-bild { transform: none; }
.anlaesse-raster .bogen-bild { aspect-ratio: 4 / 5; border-radius: var(--bogen); margin: 0; }
.anlaesse-raster h3 { font-size: 1.15rem; margin: 0 0 .25rem; }
.anlaesse-raster p { font-size: .9rem; margin: 0; color: var(--tinte-weich); }

.brand-wortmarke img { width: 100%; height: auto; display: block; }
.brand-vm .brand-zeichnung { width: 92px; }

/* Kopfzeile am Telefon: Marke, Knopf und Menueknopf in einer Zeile */
@media (max-width: 599px) {
  .header-inner { gap: .6rem; }
  .brand-vm { gap: .5rem; }
  .brand-vm .brand-zeichnung { width: 50px; }
  .brand-wortmarke { width: 98px; }
  .brand-schrift small { font-size: .52rem; letter-spacing: .18em; }
  .header-cta { font-size: .76rem; padding: .55em .8em; white-space: nowrap; }
  .header-inner .nav-toggle { margin-right: -6px; padding: 8px; }
}

/* ---------- Villa Michels, Stand vom 18.09. abends: Logo als Einheit aus Zeichnung und Schriftzug ---------- */
.brand-vm.brand-lockup { display: flex; align-items: stretch; gap: .75rem; height: 52px; }
.brand-vm.brand-lockup .brand-zeichnung, .brand-vm.brand-lockup .brand-schriftzug { display: block; height: 100%; width: auto; flex: none; }
.brand.brand-lockup img { display: block; height: 100%; width: auto; }
@media (max-width: 599px) { .brand-vm.brand-lockup { height: 34px; gap: .5rem; } .header-cta { font-size: .74rem; padding: .5em .8em; } }
@media (max-width: 389px) { .brand-vm.brand-lockup { height: 30px; gap: .45rem; } .header-cta { font-size: .72rem; padding: .5em .75em; } }
.einstieg-marke .marke-bild { display: block; height: 58px; width: auto; }
.einstieg-marke .marke-bild img { height: 100%; width: auto; }

/* Bereichsnavigation: mittlere Breiten im Menue, ab 1200 px in einer Zeile mit Marke und Anfrage-Knopf */
@media (min-width: 860px) and (max-width: 1199.98px) {
  .header-inner-bereich .nav-toggle { display: inline-flex; }
  .header-inner-bereich .nav { display: none; width: 100%; padding-bottom: 1rem; }
  .header-inner-bereich .nav.offen { display: block; }
  .header-inner-bereich .nav-list { flex-direction: column; gap: .2rem; }
  .header-inner-bereich .nav-list a { border-bottom: 1px solid var(--linie); padding: .7em .2em; }
  .header-inner-bereich .nav-list a::after { display: none; }
}
@media (min-width: 1200px) {
  .header-inner-bereich { flex-wrap: nowrap; }
  .header-inner-bereich .nav { order: 2; }
  .header-inner-bereich .header-cta { order: 3; margin-left: 1.6rem; }
  .nav-bereich .nav-list { flex-wrap: nowrap; gap: 1.35rem; }
  .nav-bereich .nav-list a { font-size: .93rem; white-space: nowrap; }
}

/* Logo optisch auf Kante: die Villa ist etwas groesser als der Schriftzug, damit Dachfirst und Sockel mit Ober- und Unterkante der Schrift abschliessen
   (oben stehen nur die duennen Schornsteine ueber, unten laufen blasse Bodenstriche aus) */
.brand-vm.brand-lockup { --h: 46px; height: var(--h); align-items: flex-start; }
.brand-vm.brand-lockup .brand-schriftzug { height: var(--h); }
.brand-vm.brand-lockup .brand-zeichnung { height: calc(var(--h) * 1.16); margin-top: calc(var(--h) * -0.03); }
@media (max-width: 599px) { .brand-vm.brand-lockup { --h: 32px; } }
@media (max-width: 389px) { .brand-vm.brand-lockup { --h: 28px; } }

/* Events im Stand: der Schriftzug ragt gross ins Bogenfenster und liegt ueber dem Foto, wie darueber gepinselt */
[data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .hero-portrait { z-index: 0; }
[data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .signatur { max-width: none; width: min(68vw, 880px); margin: 0 0 1.6rem; }
@media (max-width: 859px) {
  [data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .signatur { width: 100%; margin-top: -3.6rem; }
}

/* ---------- Stand vom 19.09. ---------- */
/* Events: feinere Hauptueberschrift */
[data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) h1 { font-weight: 400; letter-spacing: 0; }

/* Balance: dunkler Kopf, das Zeichen Nen (Achtsamkeit) in Pinselschrift liegt ueber der Bildkante */
@font-face { font-family: 'Nen Pinsel'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/YujiBoku-nen.woff2') format('woff2'); unicode-range: U+5FF5; }
/* ---------- Stand vom 23.09.: Balance-Kopf mit Foto, Zeichen wird gemalt ---------- */
[data-bereich="balance"]:not([data-design]) .hero-ruhig { position: relative; padding: 0; background: var(--nacht); color: #fff; overflow: hidden; }
[data-bereich="balance"]:not([data-design]) .hero-breit { display: block; position: absolute; inset: 0; }
[data-bereich="balance"]:not([data-design]) .hero-breit picture, [data-bereich="balance"]:not([data-design]) .hero-breit img { width: 100%; height: 100%; object-fit: cover; }
[data-bereich="balance"]:not([data-design]) .hero-breit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16,34,27,.93) 0%, rgba(20,42,33,.74) 32%, rgba(120,150,125,.22) 58%, rgba(234,242,232,.62) 88%, rgba(240,246,238,.72) 100%); }
[data-bereich="balance"]:not([data-design]) .hero-breit img { filter: saturate(1.12) brightness(1.09); }
[data-bereich="balance"]:not([data-design]) .hero-ruhig-grid { position: relative; z-index: 1; align-items: center; min-height: min(76vh, 660px); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
[data-bereich="balance"]:not([data-design]) .hero-ruhig .bogen-bild { display: none; }
[data-bereich="balance"]:not([data-design]) .hero-ruhig h1 { color: #fff; }
[data-bereich="balance"]:not([data-design]) .hero-ruhig .lead { color: #D6DEE1; }
[data-bereich="balance"]:not([data-design]) .hero-ruhig .eyebrow { color: #BED0D7; }
[data-bereich="balance"]:not([data-design]) .hero-ruhig .hinweis { color: #AEBCC1; }
[data-bereich="balance"]:not([data-design]) .hero-ruhig .btn:not(.btn-sekundaer) { background: #BED0D7; border-color: #BED0D7; color: #1C272B; }
[data-bereich="balance"]:not([data-design]) .hero-ruhig .btn:not(.btn-sekundaer):hover { background: #fff; border-color: #fff; }
[data-bereich="balance"]:not([data-design]) .hero-ruhig .btn-sekundaer { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
[data-bereich="balance"]:not([data-design]) .hero-ruhig .btn-sekundaer:hover { background: #fff; border-color: #fff; color: #1C272B; }
[data-bereich="balance"]:not([data-design]) .hero-bildspalte { max-width: none; width: 100%; }

/* Zeichen 念: Maske aus acht Strichen, die nacheinander gezogen werden */
.nen-figur { display: none; margin: 0; }
[data-bereich="balance"]:not([data-design]) .nen-figur { display: block; width: min(100%, 360px); margin-inline: auto; }
.nen { display: block; width: 100%; height: auto; }
/* Licht von rechts: das Foto wird zum Fenster hin hell, die Tusche steht dunkel darauf */
[data-bereich="balance"]:not([data-design]) .nen, [data-bereich="balance"]:not([data-design]) .nen-legende { position: relative; z-index: 1; }
[data-bereich="balance"]:not([data-design]) .nen text { fill: #1E3328; paint-order: stroke; stroke: rgba(246,250,244,.72); stroke-width: 1.1; stroke-linejoin: round; }
[data-bereich="balance"]:not([data-design]) .nen-figur { transform: translateX(3%); }
.nen text { font-family: 'Nen Pinsel', serif; font-size: 92px; fill: #fff; }
.nen-strich { stroke-dasharray: 1; stroke-dashoffset: 0; }
.nen-legende { margin: 1rem 0 0; text-align: center; font-size: .82rem; color: #AEBCC1; }
[data-bereich="balance"]:not([data-design]) .nen-legende { color: #24352C; text-shadow: 0 1px 8px rgba(255,255,255,.55); }
[data-bereich="balance"]:not([data-design]) .nen-legende span { color: #1E3328; }
.nen-legende span { color: #fff; margin-right: .3em; }
@media (prefers-reduced-motion: no-preference) {
  .nen-strich { animation: nen-malen .42s cubic-bezier(.3,.7,.4,1) backwards; animation-delay: calc(.4s + var(--strich) * .26s); }
}
@keyframes nen-malen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 859px) {
  [data-bereich="balance"]:not([data-design]) .hero-ruhig-grid { min-height: 0; }
  /* Am Telefon liegt der Text oben: Verlauf dreht sich, dunkel oben, Licht unten beim Zeichen */
  [data-bereich="balance"]:not([data-design]) .hero-breit::after { background: linear-gradient(180deg, rgba(16,34,27,.93) 0%, rgba(18,40,32,.88) 40%, rgba(110,142,118,.34) 70%, rgba(236,243,234,.55) 100%); }
  [data-bereich="balance"]:not([data-design]) .nen-figur { width: min(62%, 240px); margin-top: 2rem; }
}

/* 3B Gruppe: Kopf der Dachseite wie in Variante A, Foto hinter dem Titel. Die gezeichnete Villa bleibt der Villa Michels vorbehalten. */
body:not([data-design]) .dach-hero { background: #000; color: #fff; }
body:not([data-design]) .dach-hero-illu { display: none; }
body:not([data-design]) .dach-hero-foto { display: block; position: absolute; inset: 0; }
body:not([data-design]) .dach-hero-foto picture, body:not([data-design]) .dach-hero-foto img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
body:not([data-design]) .dach-hero-inner { grid-template-columns: 1fr; min-height: min(70vh, 640px); align-content: end; z-index: 1; }
body:not([data-design]) .dach-hero h1, body:not([data-design]) .dach-hero .lead { color: #fff; }
body:not([data-design]) .dach-hero .eyebrow { color: #C6C6C6; }
body:not([data-design]) .dach-hero .btn-sekundaer { color: #fff; border-color: #fff; }
body:not([data-design]) .dach-hero .btn-sekundaer:hover { background: #fff; color: #000; }
body:not([data-design]) .dach-hero .btn:not(.btn-sekundaer) { background: var(--gruen-3b); border-color: var(--gruen-3b); color: #000; }

/* Startseite villa-michels.de im Stand (19.09.): kleinere Bogenfenster, die ganze Karte passt auch auf dem Laptop in den Bildschirm.
   Das Logo steht auf Bildbreite und ersetzt die Ueberschrift, die nur fuer Screenreader bleibt. */
body:not([data-design]) .villa-einstiege .abschnitt-kopf { text-align: center; margin-inline: auto; }
body:not([data-design]) .villa-einstiege .einstieg-paar { justify-content: center; }
@media (min-width: 760px) {
  body:not([data-design]) .villa-einstiege .einstieg-paar { grid-template-columns: repeat(2, min(400px, 46vh, calc((100% - 5rem) / 2))); gap: 2.5rem clamp(2.5rem, 6vw, 5rem); }
}
body:not([data-design]) .villa-einstiege .einstieg-bild { aspect-ratio: 5 / 6; }
body:not([data-design]) .villa-einstiege .einstieg-text { padding: 1.1rem 0 0; }
body:not([data-design]) .villa-einstiege .einstieg-marke { margin: 0 0 .8rem; }
body:not([data-design]) .villa-einstiege .einstieg-marke .marke-bild { width: 100%; max-width: none; height: auto; }
body:not([data-design]) .villa-einstiege .einstieg-marke .marke-bild img { width: 100%; height: auto; }
body:not([data-design]) .villa-einstiege .einstieg-gross h3 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body:not([data-design]) .villa-einstiege .einstieg-gross p { font-size: .95rem; margin-bottom: .6rem; }
/* Events im Stand: Hauptueberschrift nutzt die ganze Textspalte, drei Zeilen statt fuenf */
[data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) h1 { max-width: none; font-size: clamp(2.2rem, 2.2vw + 1.4rem, 3.4rem); line-height: 1.1; }
/* Textspalte endet immer kurz vor dem Bogenfenster. Prozent beziehen sich hier auf die Fensterbreite, deshalb je nach Breite gerechnet:
   Bild beginnt bei 56 % minus 4vw, die Inhaltsbreite ist hoechstens 1180 px und zentriert. */
@media (min-width: 860px) {
  [data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .hero-inner { padding-right: calc(44% + 1.75rem); }
}
@media (min-width: 1180px) {
  [data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .hero-inner { padding-right: calc(590px - 6% + 3rem); }
}
/* Events im Stand: Hauptknopf hell auf dem dunklen Kopf, wie auf der Startseite und bei Balance */
[data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .btn:not(.btn-hell) { background: #BED0D7; border-color: #BED0D7; color: #1C272B; }
[data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .btn:not(.btn-hell):hover { background: #fff; border-color: #fff; color: #1C272B; }

/* ---------- Stand vom 21.09.: 3B-Flaechen nach Corporate Manual 2021 ---------- */
/* Dachseite: schwarzer Grund wie alle dunklen Flaechen, nicht abweichend */
body:not([data-design]) .dach-hero { background: var(--nacht); }
/* Knoepfe auf den 3B-Seiten eckiger, passend zum blockhaften Logo */
[data-bereich="3b"]:not([data-design]) .btn { border-radius: 4px; }
/* Team: Name mit Abstand zum Portraet */
/* Name immer deutlich unter dem Porträt, nicht direkt an der Bildkante (Team, Kursleitung) */
.bogen-bild + h3, .team-karte h3 { margin-top: 1.15rem; }
.bogen-bild + h3 + p, .team-karte p { margin-top: .25rem; }
/* Lesbarkeit auf dem CI-Grau #53585F: Fliesstext und Hinweise etwas heller */
.abschnitt-grau .lead, .abschnitt-werte .lead { color: #DCDEDE; }
.abschnitt-grau .hinweis, .abschnitt-werte .hinweis { color: #C6C6C6; }
[data-bereich="3b"] .abschnitt-grau .eyebrow, [data-bereich="3b"] .abschnitt-werte .eyebrow,
.abschnitt-grau .hinweis, .abschnitt-werte .hinweis { color: #E0E2E2; }

/* ---------- Stand vom 23.09.: Kursuebersicht, ein Blatt je Kursformat ---------- */
.kursuebersicht { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .kursuebersicht { grid-template-columns: repeat(2, 1fr); } }
.kursblatt { display: flex; flex-direction: column; gap: 1rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.4rem; scroll-margin-top: 6rem; }
.kursblatt:target { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.kursblatt-kopf { position: relative; padding-right: 3.4rem; }
.kursblatt-kopf .kurs-symbol { top: 0; right: 0; }
.kursblatt-kopf .eyebrow { margin-bottom: .3em; }
.kursblatt h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.15; margin: 0; }
.kursblatt-kopf .kurs-leitsatz { margin: .2rem 0 0; }
.kursblatt-text { flex: 1; }
.kursblatt-text p { margin: 0 0 .7rem; color: var(--tinte-weich); }
.kursblatt-text p strong { color: var(--tinte); }
.kurs-termine { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.kurs-termine li { padding-left: 1.1rem; position: relative; font-size: .95rem; }
.kurs-termine li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); }
.kurs-anfragen-klein { font-weight: 600; }
.kursblatt-werte { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--linie); }
.kursblatt-werte dt { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich); }
.kursblatt-werte dd { margin: .1rem 0 0; font-size: .95rem; }

/* ---------- Stand vom 24.09.: Kopfbereiche am Desktop hoeher, damit sie als Flaeche wirken ---------- */
@media (min-width: 1024px) {
  .hero-inner { min-height: min(86vh, 880px); }
  .hero-kompakt .hero-inner { min-height: min(80vh, 800px); }
  .hero-villa .hero-inner { min-height: min(88vh, 880px); }
  body:not([data-design]) .dach-hero-inner, .dach-hero-inner { min-height: min(82vh, 800px); }
  [data-bereich="balance"]:not([data-design]) .hero-ruhig-grid { min-height: min(84vh, 820px); }
}

/* ---------- Stand vom 24.09.: Events-Kopf gestrafft, Terminliste weicher ---------- */
@media (min-width: 1024px) {
  /* Der Events-Kopf wird von seinem Inhalt hoch, nicht von der Mindesthoehe: Schrift, Abstaende und Titel etwas kleiner */
  [data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .hero-inner { padding-top: 3.6rem; padding-bottom: 3rem; }
  [data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .signatur { width: min(54vw, 680px); margin-bottom: 1.1rem; }
  [data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) h1 { font-size: clamp(2.1rem, 1.9vw + 1.2rem, 3rem); }
  [data-bereich="events"]:not([data-design]) .hero:not(.hero-villa) .lead { margin-bottom: 1.2rem; }
}
/* Die Terminliste stand als reines Weiss hart auf der Flaeche, jetzt leicht abgetoent mit weicheren Linien */
[data-bereich="balance"]:not([data-design]) .termin-liste { background: rgba(255,255,255,.58); border-color: rgba(79,110,93,.22); }
[data-bereich="balance"]:not([data-design]) .termin { border-bottom-color: rgba(79,110,93,.15); }
[data-bereich="balance"]:not([data-design]) .abschnitt-schmal .termin-liste { background: rgba(255,255,255,.72); border-color: rgba(79,110,93,.20); }
[data-bereich="balance"]:not([data-design]) .filter { background: rgba(255,255,255,.58); border-color: rgba(79,110,93,.22); }
[data-bereich="balance"]:not([data-design]) .abschnitt-schmal .filter { background: rgba(255,255,255,.72); border-color: rgba(79,110,93,.20); }

/* ---------- Unterseiten: Brotkrumen, Sprungleiste, Karten, Tabellen (24.09.2026) ---------- */

/* Brotkrume: schmaler Streifen unter dem Kopfbild, gleichzeitig BreadcrumbList fuer Suchmaschinen */
.brotkrume { background: var(--papier-tief); border-bottom: 1px solid var(--linie); font-size: .85rem; }
.brotkrume ol { list-style: none; margin: 0; padding: .7rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .1em .5em; color: var(--tinte-weich); }
.brotkrume li { display: inline-flex; align-items: center; gap: .5em; }
.brotkrume li + li::before { content: '\203A'; color: var(--sandstein-tief); }
.brotkrume a { color: var(--tinte-weich); text-decoration-color: var(--linie); text-underline-offset: .2em; }
.brotkrume a:hover { color: var(--akzent); }
.brotkrume [aria-current="page"] { color: var(--tinte); }

/* Sprungleiste: die Raeume der Villa auf einen Griff, bleibt beim Blaettern oben stehen */
.sprungleiste { position: sticky; top: 0; z-index: 15; background: rgba(248, 245, 239, .95); border-bottom: 1px solid var(--linie); }
.sprungleiste .wrap { display: flex; gap: 1.4rem; overflow-x: auto; padding-block: .8rem; font-size: .9rem; -webkit-overflow-scrolling: touch; }
.sprungleiste a { white-space: nowrap; color: var(--tinte-weich); text-decoration: none; padding-bottom: .15em; border-bottom: 2px solid transparent; }
.sprungleiste a:hover, .sprungleiste a:focus-visible { color: var(--akzent); border-bottom-color: var(--akzent); }
@supports (backdrop-filter: blur(6px)) { .sprungleiste { background: rgba(248, 245, 239, .82); backdrop-filter: blur(6px); } }

/* Schlichte Textkachel fuer Verweise zwischen den Anlaessen */
.kachel-schlicht { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem 1.3rem; transition: border-color .25s ease, transform .25s ease; }
.kachel-schlicht:hover { border-color: var(--akzent); transform: translateY(-2px); }
.kachel-schlicht h3 { font-size: 1.3rem; margin: 0 0 .35rem; }
.kachel-schlicht p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .kachel-schlicht { transition: none; } .kachel-schlicht:hover { transform: none; } }

/* Anschrift im Fliesstext */
.adresse { font-style: normal; line-height: 1.75; }

/* Kapazitaetentabelle: Raumnamen als Anker, Summenzeile abgesetzt */
.tabelle-kapazitaet th[scope="row"] { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinte); white-space: nowrap; }
.tabelle-kapazitaet td { font-variant-numeric: lining-nums; }
.tabelle-kapazitaet tbody tr:last-child { background: var(--papier-tief); }
.tabelle-kapazitaet tbody tr:last-child td, .tabelle-kapazitaet tbody tr:last-child th { font-weight: 600; }

/* Meldungen und Beitraege: eine Karte je Eintrag, Bild oben, Datum und Kategorie darunter */
.meldungen { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .meldungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .meldungen-3 { grid-template-columns: repeat(3, 1fr); } }
.meldung { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.meldung-bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--papier-tief); }
.meldung-bild picture, .meldung-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.meldung:hover .meldung-bild img { transform: scale(1.03); }
.meldung-text { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.meldung-meta { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); margin: 0; }
.meldung h3 { font-size: 1.35rem; margin: 0; }
.meldung h3 a { color: inherit; text-decoration: none; }
.meldung h3 a:hover { color: var(--akzent); }
.meldung p { margin: 0; color: var(--tinte-weich); font-size: .95rem; }
.meldung .mehr { margin-top: auto; padding-top: .6rem; font-weight: 600; color: var(--akzent); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .meldung-bild img { transition: none; } .meldung:hover .meldung-bild img { transform: none; } }

/* Beitragsseite: Lesebreite, Zwischenueberschriften, Bildunterschriften */
.beitrag { max-width: 42rem; }
.beitrag h2 { margin-top: 2.2rem; }
.beitrag h3 { margin-top: 1.6rem; }
.beitrag figure { margin: 2rem 0; }
.beitrag figure img, .beitrag figure .ph { border-radius: var(--radius); }
.beitrag figcaption { font-size: .85rem; color: var(--tinte-weich); margin-top: .5em; }
.beitrag-kopf { border-bottom: 1px solid var(--linie); padding-bottom: 1.2rem; margin-bottom: 2rem; }
.beitrag-meta { font-size: .85rem; color: var(--tinte-weich); margin: .6rem 0 0; }

/* Rechtstexte: schmale Spalte, klare Gliederung, Definitionslisten fuer Angaben */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.rechtstext h3 { margin-top: 1.6rem; font-size: 1.15rem; }
.rechtstext dl { display: grid; gap: .3rem .9rem; margin: 1rem 0; }
.rechtstext dt { font-weight: 600; color: var(--tinte); }
.rechtstext dd { margin: 0 0 .7rem; color: var(--tinte-weich); }
@media (min-width: 640px) { .rechtstext dl { grid-template-columns: 14rem 1fr; } .rechtstext dd { margin-bottom: .2rem; } }
.rechtstext-inhalt { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.rechtstext-inhalt a { color: var(--akzent); }

/* Team der Kursleitung: Portraet, Name, Kurzprofil, Kursformate */
.leitung-karten { display: grid; gap: 2rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .leitung-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .leitung-karten { grid-template-columns: repeat(3, 1fr); } }
.leitung-karte h3 { margin-top: 1.15rem; margin-bottom: .1rem; }
.leitung-rolle { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); margin: 0 0 .5rem; }
.leitung-karte p { color: var(--tinte-weich); }

/* Vergleich der Kursarten: welcher Kurs passt zu wem */
.vergleich th[scope="row"] { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinte); }

/* Kompakte Koepfe der Unterseiten: staerkerer Verlauf, damit Text auch ueber hellen Innenaufnahmen liest */
.hero-kompakt:not(.hero-hell) .hero-media::after { background: linear-gradient(180deg, rgba(16,26,22,.48) 0%, rgba(16,26,22,.56) 40%, rgba(16,26,22,.88) 100%); }
@media (min-width: 860px) {
  .hero-kompakt:not(.hero-hell) .hero-media::after { background: linear-gradient(105deg, rgba(16,26,22,.86) 0%, rgba(16,26,22,.66) 45%, rgba(16,26,22,.30) 75%, rgba(16,26,22,.22) 100%), linear-gradient(180deg, rgba(16,26,22,0) 55%, rgba(16,26,22,.55) 100%); }
}

/* ---------- Redaktionsmaske aus dem Modul-Schema (28.09.2026) ---------- */
.red-anzahl { float: right; font-size: .8rem; color: var(--tinte-weich); font-weight: 400; }
.red-typ[aria-current="true"] .red-anzahl { color: #C9D1CD; }
.red-meldung { background: #E8F2E2; border: 1px solid #A9C79A; color: #24421B; padding: .7rem 1rem; border-radius: var(--radius); margin: 1rem 0 0; font-size: .95rem; }
.red-gruppe { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem 1.2rem; margin: 0 0 1.4rem; }
.red-gruppe legend { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich); padding-inline: .4em; }
.red-gruppe .hinweis { margin-top: 0; }
.red-form .feld { margin-bottom: 1rem; }
.red-form .feld.fehler input, .red-form .feld.fehler select, .red-form .feld.fehler textarea { border-color: #A8332B; }
.red-form .feld.fehler .fehlertext { display: block; color: #A8332B; font-size: .85rem; margin: .3rem 0 0; }
.red-form .optionen { display: grid; gap: .3rem; }
@media (min-width: 640px) { .red-form .optionen { grid-template-columns: repeat(2, 1fr); } }
.red-bild-feld .hilfe { margin-top: .3rem; }
.red-vergleich td.alt { color: var(--tinte-weich); text-decoration: line-through; }
.red-vergleich td.neu { background: #F1F7EA; font-weight: 600; }
.red-vergleich td, .red-vergleich th { white-space: normal; }
.red-tabelle .leer { color: var(--sandstein-tief); font-style: italic; }
.red-werkzeuge input[type="search"] { font: inherit; padding: .4em .6em; min-height: 40px; border: 1.5px solid var(--sandstein-tief); border-radius: var(--radius); }
.red-haupt .link { font: inherit; background: none; border: 0; padding: 0; color: var(--akzent); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
/* Die Tabelle darf die Seite nicht breiter machen: das Grid-Feld muss schrumpfen duerfen,
   dann bekommt die Tabelle einen eigenen Rollbalken statt die ganze Seite. */
.red-haupt, .red-einzel > * { min-width: 0; }
.redaktion .tabelle-wrap { max-width: 100%; }
/* Redaktion nutzt die Bildschirmbreite, die Website bleibt bei 1180 px */
.seite-demo .wrap { --wrap: 1560px; }

/* Wunschtermin: Kalenderfeld und Häkchen nebeneinander (Feedback 28.09.2026) */
.termin-wahl { display: grid; gap: .6rem; align-items: center; }
.termin-wahl input[type="date"] { max-width: 16rem; }
.termin-wahl input[type="date"]:disabled { background: var(--papier-tief); color: var(--tinte-weich); }
@media (min-width: 560px) { .termin-wahl { grid-template-columns: auto 1fr; gap: 1.2rem; } }

/* Löschen: eigener Knopf, deutlich abgesetzt, aber ohne Alarmfarbe in der Liste */
.btn-loeschen { font: inherit; font-size: .95rem; font-weight: 600; padding: .7em 1.2em; min-height: 44px; border: 1.5px solid #A8332B; border-radius: var(--radius); background: #fff; color: #A8332B; cursor: pointer; }
.btn-loeschen:hover { background: #A8332B; color: #fff; }
.red-haupt .form-aktionen { align-items: center; gap: .8rem; flex-wrap: wrap; }
.red-haupt .form-aktionen .btn-loeschen { margin-left: auto; }