/* =========================================================
   Inzko Apple — Erweiterung
   ---------------------------------------------------------
   Ergänzt das bestehende Stylesheet, ohne es zu verändern:
   Buchbereich, Medienkacheln, Bildwelt, Laufband, Signet am
   Menüpunkt und etwas mehr Leben im Hintergrund.

   Alle Werte kommen aus den Tokens von style.css – Navy,
   Steel, Akzentblau, Georgia für Überschriften –, damit sich
   nichts wie ein Fremdkörper anfühlt.
   ========================================================= */

:root {
  --plus-hairline: rgba(26, 51, 88, .10);
  --plus-hairline-strong: rgba(26, 51, 88, .18);
  --plus-bloom-a: rgba(26, 95, 200, .10);
  --plus-bloom-b: rgba(74, 122, 168, .09);
  --plus-bloom-c: rgba(122, 170, 206, .07);
  --plus-glass: rgba(255, 255, 255, .78);
}

/* ---------------------------------------------------------
   1. Hintergrund: weiche Lichter statt weißer Fläche
   --------------------------------------------------------- */

body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(56vw 44vw at 10% -6%, var(--plus-bloom-a), transparent 62%),
    radial-gradient(46vw 38vw at 94% 8%,  var(--plus-bloom-b), transparent 60%),
    radial-gradient(60vw 46vw at 76% 62%, var(--plus-bloom-c), transparent 62%);
}
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: plus-drift 40s ease-in-out infinite alternate; }
}
@keyframes plus-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
}

/* ---------------------------------------------------------
   2. Navigation: Signet und pointierte Animation
   --------------------------------------------------------- */

/* „Neu“ am Buchpunkt */
.badge-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 980px;
  vertical-align: 1px;
}

/*
 * Die Menü-Animation: ein weicher Grund blendet aus der Mitte auf,
 * darunter wird eine Haarlinie nach außen gezogen. Der Buchpunkt ist
 * ausgenommen – er trägt bereits das Signet.
 */
#primary-menu > li > a { position: relative; isolation: isolate; }

#primary-menu > li:not(.menu-item--book) > a::before {
  content: "";
  position: absolute; left: 4px; right: 4px; top: 9px; bottom: 9px;
  border-radius: 9px;
  background: var(--bg-cloud);
  opacity: 0; transform: scale(.9);
  transition: opacity .35s var(--ease), transform .5s cubic-bezier(.16,1,.3,1);
  z-index: -1;
}
#primary-menu > li:not(.menu-item--book) > a::after {
  content: "";
  position: absolute; left: 13px; right: 13px; bottom: 11px;
  height: 1.5px; border-radius: 2px;
  background: currentColor;
  opacity: 0; transform: scaleX(0);
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .35s var(--ease);
}
#primary-menu > li:not(.menu-item--book):hover > a::before,
#primary-menu > li:not(.menu-item--book):focus-within > a::before { opacity: 1; transform: scale(1); }
#primary-menu > li:not(.menu-item--book):hover > a::after,
#primary-menu > li:not(.menu-item--book):focus-within > a::after { opacity: 1; transform: scaleX(1); }

#primary-menu > li.current-menu-item:not(.menu-item--book) > a::after {
  opacity: 1; transform: scaleX(1); background: var(--text-muted); height: 1px;
}

/* Aufklappmenü: Unterpunkte gestaffelt einblenden */
#primary-menu .sub-menu li {
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s var(--ease), transform .4s cubic-bezier(.16,1,.3,1);
}
#primary-menu li:hover > .sub-menu li,
#primary-menu li:focus-within > .sub-menu li { opacity: 1; transform: none; }
#primary-menu .sub-menu li:nth-child(1) { transition-delay: .02s; }
#primary-menu .sub-menu li:nth-child(2) { transition-delay: .05s; }
#primary-menu .sub-menu li:nth-child(3) { transition-delay: .08s; }
#primary-menu .sub-menu li:nth-child(4) { transition-delay: .11s; }
#primary-menu .sub-menu li:nth-child(5) { transition-delay: .14s; }
#primary-menu .sub-menu li:nth-child(6) { transition-delay: .17s; }

@media (max-width: 980px) {
  #primary-menu > li > a::before,
  #primary-menu > li > a::after { display: none; }
  #primary-menu .sub-menu li { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #primary-menu > li > a::before,
  #primary-menu > li > a::after,
  #primary-menu .sub-menu li { transition: none !important; }
  body::before { animation: none; }
}

/* ---------------------------------------------------------
   3. Pictogramme
   --------------------------------------------------------- */

.pg { width: 100%; height: 100%; display: block; }
.pg .pg-fill { fill: currentColor; opacity: .16; }
.pg .pg-line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pg .pg-dot  { fill: currentColor; }

.pgtile {
  width: 58px; height: 58px; flex: none;
  padding: 12px;
  display: grid; place-items: center;
  border-radius: 16px;
  color: var(--accent);
  background: linear-gradient(145deg, rgba(26,95,200,.12), rgba(26,95,200,.02));
  box-shadow: inset 0 0 0 1px var(--plus-hairline);
  margin-bottom: 20px;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.pgtile--sm { width: 42px; height: 42px; padding: 9px; border-radius: 12px; margin-bottom: 14px; }
.pgtile--steel { color: var(--steel); background: linear-gradient(145deg, rgba(74,122,168,.16), rgba(74,122,168,.02)); }
.plus-card:hover .pgtile { transform: translateY(-2px) scale(1.05); }

.ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.15em; }

/* ---------------------------------------------------------
   4. Karten und Medienkacheln
   --------------------------------------------------------- */

.plus-card {
  position: relative;
  height: 100%;
  padding: 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--plus-hairline), var(--shadow-sm);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s var(--ease);
}
.plus-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--plus-hairline-strong), var(--shadow-md); }
.plus-card--static:hover { transform: none; box-shadow: inset 0 0 0 1px var(--plus-hairline), var(--shadow-sm); }
.plus-card h3 { font-family: var(--font-display); font-size: 21px; color: var(--navy); margin-bottom: 8px; }
.plus-card p  { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }

.plus-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.plus-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

.tile {
  display: flex; flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(168deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  box-shadow: inset 0 0 0 1px var(--plus-hairline), var(--shadow-sm);
  color: inherit;
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .45s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--plus-hairline-strong), var(--shadow-lg); color: inherit; }

.tile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-cloud); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.tile:hover .tile__media img { transform: scale(1.09); }
.tile__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15,34,64,.5));
}
.tile__badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  width: 46px; height: 46px; padding: 10px;
  display: grid; place-items: center;
  border-radius: 13px; color: #fff;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.tile:hover .tile__badge { transform: translateY(-3px) scale(1.06); }
.tile__label {
  position: absolute; right: 16px; bottom: 20px; z-index: 1;
  font-size: 13px; color: rgba(255,255,255,.9);
}
.tile__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tile__title { font-family: var(--font-display); font-size: 20px; color: var(--navy); margin: 0; }
.tile__text { font-size: 15px; color: var(--text-secondary); margin: 0; line-height: 1.6; }
.tile__foot { margin-top: auto; padding-top: 14px; }

.chip {
  display: inline-flex; align-self: flex-start;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: rgba(26,95,200,.10);
  border-radius: 980px; margin-bottom: 4px;
}

/* ---------------------------------------------------------
   5. Bildband und Laufband
   --------------------------------------------------------- */

.artband {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--plus-hairline), var(--shadow-md);
  aspect-ratio: 21 / 9;
  margin: 0;
}
.artband img { width: 100%; height: 100%; object-fit: cover; }
.artband--tall { aspect-ratio: 16 / 9; }
.artband__overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: clamp(24px, 4vw, 64px);
  text-align: center;
  background: linear-gradient(180deg, rgba(15,34,64,.2), rgba(15,34,64,.62));
  color: #fff;
}
.artband__overlay h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); color: #fff; margin: 0; }
.artband__overlay p { color: rgba(255,255,255,.85); max-width: 46ch; margin: 12px auto 0; font-size: 16px; }

.marquee {
  position: relative; overflow: hidden;
  padding: 18px 0;
  border-block: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 40px; width: max-content; animation: plus-marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--text-muted); white-space: nowrap;
}
.marquee__item svg { width: 16px; height: 16px; color: var(--accent); opacity: .85; }
.marquee__item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--border); margin-left: 32px; }
@keyframes plus-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

.zoom-in { animation: plus-zoom 1.3s cubic-bezier(.16,1,.3,1) .2s backwards; }
@keyframes plus-zoom {
  from { opacity: 0; transform: scale(1.04) translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .zoom-in { animation: none; } }

.parallax { will-change: transform; }

/* ---------------------------------------------------------
   6. Buchbereich
   --------------------------------------------------------- */

.book-hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(58% 80% at 20% 0%, rgba(74,122,168,.4), transparent 62%),
    radial-gradient(52% 76% at 84% 96%, rgba(26,95,200,.34), transparent 60%),
    linear-gradient(175deg, var(--navy) 0%, var(--navy-dark) 58%, #0a1a30 100%);
}
.book-hero h1 { font-family: var(--font-display); font-size: clamp(32px, 4.6vw, 60px); line-height: 1.08; color: #fff; margin: 0 auto 16px; max-width: 18ch; }
.book-hero p { color: rgba(255,255,255,.82); }
.book-hero .book-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel-light); margin-bottom: 18px;
}
.book-hero .btn-primary { background: #fff; color: var(--navy); }
.book-hero .btn-primary:hover { background: var(--bg-cloud); color: var(--navy); }
.book-hero .btn-secondary { color: var(--steel-light); border-bottom-color: var(--steel-light); }
.book-hero .btn-secondary:hover { color: #fff; }

.book-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: center; margin-top: 28px; }

.book-cover {
  width: min(100%, 290px);
  margin: clamp(36px, 5vw, 56px) auto 0;
  aspect-ratio: 1 / 1.414;
  border-radius: 4px 14px 14px 4px;
  background: linear-gradient(155deg, #24405f, #0f2240 60%, #081527);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.75), inset 2px 0 0 rgba(255,255,255,.1);
  padding: 26px 24px;
  display: flex; flex-direction: column; text-align: left;
  position: relative; overflow: hidden;
}
.book-cover::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.05) 70%, transparent);
}
.book-cover__kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-light); font-weight: 700; margin-bottom: 16px; }
.book-cover__title { font-family: var(--font-display); font-size: clamp(19px, 2vw, 26px); line-height: 1.14; color: #fff; margin: 0 0 8px; text-wrap: balance; }
.book-cover__rule { width: 38px; height: 2px; background: var(--steel-light); margin: 14px 0; }
.book-cover__sub { font-size: 14px; color: rgba(255,255,255,.72); margin: 0; }
.book-cover__foot { margin-top: auto; font-size: 12px; color: rgba(255,255,255,.55); }

/* Coverbild – gleiche Bühne wie das gezeichnete Cover, nur mit Foto. */
.book-cover-img {
  width: min(100%, 320px);
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: 0;
  position: relative;
  border-radius: 4px 14px 14px 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.75), inset 2px 0 0 rgba(255,255,255,.1);
  transform: perspective(1400px) rotateY(-3deg);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.book-cover-img:hover {
  transform: perspective(1400px) rotateY(0deg) translateY(-6px);
  box-shadow: 0 42px 90px -28px rgba(0,0,0,.8);
}
.book-cover-img img { display: block; width: 100%; height: auto; border-radius: inherit; }
/* Buchrücken links, damit das flache Bild wie ein Band wirkt. */
.book-cover-img::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,.07) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .book-cover-img, .book-cover-img:hover { transform: none; transition: none; }
}

.book-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 56px;
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid rgba(255,255,255,.16);
}
.book-facts__num { display: block; font-family: var(--font-display); font-size: 26px; color: #fff; }
.book-facts__label { display: block; font-size: 14px; color: rgba(255,255,255,.7); margin-top: 4px; }

/* Download- und Formularkasten */
.download-box {
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px);
  background: linear-gradient(168deg, rgba(255,255,255,.97), rgba(255,255,255,.86));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--plus-hairline), var(--shadow-md);
}
.download-box h2, .download-box h3 { font-family: var(--font-display); color: var(--navy); margin-bottom: 6px; }
.download-box h2 { font-size: 24px; }
.download-box h3 { font-size: 18px; }
.download-box p  { font-size: 15px; color: var(--text-secondary); }
.download-note { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 14px; }

.filepill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px; margin-bottom: 16px;
  background: var(--bg-cloud); border-radius: 980px;
  font-size: 13px; color: var(--text-secondary);
}
.filepill svg { width: 15px; height: 15px; color: var(--accent); }

.divider-or {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0; font-size: 13px; color: var(--text-muted);
}
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Formularfelder */
.plus-form { display: grid; gap: 14px; }
.plus-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.plus-field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.plus-form input[type="text"],
.plus-form input[type="email"],
.plus-form textarea {
  width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 16px; color: var(--text-primary);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: var(--ease-fast);
}
.plus-form input:focus, .plus-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(26,95,200,.12);
}
.plus-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-size: 13px; color: var(--text-muted); line-height: 1.55;
}
.plus-consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
.hp-field { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.btn-block { width: 100%; justify-content: center; }

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 18px;
  border-radius: var(--r-sm); font-size: 15px; line-height: 1.5;
}
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.notice--ok  { background: rgba(26,95,200,.09); color: #12602f; }
.notice--err { background: rgba(200,40,40,.08); color: #a32020; }

/* Seitenvorschau der Leseprobe */
.pageshots { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.pageshot {
  aspect-ratio: 1 / 1.414; padding: 14px 13px; overflow: hidden;
  border-radius: var(--r-md); background: #fff;
  box-shadow: inset 0 0 0 1px var(--plus-hairline), var(--shadow-sm);
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .35s var(--ease);
}
.pageshot:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pageshot__kicker { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.pageshot__h { font-family: var(--font-display); font-size: 12px; color: var(--navy); margin: 6px 0 8px; line-height: 1.2; }
.pageshot__lines { display: grid; gap: 4px; }
.pageshot__lines i { display: block; height: 3px; border-radius: 2px; background: var(--bg-cloud); }
.pageshot__lines i:nth-child(4n) { width: 62%; }
.pageshot__lines i:nth-child(7n) { width: 80%; }

/* Inhaltsverzeichnis */
.toc { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.toc__part-title {
  font-family: var(--font-display); font-size: 17px; color: var(--navy);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.toc__list { list-style: none; display: grid; gap: 7px; }
.toc__list li { font-size: 15px; color: var(--text-secondary); display: grid; grid-template-columns: 30px 1fr; line-height: 1.45; }
.toc__list li > span:first-child { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Preiskarte */
.pricecard {
  border-radius: var(--r-lg); padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(168deg, rgba(255,255,255,.97), rgba(255,255,255,.86));
  box-shadow: inset 0 0 0 1px var(--plus-hairline), var(--shadow-md);
}
.pricecard--featured {
  box-shadow:
    inset 0 0 0 1.5px rgba(26,95,200,.5),
    0 0 0 6px rgba(26,95,200,.07),
    var(--shadow-lg);
}
.pricecard h3 { font-family: var(--font-display); font-size: 22px; color: var(--navy); }
.pricecard__price { font-family: var(--font-display); font-size: 40px; color: var(--navy); line-height: 1; margin-top: 16px; }
.pricecard__price small { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); }
.pricecard__soon {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #a86a12; margin-bottom: 12px;
}
.pricecard__soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pricecard__badge { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 12px; }

.ds-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted); line-height: 1.55;
}
.ds-note svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }

/* Merkmalliste */
.plus-list { list-style: none; display: grid; gap: 12px; }
.plus-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
  font-size: 15px; color: var(--text-secondary); line-height: 1.55;
}
.plus-list li::before {
  content: ""; width: 20px; height: 20px; margin-top: 2px; flex: none;
  border-radius: 50%; background-color: rgba(26,95,200,.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5fc8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}

/* Ablauf in Schritten */
.plus-steps { display: grid; gap: 22px; counter-reset: plus-step; }
.plus-step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.plus-step__num {
  counter-increment: plus-step;
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(26,95,200,.10); color: var(--accent);
  font-size: 14px; font-weight: 600;
}
.plus-step__num::before { content: counter(plus-step); }
.plus-step__title { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.plus-step__text { font-size: 15px; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* Abschluss-Band */
.plus-cta {
  border-radius: var(--r-xl);
  padding: clamp(40px, 5vw, 68px) clamp(24px, 4vw, 56px);
  text-align: center; color: #fff;
  background:
    radial-gradient(70% 100% at 18% 0%, rgba(74,122,168,.4), transparent 60%),
    linear-gradient(165deg, var(--navy), var(--navy-dark) 60%, #0a1a30);
}
.plus-cta h2 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 42px); color: #fff; margin-bottom: 14px; }
.plus-cta p { color: rgba(255,255,255,.82); max-width: 48ch; margin: 0 auto; }
.plus-cta .book-actions { margin-top: 26px; }
.plus-cta .btn-primary { background: #fff; color: var(--navy); }
.plus-cta .btn-primary:hover { background: var(--bg-cloud); color: var(--navy); }
.plus-cta .btn-secondary { color: var(--steel-light); border-bottom-color: var(--steel-light); }

/* Vertrauensband mit Siegel */
.trustbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px;
  padding: 26px 32px;
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(255,255,255,.94), rgba(255,255,255,.8));
  box-shadow: inset 0 0 0 1px var(--plus-hairline), var(--shadow-sm);
}
.trustbar img { height: 72px; width: auto; flex: none; }
.trustbar p { flex: 1 1 260px; font-size: 15px; color: var(--text-secondary); margin: 0; line-height: 1.55; }
.trustbar strong { color: var(--navy); }

/* Abschnitt im Buchbereich.
   Das Sprungziel muss unter der fixierten Kopfleiste liegen –
   Vorkopf plus Navigation ergeben rund 140 Pixel. */
.plus-section, .book-hero { scroll-margin-top: calc(var(--pre-h, 86px) + var(--nav-height) + 16px); }
.plus-section { padding: clamp(56px, var(--section-pad), 96px) 0; }
.plus-section--alt {
  background: linear-gradient(180deg, transparent, rgba(238,243,248,.85) 10%, rgba(238,243,248,.85) 90%, transparent);
}
.plus-head { max-width: 40ch; margin-bottom: 40px; }
.plus-head--center { margin-inline: auto; text-align: center; }
.plus-label {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.plus-lead { font-size: 18px; color: var(--text-secondary); line-height: 1.6; }

/* Zweispaltiges Raster für die Buchseite */
.plus-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .plus-split { grid-template-columns: 1fr; } }

/* Aufklappmenü über dunklen Abschnitten lesbar halten */
#primary-menu .sub-menu { background: rgba(255,255,255,.96); }

/* ===========================================================
   KAUFSEITE — Bestellformular, Bezahlung, Auslieferung
   =========================================================== */

.kauf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
  margin: clamp(28px, 4vw, 44px) 0 clamp(40px, 6vw, 72px);
}
@media (max-width: 880px) { .kauf-grid { grid-template-columns: 1fr; } }

.kauf-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--steel); margin: 0 0 10px;
}
.kauf-grid h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: 0 0 12px; }
.kauf-grid h3 { font-size: 15px; font-weight: 650; margin: 0 0 14px; }
.kauf-text { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 22px; max-width: 60ch; }
.kauf-klein { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 14px 0 0; }
.kauf-klein--fehler { color: #b32d2e; font-weight: 600; }

/* Formular */
.kauf-form .feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.kauf-form .feld-paar--plz { grid-template-columns: 120px 1fr; }
@media (max-width: 560px) {
  .kauf-form .feld-paar, .kauf-form .feld-paar--plz { grid-template-columns: 1fr; }
}
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.plus-check { display: block; margin: 16px 0 0; }
.plus-check label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.plus-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.plus-check span { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

/* Beleg-Spalte */
.kauf-beleg { position: sticky; top: calc(var(--pre-h, 86px) + var(--nav-height) + 18px); }
@media (max-width: 880px) { .kauf-beleg { position: static; } }

.kauf-produkt { font-family: var(--font-display); font-size: 17px; line-height: 1.3; margin: 0 0 16px; }

.kauf-daten { margin: 0; font-size: 13.5px; }
.kauf-daten dt { color: var(--text-secondary); margin-top: 12px; }
.kauf-daten dd { margin: 2px 0 0; font-weight: 600; line-height: 1.5; }

.kauf-summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 22px 0 0; padding-top: 16px;
  border-top: 1px solid var(--plus-hairline, rgba(0,0,0,.1));
}
.kauf-summe span { font-size: 14px; color: var(--text-secondary); }
.kauf-summe strong { font-family: var(--font-display); font-size: 27px; color: var(--navy); }

/* Bestätigung */
.kauf-erfolg { border-top: 3px solid #1a7f37; }
.kauf-aktionen { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 26px; }

/* PayPal-Schaltflächen bekommen Luft */
#paypal-buttons { margin: 26px 0 0; min-height: 52px; }

/* ===========================================================
   KOPFBEREICH — Größe und verlässliche Höhen
   -----------------------------------------------------------
   Zwei Dinge werden hier gerade gerückt:

   1. Die Menüleiste war mit 54 px auf großen Bildschirmen zu
      zierlich für den breiten Letterhead darüber. Sie wächst
      jetzt in Stufen mit der Fensterbreite mit.

   2. Der Kopf ist fest positioniert; alle Seiten rechnen ihren
      oberen Abstand aus --pre-h und --nav-height. Bricht die
      Zeile im Letterhead um (iPad, iPhone), stimmt diese
      Rechnung nicht mehr und der Seiteninhalt verschwindet
      unter dem Kopf. Deshalb darf der Kopf jetzt wachsen, und
      plus.js schreibt die tatsächlich gemessene Höhe zurück.
   =========================================================== */

/* --- 1. Der Kopf darf wachsen, statt seinen Inhalt zu kappen --- */
#pre-header {
  height: auto;
  min-height: var(--pre-h);
  display: flex;
  align-items: center;
}
.pre-header-inner {
  width: 100%;          /* sonst schrumpft der Streifen auf seinen Inhalt */
  padding-top: 10px;
  padding-bottom: 10px;
}
.ph-identity { min-width: 0; }
.ph-title { overflow-wrap: anywhere; }

/* Rand für Geräte mit runden Ecken und Kamera-Insel */
.pre-header-inner,
#site-nav .nav-inner,
.container {
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}

/* --- 2. Die Menüleiste wächst mit dem Bildschirm --- */
@media (min-width: 961px) {
  :root { --nav-height: 62px; }
  #primary-menu > li > a { font-size: 13.5px; padding: 0 15px; }
  .nav-cta { font-size: 13.5px; padding: 10px 22px; }
  #primary-menu .sub-menu a { font-size: 13.5px; padding: 9px 15px; }
}

@media (min-width: 1200px) {
  :root { --nav-height: 68px; }
  #primary-menu > li > a { font-size: 15px; padding: 0 17px; }
  .nav-cta { font-size: 14.5px; padding: 12px 25px; gap: 8px; }
  .nav-cta svg { width: 15px; height: 15px; }
  #primary-menu .sub-menu { min-width: 246px; padding: 10px; }
  #primary-menu .sub-menu a { font-size: 14px; padding: 10px 16px; }
}

@media (min-width: 1500px) {
  :root { --nav-height: 76px; --container: 1260px; }
  #primary-menu > li > a { font-size: 16px; padding: 0 19px; }
  .nav-cta { font-size: 15px; padding: 13px 28px; }
  .sv-logo-img { height: 82px; }
  .ph-name { font-size: 25px; }
  .ph-title { font-size: 16px; }
  :root { --pre-h: 98px; }
}

@media (min-width: 1800px) {
  :root { --nav-height: 82px; --container: 1340px; --pre-h: 106px; }
  #primary-menu > li > a { font-size: 17px; padding: 0 21px; }
  .nav-cta { font-size: 16px; padding: 14px 30px; }
  .sv-logo-img { height: 90px; }
  .ph-name { font-size: 27px; }
  .ph-title { font-size: 17px; }
}

/* Das Signet und die Menü-Animation wachsen mit */
@media (min-width: 1200px) {
  .badge-new { font-size: 11px; padding: 2px 8px 3px; }
}

/* Nichts darf in der Leiste umbrechen oder überlaufen */
#site-nav .nav-inner { min-width: 0; }
#primary-menu { flex-wrap: nowrap; min-width: 0; }

/* --- 3. Das aufgeklappte Menü auf kleinen Geräten --- */

/*
 * Der eigentliche Fehler auf iPhone und iPad:
 *
 * #site-nav trägt backdrop-filter für den Milchglas-Effekt. Ein Element
 * mit backdrop-filter wird nach Vorgabe des Standards zum Bezugsrahmen
 * für alles, was darin position:fixed ist. Das aufgeklappte Menü liegt
 * in der Leiste — es bezieht sein „top“ und „bottom“ also nicht mehr auf
 * das Fenster, sondern auf die 58 Pixel hohe Leiste. Ergebnis: ein
 * Kästchen von rund 90 Pixeln Höhe, in dem der Großteil der Menüpunkte
 * abgeschnitten ist. Am Schreibtisch fällt das nie auf, weil dort das
 * Klappmenü gar nicht verwendet wird.
 *
 * Solange das Menü offen ist, nehmen wir den Filter deshalb heraus.
 * Der Milchglas-Effekt fehlt dann für zwei Sekunden — das Menü liegt
 * ohnehin deckend darüber.
 */
#site-nav:has(#primary-menu.open),
#site-nav.nav-offen {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 960px) {
  /*
   * Sieben Punkte plus die sechs Unterpunkte des Buches passen
   * auf einem iPhone nicht auf einen Bildschirm. Ohne eigenen
   * Bildlauf wird der Rest schlicht abgeschnitten.
   */
  #primary-menu.open {
    max-height: calc(100dvh - var(--pre-h) - var(--nav-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* Etwas mehr Griffigkeit für den Daumen */
  :root { --nav-height: 58px; }
  .nav-toggle { padding: 10px; }
  .nav-toggle span { width: 24px; }
}

/* --- 4. Kein waagrechter Überlauf, nirgends --- */
html, body { overflow-x: clip; }

img, svg, video, table, pre { max-width: 100%; }

/* Breite Tabellen bekommen ihren eigenen Bildlauf statt die Seite zu sprengen */
.inner-content table,
.page-content table { display: block; overflow-x: auto; }


/* Der Buchkopf steht ganz oben auf der Seite und muss den festen
   Seitenkopf überspringen — der Teaser auf der Startseite nicht. */
.book-hero--oben {
  padding-top: calc(var(--pre-h) + var(--nav-height) + clamp(48px, 6vw, 88px));
}