/* =====================================================================
   AH-Beauty – Stylesheet
   Umsetzung des abgestimmten Designs (Ordner Design: DESIGN.md, code.html,
   screen.png) als handgeschriebenes CSS, ohne Tailwind und ohne CDN.
   Schriften liegen lokal in assets/fonts (siehe README.md).
   Farben, Schriften und Radien stehen zentral in :root.
   ===================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alex Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/alex-brush-latin-400-normal.woff2") format("woff2");
}

:root {
  /* Palette aus Design/code.html: Rosé-Nude, Pfirsich-Creme, Salbeigrün */
  --nude-50: #FDFBFA;
  --nude-100: #FAF4EF;
  --nude-200: #F5ECE3;
  --nude-300: #EBDCD0;
  --nude-400: #DEC5B4;
  --sage-50: #F4F7F5;
  --sage-100: #E8EFE9;
  --sage-200: #D2DFD5;
  --sage-400: #9FB5A5;
  --sage-600: #6E8879;
  --sage-700: #5C7567;   /* Flächen mit weißer Schrift: Kontrast 4,9:1 */
  --sage-800: #4A5F53;
  --rosewood-50: #FCF7F7;
  --rosewood-100: #F7EDEE;
  --rosewood-200: #EDD6D9;
  --rosewood-400: #BC7D87;
  --rosewood-700: #7B4C54;
  --rosewood-900: #482B30;
  --blush: #FBECE7;
  --gold: #D8AB77;
  --papier: #FFFDFB;
  --seite: #FCF8F5;
  --text: #433734;
  --text-leise: #57534E;
  --text-zart: #6F6862;
  --fehler: #A3262B;
  --erfolg: #3D5347;

  --schrift-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-titel: "Cormorant Garamond", "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --schrift-schmuck: "Alex Brush", "Segoe Script", "Brush Script MT", cursive;

  --breite: 1240px;
  --breite-kopf: 1180px;
  --rand: 1rem;
  --schatten-sm: 0 1px 2px rgba(72, 43, 48, 0.06);
  --schatten-md: 0 4px 6px -1px rgba(72, 43, 48, 0.08), 0 2px 4px -2px rgba(72, 43, 48, 0.06);
  --schatten-xl: 0 20px 25px -5px rgba(72, 43, 48, 0.1), 0 8px 10px -6px rgba(72, 43, 48, 0.08);
  --schatten-papier: 0 10px 30px -8px rgba(110, 136, 121, 0.12), 0 4px 12px rgba(123, 76, 84, 0.04);
  --bogen: 220px 220px 1.5rem 1.5rem;
  --klecks: 48% 52% 68% 32% / 42% 44% 56% 58%;
}
@media (min-width: 48rem) { :root { --rand: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  scrollbar-color: var(--sage-200) var(--nude-100);
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--text);
  background: var(--seite);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--rosewood-200); color: var(--rosewood-900); }

img, svg { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.2;
  color: var(--rosewood-900);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 6.2vw, 3.75rem); line-height: 1.18; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.875rem, 4.6vw, 3rem); }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--rosewood-700); text-underline-offset: 0.18em; }
a:hover { color: var(--rosewood-900); }

:focus-visible {
  outline: 3px solid var(--rosewood-700);
  outline-offset: 3px;
}

address { font-style: normal; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.container-schmal { max-width: 52rem; }

.schmuck {
  font-family: var(--schrift-schmuck);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.kursiv { font-style: italic; }

/* ---------- Symbole (CSS-Masken, Farbe = Textfarbe) ---------- */
.icon {
  display: inline-block;
  flex: none;
  width: 1.125rem; height: 1.125rem;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

/* ---------- Sprunglink ---------- */
.skip-link {
  position: absolute;
  left: 1rem; top: -5rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--rosewood-900);
  color: #fff;
  border-radius: 999px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ---------- Entwurfsmodus ---------- */
.entwurf-banner {
  position: relative;
  z-index: 45;
  padding: 0.45rem 1rem;
  background: var(--rosewood-900);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
}
.entwurf .platzhalter {
  text-decoration: underline dashed var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.entwurf .platzhalter-block {
  outline: 2px dashed var(--gold);
  outline-offset: 4px;
}
.bild-hinweis { display: none; }
.entwurf .bild-hinweis {
  display: block;
  position: absolute;
  top: 0.6rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.15rem 0.6rem;
  background: rgba(72, 43, 48, 0.78);
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Ranken am oberen Rand ---------- */
.ranken {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 1.5rem;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  opacity: 0.4;
  pointer-events: none;
  color: var(--sage-400);
}
.ranken svg { width: 12rem; height: 1.5rem; flex: none; }
.ranken svg + svg { transform: scaleX(-1); }

/* ---------- Kopfbereich: schwebende Kapsel ---------- */
.site-header {
  position: sticky;
  top: 0.5rem;
  z-index: 40;
  padding-inline: var(--rand);
  margin-top: 0.5rem;
}
.header-kapsel {
  position: relative;
  max-width: var(--breite-kopf);
  margin-inline: auto;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(253, 251, 250, 0.92);
  border: 1px solid var(--nude-200);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(110, 136, 121, 0.08);
}
@supports (backdrop-filter: blur(12px)) {
  .header-kapsel { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  text-decoration: none;
  color: var(--rosewood-900);
}
.marke-logo {
  flex: none;
  width: 2.875rem; height: 2.875rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--nude-300);
  transition: transform 0.3s ease;
}
.marke:hover .marke-logo { transform: rotate(8deg); }
.marke-text { display: flex; flex-direction: column; min-width: 0; }
.marke-name {
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.025em;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.marke:hover .marke-name { color: var(--rosewood-700); }
.marke-zusatz {
  font-family: var(--schrift-schmuck);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--sage-800);
  white-space: nowrap;
}

.header-aktionen { display: flex; align-items: center; gap: 0.5rem; }

.btn-kapsel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  background: var(--rosewood-700);
  color: var(--nude-50);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--schatten-sm);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.btn-kapsel:hover { background: var(--rosewood-900); color: #fff; box-shadow: var(--schatten-md); transform: scale(1.02); }
.btn-kapsel .icon { width: 1rem; height: 1rem; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  color: var(--rosewood-900);
  background: var(--nude-100);
  border: 1px solid var(--nude-300);
  border-radius: 999px;
  cursor: pointer;
}
.js .nav-toggle { display: inline-flex; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.1rem; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobil: Menü als Karte unter der Kapsel */
.site-nav {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0; right: 0;
  padding: 0.5rem;
  background: rgba(253, 251, 250, 0.98);
  border: 1px solid var(--nude-200);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-xl);
}
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.site-nav a {
  display: block;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  font-family: var(--schrift-titel);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--text-leise);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-nav a:hover { color: var(--rosewood-700); background: rgba(255, 255, 255, 0.7); }
.site-nav a[aria-current="page"] { background: #fff; color: var(--rosewood-900); box-shadow: var(--schatten-sm); }

/* Ohne JavaScript bleibt das Menü sichtbar und umbricht unter der Kapsel */
html:not(.js) .header-kapsel { flex-wrap: wrap; border-radius: 1.75rem; }
html:not(.js) .site-nav { position: static; width: 100%; order: 3; box-shadow: none; border: 0; padding: 0; background: none; }

@media (max-width: 33.99rem) {
  .btn-kapsel-text { display: none; }
  .header-aktionen .btn-kapsel { padding: 0; width: 2.75rem; }
  .marke-name { font-size: 1.3rem; }
  .marke-zusatz { font-size: 0.9rem; }
  .nav-toggle-text { display: none; }
}

@media (min-width: 70rem) {
  .js .nav-toggle { display: none; }
  .header-kapsel { padding: 0.6rem 0.75rem 0.6rem 1.1rem; }
  .site-nav, .js .site-nav, html:not(.js) .site-nav {
    display: block;
    position: static;
    width: auto;
    order: 0;
    padding: 0.25rem;
    background: rgba(250, 244, 239, 0.7);
    border: 1px solid rgba(245, 236, 227, 0.8);
    border-radius: 999px;
    box-shadow: none;
  }
  html:not(.js) .header-kapsel { flex-wrap: nowrap; border-radius: 999px; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 0.25rem; }
  .site-nav a { padding: 0.375rem 0.95rem; font-size: 1rem; line-height: 1.5; white-space: nowrap; }
}

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.8rem 1.75rem;
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.025em;
  color: var(--rosewood-900);
  background: var(--nude-100);
  border: 1px solid var(--nude-300);
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover { background: var(--nude-200); color: var(--rosewood-900); }
.btn .icon { width: 1.125rem; height: 1.125rem; }
.btn-hell .icon { color: var(--sage-600); }
.btn-salbei {
  padding-inline: 2rem;
  color: #fff;
  background: var(--sage-700);
  border-color: var(--sage-700);
  box-shadow: 0 8px 20px rgba(110, 136, 121, 0.25);
}
.btn-salbei:hover { background: var(--sage-800); border-color: var(--sage-800); color: #fff; transform: scale(1.02); }
.btn-rose {
  color: #fff;
  background: var(--rosewood-700);
  border-color: var(--rosewood-700);
  box-shadow: var(--schatten-sm);
}
.btn-rose:hover { background: var(--rosewood-900); border-color: var(--rosewood-900); color: #fff; transform: scale(1.02); }
.btn-klein { min-height: 2.75rem; padding: 0.65rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn-gruppe { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-gruppe.zentriert { justify-content: center; }

/* ---------- Grundgerüst der Abschnitte ---------- */
main { position: relative; overflow: hidden; }
.deko-klecks { position: absolute; z-index: -1; pointer-events: none; }
.deko-klecks-1 {
  top: -2.5rem; left: 50%;
  width: 900px; height: 550px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(251, 236, 231, 0.6), rgba(232, 239, 233, 0.4), transparent);
  border-radius: 50%;
  filter: blur(64px);
}
.deko-klecks-2 {
  top: 20rem; left: -7rem;
  width: 380px; height: 380px;
  background: rgba(232, 239, 233, 0.7);
  border-radius: var(--klecks);
  filter: blur(40px);
}
.deko-klecks-3 {
  top: 800px; right: -6rem;
  width: 420px; height: 460px;
  background: rgba(251, 236, 231, 0.8);
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  filter: blur(64px);
}

.sektion { padding-block: 5rem; position: relative; }
.sektion-nude {
  background: rgba(250, 244, 239, 0.6);
  border-block: 1px solid var(--nude-200);
}
.sektion-nude + .sektion-nude { border-top: 0; }

.sektion-kopf { max-width: 42rem; margin: 0 auto 3.5rem; text-align: center; }
.sektion-kopf .schmuck, .vorzeile {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--schrift-schmuck);
  font-size: 1.875rem;
  line-height: 1.25;
  color: var(--rosewood-400);
}
.trenner {
  width: 4rem; height: 2px;
  margin: 0.75rem auto 1rem;
  background: var(--sage-400);
  border-radius: 999px;
}
.sektion-kopf p, .leise { color: var(--text-leise); font-weight: 300; }
.sektion-abschluss { margin-top: 3rem; text-align: center; }

/* ---------- Hero ---------- */
.hero { padding-block: 3rem 5rem; }
.hero-band { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.band {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1.25rem;
  background: var(--sage-50);
  border: 1px solid rgba(210, 223, 213, 0.8);
  border-radius: 999px;
  box-shadow: var(--schatten-sm);
  font-family: var(--schrift-schmuck);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--sage-800);
}
.band .icon { color: var(--sage-600); }
.band .icon:last-child { color: var(--gold); width: 1rem; height: 1rem; }

.hero-text { max-width: 48rem; margin: 0 auto 2.5rem; text-align: center; }
.hero-vorzeile {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--schrift-schmuck);
  font-size: clamp(1.875rem, 4.5vw, 2.25rem);
  line-height: 1.2;
  color: var(--rosewood-400);
}
.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--sage-600);
  text-decoration: underline wavy var(--sage-200);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}
.hero-einleitung {
  max-width: 42rem;
  margin: 1.25rem auto 0;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 300;
  color: var(--text-leise);
}
.pillen {
  list-style: none;
  margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-leise);
}
.pillen li {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.875rem;
  background: var(--nude-100);
  border: 1px solid var(--nude-200);
  border-radius: 999px;
}
.pillen .icon { width: 1rem; height: 1rem; }
.farbe-salbei { color: var(--sage-600); }
.farbe-rose { color: var(--rosewood-400); }
.farbe-gold { color: var(--gold); }
.hero .btn-gruppe { margin-top: 2rem; }

.hero-buehne { position: relative; max-width: 56rem; margin: 1.5rem auto 0; }
.bogen-rahmen {
  width: min(100%, 290px);
  margin-inline: auto;
  padding: 0.75rem;
  background: linear-gradient(to bottom, var(--nude-200), rgba(251, 236, 231, 0.4), var(--sage-100));
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--bogen);
  box-shadow: var(--schatten-xl);
}
.bogen-bild {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 220px 220px 1rem 1rem;
  background: var(--nude-100);
}
.bogen-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.bogen-bild:hover img { transform: scale(1.05); }
.bogen-bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(72, 43, 48, 0.6), transparent 50%);
  pointer-events: none;
}
.bogen-zeile {
  position: absolute;
  z-index: 1;
  left: 1rem; right: 1rem; bottom: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--nude-200);
  border-radius: 1rem;
  text-align: center;
}
@supports (backdrop-filter: blur(12px)) { .bogen-zeile { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
.bogen-zeile .schmuck { display: block; font-size: 1.5rem; color: var(--rosewood-700); }
.bogen-zeile p { margin: 0; font-family: var(--schrift-titel); font-style: italic; font-size: 0.9rem; line-height: 1.35; color: var(--text-leise); }

.schwebe {
  position: absolute;
  transition: transform 0.3s ease;
}
.schwebe:hover { transform: rotate(0deg); }
.schwebe-links {
  top: 3rem; left: 0;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1.1rem 0.6rem 0.7rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--sage-200);
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(110, 136, 121, 0.15);
  transform: rotate(-3deg);
}
.schwebe-links .rund {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  background: var(--sage-100);
  border-radius: 50%;
  color: var(--sage-600);
}
.schwebe-links .rund .icon { width: 1.25rem; height: 1.25rem; }
.schwebe-links .schmuck { display: block; font-size: 1.25rem; line-height: 1; color: var(--sage-800); }
.mini-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-zart);
}
.schwebe-rechts {
  top: 6rem; right: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 6rem; height: 6rem;
  padding: 0.5rem;
  background: var(--blush);
  border: 1px solid var(--rosewood-200);
  border-radius: 50%;
  box-shadow: var(--schatten-md);
  text-align: center;
  transform: rotate(6deg);
}
.schwebe-rechts .icon { color: var(--rosewood-400); }
.schwebe-rechts .schmuck { font-size: 1.5rem; line-height: 1; color: var(--rosewood-900); }
.schwebe-rechts .mini-label { font-size: 0.5625rem; color: var(--rosewood-700); }
.schwebe-notiz {
  display: none;
  bottom: -1.5rem; left: 0;
  max-width: 220px;
  padding: 1rem;
  background: #FFFDF9;
  border: 1px solid var(--nude-300);
  border-radius: 1rem;
  box-shadow: var(--schatten-papier);
  transform: rotate(-2deg);
}
.schwebe-notiz p { margin: 0; font-family: var(--schrift-titel); font-style: italic; font-size: 0.875rem; line-height: 1.375; color: var(--text); }
.schwebe-notiz .schmuck { display: block; margin-top: 0.25rem; font-size: 1rem; color: var(--sage-800); }
.sterne { display: flex; gap: 0.15rem; margin-bottom: 0.4rem; color: var(--gold); }
.sterne .icon { width: 0.95rem; height: 0.95rem; }

@media (max-width: 39.99rem) {
  .schwebe-links { top: 1rem; left: -0.25rem; transform: rotate(-3deg) scale(0.82); transform-origin: left top; }
  .schwebe-rechts { top: 5.5rem; right: -0.25rem; transform: rotate(6deg) scale(0.8); transform-origin: right top; }
}
@media (min-width: 40rem) {
  .bogen-rahmen { width: 380px; }
  .schwebe-notiz { display: block; }
}
@media (min-width: 48rem) {
  .bogen-rahmen { width: 460px; padding: 1rem; }
  .schwebe-links { left: -2rem; }
  .schwebe-rechts { right: -1.5rem; }
  .schwebe-notiz { left: 1rem; }
}

/* ---------- Karten: Handwerk ---------- */
.raster-4 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.karte {
  display: flex; flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--nude-200);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-sm);
  transition: box-shadow 0.3s ease;
}
.karte:hover { box-shadow: var(--schatten-md); }
.klecks {
  display: grid; place-items: center;
  width: 4rem; height: 4rem;
  margin-bottom: 1.25rem;
  background: var(--rosewood-50);
  border: 1px solid var(--rosewood-200);
  border-radius: var(--klecks);
  color: var(--rosewood-700);
  transition: transform 0.3s ease;
}
.karte:hover .klecks { transform: scale(1.1); }
.klecks .icon { width: 1.75rem; height: 1.75rem; }
.klecks-salbei { background: var(--sage-50); border-color: var(--sage-200); color: var(--sage-800); }
.klecks-nude { background: var(--nude-100); border-color: var(--nude-300); }
.klecks-blush { background: var(--blush); }
.karte h3 { margin-bottom: 0.5rem; }
.karte p { font-size: 0.875rem; line-height: 1.625; color: var(--text-leise); }
.karte .karte-fuss {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(245, 236, 227, 0.8);
  font-family: var(--schrift-schmuck);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--sage-800);
}
.karte > p { margin-bottom: 1rem; }

/* ---------- Style-Finder ---------- */
.tafel {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  background: linear-gradient(to bottom right, var(--sage-50), var(--nude-100), rgba(251, 236, 231, 0.4));
  border: 1px solid rgba(210, 223, 213, 0.8);
  border-radius: 2.5rem;
  box-shadow: 0 12px 40px rgba(110, 136, 121, 0.08);
}
@media (min-width: 48rem) { .tafel { padding: 3rem; } }
.tafel-stern {
  position: absolute;
  right: -2rem; bottom: -2rem;
  width: 12rem; height: 12rem;
  opacity: 0.15;
  color: var(--sage-800);
  pointer-events: none;
}
.tafel-kopf { max-width: 42rem; margin-bottom: 2.5rem; text-align: center; }
@media (min-width: 48rem) { .tafel-kopf { text-align: left; } }
.etikett {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.25rem 1rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--sage-200);
  border-radius: 999px;
  font-family: var(--schrift-schmuck);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--sage-800);
}
.tafel-kopf p { margin-top: 0.5rem; }

.look-karte {
  display: block;
  width: 100%;
  padding: 1rem;
  font: inherit;
  color: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--nude-300);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-sm);
  cursor: pointer;
  opacity: 0.92;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
}
.look-karte:hover { background: #fff; box-shadow: var(--schatten-md); opacity: 1; }
.look-karte[aria-pressed="true"], html:not(.js) .look-karte {
  background: #fff;
  opacity: 1;
}
.look-karte[aria-pressed="true"] {
  border-color: var(--sage-600);
  box-shadow: 0 0 0 1px var(--sage-600), var(--schatten-md);
}
.look-bild {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 220px 220px 0.75rem 0.75rem;
  background: var(--nude-100);
}
.look-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.look-karte:hover .look-bild img { transform: scale(1.05); }
.look-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.look-titel { display: block; font-family: var(--schrift-titel); font-size: 1.25rem; line-height: 1.375; color: var(--rosewood-900); }
.look-unter { display: block; font-family: var(--schrift-schmuck); font-size: 1.125rem; line-height: 1.3; color: var(--text-zart); }
.look-karte[aria-pressed="true"] .look-unter { color: var(--sage-800); }
.look-haken {
  display: grid; place-items: center;
  flex: none;
  width: 1.75rem; height: 1.75rem;
  background: var(--nude-200);
  border-radius: 50%;
  color: transparent;
}
.look-haken .icon { width: 1rem; height: 1rem; }
.look-karte[aria-pressed="true"] .look-haken { background: var(--sage-600); color: #fff; }
html:not(.js) .look-haken { display: none; }

.empfehlung {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(159, 181, 165, 0.6);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-md);
  text-align: center;
}
.empfehlung .schmuck { display: block; font-size: 1.5rem; color: var(--rosewood-400); }
.empfehlung h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-block: 0.25rem; }
.empfehlung p { max-width: 42rem; font-weight: 300; color: var(--text-leise); }
.empfehlung .btn-gruppe { justify-content: center; flex: none; }
@media (min-width: 56rem) {
  .empfehlung { flex-direction: row; padding: 2rem; text-align: left; }
  .empfehlung .btn-gruppe { flex-direction: column; align-items: stretch; }
}

/* ---------- Pakete ---------- */
.paket-raster { display: grid; gap: 2rem; align-items: stretch; }
@media (min-width: 64rem) { .paket-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paket {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--nude-200);
  border-radius: 2rem;
  box-shadow: var(--schatten-sm);
  transition: box-shadow 0.3s ease;
}
.paket:hover { box-shadow: var(--schatten-md); }
.paket.ist-liebling {
  background: var(--papier);
  border: 2px solid var(--sage-600);
  border-radius: 2.25rem;
  box-shadow: 0 16px 36px rgba(110, 136, 121, 0.14);
}
@media (min-width: 64rem) { .paket.ist-liebling { margin-top: -1rem; } }
.paket-abzeichen {
  position: absolute;
  top: -1rem; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3rem 1.25rem;
  background: var(--sage-700);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--schatten-md);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.paket-abzeichen .icon { width: 0.95rem; height: 0.95rem; }
.paket-symbol {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: 1rem;
  background: var(--sage-50);
  border: 1px solid var(--sage-200);
  border-radius: 50%;
  color: var(--sage-600);
}
.paket-symbol .icon { width: 1.5rem; height: 1.5rem; }
.paket.ist-liebling .paket-symbol { margin-top: 0.5rem; background: var(--blush); border-color: var(--rosewood-200); color: var(--rosewood-700); }
.paket-dach { display: block; font-family: var(--schrift-schmuck); font-size: 1.5rem; line-height: 1.3; color: var(--sage-800); }
.paket.ist-liebling .paket-dach { color: var(--rosewood-400); }
.paket-name { margin-top: 0.25rem; font-size: 1.875rem; }
.paket-text { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-zart); }
.paket-preis {
  margin-block: 1.5rem;
  padding-block: 1rem;
  border-block: 1px dashed var(--nude-300);
}
.paket.ist-liebling .paket-preis { border-color: var(--rosewood-200); }
.paket-preis-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.4rem; }
.paket-betrag { font-variant-numeric: lining-nums; font-family: var(--schrift-titel); font-size: 2.25rem; line-height: 1.1; color: var(--rosewood-900); }
.paket.ist-liebling .paket-betrag { font-size: 3rem; }
.paket-zusatz { font-size: 0.75rem; color: var(--text-zart); }
.paket-hinweis { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--sage-800); }
.paket.ist-liebling .paket-hinweis { color: var(--rosewood-700); }
.haken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; font-size: 0.875rem; color: var(--text-leise); }
.haken-liste li { display: flex; align-items: flex-start; gap: 0.625rem; }
.haken-liste .icon { margin-top: 0.15rem; color: var(--sage-600); }
.haken-liste li.ist-wichtig { font-weight: 500; color: var(--rosewood-900); }
.paket-fuss { margin-top: 2rem; padding-top: 1rem; }

/* ---------- Über mich ---------- */
.ueber-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .ueber-raster { grid-template-columns: 5fr 7fr; } }
.ueber-bild { position: relative; display: flex; justify-content: center; }
.portrait-rahmen {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 3 / 4;
  padding: 0.75rem;
  background: linear-gradient(to top, var(--blush), var(--nude-100), var(--sage-100));
  border: 1px solid #fff;
  border-radius: 260px 260px 2rem 2rem;
  box-shadow: var(--schatten-xl);
}
@media (min-width: 40rem) { .portrait-rahmen { width: 360px; } }
.portrait-bild { width: 100%; height: 100%; overflow: hidden; border-radius: 260px 260px 2rem 2rem; background: var(--nude-200); position: relative; }
.portrait-bild img { width: 100%; height: 100%; object-fit: cover; }
.portrait-schild {
  position: absolute;
  right: 0.5rem; bottom: -1rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--sage-200);
  border-radius: 1rem;
  box-shadow: var(--schatten-md);
}
.portrait-schild .schmuck { display: block; font-size: 1.25rem; color: var(--rosewood-700); }
.portrait-schild .mini-label { font-weight: 500; color: var(--sage-800); }
.ueber-text > * + * { margin-top: 1.5rem; }
.ueber-text .vorzeile { margin-bottom: 0; }
.ueber-text p { margin-bottom: 0; font-weight: 300; color: var(--text-leise); }
.ueber-text p.gross { font-size: clamp(1rem, 2vw, 1.125rem); }
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 40rem) { .kacheln { gap: 1rem; } }
.kachel { padding: 1rem 0.5rem; border: 1px solid rgba(210, 223, 213, 0.6); border-radius: 1rem; background: var(--sage-50); text-align: center; }
.kachel-zahl { display: block; font-variant-numeric: lining-nums; font-family: var(--schrift-titel); font-size: clamp(1.4rem, 5vw, 1.875rem); line-height: 1.2; color: var(--sage-800); }
.kachel .schmuck { font-size: clamp(0.95rem, 3.4vw, 1.125rem); color: var(--rosewood-700); }
.kachel-nude { background: var(--nude-100); border-color: rgba(235, 220, 208, 0.6); }
.kachel-nude .kachel-zahl { color: var(--rosewood-900); }
.kachel-nude .schmuck { color: var(--sage-800); }
.kachel-blush { background: var(--blush); border-color: rgba(237, 214, 217, 0.6); }
.kachel-blush .kachel-zahl { color: var(--rosewood-700); }
.kachel-blush .schmuck { color: var(--text-leise); }
.angebot-hinweis {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--nude-200);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-sm);
}
.angebot-hinweis h3 { margin-bottom: 0.35rem; }
.angebot-hinweis .btn-gruppe { margin-top: 1.1rem; }

/* ---------- Liebesbriefe (Rezensionen) ---------- */
.notiz-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 48rem) { .notiz-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notiz {
  position: relative;
  padding: 1.5rem;
  background: var(--papier);
  border: 1px solid var(--nude-300);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-md);
  transform: rotate(-1deg);
  transition: transform 0.3s ease;
}
.notiz:nth-child(even) { transform: rotate(1deg); }
.notiz:hover { transform: rotate(0deg); }
.notiz::before {
  content: "";
  position: absolute;
  top: -0.5rem; left: 50%;
  width: 5rem; height: 1rem;
  transform: translateX(-50%);
  background: rgba(251, 236, 231, 0.9);
  border: 1px solid rgba(237, 214, 217, 0.6);
  border-radius: 2px;
}
.notiz:nth-child(even)::before { background: rgba(232, 239, 233, 0.95); border-color: var(--sage-200); }
.notiz figure { margin: 0; }
.notiz blockquote { margin: 0 0 1.5rem; font-family: var(--schrift-titel); font-style: italic; font-size: 1.05rem; line-height: 1.55; color: var(--text); }
.notiz blockquote p { margin: 0; }
.notiz figcaption { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--nude-300); }
.notiz-initial {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem;
  background: var(--sage-100);
  border-radius: 50%;
  font-family: var(--schrift-titel);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sage-800);
}
.notiz:nth-child(even) .notiz-initial { background: var(--blush); color: var(--rosewood-700); }
.notiz-name { display: block; font-family: var(--schrift-titel); font-size: 1.05rem; line-height: 1.25; color: var(--rosewood-900); }
.notiz-quelle { display: block; font-family: var(--schrift-schmuck); font-size: 1rem; line-height: 1.3; color: var(--sage-800); }

/* ---------- Kontakt-Tafel und Formular ---------- */
.kontakt-tafel {
  background: linear-gradient(to bottom right, var(--sage-50), #fff, rgba(251, 236, 231, 0.5));
  border-color: var(--sage-200);
  box-shadow: var(--schatten-xl);
  padding: 1.25rem;
}
@media (min-width: 40rem) { .kontakt-tafel { padding: 2rem; } }
@media (min-width: 48rem) { .kontakt-tafel { padding: 3.5rem; } }
.kontakt-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .kontakt-raster { grid-template-columns: 1fr 1fr; } }
.kontakt-text { text-align: center; }
.kontakt-text > * + * { margin-top: 1.5rem; }
.kontakt-text p { font-weight: 300; color: var(--text-leise); margin-bottom: 0; }
@media (min-width: 64rem) { .kontakt-text { text-align: left; } }
.punkt-liste {
  list-style: none; padding: 0;
  display: inline-grid; gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-leise);
  text-align: left;
}
.punkt-liste li { display: flex; align-items: center; gap: 0.5rem; }
.punkt-liste a { overflow-wrap: anywhere; }

.formular-karte {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--nude-200);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-sm);
}
@media (min-width: 48rem) { .formular-karte { padding: 2rem; } }
.formular { display: grid; gap: 1rem; }
.feld { display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.feld-paar { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .feld-paar { grid-template-columns: 1fr 1fr; } }
.feld label, .feld .label {
  font-family: var(--schrift-titel);
  font-size: 1rem;
  font-weight: 500;
  color: var(--rosewood-900);
}
.optional { font-weight: 400; color: var(--text-zart); }
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="date"],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.625rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(253, 251, 250, 0.7);
  border: 1px solid var(--nude-400);
  border-radius: 1rem;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.feld textarea { min-height: 6.5rem; resize: vertical; }
.feld ::placeholder { color: #8b837d; opacity: 1; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--sage-600);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(159, 181, 165, 0.4);
}
.feld [aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler); }
.feld-hinweis { margin: 0; font-size: 0.8125rem; color: var(--text-zart); }
.feld-fehler { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--fehler); }
.feld-checkbox { grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; align-items: start; }
.feld-checkbox input {
  appearance: none; -webkit-appearance: none;
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem;
  margin: 0.1rem 0 0;
  background: var(--nude-50);
  border: 1px solid var(--nude-400);
  border-radius: 0.4rem;
  cursor: pointer;
}
.feld-checkbox input:checked { background: var(--rosewood-700); border-color: var(--rosewood-700); }
.feld-checkbox input:checked::after {
  content: "";
  width: 0.4rem; height: 0.7rem;
  margin-top: -0.15rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.feld-checkbox input:focus-visible { outline: 3px solid var(--rosewood-700); outline-offset: 2px; }
.feld-checkbox label { font-family: var(--schrift-text); font-size: 0.8125rem; font-weight: 400; line-height: 1.5; color: var(--text-leise); }
.feld-checkbox .feld-fehler { grid-column: 2; }
.falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pflicht-hinweis { margin: 0; font-size: 0.8125rem; color: var(--text-zart); }
.formular-fehler, .formular-status {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--nude-300);
}
.formular-fehler, .formular-status.ist-fehler { background: #fdf3f3; border-color: var(--fehler); color: var(--fehler); font-weight: 600; }
.formular-status.ist-erfolg { background: var(--sage-100); border-color: var(--sage-400); color: var(--erfolg); font-weight: 600; }

/* ---------- Unterseiten ---------- */
.seitenkopf { padding-block: 3rem 1rem; text-align: center; }
.seitenkopf .vorzeile { margin-bottom: 0.25rem; }
.seitenkopf p { max-width: 42rem; margin-inline: auto; font-weight: 300; color: var(--text-leise); }
.seitenkopf + .sektion { padding-top: 3rem; }

.preis-raster { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .preis-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.preis-karte {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--nude-200);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-sm);
}
@media (min-width: 48rem) { .preis-karte { padding: 2rem; } }
.preis-karte-titel { font-size: 1.75rem; margin-bottom: 0.25rem; }
.preis-karte-text { font-size: 0.875rem; color: var(--text-leise); }
.preisliste { list-style: none; margin: 1rem 0 0; padding: 0; }
.preisliste-eintrag { padding: 0.8rem 0; border-top: 1px dashed var(--nude-300); }
.preisliste-zeile { display: flex; align-items: baseline; gap: 0.6rem; }
.preisliste-name { font-weight: 500; }
.preisliste-linie { flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--sage-400); transform: translateY(-0.3em); }
.preisliste-preis { font-variant-numeric: lining-nums; font-family: var(--schrift-titel); font-size: 1.35rem; line-height: 1; white-space: nowrap; color: var(--rosewood-900); }
.preisliste-zusatz { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--text-zart); }
.preis-hinweis { margin-top: 1.75rem; font-size: 0.875rem; color: var(--text-leise); text-align: center; }
.leer-hinweis {
  padding: 1.5rem;
  background: #fff;
  border: 1px dashed var(--nude-400);
  border-radius: 1.5rem;
  text-align: center;
}

.kontakt-karte {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--nude-200);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-sm);
  text-align: left;
}
.kontakt-karte h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
.kontakt-liste { list-style: none; margin: 0; padding: 0; }
.kontakt-liste li { padding: 0.8rem 0; border-top: 1px dashed var(--nude-300); }
.kontakt-liste li:first-child { border-top: 0; padding-top: 0; }
.kontakt-liste li:last-child { padding-bottom: 0; }
.kontakt-liste .label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage-800); }
.kontakt-liste a { overflow-wrap: anywhere; }

.rechtstext {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--nude-200);
  border-radius: 1.5rem;
  box-shadow: var(--schatten-sm);
  overflow-wrap: break-word;
}
@media (min-width: 48rem) { .rechtstext { padding: 3rem; } }
.rechtstext h2 { font-size: 1.75rem; margin: 2.2em 0 0.5em; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { font-size: 1.3rem; font-weight: 600; margin: 1.6em 0 0.4em; }
.rechtstext p, .rechtstext li, .rechtstext address { color: var(--text-leise); }
.rechtstext ul { padding-left: 1.25rem; margin: 0 0 1em; }
.rechtstext li { margin-bottom: 0.35em; }
.rechtstext li::marker { color: var(--sage-600); }
.hinweis-box {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: #fff8e6;
  border: 1px solid var(--gold);
  border-radius: 1rem;
  font-size: 0.9rem;
}
.offen { background: #fff0c2; padding: 0.05em 0.3em; border-radius: 3px; }

/* ---------- Fußbereich ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: 4rem 3rem;
  background: rgba(250, 244, 239, 0.8);
  border-top: 1px solid var(--nude-300);
  color: var(--text-leise);
  font-size: 0.8125rem;
}
.footer-innen { max-width: var(--breite-kopf); }
.footer-zier { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.footer-zier::before, .footer-zier::after { content: ""; flex: 1; height: 1px; background: var(--nude-300); }
.footer-zier span { display: flex; align-items: center; gap: 0.5rem; color: var(--sage-600); }
.footer-zier .schmuck { font-size: 1.5rem; color: var(--rosewood-700); }
.footer-raster { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 48rem) { .footer-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .footer-raster { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.footer-marke { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.footer-marke img { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--nude-300); }
.footer-marke span { font-family: var(--schrift-titel); font-size: 1.6rem; color: var(--rosewood-900); }
.chip {
  display: inline-flex; align-items: center;
  margin-top: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: var(--sage-100);
  color: var(--sage-800);
  border-radius: 999px;
  font-family: var(--schrift-titel);
  font-size: 0.9rem;
}
.footer-titel { margin: 0 0 0.75rem; font-family: var(--schrift-titel); font-size: 1.125rem; color: var(--rosewood-900); }
.footer-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-liste li { display: flex; align-items: flex-start; gap: 0.5rem; }
.footer-liste .icon { width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--sage-600); }
.site-footer a { color: var(--text-leise); text-decoration: none; }
.site-footer a:hover { color: var(--rosewood-700); text-decoration: underline; }
.footer-stark { display: block; font-family: var(--schrift-titel); font-size: 1rem; font-weight: 600; color: var(--rosewood-900); }
.rund-links { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.rund-link {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: #fff;
  border: 1px solid var(--nude-300);
  border-radius: 50%;
  color: var(--rosewood-700) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.rund-link:hover { background: var(--rosewood-700); color: #fff !important; }
.footer-unten {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nude-200);
  font-size: 0.75rem;
  color: var(--text-zart);
}
.footer-unten p { margin: 0; }
.footer-unten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
@media (min-width: 40rem) { .footer-unten { flex-direction: row; } }

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

/* ---------- Druck ---------- */
@media print {
  .site-header, .site-footer, .entwurf-banner, .skip-link, .btn, .ranken, .deko-klecks, .schwebe { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .sektion { padding-block: 1.5rem; }
}

/* ---------- Symbol-Formen ----------
   Einfache Linien-Symbole als eingebettete SVG-Masken (Formen angelehnt an
   Lucide, ISC-Lizenz). Ersetzt die Schrift Material Symbols aus dem Entwurf. */
.icon-herz { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
.icon-haken { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.icon-haken-kreis { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.icon-siegel { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.icon-stern { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath fill='black' stroke='none' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); }
.icon-funkeln { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3L12 3z'/%3E%3Cpath d='M19 3v4M21 5h-4'/%3E%3C/svg%3E"); }
.icon-blatt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E"); }
.icon-blume { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M12 10v12'/%3E%3Cpath d='M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z'/%3E%3Cpath d='M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z'/%3E%3C/svg%3E"); }
.icon-bluete { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M12 9.4c-2-1.6-2-5.4 0-7 2 1.6 2 5.4 0 7ZM12 14.6c-2 1.6-2 5.4 0 7 2-1.6 2-5.4 0-7ZM9.4 12c-1.6 2-5.4 2-7 0 1.6-2 5.4-2 7 0ZM14.6 12c1.6 2 5.4 2 7 0-1.6-2-5.4-2-7 0Z'/%3E%3C/svg%3E"); }
.icon-pinsel { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08'/%3E%3Cpath d='M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z'/%3E%3C/svg%3E"); }
.icon-zauberstab { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z'/%3E%3Cpath d='m14 7 3 3M5 6v4M19 14v4M10 2v2M7 8H3M21 16h-4M11 3H9'/%3E%3C/svg%3E"); }
.icon-schere { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E"); }
.icon-krone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='m2 5 3.5 11h13L22 5l-6 6-4-7-4 7-6-6Z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E"); }
.icon-ort { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.icon-telefon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.icon-brief { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.icon-instagram { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='.7' fill='black'/%3E%3C/svg%3E"); }
.icon-pfeil { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.icon-kalender { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }