/* WedPlanning · Erfahrungen · neue Gestaltung „Gästebuch“ vom 28.10.2026
   Aufgeschlagenes Gästebuch: links die Titelseite mit angeklammerter Notiz, rechts drei Einträge mit
   leerer Unterschriftszeile. Auf schmalen Bildschirmen eine einzelne Buchseite.
   Nur #kundenstimmen wird gestaltet; neue Klassen beginnen mit „gb-“. Nach den vorhandenen
   Landingpage-Stilen laden. Schriften stellt die Seite bereit, in der Vorschau vorschau.css. */
#kundenstimmen {
  --gb-paper: #fcf8f5;
  --gb-ink: #40323a;
  --gb-muted: #6a5460;
  --gb-berry: #79364c;
  --gb-deep: #542638;
  --gb-page: #fffdfa;
  --gb-page-2: #fbf3ee;
  --gb-gutter: #ead8d4;
  --gb-rule: rgba(121, 54, 76, .15);
  --gb-display: Cormorant, Georgia, serif;
  --gb-body: Manrope, "Segoe UI", sans-serif;
  /* Abstand zwischen der Unterkante der dunklen Demo-Bühne und diesem Abschnitt (dort margin-bottom).
     Die Lichterkette beginnt genau an der Bühnenkante. */
  --gb-bridge: 40px;
  box-sizing: border-box;
  position: relative;
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
  padding: 116px 0 120px;
  color: var(--gb-ink);
  background: var(--gb-paper);
  font: 400 16px/1.65 var(--gb-body);
  -webkit-font-smoothing: antialiased;
}
#kundenstimmen *, #kundenstimmen *::before, #kundenstimmen *::after { box-sizing: border-box; }
#kundenstimmen :is(h2, h3, p) { margin: 0; }
#kundenstimmen :is(h2, h3) { color: inherit; font-family: var(--gb-display); font-weight: 500; font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
#kundenstimmen p { text-wrap: pretty; }
#kundenstimmen svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Lichterkette als Brücke: hängt an der Unterkante der Demo-Bühne und leuchtet über dem Gästebuch,
   darunter ein warmer Schein. Rein dekorativ. */
#kundenstimmen::before { content: ""; position: absolute; z-index: 0; top: calc(-1 * var(--gb-bridge)); left: 50%; width: min(100%, 1100px); height: 300px; translate: -50% 0; background: radial-gradient(50% 62% at 50% 0, rgba(255, 206, 150, .26), rgba(255, 206, 150, .08) 55%, transparent 76%); pointer-events: none; }
#kundenstimmen .gb-lights { position: absolute; z-index: 1; top: calc(-1 * var(--gb-bridge) - 8px); left: 0; width: 100%; height: auto; pointer-events: none; }
#kundenstimmen .gb-lights--small { display: none; }
#kundenstimmen .gb-wire { fill: none; stroke: #c4a0ad; stroke-width: 1.4; stroke-dasharray: 1; }
#kundenstimmen .gb-cap { stroke: #a8838f; stroke-width: 3; stroke-linecap: butt; }
#kundenstimmen .gb-glass { fill: #ffe7c4; stroke: #e6b27a; stroke-width: 1; }
#kundenstimmen .gb-halo { fill: url(#gb-glow); stroke: none; }
#kundenstimmen .gb-lights--small .gb-halo { fill: url(#gb-glow-s); }

/* Buch: Einband in Beere, darauf zwei Seiten mit Falz in der Mitte und Lesebändchen */
#kundenstimmen .gb-book {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1080px; margin: 0 auto; padding: 14px; border-radius: 20px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 5px), linear-gradient(160deg, #8b405b, #6f2e45 55%, #5c2539);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 44px 70px -42px rgba(84, 38, 56, .55), 0 6px 14px rgba(84, 38, 56, .12);
  perspective: 2400px;
}
#kundenstimmen .gb-book::after { content: ""; position: absolute; z-index: 2; top: 14px; bottom: 14px; left: calc(50% - 1px); width: 2px; background: linear-gradient(rgba(84, 38, 56, .2), rgba(84, 38, 56, .08)); pointer-events: none; }
#kundenstimmen .gb-page { position: relative; min-width: 0; padding: 60px 56px 56px; }
#kundenstimmen .gb-page--title {
  display: grid; align-content: center; justify-items: center;
  border-radius: 10px 3px 3px 10px;
  background: linear-gradient(90deg, var(--gb-page), var(--gb-page-2) 80%, var(--gb-gutter));
  box-shadow: -2px 1px 0 -1px #f4ebe6, -4px 2px 0 -2px #e6d6d1, -6px 3px 0 -3px #f1e6e1;
  text-align: center;
}
#kundenstimmen .gb-page--title::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(121, 54, 76, .26); border-radius: 6px; outline: 1px solid rgba(121, 54, 76, .12); outline-offset: 5px; pointer-events: none; }
#kundenstimmen .gb-page--entries {
  display: grid; align-content: center;
  border-radius: 3px 10px 10px 3px;
  background: linear-gradient(90deg, var(--gb-gutter), var(--gb-page-2) 18%, var(--gb-page));
  box-shadow: 2px 1px 0 -1px #f4ebe6, 4px 2px 0 -2px #e6d6d1, 6px 3px 0 -3px #f1e6e1;
  transform-origin: 0 50%;
  backface-visibility: hidden;
}
#kundenstimmen .gb-ribbon { position: absolute; z-index: 3; top: -6px; left: calc(50% + 6px); width: 20px; height: calc(100% + 46px); background: linear-gradient(90deg, #a2445f, #d0728f 45%, #b0516f 70%, #96405a); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 13px), 0 100%); transform-origin: 50% 0; pointer-events: none; }

/* Titelseite */
#kundenstimmen .gb-title { position: relative; display: grid; justify-items: center; gap: 18px; color: var(--gb-berry); }
#kundenstimmen .gb-ornament { width: 150px; height: 20px; stroke-width: 1.3; }
#kundenstimmen .gb-ornament circle { fill: currentColor; stroke: none; }
#kundenstimmen .gb-title h2 { color: var(--gb-ink); font-size: clamp(44px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.035em; }
#kundenstimmen .headline-tail { color: var(--gb-berry); font-style: normal; font-weight: inherit; }
#kundenstimmen .gb-heart { width: 22px; height: 22px; fill: #f3d6e0; stroke-width: 1.5; }
/* Hinweis als angeklammerter Zettel; bleibt sichtbar, bis echte Bewertungen eingesetzt werden */
#kundenstimmen .gb-note { position: relative; max-width: 290px; margin-top: 36px; padding: 16px 20px 14px 30px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px #efe1e4, 0 12px 20px -14px rgba(84, 38, 56, .55); color: var(--gb-berry); font-size: 12.5px; font-weight: 700; line-height: 1.5; text-align: left; rotate: -2deg; }
#kundenstimmen .gb-clip { position: absolute; top: -18px; left: 11px; width: 13px; height: 32px; color: #9a9ea8; stroke-width: 1.8; }
#kundenstimmen .gb-clip path { vector-effect: non-scaling-stroke; }

/* Einträge: Thema, Text auf Schreiblinien, leere Unterschriftszeile */
#kundenstimmen .gb-entry { display: grid; gap: 6px; }
#kundenstimmen .gb-entry + .gb-entry { margin-top: 18px; padding-top: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 14'%3E%3Cpath d='M4 7h30M58 7h30' stroke='%23dcc4cc'/%3E%3Cpath d='M46 12.5s-5-3-5-6.6a2.7 2.7 0 0 1 5-1.4 2.7 2.7 0 0 1 5 1.4c0 3.6-5 6.6-5 6.6Z' fill='%23f3d6e0' stroke='%23b98a9a'/%3E%3C/svg%3E") 50% 0 / 92px 14px no-repeat; }
#kundenstimmen .gb-entry h3 { color: var(--gb-deep); font-size: 27px; line-height: 1.15; letter-spacing: -.02em; }
#kundenstimmen .gb-text { color: var(--gb-muted); font-size: 14.5px; line-height: 28px; background: linear-gradient(transparent 27px, var(--gb-rule) 0) 0 0 / 100% 28px; }
#kundenstimmen .gb-sign { justify-self: end; min-width: 240px; margin-top: 12px; padding-top: 6px; background: linear-gradient(rgba(121, 54, 76, .42), rgba(121, 54, 76, .42)) 0 0 / 100% 1px no-repeat; color: var(--gb-muted); font-size: 12px; font-weight: 600; line-height: 1.4; text-align: right; }

@media (max-width: 1050px) {
  #kundenstimmen { width: calc(100% - 64px); }
  #kundenstimmen .gb-page { padding: 52px 40px 48px; }
  #kundenstimmen .gb-sign { min-width: 200px; }
}

/* Schmal: eine einzelne Buchseite, Einband als Rand mit Buchrücken links */
@media (max-width: 860px) {
  #kundenstimmen .gb-book { grid-template-columns: minmax(0, 1fr); max-width: 560px; padding: 10px 10px 10px 18px; border-radius: 18px; }
  #kundenstimmen .gb-book::after { display: none; }
  #kundenstimmen .gb-page { box-shadow: inset 12px 0 14px -12px rgba(84, 38, 56, .28); background: var(--gb-page); }
  #kundenstimmen .gb-page--title { padding: 52px 32px 36px; border-radius: 8px 8px 0 0; }
  #kundenstimmen .gb-page--title::before { inset: 18px 18px 0; border-bottom: 0; border-radius: 6px 6px 0 0; outline: 0; }
  #kundenstimmen .gb-page--entries { padding: 12px 32px 44px; border-radius: 0 0 8px 8px; }
  #kundenstimmen .gb-page--entries::before { content: ""; display: block; height: 1px; margin: 0 -14px 34px; background: rgba(121, 54, 76, .26); }
  #kundenstimmen .gb-ribbon { left: auto; right: 36px; height: 92px; }
}
@media (max-width: 760px) {
  #kundenstimmen { width: calc(100% - 40px); padding: 92px 0 80px; }
  #kundenstimmen::before { top: -24px; width: 100%; height: 220px; }
  #kundenstimmen .gb-lights--wide { display: none; }
  #kundenstimmen .gb-lights--small { display: block; top: -22px; left: -20px; width: calc(100% + 40px); }
  #kundenstimmen .gb-book { padding: 8px 8px 8px 14px; border-radius: 16px; }
  #kundenstimmen .gb-page--title { padding: 46px 22px 30px; }
  #kundenstimmen .gb-page--title::before { inset: 14px 14px 0; }
  #kundenstimmen .gb-page--entries { padding: 8px 22px 36px; }
  #kundenstimmen .gb-page--entries::before { margin-inline: -8px; margin-bottom: 28px; }
  #kundenstimmen .gb-title { gap: 14px; }
  #kundenstimmen .gb-title h2 { font-size: clamp(36px, 10.5vw, 44px); }
  #kundenstimmen .gb-note { max-width: 100%; margin-top: 28px; font-size: 12px; }
  #kundenstimmen .gb-entry h3 { font-size: 24px; }
  #kundenstimmen .gb-text { font-size: 14px; }
  #kundenstimmen .gb-sign { min-width: 0; width: 78%; }
  #kundenstimmen .gb-ribbon { right: 26px; width: 16px; height: 76px; }
}
@media (max-width: 420px) {
  #kundenstimmen .gb-sign { width: 100%; }
}
@media (max-width: 380px) {
  #kundenstimmen .gb-title h2 { font-size: 32px; }
  #kundenstimmen .gb-entry h3 { font-size: 22px; }
}

/* Bewegung: Die Lichterkette zieht sich von der Bühne herunter und die Lichter gehen nacheinander an.
   Die rechte Seite legt sich auf, die Einträge erscheinen nacheinander wie geschrieben,
   der Zettel wird angeklammert, das Lesebändchen schwingt aus. Nur ohne reduzierte Bewegung und in
   Browsern mit Scroll-Animationen; sonst leuchten die Lichter und das Buch ist sofort offen. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #kundenstimmen .gb-lights { view-timeline-name: --gb-lights; }
    #kundenstimmen :is(.gb-wire, .gb-bulb) { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --gb-lights; }
    #kundenstimmen .gb-wire { animation-name: gb-wire; animation-range: entry 0% entry 70%; }
    #kundenstimmen .gb-bulb { animation-name: gb-light; animation-range: entry calc(20% + var(--i) * 4%) entry calc(45% + var(--i) * 4%); }
    #kundenstimmen .gb-book { view-timeline-name: --gb-book; }
    #kundenstimmen :is(.gb-title, .gb-page--entries, .gb-entry, .gb-note, .gb-ribbon) { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --gb-book; }
    #kundenstimmen .gb-title { animation-name: gb-rise; animation-range: entry 5% entry 45%; }
    #kundenstimmen .gb-page--entries { animation-name: gb-turn; animation-range: entry 15% entry 65%; }
    #kundenstimmen .gb-note { animation-name: gb-clip-on; animation-range: entry 40% entry 75%; }
    #kundenstimmen .gb-ribbon { animation-name: gb-swing; animation-range: entry 35% entry 90%; }
    #kundenstimmen .gb-entry { animation-name: gb-write; }
    #kundenstimmen .gb-entry:nth-child(1) { animation-range: entry 55% entry 85%; }
    #kundenstimmen .gb-entry:nth-child(2) { animation-range: entry 65% entry 95%; }
    #kundenstimmen .gb-entry:nth-child(3) { animation-range: entry 75% contain 8%; }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  @supports (animation-timeline: view()) {
    #kundenstimmen .gb-page--entries { animation-name: none; }
    #kundenstimmen .gb-entry:nth-child(n) { animation-timeline: view(); animation-range: entry 10% cover 32%; }
  }
}
@keyframes gb-wire { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gb-light { from { opacity: .12; } to { opacity: 1; } }
@keyframes gb-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes gb-turn { from { transform: rotateY(-110deg); } 70% { transform: rotateY(5deg); } to { transform: rotateY(0deg); } }
@keyframes gb-clip-on { from { opacity: 0; rotate: -12deg; translate: 0 -16px; } to { opacity: 1; rotate: -2deg; translate: 0 0; } }
@keyframes gb-swing { from { rotate: 4deg; } 60% { rotate: -1.5deg; } to { rotate: 0deg; } }
@keyframes gb-write { from { opacity: 0; translate: 0 10px; clip-path: inset(0 100% 0 0); } to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0); } }