/* ==========================================================================
   TS Webstudio by Tobias Schoeppner
   Design-System: dunkel, reduziert, Champagner-Gold als Akzent
   ========================================================================== */

/* --- Schriften, alle lokal gehostet (kein externer Server) --------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2'),
       url('../fonts/PlayfairDisplay.ttf') format('truetype');
  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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2'),
       url('../fonts/PlayfairDisplay.ttf') format('truetype');
  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: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/dancing-latin.woff2') format('woff2'),
       url('../fonts/DancingScript.ttf') format('truetype');
  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: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/dancing-latin-ext.woff2') format('woff2'),
       url('../fonts/DancingScript.ttf') format('truetype');
  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: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-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: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-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;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-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;
}

/* --- Design-Tokens ------------------------------------------------------- */

:root {
  --ink: #0b0b0c;
  --ink-2: #101012;
  --surface: #141416;
  --surface-2: #1a1a1d;
  --text: #f2efea;
  --muted: #a19d96;
  --gold: #c8a96a;
  --gold-soft: #e2cb99;
  --line: rgba(242, 239, 234, 0.09);
  --line-strong: rgba(242, 239, 234, 0.16);
  --line-gold: rgba(200, 169, 106, 0.32);

  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-script: 'Dancing Script', 'Segoe Script', cursive;
  --font-body: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 24px;
  --radius: 6px;
  --radius-lg: 12px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.95rem, 4vw, 2.9rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }

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

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--ink); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --- Abschnittsrahmen ---------------------------------------------------- */

section { position: relative; }

.section { padding: clamp(80px, 10vw, 132px) 0; }
.section--hairline { border-top: 1px solid var(--line); }

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.eyebrow--center { text-align: center; }

.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 58px); }
.section-head p { color: var(--muted); font-size: 1.04rem; margin-bottom: 0; }
.section-head--center {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.section-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: clamp(36px, 5vw, 54px);
}
.section-foot small { font-size: 0.82rem; color: var(--muted); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn--primary {
  background: var(--gold);
  color: #14100a;
  border-color: var(--gold);
}
.btn--primary:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: #14100a;
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-gold);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--ink);
  color: var(--text);
  border-color: var(--ink);
}
.btn--dark:hover { background: #000; color: var(--gold-soft); transform: translateY(-2px); }

.btn--sm { min-height: 44px; padding: 10px 22px; font-size: 0.88rem; }
.btn--wide { width: 100%; }

/* --- Kopfbereich: schwebende Kapsel mit Milchglas-Effekt ----------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: clamp(14px, 2vw, 20px);
  /* Kein eigener Hintergrund hier, der sitzt auf .site-header__inner, damit
     rundherum die Seite durchscheint und die Leiste wie eine schwebende
     Kapsel wirkt statt wie ein Balken, der am Bildschirmrand klebt. */
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  background: rgba(11, 11, 12, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.brand { display: inline-flex; align-items: baseline; gap: 10px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__mark {
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.06em;
  line-height: 1;
}
.brand__mark em { font-style: normal; color: var(--gold); }
.brand__script {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
}
/* In der Kopfzeile etwas groesser und damit besser lesbar, in der Fusszeile
   bleibt die urspruengliche, etwas kleinere Groesse. */
.site-header .brand__script { font-size: 1.22rem; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  color: var(--text);
  font-size: 0.94rem;
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav__link:hover { color: var(--gold-soft); }
.nav__link:hover::after { width: 100%; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 4px auto;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- Hero: Meer ueber die volle Bildschirmbreite, lockerer Aufbau -------- */

.hero {
  position: relative;
  padding: 148px 0 96px;
  overflow: hidden;
}
.hero::before {
  /* Sehr ruhiger Hintergrund statt eines Fotos, damit das Portraet der
     einzige Blickfang bleibt. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 900px 560px at 14% -10%, rgba(200, 169, 106, 0.08), transparent 70%), var(--ink);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
}

.hero__inner { max-width: 560px; }
.hero .eyebrow { margin-bottom: 28px; }

.hero h1 {
  margin-bottom: 24px;
  line-height: 1.18;
  letter-spacing: -0.008em;
}

.hl {
  position: relative;
  display: inline;
  color: var(--text);
  font-style: italic;
}
.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -3% 0% -2%;
  background: var(--gold);
  opacity: 0.18;
  transform: rotate(-1deg);
  border-radius: 2px 9px 3px 10px / 9px 2px 10px 3px;
}

.hero__text {
  max-width: 44ch;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 32px;
}

.hero__audience {
  max-width: 44ch;
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 34px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__hinweis {
  margin-top: 14px;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.28rem;
  color: var(--gold);
}

.hero__photo { justify-self: end; }
.hero__portrait {
  position: relative;
  margin: 0;
  width: min(360px, 100%);
  aspect-ratio: 900 / 1254;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.4);
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  opacity: 0.92;
  filter: grayscale(100%) contrast(0.98) brightness(0.96);
}
/* Weicher Rand statt hartem Fotoausschnitt, damit das Bild sich ruhiger in
   den dunklen Hintergrund einfuegt, statt scharf herauszustechen. */
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 58%, rgba(11, 11, 12, 0.5) 100%);
}

/* Logo-S und Schreibschrift leuchten beim Laden kurz auf */
.brand__mark em, .brand__script { animation: leuchten 3.2s var(--ease) 0.45s both; }
@keyframes leuchten {
  0% { color: var(--gold); text-shadow: none; }
  22% { color: #fff4de; text-shadow: 0 0 16px rgba(226, 203, 153, 0.9), 0 0 44px rgba(200, 169, 106, 0.55); }
  60% { color: var(--gold-soft); text-shadow: 0 0 10px rgba(200, 169, 106, 0.35); }
  100% { color: var(--gold); text-shadow: none; }
}

/* --- Schreibschrift-Akzente und Pfeile ------------------------------------ */

.script {
  font-family: var(--font-script);
  font-weight: 600;
  color: var(--gold);
  font-size: 1.35em;
  line-height: 1;
}
.script-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--gold);
}
.script-zeile svg { width: 44px; height: 24px; flex: none; opacity: 0.9; }
.pfeil-hoch svg { transform: scaleY(-1); }

/* --- Band mit Zielgruppen ------------------------------------------------ */

.band { position: relative; padding: 34px 0 6px; }

/* Uebergang Hero zu Box 2: eine duenne goldene Linie, die sich beim
   Herunterscrollen wie ein Vorhang aus der Mitte heraus nach beiden Seiten
   oeffnet, genau an der Kante zwischen den beiden Abschnitten. */
.hero-seam {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.hero-seam__line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold) 18%,
    var(--gold-soft) 50%,
    var(--gold) 82%,
    transparent 100%);
  box-shadow: 0 0 10px rgba(200, 169, 106, 0.35);
  transition: width 1.3s var(--ease);
}
.hero-seam.is-visible .hero-seam__line { width: 100%; }
.band__label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.band__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.band__list li {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--text);
  opacity: 0.72;
}
.band__list li + li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--muted);
}

/* --- Bildkarten (Leistungen) --------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}
.card__body { padding: 26px 24px 30px; }
.card__num {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 12px;
}
.card__body h3 { margin-bottom: 10px; }
.card__body p { font-size: 0.94rem; color: var(--muted); margin: 0; }

/* Ablauf-Karten: die Schrittnummer deutlich groesser als im geteilten
   Karten-Baustein, nur hier, betrifft die Leistungen-Karten nicht. */
#ablauf .card__num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0;
  color: var(--gold);
  margin-bottom: 8px;
}
/* Feste, zweizeilige Hoehe fuer die Ueberschrift: die drei Karten sollen im
   eingeklappten Zustand gleich hoch sein, unabhaengig davon, ob eine
   Ueberschrift laenger ist und deshalb umbricht (Karte 1 war dadurch
   zuvor minimal groesser als die anderen beiden). */
#ablauf .card__body h3 {
  min-height: calc(1.3rem * 1.25 * 2);
  display: flex;
  align-items: flex-end;
}

/* Ablauf-Karten: kleine Pfeile zwischen den drei Karten, zeigen den
   Ablauf als Kette. Als frei positionierte Elemente ueber dem Raster
   platziert (fester Abstand von oben), statt als Raster-Kinder: so bleiben
   sie exakt an ihrem Platz, egal ob eine Karte durch "Erfahre mehr" hoeher
   wird. Nur ab der Breite sichtbar, bei der die Karten auch wirklich
   nebeneinander stehen, siehe Breakpoints weiter unten. */
.ablauf-pfeil {
  position: absolute;
  top: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.ablauf-pfeil svg { width: 22px; height: 22px; }
.ablauf-pfeil:nth-of-type(1) {
  left: calc((100% - 2 * var(--ablauf-gap)) / 3 + var(--ablauf-gap) / 2 - 11px);
}
.ablauf-pfeil:nth-of-type(2) {
  left: calc(((100% - 2 * var(--ablauf-gap)) / 3) * 2 + var(--ablauf-gap) * 1.5 - 11px);
}

/* Drei normale, gleich breite Spalten (keine eigenen Pfeil-Spalten mehr
   noetig, die Pfeile liegen jetzt frei positioniert darueber). Karten
   bleiben obenbuendig, damit eine aufgeklappte Karte die anderen nicht nach
   unten zieht. Nur #ablauf betroffen, die Leistungen-Karten bleiben beim
   normalen 3er-Raster. */
#ablauf .cards {
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  --ablauf-gap: clamp(24px, 3vw, 40px);
  gap: var(--ablauf-gap);
}

/* Ablauf-Karten: "Erfahre mehr", klappt zusaetzliche Informationen auf,
   nur innerhalb von #ablauf, betrifft die Leistungen-Karten nicht. */
#ablauf .card__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--gold);
  cursor: pointer;
}
#ablauf .card__more-toggle:hover { color: var(--gold-soft); }
#ablauf .card__more-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
#ablauf .card__more-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }

#ablauf .card__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
#ablauf .card__more.is-open { grid-template-rows: 1fr; }
#ablauf .card__more-inner { overflow: hidden; }
#ablauf .card__more-inner p {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--muted);
}

/* Ablauf-Karten: legen sich nacheinander auf, wie aufgedeckte Karten */
.card--deal {
  opacity: 0;
  transform: perspective(900px) translateY(24px) rotateX(-55deg);
  transform-origin: 50% 100%;
  transition: opacity 2.2s var(--ease), transform 2.2s var(--ease), border-color 0.3s var(--ease);
}
.card--deal.is-visible {
  opacity: 1;
  transform: none;
}
/* Ablauf-Karten: Bildwirkung angleichen. Die Korrektur fuer Karte 1 galt
   dem alten, deutlich helleren Cafe-Portraet und ist mit dem neuen
   Espresso-Motiv (schon von Haus aus dunkel/stimmungsvoll) hinfaellig,
   deshalb entfernt. Karte 3 (Laptop) bleibt dunkler als die anderen und
   behaelt ihre Aufhellung, die Skizze in Karte 2 bleibt Referenz.
   :last-of-type statt :nth-child(3), weil die Pfeile zwischen den Karten
   sonst die Zaehlung der Kind-Elemente verschieben wuerden. */
#ablauf .cards .card:last-of-type .card__media img {
  filter: grayscale(100%) contrast(0.98) brightness(1.16);
}

.card--deal[data-delay="1"] { transition-delay: 0.5s; }
.card--deal[data-delay="2"] { transition-delay: 1s; }

/* --- Raster: wobei ich helfe --------------------------------------------- */

.help {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 26px;
  align-items: stretch;
}
.help__col { display: grid; grid-template-rows: 1fr 1fr; gap: 26px; }

.help__item {
  padding: 30px 28px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.help__item:hover { background: var(--surface); border-color: var(--line-strong); }
.help__item svg { width: 24px; height: 24px; color: var(--muted); margin-bottom: 14px; }
.help__item h3 { font-size: 1.18rem; margin-bottom: 8px; }
.help__item p { font-size: 0.92rem; color: var(--muted); margin: 0; }

.help__center {
  position: relative;
  min-height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.help__center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}
.help__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 28px 30px;
  background: linear-gradient(transparent, rgba(11, 11, 12, 0.94) 62%);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.24;
  text-wrap: balance;
}

/* --- Ueber mich ---------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}

.about__media { position: relative; }
.portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(100%) contrast(1.04);
}
.portrait--small {
  position: absolute;
  right: -46px;
  bottom: -46px;
  width: 45%;
  aspect-ratio: 1 / 1;
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.about__text p { color: var(--muted); }
.about__text p strong { color: var(--text); font-weight: 400; }
.about__sign {
  display: block;
  margin-top: 24px;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--gold);
}

/* --- Platzhalter fuer fehlende Bilder ------------------------------------ */

.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: var(--surface);
  color: var(--muted);
  text-align: center;
  padding: 20px;
}
.ph svg { width: 42px; height: 42px; opacity: 0.8; }
.ph span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Preise -------------------------------------------------------------- */

.prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.price { padding-top: 26px; border-top: 1px solid var(--line-strong); }
.price--featured { border-top-color: var(--gold); }
.price__name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.32rem;
  margin-bottom: 6px;
}
.price__name span {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.price__for { font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; }
.price__value {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 18px;
}
.price__value small { font-family: var(--font-body); font-size: 0.78rem; color: var(--muted); }
.price__list { list-style: none; margin: 0; padding: 0; }
.price__list li {
  position: relative;
  padding: 0 0 9px 24px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.price__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 4.5px;
  border-left: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
}

.care {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: clamp(34px, 4vw, 52px);
  padding: 26px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
}
.care__body { flex: 1 1 340px; }
.care__body h3 { font-size: 1.2rem; margin-bottom: 6px; }
.care__body p { font-size: 0.93rem; color: var(--muted); margin: 0; }
.care__price {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--gold);
  white-space: nowrap;
}
.care__price span { font-family: var(--font-body); font-size: 0.78rem; color: var(--muted); }

.note { margin-top: 22px; font-size: 0.85rem; color: var(--muted); }

/* --- Erfahrungen --------------------------------------------------------- */

.soon {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(38px, 5vw, 58px) clamp(24px, 4vw, 56px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.soon__quote {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 8px;
}
.soon h2 { font-size: clamp(1.55rem, 3vw, 2rem); margin-bottom: 16px; }
.soon p { color: var(--muted); max-width: 52ch; margin-inline: auto; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.35;
  transition: color 0.25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-soft); }
.faq__sign { flex: none; position: relative; width: 16px; height: 16px; margin-top: 7px; }
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  background: var(--text);
  transition: transform 0.3s var(--ease);
}
.faq__sign::before { top: 7.5px; left: 0; width: 16px; height: 1.5px; }
.faq__sign::after { left: 7.5px; top: 0; width: 1.5px; height: 16px; }
.faq__item[open] .faq__sign::after { transform: rotate(90deg); }
.faq__answer { padding: 0 0 24px; max-width: 62ch; color: var(--muted); font-size: 0.97rem; }
.faq__item[open] .faq__answer { animation: fade-in 0.4s var(--ease) both; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- Abschluss-Banner ---------------------------------------------------- */

.cta { padding: clamp(20px, 4vw, 40px) 0 clamp(60px, 7vw, 90px); }
.cta__panel {
  padding: clamp(46px, 6vw, 82px) clamp(26px, 4vw, 60px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cta__panel h2 {
  max-width: 17ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
}
.cta__panel p {
  max-width: 46ch;
  margin: 16px auto 30px;
  color: var(--muted);
}

/* --- Kontakt ------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(34px, 5vw, 68px);
  align-items: start;
}
.contact__aside p { color: var(--muted); }
.contact__list { list-style: none; margin: 28px 0 0; padding: 0; }
.contact__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.contact__list svg { flex: none; width: 20px; height: 20px; color: var(--muted); margin-top: 3px; }
.contact__list b {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.form {
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field__optional { text-transform: none; letter-spacing: 0; font-weight: 400; }

.field input, .field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: rgba(242, 239, 234, 0.26); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ink-2);
}
.field input::placeholder, .field textarea::placeholder { color: #6b6862; }

.check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 22px; }
.check input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold); }
.check label {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { margin-top: 16px; font-size: 0.81rem; color: var(--muted); text-align: center; }

.form__status {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 0.93rem;
  border: 1px solid var(--line);
}
.form__status.is-ok { display: block; border-color: var(--line-gold); color: var(--gold-soft); }
.form__status.is-error { display: block; border-color: #7a3c3c; color: #e5a3a3; }

/* --- Fussbereich --------------------------------------------------------- */

.site-footer {
  padding: clamp(48px, 6vw, 76px) 0 36px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.site-footer .brand { justify-content: center; }
.site-footer__claim {
  max-width: 46ch;
  margin: 16px auto 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 34px;
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}
.site-footer__nav a { font-size: 0.92rem; color: var(--text); }
.site-footer__nav a:hover { color: var(--gold); }
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: #6b6862;
}
.site-footer__meta a { color: #6b6862; }
.site-footer__meta a:hover { color: var(--gold); }

/* --- Rechtstexte --------------------------------------------------------- */

.legal { padding: clamp(136px, 16vw, 184px) 0 clamp(60px, 7vw, 96px); }
.legal__body { max-width: 720px; }
.legal__body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.72rem);
  margin: 44px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal__body h3 { font-size: 1.1rem; margin: 26px 0 10px; }
.legal__body p, .legal__body li { color: var(--muted); font-size: 0.97rem; }
.legal__body ul { padding-left: 20px; }
.legal__body li { margin-bottom: 8px; }
.legal__body address { font-style: normal; color: var(--text); line-height: 1.9; }
.legal__hint {
  margin-top: 44px;
  padding: 22px 26px;
  background: var(--surface);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.91rem;
}

/* --- Bewegung ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }

/* --- Mobile Durchgang ---------------------------------------------------- */

@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__inner { max-width: none; }
  .hero__photo { justify-self: center; }
  /* Feste Breite statt Prozentwert vom Bildcontainer: verhaelt sich sonst
     unvorhersehbar, weil .hero__photo je nach umgebender Breite selbst
     schwankt. min() mit vw dient hier nur als Sicherheitsnetz fuer sehr
     schmale Bildschirme, nicht als Hauptwert. */
  .hero__portrait { width: min(260px, 70vw); }

  .help { grid-template-columns: 1fr 1fr; }
  .help__center { grid-column: 1 / -1; grid-row: 1; min-height: 300px; }
  .help__col { grid-template-rows: auto auto; }

  .cards { grid-template-columns: 1fr 1fr; }
  .cards .card:last-child { grid-column: 1 / -1; }

  /* Ablauf-Karten sollen auf mittleren Breiten nicht in ein 2+1-Raster
     springen: drei gleich breite Spalten, solange Platz ist, sonst
     einspaltig (siehe Breakpoint weiter unten). Betrifft nur #ablauf,
     die Leistungen-Karten behalten das 2+1-Verhalten. */
  #ablauf .cards { grid-template-columns: repeat(3, 1fr); }
  #ablauf .cards .card:last-child { grid-column: auto; }
  /* Karten sind in diesem etwas schmaleren Bereich enger beieinander,
     die Pfeile ruecken deshalb etwas weiter nach oben (bezogen auf das
     schmalere Bild) und die Spaltenbreite fuer die seitliche Position
     aendert sich automatisch mit dem Wrap, keine Anpassung noetig. */
  .ablauf-pfeil { top: 108px; }

  .steps { grid-template-columns: 1fr 1fr; gap: 30px 26px; }

  .about { grid-template-columns: 1fr; gap: 60px 34px; }
  .about__media { max-width: 380px; }
  .portrait--small { right: -30px; bottom: -34px; width: 42%; }

  .prices { grid-template-columns: 1fr; gap: 26px; }
  .contact { grid-template-columns: 1fr; }
}

/* Ablauf-Karten: sobald drei Spalten zu eng wuerden, lieber einspaltig
   als eine gequetschte Reihe. Eigener Zwischenschritt nur fuer #ablauf,
   bevor der allgemeine 760px-Breakpoint ohnehin alle .cards einspaltig macht. */
@media (max-width: 900px) {
  #ablauf .cards { grid-template-columns: 1fr; }
  /* Einspaltig gestapelt ergeben die kleinen Pfeile zwischen den Karten
     keinen Sinn mehr, die Reihenfolge ist durchs Untereinanderstehen schon
     klar. */
  .ablauf-pfeil { display: none; }
}

/* In diesem einspaltigen Zwischenbereich (761-900px) wird die 4:3-Karte
   sonst sehr hoch, weil das Bild die volle, recht breite Spalte einnimmt.
   Karte auf eine ruhigere Breite begrenzen und zentrieren, statt die
   Bildflaeche unnoetig gross werden zu lassen. */
@media (min-width: 761px) and (max-width: 900px) {
  #ablauf .cards .card { max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* Mobile-CTA-Leiste: ausserhalb der mobilen Media Query unten immer
   unsichtbar, die eigentliche Sichtbarkeit regelt der Block darunter. */
.mobile-cta-bar { display: none; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 92px; }

  .site-header {
    padding-top: 12px;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .site-header__inner { min-height: 60px; border-radius: 16px; }

  /* Ab Box 2 (Ablauf) uebernimmt unten die CTA-Leiste, die obere Navi
     schwebt dafuer nach oben aus dem Bild (siehe main.js: IntersectionObserver
     auf die Hero-Box setzt/entfernt die Klasse "ist-nach-hero" am body). */
  body.ist-nach-hero .site-header {
    opacity: 0;
    transform: translateY(-130%);
    pointer-events: none;
  }

  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    z-index: 100;
    padding: 10px;
    background: rgba(11, 11, 12, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-gold);
    border-radius: 18px;
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(130%);
    pointer-events: none;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  body.ist-nach-hero .mobile-cta-bar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .mobile-cta-bar .btn { width: 100%; }

  /* Das Espresso-Icon rueckt nach oben, sobald die CTA-Leiste unten liegt,
     damit sich beide nicht ueberlappen. */
  body.ist-nach-hero .espresso-widget {
    bottom: calc(16px + 66px + env(safe-area-inset-bottom, 0px));
  }
  .brand__script { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 10px var(--gutter) 22px;
    background: rgba(11, 11, 12, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 16px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link { display: block; padding: 16px 2px; font-size: 1.02rem; }
  .nav__link::after { display: none; }
  .nav .btn { width: 100%; margin-top: 20px; }

  .hero { padding: 116px 0 56px; }
  .hero__portrait { width: min(200px, 62vw); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  .band__list { gap: 10px 24px; }
  .band__list li + li::before { left: -14px; }

  .cards { grid-template-columns: 1fr; }
  .cards .card:last-child { grid-column: auto; }
  .card__media { aspect-ratio: 16 / 10; }

  /* Nur Ablauf-Karten in der mobilen Ansicht: Text zuerst, Bild danach
     und deutlich kleiner als vorher (kein randabschliessendes Bild mehr,
     sondern ein kleines, zentriertes Foto unter dem Text). Betrifft nicht
     die Leistungen-Karten, die bleiben beim randabschliessenden Bild oben. */
  #ablauf .cards .card__body { order: 1; }
  #ablauf .cards .card__media {
    order: 2;
    width: 46%;
    max-width: 170px;
    margin: 6px auto 24px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
  }

  .help { grid-template-columns: 1fr; }
  .help__center { min-height: 260px; }
  .help__col { gap: 16px; }

  .steps { grid-template-columns: 1fr; gap: 26px; }

  .about__media { max-width: none; }
  .portrait--small {
    position: static;
    width: 60%;
    margin: 16px 0 0 auto;
    box-shadow: none;
  }

  .care { padding: 22px; gap: 14px; }
  .care__price { font-size: 1.35rem; }

  .cta__panel { border-radius: 8px; }
  .cta__panel .btn { width: 100%; }

  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form { padding: 22px 18px; }

  .faq__item summary { font-size: 1.04rem; padding: 18px 0; }

  .site-footer__meta { justify-content: center; text-align: center; }
}

/* --- Espresso-Impuls: schwebendes Element unten rechts ------------------- */

.espresso-widget {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  opacity: 0;
  transform: translateX(48px);
  pointer-events: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.espresso-widget.is-sichtbar { opacity: 1; transform: none; pointer-events: auto; }

.espresso-widget__toggle {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-gold);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.espresso-widget__toggle:hover { border-color: var(--gold); transform: translateY(-2px); }

.espresso-widget__steam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
}

.espresso-widget__fuchs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(100%) contrast(1.05);
}

/* Der Dampf steigt in einer Dauerschleife auf, jede Linie zeitversetzt,
   damit es unregelmaessig und lebendig statt maschinell wirkt. */
.steam { transform-origin: center bottom; }
.steam--1 { animation: espresso-dampf 3.4s ease-in-out infinite; }
.steam--2 { animation: espresso-dampf 3.4s ease-in-out infinite 0.55s; }
.steam--3 { animation: espresso-dampf 3.4s ease-in-out infinite 1.1s; }

@keyframes espresso-dampf {
  0%   { opacity: 0;    transform: translateY(3px) scaleY(0.85); }
  25%  { opacity: 0.9; }
  70%  { opacity: 0.35; }
  100% { opacity: 0;    transform: translateY(-7px) scaleY(1.2); }
}

.espresso-widget__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(300px, 78vw);
  padding: 22px 20px 20px;
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.65);
  transform-origin: bottom right;
  animation: espresso-panel-auf 0.65s var(--ease) both;
}
.espresso-widget__panel[hidden] { display: none; }

/* Schwebt spuerbar von rechts nach links ein, dazu ein leichtes Aufsteigen
   und Aufskalieren, etwas langsamer als ein normales Aufklappen. */
@keyframes espresso-panel-auf {
  from { opacity: 0; transform: translate(56px, 8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.espresso-widget__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.espresso-widget__close:hover { color: var(--text); border-color: var(--line-strong); }

.espresso-widget__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  margin: 6px 0 18px;
  padding-right: 18px;
}

@media (max-width: 760px) {
  .espresso-widget__toggle { width: 66px; height: 66px; }
  .espresso-widget__panel { width: min(280px, 82vw); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}