@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/font-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/font-8.ttf) format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/font-9.ttf) format('truetype');
}


:root { --paper: #fffaf0; --ink: #22604d; --emerald: #eaf0e3; --soft: #58665a; --gold: #f0c55d; --line: #dedfd1; --green: #eaf0e3; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.75rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', Arial, sans-serif; font-size: 1.125rem; line-height: 1.65; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
/* Two colours keep keyboard focus visible on light and dark surfaces. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; box-shadow: 0 0 0 4px var(--paper); }
/* Anchor destinations keep focus for navigation without framing whole sections. */
:is(main, section)[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.wrap { width: min(73.75rem, calc(100% - 6rem)); margin-inline: auto; }
.header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 2rem; padding-block: 1.875rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; max-width: 100%; font: 600 1.625rem/1.3 'Lora', Georgia, serif; }
.brand > span:last-child { min-width: 0; }
.brand small { display: block; font: .875rem/1.5 'DM Sans', Arial, sans-serif; margin-top: .375rem; }
.bee { display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; min-height: 3rem; border-radius: 50%; background: var(--gold); color: #644810; font-size: 2rem; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; font-size: 1rem; font-weight: 600; }
nav > a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem .25rem; }
nav > a:not(.button) { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
nav > a:not(.button):is(:hover, :focus-visible) { text-decoration-thickness: 2.5px; text-underline-offset: .35em; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 2.75rem; max-width: 100%; border: 2px solid transparent; border-radius: .4375rem; padding: .875rem 1.375rem; background: var(--emerald); color: #123c30; font-size: 1.0625rem; font-weight: 600; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }

.button.small { background: var(--gold); color: var(--ink); padding: .625rem 1.125rem; font-size: 1rem; }
/* Gentle hover feedback; keyboard focus retains its clear outline. */
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); background: #f0f5eb; }
  .button.small:hover { background: #f6d37e; }
  .button:hover:not(:focus-visible) { box-shadow: 0 5px 12px #293f342e; }
}
.button:active { transform: none; }
.button:active:not(:focus-visible) { box-shadow: inset 0 1px 3px #293f3426; }
.brand:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 3.375rem; padding-block: 4rem 4.375rem; }
.hero-copy { flex: 1.08 1 28rem; min-width: 0; }
.hero-art { flex: 1 1 25rem; min-width: 0; }
.eyebrow { margin: 0 0 1.5rem; font-size: .875rem; font-weight: 700; letter-spacing: .07em; }
.eyebrow > span { display: inline-block; width: .4375rem; height: .4375rem; background: #946d21; border-radius: 50%; margin-right: .4375rem; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: 'Lora', Georgia, serif; font-weight: 400; letter-spacing: -.035em; line-height: 1.3; hyphens: auto; }
h1 { font-size: 4rem; margin-bottom: 1.625rem; }
h2 { font-size: 2.6875rem; margin-bottom: 1.5rem; }
h3 { font: 500 1.4375rem/1.4 'Lora', Georgia, serif; hyphens: auto; }
em { color: #7e6128; font-weight: 400; }
.intro { font-size: 1.3125rem; line-height: 1.6; max-width: 29rem; margin-bottom: 1rem; }
.muted { color: var(--soft); font-size: 1.125rem; max-width: 30rem; margin-bottom: 1.75rem; }
.hero-note { font-size: .9375rem; color: var(--soft); margin: .9375rem 0 0; }
.hero-art svg { display: block; width: 100%; height: auto; }
.art-label { position: relative; width: fit-content; max-width: 100%; margin: -5rem 0 0 auto; background: var(--paper); box-shadow: 0 7px 28px #233c2714; border: 1px solid #e1dfcc; border-radius: .75rem; padding: 1.25rem 1.5625rem; font: 1.25rem/1.5 'Lora', Georgia, serif; }
.art-label span { float: left; font-size: 2.875rem; color: #946d21; margin-right: 1.125rem; }
.values { background: #f3eddb; border-block: 1px solid #e8e1ce; }
.values > .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.375rem; font-size: 1rem; }
.values b { font-size: 1.3125rem; color: #795d25; }
.section { padding-block: 5.625rem; }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 2.8125rem; margin-bottom: 2.1875rem; }
.section-heading h2 { margin: 0; }
.section-heading > p { max-width: 22rem; color: var(--soft); margin-bottom: .25rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: .75rem; background: #fffdf7; padding: 1.75rem; display: flex; flex-direction: column; align-items: start; }
.icon { display: flex; justify-content: center; align-items: center; font-size: 0; background: #f5ecd5; border-radius: 50%; width: 3.375rem; min-height: 3.375rem; margin-bottom: 1.5rem; }
.card:nth-child(2n) .icon { background: var(--green); }
.number { position: absolute; right: 1.625rem; top: 2.25rem; font-size: .9375rem; color: var(--soft); }
.card h3 { margin-bottom: .8125rem; }
.card p { color: var(--soft); margin-bottom: 1.5rem; }
.tag { font-size: .9375rem; font-weight: 600; border-top: 1px solid var(--line); width: 100%; padding-top: .9375rem; margin-top: auto; }
.together { background: var(--green); padding-block: 4.375rem; text-align: center; }
.together-inner > p:not(.eyebrow) { max-width: 43rem; margin: 0 auto 1.875rem; color: #4b6050; }
.together em { color: #4f663c; }
.region { display: inline-flex; max-width: 100%; text-align: left; align-items: center; gap: 1.125rem; border-top: 1px solid #c8d3be; padding-top: 1.5rem; }
.region > span { font-size: 1.8125rem; }
.region strong { font-size: 1rem; }
.region p { font-size: 1rem; margin: .1875rem 0 0; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 3rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.steps li { min-width: 0; }
.steps li > span { display: grid; place-items: center; background: var(--gold); border-radius: 50%; width: 2.75rem; min-height: 2.75rem; font: 1.4375rem/1.5 'Lora', Georgia, serif; margin-bottom: 1.375rem; }
.steps h3 { margin-bottom: .8125rem; }
.steps p { color: var(--soft); margin: 0; }
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: 3rem; padding: 3.125rem 3.75rem; background: #f5d982; border-radius: 1rem; }
.contact > div { min-width: 0; }
.contact h2 { font-size: 2.75rem; }
.contact p { margin-bottom: 0; }
.contact-details { align-self: center; }
.draft-label { display: inline-block; max-width: 100%; font-size: .875rem; font-weight: 700; letter-spacing: .06em; background: #ffedb9; padding: .3125rem .5625rem; border-radius: .25rem; }
.contact-details h3 { margin: 1.25rem 0 1rem; font-size: 1.5625rem; }
.contact-region { margin-top: 1.375rem; font-size: 1rem; }
.contact-kind { display: block; margin-top: .75rem; font-size: .9375rem; }
.contact-link { display: inline-block; max-width: 100%; min-height: 2.75rem; padding: .5rem .625rem; border-radius: .25rem; font-size: 1.4375rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.contact-link.email { font-size: 1.125rem; overflow-wrap: anywhere; }
.contact-link:is(:hover, :focus-visible) { text-decoration-thickness: 2.5px; text-underline-offset: .25em; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.875rem; padding-block: 3.125rem 2.8125rem; }
footer .brand { font-size: 1.375rem; }
footer p { font-size: .9375rem; max-width: 23rem; color: var(--soft); margin: 0; }
.skip { position: absolute; top: 0; left: 1rem; transform: translateY(-150%); max-width: calc(100% - 2rem); background: var(--ink); color: white; border: 2px solid white; padding: .75rem; z-index: 10; }
.skip:focus { top: .625rem; transform: none; }
@media (max-width: 60rem) {
  .wrap { width: calc(100% - 3rem); }
  .header { align-items: start; }
  .hero { gap: 2rem; padding-top: 3rem; }
  .hero-copy { flex-basis: 24rem; }
  .hero-art { flex-basis: 20rem; max-width: 31rem; margin-inline: auto; }
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  .values b { display: none; }
  .contact { padding: 2.1875rem; }
}
@media (max-width: 40rem) {
  .wrap { width: calc(100% - 2.5rem); }
  .header { padding-block: 1.25rem; }
  .brand { font-size: 1.5rem; }
  nav { width: 100%; gap: .5rem 1rem; }
  nav .button { flex-basis: 100%; justify-content: center; }
  .hero { padding-block: 2.5rem 2.625rem; gap: 2rem; }
  h1 { font-size: 2.75rem; }
  h2, .together h2, .contact h2 { font-size: 2.125rem; }
  .intro, .muted { max-width: none; }
  .hero-art { max-width: 24rem; }
  .art-label { margin-top: -2.5rem; padding: 1rem; }
  .values > .wrap { flex-direction: column; align-items: start; gap: .5rem; padding-block: 1.125rem; }
  .section { padding-block: 3.4375rem; }
  .section-heading > p { max-width: none; }
  .card { padding: 1.5rem; }
  .together { padding-block: 3.125rem; }
  .steps { gap: 2rem; margin-top: 1.875rem; }
  .steps li { position: relative; padding-left: 3.75rem; }
  .steps li > span { position: absolute; left: 0; top: 0; }
  .contact { padding: 1.5rem; gap: 1.75rem; }
  .contact-details { border-top: 1px solid #a58a40; padding-top: 1.5625rem; }
  footer { padding-block: 2.1875rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .button:hover { transform: none; }
}
@media (forced-colors: active) {
  a { text-decoration: underline; }
  .button, .bee, .icon, .steps li > span, .draft-label { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
  a:is(:hover, :focus-visible), .button:is(:hover, :focus-visible), .button.small:is(:hover, :focus-visible) { background: Highlight; color: HighlightText; text-decoration: underline; text-decoration-thickness: 3px; }
  .button:hover:not(:focus-visible) { box-shadow: none; }
}

/* Personal introduction: supports a portrait or a team photo. */
.about { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr)); align-items:center; gap:3rem 5rem; border-bottom:1px solid var(--line); }
.about > * { min-width:0; }
/* Keep the original photograph intact; only its layout crop changes. */
.about-photo { margin:0; width:100%; }
.about-photo img { display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:50% 40%; border-radius:12rem 12rem 1rem 1rem; }
.about-photo figcaption { margin-top:1rem; color:var(--ink); font-family:'Lora',Georgia,serif; font-size:1.25rem; text-align:center; }
.about-copy > p:not(.eyebrow) { color:var(--soft); }
.about-copy .about-lead { color:var(--ink); font-size:1.3125rem; }
.about-qualifications { border-left:3px solid #aa8430; padding:.25rem 0 .25rem 1.25rem; margin:1.75rem 0; }
.about-qualifications h3 { font-family:inherit; font-size:1.0625rem; font-weight:600; margin:0 0 .75rem; }
.about-qualifications ul { font-size:1rem; color:var(--soft); margin:0; padding-left:1.25rem; }
.about-qualifications li + li { margin-top:.5rem; }
@media(max-width:40rem) {
  .about { gap:2rem; }
  .about-photo img { aspect-ratio:4 / 3; border-radius:6rem 6rem 1rem 1rem; }
}

/* Uniform SVG symbols shared with the folder. */
.icon svg { display:block; width:2.125rem; height:2.125rem; flex:none; }

/* Legal pages and links */
.legal-links { gap:.5rem 1.5rem; }
.contact-privacy { font-size:1rem; }
.contact-privacy a, .legal-page a { text-decoration:underline; text-underline-offset:.2em; }
.legal-page { max-width:52rem; padding-block:3rem 4rem; }
.legal-page h1 { font-size:clamp(2rem,6vw,3.25rem); }
.legal-page h2 { font-size:clamp(1.5rem,4vw,2rem); margin-top:2.5rem; }
.legal-page section { margin-top:2rem; }
.legal-page dt { font-weight:700; margin-top:1.25rem; }
.legal-page dd { margin:.5rem 0 0; }
.legal-draft { padding:1.25rem; border-left:4px solid #7e6128; background:#fff0c4; }
.legal-draft p { margin:.5rem 0 0; }
.legal-pending { padding:.75rem 1rem; background:#f3eddb; border-left:3px solid #7e6128; }
.legal-date { margin-top:3rem; font-size:1rem; color:var(--soft); }

.booking-information { margin-top:2.5rem; padding:1.5rem; background:var(--green); border-radius:.75rem; }
.booking-information h3 { margin-bottom:1rem; }
.booking-information p { max-width:65ch; }
.booking-information p:last-child { margin-bottom:0; }
.booking-information a { text-decoration:underline; text-underline-offset:.2em; }
.pricing { margin-top:clamp(3.5rem,7vw,6rem); scroll-margin-top:2rem; }
.pricing-heading { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:2rem; }
.pricing-heading h3 { margin:0; font:500 clamp(1.875rem,3.5vw,3rem)/1.16 'Lora',Georgia,serif; letter-spacing:-.035em; }
.pricing-heading h3 em { font-weight:400; }
.pricing-heading > p { max-width:36ch; margin:0 0 .2rem; color:var(--soft); }
.pricing-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.pricing-card { --card-pad:clamp(1.25rem,3vw,2.25rem); position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; padding:var(--card-pad); border:1px solid #c6cdbd; border-radius:1.25rem; background:#fffdf7; }
.pricing-card-top { display:flex; align-items:center; gap:.875rem; min-height:3.25rem; margin-bottom:1.5rem; }
.pricing-card-top > p { margin:0; color:var(--soft); font-size:1rem; line-height:1.45; }
.pricing-symbol { display:grid; place-items:center; flex:0 0 3.25rem; height:3.25rem; border-radius:50%; color:#644810; background:#f6df9e; }
.pricing-symbol-evening { color:var(--ink); background:var(--emerald); }
.pricing-symbol svg { width:2rem; height:2rem; }
.pricing-card h4 { min-height:2.35em; margin:0 0 .625rem; font:500 clamp(1.5rem,2.6vw,2rem)/1.18 'Lora',Georgia,serif; letter-spacing:-.025em; }
.pricing-card .pricing-hours { margin:0 0 1.75rem; color:var(--soft); font-size:1rem; }
.pricing-card .pricing-amount { display:flex; align-items:baseline; flex-wrap:wrap; gap:.625rem; margin:0 0 1rem; }
.pricing-amount > strong { font:500 clamp(3.75rem,6vw,5.25rem)/1 'Lora',Georgia,serif; letter-spacing:-.065em; }
.pricing-amount > strong > span { font-size:.5em; letter-spacing:-.03em; }
.pricing-amount > span { color:var(--soft); font-size:1rem; }
.pricing-card .pricing-description { max-width:32ch; margin:0 0 1.5rem; }
.pricing-receipt { position:relative; margin-top:auto; padding-top:1.375rem; border-top:1px dashed #aab7a4; }
.pricing-receipt::before,.pricing-receipt::after { content:''; position:absolute; top:-.5625rem; width:1rem; height:1rem; border:1px solid #c6cdbd; border-radius:50%; background:var(--paper); }
.pricing-receipt::before { left:calc(-1 * var(--card-pad) - .5625rem); }
.pricing-receipt::after { right:calc(-1 * var(--card-pad) - .5625rem); }
.pricing-receipt dl { margin:0; }
.pricing-receipt dl > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem; padding:.3rem 0; font-size:1rem; }
.pricing-receipt dd { margin:0; font-weight:600; }
.pricing-receipt > p { margin:.75rem 0 1.375rem; color:var(--soft); font-size:.9375rem; line-height:1.5; }
.pricing-link { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.25rem; padding:.75rem 1rem; border:1px solid var(--ink); border-radius:.625rem; font-weight:600; }
.pricing-link > span { font-size:1.375rem; line-height:1; }
.pricing-link:hover { background:var(--emerald); }
.pricing .booking-information { margin-top:2rem; padding:1.5rem 0 0; background:none; border-top:1px solid var(--line); border-radius:0; }
.pricing .booking-information h4 { margin:0 0 1rem; font:500 1.375rem/1.4 'Lora',Georgia,serif; }
.pricing .booking-information p { font-size:1rem; color:var(--soft); }
@media (max-width:40rem) {
  .pricing-heading,.pricing-cards { grid-template-columns:1fr; }
  .pricing-heading { gap:1rem; margin-bottom:1.5rem; }
  .pricing-cards { gap:1.25rem; }
  .pricing-card h4 { min-height:0; }
}
@media print { .pricing-card { break-inside:avoid; } .pricing-link { display:none; } }

/* =====================================================================
   Entwurfsebene fuer den Einstiegsvergleich (17.10.2026)
   Basis oben bleibt unveraendert: Farbrollen, Fokus, Reduced Motion,
   Forced Colors und Schriften stammen aus der Quelle.
   ===================================================================== */

:root { --ink-strong: #17463a; }

/* --- Entwurfskennzeichnung ------------------------------------------ */
.draft-banner {
  width: min(73.75rem, calc(100% - 6rem)); margin: 1.25rem auto 0;
  border: 1px solid #c9a23c; border-left: 6px solid #a8801f; border-radius: .5rem;
  background: #fff3d2; padding: 1.125rem 1.375rem; font-size: 1rem; line-height: 1.55;
}
.draft-banner p { margin: 0 0 .625rem; }
.draft-banner ul { margin: 0; padding-left: 1.25rem; color: #4a3c18; }
.draft-banner li + li { margin-top: .3125rem; }
.draft-note {
  font-size: .9375rem; line-height: 1.5; color: #4a3c18;
  background: #fff3d2; border-left: 3px solid #a8801f; border-radius: .25rem;
  padding: .625rem .875rem; margin: 1rem 0 0;
}
.draft-note.wide { margin-top: 2rem; max-width: 60ch; }

/* --- Hauptaktion ----------------------------------------------------- */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1rem; margin-top: 1.875rem; }
.button.primary {
  flex-wrap: wrap; justify-content: center; gap: .5rem; min-height: 3.25rem;
  padding: .9375rem 1.625rem; background: var(--ink); color: var(--paper);
  border-color: var(--ink); font-size: 1.125rem;
}
.button.primary strong { font-weight: 700; white-space: nowrap; }
.button.primary .dot { opacity: .65; }
.tel-button.button.small {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  min-height: 3rem; padding: .5rem 1rem; background: var(--gold); color: var(--ink-strong);
  line-height: 1.25;
}
.tel-button span { font-size: .8125rem; font-weight: 600; letter-spacing: .03em; }
.tel-button strong { font-size: 1.125rem; font-weight: 700; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .button.primary:hover { background: #17463a; }
  .tel-button.button.small:hover { background: #f6d37e; }
}

/* --- Einstieg -------------------------------------------------------- */
.hero { align-items: center; padding-block: 3.25rem 3.75rem; }
.hero h1 { font-size: 3.5rem; margin-bottom: 1.25rem; }
.hero .intro { font-size: 1.3125rem; max-width: 31rem; margin-bottom: 0; }
.hero-note { margin-top: 1.25rem; max-width: 27rem; }

/* --- Kurzvorstellung ------------------------------------------------- */
.about { padding-block: 4.375rem; align-items: start; }
.about h2 { margin-bottom: 1rem; }
.about-copy p:last-child { margin-bottom: 0; }
.about-side > :first-child { margin-top: 0; }
.about-qualifications { border-left: 3px solid #aa8430; padding: .25rem 0 .25rem 1.25rem; margin: 0; }
.haltung {
  list-style: none; margin: 1.75rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--line); font-size: 1rem; display: grid; gap: .5rem;
}
.haltung li { padding-left: 1.5rem; position: relative; }
.haltung li::before { content: "\273f"; position: absolute; left: 0; color: #946d21; }

/* --- Angebote in drei Themen ---------------------------------------- */
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.theme {
  min-width: 0; border: 1px solid var(--line); border-radius: .75rem;
  background: #fffdf7; padding: 1.75rem;
}
.theme h3 { margin: 0 0 1.25rem; padding-bottom: .875rem; border-bottom: 1px solid var(--line); }
.theme ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.375rem; }
.theme li { display: flex; align-items: flex-start; gap: .875rem; min-width: 0; }
.theme li > div { min-width: 0; }
.theme .icon {
  flex: 0 0 2.75rem; width: 2.75rem; min-height: 2.75rem;
  margin: .125rem 0 0; background: #f5ecd5;
}
.theme li:nth-child(2n) .icon { background: var(--green); }
.theme .icon svg { width: 1.5rem; height: 1.5rem; }
.theme strong { display: block; font: 500 1.125rem/1.4 'Lora', Georgia, serif; }
.theme p { color: var(--soft); font-size: 1rem; margin: .375rem 0 0; }

/* --- Abschnittsabstaende und Kontakt --------------------------------- */
.section-heading { align-items: end; }
.steps li > span { color: var(--ink-strong); }
.contact-details h3 { margin-top: 0; }
.contact { padding-block: 2.75rem; }

@media (max-width: 60rem) {
  .draft-banner { width: calc(100% - 3rem); }
  .hero h1 { font-size: 2.875rem; }
}
@media (max-width: 40rem) {
  .draft-banner { width: calc(100% - 2.5rem); padding: 1rem; font-size: .9375rem; }
  .header { padding-block: 1rem; gap: 1rem; }
  .brand small { display: none; }
  nav { gap: .5rem 1rem; font-size: .9375rem; }
  nav > a { min-height: 2.5rem; padding: .375rem .125rem; }
  nav .button.small.tel-button { flex-basis: 100%; flex-direction: row; align-items: center; justify-content: center; gap: .5rem; }
  .hero { padding-block: 1.75rem 2.25rem; gap: 1.75rem; }
  .hero h1 { font-size: 2.3125rem; margin-bottom: 1rem; }
  .hero .intro { font-size: 1.1875rem; }
  .hero-actions { margin-top: 1.5rem; gap: .75rem; }
  .hero-actions .button { width: 100%; }
  .about { padding-block: 2.875rem; }
  .theme { padding: 1.5rem; }
  .contact { padding: 1.5rem; }
}

/* Kompakte Entwurfskennzeichnung; Einzelheiten stehen in CLAUDE-ERGEBNIS.md. */
.draft-banner p:last-child { margin-bottom: 0; }
.draft-banner-sub { color: #4a3c18; font-size: .9375rem; }

/* Einstiegsueberschrift ohne Silbentrennung: bricht an Wortgrenzen statt "Beglei-tung". */
.hero h1 { hyphens: manual; }

/* =====================================================================
   Nachtrag 17.10.2026: volle Seitenbreite auf Angelos Wunsch,
   dazu Korrekturen aus design-taste-frontend (lokale Fassung,
   SHA-256 aa194351b2...). Abweichungen sind in CLAUDE-ERGEBNIS.md begruendet.
   ===================================================================== */

/* Volle Breite statt fester Inhaltsspalte; Lesetexte bleiben begrenzt. */
.wrap { width: calc(100% - 6rem); max-width: none; }
.draft-banner { width: calc(100% - 6rem); }
.hero { justify-content: space-between; }
.hero-copy { flex: 1 1 28rem; max-width: 46rem; }
h1 { max-width: 28ch; }
h2 { max-width: 26ch; }
.about-copy p { max-width: 68ch; }
.theme p, .steps p { max-width: 46ch; }
.section-lead { color: var(--soft); font-size: 1.1875rem; max-width: 62ch; margin-bottom: 2.5rem; }

/* Radien-Skala, dokumentiert: Bedienflaechen und kleine Hinweise .5rem,
   Panels .75rem, grosse Flaechen 1rem, Icons und Abzeichen Kreis,
   Portraets Bogen. (Taste 4.4, Shape Consistency Lock) */
.button { border-radius: .5rem; }
.draft-note { border-radius: .5rem; }
.draft-banner { border-radius: .75rem; }

/* Drei gleichwertige Themen ohne Kartenrahmen: Gruppierung ueber Haarlinie
   und Weissraum statt drei identischer Karten. (Taste 4.4 und 9.C) */
.themes { gap: 2.75rem 3.5rem; }
.theme { border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: none; padding: 1.375rem 0 0; }
.theme h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.125rem; }

/* Kopfzeile flacher, Telefonbutton einzeilig. (Taste 4.7) */
.tel-button.button.small { flex-direction: row; align-items: center; gap: .5rem; }
@media (min-width: 60.0625rem) { .header { padding-block: 1.25rem; } }

@media (max-width: 60rem) {
  .wrap, .draft-banner { width: calc(100% - 3rem); }
}
@media (max-width: 40rem) {
  .wrap, .draft-banner { width: calc(100% - 2.5rem); }
  .section-lead { font-size: 1.125rem; margin-bottom: 2rem; }
}

/* Breite Schirme: Spalten duerfen mitwachsen, damit die Mitte nicht leer wirkt. */
.hero-copy { max-width: 50rem; }

/* Mittlere Desktopbreiten: Navigation bleibt einzeilig neben der Wortmarke. */
@media (min-width: 60.0625rem) and (max-width: 81.25rem) {
  nav { gap: .5rem 1.125rem; font-size: .9375rem; }
  .tel-button.button.small { padding: .5rem .875rem; gap: .375rem; }
  .tel-button span { font-size: .9375rem; }
  .tel-button strong { font-size: 1.0625rem; }
}

/* 961-1120 px: Wortmarke kompakt, Telefonbutton zeigt nur die Nummer.
   Damit bleiben alle vier Navigationspunkte einzeilig neben der Wortmarke. */
@media (min-width: 60.0625rem) and (max-width: 70rem) {
  .brand { font-size: 1.375rem; }
  .brand small { display: none; }
  .tel-button span { display: none; }
}

/* Keine Silbentrennung in Ueberschriften; zentrierte Abschnitte bleiben zentriert. */
h1, h2, h3 { hyphens: manual; }
.together h2 { max-width: 30ch; margin-inline: auto; }
.contact h2 { max-width: 22ch; }

/* =====================================================================
   Nachtrag 2: Inhaltsbreite wieder begrenzt (1400 px, Taste 3.E),
   Kopfzeile und Einstiegsband weiterhin ueber die volle Breite.
   Die Illustration liegt als Hintergrundband im Einstieg.
   ===================================================================== */

.wrap { width: min(87.5rem, calc(100% - 6rem)); }
.header { width: calc(100% - 6rem); max-width: none; }

/* Einstieg als volles Band mit der Illustration als Hintergrund. */
.hero-band { position: relative; isolation: isolate; overflow: hidden; }
.hero-band .hero { padding-block: 3.25rem 8.5rem; }
.hero-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 11rem; z-index: -1; }
.hero-bg .band-art { display: block; width: 100%; height: 100%; }
/* Cremeschleier: oben deckend, damit Text und Buttons lesbar bleiben. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--paper) 0%, rgba(255, 250, 240, .97) 22%, rgba(255, 250, 240, .62) 48%, rgba(255, 250, 240, 0) 82%);
}

.band-label {
  position: absolute; right: 3rem; bottom: 1.25rem; z-index: 1; max-width: 21rem; margin: 0;
  text-align: right; background: rgba(255, 250, 240, .93); border: 1px solid #e1dfcc;
  border-radius: .5rem; padding: .5rem .75rem; font: 1rem/1.4 'Lora', Georgia, serif;
}
.band-label span { display: block; margin-top: .125rem; color: var(--soft); font: 400 .8125rem/1.4 'DM Sans', Arial, sans-serif; }

@media (max-width: 60rem) {
  .wrap { width: min(87.5rem, calc(100% - 3rem)); }
  .header { width: calc(100% - 3rem); }
  .hero-band .hero { padding-bottom: 7rem; }
  .hero-bg { height: 9rem; }
  .band-label { right: 1.5rem; bottom: 1rem; max-width: 17rem; font-size: .9375rem; }
}
@media (max-width: 40rem) {
  .wrap { width: min(87.5rem, calc(100% - 2.5rem)); }
  .header { width: calc(100% - 2.5rem); }
  /* Mobil steht die Bildunterschrift im Fluss, damit sie nichts ueberdeckt. */
  .hero-band .hero, .band-gross .hero { padding-bottom: 6.5rem; }
  .hero-bg, .band-gross .hero-bg { height: 7.5rem; }
  .band-label { right: 1.25rem; bottom: .75rem; max-width: 14rem; padding: .4375rem .625rem; font-size: .875rem; }
  .band-label span { font-size: .75rem; }
}

/* =====================================================================
   Nachtrag 3: Panorama-Fassung der Illustration.
   Sie steht im Fluss unter dem Einstiegstext und traegt die volle Breite,
   statt als hochformatige Zeichnung auf Bandhoehe beschnitten zu werden.
   ===================================================================== */

.hero-band { position: relative; background: var(--paper); overflow: hidden; }
.hero-band .hero { padding-block: 3.25rem 2.5rem; }
/* Hoehe kommt allein aus dem Seitenverhaeltnis; aeltere Bandregeln werden hier
   ausdruecklich zurueckgesetzt, sonst wird die Szene oben und unten beschnitten. */
.hero-bg, .band-gross .hero-bg {
  position: relative; inset: auto; z-index: auto;
  width: 100%; aspect-ratio: 1600 / 300; height: auto;
}
.hero-bg .band-art { display: block; width: 100%; height: 100%; }
/* Variante A: weicher Uebergang von der Cremeflaeche in die Szene. */
.hero-bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--paper) 0%, rgba(255, 250, 240, .72) 26%, rgba(255, 250, 240, .18) 58%, rgba(255, 250, 240, 0) 82%);
}

.band-label {
  position: absolute; right: 3rem; bottom: 1.25rem; z-index: 2; max-width: 22rem; margin: 0;
  text-align: right; background: rgba(255, 250, 240, .9); border: 0; border-radius: .5rem;
  padding: .4375rem .75rem; font: 1rem/1.4 'Lora', Georgia, serif;
}

@media (max-width: 60rem) {
  .hero-band .hero { padding-bottom: 2rem; }
  .band-label { right: 1.5rem; bottom: 1rem; font-size: .9375rem; }
}
@media (max-width: 40rem) {
  /* Schmale Schirme: fester Bandausschnitt, damit die Szene nicht zum Strich wird. */
  .hero-band .hero, .band-gross .hero { padding-bottom: 1.75rem; }
  .hero-bg, .band-gross .hero-bg { aspect-ratio: auto; height: 8.5rem; }
  .band-label { right: 1.25rem; bottom: .75rem; max-width: 15rem; font-size: .875rem; }
}

/* =====================================================================
   Nachtrag 4 (18.10.2026):
   a) Einstieg und Illustration fuellen zusammen genau eine Bildschirmhoehe.
   b) Zurueckhaltende Bewegung, nur in der Szene, nie im Text oder an den
      Kontaktwegen. Animiert werden ausschliesslich transform und opacity.
   ===================================================================== */

/* --- a) Eine Bildschirmhoehe ---------------------------------------- */
/* --kopf ist die gemessene Hoehe der Kopfzeile je Breitenbereich. */
:root { --kopf: 102px; }
.hero-band {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--kopf));
  min-height: calc(100svh - var(--kopf));
}
.hero-band .hero { flex: 1 1 auto; }
.hero-bg, .band-gross .hero-bg { flex: 0 0 auto; max-height: 34svh; }

/* --- b) Bewegung in der Szene --------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .biene, .wolke, .blumen { transform-box: fill-box; will-change: transform; }
  .biene { transform-origin: 50% 50%; animation: biene-zieht 11s ease-in-out infinite alternate; }
  .wolke { transform-origin: 50% 50%; }
  .wolke-1 { animation: wolke-zieht 74s ease-in-out infinite alternate; }
  .wolke-2 { animation: wolke-zieht 96s ease-in-out infinite alternate; }
  .blumen { transform-origin: 50% 100%; }
  .blumen-1 { animation: blume-wiegt 8s ease-in-out infinite alternate; }
  .blumen-2 { animation: blume-wiegt 11s ease-in-out infinite alternate; }

  @keyframes biene-zieht {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(34px, -12px) rotate(-4deg); }
  }
  @keyframes wolke-zieht {
    from { transform: translateX(0); }
    to { transform: translateX(42px); }
  }
  @keyframes blume-wiegt {
    from { transform: rotate(-1.6deg); }
    to { transform: rotate(2.2deg); }
  }
}
/* Ausdrueckliche Gegenprobe: bei reduzierter Bewegung steht die Szene still. */
@media (prefers-reduced-motion: reduce) {
  .biene, .wolke, .blumen { animation: none !important; transform: none !important; will-change: auto; }
}

@media (min-width: 60.0625rem) and (max-width: 70rem) { :root { --kopf: 89px; } }
@media (min-width: 40.0625rem) and (max-width: 60rem) { :root { --kopf: 194px; } }
@media (max-width: 40rem) { :root { --kopf: 240px; } }

/* Nur im Entwurf: der Hinweisbanner oben faellt bei einer Umsetzung weg.
   Damit die erste Ansicht hier schon zeigt, was spaeter zu sehen ist,
   wird seine Hoehe zusaetzlich abgezogen. Die Regel darueber bleibt die
   massgebliche Produktionsregel. */
:root { --banner: 142px; }

@media (min-width: 60.0625rem) and (max-width: 70rem) { :root { --banner: 172px; } }
@media (min-width: 40.0625rem) and (max-width: 60rem) { :root { --banner: 192px; } }
@media (max-width: 40rem) { :root { --banner: 282px; } }
@media (max-width: 23.5rem) { :root { --banner: 350px; } }

/* Einzeiliger Entwurfsbanner: kleinere Abzugswerte. */
:root { --banner: 66px; }
@media (min-width: 60.0625rem) and (max-width: 70rem) { :root { --banner: 92px; } }
@media (min-width: 40.0625rem) and (max-width: 60rem) { :root { --banner: 92px; } }
@media (max-width: 40rem) { :root { --banner: 118px; } }
@media (max-width: 23.5rem) { :root { --banner: 140px; } }

/* Die Bildschirmhoehen-Regel gilt ab Tablet. Auf Telefonen waere sie nur zu
   erreichen, indem Schrift, Portraet oder Szene verkleinert werden; die
   Lesbarkeit fuer diese Zielgruppe hat Vorrang. Dort waechst der Einstieg
   mit dem Inhalt, nichts wird abgeschnitten. */
@media (max-width: 40rem) {
  .hero-band { min-height: 0; }
}

/* Auf flachen Bildschirmen (etwa 1024x768) binden Innenabstaende und Szene
   an die Bildschirmhoehe, damit Einstieg und Illustration zusammenpassen. */
@media (min-width: 40.0625rem) {
  .hero-band .hero { padding-block: clamp(1.25rem, 4svh, 3.25rem) clamp(1rem, 3svh, 2.5rem); }
  .hero-bg, .band-gross .hero-bg { max-height: 30svh; }
  .hero .intro { margin-bottom: 0; }
  .hero-actions { margin-top: clamp(1rem, 3svh, 1.875rem); }
}


/* =====================================================================
   Nachtrag 5 (18.10.2026): Himmelband fuer beide Varianten, Kontaktband
   ueber die volle Breite, WhatsApp, Trennszene, Footer, Hoververhalten.
   ===================================================================== */

/* Himmelband im Einstieg, jetzt in A und B. */
.band-gross { background: #e6ebdc; }
.band-gross .hero { padding-block: clamp(1.5rem, 4.5svh, 4rem) clamp(1rem, 3svh, 3rem); }
.band-gross .hero-bg::after { display: none; }
.band-gross .band-label { background: rgba(255, 250, 240, .92); }
/* Nebenaktion braucht auf dem Himmel eine eigene Flaeche. */
.band-gross .button:not(.primary) { background: var(--paper); border-color: #cbd6bd; }
@media (hover: hover) and (pointer: fine) { .band-gross .button:not(.primary):hover { background: #fff; } }

/* Keine Unterstreichung beim Hover; Rueckmeldung ueber Farbe und Staerke.
   Die Grundunterstreichung von Fliesstextlinks bleibt als Lesehilfe erhalten. */
@media (hover: hover) and (pointer: fine) {
  nav > a:not(.button):hover,
  .contact-link:hover,
  .brand:hover,
  .contact-privacy a:hover, .legal-page a:hover, .booking-information a:hover, .footer-kontakt a:hover {
    text-decoration-line: none; color: #17463a;
  }
}
nav > a:not(.button):is(:hover, :focus-visible) { text-decoration-thickness: 1px; text-underline-offset: .3em; }
.contact-link:is(:hover, :focus-visible) { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.brand:hover { text-decoration: none; }

/* WhatsApp als dritter Kontaktweg. */
.button.whatsapp {
  gap: .625rem; justify-content: flex-start; margin-top: .75rem;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  font-size: 1.0625rem;
}
.button.whatsapp .wa-icon { display: flex; }
.button.whatsapp svg { width: 1.375rem; height: 1.375rem; }
@media (hover: hover) and (pointer: fine) { .button.whatsapp:hover { background: #fff; } }

/* Kontaktbereich als gelbes Band ueber die volle Breite. */
.contact-band { background: #f5d982; padding-block: clamp(2.5rem, 6vw, 4.375rem); }
.contact { background: none; border-radius: 0; padding: 0; }
.contact-band .draft-note { background: rgba(255, 250, 240, .72); border-left-color: #8a6a18; }

/* Trennszene vor dem Kontaktband. */
.szenenband { width: 100%; aspect-ratio: 1600 / 170; max-height: 22svh; overflow: hidden; }
.szenenband svg { display: block; width: 100%; height: 100%; }

/* Footer mit Kontaktweg und Einsatzgebiet. */
footer { border-top: 1px solid var(--line); }
.footer-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), auto));
  gap: 2rem 3rem; align-items: start; padding-block: 2.75rem 2.5rem; justify-content: space-between;
}
.footer-inner strong { display: block; font-size: 1rem; margin-bottom: .5rem; }
.footer-inner p { font-size: 1rem; color: var(--soft); margin: 0; line-height: 1.9; }
.footer-kontakt a { text-decoration: underline; text-underline-offset: .2em; }
.legal-links { display: flex; flex-wrap: wrap; align-items: start; }

@media (max-width: 40rem) {
  .szenenband { aspect-ratio: auto; height: 6rem; }
  .footer-inner { gap: 1.75rem; padding-block: 2rem; }
}


/* =====================================================================
   Nachtrag 6 (18.10.2026): Links ohne Unterstreichung, Klappmenue und
   feste Kontaktleiste auf schmalen Schirmen.
   ===================================================================== */

/* --- Links: kleines Feld statt Unterstreichung ----------------------- */
/* Links im Fliesstext werden als Flaeche mit sichtbarem Rand gekennzeichnet.
   Das ist eine Form, keine Farbe allein: der Rand (#a8801f) steht mit 3,28:1
   gegen die Seitenflaeche, der Text darauf mit 5,62:1. Damit bleiben Links
   auch ohne Farbwahrnehmung und ohne Unterstreichung erkennbar. */
.contact-privacy a, .booking-information a, .legal-page a, .footer-kontakt a, .about-copy a {
  display: inline-block; text-decoration: none; font-weight: 600; color: var(--ink);
  background: #f6dfa5; border: 1px solid #a8801f; border-radius: .25rem;
  padding: 0 .3em; line-height: 1.45;
}
@media (hover: hover) and (pointer: fine) {
  .contact-privacy a:hover, .booking-information a:hover, .legal-page a:hover,
  .footer-kontakt a:hover, .about-copy a:hover { background: #f0c55d; text-decoration: none; }
}

/* Navigation: kein Strich, Flaeche beim Zeigen. */
nav > a:not(.button) { text-decoration: none; }
nav > a:not(.button):is(:hover, :focus-visible) { text-decoration: none; background: #eef1e6; border-radius: .375rem; }
nav > a:not(.button) { padding-inline: .5rem; }
.brand, .brand:hover { text-decoration: none; }

/* Kontaktangaben als Flaechen statt unterstrichener Zeilen. */
.contact-link {
  text-decoration: none; background: var(--paper); border: 2px solid var(--ink);
  border-radius: .5rem; padding: .625rem 1rem; margin-top: .25rem;
}
.contact-link:is(:hover, :focus-visible) { text-decoration: none; background: #fff; }
.contact-kind { margin-top: 1rem; font-weight: 600; }

/* --- Klappmenue ------------------------------------------------------ */
.menue-schalter { display: none; }
.menue-aktiv .menue-schalter {
  display: none; align-items: center; gap: .625rem; min-height: 3rem;
  padding: .5rem 1rem; border: 2px solid var(--ink); border-radius: .5rem;
  background: var(--paper); color: var(--ink); font: 600 1.0625rem 'DM Sans', Arial, sans-serif; cursor: pointer;
}
.balken, .balken::before, .balken::after {
  display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px;
}
.balken { position: relative; }
.balken::before, .balken::after { content: ""; position: absolute; left: 0; }
.balken::before { top: -.375rem; }
.balken::after { top: .375rem; }

@media (max-width: 60rem) {
  .menue-aktiv .menue-schalter { display: inline-flex; }
  .menue-aktiv .menue-schalter[aria-expanded="false"] + nav { display: none; }
  .menue-aktiv .header nav {
    width: 100%; flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 1rem; border-top: 1px solid var(--line);
  }
  .menue-aktiv .header nav > a:not(.button) {
    min-height: 3.25rem; padding: .875rem .5rem; border-bottom: 1px solid var(--line);
  }
  .menue-aktiv .header nav .tel-button { margin-top: 1rem; justify-content: center; }
  .header { align-items: center; }
}

/* --- Feste Kontaktleiste auf schmalen Schirmen ----------------------- */
.schnellkontakt { display: none; }
@media (max-width: 40rem) {
  .schnellkontakt {
    display: flex; gap: .625rem; position: fixed; z-index: 30;
    left: 0; right: 0; bottom: 0; padding: .375rem .75rem calc(.375rem + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: none;
  }
  .schnellkontakt .button {
    flex: 1; justify-content: center; min-height: 2.75rem; margin: 0; padding: .5rem .75rem;
    border: 0; background: transparent; color: var(--ink); box-shadow: none;
    font-size: 1rem; font-weight: 500;
  }
  .schnellkontakt .button.whatsapp {
    background: transparent; border-left: 1px solid var(--line); border-radius: 0;
  }
  .schnellkontakt .button.whatsapp svg { width: 1.125rem; height: 1.125rem; }
  /* Platz, damit die Leiste nichts verdeckt. */
  body { padding-bottom: 6rem; }
}
@media (prefers-reduced-motion: reduce) { .schnellkontakt { box-shadow: none; } }

/* Sehr schmale Schirme: Kontaktleiste einzeilig halten. */
.schnellkontakt .button { white-space: nowrap; }
@media (max-width: 23.5rem) {
  .schnellkontakt { gap: .5rem; padding-inline: .5rem; }
  .schnellkontakt .button { font-size: 1rem; padding-inline: .625rem; gap: .375rem; }
  .schnellkontakt .button.whatsapp svg { width: 1.125rem; height: 1.125rem; }
  body { padding-bottom: 5.5rem; }
}

/* Kopfzeile auf Telefonen einzeilig: Wortmarke und Schalter nebeneinander. */
@media (max-width: 40rem) {
  .header { flex-wrap: nowrap; align-items: center; gap: .75rem; }
  .brand { font-size: 1.25rem; gap: .5rem; min-width: 0; }
  .bee { flex: 0 0 2.5rem; width: 2.5rem; min-height: 2.5rem; font-size: 1.625rem; }
  .menue-aktiv .menue-schalter { flex: 0 0 auto; padding: .5rem .75rem; font-size: 1rem; gap: .5rem; }
  /* Die aufgeklappte Navigation steht weiterhin unter der Zeile. */
  .menue-aktiv .menue-schalter[aria-expanded="true"] + nav { order: 3; }
  .header { flex-wrap: wrap; }
  .brand, .menue-aktiv .menue-schalter { flex-shrink: 0; }
  .menue-aktiv .header nav { order: 3; }
}
@media (max-width: 23.5rem) {
  .menue-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menue-aktiv .menue-schalter { padding: .625rem .75rem; }
  .brand { font-size: 1.125rem; }
}

/* =====================================================================
   Nachtrag 7: Auf Telefonen steht Sabines Bild direkt unter der
   Ueberschrift. Die Hauptaktion bleibt ueber die feste Kontaktleiste
   am unteren Rand jederzeit erreichbar.
   ===================================================================== */
.nur-schmal { display: none; }
@media (max-width: 40rem) {
  /* In der Spalte muessen die Elemente auf volle Breite gezogen werden,
     sonst richtet sich ihre Breite nach dem Inhalt (Bild 1536 px). */
  .hero { flex-direction: column; align-items: stretch; }
  /* Die Textgruppe loest sich auf, damit das Bild zwischen Ueberschrift
     und Einstiegstext einsortiert werden kann. */
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  /* Der Spaltenabstand des Einstiegs reicht; eigene Margen kaemen oben
     und unten dazu und erzeugen die Luecke unter dem Bild. */
  /* In der Spalte wirkt flex-grow auf die Hoehe; die Bildgruppe wuerde den
     Restplatz aufsaugen und darunter eine Luecke lassen. */
  .hero-portrait { order: 2; flex: 0 0 auto; width: 100%; max-width: 22rem; margin: 0 auto; }
  .hero h1 { margin-bottom: 0; }
  .hero .intro { order: 3; }
  .hero-actions { order: 4; }
  .hero-note { order: 5; }
  .nur-schmal { display: block; }
  /* In B zeigt dafuer die Kurzvorstellung das Bild nicht doppelt. */
  .variant-b .about-photo { display: none; }
  .hero-portrait img { width: 100%; max-height: 13rem; aspect-ratio: 16 / 10; object-fit: cover;
    object-position: 50% 38%; border-radius: 5rem 5rem .75rem .75rem; background: var(--green); }
  .hero-portrait figcaption { margin-top: .5rem; font-size: .9375rem; }
}

/* Die Bildunterschrift deckt auf schmalen Schirmen zu viel von der Szene ab. */
@media (max-width: 40rem) { .band-label { display: none; } }

/* Einstieg auf Telefonen etwas enger setzen: der Spaltenabstand war mit 48 px
   zu gross, vor allem zwischen Ueberschrift, Bild und Text. */
@media (max-width: 40rem) { .hero { gap: 1.5rem; } }

/* --- Variante A: Portraet im Einstieg, Biene als kleines Zeichen ----- */
.hero-portrait { position: relative; flex: 1 1 20rem; max-width: 24rem; margin: 0; }
.hero-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 32%; border-radius: 12rem 12rem 1rem 1rem; background: var(--green);
}
.hero-portrait figcaption {
  margin-top: .875rem; text-align: center; font: 1.0625rem/1.5 'DM Sans', Arial, sans-serif;
  color: var(--soft);
}
.bee-badge {
  position: absolute; left: -.75rem; bottom: 4.25rem; display: grid; place-items: center;
  width: 5.25rem; height: 5.25rem; border-radius: 50%; background: var(--paper);
  box-shadow: 0 6px 20px #233c271f; border: 1px solid #e1dfcc;
}
.bee-mark { width: 3.5rem; height: 3.25rem; }
.about { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem 4.5rem; }

@media (max-width: 60rem) {
  .hero-portrait { flex-basis: 17rem; max-width: 20rem; }
  .bee-badge { width: 4.5rem; height: 4.5rem; bottom: 3.5rem; }
  .bee-mark { width: 3rem; height: 2.75rem; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}
@media (max-width: 40rem) {
  /* Mobil: Hauptaktion zuerst, Portraet unmittelbar anschliessend im Einstieg. */
  /* In der Spalte wirkt die Flexbasis als Hoehe, nicht als Breite. */
  .hero-portrait { flex: 0 0 auto; width: 100%; max-width: 22rem; margin-inline: auto; }
  .hero-portrait img { aspect-ratio: 4 / 3; max-height: 15rem; object-position: 50% 26%; border-radius: 7rem 7rem .75rem .75rem; }
  .hero-portrait figcaption { margin-top: .625rem; font-size: 1rem; }
  .bee-badge { left: auto; right: .25rem; bottom: 2.75rem; width: 3.75rem; height: 3.75rem; }
  .bee-mark { width: 2.5rem; height: 2.25rem; }
}

/* Nachtrag: Portraet darf auf breiten Schirmen mitwachsen. */
/* Nur ab Tablet: in der Zeile darf das Portraet mitwachsen. Auf Telefonen
   wuerde dieselbe Regel als Hoehe wirken und eine Luecke erzeugen. */
@media (min-width: 40.0625rem) { .hero-portrait { flex: 1 1 22rem; max-width: 36rem; } }
@media (min-width: 60.0625rem) {
  .about { grid-template-columns: minmax(0, 72ch) minmax(0, 26rem); justify-content: space-between; }
}

/* Variante A: Portraet darf in die Szene hineinragen. */
.hero-portrait { margin-bottom: -2.5rem; }
@media (max-width: 40rem) { .hero-portrait { margin-bottom: 0; } }

/* Damit Einstieg und Szene zusammen eine Bildschirmhoehe ergeben, ist das
   Portraet an die Bildschirmhoehe gebunden statt an eine feste Breite. */
@media (min-width: 40.0625rem) {
  .hero-portrait img { max-height: 34svh; width: 100%; object-fit: cover; }
}
/* Der Einstieg wird auf Bildschirmhoehe gestreckt. Die Textspalte bleibt
   mittig, das Portraet sitzt an der Unterkante der Zeile und reicht leicht
   in die Szene hinein. Sonst klafft darunter eine Luecke. */
@media (min-width: 40.0625rem) {
  .hero-portrait { align-self: end; }
  .hero-portrait img { max-height: 40svh; }
}

/* Portraet im Seitenverhaeltnis des Originals (3:2), damit nichts beschnitten
   wird und Sabine Luft ueber dem Kopf hat. Flacherer Bogen oben. */
.hero-portrait img { aspect-ratio: 3 / 2; object-position: 50% 42%; border-radius: 6rem 6rem 1rem 1rem; }
@media (min-width: 40.0625rem) { .hero-portrait { max-width: 32rem; } .hero-portrait img { max-height: 30svh; } }
@media (max-width: 40rem) { .hero-portrait img { aspect-ratio: 3 / 2; max-height: none; border-radius: 4.5rem 4.5rem .75rem .75rem; } }

/* Mobil haengt das Bienenzeichen neben dem Bild; die Biene ist ohnehin
   in der Wortmarke und in der Szene vorhanden. */
@media (max-width: 40rem) { .bee-badge { display: none; } }

/* Variante A, nur Desktop: Das Foto teilt die Hoehe des Text-/Buttonblocks.
   Die Bildunterschrift steht darunter und bestimmt die Zeilenhoehe nicht. */
@media (min-width: 64rem) {
  .variant-a .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-content: center;
    align-items: center;
  }
  .variant-a .hero-portrait {
    position: relative;
    align-self: stretch;
    justify-self: end;
    width: 100%; max-width: 32rem; min-height: 0; margin: 0;
  }
  .variant-a .hero-portrait img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
    object-fit: cover; object-position: 50% 35%;
  }
  .variant-a .hero-portrait figcaption {
    position: absolute; top: 100%; left: 0; right: 0;
    margin: .875rem 0 0;
  }
}


/* Rechtslinks bleiben auch mobil eine ruhige, waagerechte Neben-Navigation. */
@media (max-width: 40rem) {
  footer .legal-links { flex-direction: row; gap: .25rem 1.25rem; }
  footer .legal-links > a {
    min-height: 2.75rem; padding: .5rem 0; border: 0; border-radius: 0;
    background: transparent; color: var(--soft); font-size: .875rem; font-weight: 400;
  }
  footer .legal-links > a:is(:hover, :focus-visible) { background: transparent; color: var(--ink); }
}


/* Dezenter Urheberhinweis mit lokalem Original-Logo von Pixel & Stoff. */
.footer-credit { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.footer-credit > a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; min-height: 2.75rem; color: var(--soft); font-size: .8125rem; text-decoration: none; }
.footer-credit img { display: block; width: 10.625rem; height: auto; }
.footer-credit > a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: .25rem; }
@media (hover: hover) and (pointer: fine) { .footer-credit > a:hover { color: var(--ink); } }
@media (max-width: 40rem) {
  .footer-credit { padding-top: 1rem; }
  .footer-credit > a { flex-direction: column; align-items: flex-start; gap: .625rem; font-size: .75rem; }
  .footer-credit img { width: 9.375rem; }
}