/* HAUTNAH Schönheitssalon – Stylesheet · A-Gentur 2026
   Farben und Schriften aus der CI (Logo 2026, Faltblatt 10/2026). Keine externen Dienste. */

/* ---------- Schriften (lokal, OFL) ---------- */
@font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/tenor-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/tenor-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jost-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jost-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/jost-latin-500-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/jost-latin-ext-500-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Farben, Maße ---------- */
:root {
  --creme: #F4EDE4; --creme-hell: #FAF6F0; --creme-dunkel: #E9DFD2;
  --anthrazit: #2B2A2E; --text: #2B2A2E; --text-2: #5E574E; --linie: rgba(43, 42, 46, .14);
  --gold: #CDB285; --gold-dunkel: #9A7536; --gold-linie: rgba(154, 117, 54, .55);
  --salbei: #55694F; --salbei-hell: #E4E9E0; --salbei-tief: #42523E;
  --rosenholz: #99595F; --rosenholz-hell: #F1E3E4; --rosenholz-tief: #7B4449;
  --bronze: #946C38; --bronze-hell: #F0E5D3; --bronze-tief: #76542A;
  --kopf-h: 76px; --leiste-h: 72px;
  --rund: 999px; --rund-klein: 14px;
  --display: "Tenor Sans", "Trebuchet MS", Georgia, serif;
  --text-font: "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --dauer: .7s; --kurve: cubic-bezier(.22, .8, .3, 1);
  --breit: 1240px; --schmal: 980px;
}
.bereich--salbei, .preisteil--salbei, .cta--salbei { --akzent: var(--salbei); --akzent-hell: var(--salbei-hell); --akzent-tief: var(--salbei-tief); }
.bereich--rosenholz, .preisteil--rosenholz, .cta--rosenholz { --akzent: var(--rosenholz); --akzent-hell: var(--rosenholz-hell); --akzent-tief: var(--rosenholz-tief); }
.bereich--bronze, .preisteil--bronze, .cta--bronze { --akzent: var(--bronze); --akzent-hell: var(--bronze-hell); --akzent-tief: var(--bronze-tief); }
.--salbei, [class*="--salbei"] { --farbe: var(--salbei); --farbe-hell: var(--salbei-hell); --farbe-tief: var(--salbei-tief); }
[class*="--rosenholz"] { --farbe: var(--rosenholz); --farbe-hell: var(--rosenholz-hell); --farbe-tief: var(--rosenholz-tief); }
[class*="--bronze"] { --farbe: var(--bronze); --farbe-hell: var(--bronze-hell); --farbe-tief: var(--bronze-tief); }

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--text); font: 400 17px/1.6 var(--text-font); min-height: 100vh;
  padding-top: var(--kopf-h); overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--creme)
  radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%); }
::selection { background: var(--gold); color: var(--anthrazit); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--gold-dunkel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--anthrazit); }
:focus-visible { outline: 2px solid var(--gold-dunkel); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .005em; text-wrap: balance; }
p { margin: 0 0 1em; }
strong { font-weight: 500; }
ul { padding: 0; margin: 0; list-style: none; }
button { font: inherit; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: var(--creme-dunkel); border: 3px solid var(--creme); border-radius: 8px; }
.springen { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--anthrazit); color: var(--creme); padding: .6rem 1rem; border-radius: 8px; }
.springen:focus { left: 8px; }
.innen { width: min(100% - 2rem, var(--breit)); margin-inline: auto; }
.innen--schmal { width: min(100% - 2rem, var(--schmal)); }
.innen--text { width: min(100% - 2rem, 760px); padding-block: 2rem 4rem; }
.h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
.h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); margin-bottom: .6em; }
.h3 { font-size: 1.25rem; margin-top: 1.6em; }
.h2--mitte, .vorspann--mitte { text-align: center; }
.h2__icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.25em; margin-right: .4em; color: var(--akzent, var(--gold-dunkel)); }
.vorspann { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--text); max-width: 60ch; }
.vorspann--mitte { margin-inline: auto; }
.textlink { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold-dunkel); }
.icon { width: 1.5rem; height: 1.5rem; }
mark.offen { background: #FFF0A8; color: var(--anthrazit); padding: 0 .3em; border-radius: 3px; font-size: .9em; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .55rem 1.35rem; border-radius: var(--rund);
  font-weight: 500; letter-spacing: .02em; text-decoration: none; border: 1px solid var(--anthrazit); transition: background var(--dauer) var(--kurve), color .3s, transform .3s, box-shadow .3s; cursor: pointer; }
.knopf--voll { background: var(--anthrazit); color: var(--creme); }
.knopf--voll:hover { background: #3d3b41; transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(43, 42, 46, .6); }
.knopf--rand { background: transparent; color: var(--anthrazit); border-color: var(--gold-linie); }
.knopf--rand:hover { border-color: var(--anthrazit); background: rgba(255, 255, 255, .5); }
.knopf + .knopf, .knopf + .textlink { margin-left: .4rem; }

/* ---------- Kopf ---------- */
.kopf { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kopf-h); background: rgba(244, 237, 228, .97);
  transition: box-shadow .4s, background .4s; }
.kopf--fest { box-shadow: 0 1px 0 var(--linie), 0 10px 30px -24px rgba(43, 42, 46, .5); background: rgba(250, 246, 240, .96); }
.kopf__innen { width: min(100% - 2rem, var(--breit)); margin-inline: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kopf__logo { display: block; height: 46px; }
.kopf__logo svg { height: 100%; width: auto; }
.kopf__nav ul { display: flex; gap: clamp(.6rem, 1.4vw, 1.6rem); align-items: center; }
.kopf__nav a:not(.knopf) { text-decoration: none; font-weight: 500; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .1rem; position: relative; }
.kopf__nav a:not(.knopf)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold-dunkel); transition: right .4s var(--kurve); }
.kopf__nav a:not(.knopf):hover::after, .kopf__nav a[aria-current]::after { right: 0; }
.kopf__nav { display: flex; align-items: center; gap: 1.4rem; }
.kopf__cta { min-height: 40px; padding: .4rem 1.1rem; font-size: .92rem; }
.kopf__menue { display: none; align-items: center; gap: .6rem; background: none; border: 1px solid var(--gold-linie); border-radius: var(--rund); padding: .45rem .9rem .45rem .8rem; cursor: pointer; color: var(--anthrazit); }
.kopf__menue-linie { width: 20px; height: 2px; background: currentColor; position: relative; display: block; transition: background .2s; }
.kopf__menue-linie::before, .kopf__menue-linie::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--kurve); }
.kopf__menue-linie::before { top: -6px; } .kopf__menue-linie::after { top: 6px; }
.kopf__menue[aria-expanded="true"] .kopf__menue-linie { background: transparent; }
.kopf__menue[aria-expanded="true"] .kopf__menue-linie::before { transform: translateY(6px) rotate(45deg); }
.kopf__menue[aria-expanded="true"] .kopf__menue-linie::after { transform: translateY(-6px) rotate(-45deg); }
.kopf__menue-text { font-weight: 500; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Bereichsleiste (glänzende Knöpfe) ---------- */
.leiste { position: sticky; top: var(--kopf-h); z-index: 40; background: rgba(244, 237, 228, .9); border-block: 1px solid var(--linie); }
.leiste__innen { width: min(100% - 2rem, var(--breit)); margin-inline: auto; display: flex; gap: .8rem; justify-content: center; padding: .55rem 0; }
.glanz { --g: var(--farbe); flex: 1 1 0; max-width: 320px; display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .35rem 1.1rem .35rem .8rem; border-radius: var(--rund);
  color: #fff; text-decoration: none; position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 86%, #fff) 0%, var(--g) 45%, var(--farbe-tief) 100%); text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  border: 1px solid rgba(205, 178, 133, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 6px 16px -10px rgba(43, 42, 46, .55);
  transition: transform .35s var(--kurve), box-shadow .35s, filter .35s; }
.glanz::before { content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: var(--rund) var(--rund) 40% 40% / var(--rund) var(--rund) 100% 100%; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02)); pointer-events: none; }
.glanz::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); transition: left .9s var(--kurve); pointer-events: none; }
.glanz:hover { transform: translateY(-1px); filter: saturate(1.06) brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 12px 24px -12px rgba(43, 42, 46, .6); }
.glanz:hover::after { left: 120%; }
.glanz[aria-current] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0 0 3px var(--creme), 0 0 0 4px var(--gold-dunkel); }
.glanz__icon { width: 34px; height: 34px; flex: none; color: #fff; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15)); }
.glanz__text { display: flex; flex-direction: column; line-height: 1.15; }
.glanz__text strong { font-family: var(--display); font-weight: 400; letter-spacing: .08em; font-size: 1rem; }
.glanz__text small { font-size: .76rem; letter-spacing: .02em; }
.glanz:focus-visible { outline-color: var(--anthrazit); }

/* ---------- Held (Startseite) ---------- */
.held { position: relative; overflow: hidden; min-height: calc(100svh - var(--kopf-h)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: clamp(1.5rem, 4vh, 3.5rem) 0 0; isolation: isolate; }
.held__grund { position: absolute; inset: 0; z-index: -2; background: var(--creme-hell) url("../assets/bild/seide-1024.webp") center / cover; opacity: .55; }
.held__grund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244, 237, 228, .2), rgba(244, 237, 228, .85) 70%, var(--creme)); }
.held__innen { width: min(100% - 2rem, var(--breit)); min-width: 0; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
.held__logo { width: clamp(170px, 18vw, 260px); margin: 0 auto .9rem; animation: erscheinen 1.1s var(--kurve) both; }
.held__h1 { font-size: clamp(1.7rem, 1rem + 2.6vw, 2.9rem); max-width: 22ch; margin-inline: auto; animation: erscheinen 1s .25s var(--kurve) both; }
.held__text { max-width: 58ch; margin: 0 auto 1.6rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); color: var(--text-2); animation: erscheinen 1s .4s var(--kurve) both; }
.boegen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 2.4vw, 2rem); max-width: 960px; margin: 0 auto 1.6rem; }
.bogen { display: block; text-decoration: none; color: var(--text); position: relative; animation: aufsteigen 1.1s calc(.45s + var(--i, 0) * .18s) var(--kurve) both; }
.bogen__bild { display: block; aspect-ratio: 3 / 4.4; border-radius: var(--rund) var(--rund) var(--rund-klein) var(--rund-klein); overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px var(--gold-linie), 0 24px 40px -30px rgba(43, 42, 46, .55); background: var(--creme-dunkel); }
.bogen__bild::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); pointer-events: none; }
.bogen__bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: atmen 14s calc(var(--i, 0) * -4s) ease-in-out infinite alternate; transition: transform 1.2s var(--kurve); }
.bogen--still .bogen__bild img { animation: none; transform: none; }
.bogen:hover .bogen__bild img { transform: scale(1.1); }
.bogen__text { display: flex; flex-direction: column; margin-top: .8rem; line-height: 1.25; }
.bogen__text strong { font-family: var(--display); font-weight: 400; letter-spacing: .12em; color: var(--farbe-tief); font-size: clamp(.9rem, .8rem + .5vw, 1.1rem); }
.bogen__text small { color: var(--text-2); font-size: .85rem; }
.bogen:hover .bogen__text strong { text-decoration: underline; text-decoration-color: var(--gold-dunkel); text-underline-offset: .25em; }
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .9rem .4rem .55rem; border-radius: var(--rund); text-decoration: none; font-size: .86rem; font-weight: 500; letter-spacing: .01em;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(205, 178, 133, .6); color: var(--text); transition: background .3s, border-color .3s, transform .3s; }
.chip__icon { width: 22px; height: 22px; color: var(--farbe); }
.chip:hover { background: #fff; border-color: var(--farbe); transform: translateY(-1px); }
.held__welle { margin-top: clamp(1rem, 3vw, 2.5rem); pointer-events: none; overflow: hidden; position: relative; }
.held__welle::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, var(--creme), rgba(244, 237, 228, 0)); z-index: 1; }
.welle { line-height: 0; }
.welle__bild { width: 100%; height: auto; aspect-ratio: 3200 / 524; }
.held__welle .welle__bild { width: 118%; max-width: none; margin-left: -12%; animation: treiben 60s ease-in-out infinite alternate; }
@keyframes erscheinen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes atmen { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.1) translateY(-1.5%); } }
@keyframes treiben { from { transform: translateX(0); } to { transform: translateX(5%); } }

/* ---------- Leistungen ---------- */
.leistungen { position: relative; padding: clamp(2rem, 5vw, 4rem) 0 4rem; }
.spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2.5rem; }
.spalte { padding: 0 clamp(1rem, 2.5vw, 2.5rem); border-left: 1px solid var(--gold-linie); }
.spalte:first-child { border-left: 0; padding-left: 0; }
.spalte:last-child { padding-right: 0; }
.spalte__h { margin-bottom: 1.2rem; }
.spalte__titel { display: block; font-size: 1.45rem; margin-top: .4rem; }
.bereichskopf { display: flex; align-items: center; gap: .7rem; font-family: var(--text-font); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.bereichskopf__bereich { color: var(--farbe-tief); font-weight: 500; }
.ring { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--farbe, var(--gold-dunkel)); display: inline-grid; place-items: center; color: var(--farbe, var(--gold-dunkel)); flex: none; background: rgba(255, 255, 255, .45); }
.ring--gross { width: 64px; height: 64px; }
.ring__icon { width: 62%; height: 62%; }
.liste li { display: grid; grid-template-columns: 30px 1fr; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--linie); }
.liste li:first-child { border-top: 0; }
.liste__icon { width: 30px; height: 30px; color: var(--farbe); margin-top: .1rem; }
.liste a { text-decoration: none; display: flex; flex-direction: column; }
.liste a strong { font-weight: 500; }
.liste a span { color: var(--text-2); font-size: .9rem; }
.liste a:hover strong { text-decoration: underline; text-decoration-color: var(--gold-dunkel); }
.spalte__fuss { margin-top: 1.4rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }

/* ---------- Über (Teaser) ---------- */
.ueber { padding: 2rem 0 4rem; }
.ueber__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.platzhalter { position: relative; border-radius: var(--rund-klein); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 0 0 1px var(--gold-linie); background: var(--creme-dunkel); }
.platzhalter--klein { aspect-ratio: 3 / 2; }
.platzhalter__grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.platzhalter__hinweis { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; color: var(--text-2); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.platzhalter__hinweis svg { width: 72px; height: auto; opacity: .55; }
.platzhalter__icon { width: 44px; height: 44px; color: var(--gold-dunkel); }

/* ---------- Personen ---------- */
.personen { padding: 2rem 0 4rem; }
.personen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); margin-top: 2rem; }
.person { text-align: center; padding: 1.6rem 1rem 1.2rem; border-top: 1px solid var(--gold-linie); }
.person .ring { margin: 0 auto .9rem; }
.person__bereich { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--farbe-tief); font-weight: 500; margin-bottom: .3rem; }
.person__name { font-size: 1.4rem; margin-bottom: .15rem; }
.person__beruf { color: var(--text-2); font-size: .92rem; }
.person__tel { font-family: var(--display); font-size: 1.35rem; text-decoration: none; letter-spacing: .03em; }
.person__tel:hover { text-decoration: underline; text-decoration-color: var(--gold-dunkel); }
.person__kontakt { line-height: 1.9; }
.personen__adresse { text-align: center; margin-top: 2rem; color: var(--text-2); }

/* ---------- Welle ---------- */
.welle--innen { position: relative; overflow: hidden; }
.welle--innen .welle__bild { width: 100%; }

/* ---------- Unterseiten: Kopf ---------- */
.bkopf { position: relative; background: linear-gradient(180deg, var(--akzent-hell), var(--creme) 85%); padding-top: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; }
.bkopf__raster { display: grid; grid-template-columns: 1.3fr .8fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.bkopf__text { padding-bottom: clamp(2rem, 6vw, 5rem); }
.bkopf__text .h1 { margin-top: .8rem; }
.bkopf__kontakt { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.4rem; }
.bkopf__bild { margin: 0 auto; width: min(100%, 340px); }
.bkopf__bild .bogen__bild { aspect-ratio: 3 / 4.2; }
.bkopf__welle { margin-top: -1px; }
.skopf { position: relative; background: linear-gradient(180deg, var(--creme-hell), var(--creme)); padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.skopf .innen { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.skopf--klein .innen { padding-bottom: 1rem; }

/* Abschnitte */
.abschnitt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-h) + var(--leiste-h) + 1rem); }
.abschnitt:first-child { border-top: 0; }
.abschnitt--wechsel .abschnitt__bild { order: 2; }
.abschnitt__bild { margin: 0; border-radius: var(--rund-klein); overflow: hidden; box-shadow: 0 0 0 1px var(--gold-linie); }
.abschnitt__bild img { width: 100%; height: 100%; object-fit: cover; }
.abschnitt__text p { max-width: 58ch; }

/* Preise */
.preisteil { padding: clamp(2rem, 5vw, 4rem) 0 1rem; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--akzent-hell) 55%, var(--creme)) 20%, color-mix(in srgb, var(--akzent-hell) 55%, var(--creme)) 80%, transparent); scroll-margin-top: calc(var(--kopf-h) + var(--leiste-h)); }
.preise__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.2rem, 3vw, 3rem) clamp(1.5rem, 4vw, 4rem); margin-top: 1.5rem; }
.preisgruppe__h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: 1.2rem; color: var(--farbe-tief); border-bottom: 1px solid var(--gold-linie); padding-bottom: .4rem; margin-bottom: .4rem; }
.preisgruppe__icon { width: 28px; height: 28px; flex: none; color: var(--farbe); }
.preis li { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px solid var(--linie); font-size: .98rem; }
.preis li span:first-child { text-wrap: pretty; }
.preis__wert { font-family: var(--display); white-space: nowrap; letter-spacing: .02em; }
.preis__anm { font-size: .86rem; color: var(--text-2); margin: .2rem 0 .6rem; }
.preis__fuss { font-size: .86rem; color: var(--text-2); text-align: center; margin: 2rem 0 3rem; }
.preisteil .h2 { display: flex; flex-direction: column; gap: .4rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.tab { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem .5rem .7rem; border-radius: var(--rund); text-decoration: none; font-family: var(--display); letter-spacing: .1em; font-size: .95rem; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--farbe) 86%, #fff), var(--farbe) 45%, var(--farbe-tief)); border: 1px solid rgba(205, 178, 133, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.tab__icon { width: 26px; height: 26px; }
.tab:hover { filter: brightness(1.05); }

/* CTA-Band */
.cta { background: var(--akzent); color: #fff; padding: clamp(2rem, 5vw, 3.5rem) 0; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: url("../assets/bild/seide-1024.webp") center / cover; opacity: .12; mix-blend-mode: luminosity; }
.cta__innen { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta .h2 { color: #fff; margin-bottom: .2rem; }
.cta p { margin: 0; color: #fff; }
.cta__knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.cta .knopf--voll { background: var(--creme); color: var(--anthrazit); border-color: var(--creme); }
.cta .knopf--rand { color: #fff; border-color: rgba(255, 255, 255, .7); }
.cta .knopf--rand:hover { background: rgba(255, 255, 255, .15); border-color: #fff; }

/* Team / Salon */
.team__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 3rem); padding: 2rem 0 3rem; }
.team { text-align: center; }
.team__bild { width: min(100%, 260px); margin: 0 auto 1.2rem; }
.team .person__name { font-size: 1.5rem; }
.team p { max-width: 36ch; margin-inline: auto; }
.salon { padding: 2rem 0 4rem; }
.salon__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }

/* Termin */
.termin { padding: 1rem 0 4rem; }
.termin__raster { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.formular { background: rgba(255, 255, 255, .55); border: 1px solid var(--gold-linie); border-radius: var(--rund-klein); padding: clamp(1.2rem, 3vw, 2.2rem); display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.formular > * { grid-column: 1 / -1; }
.feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.feld--halb { grid-column: span 1; }
.feld label { font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.feld input, .feld select, .feld textarea { width: 100%; min-width: 0; font: inherit; padding: .65rem .8rem; border: 1px solid var(--linie); border-radius: 10px; background: #fff; color: var(--text); min-height: 46px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--gold-dunkel); outline-offset: 1px; border-color: transparent; }
.feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__ds { font-size: .86rem; color: var(--text-2); margin: 0; }
.formular__hinweis--test { background: #FFF0A8; padding: .5rem .8rem; border-radius: 8px; font-size: .9rem; margin: 0; }
.formular .h2 { margin-bottom: .2rem; }
.kal { border: 1px solid var(--gold-linie); border-radius: var(--rund-klein); padding: 1.2rem; background: rgba(255, 255, 255, .45); position: relative; }
.kal__kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.kal__monat { font-family: var(--display); font-size: 1.15rem; }
.kal__bald { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-tief); font-weight: 500; }
.kal__wochen, .kal__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.kal__wochen { font-size: .72rem; letter-spacing: .06em; color: var(--text-2); margin-bottom: 4px; }
.kal__tag { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: .85rem; color: var(--text-2); background: rgba(43, 42, 46, .04); }
.kal__tag--frei { background: var(--salbei-hell); color: var(--salbei-tief); }
.kal__text { font-size: .9rem; color: var(--text-2); margin: 1rem 0 0; }

/* Kontakt / Karte */
.karte { padding: 1rem 0 4rem; }
.karte__raster { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.karte__rahmen { position: relative; aspect-ratio: 4 / 3; border-radius: var(--rund-klein); overflow: hidden; box-shadow: 0 0 0 1px var(--gold-linie); background: var(--creme-dunkel) url("../assets/bild/seide-1024.webp") center / cover; }
.karte__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.8) sepia(.12); }
.karte__schutz { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem; text-align: center; padding: 1.5rem; background: rgba(244, 237, 228, .6); }
.karte__schutz svg { width: 70px; height: auto; opacity: .7; }
.karte__schutz p { max-width: 36ch; margin: 0; color: var(--text); font-size: .95rem; }
.route__form label, .route__art legend { font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.route__zeile { display: flex; gap: .5rem; margin: .3rem 0 .8rem; }
.route__zeile input { flex: 1; font: inherit; padding: .65rem .8rem; border: 1px solid var(--linie); border-radius: 10px; background: #fff; min-height: 46px; min-width: 0; }
.route__art { border: 0; padding: 0; margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.route__art legend { margin-bottom: .3rem; }
.route__art label { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.route__art input { accent-color: var(--gold-dunkel); width: 18px; height: 18px; }
.route__hinweis { font-size: .86rem; color: var(--text-2); }

/* Recht */
.recht p { max-width: 70ch; }
.recht__stand { color: var(--text-2); font-size: .9rem; }

/* ---------- Fuß ---------- */
.fuss { position: relative; background: var(--anthrazit) url("../assets/bild/anthrazit-1152.webp") center / cover; color: var(--creme); padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; margin-top: 2rem; }
.fuss::before { content: ""; position: absolute; inset: 0; background: rgba(43, 42, 46, .72); }
.fuss > * { position: relative; }
.fuss__innen { width: min(100% - 2rem, var(--breit)); margin-inline: auto; display: grid; grid-template-columns: 1.1fr 1.2fr 1fr .9fr; gap: 2rem; }
.fuss__marke svg { width: 120px; height: auto; margin-bottom: .8rem; }
.fuss svg path[fill="#202025"] { fill: var(--creme); }
.fuss svg path[fill="#8B6A2C"] { fill: var(--gold); }
.fuss__marke p { color: rgba(244, 237, 228, .85); line-height: 1.5; }
.fuss__h { font-family: var(--text-font); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.fuss__liste li { padding: .22rem 0; color: rgba(244, 237, 228, .9); font-size: .95rem; }
.fuss__liste a { text-decoration-color: rgba(205, 178, 133, .6); }
.fuss__liste a:hover { text-decoration-color: var(--creme); }
.fuss__bereich { font-family: var(--display); letter-spacing: .1em; font-size: .78rem; color: var(--gold); margin-right: .2rem; }
.fuss__zeile { width: min(100% - 2rem, var(--breit)); margin: 2.5rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(205, 178, 133, .35); display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .85rem; color: rgba(244, 237, 228, .75); }
.fuss__zeile a { text-decoration-color: rgba(205, 178, 133, .6); }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bogen__bild img { transform: none; }
}

/* ---------- Breiten ---------- */
@media (max-width: 1100px) {
  .kopf__nav ul { gap: .8rem; }
  .kopf__nav a:not(.knopf) { font-size: .84rem; }
}
@media (max-width: 980px) {
  :root { --kopf-h: 64px; }
  .kopf__logo { height: 40px; }
  .kopf__menue { display: inline-flex; }
  .kopf__nav { position: fixed; inset: var(--kopf-h) 0 0 0; background: var(--creme); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 1.5rem 1.5rem 6rem; overflow: auto; transform: translateX(100%); visibility: hidden; transition: transform .45s var(--kurve), visibility 0s .45s; z-index: 45; }
  .kopf__nav.nav--offen { transform: none; visibility: visible; transition: transform .45s var(--kurve), visibility 0s; }
  .kopf__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .kopf__nav li a:not(.knopf) { display: block; font-family: var(--display); text-transform: none; letter-spacing: .04em; font-size: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); }
  .kopf__nav li a:not(.knopf)::after { display: none; }
  .kopf__cta { margin-top: 1.5rem; justify-content: center; min-height: 50px; font-size: 1rem; }
  body.menue-offen { overflow: hidden; }
  .spalten { grid-template-columns: 1fr; gap: 2rem; }
  .spalte { border-left: 0; padding: 0; border-top: 1px solid var(--gold-linie); padding-top: 1.5rem; }
  .spalte:first-child { border-top: 0; padding-top: 0; }
  .bkopf__raster { grid-template-columns: 1fr; align-items: start; }
  .bkopf__bild { width: min(70%, 300px); margin-bottom: 1rem; }
  .bkopf__text { padding-bottom: 1rem; }
  .personen__raster, .team__raster { grid-template-columns: 1fr; }
  .person { max-width: 480px; margin-inline: auto; width: 100%; }
  .ueber__raster, .salon__raster, .abschnitt, .termin__raster, .karte__raster { grid-template-columns: 1fr; }
  .abschnitt--wechsel .abschnitt__bild { order: 0; }
  .fuss__innen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --leiste-h: 68px; }
  body { padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom)); }
  .leiste { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--gold-linie); border-bottom: 0; background: rgba(250, 246, 240, .96); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 30px -20px rgba(43, 42, 46, .5); }
  .leiste__innen { gap: .45rem; padding: .45rem 0; width: min(100% - 1rem, var(--breit)); }
  .glanz { min-height: 52px; padding: .3rem .7rem .3rem .55rem; gap: .45rem; justify-content: center; }
  .glanz__icon { width: 28px; height: 28px; }
  .glanz__text strong { font-size: .8rem; letter-spacing: .06em; }
  .glanz__text small { display: none; }
  .abschnitt { scroll-margin-top: calc(var(--kopf-h) + 1rem); }
  .preisteil { scroll-margin-top: var(--kopf-h); }
  .held__welle .welle__bild { width: 160%; margin-left: -30%; }
  .boegen { gap: .5rem; }
  .bogen__text strong { letter-spacing: .06em; font-size: .78rem; }
  .bogen__text small { display: none; }
  .chip { font-size: .8rem; padding: .32rem .75rem .32rem .45rem; }
  .fuss { padding-bottom: 1.5rem; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .fuss__innen { grid-template-columns: 1fr; gap: 1.5rem; }
  .formular { grid-template-columns: 1fr; }
  .feld--halb { grid-column: 1 / -1; }
  .cta__innen { flex-direction: column; align-items: flex-start; }
  .preise__raster { grid-template-columns: 1fr; }
  .bogen__bild { aspect-ratio: 3 / 4.8; border-radius: var(--rund) var(--rund) 8px 8px; }
  .knopf { padding: .5rem 1.05rem; }
  .glanz__text strong { font-size: .68rem; }
  .glanz__icon { width: 24px; height: 24px; }
}
@media (min-width: 1500px) {
  :root { --breit: 1320px; }
}

/* ---------- Einblenden beim Scrollen (nur mit JavaScript, nicht bei „Bewegung reduzieren“) ---------- */
.warte { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--kurve), transform .9s var(--kurve); }
.warte.sichtbar { opacity: 1; transform: none; }

/* Salonfoto (Musterfoto) */
.salonbild { margin: 0; border-radius: var(--rund-klein); overflow: hidden; box-shadow: 0 0 0 1px var(--gold-linie); position: relative; }
.salonbild img { width: 100%; height: auto; }
.salonbild figcaption { position: absolute; left: .8rem; bottom: .8rem; background: rgba(244, 237, 228, .9); color: var(--text-2); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border-radius: var(--rund); }

/* Hero-Welle: breiter als die Seite, treibt langsam (steht nach .welle--innen, damit die Regel gilt) */
.held__welle .welle__bild { width: 118%; max-width: none; margin-left: -9%; animation: treiben 60s ease-in-out infinite alternate; }
@media (max-width: 860px) {
  .held__welle .welle__bild { width: 140%; margin-left: -22%; }
}

::placeholder { color: var(--text-2); opacity: 1; }
.knopf--rand { border-color: rgba(154, 117, 54, .85); }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Korrekturen 16.10.2026 (Mila) ---------- */
/* Kopf-Logo: am Bildschirm Zeichen + HAUTNAH, auf dem Handy nur das Zeichen */
.kopf__logo { height: 40px; display: flex; align-items: center; }
.kopf__logo-zeichen { display: none; }

/* Handy-Menü: Zeichen vor jedem Eintrag (am Bildschirm ausgeblendet) */
.nav__icon { display: none; }

/* Bereichsleiste: mehr Luft um die drei Knöpfe */
@media (min-width: 861px) {
  :root { --leiste-h: 86px; }
  .leiste__innen { gap: 1.2rem; padding: .95rem 0; }
}

/* Held: Laufband, Welle näher an die Bögen, kein Leerraum */
.held { min-height: 0; align-content: start; padding-top: clamp(1.2rem, 3vh, 2.4rem); }
.held__innen { z-index: 1; }
.boegen { margin-bottom: .6rem; }
.held__welle { margin-top: calc(-1 * clamp(2.5rem, 8vw, 8.5rem)); z-index: 0; }

.laufband { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; width: min(100% - 1rem, 1500px); margin: .9rem auto 0; }
.laufband__fenster { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: .35rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.laufband__fenster::-webkit-scrollbar { display: none; }
.laufband__spur { display: flex; width: max-content; }
.laufband__reihe { display: flex; gap: .55rem; padding-inline: 0 .55rem; flex: none; }
.laufband__reihe[aria-hidden] { display: none; }
.laufband--an .laufband__fenster { overflow: hidden; }
.laufband--an .laufband__reihe[aria-hidden] { display: flex; }
.laufband--an .laufband__spur { animation: laufen var(--laufdauer, 90s) linear infinite; }
.laufband--an:hover .laufband__spur, .laufband--halt .laufband__spur { animation-play-state: paused; }
.laufband--fokus .laufband__spur { animation: none; }
.laufband--fokus .laufband__fenster { overflow-x: auto; }
@keyframes laufen { to { transform: translateX(-50%); } }
.laufband .chip { white-space: nowrap; background: rgba(255, 255, 255, .7); }
.laufband__halt { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-linie); background: rgba(255, 255, 255, .75); color: var(--anthrazit);
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .3s, border-color .3s; }
.laufband__halt:hover { background: #fff; border-color: var(--gold-dunkel); }
.laufband__halt[hidden] { display: none; }
.laufband__halt-zeichen { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.laufband__halt[aria-pressed="true"] .laufband__halt-zeichen { border: 0; width: 11px; height: 12px; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

@media (min-width: 981px) {
  /* Am Bildschirm steht das Laufband direkt unter dem Menü, über die ganze Breite */
  .held { padding-top: 0; }
  .laufband { order: -1; width: 100%; margin: 0 0 clamp(1.2rem, 3.2vh, 2.4rem); padding: .2rem 1rem; background: rgba(250, 246, 240, .72);
    border-block: 1px solid var(--gold-linie); }
  .held__logo { width: clamp(150px, 13vw, 210px); margin-bottom: .6rem; }
  .held__h1 { margin-bottom: .35em; }
  .held__text { margin-bottom: 1.3rem; }
  .boegen { max-width: 880px; }
  .bogen__bild { aspect-ratio: 3 / 4; }
}
@media (max-width: 980px) {
  .kopf__logo { height: 46px; }
  .kopf__logo-breit { display: none; }
  .kopf__logo-zeichen { display: block; }
  .kopf__nav li a.nav__eintrag { display: flex; align-items: center; gap: .9rem; }
  .nav__icon { display: block; flex: none; width: 42px; height: 42px; padding: 7px; border: 1.5px solid currentColor; border-radius: 50%;
    color: var(--farbe, var(--gold-dunkel)); background: rgba(255, 255, 255, .55); }
  .held__welle { margin-top: calc(-1 * clamp(1.5rem, 9vw, 4rem)); }
}
@media (max-width: 860px) {
  .laufband { margin-top: .5rem; }
  .laufband__halt { width: 36px; height: 36px; }
}
/* Welle: oben weich auslaufen lassen statt einer Cremefläche (sonst sichtbare Kante über dem Seidengrund) */
.held__welle::before { display: none; }
.held__welle { -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
/* Zusätzliche Sprungziele in einem Abschnitt dürfen keinen Platz im Raster belegen */
.abschnitt { position: relative; }
.abschnitt > span[id] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: inherit; }
.innen--schmal > .abschnitt:first-child { padding-top: .5rem; }
/* Seite „Vielen Dank“ nach dem Formular (aus anfrage.php) */
.danke__innen { width: min(100% - 2rem, 1040px); margin: 0 auto; padding: 2rem 0 4rem; text-align: center; }
.danke__bild { margin: 0 0 2rem; border-radius: var(--rund-klein); overflow: hidden; box-shadow: 0 0 0 1px var(--gold-linie), 0 30px 50px -40px rgba(43, 42, 46, .6); }
.danke__bild img { width: 100%; height: auto; }
.danke .vorspann { max-width: 52ch; margin-inline: auto; }
.danke__tel { color: var(--text-2); line-height: 1.9; }
.danke__tel a { color: var(--text); white-space: nowrap; }
.danke__bereich { font-size: .78rem; letter-spacing: .12em; color: var(--bronze-tief); }
.danke .kopf__innen .knopf { min-height: 40px; padding: .35rem 1rem; }