@charset "UTF-8";
/* Gemeinsames Stylesheet fuer Startseite, Rechtsseiten und Blog. Stand bis 15.09.2026 als
   style-Block in index.html. Nach jeder Aenderung die Nummer im Link (?v=...) in allen
   Seiten und in blog/build.py hochzaehlen, sonst zeigen Browser eine Woche die alte Fassung. */
/* apeice.de, Entwurf v2 vom 15.09.2026. Farben wie auf Wix ausgelesen,
   nur Poppins. Moderner heisst hier: weichere Ecken, Schatten, Luft. */
@font-face {
  font-family: "Caveat Brush"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url(../fonts/caveat-brush.woff2) format("woff2");
}
/* Poppins liegt auf dem eigenen Server (Google Fonts v24, freie Lizenz OFL), kein Aufruf bei Google.
   latin deckt Deutsch samt Euro und Anfuehrungszeichen ab, latin-ext laedt der Browser nur bei Bedarf. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-300-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-300-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --creme:    #FFEFDD;
  --pfirsich: #FFDEBB;
  --lachs:    #FFBC99;
  --sand:     #FAE0C1;
  --koralle:  #ED8877;
  --mint:     #8BD8C4;
  --mint-h:   #9FF2DD;
  --mint-b:   #ECF9F6;
  --mint-k:   #CEEFE6;
  /* Wix nutzt fuer die Etiketten #68A293, weisse Schrift darauf hat nur
     2,9 : 1 Kontrast. Deshalb das dunklere Petrol der Icons. */
  --petrol:   #466C62;
  --braun:    #40382F;
  --espresso: #290C05;
  --weiss:    #FFFFFF;

  --schrift: "Poppins", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --hand:    "Caveat Brush", "Segoe Print", cursive;

  --breite: 74rem;
  --rand:   clamp(1rem, 4vw, 2.5rem);
  --luft:   clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --r-s: .75rem;  --r-m: 1.25rem;  --r-l: 2rem;  --r-pill: 999px;
  --schatten-s: 0 1px 2px rgb(64 56 47 / .06), 0 4px 14px rgb(64 56 47 / .07);
  --schatten-m: 0 2px 6px rgb(64 56 47 / .06), 0 16px 36px rgb(64 56 47 / .13);
  --t-h1: clamp(2rem, 1rem + 3.6vw, 3.5rem);
  --t-h2: clamp(1.7rem, 1.2rem + 2.1vw, 2.55rem);
  --t-h3: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --weich: .25s cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth; scroll-padding-top: 6rem;
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; font-family: var(--schrift);
  /* Wix: Fliesstext in Poppins ExtraLight (200). 300 bleibt luftig, ist aber lesbar. */
  font-weight: 300; font-size: 1.0625rem; line-height: 1.7;
  color: var(--braun); background: var(--creme);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; color: var(--espresso); text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0 0 1rem; text-wrap: pretty; }
strong, b { font-weight: 600; }
::selection { background: var(--mint); color: var(--espresso); }
:focus-visible { outline: 3px solid var(--espresso); outline-offset: 3px; border-radius: .3rem; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.abschnitt { padding-block: var(--luft); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung {
  position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .6rem 1rem;
  background: var(--weiss); border-radius: var(--r-s); box-shadow: var(--schatten-m);
  transition: top var(--weich);
}
.sprung:focus { top: 1rem; }

/* ===== ABSCHNITTSKOPF ===== */
.kopfzeile { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kopfzeile.mitte { margin-inline: auto; text-align: center; }
.augenbraue {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .8rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--petrol);
}
.augenbraue::before { content: ""; width: 1.6rem; height: 2px; border-radius: 2px; background: currentColor; }
.einleitung { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); margin: .9rem 0 0; }
.box {
  display: inline-block; padding: 0 .22em; border-radius: .12em; line-height: 1.3;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.box.hell { background: var(--weiss); color: var(--espresso); }
.box.dunkel { background: var(--espresso); color: var(--weiss); }

/* ===== KNOEPFE =====
   Espresso-Pille wie der Kasten um GLUECKLICH. Rechts sitzt ein Mint-Kreis;
   beim Hover laeuft das Mint aus dem Kreis ueber den ganzen Knopf. Der Kreis
   ist das ::before selbst, deshalb stimmen Ruhe- und Hover-Zustand genau. */
.knopf {
  --grund: var(--espresso); --text: #FFF6EC;
  --fuell: var(--mint); --fuell-text: var(--espresso);
  --kreis-r: 1.25rem; --kreis-x: calc(100% - 1.75rem);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: .9rem;
  min-height: 3.5rem; padding: .5rem .5rem .5rem 1.6rem;
  font: 600 1rem/1.15 var(--schrift); letter-spacing: .01em;
  text-decoration: none; color: var(--text); cursor: pointer;
  background: var(--grund); border: 0; border-radius: var(--r-pill);
  box-shadow: 0 1px 1px rgb(41 12 5 / .18), 0 14px 26px -14px rgb(41 12 5 / .6);
  transition: color .35s ease, transform var(--weich), box-shadow var(--weich);
  -webkit-tap-highlight-color: transparent;
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fuell);
  clip-path: circle(var(--kreis-r) at var(--kreis-x) 50%);
  transition: clip-path .6s cubic-bezier(.2, .8, .2, 1);
}
.knopf .ikon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--fuell-text); }
.knopf .ikon svg { width: 1.15rem; height: 1.15rem; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .knopf:hover { color: var(--fuell-text); transform: translateY(-2px); box-shadow: 0 1px 1px rgb(41 12 5 / .12), 0 20px 32px -16px rgb(70 108 98 / .75); }
  .knopf:hover::before { clip-path: circle(160% at var(--kreis-x) 50%); }
  .knopf:hover .ikon svg { transform: translateX(3px); }
}
.knopf:focus-visible { color: var(--fuell-text); }
.knopf:focus-visible::before { clip-path: circle(160% at var(--kreis-x) 50%); }
.knopf:active { transform: scale(.98); }

/* Frage stellen: helle Pille, der Kreis sitzt links und fuellt sich mit Mint */
.knopf.frage {
  --grund: rgb(255 255 255 / .92); --text: var(--espresso);
  --fuell: var(--mint-k); --kreis-x: 1.75rem;
  padding: .5rem 1.5rem .5rem .5rem;
  box-shadow: inset 0 0 0 1px rgb(41 12 5 / .12), 0 14px 26px -16px rgb(64 56 47 / .5);
}
.knopf.frage .ikon svg { width: 1.3rem; height: 1.3rem; }
@media (hover: hover) {
  .knopf.frage:hover { box-shadow: inset 0 0 0 1px rgb(41 12 5 / .16), 0 20px 32px -16px rgb(64 56 47 / .55); }
  .knopf.frage:hover .ikon svg { transform: rotate(-10deg) scale(1.08); }
}
.knopf.kompakt { --kreis-r: 1.1rem; --kreis-x: calc(100% - 1.4rem); min-height: 2.8rem; gap: .6rem; padding: .3rem .3rem .3rem 1.15rem; font-size: .92rem; }
.knopf.kompakt .ikon { width: 2.2rem; height: 2.2rem; }
@media (forced-colors: active) { .knopf { border: 1px solid ButtonText; } }

.aktion { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-start; }
.aktion .spalte { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.klein { font-size: .8rem; }
.versprechen { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; }
.versprechen svg { width: .95rem; height: .95rem; color: var(--petrol); }
.mail { font-size: .88rem; text-underline-offset: .22em; }

/* ===== RUNDE KNOEPFE - Instagram, WhatsApp, Telefon =====
   Hell mit feinem Rand, beim Hover fuellt sich der Kreis von innen. */
.rund {
  --fuell: var(--mint);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  color: var(--espresso); background: rgb(255 255 255 / .92);
  box-shadow: inset 0 0 0 1px rgb(41 12 5 / .12), 0 8px 18px -10px rgb(64 56 47 / .45);
  transition: transform var(--weich);
}
.rund::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fuell);
  clip-path: circle(0 at 50% 50%); transition: clip-path .45s cubic-bezier(.2, .8, .2, 1);
}
.rund.lachs { --fuell: linear-gradient(135deg, var(--lachs), var(--koralle)); }
.rund svg { width: 1.35rem; height: 1.35rem; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .rund:hover, a:hover > .rund { transform: translateY(-2px); }
  .rund:hover::before, a:hover > .rund::before { clip-path: circle(75% at 50% 50%); }
  .rund:hover svg, a:hover > .rund svg { transform: rotate(-8deg) scale(1.06); }
}
.rund:focus-visible::before, a:focus-visible > .rund::before { clip-path: circle(75% at 50% 50%); }

/* ===== KOPFZEILE - schwebt ueber dem Hero ===== */
.kopf { position: sticky; top: .6rem; z-index: 50; margin-bottom: -4.7rem; }
.kopf .innen {
  display: flex; align-items: center; gap: .9rem; min-height: 4.1rem;
  padding: .4rem .5rem .4rem 1rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .8); border: 1px solid rgb(255 255 255 / .7);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: var(--schatten-s);
}
.marke { display: flex; align-items: flex-end; gap: .3rem; margin-right: auto; text-decoration: none; }
.marke img { width: 2.6rem; }
.wortmarke { padding-bottom: .25rem; font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--espresso); }
.wortmarke span { padding: 0 .1em .05em; border-radius: .12em; background: var(--espresso); color: var(--weiss); }
.kopf nav ul { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; }
.kopf nav a {
  display: block; padding: .45rem .8rem; border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 400; text-decoration: none; transition: background var(--weich);
}
@media (hover: hover) { .kopf nav a:hover { background: var(--creme); } }
/* kleines Pfeil-Symbol: der Link oeffnet eine andere Seite in einem neuen Tab */
.extern { display: inline-block; width: .7em; height: .7em; margin-left: .2em; vertical-align: .35em; opacity: .7; }
@media (max-width: 68rem) { .kopf nav { display: none; } }
/* Zwischen Tablet und grossem Desktop wird es eng: kein Umbruch, Menue etwas kompakter. */
.kopf nav a, .kopf .knopf { white-space: nowrap; }
@media (min-width: 68.01rem) and (max-width: 80rem) {
  .kopf .innen { gap: .6rem; }
  .kopf nav a { padding: .4rem .45rem; font-size: .88rem; }
}
@media (max-width: 40rem) { .kopf .knopf, .kopf .rund.lachs { display: none; } }

/* ===== HERO ===== */
.hero {
  position: relative; overflow: hidden; padding-top: 6.5rem;
  background:
    radial-gradient(60rem 30rem at 85% 5%, rgb(255 255 255 / .55), transparent 60%),
    radial-gradient(40rem 26rem at 0% 100%, rgb(139 216 196 / .32), transparent 65%),
    linear-gradient(38deg, var(--lachs) 0%, var(--sand) 100%);
}
.hero .innen { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 1.5rem; }
.hero-text { text-align: center; padding-block: 1rem clamp(2rem, 5vw, 4rem); }
.hero h1 { font-size: var(--t-h1); line-height: 1.38; text-transform: uppercase; }
.unterzeile { margin: 1rem 0 1.4rem; font-weight: 500; font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); color: var(--braun); }
.bewertung {
  display: inline-flex; align-items: center; gap: .65rem; padding: .5rem 1.1rem .5rem .7rem;
  border-radius: var(--r-pill); background: var(--weiss); box-shadow: var(--schatten-s);
  text-decoration: none; transition: transform var(--weich);
}
@media (hover: hover) { .bewertung:hover { transform: translateY(-2px); } }
.bewertung .g { width: 1.7rem; height: 1.7rem; }
.sterne { display: inline-flex; gap: .06rem; color: #F5B400; }
.sterne svg { width: 1.3rem; height: 1.3rem; }
.bewertung .text { white-space: nowrap; font-size: .9rem; }
.bewertung .zahl { font-size: 1rem; font-weight: 600; }
.hero .aktion { justify-content: center; margin-top: 1.6rem; }
/* Personen und Ape sind zwei Freisteller und reichen beide bis ins Logoband: Die Personen
   verschwinden dahinter, die Ape steht mit dem Hinterrad leicht auf der Pille. Von hinten
   nach vorn: Personen, Logoband (z-index 1), Ape (z-index 2). --band-abstand ist die Luft
   zwischen Bild und Logoband, beide Bilder rechnen damit. */
.hero { --band-abstand: clamp(.5rem, 2vw, 1rem); }
.hero-bild { position: relative; aspect-ratio: 1 / .9; align-self: end; }
.hero-bild img { position: absolute; bottom: 0; }
/* Das Foto endet an den Schienbeinen. Die Kante liegt hinter dem Logoband, der Verlauf
   laesst die Beine davor weich auslaufen. */
.hero-bild .leute {
  left: -8%; width: 92%; bottom: calc(-1 * var(--band-abstand) - 2.8%);
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
}
/* Ape Willi traegt einen hohen Schirm. Groesser oder weiter links verdeckt er Joshuas Kinn,
   weiter rechts stoesst sie bei rund 1000 px Fensterbreite an die Knoepfe. Das Hinterrad
   ist die Unterkante des Bildes, 2,2 % unter dem Bandabstand steht es auf der Pille. */
.hero-bild .ape {
  z-index: 2; left: 38%; bottom: calc(-1 * var(--band-abstand) - 2.2%); width: 64%;
  pointer-events: none; filter: drop-shadow(0 18px 16px rgb(64 56 47 / .18));
}
.hero .logoband { z-index: 1; }
@media (min-width: 56.01rem) { .hero-bild { order: -1; } }
@media (max-width: 56rem) {
  .hero .innen { grid-template-columns: 1fr; }
  .hero-text { padding-bottom: 0; }
  .hero-bild { width: 100%; max-width: 30rem; margin-inline: auto; }
  /* Das Bild fuellt hier die ganze Breite, sonst stiesse das Vorderrad an den Bildschirmrand. */
  .hero-bild .ape { left: 35%; }
}

/* ===== LOGOBAND - helle Pille, die Logos laufen darin durch =====
   Ausgeblendet wird mit einem Verlauf in der Pillenfarbe, nicht mit einer
   Maske. So bleiben die runden Enden sauber auf dem Pfirsich-Verlauf. */
.logoband {
  position: relative; overflow: hidden;
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: var(--band-abstand, clamp(.5rem, 2vw, 1rem)) auto .75rem;
  border-radius: var(--r-pill); background: #FFF8F1; box-shadow: var(--schatten-s);
}
.logoband::before, .logoband::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 5rem; pointer-events: none;
}
.logoband::before { left: 0; background: linear-gradient(90deg, #FFF8F1 25%, rgb(255 248 241 / 0)); }
.logoband::after { right: 0; background: linear-gradient(270deg, #FFF8F1 25%, rgb(255 248 241 / 0)); }
/* Weisse Logo-Hintergruende verschwinden mit multiply. Dafuer traegt die Liste
   selbst die Pillenfarbe, sonst mischt das Bild gegen nichts. */
.logoband ul {
  list-style: none; display: flex; align-items: center; gap: 3rem; width: max-content;
  margin: 0; padding: .85rem 3rem .85rem 0; background: #FFF8F1;
}
.js .logoband ul { animation: laufband 60s linear infinite; }
/* Ohne Skript gibt es keine zweite Runde: Logos stehen still und brechen um. */
html:not(.js) .logoband { border-radius: var(--r-l); }
html:not(.js) .logoband::before, html:not(.js) .logoband::after { display: none; }
html:not(.js) .logoband ul { width: auto; flex-wrap: wrap; justify-content: center; padding: 1rem; gap: 1rem 2.5rem; }
@media (hover: hover) { .logoband:hover ul { animation-play-state: paused; } }
.logoband img { height: 2.1rem; width: auto; mix-blend-mode: multiply; }
.logoband img.flach { height: 1.35rem; }
.logoband img.hoch { height: 2.6rem; }
.logoband img.kachel { border-radius: .35rem; }
.logoband a { display: block; border-radius: .3rem; }
@keyframes laufband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logoband { border-radius: var(--r-l); }
  .logoband::before, .logoband::after, .logoband .doppel { display: none; }
  .logoband ul, .js .logoband ul { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 1rem; gap: 1rem 2.5rem; }
}
@media (max-width: 40rem) { .logoband::before, .logoband::after { width: 2.5rem; } .logoband ul { gap: 2.2rem; padding-right: 2.2rem; } }

/* ===== SORTIMENT - Eis, Eis mit Gebaeck, Iced Shakes ===== */
.sorten { background: linear-gradient(180deg, #D3EFE7 0%, var(--mint-b) 100%); }
/* Die Welle darueber trennt schon, deshalb weniger Luft oben. */
.sorten.abschnitt { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.sorten .raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sorte {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten-s);
  transition: transform var(--weich), box-shadow var(--weich);
}
.sorte .buehne {
  position: relative; aspect-ratio: 5 / 4; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, rgb(255 255 255 / .95) 0 34%, transparent 68%), var(--farbe);
}
.sorte.eis { --farbe: #FFD6C8; }
.sorte.gebaeck { --farbe: var(--pfirsich); }
.sorte.shake { --farbe: var(--mint-k); }
.buehne img { position: absolute; height: auto; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
/* Freigestellte Becher von oben, vier Sorten im Quadrat. 42 % der Breite sind bei 5:4 genau
   52,5 % der Hoehe, deshalb ueberlappen die Becher leicht, waagerecht und senkrecht gleich viel
   (Mittenabstand 36,4 % der Breite = 45,5 % der Hoehe). Erdbeer-Minze liegt vorn, damit das
   Minzblatt nicht verdeckt wird. */
.buehne.quartett img { width: 42%; filter: drop-shadow(0 10px 12px rgb(64 56 47 / .16)); }
.buehne.quartett img:nth-child(1) { left: 10.8%; top: 46.5%; z-index: 2; }
.buehne.quartett img:nth-child(2) { left: 47.2%; top: 46.5%; z-index: 1; }
.buehne.quartett img:nth-child(3) { left: 10.8%; top: 1%; }
.buehne.quartett img:nth-child(4) { left: 47.2%; top: 1%; }
/* Eis mit Gebaeck: links Brownie, rechts Lemon Cheesecake, beide mit Pistazienmus.
   Leicht versetzt und zusammen vertikal mittig. */
.buehne.paar img { width: 46%; filter: drop-shadow(0 14px 14px rgb(64 56 47 / .2)); }
.buehne.paar img:nth-child(1) { left: 5%; top: 14%; }
.buehne.paar img:nth-child(2) { left: 49%; top: 22%; z-index: 1; }
/* Iced Shakes: drei freigestellte Becher nebeneinander, der mittlere etwas vorn.
   Zusammen vertikal mittig, unten bleibt Platz fuer die Schatten. */
.buehne.shakes img { bottom: 19%; width: 28%; filter: drop-shadow(0 14px 14px rgb(64 56 47 / .2)); }
.buehne.shakes img:nth-child(1) { left: 9%; }
.buehne.shakes img:nth-child(2) { left: 35.5%; bottom: 17%; width: 29%; z-index: 1; }
.buehne.shakes img:nth-child(3) { left: 63%; }
@media (hover: hover) {
  .sorte:hover { transform: translateY(-4px); box-shadow: var(--schatten-m); }
  .sorte:hover .buehne img { transform: translateY(-4px) rotate(-2deg); }
  .sorte:hover .buehne img:nth-child(2) { transform: translateY(-6px) rotate(2deg); }
}
.sorte .text { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
.sorte h3 {
  align-self: flex-start; padding: .12rem .6rem; border-radius: .35rem;
  background: var(--petrol); color: var(--weiss);
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); text-transform: uppercase;
}
.sorte .text p { margin: .75rem 0 .9rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding: 0; }
.chips li { padding: .15rem .7rem; border-radius: var(--r-pill); background: var(--creme); font-size: .85rem; font-weight: 400; }
.sorten .zusatz {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem;
  width: fit-content; max-width: 100%; margin: 2.5rem auto 0; padding: .7rem 1.3rem .7rem .8rem;
  border-radius: var(--r-pill); background: rgb(255 255 255 / .75); box-shadow: var(--schatten-s);
}
.sorten .zusatz p { margin: 0; }
.sorten .zusatz img { width: 2.9rem; }
@media (max-width: 56rem) { .sorten .raster { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }
/* schmal: mehrzeiliger Hinweis als Karte statt Pille */
@media (max-width: 40rem) { .sorten .zusatz { flex-direction: column; gap: .5rem; border-radius: var(--r-l); padding: 1rem 1.2rem; text-align: center; } }

/* ===== REFERENZEN ===== */
/* Pfirsich hebt die weissen Karten ab und trennt Sortiment und Ablauf deutlich. */
.stimmen { background: var(--pfirsich); }
.stimmen.abschnitt { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.stimmen .raster { gap: 1.5rem; }
/* Auch am Desktop eine Wisch-Reihe statt zwei Zeilen: drei Karten im Blick, die vierte schaut
   an, Punkte darunter. Am Handy greift die allgemeine Wisch-Reihe weiter unten. */
@media (min-width: 40.01rem) {
  .stimmen .raster.wisch {
    display: flex; gap: 1.5rem; padding: .3rem .2rem 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  }
  .stimmen .raster.wisch > .stimme { flex: 0 0 calc((100% - 3rem) / 3.3); scroll-snap-align: start; }
  .js .stimmen .raster.wisch { scrollbar-width: none; }
  .js .stimmen .raster.wisch::-webkit-scrollbar { display: none; }
  .stimmen .punkte:not([hidden]) { display: flex; }
}
@media (min-width: 40.01rem) and (max-width: 60rem) { .stimmen .raster.wisch > .stimme { flex-basis: calc((100% - 1.5rem) / 2.2); } }
.stimme {
  position: relative; display: flex; flex-direction: column; margin: 0;
  padding: 2rem 1.6rem 1.5rem; border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten-s);
}
.stimme::before {
  content: "“"; position: absolute; top: .2rem; right: 1.2rem;
  font: 600 5rem/1 var(--schrift); color: var(--pfirsich);
}
.stimme blockquote { position: relative; margin: 0; line-height: 1.75; }
/* Erst die Person, darunter das Zitat. */
.stimme figcaption { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--creme); }
.portrait { position: relative; flex: none; width: 4.5rem; height: 4.5rem; }
.portrait .foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.portrait .firma {
  position: absolute; right: -.7rem; bottom: -.3rem; width: 2.4rem; height: 2.4rem; object-fit: contain;
  padding: .15rem; border-radius: .45rem; background: var(--weiss); box-shadow: var(--schatten-s);
}
.stimme .name { display: block; font-weight: 600; color: var(--espresso); }
.stimme .rolle { display: block; font-size: .88rem; line-height: 1.4; }
.plakette { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.plakette .logo { width: 1.1rem; height: 1.1rem; }
.plakette .sterne svg { width: .95rem; height: .95rem; }
/* breite Logos wie Oekoring und WERK1 bekommen ein Querformat-Schild */
.portrait .firma.breit { width: 3.4rem; height: auto; right: -.8rem; bottom: -.2rem; padding: .25rem .3rem; }
/* Lange Bewertungen: auf 7 Zeilen gekuerzt, der Knopf klappt den Rest auf. Der volle Text bleibt im HTML. */
.js .stimme blockquote.gekuerzt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.js .stimme blockquote.gekuerzt.offen p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.mehr {
  align-self: flex-start; margin: .5rem 0 0; padding: .15rem 0; border: 0; background: none; cursor: pointer;
  font: 500 .92rem/1.4 var(--schrift); color: var(--petrol); text-decoration: underline; text-underline-offset: .22em;
}
/* ===== ZAHLEN UND ABLAUF ===== */
.zahlen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.zahlen li { padding: 1.3rem 1.2rem; border-radius: var(--r-m); background: var(--weiss); box-shadow: var(--schatten-s); }
.zahlen strong { display: block; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; color: var(--espresso); }
.zahlen span { display: block; margin-top: .3rem; font-size: .9rem; line-height: 1.4; }
.schritte {
  list-style: none; counter-reset: schritt;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; margin: 3.2rem 0 0; padding: 0;
}
.schritte li {
  position: relative; counter-increment: schritt;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.3rem 1.6rem 1.8rem; border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten-s);
}
/* Die Nummer sitzt als Espresso-Punkt auf der Oberkante der Karte */
.schritte li::before {
  content: counter(schritt); position: absolute; top: -1.1rem; left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--espresso); color: var(--weiss); font-size: .95rem; font-weight: 600; line-height: 1;
  box-shadow: 0 0 0 .3rem var(--creme);
}
/* Pfeil in der Luecke zwischen zwei Karten */
.schritte li + li::after {
  content: ""; position: absolute; top: 50%; left: -2.05rem; width: 1.5rem; height: 1.5rem; translate: 0 -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ED8877' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.schritt-ikon {
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; margin-bottom: 1.1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--mint-h), var(--mint)); color: var(--espresso);
}
.schritt-ikon svg { width: 2rem; height: 2rem; }
.schritte h3 { margin-bottom: .45rem; font-size: 1.2rem; }
.schritte p { margin: 0; }
/* Hover: Karte hebt sich, das Symbol huepft kurz, die Nummer wird petrol */
.schritte li { transition: transform var(--weich), box-shadow var(--weich); }
.schritte li::before { transition: background-color .3s ease; }
.schritt-ikon { transition: transform .45s cubic-bezier(.2, .8, .25, 1.4); }
@media (hover: hover) {
  .schritte li:hover { transform: translateY(-6px); box-shadow: var(--schatten-m); }
  .schritte li:hover::before { background: var(--petrol); }
  .schritte li:hover::after { transform: translateY(6px); }
  .schritte li:hover .schritt-ikon { transform: scale(1.1); }
  .schritte li:hover .schritt-ikon svg { animation: schritt-wackeln .6s ease-in-out; }
}
@keyframes schritt-wackeln { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 65% { transform: rotate(9deg); } }  .schritte .tipp { margin-top: .9rem; padding: .25rem .8rem; border-radius: var(--r-pill); background: var(--creme); font-size: .85rem; line-height: 1.45; }
.ablauf .schluss { margin: .9rem 0 0; text-align: center; font-weight: 500; }
@media (max-width: 60rem) {
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .schritte { grid-template-columns: 1fr; gap: 2.2rem; max-width: 30rem; margin-inline: auto; }
  .schritte li + li::after { display: none; }
}

/* ===== GARANTIE ===== */
.garantie { background: var(--braun); color: var(--creme); }
.garantie h2 { color: var(--weiss); }
.garantie .augenbraue { color: var(--mint); }
.garantie .raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.garantie article { padding: 1.6rem 1.5rem .8rem; border-radius: var(--r-l); background: var(--pfirsich); color: var(--braun); }
.garantie .symbol {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .9rem;
  border-radius: 50%; background: var(--weiss); font-size: 1.4rem;
}
.garantie article h3 { margin-bottom: .5rem; }
.garantie article ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.garantie .nachsatz { margin: 1.6rem 0 0; font-size: .92rem; color: #EADCCB; }
.garantie .nachsatz a { color: var(--weiss); }
@media (max-width: 60rem) { .garantie .raster { grid-template-columns: 1fr; } }

/* ===== PAKETE ===== */
.pakete .raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 58rem; margin-inline: auto; }
.paket {
  display: flex; flex-direction: column; padding: 1.8rem 1.7rem 1.6rem;
  border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten-s); border: 1.6px solid transparent;
}
.paket.corporate { background: var(--mint-k); border-color: var(--petrol); }
.paket h3 { font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase; }
.paket .fuer { margin: .2rem 0 1rem; }
.paket .preis { margin: 0 0 1.1rem; font-size: 1.5rem; font-weight: 600; color: var(--espresso); }
.paket ul { margin: 0 0 1.5rem; padding-left: 1.15rem; }
.paket li { margin-bottom: .35rem; }
.paket .knopf { margin-top: auto; align-self: flex-start; }
.paket .preis small { font-size: .88rem; font-weight: 400; color: var(--braun); }
.paket .empfehlung {
  align-self: flex-start; margin: -.4rem 0 .8rem; padding: .15rem .7rem; border-radius: var(--r-pill);
  background: var(--petrol); color: var(--weiss); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.pakete-hinweis { margin: 1.5rem 0 0; text-align: center; font-size: .92rem; }
@media (max-width: 48rem) { .pakete .raster { grid-template-columns: 1fr; } }

/* ===== PLATZHALTER - faellt vor dem Livegang raus ===== */
.luecke {
  padding: 0 .35rem; border: 1.5px dashed var(--koralle); border-radius: .3rem;
  background: rgb(237 136 119 / .12); color: #8A3B2E; font-weight: 500;
}
.platzhalter {
  margin: 1.5rem 0; padding: 1rem 1.2rem; border: 2px dashed var(--koralle);
  border-radius: var(--r-m); background: rgb(255 255 255 / .6);
}
.platzhalter p:last-child { margin-bottom: 0; }
.fahne {
  display: inline-block; margin: 0 0 .6rem; padding: .15rem .55rem; border-radius: .3rem;
  background: var(--koralle); color: var(--espresso);
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.garantie .platzhalter { background: rgb(255 255 255 / .08); color: var(--creme); }

/* ===== GALERIE ===== */
/* Die Welle am Ende der Pakete trennt schon, deshalb weniger Luft oben. */
.galerie { background: var(--braun); padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.galerie .kopfzeile h2 { color: var(--weiss); }
.galerie .augenbraue { color: var(--mint); }
/* Mosaik mit Kachelformen passend zu den Fotos: quer = 2 Spalten x 2 Zeilen (3:2),
   hoch = 1 Spalte x 2 Zeilen (etwa 4:5). Die Zeilenhoehe folgt der Breite, so bleibt fast
   das ganze Foto sichtbar. Reihenfolge quer, hoch, hoch | hoch, hoch, quer | ... geht bei
   4 und 2 Spalten ohne Loch auf. */
.galerie .innen { container-type: inline-size; }
.galerie .raster {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; grid-auto-flow: dense;
  grid-auto-rows: 12rem; grid-auto-rows: calc((100cqi - 3rem) / 6);
}
.galerie figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-m); background: rgb(255 255 255 / .06); grid-row: span 2; }
.galerie figure.quer { grid-column: span 2; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .galerie figure:hover img { transform: scale(1.04); } }
/* Bildnachweis direkt auf dem Foto, so mit Urban Progress vereinbart */
.galerie figcaption {
  position: absolute; right: .5rem; bottom: .5rem; padding: .05rem .55rem; border-radius: var(--r-pill);
  background: rgb(41 12 5 / .6); color: var(--weiss); font-size: .7rem; line-height: 1.6;
}
.galerie figcaption a { color: inherit; }

/* Die Welle ragt 4 Einheiten unter ihre Box. So bleibt keine Haarlinie, wenn
   die Hoehe auf halbe Pixel faellt. */
.welle { display: block; width: 100%; height: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: -1px; overflow: visible; }
.galerie .welle { margin-top: clamp(2rem, 5vw, 3.5rem); }
.abschnitt.mit-welle { padding-bottom: 0; }
.mit-welle > .innen { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (max-width: 40rem) {
  .galerie .raster { grid-template-columns: 1fr 1fr; gap: .5rem; grid-auto-rows: 7rem; grid-auto-rows: calc(100cqi / 3 - .25rem); }
}
/* ===== BRANDPASS ===== */
.brandpass { background: var(--mint-b); }
.brandpass .oben { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: 2.5rem; }
/* Fuenf echte Beispiele als hingelegte Polaroids. Jedes liegt fest an seinem Platz
   in einer Flaeche 5:4, so sieht der Stapel auf jeder Breite gleich aus. */
.brandpass .bilder { position: relative; width: 100%; max-width: 34rem; margin-inline: auto; aspect-ratio: 25 / 23; }
.polaroid {
  position: absolute; width: 32%; margin: 0; padding: 3% 3% 0;
  border-radius: .45rem; background: var(--weiss); box-shadow: var(--schatten-m);
  transition: rotate .45s cubic-bezier(.2, .8, .2, 1), scale .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
/* overflow: hidden haelt das Format auch, wenn ein Bild nicht laedt. Sonst schiebt der
   Alternativtext das Polaroid ueber die Karten darunter. */
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .2rem; overflow: hidden; background: var(--mint-k); font-size: .7rem; line-height: 1.3; }
.polaroid figcaption { padding: .25em .1em .45em; font: clamp(.85rem, .6rem + .9vw, 1.2rem)/1.1 var(--hand); color: var(--espresso); text-align: center; }
.polaroid:nth-child(1) { left: 2%; top: 5%; rotate: -9deg; }
.polaroid:nth-child(2) { left: 34%; top: 0%; rotate: 3deg; z-index: 1; }
.polaroid:nth-child(3) { left: 65%; top: 6%; rotate: 10deg; }
.polaroid:nth-child(4) { left: 17%; top: 52%; rotate: 5deg; z-index: 2; }
.polaroid:nth-child(5) { left: 50%; top: 54%; rotate: -6deg; z-index: 3; }
@media (hover: hover) {
  .polaroid:hover { rotate: 0deg; scale: 1.08; z-index: 5; box-shadow: 0 2px 6px rgb(64 56 47 / .08), 0 24px 44px rgb(64 56 47 / .22); }
}  .brandpass .raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 60rem; margin-inline: auto; }
.pass {
  display: flex; flex-direction: column; padding: 1.8rem 1.7rem 1.6rem;
  border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten-s);
  transition: transform var(--weich), box-shadow var(--weich);
}
.pass.plus { background: linear-gradient(160deg, var(--pfirsich) 0%, #FFF1E4 100%); }
@media (hover: hover) { .pass:hover { transform: translateY(-4px); box-shadow: var(--schatten-m); } }
.pass h3 { font-size: 1.5rem; }
.pass h3 .plus-zeichen { color: var(--koralle); }
.pass .preis { margin: .3rem 0 1.2rem; font-size: 1.6rem; font-weight: 600; color: var(--espresso); }
.pass .preis small { font-size: .88rem; font-weight: 400; color: var(--braun); }
.pass .knopf { margin-top: auto; align-self: flex-start; }
.haken { list-style: none; display: grid; gap: .65rem; margin: 0 0 1.5rem; padding: 0; }
.haken li { display: flex; gap: .75rem; align-items: flex-start; }
.haken li::before {
  content: ""; flex: none; width: 1.3rem; height: 1.3rem; margin-top: .3rem; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23290C05' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / .8rem no-repeat;
}
.brandpass .hinweis { max-width: 60rem; margin: 1.5rem auto 0; text-align: center; font-size: .92rem; }
@media (max-width: 52rem) { .brandpass .oben { grid-template-columns: 1fr; } }
@media (max-width: 48rem) { .brandpass .raster { grid-template-columns: 1fr; } }

/* ===== TEAM - Karte hebt sich beim Hover, Foto zoomt leicht ===== */
.team .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 62rem; margin-inline: auto; }
.person {
  overflow: hidden; border-radius: var(--r-l); background: var(--pfirsich); box-shadow: var(--schatten-s);
  transition: transform var(--weich), box-shadow var(--weich);
}
.person .foto { overflow: hidden; }
.person .foto img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.person .karte { padding: 1.4rem 1.7rem 1.6rem; }
.person .rolle { margin: 0; font-size: .9rem; }
.person h3 { margin: .1rem 0 .9rem; font-size: 1.4rem; }
.person .links { display: flex; gap: .5rem; margin-top: 1.1rem; }
.person .links a {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--espresso); color: var(--weiss); border: 1px solid var(--espresso);
  transition: transform var(--weich), background-color var(--weich), border-color var(--weich), color var(--weich);
}
.person .links svg { width: 1.1rem; height: 1.1rem; }
.person .links .az { font-size: .72rem; font-weight: 700; text-decoration: none; color: #C8102E; background: var(--weiss); }
@media (hover: hover) {
  .person:hover { transform: translateY(-6px); box-shadow: var(--schatten-m); }
  .person:hover .foto img { transform: scale(1.05); }
  .person .links a:hover { transform: translateY(-3px) scale(1.08); }
  .person .links .li:hover { background: #0A66C2; border-color: #0A66C2; }
  .person .links .az:hover { background: #C8102E; border-color: #C8102E; color: var(--weiss); }
}
@media (max-width: 48rem) { .team .raster { grid-template-columns: 1fr; max-width: 30rem; } }

/* ===== BAND MIT AKIKO - sitzt auf der Unterkante, taucht auf und winkt ===== */
.band { position: relative; overflow: hidden; padding-top: clamp(2.4rem, 4vw, 3rem); background: linear-gradient(90deg, #FCCEB1 0%, #F6C4BB 100%); }
/* Wimpelkette wie an der Ape, in den Farben der echten Kette. Sie haengt oben am Band und
   ueberdeckt die Kante zum Team-Abschnitt. Eine Kachel = ein Bogen mit sechs Wimpeln. */
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='72' viewBox='0 0 360 72'%3E%3Cg fill='rgba(64,56,47,.14)'%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(31.5 12.78) rotate(7.39)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(91.5 19) rotate(4.45)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(151.5 22.11) rotate(1.49)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(211.5 22.11) rotate(-1.49)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(271.5 19) rotate(-4.45)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' transform='translate(331.5 12.78) rotate(-7.39)'/%3E%3C/g%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23A9B79D' transform='translate(30 10.28) rotate(7.39)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23F3E4CF' transform='translate(90 16.5) rotate(4.45)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23E3AA3E' transform='translate(150 19.61) rotate(1.49)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%234D6B47' transform='translate(210 19.61) rotate(-1.49)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23B9782D' transform='translate(270 16.5) rotate(-4.45)'/%3E%3Cpath d='M-19 0H19L1.6 40Q0 42.5-1.6 40Z' fill='%23F3E4CF' transform='translate(330 10.28) rotate(-7.39)'/%3E%3Cpath d='M-2 6Q180 34 362 6' fill='none' stroke='%23D6BC97' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 50% 0 / 360px 72px;
}
@media (max-width: 40rem) { .band::before { height: 56px; background-size: 280px 56px; } }
.band .innen { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0 3.5rem; }
/* Das Bild ist unten angeschnitten. Es ragt 0,6 rem unter die Bandkante, dort schneidet
   das Band ab. So bleibt der Schnitt auch beim Auftauchen und Winken unsichtbar. */
.band .akiko { position: relative; flex: none; width: 11rem; margin: 1.5rem 0 -.6rem; }
.band .akiko img { display: block; width: 100%; transform-origin: 50% 100%; }
.band .hallo {
  position: absolute; top: -.4rem; right: -2.2rem; padding: .2rem .8rem .3rem;
  border-radius: 1rem 1rem 1rem .25rem; background: var(--weiss); box-shadow: var(--schatten-s);
  font: 1.45rem/1.1 var(--hand); color: var(--espresso); transform-origin: 0 100%;
}
.band .rechts { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding-block: clamp(1.8rem, 4vw, 2.6rem); }
/* Nur mit JavaScript verstecken, sonst waere Akiko ohne Skript unsichtbar. */
.js .band .akiko img { transform: translateY(105%); }
.js .band .hallo { opacity: 0; transform: scale(.3); }
.band.sichtbar .akiko img { animation: akiko-auftauchen .75s cubic-bezier(.2, .8, .25, 1.15) forwards, akiko-winken 1s ease-in-out .8s 2; }
.band.sichtbar .hallo { animation: hallo-sagen .45s cubic-bezier(.2, .8, .25, 1.35) .85s forwards; }
@keyframes akiko-auftauchen { to { transform: translateY(0); } }
@keyframes akiko-winken { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 70% { transform: rotate(2.5deg); } }
@keyframes hallo-sagen { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .band .akiko img, .js .band .hallo { transform: none; opacity: 1; animation: none !important; }
}
@media (max-width: 40rem) {
  .band .akiko { order: 2; width: 8.5rem; margin-top: .5rem; }
  .band .rechts { padding-bottom: .5rem; }
}

/* ===== PHILOSOPHIE ===== */
.philosophie { background: var(--mint-b); }
.philosophie .raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.wert { padding: 1.8rem 1.4rem 1.5rem; border-radius: var(--r-l); background: var(--mint-k); text-align: center; transition: transform var(--weich); }
@media (hover: hover) { .wert:hover { transform: translateY(-4px); } }
.wert svg { width: 5rem; height: 5rem; margin: 0 auto 1rem; }
.wert h3 { font-size: 1.4rem; font-weight: 300; line-height: 1.3; }
.wert h3 b { font-weight: 600; }
.wert p { margin: .8rem 0 0; font-size: .95rem; }
@media (max-width: 60rem) { .philosophie .raster { grid-template-columns: 1fr 1fr; } }

/* ===== GAESTE - Zitate als Text statt Bild ===== */
.gaeste { background: linear-gradient(180deg, #8A7866 0%, #B39D85 100%); }
.gaeste .kopfzeile h2 { color: var(--weiss); }
.gaeste .augenbraue { color: var(--creme); }
.gaeste .raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gast {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .7rem;
  min-width: 0; margin: 0; padding: 1.8rem 0 1.7rem; overflow: hidden;
  border-radius: var(--r-l); box-shadow: var(--schatten-m); text-align: center;
}
.gast.koralle { background: #EA8A76; }
.gast.creme { background: var(--creme); }
.gast.petrol { background: #5F9B8B; }
/* Fotos und Zitate stehen getrennt, die Menschen auf den Fotos sind nicht die Verfasser. */
.gaeste-fotos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 1.2rem; padding: 0; }
.gaeste-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--schatten-m); }
@media (max-width: 40rem) { .gaeste-fotos { gap: .5rem; } .gaeste-fotos img { border-radius: var(--r-m); } }
.gast .sterne svg { width: 1.7rem; height: 1.7rem; }
.blase {
  position: relative; max-width: 17rem; margin: .2rem 1.2rem .6rem; padding: .9rem 1.1rem;
  border: 2px solid var(--espresso); border-radius: var(--r-m); background: var(--weiss);
  font-size: .93rem; font-weight: 400; line-height: 1.45; text-align: left;
}
.blase::after {
  content: ""; position: absolute; left: 1.8rem; bottom: -.8rem; width: 1.4rem; height: 1.4rem;
  background: var(--weiss); border-left: 2px solid var(--espresso); border-bottom: 2px solid var(--espresso);
  transform: skewY(-35deg);
}
.blase p { margin: 0; }
.gast figcaption { font: 1.3rem/1.2 var(--hand); color: var(--espresso); }
.gast .affe { position: absolute; right: .9rem; bottom: .8rem; width: 2.2rem; }

/* ===== PARTNER ===== */
.partner { padding-top: clamp(2rem, 4vw, 3rem); background: linear-gradient(90deg, var(--koralle) 0%, var(--sand) 100%); }
.partner .innen { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.faq.abschnitt { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.partner .innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; }
.partner h2 { padding-right: 3rem; border-right: 1px solid var(--braun); font-weight: 300; }
.partner ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin: 0; padding: 0; }
.partner a { display: block; padding: .6rem; border-radius: var(--r-m); transition: transform var(--weich), background-color var(--weich); }
@media (hover: hover) { .partner a:hover { transform: translateY(-3px); background-color: rgb(255 255 255 / .35); } }
.partner img { height: 5.5rem; width: auto; }
@media (max-width: 40rem) { .partner h2 { padding-right: 0; border-right: 0; } .partner img { height: 4.2rem; } }

/* ===== FAQ - Akkordeon, oeffnet weich wo der Browser es kann ===== */
.faq .innen { max-width: 52rem; }
.faq details { margin-bottom: .7rem; overflow: hidden; border-radius: var(--r-m); background: var(--weiss); box-shadow: var(--schatten-s); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.15rem 3.6rem 1.15rem 1.4rem; font-size: 1.07rem; font-weight: 500; color: var(--espresso);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: 2rem; height: 2rem; margin-top: -1rem; border-radius: 50%;
  background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23290C05' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transition: transform var(--weich), background-color var(--weich);
}
.faq details[open] summary::after { transform: rotate(180deg); background-color: var(--mint); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .antwort { padding: 0 1.4rem 1rem; }
.faq .antwort ul { margin: 0 0 1rem; padding-left: 1.2rem; }

/* ===== BLOG ===== */
.blog { background: var(--pfirsich); }
.blog .raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.beitrag {
  position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.5rem;
  border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten-s);
  transition: transform var(--weich), box-shadow var(--weich);
}
@media (hover: hover) { .beitrag:hover { transform: translateY(-4px); box-shadow: var(--schatten-m); } }
.beitrag .rubrik { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--petrol); }
.beitrag h3 a { text-decoration: none; }
.beitrag h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.beitrag p { margin: .6rem 0 1rem; font-size: .95rem; }
.beitrag .weiter { margin-top: auto; font-weight: 500; color: var(--espresso); }
.blog .alle { margin: 1.8rem 0 0; text-align: center; }
@media (max-width: 60rem) { .blog .raster { grid-template-columns: 1fr; max-width: 36rem; margin-inline: auto; } }

/* ===== ANFRAGE ===== */
.anfrage { background: linear-gradient(180deg, var(--mint-b) 0%, var(--mint-k) 100%); }
.anfrage.abschnitt { padding-top: clamp(2rem, 4vw, 3rem); }
.anfrage .innen { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.formular { margin-top: 1.5rem; padding: 1.8rem; border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten-m); }
.vorhang { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.vorhang p { margin: 0; font-size: .9rem; }
.kontakt { list-style: none; display: grid; gap: .8rem; margin: 1.4rem 0 0; padding: 0; }
.kontakt a {
  display: flex; align-items: center; gap: .9rem; padding: .6rem 1.1rem .6rem .6rem;
  border-radius: var(--r-pill); background: rgb(255 255 255 / .7); text-decoration: none; font-weight: 500;
  transition: background-color var(--weich);
}
@media (hover: hover) { .kontakt a:hover { background-color: var(--weiss); } }
@media (max-width: 56rem) { .anfrage .innen { grid-template-columns: 1fr; } }

/* ===== FUSSZEILE ===== */
.fuss { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; background: linear-gradient(90deg, var(--lachs) 0%, var(--sand) 100%); font-size: .95rem; }
.fuss .spalten { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2rem; }
.fuss h2 { margin-bottom: .8rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.fuss ul { list-style: none; display: grid; gap: .35rem; margin: 0; padding: 0; }
.fuss address { font-style: normal; }
.fuss .claim { max-width: 18rem; margin-top: .8rem; }
.siegel { display: flex; align-items: center; gap: .9rem; margin-top: 1.2rem; }
.siegel img { height: 3rem; width: auto; }
.siegeltext { margin: .5rem 0 0; font-size: .8rem; line-height: 1.5; }
.fuss .unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgb(64 56 47 / .2); font-size: .85rem;
}
.fuss .unten p { margin: 0; }
.fuss .pikto { width: 6.5rem; }
@media (max-width: 60rem) { .fuss .spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .fuss .spalten { grid-template-columns: 1fr; } }

/* ===== APE FAEHRT EIN - Piktogramm im Ablauf und in der Fusszeile =====
   Das Skript setzt .da, sobald die Stelle im Bild ist. Die Ape schaut nach rechts,
   kommt also von links und nickt beim Bremsen kurz nach vorn. */
.einfahrt { overflow: hidden; }
.ape-pikto { transform-origin: 60% 100%; }
/* Gemaechlich: rund 4 Sekunden Fahrt, gebremst wird erst kurz vor dem Ziel. */
.js .einfahrt .ape-pikto { transform: translateX(-100vw); }
.js .einfahrt.da .ape-pikto { animation: einfahren 4.6s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes einfahren {
  0% { transform: translateX(-100vw); }
  86% { transform: translateX(1.5%); }
  93% { transform: translateX(0) rotate(2deg); }
  100% { transform: translateX(0) rotate(0); }
}
.anfahrt { display: flex; justify-content: center; margin: 2.6rem 0 0; }
.anfahrt .ape-pikto { width: clamp(6.5rem, 12vw, 9rem); height: auto; }
@media (prefers-reduced-motion: reduce) {
  .js .einfahrt .ape-pikto, .js .einfahrt.da .ape-pikto { transform: none; animation: none; }
}
/* ===== EINBLENDEN BEIM SCROLLEN - nur wo der Browser es kann ===== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .auftauchen { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @keyframes auftauchen { from { opacity: 0; transform: translateY(1.5rem); } }
  }
}

/* ===== HANDY: Wisch-Reihen statt Karten untereinander ===== */
@media (max-width: 40rem) {
  .raster.wisch {
    display: flex; gap: .8rem; max-width: none; padding: .3rem .2rem 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  }
  .raster.wisch > * { flex: 0 0 86%; scroll-snap-align: center; }
  /* Mit Skript zeigen Punkte, wo man ist. Die Scrollleiste verschwindet. */
  .js .raster.wisch { scrollbar-width: none; }
  .js .raster.wisch::-webkit-scrollbar { display: none; }
  .gaeste .punkte, .garantie .punkte { color: var(--weiss); }
  .sorten .raster.wisch > * { flex-basis: 92%; }
  /* schmaleres Bild, sonst schneidet der Wischrand die Etiketten ab */
  .sorten .raster.wisch figure { max-width: 15.5rem; }
  .bewertung { gap: .45rem; padding: .45rem .9rem .45rem .6rem; }
  .bewertung .g { width: 1.4rem; height: 1.4rem; }
  .bewertung .sterne svg { width: 1.05rem; height: 1.05rem; }
}

/* ===== PUNKTE unter den Wisch-Reihen, ersetzen die Scrollleiste =====
   Das Skript legt sie an und zeigt sie nur, wenn die Reihe wirklich scrollt. */
.punkte { display: flex; justify-content: center; margin-top: .1rem; }
/* hidden allein reicht nicht, display: flex oben waere staerker. Ab Tablet-Breite sind die
   Punkte aus, nur die Referenzen bleiben auch dort eine Wisch-Reihe. */
.punkte[hidden] { display: none; }
@media (min-width: 40.01rem) { .punkte { display: none; } }
.punkte button {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0;
  background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: width .4s cubic-bezier(.2, .8, .2, 1);
}
.punkte button::before {
  content: ""; width: .5rem; height: .5rem; border-radius: var(--r-pill); background: currentColor; opacity: .25;
  transition: width .4s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.punkte button[aria-current="true"] { width: 2.4rem; }
.punkte button[aria-current="true"]::before { width: 1.6rem; opacity: .85; }
.punkte button:focus-visible { outline-offset: -3px; border-radius: var(--r-pill); }

/* ===== LEISTE UNTEN - nur Handy ===== */
.leiste { display: none; }
@media (max-width: 40rem) {
  body { padding-bottom: 4.8rem; }
  .leiste {
    position: fixed; left: .6rem; right: .6rem; bottom: max(.6rem, env(safe-area-inset-bottom)); z-index: 60;
    display: flex; gap: .5rem; transition: transform var(--weich);
  }
  /* breit: Text mittig, der Pfeil bleibt im Mint-Kreis. Das ::after haelt links gleich viel Platz frei. */
  .leiste .knopf { flex: 1; padding-left: .5rem; font-size: .95rem; }
  .leiste .knopf::after { content: ""; order: -1; flex: none; width: 2.5rem; }
  .leiste .knopf, .leiste .rund { box-shadow: 0 6px 18px rgb(41 12 5 / .28); }
  .leiste .rund { width: 3.25rem; height: 3.25rem; }
  .leiste.aus { transform: translateY(160%); }
}