@font-face {
    font-family: "Fraunces";
    src: url("fraunces.ttf") format("truetype");
    font-weight: 400 800;
    font-display: swap;
  }

  :root {
    /* Flaechen -- Perlweiss, der Regenbogen liegt dahinter */
    --creme:       #FBF8FF;
    --creme-tief:  #F4EFFB;
    --karte:       #FFFFFF;
    --nacht:       #2A1E3B;   /* Pflaumentinte -- Grund des dunklen Abschnitts */
    /* Akzente */
    --puder:       #FFE7F2;
    --rose-hell:   #D6BCEC;
    --rose:        #A96FD0;
    --rose-tief:   #7A3FA8;
    --rose-dunkel: #64308C;
    --gold:        #E08A2E;
    --gold-hell:   #FBF5B6;
    --lavendel:    #DCD2FF;
    /* Text & Linien */
    --tinte:       #2A1E3B;
    --tinte-weich: #5D5070;
    --linie:       #E7DFF2;

    /* Die beiden Regenboegen aus Unverbluemt:
       kraeftig fuer Schrift und Linien, pastell fuer Flaechen. */
    --bogen: linear-gradient(95deg, #E4407D 0%, #EE7F22 18%, #B98A00 36%, #23A35C 56%, #1F86D8 76%, #7A57EE 100%);
    --holo:  linear-gradient(115deg, #FFC9E0, #FFE3BD 22%, #FBF5B6 40%, #C8F2D5 58%, #C5E6FF 76%, #DCD2FF);
    --auf-holo: #2A1E3B;
    /* satte Fassung fuer den dunklen Abschnitt */
    --wasch-satt: conic-gradient(from 30deg, #B01E5B, #B5460A, #86680A, #0E7446, #1B5CB4, #5A36C2, #B01E5B);

    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schatten: 0 22px 60px rgba(42, 30, 59, 0.16);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--creme);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.68;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  /* height:auto ist wichtig -- sonst wirkt das height-Attribut am <img>
     als CSS-Hoehe und setzt jedes Seitenverhaeltnis ausser Kraft. */
  img { display: block; max-width: 100%; height: auto; }
  ::selection { background: #FFD3E6; color: var(--auf-holo); }

  /* ---------- Schimmer: fest hinter allem ----------
     Der Kegelverlauf dreht sich langsam, der Schleier darueber haelt
     die Textspalten ruhig. Beide liegen mit negativem z-index hinter
     dem Inhalt; Abschnitte mit eigener Flaeche decken sie ab. */
  body::before {
    content: ""; position: fixed; inset: -40%; z-index: -2;
    background: conic-gradient(from 30deg at 50% 50%,
      #FFD3E6, #FFE9C9, #FCF8C8, #D6F6E0, #D2EEFF, #E6DDFF, #FFD3E6);
    filter: blur(70px); opacity: 0.8;
    animation: dreh 48s linear infinite;
    will-change: transform;
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(80% 55% at 50% 42%,
      rgba(251, 248, 255, 0.92), rgba(251, 248, 255, 0.62) 62%, rgba(251, 248, 255, 0.38));
  }
  @keyframes dreh { to { transform: rotate(360deg); } }

  /* ---------- Grundraster ---------- */
  .bahn { padding: clamp(56px, 9vh, 104px) 22px; position: relative; }
  .bahn.creme { background: rgba(255, 255, 255, 0.46); }
  .bahn.karte { background: rgba(255, 255, 255, 0.62); }
  .innen { max-width: 1180px; margin: 0 auto; }
  .schmal { max-width: 740px; margin: 0 auto; }
  .mitte { text-align: center; }

  /* ---------- Typografie ---------- */
  h1 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(2.7rem, 7.4vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.022em;
    margin-bottom: 22px;
  }
  /* Fuer Headlines, die ein ganzer Satz sind statt zweier Woerter. */
  h1.lang {
    font-size: clamp(1.9rem, 4.4vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
  }
  h2 {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.9vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -0.014em;
    margin-bottom: 18px;
  }
  h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.7vw, 1.8rem);
    line-height: 1.18;
    margin-bottom: 10px;
  }
  p { color: var(--tinte-weich); margin-bottom: 16px; }
  p:last-child { margin-bottom: 0; }
  .gross { font-size: 1.14rem; }

  .kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rose-tief);
    margin-bottom: 14px;
  }
  .kicker::before {
    content: ""; width: 26px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
  }
  .mitte .kicker::after {
    content: ""; width: 26px; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
  }

  /* Schimmerndes Wort */
  .funkelwort { color: var(--rose-tief); }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .funkelwort {
      background-image: var(--bogen);
      background-size: 220% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: wortglanz 7s ease-in-out infinite;
    }
  }
  @keyframes wortglanz {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: 0% 0; }
  }

  /* ---------- Fortschrittsbalken ---------- */
  .fortschritt {
    position: fixed; top: 0; left: 0; z-index: 60;
    height: 2px; width: 100%;
    transform: scaleX(0); transform-origin: 0 50%;
    background: var(--bogen);
  }

  /* ---------- Kopfzeile ---------- */
  .kopf {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border-bottom: 1px solid transparent;
    padding: 15px 22px;
    transition: border-color 0.3s ease, background 0.3s ease;
  }
  .kopf.gescrollt { border-bottom-color: var(--linie); background: rgba(255, 255, 255, 0.86); }
  .kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .marke {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--serif);
    font-weight: 700; font-size: 1.02rem;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--tinte); text-decoration: none;
  }
  .marke svg { width: 17px; height: 17px; fill: #E4407D; flex: 0 0 auto; }
  .mini-knopf {
    background: var(--rose-tief); color: #FFF7F2;
    text-decoration: none; border-radius: 999px;
    padding: 10px 22px; font-size: 0.9rem; font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .mini-knopf:hover { background: var(--rose-dunkel); transform: translateY(-1px); }

  /* ---------- Knoepfe ---------- */
  .knopf {
    position: relative; overflow: hidden;
    display: inline-block; text-align: center;
    background: var(--rose-tief); color: #FFF7F2; text-decoration: none;
    border-radius: 999px; padding: 19px 44px;
    font-size: 1.07rem; font-weight: 600;
    box-shadow: 0 10px 26px rgba(122, 63, 168, 0.26);
    transition: transform 0.14s ease, background 0.18s ease, box-shadow 0.18s ease;
  }
  .knopf::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
    transform: translateX(-120%);
  }
  .knopf:hover::after { animation: glanzzug 0.85s ease; }
  @keyframes glanzzug { to { transform: translateX(120%); } }
  .knopf:hover { background: var(--rose-dunkel); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(100, 48, 140, 0.34); }
  .knopf:active { transform: translateY(0); }
  .knopf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
  .knopf.breit { display: block; width: 100%; }
  .knopf.hell {
    background: #FFFCF8; color: var(--rose-tief);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  }
  .knopf.hell:hover { background: #fff; color: var(--rose-dunkel); }
  .knopf.rand {
    background: linear-gradient(#fff, #fff) padding-box, var(--bogen) border-box;
    border: 2px solid transparent; color: var(--rose-tief); box-shadow: none;
  }
  .knopf.rand:hover {
    background: linear-gradient(#FCF8FF, #FCF8FF) padding-box, var(--bogen) border-box;
    color: var(--rose-dunkel);
  }
  .knopf-zeile { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .unter-knopf { font-size: 0.9rem; color: var(--tinte-weich); }
  .mitte .knopf-zeile { align-items: center; }

  /* ---------- Funkel-Effekte ---------- */
  .funkel-zone { position: relative; }
  .funken-feld {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none; overflow: hidden;
  }
  .funke {
    position: absolute;
    animation: funkeln 4s ease-in-out infinite;
    opacity: 0;
  }
  .funke svg { width: 100%; height: 100%; display: block; }
  @keyframes funkeln {
    0%, 100%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
    12%        { opacity: 0.95; transform: scale(1) rotate(35deg); }
    30%        { opacity: 0.2; transform: scale(0.65) rotate(75deg); }
    45%        { opacity: 0.8; transform: scale(0.9) rotate(110deg); }
    70%        { opacity: 0; transform: scale(0.35) rotate(150deg); }
  }
  .spur {
    position: fixed; z-index: 70; pointer-events: none;
    animation: spur-aus 760ms ease-out forwards;
  }
  @keyframes spur-aus {
    0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); }
    30%  { opacity: 0.85; transform: translate(-50%, -50%) scale(1) rotate(40deg); }
    100% { opacity: 0; transform: translate(-50%, -140%) scale(0.2) rotate(110deg); }
  }

  /* ---------- Trenner ---------- */
  .trenner {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    max-width: 380px; margin: 0 auto; padding: 6px 22px;
  }
  .trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; }
  .trenner::before { background: linear-gradient(90deg, transparent, var(--linie)); }
  .trenner::after  { background: linear-gradient(90deg, var(--linie), transparent); }
  .trenner svg { width: 15px; height: 15px; fill: #E4407D; flex: 0 0 auto; }

  /* ---------- Hero ---------- */
  .hero { padding-top: clamp(38px, 6vh, 74px); padding-bottom: clamp(50px, 8vh, 96px); overflow: hidden; }
  .hero .innen { position: relative; z-index: 2; }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(30px, 5.4vw, 72px);
    align-items: stretch;
  }
  /* Das Bild fuellt die Spalte aus, deren Hoehe der Text vorgibt.
     Durch position:absolute zaehlt das Bild selbst nicht zur Zeilenhoehe. */
  .hero-bild-huelle { position: relative; min-height: 440px; }
  .hero-bild {
    position: absolute; inset: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--schatten);
  }
  .hero-bild::after {
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    pointer-events: none;
  }
  .hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
  .hero-rahmen {
    position: absolute; inset: -13px;
    border: 1px solid var(--lavendel);
    border-radius: 30px;
    pointer-events: none;
    opacity: 0.75;
  }
  .badge {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.83rem; font-weight: 600;
    color: var(--rose-tief);
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: var(--holo);
    border-radius: 999px; padding: 8px 18px;
    margin-bottom: 22px;
  }
  .badge svg { width: 13px; height: 13px; fill: var(--gold); flex: 0 0 auto; }
  .hero-punkte { list-style: none; margin: 24px 0 30px; }
  .hero-punkte li {
    position: relative; padding-left: 30px; margin-bottom: 10px;
    color: var(--tinte-weich); font-size: 1.02rem;
  }
  .hero-punkte li::before {
    content: ""; position: absolute; left: 3px; top: 0.56em;
    width: 12px; height: 6px;
    border-left: 2px solid var(--rose); border-bottom: 2px solid var(--rose);
    transform: rotate(-45deg);
  }
  .vertrauen {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    margin-top: 34px; padding-top: 22px;
    border-top: 1px solid var(--linie);
    font-size: 0.86rem; color: var(--tinte-weich);
  }
  .vertrauen span { display: inline-flex; align-items: center; gap: 7px; }
  .vertrauen svg { width: 13px; height: 13px; fill: var(--gold); flex: 0 0 auto; }

  /* ---------- Emotionaler Block ---------- */
  .frage-gross {
    font-family: var(--serif);
    font-size: clamp(1.55rem, 3.6vw, 2.25rem);
    line-height: 1.26;
    color: var(--tinte);
    margin-bottom: 26px;
    text-wrap: balance;
  }
  .schluss-satz {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2.7vw, 1.6rem);
    color: var(--rose-tief);
    margin-top: 30px; padding-top: 24px;
    border-top: 1px solid var(--linie);
  }

  /* ---------- Split-Bereiche ---------- */
  .split {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(30px, 5.4vw, 66px);
    align-items: stretch;
  }
  .split.gedreht .bild-spalte { order: 2; }
  .bild-spalte { position: relative; min-height: 400px; }
  .bild-spalte img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 20px;
    box-shadow: var(--schatten);
  }
  /* Bei "Ueber mich" ist der Text kurz, der Ausschnitt also breiter --
     etwas hoeher ansetzen, damit Lauras Gesicht im Bild bleibt. */
  .split.gedreht .bild-spalte img { object-position: center 14%; }
  .bild-spalte .hero-rahmen { inset: -11px; border-radius: 28px; }

  .vorteile { margin-top: 10px; }
  .vorteil {
    display: flex; gap: 16px; margin-bottom: 18px; align-items: flex-start;
    padding-bottom: 18px; border-bottom: 1px solid var(--linie);
  }
  .vorteil:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .vorteil .zeichen {
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--holo);
    display: flex; align-items: center; justify-content: center;
  }
  .vorteil .zeichen svg { width: 17px; height: 17px; fill: var(--rose-tief); }
  .vorteil p { margin: 0; }
  .vorteil b {
    display: block; color: var(--tinte);
    font-family: var(--serif); font-weight: 600; font-size: 1.06rem;
    margin-bottom: 2px;
  }

  /* ---------- Kapitel ---------- */
  /* grid-auto-rows: 1fr laesst alle Kapitel gleich hoch werden – die Hoehe gibt
     das laengste Kapitel vor, nicht das groesste Foto. */
  .kapitel-liste { display: grid; grid-auto-rows: 1fr; gap: clamp(22px, 3.4vw, 34px); margin-top: 46px; }
  .kapitel {
    display: grid; grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--linie);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(42, 30, 59, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .kapitel:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(42, 30, 59, 0.11); }
  .kapitel:nth-child(even) .kap-bild { order: 2; }
  .kap-bild { position: relative; overflow: hidden; min-height: 300px; background: var(--creme-tief); }
  /* Absolut gesetzt, damit die Bildhoehe die Kartenhoehe nicht bestimmt. */
  .kap-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .bild-platz {
    height: 100%; min-height: 280px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; padding: 26px;
    font-size: 0.84rem; color: var(--tinte-weich);
    background:
      repeating-linear-gradient(135deg, rgba(201,146,95,0.05) 0 12px, transparent 12px 24px),
      var(--creme-tief);
  }
  .bild-platz svg { width: 22px; height: 22px; fill: var(--gold); opacity: 0.55; }
  .kap-text { padding: clamp(26px, 3.4vw, 44px); }
  .kap-nr {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--serif);
    font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--rose-tief); margin-bottom: 10px;
  }
  .kap-nr svg { width: 11px; height: 11px; fill: var(--gold); }
  .termin {
    display: inline-block;
    font-size: 0.87rem; font-weight: 600; color: var(--rose-tief);
    background: var(--holo);
    border-radius: 999px; padding: 6px 16px;
    margin-bottom: 16px;
  }
  ul.haken { list-style: none; margin-top: 16px; }
  ul.haken li {
    position: relative; padding-left: 28px; margin-bottom: 9px;
    color: var(--tinte-weich); font-size: 0.98rem;
  }
  ul.haken li::before {
    content: ""; position: absolute; left: 2px; top: 0.56em;
    width: 11px; height: 6px;
    border-left: 2px solid var(--rose); border-bottom: 2px solid var(--rose);
    transform: rotate(-45deg);
  }
  .nachsatz {
    font-size: 0.92rem; font-style: italic;
    margin-top: 18px; padding-top: 15px;
    border-top: 1px solid var(--linie);
  }

  /* ---------- Versprechen (Nacht) ---------- */
  .versprechen-bahn {
    background: var(--nacht);
    color: #F8EDE8;
    overflow: hidden;
  }
  .versprechen-bahn::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse 70% 55% at 22% 12%, rgba(201, 184, 220, 0.20) 0%, transparent 62%),
      radial-gradient(ellipse 60% 50% at 82% 88%, rgba(201, 146, 95, 0.20) 0%, transparent 60%);
    pointer-events: none;
  }
  .versprechen-bahn .innen { position: relative; z-index: 2; }
  .versprechen-bahn .kicker { color: var(--gold-hell); }
  .versprechen-bahn .kicker::before, .versprechen-bahn .kicker::after {
    background: linear-gradient(90deg, transparent, var(--gold-hell));
  }
  .versprechen-bahn h2 { color: #FFFAF6; }
  .versprechen-bahn p { color: rgba(248, 237, 232, 0.86); }
  .versprechen-bahn .knopf.hell { margin-top: 32px; }

  /* ---------- Stimmen ---------- */
  .stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
  .stimme {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--linie);
    border-radius: 18px;
    padding: 28px 26px 24px;
    text-align: left;
    position: relative;
  }
  .stimme .sterne { display: flex; gap: 3px; margin-bottom: 14px; }
  .stimme .sterne svg { width: 14px; height: 14px; fill: var(--gold); }
  .stimme blockquote {
    font-family: var(--serif); font-size: 1.04rem; line-height: 1.5;
    color: var(--tinte); margin-bottom: 16px;
  }
  .stimme figcaption { font-size: 0.86rem; color: var(--tinte-weich); }
  .stimme figcaption b { color: var(--tinte); font-weight: 600; }

  /* ---------- FAQ ---------- */
  details.faq {
    border: 1px solid var(--linie);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    padding: 18px 22px;
    margin-bottom: 10px;
    transition: border-color 0.2s ease;
  }
  details.faq[open] { border-color: var(--rose-hell); }
  details.faq summary {
    cursor: pointer; list-style: none;
    font-family: var(--serif);
    font-weight: 600; font-size: 1.06rem; color: var(--tinte);
    display: flex; justify-content: space-between; gap: 18px; align-items: center;
  }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary::after {
    content: ""; flex: 0 0 auto;
    width: 10px; height: 10px;
    border-right: 2px solid var(--rose-tief); border-bottom: 2px solid var(--rose-tief);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s ease;
  }
  details.faq[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
  details.faq summary:focus-visible { outline: 2px solid var(--rose-tief); outline-offset: 4px; border-radius: 4px; }
  details.faq p { margin-top: 12px; }

  /* ---------- Preise ---------- */
  .knappheit {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.92rem; font-weight: 600; color: var(--rose-tief);
    background: var(--holo);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px; padding: 9px 20px;
    margin-bottom: 34px;
  }
  .knappheit .punkt {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rose-tief); flex: 0 0 auto;
    animation: pulsen 2.4s ease-in-out infinite;
  }
  @keyframes pulsen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(228, 64, 125, 0.45); }
    60%      { box-shadow: 0 0 0 7px rgba(228, 64, 125, 0); }
  }
  .preis-karten {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 22px; margin-top: 12px; text-align: left;
    max-width: 880px; margin-left: auto; margin-right: auto;
  }
  /* Nur eine Preiskarte: mittig und schmaler, sonst wirkt sie verloren. */
  .preis-karten.einzeln { grid-template-columns: 1fr; max-width: 460px; }
  /* Fehlt die Zusatzzeile, braucht die Liste den Abstand selbst. */
  .preis .betrag + ul { margin-top: 22px; }
  .preis {
    border: 1px solid var(--linie);
    border-radius: 20px;
    padding: 36px 32px 32px;
    background: var(--karte);
    display: flex; flex-direction: column;
    position: relative;
  }
  .preis.haupt {
    background: var(--rose-tief);
    border-color: var(--rose-tief);
    color: #FFF7F2;
    box-shadow: 0 20px 50px rgba(122, 63, 168, 0.28);
  }
  .preis.haupt .label, .preis.haupt li, .preis.haupt .zusatz { color: rgba(255, 247, 242, 0.9); }
  .preis.haupt .betrag { color: #fff; }
  .preis.haupt li::before { background: var(--gold-hell); }
  .preis .fahne {
    position: absolute; top: -13px; left: 32px;
    background: var(--holo); color: #241833;
    font-size: 0.71rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    border-radius: 999px; padding: 5px 15px;
  }
  .preis .label {
    font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--rose-tief); margin-bottom: 14px;
  }
  .preis .betrag {
    font-family: var(--serif);
    font-weight: 700; font-size: 2.7rem; line-height: 1.03;
    margin-bottom: 5px;
  }
  .preis .zusatz { font-size: 0.9rem; color: var(--tinte-weich); margin-bottom: 24px; }
  .preis ul { list-style: none; margin-bottom: 28px; }
  .preis li {
    position: relative; padding-left: 22px; margin-bottom: 10px;
    font-size: 0.95rem; color: var(--tinte-weich);
  }
  .preis li::before {
    content: ""; position: absolute; left: 2px; top: 0.62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--rose-hell);
  }
  .preis .knopf { margin-top: auto; }
  .sicher {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 0.88rem; color: var(--tinte-weich);
    margin: 26px auto 0; max-width: 560px; text-align: left;
  }
  .sicher svg { width: 14px; height: 14px; fill: var(--gold); flex: 0 0 auto; }

  /* ---------- Sticky-CTA ---------- */
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--linie);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: none;
    transform: translateY(115%);
    transition: transform 0.28s ease;
  }
  .sticky-cta.sichtbar { transform: translateY(0); }
  .sticky-cta .knopf { display: block; width: 100%; padding: 16px; box-shadow: none; }

  /* ---------- Fuss ---------- */
  footer {
    background: rgba(255, 255, 255, 0.50);
    text-align: center; padding: 42px 22px 48px;
    font-size: 0.88rem; color: var(--tinte-weich);
    border-top: 1px solid var(--linie);
  }
  footer a { color: var(--tinte-weich); }
  footer a:hover { color: var(--rose-tief); }
  footer .marke-klein {
    font-family: var(--serif);
    letter-spacing: 0.2em; text-transform: uppercase;
    font-size: 0.78rem; margin-top: 14px; display: block; color: var(--tinte);
  }

  .platzhalter {
    background: rgba(122, 87, 238, 0.14);
    border-radius: 4px; padding: 1px 6px;
  }

  /* ---------- Einblend-Animation ---------- */
  .js .zeigen { opacity: 0; transform: translateY(22px); }
  .js .zeigen.sichtbar {
    opacity: 1; transform: none;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ---------- Responsiv ---------- */
  @media (max-width: 920px) {
    .hero-grid, .split, .kapitel, .preis-karten, .stimmen { grid-template-columns: 1fr; }
    .split.gedreht .bild-spalte, .kapitel:nth-child(even) .kap-bild { order: 0; }
    /* Einspaltig gibt es keine Textspalte daneben, an der sich das Bild
       ausrichten koennte -- deshalb festes Verhaeltnis, gedeckelt auf gut
       die halbe Bildschirmhoehe, damit kein Bild den Schirm fuellt. */
    .hero-bild-huelle, .bild-spalte { min-height: 0; }
    /* Einspaltig: Bild wieder im Fluss, festes Verhaeltnis statt Spaltenhoehe */
    .kapitel-liste { grid-auto-rows: auto; }
    .kap-bild { min-height: 0; aspect-ratio: 4 / 3; }
    .kap-bild img { position: static; }
    .hero-bild { position: static; }
    .hero-bild img, .bild-spalte img {
      position: static;
      width: 100%; height: auto;
      aspect-ratio: 4 / 5;
      max-height: 56vh; max-height: 56svh;
      object-fit: cover;
    }
    .kap-bild img, .bild-platz { min-height: 230px; max-height: 320px; }
    .sticky-cta { display: block; }
    body { padding-bottom: 80px; }
    .kopf .mini-knopf { display: none; }
    .hero-rahmen { display: none; }
  }
  @media (max-width: 580px) {
    body { font-size: 16px; }
    .bahn { padding: 46px 18px; }
    .kap-text { padding: 26px 22px 28px; }
    .preis { padding: 30px 24px 28px; }
    .knopf { padding: 17px 30px; width: 100%; }
    .knopf-zeile { align-items: stretch; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
    .js .zeigen { opacity: 1; transform: none; }
    .funken-feld, .spur { display: none; }
  }

  /* ================= Kacheln =================
     Gebraucht von der Startseite und der Creative-Circle-Seite. */
  .kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px; margin-top: 38px;
  }
  .kachel {
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--linie);
    border-radius: 20px;
    padding: 30px 28px 28px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .kachel:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(42, 30, 59, 0.11); }
  .kachel.haupt { background: var(--rose-tief); border-color: var(--rose-tief); color: #FFF7F2; }
  .kachel.haupt .kachel-label { color: rgba(255, 247, 242, 0.85); }
  .kachel.haupt h3 { color: #fff; }
  .kachel.haupt p { color: rgba(255, 247, 242, 0.88); }
  .kachel-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--rose-tief); margin-bottom: 12px;
  }
  .kachel-label svg { width: 13px; height: 13px; fill: var(--gold); flex: 0 0 auto; }
  .kachel .knopf { margin-top: auto; align-self: flex-start; }
  .hinweis {
    margin-top: 44px; padding-top: 26px;
    border-top: 1px solid var(--linie);
    font-size: 0.95rem; font-style: italic;
    color: var(--tinte-weich); text-align: center;
  }

  /* ================= Logoleiste „Bekannt aus" ================= */
  .logoband { text-align: center; }
  .logoband .titel {
    font-family: var(--serif);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--tinte-weich); margin-bottom: 20px;
  }
  .logoband img {
    max-width: min(920px, 100%); margin: 0 auto;
    border-radius: 14px;
  }

  /* ================= Durchgestrichener Vorher-Preis ================= */
  .preis .statt {
    font-family: var(--serif); font-weight: 500;
    font-size: 0.5em; text-decoration: line-through;
    opacity: 0.55; margin-right: 0.35em;
    vertical-align: 0.28em;
  }

  /* ================= Lange Stimme über die volle Breite ================= */
  .stimmen.flexibel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .stimme.gross { grid-column: 1 / -1; }
  .stimme.gross blockquote { font-size: 1.02rem; }
  .stimme.gross blockquote p { margin-bottom: 12px; font-family: inherit; color: inherit; }
  .stimme.gross blockquote p:last-child { margin-bottom: 0; }

  /* ================= Funkelwort in kleinem Text =================
     Der helle Teil des Regenbogens verschwindet auf Fliesstextgroesse.
     Hier deshalb eine durchweg dunkle Fassung, die lesbar bleibt. */
  p .funkelwort, li .funkelwort, blockquote .funkelwort,
  .kachel .funkelwort, figcaption .funkelwort, .unter-knopf .funkelwort {
    background-image: linear-gradient(95deg,
      #C2185B 0%, #B45309 22%, #15803D 48%, #1D4ED8 72%, #6D28D9 100%);
  }
  /* In der dunklen Bahn andersherum: dort braucht es die helle Fassung. */
  .versprechen-bahn p .funkelwort {
    background-image: linear-gradient(95deg,
      #FF9CC2 0%, #FFB877 20%, #FFE27F 40%, #8BE8B2 58%, #8ACCFF 76%, #C3AEFF 100%);
  }

  /* ================= Bildbanner über die volle Breite =================
     Foto als eigenes <img>, damit es faul geladen werden kann; darüber
     ein Schleier, sonst verliert die weisse Schrift den Halt. */
  .banner { position: relative; overflow: hidden; color: #fff; }
  .banner > .banner-bild {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  .banner::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(rgba(28, 16, 48, 0.46), rgba(28, 16, 48, 0.62));
  }
  .banner .innen { position: relative; z-index: 2; }
  .banner h2 { color: #fff; }
  .banner p { color: rgba(255, 255, 255, 0.90); }
  .banner .kicker { color: var(--gold-hell); }
  .banner .kicker::before, .banner .kicker::after {
    background: linear-gradient(90deg, transparent, var(--gold-hell));
  }
  .banner .stimme {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .banner .stimme blockquote { color: #fff; }
  .banner .stimme figcaption { color: rgba(255, 255, 255, 0.80); }
  .banner .stimme figcaption b { color: #fff; }

  /* ================= Die drei Live-Calls =================
     Strichzeichnung statt Kasten -- so steht es auch im Original. */
  .nights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(30px, 4.2vw, 50px);
    margin-top: 44px; text-align: center;
  }
  .night img {
    width: clamp(110px, 14vw, 150px); height: auto;
    margin: 0 auto 18px;
  }
  .night h3 { margin-bottom: 10px; }
  .night p { font-size: 0.98rem; }

  /* ================= Portraitfoto in einer Stimme ================= */
  .stimme .avatar {
    width: 62px; height: 62px; border-radius: 50%;
    object-fit: cover; margin-bottom: 14px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
  }

  /* ================= Video ================= */
  .video-huelle {
    position: relative; border-radius: 20px; overflow: hidden;
    box-shadow: var(--schatten);
  }
  .video-huelle video, .video-huelle > img { width: 100%; height: auto; display: block; }

  /* ================= Zwei überlappende Bilder ================= */
  .collage { position: relative; padding-bottom: 9%; }
  .collage .haupt { width: 84%; border-radius: 20px; box-shadow: var(--schatten); }
  .collage .neben {
    position: absolute; right: 0; bottom: 0; width: 54%;
    border-radius: 16px; border: 6px solid var(--karte);
    box-shadow: 0 16px 40px rgba(42, 30, 59, 0.22);
  }
  @media (max-width: 560px) {
    .collage .haupt { width: 100%; }
    .collage .neben { position: static; width: 72%; margin: -14% 0 0 auto; }
  }

  /* ================= Hero-Bild, das nicht beschnitten werden darf =================
     Ein Schriftzug vertraegt keinen Zuschnitt -- hier behaelt das Bild
     sein eigenes Seitenverhaeltnis statt die Spaltenhoehe zu fuellen. */
  .hero-bild-huelle.frei { min-height: 0; align-self: center; }
  .hero-bild-huelle.frei .hero-bild { position: static; box-shadow: var(--schatten-klein, 0 12px 34px rgba(42,30,59,0.14)); }
  .hero-bild-huelle.frei .hero-bild img { height: auto; object-fit: contain; }

  /* Steuerhinweis direkt unter dem Preis -- klein, aber lesbar */
  .preis .steuer {
    font-size: 0.8rem; letter-spacing: 0.01em;
    opacity: 0.78; margin: -2px 0 10px;
  }

  /* ---------- Impressum & Datenschutz ---------- */
  .rechtstext { padding-top: clamp(24px, 6vh, 64px); }
  .rechtstext h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-bottom: 36px; }
  .rechtstext h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.25;
    margin: 40px 0 12px;
  }
  .rechtstext ul { margin: 0 0 16px 1.2em; color: var(--tinte-weich); }
  .rechtstext li { margin-bottom: 4px; }
  .rechtstext a { color: var(--rose-tief); overflow-wrap: anywhere; }
  .rechtstext strong { color: var(--tinte); }
  .rechtstext .stand { margin-top: 40px; font-size: 0.9rem; }

  /* ---------- Kurze Seiten: Audio-Freebies, Creative-Circle-Danke ---------- */
  .kurzseite { min-height: 72svh; }
  .kurzseite h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); margin-bottom: 18px; }
  .spieler-karte {
    margin: 36px auto 30px; max-width: 560px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--linie); border-radius: 24px;
    padding: 28px 26px 30px;
    box-shadow: 0 22px 60px rgba(42, 30, 59, 0.12);
  }
  .spieler-hinweis { font-style: italic; margin-bottom: 14px; }
  .spieler-karte audio { width: 100%; margin-bottom: 20px; accent-color: var(--rose-tief); }
  .spieler.eigen audio { display: none; }
  .spieler.eigen {
    display: flex; align-items: center; gap: 18px;
    background: var(--perl, #FBF8FF); border: 1px solid var(--linie);
    border-radius: 999px; padding: 10px 22px 10px 10px; margin-bottom: 22px;
  }
  .spieler-knopf {
    flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center;
    background: var(--holo); color: var(--auf-holo);
    box-shadow: 0 8px 22px rgba(122, 63, 168, 0.24);
    transition: transform 0.14s ease, filter 0.15s ease;
  }
  .spieler-knopf:hover { transform: scale(1.05); filter: brightness(1.05); }
  .spieler-knopf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
  .spieler-knopf svg { width: 24px; height: 24px; fill: currentColor; }
  .spieler-knopf .icon-pause, .spieler.spielt .icon-play { display: none; }
  .spieler.spielt .icon-pause { display: block; }
  .spieler.spielt .spieler-knopf { animation: puls 2.4s ease-in-out infinite; }
  @keyframes puls { 50% { box-shadow: 0 8px 30px rgba(122, 63, 168, 0.42); } }
  .spieler-spur { flex: 1 1 auto; min-width: 0; }
  .spieler-regler {
    --anteil: 0%;
    -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
    background: transparent; cursor: pointer; margin: 0; display: block;
  }
  .spieler-regler::-webkit-slider-runnable-track {
    height: 6px; border-radius: 99px;
    background: linear-gradient(90deg, #E4407D, #EE7F22 20%, #B98A00 40%, #23A35C 60%, #1F86D8 80%, #7A57EE) 0 0 / 100% 100% no-repeat;
    background-color: var(--linie);
    background-size: var(--anteil) 100%;
  }
  .spieler-regler::-moz-range-track { height: 6px; border-radius: 99px; background: var(--linie); }
  .spieler-regler::-moz-range-progress {
    height: 6px; border-radius: 99px;
    background: linear-gradient(90deg, #E4407D, #EE7F22 20%, #B98A00 40%, #23A35C 60%, #1F86D8 80%, #7A57EE);
  }
  .spieler-regler::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; margin-top: -5px;
    background: #fff; border: 2px solid var(--rose-tief); box-shadow: 0 2px 6px rgba(42, 30, 59, 0.2);
  }
  .spieler-regler::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--rose-tief);
  }
  .spieler-regler:focus-visible { outline: 2px solid var(--rose-tief); outline-offset: 4px; border-radius: 4px; }
  .spieler-zeit {
    display: flex; justify-content: space-between; margin-top: 4px;
    font-size: 0.82rem; color: var(--tinte-weich); font-variant-numeric: tabular-nums;
  }
  .spieler-download { display: inline-flex; align-items: center; gap: 10px; }
  .spieler-download svg { width: 20px; height: 20px; }
  @media (max-width: 480px) {
    .spieler-karte { padding: 22px 16px 24px; }
    .spieler.eigen { gap: 12px; padding-right: 16px; }
    .spieler-knopf { width: 50px; height: 50px; }
  }
  .schritte-karte { text-align: left; }
  .schritte-karte ol { margin: 6px 0 14px 1.2em; color: var(--tinte-weich); }
  .schritte-karte li { margin-bottom: 12px; padding-left: 4px; }
  .schritte-karte li::marker { color: var(--rose-tief); font-family: var(--serif); font-weight: 600; }
  .schritte-karte b { color: var(--tinte); }
  .schritte-karte .klein { font-size: 0.9rem; margin: 0; }
  .schritte-karte a, .kurzseite .klein a { color: var(--rose-tief); }
  .anleitung { font-style: italic; max-width: 460px; margin: 0 auto 26px; }
  .gruss { font-family: var(--serif); font-weight: 600; color: var(--tinte); font-size: 1.15rem; }

  /* ---------- Workshop-LP: Hero mittig mit Video ---------- */
  .hero-mitte .hero-kopf { max-width: 820px; margin: 0 auto; }
  .hero-mitte h1 { font-size: clamp(2.5rem, 6.6vw, 4.6rem); line-height: 1.02; margin-bottom: 20px; }
  .hero-mitte .gross { max-width: 640px; margin-left: auto; margin-right: auto; }
  .beweis {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
    font-size: 0.95rem; font-weight: 600; color: var(--tinte); margin: 6px 0 0;
  }
  .beweis .sterne { display: inline-flex; gap: 2px; }
  .beweis .sterne svg { width: 15px; height: 15px; fill: var(--gold); }
  .hero-video { position: relative; max-width: 880px; margin: clamp(30px, 5vh, 48px) auto 34px; }
  .hero-video.hochformat { max-width: 380px; }
  /* Ohne Video steht das Vorschaubild im selben Rahmen wie spaeter das Video */
  .hero-video.nur-bild .video-huelle > img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; }
  .hero-video.nur-bild.hochformat .video-huelle > img { aspect-ratio: 9 / 16; }
  .hero-video video { background: #1c1427; }

  /* ---------- Stimmen mit Projektfoto oder Video ---------- */
  .stimme.mit-bild { padding-top: 0; overflow: hidden; }
  .stimme .projekt {
    display: block; width: calc(100% + 2 * var(--stimme-rand, 26px)); max-width: none;
    margin: 0 calc(-1 * var(--stimme-rand, 26px)) 20px;
    aspect-ratio: 4 / 5; object-fit: cover; background: #1c1427;
  }

  /* ---------- Zwischen-Button ---------- */
  .zwischen-cta { padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(40px, 6vh, 64px); }
  .zwischen-cta .innen { display: flex; flex-direction: column; align-items: center; }
  .zwischen-cta .kicker { margin-bottom: 18px; }
  .zwischen-cta .unter-knopf { margin: 12px 0 0; }

  /* ---------- Angebot mit Foto ---------- */
  .angebot.mit-bild {
    display: grid; grid-template-columns: 0.9fr 1fr; gap: clamp(28px, 5vw, 64px);
    align-items: center; max-width: 960px; margin: 12px auto 0;
  }
  .angebot.mit-bild .preis-karten { margin: 0; max-width: none; }
  .angebot-bild { position: relative; }
  .angebot-bild img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
    border-radius: 22px; box-shadow: var(--schatten); display: block;
  }
  @media (max-width: 920px) {
    .angebot.mit-bild { grid-template-columns: 1fr; max-width: 460px; }
    .angebot-bild img { aspect-ratio: 1 / 1; }
  }
  @media (max-width: 580px) {
  }
  /* Häkchen-Punkte unter dem Hero-Video: am Desktop nebeneinander */
  .hero-punkte-zeile {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px;
    max-width: 880px; margin: 0 auto 30px; text-align: left;
  }
  .hero-punkte-zeile li { margin-bottom: 0; }
  @media (max-width: 580px) {
    .hero-punkte-zeile { flex-direction: column; align-items: flex-start; width: fit-content; }
  }
  /* Querformat-Video: festes 16:9, damit auch ein hochkant Vorschaubild sauber zugeschnitten wird */
  .hero-video:not(.nur-bild) video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
  .hero-video.hochformat video { aspect-ratio: 9 / 16; }

  /* ---------- Pinnwand: Stimmen & Ergebnisse ----------
     Mauerwerk aus Spalten; jede Karte leicht verdreht und versetzt,
     damit es nach Pinnwand aussieht und nicht nach Raster. */
  .pinnwand {
    columns: 3 250px; column-gap: 26px;
    max-width: 1060px; margin: 44px auto 0; padding: 6px 4px 10px;
  }
  .pin {
    break-inside: avoid; display: block; position: relative;
    margin: 0 0 28px;
    background: #fff; border: 1px solid var(--linie); border-radius: 16px;
    padding: 22px 22px 20px;
    box-shadow: 0 14px 34px rgba(42, 30, 59, 0.10);
    transform: rotate(var(--dreh, 0deg)) translateY(var(--hoch, 0px));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .pin:nth-child(5n+1) { --dreh: -1.8deg; }
  .pin:nth-child(5n+2) { --dreh: 1.4deg;  --hoch: 12px; }
  .pin:nth-child(5n+3) { --dreh: -0.7deg; --hoch: -6px; }
  .pin:nth-child(5n+4) { --dreh: 2.1deg; }
  .pin:nth-child(5n)   { --dreh: -1.2deg; --hoch: 8px; }
  .pin:hover { --dreh: 0deg; z-index: 2; box-shadow: 0 22px 48px rgba(42, 30, 59, 0.18); }
  /* Die Einblend-Animation darf die Drehung nicht ueberschreiben */
  .js .pin.zeigen { transform: rotate(var(--dreh, 0deg)) translateY(calc(var(--hoch, 0px) + 22px)); }
  .js .pin.zeigen.sichtbar { transform: rotate(var(--dreh, 0deg)) translateY(var(--hoch, 0px)); }

  /* Fotos als Polaroid: weißer Rand, Holo-Klebestreifen oben */
  .pin.mit-bild { padding: 12px 12px 18px; }
  .pin.mit-bild::before {
    content: ""; position: absolute; top: -11px; left: 50%; width: 88px; height: 24px;
    transform: translateX(-50%) rotate(-3deg);
    background: var(--holo); opacity: 0.82; border-radius: 3px;
    box-shadow: 0 2px 6px rgba(42, 30, 59, 0.10); z-index: 1;
  }
  .pin:nth-child(even).mit-bild::before { transform: translateX(-30%) rotate(4deg); }
  .pin .projekt {
    display: block; width: 100%; height: auto; border-radius: 8px;
    margin-bottom: 14px; background: #1c1427;
    /* Fester Platz vor dem Laden: sonst wandert beim Scrollen alles darunter. */
    aspect-ratio: 3 / 4; object-fit: cover;
  }
  .pin:nth-child(3n+2) .projekt { aspect-ratio: 4 / 5; }
  .pin:nth-child(4n+3) .projekt { aspect-ratio: 1 / 1; }
  .pin.nur-bild .projekt { margin-bottom: 10px; }
  .pin.mit-bild .sterne, .pin.mit-bild blockquote, .pin.mit-bild figcaption { padding: 0 8px; }
  .pin.nur-bild figcaption { text-align: center; font-family: var(--serif); font-style: italic; }
  .pin .sterne { display: flex; gap: 3px; margin-bottom: 12px; }
  .pin .sterne svg { width: 14px; height: 14px; fill: var(--gold); }
  .pin blockquote {
    font-family: var(--serif); font-size: 1.08rem; line-height: 1.45;
    color: var(--tinte); margin-bottom: 14px;
  }
  .pin figcaption { font-size: 0.86rem; color: var(--tinte-weich); }
  .pin figcaption b { color: var(--tinte); font-weight: 600; }
  @media (max-width: 580px) {
    .pinnwand { columns: 1; max-width: 400px; padding: 6px 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pin { transition: none; }
  }
  .dateihinweis { margin: 12px 0 0; font-size: 0.86rem; color: var(--tinte-weich); }

  /* Foto auf einer Download-Seite */
  .download-bild { position: relative; max-width: 380px; margin: 34px auto 6px; }
  .download-bild img {
    width: 100%; height: auto; border-radius: 20px;
    box-shadow: var(--schatten); display: block;
  }

  /* ---------- Einwilligung für Werbe-Cookies ---------- */
  .einwilligung {
    position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px;
    max-width: 460px; margin: 0 auto;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--linie); border-radius: 20px;
    padding: 22px 24px 20px;
    box-shadow: 0 22px 60px rgba(42, 30, 59, 0.22);
    transform: translateY(140%); transition: transform 0.35s ease;
  }
  .einwilligung.sichtbar { transform: translateY(0); }
  .einwilligung p { font-size: 0.92rem; line-height: 1.55; margin-bottom: 16px; }
  .einwilligung a { color: var(--rose-tief); }
  .einwilligung-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
  .einwilligung .knopf { flex: 1 1 150px; padding: 13px 18px; font-size: 0.95rem; box-shadow: none; }
  @media (max-width: 560px) {
    .einwilligung { bottom: 96px; }
  }

  /* Am Handy fuehrt der mitlaufende Balken zum Kauf – die Kopfzeile
     kostet dort nur Platz oberhalb der Falz. */
  @media (max-width: 580px) {
    .kopf { display: none; }
  }

  /* Kleine Vertrauenszeile unter dem Hero */
  .hero-vertrauen {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    font-size: 0.9rem; color: var(--tinte-weich); margin: 18px auto 0;
  }
  .hero-vertrauen svg { width: 13px; height: 13px; fill: var(--gold); flex: 0 0 auto; }

  /* ---------- Für wen ist das (Qualifizieren) ---------- */
  .fuer-wen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
  .fuer-wen .spalte {
    background: rgba(255, 255, 255, 0.72); border: 1px solid var(--linie);
    border-radius: 20px; padding: 26px 26px 22px;
  }
  .fuer-wen h3 { font-size: 1.05rem; margin-bottom: 14px; }
  .fuer-wen ul { list-style: none; }
  .fuer-wen li {
    position: relative; padding-left: 28px; margin-bottom: 10px;
    color: var(--tinte-weich); font-size: 1rem;
  }
  .fuer-wen .ja li::before {
    content: ""; position: absolute; left: 4px; top: 0.5em;
    width: 11px; height: 6px;
    border-left: 2px solid var(--rose-tief); border-bottom: 2px solid var(--rose-tief);
    transform: rotate(-45deg);
  }
  .fuer-wen .nein li::before {
    content: ""; position: absolute; left: 6px; top: 0.72em;
    width: 11px; height: 2px; background: var(--tinte-weich); opacity: 0.5;
  }
  .fuer-wen .nein .spalte, .fuer-wen .nein { background: transparent; }
  @media (max-width: 760px) { .fuer-wen { grid-template-columns: 1fr; } }

  /* ================= Sternennacht =================
     Zweiter Hausstil aus den Karussells: Nachtgrund statt Perlweiss,
     Nebel in Violett und Petrol, Sternenstaub, Gold statt Regenbogen.
     Wird ueber die Klasse .nacht-seite am <body> eingeschaltet, damit
     eine einzelne Seite (Edinburgh-Guide) anders aussehen kann als der Rest. */
  .nacht-seite {
    --tinte: #F3EEFF;
    --tinte-weich: #C9C1E3;
    --linie: rgba(223, 178, 106, 0.30);
    background: #171331;
    color: #F3EEFF;
  }
  /* Der drehende Regenbogen weicht dem stehenden Nebel. */
  .nacht-seite::before {
    inset: 0;
    background:
      radial-gradient(62% 46% at 22% 16%, rgba(90, 60, 160, 0.60), transparent 70%),
      radial-gradient(54% 44% at 82% 80%, rgba(30, 110, 120, 0.45), transparent 70%);
    filter: blur(50px);
    opacity: 1;
    animation: none;
  }
  /* Der helle Schleier wird zum Sternenstaub. */
  .nacht-seite::after {
    opacity: 0.9;
    background:
      radial-gradient(1.4px 1.4px at 12% 18%, #fff 60%, transparent 62%),
      radial-gradient(1px 1px at 32% 64%, #fff 60%, transparent 62%),
      radial-gradient(1.6px 1.6px at 71% 23%, #DFB26A 60%, transparent 62%),
      radial-gradient(1.1px 1.1px at 86% 58%, #fff 60%, transparent 62%),
      radial-gradient(1.3px 1.3px at 54% 86%, #DFB26A 60%, transparent 62%),
      radial-gradient(1px 1px at 22% 44%, #fff 60%, transparent 62%),
      radial-gradient(1.2px 1.2px at 64% 9%, #fff 60%, transparent 62%),
      radial-gradient(1.5px 1.5px at 9% 80%, #fff 60%, transparent 62%),
      radial-gradient(1px 1px at 92% 90%, #DFB26A 60%, transparent 62%),
      radial-gradient(1.1px 1.1px at 78% 41%, #fff 60%, transparent 62%),
      radial-gradient(1px 1px at 47% 56%, #fff 60%, transparent 62%),
      radial-gradient(1.2px 1.2px at 40% 30%, #DFB26A 60%, transparent 62%);
  }

  .nacht-seite .kopf { background: rgba(23, 19, 49, 0.66); }
  .nacht-seite .kopf.gescrollt {
    background: rgba(23, 19, 49, 0.90);
    border-bottom-color: rgba(223, 178, 106, 0.30);
  }
  .nacht-seite .marke { color: #F3EEFF; }
  .nacht-seite .marke svg { fill: #E8C77A; }
  .nacht-seite h1, .nacht-seite h2, .nacht-seite h3 { color: #F3EEFF; }
  .nacht-seite h1 { font-size: clamp(2.3rem, 5.8vw, 3.9rem); line-height: 1.02; }
  .nacht-seite p { color: #C9C1E3; }
  .nacht-seite .kicker { color: #DFB26A; }
  .nacht-seite .kicker::before { background: linear-gradient(90deg, transparent, #DFB26A); }
  .nacht-seite .mitte .kicker::after { background: linear-gradient(90deg, #DFB26A, transparent); }

  /* Betontes Wort: Gold statt Regenbogen, der Schimmer bleibt. */
  .nacht-seite .funkelwort {
    color: #E8C77A;
    background-image: linear-gradient(95deg, #DFB26A, #FBF0C8 45%, #E8C77A);
  }

  /* Ornament: goldener Stern zwischen zwei auslaufenden Regenbogenlinien. */
  .ornament {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin: 24px 0 2px;
  }
  .ornament::before, .ornament::after {
    content: ""; height: 1.5px; width: clamp(56px, 16vw, 104px);
    background: linear-gradient(90deg, transparent, #F7D9E6, #FBF0C8, #CDEFD9, #C8E4FF, #DCCFFF, transparent);
  }
  .ornament svg { width: 15px; height: 15px; fill: #DFB26A; }

  /* Was im Guide steckt, als Reihe kleiner Marken. */
  .guide-liste {
    list-style: none; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 10px; margin: 26px 0 0;
  }
  .guide-liste li {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--serif); font-size: 0.95rem; color: #F3EEFF;
    border: 1px solid rgba(223, 178, 106, 0.42); border-radius: 999px;
    padding: 9px 18px; background: rgba(255, 250, 246, 0.05);
  }
  .guide-liste li::before { content: "\2726"; color: #E8C77A; font-size: 0.78rem; }

  .nacht-seite .download-bild { max-width: 420px; }
  .nacht-seite .hero-rahmen { border-color: rgba(223, 178, 106, 0.32); }
  .nacht-seite .download-bild img {
    border: 1px solid rgba(223, 178, 106, 0.38);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
  }
  .nacht-seite .spieler-karte {
    background: rgba(255, 250, 246, 0.055);
    border: 1px solid rgba(255, 250, 246, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  /* Knopf glasig mit weissem Rand statt Holo-Fuellung. */
  .nacht-seite .knopf.hell {
    background: rgba(255, 255, 255, 0.10);
    color: #FFF7F2;
    border: 1.5px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .nacht-seite .knopf.hell:hover {
    background: rgba(255, 255, 255, 0.19);
    color: #FFFDFB;
  }
  .nacht-seite .dateihinweis { color: #9C94B8; }
  .nacht-seite .gruss { color: #E8C77A; }
  .nacht-seite footer {
    background: rgba(23, 19, 49, 0.55);
    border-top-color: rgba(223, 178, 106, 0.30);
    color: #C9C1E3;
  }
  .nacht-seite footer a { color: #C9C1E3; }
  .nacht-seite footer a:hover { color: #E8C77A; }
  .nacht-seite footer .marke-klein { color: #DFB26A; }
  .nacht-seite ::selection { background: rgba(232, 199, 122, 0.35); color: #FFFDFB; }