:root {
  --gold: #BFA51B;
  --gold-light: #CCA200;
  --gold-bg: #f4ecd2;
  --maroon: #83384E;
  --navy: #333349;
  --darkred: #660404;
  --darkbrown: #4A3232;
  --gray: #9D9D9D;
  --purple: #A370A9;
  --teal: #006982;
  --cream: #FAF8F3;
  --ink: #161616;
  --muted: #5a5a5a;
  --muted-2: #6b6b6b;
  --border: #e6e1d3;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--cream);
  color: var(--ink);
}

.sans { font-family: 'Segoe UI', Arial, sans-serif; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ── Header ── */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
header.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  gap: 24px;
}
header.site-header img.logo { height: 44px; display: block; }

/* ── Nav ── */
nav.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.nav-item {
  position: relative;
}

button.nav-link,
a.nav-link {
  background: none;
  border: none;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none;
}
button.nav-link:hover,
a.nav-link:hover {
  background: var(--gold-bg);
  color: var(--maroon);
}

.nav-arrow {
  font-size: 9px;
  opacity: 0.55;
  transition: transform .18s;
  display: inline-block;
}
.nav-item.open .nav-arrow { transform: rotate(180deg); }

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  min-width: 210px;
  padding: 6px 0;
  z-index: 200;
}
.nav-item.open > .dropdown { display: block; }

.dropdown a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--ink);
  white-space: nowrap;
}
.dropdown a:hover { background: var(--cream); color: var(--maroon); }
.dropdown a[aria-disabled="true"] { color: var(--gray); pointer-events: none; }

.dropdown-label {
  display: block;
  padding: 6px 18px 2px;
  font-size: 10px;
  font-family: 'Segoe UI', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray);
}

.dropdown-desc {
  display: block;
  padding: 4px 18px 10px;
  font-size: 11px;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--gray);
  max-width: 280px;
  white-space: normal;
  line-height: 1.5;
}

.nav-lizenz {
  border: 1px solid var(--maroon) !important;
  color: var(--maroon) !important;
  margin-left: 8px;
}
.nav-lizenz:hover {
  background: var(--maroon) !important;
  color: #fff !important;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink);
  padding: 6px;
  line-height: 1;
}

/* ── Buttons (alt) ── */
.btn {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  border-radius: 6px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }
.btn-primary:hover { background: #a68f17; border-color: #a68f17; color: #fff; }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #000; }
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* ── Hero ── */
section.hero {
  position: relative;
  width: 100%;
  min-height: 680px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin: 0;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(20,16,10,0.72) 0%,
    rgba(20,16,10,0.45) 55%,
    rgba(20,16,10,0.1) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 100px 24px 44px;
}
h1 { font-size: 40px; line-height: 1.2; font-weight: 400; margin: 0 0 18px; }
.hero-content h1 { color: #fff; }
.hero-content p.lead {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
  margin: 0 0 28px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-light {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.65);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn-light:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* ── About ── */
section.about {
  padding: 60px 24px;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
section.about img.portrait { width: 220px; border-radius: 12px; flex-shrink: 0; }
section.about .body { font-family: 'Segoe UI', Arial, sans-serif; }
section.about h2 { font-size: 24px; font-weight: 400; margin: 0 0 14px; }
section.about p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
section.about ul { font-size: 14px; color: var(--muted-2); line-height: 1.8; padding-left: 18px; margin: 0; }

/* ── Contact ── */
section.contact { background: #efece3; padding: 60px 24px; }
section.contact .wrap { display: flex; gap: 48px; flex-wrap: wrap; }
section.contact .info { flex: 1; min-width: 240px; font-family: 'Segoe UI', Arial, sans-serif; }
section.contact h2 { font-size: 24px; font-weight: 400; margin: 0 0 14px; font-family: Georgia, serif; }
section.contact .info p { font-size: 14px; color: var(--muted); line-height: 1.8; }
section.contact form { flex: 1.3; min-width: 280px; display: flex; flex-direction: column; gap: 12px; font-family: 'Segoe UI', Arial, sans-serif; }
section.contact input, section.contact select, section.contact textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
section.contact textarea { resize: vertical; min-height: 90px; }
.form-note { font-size: 12px; color: var(--muted-2); }

/* ── Footer ── */
footer.site-footer {
  border-top: 3px solid #c6a15b;
  background: #f8f4ea;
  padding: 40px 24px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
footer.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
footer.site-footer img.logo { height: 28px; margin-bottom: 10px; }
footer.site-footer p { font-size: 13px; color: var(--muted-2); line-height: 1.6; max-width: 280px; }
footer.site-footer .links { display: flex; gap: 20px; font-size: 13px; color: var(--muted-2); }
footer.site-footer .links a:hover { color: var(--maroon); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,18,12,0.55);
  display: none; align-items: center; justify-content: center; padding: 24px; z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 14px; max-width: 640px; width: 100%;
  display: flex; gap: 26px; padding: 28px; position: relative; max-height: 86vh; overflow-y: auto;
}
.modal img.cover { width: 170px; border-radius: 8px; flex-shrink: 0; display: block; }
.modal .body { font-family: 'Segoe UI', Arial, sans-serif; }
.modal h3 { font-family: Georgia, serif; font-size: 22px; margin: 4px 0 12px; }
.modal p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.modal .price-row { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.modal .price { font-size: 22px; font-weight: 700; }
.modal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--muted-2); line-height: 1;
}

/* ── Responsive ── */
@media (max-width: 1080px) {
  .nav-hamburger { display: block; }

  nav.main-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-top: 1px solid var(--border);
    padding: 8px 24px 20px;
    gap: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.07);
    z-index: 49;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  nav.main-nav.open { display: flex; }

  header.site-header { position: sticky; }

  .nav-item { flex-direction: column; align-items: stretch; }
  button.nav-link, a.nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .nav-item.open > button.nav-link,
  .nav-item.open > a.nav-link {
    color: var(--maroon);
    border-bottom: none;
  }

  .dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--gold-bg);
    border-radius: 0;
    padding: 0 0 8px 12px;
    min-width: unset;
  }
  .dropdown a { padding: 8px 4px; border-bottom: none; }
  .dropdown-label { padding: 4px 4px 2px; }

  nav.main-nav > a.nav-link {
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 12px 4px;
  }
  .nav-lizenz {
    margin: 14px 0 0;
    border-radius: 6px !important;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  section.hero { flex-direction: column; padding: 40px 20px; }
  section.about { flex-direction: column; }
  .modal { flex-direction: column; }
}


/* ==========================================================
   MPU LANDINGPAGE – BASIS
   ========================================================== */

:root {
  --mpu-cream: #f5f0e7;
  --mpu-cream-light: #fbf8f2;
  --mpu-navy: #18344b;
  --mpu-navy-dark: #10283b;
  --mpu-gold: #c6a15b;
  --mpu-gold-dark: #a9823d;
  --mpu-text: #30363a;
  --mpu-muted: #697077;
  --mpu-white: #ffffff;
  --mpu-border: rgba(24, 52, 75, 0.12);

  --mpu-radius: 18px;
  --mpu-radius-small: 12px;

  --mpu-shadow:
    0 14px 40px rgba(28, 39, 48, 0.08);

  --mpu-max-width: 1240px;
}


/* ==========================================================
   ALLGEMEIN
   ========================================================== */

.mpu-main {
  background: var(--mpu-cream-light);
  color: var(--mpu-text);
}

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


.mpu-container {
  width: min(
    calc(100% - 40px),
    var(--mpu-max-width)
  );

  margin-inline: auto;
}


.mpu-section {
  padding: 90px 0;
}


.mpu-section-alt {
  background: var(--mpu-cream);
}


/* ==========================================================
   TYPOGRAFIE
   ========================================================== */

.mpu-main h2,
.mpu-main h3 {
  color: var(--mpu-navy);
  margin-top: 0;
}


.mpu-main h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 22px;
}


.mpu-main h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.25;
  margin-bottom: 16px;
}


.mpu-main p {
  font-size: 1.04rem;
  line-height: 1.7;
  margin-top: 0;
}


.mpu-lead {
  font-size: 1.18rem !important;
  color: var(--mpu-navy);
}


.mpu-eyebrow,
.mpu-card-label {
  display: inline-block;

  color: #7a6023;

  font-size: 0.77rem;
  font-weight: 700;

  letter-spacing: 0.12em;

  margin-bottom: 14px;
}


.mpu-section-head {
  max-width: 780px;

  margin: 0 auto 48px;

  text-align: center;
}


.mpu-section-head p {
  color: var(--mpu-muted);
}


/* ==========================================================
   GRIDS
   ========================================================== */

.mpu-grid {
  display: grid;
  gap: 28px;
}


.mpu-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}


/* ==========================================================
   KARTEN
   ========================================================== */

.mpu-card {
  background: var(--mpu-white);

  border:
    1px solid var(--mpu-border);

  border-radius:
    var(--mpu-radius);

  box-shadow:
    var(--mpu-shadow);
}


.mpu-path-card {
  position: relative;

  min-height: 330px;

  padding: 34px;

  display: flex;
  flex-direction: column;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.mpu-path-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 18px 46px rgba(28, 39, 48, 0.12);
}


.mpu-path-card > p {
  color: var(--mpu-muted);
}


.mpu-path-card .mpu-text-link {
  margin-top: auto;
}


.mpu-small-note {
  margin-top: 18px !important;
  margin-bottom: 0 !important;

  font-size: 0.86rem !important;
  line-height: 1.5 !important;

  color: var(--mpu-muted);
}


/* ==========================================================
   LINKS
   ========================================================== */

.mpu-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--mpu-navy);

  font-weight: 700;

  text-decoration: none;
}


.mpu-text-link span {
  transition: transform 0.2s ease;
}


.mpu-text-link:hover span {
  transform: translateX(4px);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.mpu-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  margin-top: 30px;
}


.mpu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding: 13px 24px;

  border-radius: 999px;

  font-weight: 700;
  line-height: 1.2;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}


.mpu-btn:hover {
  transform: translateY(-2px);
}


.mpu-btn-primary {
  background: var(--mpu-gold);
  color: var(--mpu-navy-dark);
}


.mpu-btn-primary:hover {
  background: var(--mpu-gold-dark);
  color: var(--mpu-white);
}


.mpu-btn-secondary {
  border:
    1px solid var(--mpu-navy);

  color: var(--mpu-navy);

  background: transparent;
}


.mpu-btn-secondary:hover {
  color: var(--mpu-white);
  background: var(--mpu-navy);
}


/* ==========================================================
   KOSTENLOSER SCHNELLSTART
   ========================================================== */

.mpu-product-feature {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.8fr)
    minmax(0, 1.2fr);

  align-items: center;

  gap: clamp(50px, 7vw, 100px);
}


.mpu-product-visual {
  display: flex;
  justify-content: center;
}


.mpu-cover-wrap {
  width: min(100%, 360px);
}


.mpu-cover-wrap img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 4px;

  box-shadow:
    0 24px 48px rgba(26, 35, 44, 0.18);
}


.mpu-image-placeholder {
  min-height: 480px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #fff,
      #eee7dc
    );

  border:
    1px solid rgba(0,0,0,0.09);

  box-shadow:
    0 24px 48px rgba(26, 35, 44, 0.15);
}


.mpu-product-copy {
  max-width: 680px;
}


.mpu-benefits {
  list-style: none;

  padding: 0;
  margin: 30px 0 0;
}


.mpu-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 9px 0;

  color: var(--mpu-navy);

  font-weight: 600;
}


.mpu-check {
  width: 26px;
  height: 26px;

  flex: 0 0 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(198, 161, 91, 0.18);

  color:
    var(--mpu-gold-dark);
}


/* ==========================================================
   KOSTENLOSE RESSOURCEN
   ========================================================== */

.mpu-resource-card {
  overflow: hidden;
}


.mpu-resource-cover {
  min-height: 270px;

  padding: 30px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  background:
    var(--mpu-cream);
}

.mpu-resource-cover img {
  max-width: 150px;
  max-height: 210px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(26, 35, 44, 0.15);
}

.mpu-image-placeholder-small {
  min-height: 210px;
  width: 150px;

  padding: 20px;

  font-size: 0.88rem;
}


.mpu-resource-content {
  padding: 28px 30px 32px;
}


.mpu-resource-content p {
  color: var(--mpu-muted);
}


/* ==========================================================
   ÜBERGANG
   ========================================================== */

.mpu-transition {
  background:
    var(--mpu-navy);
}


.mpu-transition-inner {
  max-width: 850px;

  text-align: center;
}


.mpu-transition h2,
.mpu-transition p {
  color: var(--mpu-white);
}


.mpu-transition .mpu-eyebrow {
  color: var(--mpu-gold);
}


.mpu-transition p {
  max-width: 700px;

  margin-left: auto;
  margin-right: auto;

  opacity: 0.88;
}


.mpu-transition .mpu-btn {
  margin-top: 18px;
}


.mpu-transition .mpu-btn-secondary {
  border-color:
    var(--mpu-gold);

  color:
    var(--mpu-gold);
}


.mpu-transition .mpu-btn-secondary:hover {
  background:
    var(--mpu-gold);

  color:
    var(--mpu-navy-dark);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

  .mpu-section {
    padding: 72px 0;
  }


  .mpu-grid-3 {
    grid-template-columns: 1fr;
  }


  .mpu-path-card {
    min-height: auto;
  }


  .mpu-product-feature {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .mpu-product-copy {
    max-width: none;
  }

}


/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media (max-width: 600px) {

  .mpu-container {
    width:
      min(
        calc(100% - 28px),
        var(--mpu-max-width)
      );
  }


  .mpu-section {
    padding: 58px 0;
  }


  .mpu-section-head {
    margin-bottom: 34px;
  }


  .mpu-path-card {
    padding: 27px;
  }


  .mpu-resource-content {
    padding: 25px;
  }


  .mpu-btn {
    width: 100%;
  }

}


/* ==========================================================
   KOSTENLOSER EINSTIEG
   ========================================================== */

.free-start-section {
  padding: 80px 30px;

  background:
    radial-gradient(
      circle at 23% 48%,
      rgba(205, 158, 76, 0.10) 0%,
      rgba(205, 158, 76, 0.04) 28%,
      transparent 52%
    ),
    linear-gradient(
      115deg,
      #f6efe3 0%,
      #fdfaf5 52%,
      #f7f0e5 100%
    );
}


.free-start-inner {
  width: min(100%, 1380px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(480px, 0.95fr) minmax(520px, 1.05fr);

  gap: clamp(60px, 7vw, 105px);

  align-items: center;
}


/* MOCKUP */

.free-start-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}


.free-mockup {
  position: relative;

  width: 520px;
  max-width: 100%;
  height: 560px;

  margin: 0 auto;

  transform: translateY(18px) scale(0.92);
  transform-origin: center;
}


.free-mockup__cover {
  position: absolute;

  z-index: 3;

  width: 245px;
  height: auto;

  left: 50%;
  top: 100px;

  transform: translateX(-50%);

  border-radius: 4px;

  box-shadow:
    0 22px 40px rgba(30, 35, 40, 0.17);
}


.free-mockup__page {
  position: absolute;

  z-index: 1;

  width: 245px;
  height: auto;

  top: 72px;

  background: #fff;

  box-shadow:
    0 17px 34px rgba(30, 35, 40, 0.13);
}


.free-mockup__page--back {
  left: -15px;
  transform: rotate(-8deg);
}


.free-mockup__page--front {
  right: -15px;
  transform: rotate(8deg);
}


/* TEXT */

.free-start-content {
  max-width: 690px;
}


.free-start-eyebrow {
  display: block;

  margin-bottom: 18px;

  color: #ad7826;

  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}


.free-start-content h2 {
  margin: 0 0 28px;

  color: #ffffff;

  font-size: clamp(3rem, 4.7vw, 4.6rem);
  line-height: 1.02;
}


.free-start-content p {
  color: #243e50;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.1rem;
  line-height: 1.7;
}


.free-start-lead {
  color: #17364e !important;

  font-size: 1.25rem !important;
}


.free-start-benefits {
  list-style: none;

  padding: 0;
  margin: 30px 0 32px;
}


.free-start-benefits li {
  position: relative;

  padding-left: 48px;
  margin-bottom: 18px;

  color: #ffffff;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.05rem;
  font-weight: 700;
}


.free-start-benefits li::before {
  content: "✓";

  position: absolute;

  left: 0;
  top: -5px;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(205, 158, 76, 0.15);

  color: #ad7826;

  font-size: 1.15rem;
}


.free-start-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 58px;

  padding: 15px 32px;

  border-radius: 999px;

  background: #A28B12;

  color: #ffffff;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.05rem;
  font-weight: 700;

  text-decoration: none;

  box-shadow:
    0 10px 22px rgba(117, 82, 27, 0.12);
}


/* TABLET / MOBIL */

@media (max-width: 950px) {

  .free-start-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .free-start-content {
    max-width: 720px;
    margin: 0 auto;
  }

  .free-start-visual {
    order: 1;
  }

  .free-start-content {
    order: 2;
  }
}


@media (max-width: 600px) {

  .free-start-section {
    padding: 58px 22px;
  }

  .free-mockup {
    width: 340px;
    height: 400px;
  }

  .free-mockup__cover {
    width: 175px;
    top: 75px;
  }

  .free-mockup__page {
    width: 155px;
    top: 58px;
  }

  .free-mockup__page--back {
    left: 5px;
  }

  .free-mockup__page--front {
    right: 5px;
  }
}


/* ==========================================================
   MPU NAVIGATION – NEUE PRODUKTPRÄSENTATION
   ========================================================== */

.navi-showcase {
  position: relative;
  overflow: hidden;
  padding: 82px 30px 88px;

  background:
    radial-gradient(
      circle at 22% 48%,
      rgba(205, 158, 76, 0.14) 0%,
      rgba(205, 158, 76, 0.07) 24%,
      transparent 48%
    ),
    linear-gradient(
      115deg,
      #f6efe3 0%,
      #fdfaf5 48%,
      #f5ecdf 100%
    );
}


.navi-showcase__inner {
  width: min(100%, 1420px);
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(270px, 0.78fr)
    minmax(520px, 1.55fr)
    minmax(270px, 0.82fr);

  gap: clamp(30px, 3vw, 48px);

  align-items: center;
}


/* ==========================================================
   BUCH
   ========================================================== */

.navi-showcase__visual {
  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 38px;
}


.navi-showcase__book {
  display: block;

  width: min(100%, 600px);
  height: auto;

  filter:
    drop-shadow(0 24px 22px rgba(22, 30, 38, 0.18));

  transform: translateY(8px);

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}


.navi-showcase__book:hover {
  transform:
    translateY(2px)
    scale(1.015);

  filter:
    drop-shadow(0 28px 26px rgba(22, 30, 38, 0.22));
}


/* ==========================================================
   MITTLERER TEXTBEREICH
   ========================================================== */

.navi-showcase__content {
  max-width: 700px;
}


.navi-showcase__eyebrow {
  display: block;

  margin-bottom: 18px;

  color: #ad7826;

  font-size: 0.84rem;
  font-weight: 700;

  letter-spacing: 0.13em;
}


.navi-showcase__title {
  margin: 0 0 8px;

  color: #ffffff;

  font-size: clamp(3.2rem, 5vw, 5rem);

  line-height: 0.98;

  letter-spacing: -0.025em;
}


.navi-showcase__subtitle {
  margin: 0 0 30px;

  color: #706b69;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(1.25rem, 2vw, 1.55rem);

  font-style: italic;

  line-height: 1.35;
}


.navi-showcase__lead {
  max-width: 650px;

  margin: 0 0 20px;

  color: var(--ink);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(1.25rem, 1.8vw, 1.55rem);

  line-height: 1.55;
}


.navi-showcase__text {
  max-width: 650px;

  margin: 0 0 28px;

  color: #243e50;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.08rem;

  line-height: 1.7;
}


/* ==========================================================
   VORTEILE
   ========================================================== */

.navi-showcase__benefits {
  margin: 0 0 30px;

  padding: 0;

  list-style: none;
}


.navi-showcase__benefits li {
  position: relative;

  margin-bottom: 13px;

  padding-left: 30px;

  color: var(--ink);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.05rem;

  font-weight: 700;

  line-height: 1.35;
}


.navi-showcase__benefits li::before {
  content: "✓";

  position: absolute;

  left: 0;
  top: -1px;

  color: #b57a24;

  font-size: 1.15rem;

  font-weight: 400;
}


/* ==========================================================
   AMAZON BUTTON
   ========================================================== */

.navi-showcase__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 58px;

  padding: 15px 31px;

  border-radius: 999px;

  background: #A28B12;

  color: #ffffff;

  box-shadow:
    0 10px 22px rgba(117, 82, 27, 0.12);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.05rem;

  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.navi-showcase__button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 14px 28px rgba(117, 82, 27, 0.18);
}


/* ==========================================================
   INFOBOX RECHTS
   ========================================================== */

.navi-showcase__info {
  align-self: stretch;

  max-width: 340px;

  padding: 44px 40px 38px;

  border: 1px solid rgba(191, 137, 51, 0.38);

  border-radius: 24px;

  background: rgba(255, 255, 255, 0.74);

  box-shadow: 0 18px 45px rgba(32, 43, 54, 0.07);

  backdrop-filter: blur(2px);
}


.navi-showcase__info-label {
  display: block;

  margin-bottom: 21px;

  color: #7a6023;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.14em;
}


.navi-showcase__info h3 {
  margin: 0 0 24px;

  color: var(--ink);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(1.8rem, 2.6vw, 2.3rem);

  line-height: 1.12;
}


.navi-showcase__info p {
  margin: 0;

  color: #6c6a68;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.05rem;

  line-height: 1.75;
}


.navi-showcase__info-footer {
  margin-top: 30px;

  padding-top: 24px;

  border-top: 1px solid rgba(23, 54, 78, 0.10);

  color: #676767;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 0.95rem;

  line-height: 1.6;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

  .navi-showcase__inner {
    grid-template-columns:
      minmax(230px, 0.75fr)
      minmax(0, 1.25fr);

    gap: 50px;
  }

  .navi-showcase__info {
    grid-column: 1 / -1;

    width: min(100%, 720px);
    max-width: none;

    justify-self: center;

    margin-top: 10px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  .navi-showcase {
    padding: 58px 22px 65px;
  }

  .navi-showcase__inner {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .navi-showcase__visual {
    padding-top: 0;
  }

  .navi-showcase__book {
    width: min(75vw, 290px);
  }

  .navi-showcase__content {
    max-width: none;
  }

  .navi-showcase__title {
    font-size: clamp(2.6rem, 12vw, 3.8rem);
  }

  .navi-showcase__info {
    grid-column: auto;

    width: 100%;

    padding: 30px 28px;
  }

  .navi-showcase__button {
    width: 100%;
  }

}


/* ==========================================================
   MPU-ANLASS – 3 EINSTIEGSWEGE
   ========================================================== */

.mpu-paths-section {
  padding: 90px 30px 95px;

  background:
    linear-gradient(
      120deg,
      #faf6ee 0%,
      #fdfaf7 50%,
      #f8f1e8 100%
    );
}

.mpu-paths-inner {
  width: min(100%, 1460px);
  margin: 0 auto;
}

/* KOPF */

.mpu-paths-head {
  max-width: 980px;
  margin: 0 auto 54px;
  text-align: center;
}

.mpu-paths-eyebrow {
  display: block;
  margin-bottom: 15px;

  color: #ad7826;

  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.mpu-paths-head h2 {
  margin: 0 0 18px;

  color: #ffffff;

  font-size: clamp(2.6rem, 4vw, 4.1rem);
  line-height: 1.03;
}

.mpu-paths-head p {
  max-width: 820px;
  margin: 0 auto;

  color: #344657;

  font-size: 1.12rem;
  line-height: 1.6;
}

/* 3 SPALTEN */

.mpu-paths-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 26px;

  align-items: stretch;
}

/* EINZELNE KARTE */

.mpu-path {
  display: flex;
  flex-direction: column;

  min-width: 0;

  background: rgba(255, 255, 255, 0.82);

  border: 1px solid rgba(145, 55, 82, 0.14);
  border-radius: 18px;

  overflow: hidden;

  box-shadow:
    0 16px 36px rgba(37, 43, 50, 0.07);
}

/* BORDEAUX-KOPF */

.mpu-path-header {
  min-height: 155px;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  padding: 24px;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      #8f3b55,
      #9c3555
    );

  color: #fff;
}

.mpu-path-header strong {
  display: block;

  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 1;
}

.mpu-path-header > span,
.mpu-path-header small {
  display: block;

  margin-top: 12px;

  color: rgba(255,255,255,.92);

  font-size: 0.82rem;
  font-weight: 600;
}

.mpu-path-header .mpu-path-header-note {
  margin-top: 6px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.68rem;
  font-weight: 400;

  letter-spacing: 0.03em;
}

/* VERKEHR: GELBES "AUFFÄLLIGKEITEN" */

.mpu-path-header--traffic strong {
  font-size: clamp(1.65rem, 2.2vw, 2.45rem);
  line-height: .94;
}

.mpu-path-header--traffic strong span {
  color: #f0e744;
}

/* INHALT */

.mpu-path-body {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 34px 34px 28px;
}

.mpu-path-body h3 {
  margin: 0 0 19px;

  min-height: 88px;

  color: #ffffff;

  font-size: 1.55rem;
  line-height: 1.25;
}

.mpu-path-body > p {
  color: #343f47;

  font-size: 1rem;
  line-height: 1.65;
}

/* CANNABIS-HINWEIS */

.mpu-path-cannabis {
  margin: 0 0 15px !important;

  color: #913752 !important;

  font-size: 0.96rem !important;
  font-weight: 700;
}

/* KLEINE NUTZENZEILE */

.mpu-path-meta {
  margin: 10px 0 22px !important;

  color: #913752 !important;

  font-size: 0.83rem !important;
  font-weight: 700;

  letter-spacing: 0.035em;

  text-transform: uppercase;
}

/* BUTTON */

.mpu-path-button {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 56px;

  margin-bottom: 25px;

  padding: 14px 20px;

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #8e304f,
      #a13358
    );

  color: #fff;

  font-size: 1rem;
  font-weight: 700;

  text-align: center;
  text-decoration: none;
}

.mpu-path-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 22px rgba(122, 42, 69, .16);
}

/* KLEINER HINWEIS */

.mpu-path-note {
  margin-top: 2px;

  padding-top: 20px;

  border-top:
    1px solid rgba(23, 54, 78, 0.11);
}

.mpu-path-note p {
  margin: 0 0 10px;

  color: #54575a;

  font-size: 0.88rem;
  line-height: 1.55;
}

/* DANACH */

.mpu-path-next {
  margin-top: auto;

  padding-top: 22px;

  border-top:
    1px solid rgba(23, 54, 78, 0.09);
}

.mpu-path-next span {
  display: block;

  margin-bottom: 5px;

  color: #ad7826;

  font-size: .72rem;
  font-weight: 700;

  letter-spacing: .1em;

  text-transform: uppercase;
}

.mpu-path-next strong {
  color: #913752;

  font-size: .96rem;
  line-height: 1.4;
}

/* TABLET */

@media (max-width: 1050px) {

  .mpu-paths-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .mpu-path {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .mpu-path-body h3 {
    min-height: 0;
  }

  .mpu-path-header {
    min-height: 115px;
  }
}

/* SMARTPHONE */

@media (max-width: 620px) {

  .mpu-paths-section {
    padding: 65px 18px 70px;
  }

  .mpu-paths-head {
    margin-bottom: 38px;
  }

  .mpu-paths-head h2 {
    font-size: 1.95rem;
    line-height: 1.08;
  }

  .mpu-path-body {
    padding: 28px 24px 25px;
  }

  .mpu-path-body h3 {
    font-size: 1.35rem;
  }

  .mpu-path-header {
    min-height: 105px;
  }
}


/* ==========================================================
   BASIS-ARBEITSHEFT ZIELE
   ========================================================== */

.goals-section {
  padding: 88px 30px 60px;

  background:
    linear-gradient(
      115deg,
      #fbf7f0 0%,
      #fffdf9 52%,
      #f8f1e7 100%
    );
}

.goals-inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.goals-head {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.goals-eyebrow {
  display: block;
  margin-bottom: 14px;

  color: #b07b2d;

  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.goals-head h2 {
  margin: 0 0 20px;

  color: #ffffff;

  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  line-height: 1.04;
}

.goals-head p {
  max-width: 840px;
  margin: 0 auto;

  color: #344657;

  font-size: 1.12rem;
  line-height: 1.7;
}

.goals-product {
  display: grid;
  grid-template-columns: minmax(280px, 430px) 1fr;
  gap: 70px;
  align-items: start;

  margin-top: 55px;
}

.goals-cover-wrap {
  justify-self: center;
  align-self: center;
  width: min(100%, 360px);
}

.goals-cover {
  position: relative;
  width: 100%;
}

.goals-cover-quote {
  max-width: 310px;
  margin: 34px auto 0;
  padding-top: 18px;

  border-top: 1px solid #c79a4a;

  color: #ffffff;

  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.55;

  text-align: center;
}

.quote-nowrap {
  white-space: nowrap;
}

.goals-cover-main {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;

  box-shadow: 0 16px 32px rgba(40, 30, 25, 0.14);
}

.goals-cover-page {
  position: absolute;
  z-index: 1;

  width: 92%;
  height: auto;

  top: -10px;
  left: 48px;

  transform: rotate(2.5deg);
  transform-origin: center;

  box-shadow: 0 12px 26px rgba(40, 30, 25, 0.12);
}

.goals-content {
  max-width: 720px;
  padding-top: 12px;
}

.goals-product-label {
  display: block;
  margin-bottom: 10px;

  color: #b07b2d;

  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.goals-content h3 {
  margin: 0 0 18px;

  color: #ffffff;

  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1.08;
}

.goals-content p {
  margin: 0;

  color: #344657;

  font-size: 1.08rem;
  line-height: 1.7;
}

.goals-steps {
  margin-top: 38px;
}

.goals-steps h4 {
  margin: 0 0 24px;

  color: #ffffff;

  font-size: 1.35rem;
  line-height: 1.25;
}

.goals-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;

  padding: 17px 0;

  border-top: 1px solid rgba(176, 123, 45, 0.22);
}

.goals-step > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border-radius: 50%;

  background: #a93257;
  color: #ffffff;

  font-size: 0.9rem;
  font-weight: 700;
}

.goals-step strong {
  display: block;
  margin-bottom: 5px;

  color: #ffffff;

  font-size: 1.02rem;
  line-height: 1.35;
}

.goals-step p {
  margin: 0;

  color: #4a5560;

  font-size: 0.96rem;
  line-height: 1.55;
}

.goals-preview {
  margin-top: 72px;
  padding-top: 54px;

  border-top: 1px solid rgba(176, 123, 45, 0.22);
}

.goals-preview-head {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}

.goals-preview-head span {
  display: block;
  margin-bottom: 10px;

  color: #b07b2d;

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.goals-preview-head h3 {
  margin: 0 0 16px;

  color: #ffffff;

  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1.08;
}

.goals-preview-head p {
  margin: 0;

  color: #4a5560;

  font-size: 1.02rem;
  line-height: 1.65;
}

.goals-preview-pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  align-items: start;

  max-width: 1120px;
  margin: 0 auto;
}

.goals-preview-page {
  text-align: center;
}

.goals-preview-page img {
  display: block;
  width: 100%;
  height: auto;

  background: #faf9f5;

  box-shadow:
    0 14px 30px rgba(40, 30, 25, 0.12);
}

.goals-preview-page span {
  display: block;
  margin-top: 18px;

  color: #ffffff;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}


/* MPU-BEZUG – ABSCHLUSS ZIELE */

.goals-mpu {
  max-width: 900px;
  margin: 78px auto 0;
  padding: 48px 56px;

  background: rgba(255, 255, 255, 0.58);

  border-top: 1px solid rgba(176, 123, 45, 0.32);
  border-bottom: 1px solid rgba(176, 123, 45, 0.32);

  text-align: center;
}

.goals-mpu-eyebrow {
  display: block;
  margin-bottom: 13px;

  color: #b07b2d;

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.goals-mpu h3 {
  margin: 0 0 26px;

  color: #ffffff;

  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
}

.goals-mpu > p {
  max-width: 700px;
  margin: 0 auto 18px;

  color: #44515c;

  font-size: 1rem;
  line-height: 1.7;
  text-align: left;
}

.goals-mpu-message {
  max-width: 720px;
  margin: 30px auto 0;
  padding: 20px 26px;

  border-left: 3px solid #a93257;

  background: rgba(169, 50, 87, 0.055);

  color: #ffffff;

  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.55;

  text-align: left;
}


/* Tablet */
@media (max-width: 1050px) {

  .goals-section {
    padding: 72px 24px 50px;
  }

  .goals-product {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .goals-cover-wrap {
    width: min(100%, 380px);
    margin: 0 auto;
  }

  .goals-preview-pages {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
  }

  .goals-preview-page:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 34px) / 2);
  }

  .motives-intro {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .motives-intro-text {
    max-width: 760px;
    margin: 0 auto;
  }

  .motives-intro-image {
    max-width: 650px;
    margin: 0 auto;
  }

  .motives-explanation {
    grid-template-columns: 1fr;
  }

  .motives-product {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .motives-cover {
    width: min(100%, 350px);
    margin: 0 auto;
  }

  .motives-product-content {
    max-width: 760px;
    margin: 0 auto;
  }

}

/* Smartphone */
@media (max-width: 620px) {

  .goals-section {
    padding: 58px 18px 42px;
  }

  .goals-head h2 {
    font-size: 2rem;
    line-height: 1.08;
  }

  .goals-head p {
    font-size: 1rem;
  }

  .goals-preview-pages {
    grid-template-columns: 1fr;
    gap: 38px;
    max-width: 390px;
  }

  .goals-preview-page span {
    margin-top: 14px;
  }

  .goals-preview-page:last-child {
    grid-column: auto;
    justify-self: auto;
    width: 100%;
  }

  .goals-mpu {
    margin-top: 55px;
    padding: 36px 20px;
  }

  .goals-mpu h3 {
    font-size: 1.8rem;
  }

  .goals-mpu-message {
    padding: 17px 18px;
    font-size: 1.04rem;
  }

  .motives-section {
    padding: 75px 18px;
  }

  .motives-intro h2 {
    font-size: 2.25rem;
  }

  .motives-recognition {
    margin-top: 70px;
  }

  .motives-statements {
    grid-template-columns: 1fr;
  }

  .motives-details-content {
    padding: 32px 20px;
  }

  .motives-benefits {
    grid-template-columns: 1fr;
  }

  .motives-product {
    margin-top: 75px;
    padding-top: 50px;
  }

}


/* ==================================================
   MOTIVE
   ================================================== */

.motives-section {
  padding: 110px 24px;
  background: #fbf8f2;
}

.motives-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.motives-eyebrow {
  display: block;
  margin-bottom: 11px;

  color: #2f7775;

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


/* EINSTIEG */

.motives-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 70px;
  align-items: center;
}

.motives-intro-text {
  max-width: 650px;
}

.motives-intro h2 {
  margin: 0 0 28px;

  color: #ffffff;

  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.05;
}

.motives-intro p {
  margin: 0 0 16px;

  color: #44515c;

  font-size: 1.04rem;
  line-height: 1.7;
}

.motives-thought {
  margin: 28px 0;
  padding: 0;

  border: 0;

  color: #2f7775;

  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-style: italic;
  line-height: 1.15;
}

.motives-question {
  margin-top: 28px !important;

  color: #17364e !important;

  font-size: 1.12rem !important;
  font-weight: 700;
}

.motives-mpu-note {
  color: #2f7775 !important;
  font-weight: 700;
}

.motives-intro-image img {
  display: block;
  width: 100%;
  height: auto;

  box-shadow: 0 16px 36px rgba(25, 45, 55, 0.12);
}


/* KENNST DU DAS? */

.motives-recognition {
  max-width: 1000px;
  margin: 95px auto 0;
  text-align: center;
}

.motives-recognition h3 {
  margin: 0 0 36px;

  color: #ffffff;

  font-size: clamp(2.1rem, 3.4vw, 3.3rem);
  line-height: 1.08;
}

.motives-statements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}

.motives-statement {
  position: relative;

  padding: 18px 20px 18px 52px;

  background: #f3eee5;

  color: #344957;

  font-size: 0.98rem;
  line-height: 1.5;
  text-align: left;
}

.motives-statement::before {
  content: "✓";

  position: absolute;
  top: 17px;
  left: 20px;

  color: #2f7775;

  font-size: 1.05rem;
  font-weight: 700;
}

.motives-recognition-message {
  max-width: 720px;
  margin: 34px auto 0;

  color: #ffffff;

  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
}


/* AUFKLAPPBEREICH */

.motives-details {
  max-width: 1000px;
  margin: 42px auto 0;
}

.motives-details summary {
  width: fit-content;
  margin: 0 auto;
  padding: 14px 24px;

  border: 1px solid rgba(47, 119, 117, 0.45);
  border-radius: 999px;

  color: #ffffff;
  background: transparent;

  font-size: 0.95rem;
  font-weight: 700;

  cursor: pointer;
  list-style: none;
}

.motives-details summary::-webkit-details-marker {
  display: none;
}

.motives-details summary span {
  display: inline-block;
  margin-left: 8px;
  color: #2f7775;
}

.motives-details[open] summary span {
  transform: rotate(180deg);
}

.motives-details-content {
  margin-top: 42px;
  padding: 48px;

  background: #f0f5f2;
}

.motives-details-head {
  max-width: 780px;
  margin: 0 auto 38px;
  text-align: center;
}

.motives-details-head h3 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.15;
}

.motives-explanation {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 44px;
  align-items: start;
}

.motives-explanation h4,
.motives-why h4 {
  margin: 0 0 16px;

  color: #ffffff;

  font-size: 1.3rem;
  line-height: 1.3;
}

.motives-explanation p,
.motives-why p {
  margin: 0 0 15px;

  color: #44515c;

  font-size: 0.98rem;
  line-height: 1.7;
}

.motives-explanation-highlight {
  padding: 28px;

  border-left: 3px solid #2f7775;
  background: #faf9f5;
}

.motives-explanation-highlight > span {
  display: block;
  margin-bottom: 15px;

  color: #2f7775;

  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.motives-why {
  max-width: 760px;
  margin: 48px auto 0;
  padding-top: 38px;

  border-top: 1px solid rgba(47, 119, 117, 0.25);
}

.motives-why-question {
  color: #17364e !important;

  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.3rem !important;
  font-style: italic;
  font-weight: 700;
}


/* PRODUKT */

.motives-product {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 75px;
  align-items: center;

  margin-top: 105px;
  padding-top: 70px;

  border-top: 1px solid rgba(47, 119, 117, 0.25);
}

.motives-cover img {
  display: block;
  width: 100%;
  height: auto;

  box-shadow: 0 18px 38px rgba(30, 40, 50, 0.14);
}

.motives-product-content {
  max-width: 690px;
}

.motives-product-content h3 {
  margin: 0 0 20px;

  color: #ffffff;

  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  line-height: 1.08;
}

.motives-product-content > p {
  margin: 0 0 15px;

  color: #44515c;

  font-size: 1.02rem;
  line-height: 1.7;
}

.motives-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  margin-top: 30px;
}

.motives-benefits > div {
  padding: 18px;

  background: #eef5f3;
}

.motives-benefits strong {
  display: block;
  margin-bottom: 7px;

  color: #ffffff;

  font-size: 0.95rem;
}

.motives-benefits span {
  color: #52616b;

  font-size: 0.88rem;
  line-height: 1.45;
}

.motives-preview-note {
  margin-top: 28px;
  padding: 18px 20px;

  border-left: 3px solid #2f7775;

  background: #f5f1e9;
}

.motives-preview-note strong,
.motives-preview-note span {
  display: block;
}

.motives-preview-note strong {
  margin-bottom: 4px;
  color: #ffffff;
}

.motives-preview-note span {
  color: #59646c;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ── VIER TÜREN ── */
.doors-section {
  padding: 80px 24px;
  background: var(--cream);
}
.doors-inner {
  max-width: 720px;
  margin: 0 auto;
}
.doors-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.doors-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}
.doors-sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 52px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.doors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.door-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(30,25,15,.08);
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.door-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(30,25,15,.13);
}
.door-accent {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}
.door-card:nth-child(1) .door-accent { background: var(--teal); }
.door-card:nth-child(2) .door-accent { background: var(--gold); }
.door-card:nth-child(3) .door-accent { background: var(--navy); }
.door-card:nth-child(4) .door-accent { background: #3d6b53; }

.door-body {
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.door-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.door-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}
.door-icon--1 { background: rgba(0,105,130,.10); }
.door-icon--1 svg { stroke: var(--teal); }
.door-icon--2 { background: rgba(191,165,27,.12); }
.door-icon--2 svg { stroke: var(--gold-light); }
.door-icon--3 { background: rgba(51,51,73,.10); }
.door-icon--3 svg { stroke: var(--navy); }
.door-icon--4 { background: rgba(61,107,83,.10); }
.door-icon--4 svg { stroke: #3d6b53; }

.door-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.door-label--1 { color: var(--teal); }
.door-label--2 { color: var(--gold-light); }
.door-label--3 { color: var(--navy); }
.door-label--4 { color: #3d6b53; }

.door-heading-card {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 12px;
}
.door-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 22px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.door-link {
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: opacity .15s;
}
.door-link:hover { opacity: 0.75; }
.door-link--1 { color: var(--teal); }
.door-link--2 { color: var(--gold-light); }
.door-link--3 { color: var(--navy); }
.door-link--4 { color: #3d6b53; }

@media (max-width: 680px) {
  .doors-grid { grid-template-columns: 1fr; }
  .doors-section { padding: 64px 20px; }
}

/* =========================================================
   VIER THEMENBEREICHE
   ========================================================= */

.themenbereiche {
  --dunkelblau: #003b5c;
  --akzent: #c6a15b;
  --hintergrund: #dce0d1;
  --kartenfarbe: #ffffff;
  --textfarbe: #3f464a;
  --rahmenfarbe: #ddd8cc;

  padding: 80px 24px;
  background-color: var(--hintergrund);
}

.themenbereiche__innen {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.themenbereiche__kopf {
  max-width: none;
  margin-bottom: 44px;
}

.themenbereiche__kicker {
  margin: 0 0 10px;
  color: #7a6023;
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.themenbereiche h2 {
  margin: 0 0 18px;
  color: var(--dunkelblau);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
}

.themenbereiche__einleitung {
  max-width: none;
  margin: 0;
  color: var(--textfarbe);
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
}

.themenbereiche__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.themenkarte {
  position: relative;
  display: flex;
  min-height: 300px;
  padding: 32px;
  overflow: hidden;
  flex-direction: column;
  color: var(--textfarbe);
  background-color: var(--kartenfarbe);
  border: 1px solid var(--rahmenfarbe);
  border-radius: 10px;
  box-shadow: 0 5px 18px rgb(24 44 55 / 7%);
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.themenkarte::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background-color: var(--akzent);
}

.themenkarte__kategorie {
  display: block;
  margin: 0 0 10px;
  color: var(--akzent);
  font-family: Arial, sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.themenkarte h3 {
  margin: 0 0 16px;
  color: var(--dunkelblau);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.5vw, 1.8rem);
  font-weight: 400;
  line-height: 1.2;
}

.themenkarte p {
  margin: 0 0 24px;
  color: var(--textfarbe);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

.themenkarte__link {
  display: inline-flex;
  margin-top: auto;
  align-items: center;
  gap: 8px;
  color: #a0812e;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
}

.themenkarte__link span {
  transition: transform 180ms ease;
}

.themenkarte:hover {
  border-color: var(--akzent);
  box-shadow: 0 12px 28px rgb(24 44 55 / 13%);
  transform: translateY(-4px);
}

.themenkarte:hover .themenkarte__link span {
  transform: translateX(4px);
}

.themenkarte:focus-visible {
  outline: 3px solid var(--dunkelblau);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .themenkarte,
  .themenkarte__link span {
    transition: none;
  }

  .themenkarte:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  .themenbereiche {
    padding: 58px 20px;
  }

  .themenbereiche__kopf {
    margin-bottom: 32px;
  }

  .themenbereiche__raster {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .themenkarte {
    min-height: 0;
    padding: 28px 24px;
  }
}

/* Einstiegsbereich unter dem Hero */
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.einstieg-section { background: #fff; padding: 80px 24px; }
.einstieg-inner { max-width: 1240px; margin: 0 auto; }
.einstieg-kicker { margin: 0 0 10px; color: #7a6023; font-family: Arial, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.einstieg-heading { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; color: var(--ink); line-height: 1.15; margin: 0 0 26px; max-width: 680px; }
.einstieg-reihe { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.einstieg-reihe img { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #c6a15b; margin-top: 6px; }
.einstieg-reihe > div { flex: 1; min-width: 260px; max-width: 720px; }
.einstieg-text { font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; color: var(--muted); line-height: 1.75; margin: 0; }
.einstieg-signatur { font-family: 'Caveat', 'Segoe Print', cursive; font-weight: 600; font-size: 1.4rem; color: #7a6023; margin: 10px 0 0; }

/* =========================================================
   MATERIALIEN: DEINE 5 BUECHER FUER DIE MPU (Basispaket)
   ========================================================= */
.mat-section { background: #faf8f3; padding: 80px 24px; }
.mat-inner { max-width: 1240px; margin: 0 auto; }
.mat-kicker { margin: 0 0 10px; color: #7a6023; font-family: Arial, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mat-heading { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; color: var(--ink); line-height: 1.15; margin: 0 0 14px; }
.mat-sub { font-family: Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--muted); margin: 0 0 34px; }
.mat-intro { font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; color: var(--muted); line-height: 1.7; max-width: 680px; margin: 0 0 36px; }
.mat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mat-chip { display: inline-block; padding: 5px 14px; border: 1px solid #c6a15b; border-radius: 999px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.8rem; font-weight: 600; color: #7a6023; text-decoration: none; background: #fdfcfa; }
.mat-chip:hover { background: #f4ead3; }
.mat-flex { display: flex; gap: 28px; align-items: stretch; flex-wrap: wrap; }
.mat-flex .matA-reihe { flex: 1 1 480px; }
.mat-weg { flex: 1 1 260px; max-width: 320px; }
.mat-weg img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 1px solid #ddd8cc; display: block; }
@media (max-width: 860px) {
  .mat-weg { max-width: none; }
  .mat-weg img { height: 240px; object-position: center 60%; }
}
.matA-reihe { display: grid; gap: 16px; }
.mat-schritt { display: flex; gap: 18px; position: relative; }
.mat-schritt::before { content: ''; position: absolute; left: 19px; top: 60px; bottom: -40px; border-left: 2px dashed #c6a15b; }
.mat-schritt:last-child::before { display: none; }
.mat-pin { flex-shrink: 0; width: 40px; height: 40px; margin-top: 20px; border-radius: 50%; background: linear-gradient(135deg, #d4ae67, #b8860b); color: #fff; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 700; box-shadow: 0 3px 8px rgba(122, 96, 35, 0.3); position: relative; z-index: 1; }
.matA-buch { flex: 1; display: flex; gap: 18px; align-items: flex-start; padding: 22px 26px; background: #fdfcfa; border: 1px solid #c6a15b; border-radius: 14px; text-decoration: none; }
.mat-ikon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: #f4ead3; display: flex; align-items: center; justify-content: center; }
.mat-ikon svg { width: 26px; height: 26px; stroke: #a8842c; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mat-buecher { background: #fff; padding: 92px 24px 72px; }
.mat-cover-reihe { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; margin-top: 26px; }
.mat-cover { text-decoration: none; text-align: center; }
.mat-cover img { width: 100%; border-radius: 6px; border: 1px solid #ddd8cc; box-shadow: 0 8px 20px rgba(29, 58, 79, 0.14); display: block; }
.mat-cover span { display: none; }
a.mat-cover:hover img { box-shadow: 0 12px 26px rgba(29, 58, 79, 0.22); }
@media (max-width: 900px) { .mat-cover-reihe { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .mat-cover-reihe { grid-template-columns: repeat(2, 1fr); } }
.mat-abschluss { margin-top: 28px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 22px 28px; background: #fdfcfa; border: 1px solid #ddd8cc; border-radius: 14px; }
.mat-abschluss .mat-ikon { width: 52px; height: 52px; }
.mat-abschluss > div { flex: 1; min-width: 240px; }
.mat-abschluss h3 { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.mat-abschluss p { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0; }
.matA-buch h3 { font-family: Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.matA-buch h3 .beginn { display: inline-block; margin-left: 8px; padding: 2px 10px; background: var(--ink); color: #fff; border-radius: 4px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; vertical-align: middle; }
.matA-buch p { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0; }
.matA-frage { font-family: Georgia, serif; font-style: italic; color: #7a6023 !important; margin-top: 8px !important; }
.mat-mehr { margin-top: 44px; }
.mat-mehr-label { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; margin: 0 0 14px; }
.mat-mehr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mat-mehr-karte { padding: 20px 24px; background: #fdfcfa; border: 1px solid #ddd8cc; border-radius: 14px; }
.mat-mehr-karte h4 { font-family: Georgia, serif; font-size: 1.05rem; color: var(--ink); margin: 0 0 8px; }
.mat-mehr-karte p { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin: 0; }
.mat-begleitung { margin-top: 28px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 24px 28px; background: #fdfcfa; border: 1px solid #c6a15b; border-radius: 14px; }
.mat-begleitung img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #c6a15b; }
.mat-begleitung > div { flex: 1; min-width: 240px; }
.mat-begleitung h3 { font-family: Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.mat-begleitung p { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* =========================================================
   KOSTENLOSER EINSTIEG
   ========================================================= */

.kostenloser-einstieg {
  --dunkelblau: #003b5c;
  --akzent: #bd7900;
  --buttonfarbe: #c5ad00;
  --button-hover: #ae9700;
  --hintergrund: #fbf7ef;
  --textfarbe: #293d48;

  padding: 80px 24px;
  overflow: hidden;
  background-color: var(--hintergrund);
}

.kostenloser-einstieg__innen {
  display: grid;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 70px;
}

.kostenloser-einstieg__bild {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kostenloser-einstieg__bild img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
}

.kostenloser-einstieg__inhalt {
  max-width: 590px;
}

.kostenloser-einstieg__kicker {
  margin: 0 0 12px;
  color: var(--akzent);
  font-family: Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kostenloser-einstieg h2 {
  margin: 0 0 26px;
  color: var(--dunkelblau);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  text-wrap: balance;
}

.kostenloser-einstieg__inhalt p {
  margin: 0 0 18px;
  color: var(--textfarbe);
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
}

.kostenloser-einstieg__einleitung {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.2rem !important;
  line-height: 1.55 !important;
}

.kostenloser-einstieg__vorteile {
  display: grid;
  margin: 26px 0 32px;
  padding: 0;
  gap: 13px;
  list-style: none;
}

.kostenloser-einstieg__vorteile li {
  position: relative;
  padding-left: 40px;
  color: var(--dunkelblau);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.kostenloser-einstieg__vorteile li::before {
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  width: 28px;
  height: 28px;
  color: var(--akzent);
  content: "✓";
  background-color: #f3ead8;
  border-radius: 50%;
  place-items: center;
}

.kostenloser-einstieg__button {
  display: inline-flex;
  min-height: 50px;
  padding: 13px 22px;
  align-items: center;
  justify-content: center;
  color: #172b34;
  background-color: var(--buttonfarbe);
  border-radius: 6px;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.kostenloser-einstieg__button:hover {
  background-color: var(--button-hover);
  box-shadow: 0 8px 20px rgb(0 59 92 / 15%);
  transform: translateY(-2px);
}

.kostenloser-einstieg__button:focus-visible {
  outline: 3px solid var(--dunkelblau);
  outline-offset: 4px;
}

@media (max-width: 850px) {
  .kostenloser-einstieg {
    padding: 64px 22px;
  }

  .kostenloser-einstieg__innen {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .kostenloser-einstieg__bild {
    order: 2;
  }

  .kostenloser-einstieg__inhalt {
    max-width: none;
    order: 1;
  }

  .kostenloser-einstieg__bild img {
    max-width: 430px;
  }
}

@media (max-width: 520px) {
  .kostenloser-einstieg {
    padding: 52px 20px;
  }

  .kostenloser-einstieg h2 {
    font-size: 2.35rem;
    line-height: 1.08;
  }

  .kostenloser-einstieg__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kostenloser-einstieg__button {
    transition: none;
  }

  .kostenloser-einstieg__button:hover {
    transform: none;
  }
}

/* ===== Klientenstimmen (Design-Entwurf 24.08.2026) ===== */
.stimmen-section { background: #f6f4ef; padding: 72px 24px; }
.stimmen-inner { max-width: 1240px; margin: 0 auto; }
.stimmen-kopf { text-align: center; margin: 0 0 40px; }
.stimmen-kicker { margin: 0 0 10px; color: #7a6023; font-family: Arial, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.stimmen-heading { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; color: var(--ink); line-height: 1.25; margin: 0 0 14px; }
.stimmen-subline { font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; color: #6b625a; line-height: 1.6; margin: 0 auto; max-width: 640px; }
.stimmen-zitate { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.stimme { position: relative; margin: 0; background: #fdfcfa; border: 1px solid rgba(198,161,91,0.45); border-radius: 14px; padding: 26px 30px 22px 74px; }
.stimme::before { content: '“'; position: absolute; left: 24px; top: 18px; font-family: Georgia, serif; font-weight: 700; font-size: 3.4rem; line-height: 0.75; color: #c6a15b; }
.stimme-text { font-family: Georgia, serif; font-style: italic; font-size: 1.02rem; color: #4a4238; line-height: 1.65; margin: 0 0 14px; }
.stimme-wer { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: #a0812e; margin: 0; }
.stimmen-fuss { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 40px 0 0; flex-wrap: wrap; }
.stimmen-fuss-titel { font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; font-weight: 600; color: #3d3a35; margin: 0 0 6px; }
.stimmen-fuss-link { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.95rem; font-weight: 600; color: #83384E; text-decoration: none; }
.stimmen-fuss-hinweis { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.85rem; color: #8a8178; margin: 8px 0 0; }
@media (max-width: 720px) {
  .stimmen-zitate { grid-template-columns: 1fr; gap: 18px; }
  .stimme { padding-left: 30px; }
  .stimme::before { display: none; }
  .stimmen-fuss { flex-direction: column; text-align: center; gap: 14px; }
}

/* ===== Orientierungs-Sektion mit zwei Karten (Anprobe 24.08.2026) ===== */
.orient-kopf { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.orient-eyebrow { display: block; margin: 0 0 14px; color: #a0812e; font-family: Arial, sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.orient-kopf h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 400; color: var(--ink); line-height: 1.2; margin: 0 0 18px; }
.orient-kopf p { font-family: Georgia, 'Times New Roman', serif; font-size: 1.08rem; line-height: 1.7; color: #4a4238; margin: 0 auto; max-width: 720px; }
.orient-reihe { display: flex; gap: 26px; align-items: stretch; justify-content: center; flex-wrap: wrap; max-width: 1420px; margin: 0 auto; }
.orient-karte { flex: 1.6 1 480px; max-width: none; background: #faf9f5; border: 1px solid #c6a15b; border-radius: 16px; padding: 34px 36px; box-sizing: border-box; }
.orient-karte--buch { flex: 1 1 340px; max-width: 560px; }
.orient-label { display: block; margin: 0 0 16px; color: #7a6023; font-family: Arial, sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.orient-karte h3 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 400; color: var(--ink); margin: 0 0 14px; }
.orient-lead { font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.65; color: #4a4238; margin: 0 0 18px; }
.orient-untertitel { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.05rem; color: #4a4238; margin: 0 0 16px; }
.orient-checks { list-style: none; margin: 0 0 24px; padding: 0; }
.orient-checks li { position: relative; padding: 6px 0 6px 32px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; line-height: 1.55; color: #3d3a35; }
.orient-checks li::before { content: '\2713'; position: absolute; left: 2px; top: 5px; color: #c6a15b; font-weight: 700; font-size: 1.1rem; }
.orient-knopfzeile { margin: 0 0 12px; }
.orient-knopfzeile:last-child { margin-bottom: 0; }
.orient-leseprobe { display: inline-flex; align-items: center; gap: 8px; justify-content: center; min-height: 46px; padding: 10px 26px; border: 1.5px solid #c6a15b; border-radius: 999px; color: #7a6023; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.orient-pfeil { flex: 0 0 120px; align-self: center; text-align: center; }
.orient-pfeil-symbol { font-size: 2.2rem; color: #a0812e; line-height: 1; }
.orient-pfeil p { margin: 8px 0 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.85rem; font-weight: 600; color: #7a6023; line-height: 1.4; }
.orient-buch-reihe { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; }
.orient-buch3d { flex: 0 0 205px; margin: 0 auto; perspective: 1400px; }
.orient-buch3d__koerper { position: relative; transform-style: preserve-3d; transform: rotateY(9deg); filter: drop-shadow(8px 14px 18px rgba(40,25,10,0.35)); }
.orient-buch3d__cover { display: block; width: 100%; border-radius: 3px 8px 8px 3px; transform: translateZ(22px); backface-visibility: hidden; }
.orient-buch3d__ruecken { position: absolute; left: 0; top: 0; width: 44px; height: 100%; transform-origin: left center; transform: rotateY(-90deg); background: linear-gradient(90deg, #2b1f16 0%, #4a3320 55%, #1c130c 100%); border-radius: 3px 0 0 3px; }
.orient-buch-text { flex: 1 1 260px; min-width: 240px; }
@media (max-width: 1080px) {
  .orient-pfeil { flex: 1 1 100%; }
  .orient-pfeil-symbol { display: inline-block; transform: rotate(90deg); }
}

/* ===== Einstieg "Mein Ansatz" nach Design-Entwurf (24.08.2026) ===== */
.ansatz-inner { max-width: 1240px; margin: 0 auto; display: flex; gap: 80px; align-items: center; flex-wrap: wrap; }
.ansatz-bild { flex: 0 1 420px; margin: 0 auto; border: 1.5px solid #c6a15b; border-radius: 40% / 28%; padding: 12px; }
.ansatz-bild img { display: block; width: 100%; border-radius: 38% / 26%; }
.ansatz-text { flex: 1 1 520px; max-width: 720px; }
.ansatz-heading { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 400; color: var(--ink); line-height: 1.22; margin: 0 0 22px; }
.ansatz-absatz { font-family: 'Segoe UI', Arial, sans-serif; font-size: 1.02rem; line-height: 1.75; color: #3d3a35; margin: 0 0 18px; }
.ansatz-kernsatz { position: relative; background: #dfe3d3; border-radius: 12px; padding: 24px 30px 24px 66px; margin: 24px 0; }
.ansatz-kernsatz-zeichen { position: absolute; left: 22px; top: 14px; font-family: Georgia, serif; font-weight: 700; font-size: 3rem; line-height: 1; color: #c6a15b; }
.ansatz-kernsatz p { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 1.02rem; font-weight: 700; font-style: italic; line-height: 1.7; color: #1f3a4d; }
.ansatz-signatur { font-family: 'Caveat', 'Segoe Print', cursive; font-weight: 600; font-size: 1.8rem; color: #b98a2e; margin: 10px 0 0; }
@media (max-width: 900px) {
  .ansatz-inner { gap: 36px; }
  .ansatz-bild { flex-basis: 300px; }
  .ansatz-kernsatz p br { display: none; }
}

/* ===== Goldene Sektions-Trenner (Anprobe 24.08.2026) ===== */
.gold-trenner { height: 3px; background: linear-gradient(90deg, rgba(198,161,91,0) 0%, #c6a15b 18%, #c6a15b 82%, rgba(198,161,91,0) 100%); }

/* ===== Buecher in Stationsgruppen mit goldenen Schrittnummern (24.08.2026) ===== */
.weg-gruppen { display: flex; flex-wrap: wrap; gap: 40px 44px; margin-top: 30px; justify-content: center; }
.weg-gruppe { flex: 1 1 calc(var(--anzahl) * 200px); max-width: calc(var(--anzahl) * 250px + 60px); }
.weg-gruppe-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.weg-gruppe-kopf .mat-pin { margin-top: 0; width: 36px; height: 36px; font-size: 1.05rem; }
.weg-gruppe-kopf span { font-family: Georgia, serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.2; }
.weg-gruppe-cover { display: grid; grid-template-columns: repeat(var(--anzahl), 1fr); gap: 22px; }
@media (max-width: 560px) {
  .weg-gruppe { flex-basis: 100%; max-width: 420px; }
  .weg-gruppe-cover { grid-template-columns: repeat(var(--anzahl), 1fr); gap: 14px; }
}

/* ===== Buecherflaeche nach Wireframe: vier Bloecke (24.08.2026) ===== */
.wegb { margin-top: 30px; }
.wegb-block { margin: 0 0 44px; }
.wegb-block:last-child { margin-bottom: 0; }
.wegb-karten { display: flex; gap: 24px; flex-wrap: wrap; }
.wegb-karte { flex: 0 1 240px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: #fdfcfa; border: 1px solid #ddd8cc; border-radius: 12px; padding: 20px; text-decoration: none; }
.wegb-karte--gross { flex-basis: 300px; }
a.wegb-karte:hover { box-shadow: 0 10px 24px rgba(29, 58, 79, 0.16); }
.wegb-karte img { width: 100%; border-radius: 6px; border: 1px solid #ddd8cc; box-shadow: 0 8px 20px rgba(29, 58, 79, 0.14); display: block; }
.wegb-titel { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.wegb-sub { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.9rem; color: var(--muted); }
.wegb-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--teal); }
.wegb-link[aria-disabled="true"] { color: var(--muted); }
.wegb-abschluss { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; background: #fdfcfa; border: 1px solid #ddd8cc; border-radius: 12px; padding: 24px 30px; }
.wegb-abschluss img { width: 150px; border-radius: 6px; border: 1px solid #ddd8cc; box-shadow: 0 8px 20px rgba(29, 58, 79, 0.14); }
.wegb-abschluss-titel { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; }

/* ===== Mini-Cover rechts in den Weg-Kaesten (Anprobe 24.08.2026, erst nur Ziele) ===== */
.matA-mini-cover { flex-shrink: 0; width: 78px; margin-left: auto; align-self: center; border-radius: 4px; border: 1px solid #ddd8cc; box-shadow: 0 4px 12px rgba(29, 58, 79, 0.18); }
@media (max-width: 560px) {
  .matA-buch { flex-wrap: wrap; }
  .matA-mini-cover { width: 72px; margin: 10px 0 0; align-self: flex-start; }
}
.matA-mini-grid { flex-shrink: 0; margin-left: auto; align-self: center; display: grid; grid-template-columns: repeat(2, 78px); gap: 10px; }
.matA-mini-grid img { width: 78px; border-radius: 4px; border: 1px solid #ddd8cc; box-shadow: 0 4px 12px rgba(29, 58, 79, 0.18); display: block; }
@media (max-width: 560px) {
  .matA-mini-grid { margin: 10px 0 0; grid-template-columns: repeat(4, 64px); gap: 8px; align-self: flex-start; }
  .matA-mini-grid img { width: 64px; }
}

/* ===== MPU-Navigation-Mockup statt CSS-3D-Buch (25.08.2026) ===== */
.orient-buch-bild { flex: 0 0 235px; width: 235px; height: auto; margin: 0 auto; align-self: center; }

/* ===== Quiz + PDF als hervorgehobene Links im MPU-verstehen-Kasten (25.08.2026) ===== */
.orient-highlights { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.orient-highlight { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: #fdfcfa; border: 1px solid #d3bd8b; border-radius: 10px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.92rem; font-weight: 600; color: #4a3a1f; text-decoration: none; line-height: 1.4; }
.orient-highlight:hover { border-color: #A28B12; }
.orient-highlight span { flex-shrink: 0; }

/* ===== Gefuehle-Bereich: Tipp-Kasten (25.08.2026) ===== */
.gefuehle-tipp { margin-top: 30px; padding: 20px 26px; background: #ecf3f1; border-left: 3px solid #c6a15b; border-radius: 0 10px 10px 0; }
.gefuehle-tipp-label { margin: 0 0 8px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a0812e; }
.gefuehle-tipp p:not(.gefuehle-tipp-label) { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; line-height: 1.65; color: #3d3a35; }

/* ===== Themenbereich-Template nach Design-Entwurf (25.08.2026, erst Gefuehle) ===== */
.tb-wrap { max-width: 1240px; margin: 0 auto; }
.tb-intro { display: flex; gap: 48px; align-items: stretch; flex-wrap: wrap; margin: 0 0 60px; }
.tb-intro-text { flex: 1 1 420px; max-width: 640px; }
.tb-intro-text h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; color: #1f3a4d; line-height: 1.3; margin: 0 0 20px; }
.tb-intro-text p { font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; line-height: 1.75; color: #3d3a35; margin: 0 0 16px; }
.tb-wisch { display: inline-block; font-family: 'Caveat', 'Segoe Print', cursive !important; font-weight: 600; font-size: 1.9rem !important; color: #47503a !important; background: #dfe3d3; padding: 4px 26px 8px; border-radius: 30px 10px 26px 10px; transform: rotate(-1.5deg); margin: 10px 0 18px !important; }
.tb-bild { flex: 1 1 380px; position: relative; min-height: 440px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #cfd6c2, #aeb89d); background-size: cover; background-position: center; }
.tb-bild-badge { position: absolute; left: 18px; top: 18px; width: 46px; height: 46px; background: #47503a; color: #fff; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; border-radius: 10px; z-index: 2; }
.tb-bild-zitat { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(82%, 360px); color: #ffffff; font-family: Georgia, serif; font-style: italic; font-size: 1rem; line-height: 1.65; text-align: center; text-shadow: 0 1px 10px rgba(0,0,0,0.75), 0 0 26px rgba(0,0,0,0.5); }
.tb-bild-platzhalter { position: absolute; left: 20px; bottom: 20px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.85); }
.tb-mitte-h { text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem; font-weight: 700; color: #1f3a4d; margin: 0 0 28px; }
.tb-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; max-width: 1100px; margin: 0 auto; }
.tb-check { display: flex; gap: 12px; align-items: flex-start; background: #f4f6ee; border-radius: 999px; padding: 11px 22px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.95rem; line-height: 1.5; color: #3d3a35; }
.tb-check-ikon { flex-shrink: 0; color: #5c6a4a; font-weight: 700; }
.tb-praegt { max-width: fit-content; margin: 28px auto 0; background: #e7ebdc; border-radius: 999px; padding: 12px 30px; text-align: center; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.98rem; color: #3d3a35; }
.tb-praegt strong { color: #47503a; }
.tb-karten { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.tb-karte { flex: 1 1 320px; background: #f1f3ec; border-radius: 14px; padding: 24px 28px; display: flex; gap: 16px; align-items: flex-start; }
.tb-karte p { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.98rem; line-height: 1.65; color: #3d3a35; }
.tb-karte-ikon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: #dfe3d3; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #47503a; }
.tb-pfeil { flex: 0 0 auto; font-size: 2rem; color: #5c6a4a; font-weight: 700; }
.tb-karte--breit { max-width: 1100px; margin: 18px auto 0; }
.tb-heft { display: flex; gap: 44px; align-items: flex-start; flex-wrap: wrap; max-width: 1240px; margin: 70px auto 0; }
.tb-heft-cover { flex: 0 1 230px; margin: 0 auto; }
.tb-heft-cover img { display: block; width: 100%; border-radius: 8px; box-shadow: 0 14px 30px rgba(29, 58, 79, 0.25); }
.tb-heft-mitte { flex: 1.2 1 320px; }
.tb-heft-mitte h3, .tb-heft-blick h4 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; font-weight: 700; color: #1f3a4d; margin: 0 0 10px; }
.tb-heft-untertitel { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.98rem; color: #3d3a35; line-height: 1.6; margin: 0 0 22px; }
.tb-heft-punkt { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.95rem; line-height: 1.6; color: #3d3a35; padding: 12px 0; border-bottom: 1px solid rgba(92, 106, 74, 0.18); }
.tb-heft-punkt:last-of-type { border-bottom: none; }
.tb-heft-punkt strong { color: #1f3a4d; }
.tb-heft-blick { flex: 1 1 280px; background: #f1f3ec; border-radius: 14px; padding: 28px 30px; }
.tb-heft-blick p { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.92rem; line-height: 1.65; color: #3d3a35; margin: 0 0 14px; }
.tb-button { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; background: #47503a; color: #fff; border-radius: 999px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.tb-button[aria-disabled="true"] { opacity: 0.75; cursor: default; }
.tb-handschrift { font-family: 'Caveat', 'Segoe Print', cursive; font-weight: 600; font-size: 1.45rem; color: #5c6a4a; margin: 18px 0 0; text-align: center; }
@media (max-width: 760px) {
  .tb-checks { grid-template-columns: 1fr; }
  .tb-check { border-radius: 14px; }
  .tb-pfeil { width: 100%; text-align: center; transform: rotate(90deg); }
  .tb-bild { min-height: 360px; }
}

/* Ziele-Bereich: dunklere Gruentoene (Anprobe 25.08.2026) */
#ziele .tb-wisch { background: #c9d1b6; color: #39412c !important; }
#ziele .tb-check { background: #e6eadb; }
#ziele .tb-karte { background: #e2e6d4; }
#ziele .tb-heft-blick { background: #e2e6d4; }
#ziele .tb-bild { background: linear-gradient(160deg, #b7c0a3, #939e7f); }
.tb-bild-frei { flex: 1 1 440px; max-width: 560px; align-self: center; margin: 0 auto; display: block; width: 100%; height: auto; }

/* ===== Verkaufs-Einstieg "Die echte MPU-Frage" (Anprobe 26.08.2026) ===== */
.mfrage-section { background: #fff; padding: 72px 24px; }
.mfrage-heading { text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 2.9vw, 2.1rem); font-weight: 700; color: #1f3a4d; line-height: 1.35; margin: 0 0 18px; }
.mfrage-intro { text-align: center; font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; color: #6b625a; margin: 0 0 30px; }
.mfrage-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.mfrage { position: relative; margin: 0; padding: 24px 26px 24px 70px; background: #fdfcfa; border: 1px solid #c6a15b; border-radius: 14px; font-family: Georgia, serif; font-style: italic; font-size: 1.08rem; line-height: 1.6; color: #4a4238; }
.mfrage::before { content: '“'; position: absolute; left: 22px; top: 14px; font-family: Georgia, serif; font-weight: 700; font-size: 3.2rem; line-height: 0.75; color: #c6a15b; }
.mfrage-beruhigung { max-width: 720px; margin: 32px auto 0; text-align: center; font-family: 'Segoe UI', Arial, sans-serif; font-size: 1.02rem; line-height: 1.7; color: #3d3a35; }
@media (max-width: 720px) { .mfrage-raster { grid-template-columns: 1fr; } .mfrage { padding-left: 26px; } .mfrage::before { display: none; } }

/* ===== Verkaufsseiten-Bloecke 2-9 (Anprobe 26.08.2026) ===== */
.mblock { background: #fff; padding: 64px 24px; }
.mblock--pergament { background: #faf8f3; }
.mblock-text { max-width: 760px; margin: 30px auto 0; }
.mblock-text p { font-family: 'Segoe UI', Arial, sans-serif; font-size: 1.02rem; line-height: 1.75; color: #3d3a35; margin: 0 0 16px; }
.mblock-text p:last-child { margin-bottom: 0; }
.m-platzhalter { max-width: 760px; margin: 30px auto 0; padding: 20px 24px; border: 2px dashed #c6a15b; border-radius: 12px; background: #fdf9ef; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.92rem; color: #8a7346; }
.m-tabelle { max-width: 900px; margin: 0 auto; border: 1px solid #ddd8cc; border-radius: 12px; overflow: hidden; }
.m-zeile { display: grid; grid-template-columns: 1fr 1.4fr; }
.m-zeile > div { padding: 14px 20px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.98rem; line-height: 1.55; color: #3d3a35; border-top: 1px solid #eee8da; }
.m-zeile > div:first-child { font-family: Georgia, serif; font-style: italic; color: #4a4238; border-right: 1px solid #eee8da; }
.m-zeile--kopf > div { border-top: none; background: #f1ede3; font-family: 'Segoe UI', Arial, sans-serif !important; font-style: normal !important; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b625a !important; }
.m-vergleich { display: flex; gap: 20px; max-width: 900px; margin: 0 auto; flex-wrap: wrap; }
.m-vergleich-karte { flex: 1 1 320px; padding: 22px 26px; border-radius: 12px; background: #f1ede3; }
.m-vergleich-karte span { display: block; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8178; margin: 0 0 10px; }
.m-vergleich-karte p { margin: 0; font-family: Georgia, serif; font-style: italic; font-size: 1.05rem; line-height: 1.6; color: #4a4238; }
.m-vergleich-karte--gut { background: #dfe3d3; }
.m-vergleich-karte--gut span { color: #47503a; }
.m-angebote { display: flex; gap: 26px; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; align-items: stretch; }
.m-angebot { flex: 1 1 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px 32px; background: #faf9f5; border: 1px solid #c6a15b; border-radius: 16px; }
.m-angebot p { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.98rem; line-height: 1.65; color: #3d3a35; }
.m-preis { font-weight: 700; color: #1f3a4d !important; margin-top: auto !important; }
.m-begleitet { max-width: 1000px; margin: 26px auto 0; text-align: center; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.95rem; color: #6b625a; }
.m-begleitet-link { color: #83384E; font-weight: 600; }
@media (max-width: 640px) { .m-zeile { grid-template-columns: 1fr; } .m-zeile > div:first-child { border-right: none; padding-bottom: 4px; } .m-zeile > div:last-child { border-top: none; padding-top: 4px; } .m-zeile--kopf { display: none; } }
.m-technik { font-size: 0.85rem !important; color: #8a8178 !important; }
.m-beispiel { max-width: 760px; margin: 30px auto 0; padding: 26px 30px; background: #fdfcfa; border: 1px solid #ddd8cc; border-left: 4px solid #c6a15b; border-radius: 0 14px 14px 0; }
.m-beispiel-label { display: block; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a0812e; margin: 0 0 12px; }
.m-beispiel p { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; line-height: 1.75; color: #3d3a35; }
.m-beispiel-frage { margin: 18px 0 0 !important; font-family: Georgia, serif !important; font-weight: 700; font-size: 1.05rem !important; color: #1f3a4d !important; }
.m-beispiel-frage em { font-family: 'Segoe UI', Arial, sans-serif; font-weight: 400; font-style: normal; font-size: 0.88rem; color: #8a8178; }
.m-beispiel-antwort { margin-top: 14px; padding: 20px 24px; background: #dfe3d3; border-radius: 12px; }
.m-beispiel-antwort p { margin: 0 !important; font-family: Georgia, serif !important; font-style: italic; font-size: 1.02rem !important; line-height: 1.7 !important; color: #39412c !important; }
.m-beispiel-liste { margin: 14px 0 0; padding: 0; list-style: none; }
.m-beispiel-liste li { position: relative; padding: 6px 0 6px 30px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 1rem; line-height: 1.65; color: #3d3a35; }
.m-beispiel-liste li::before { content: '\2713'; position: absolute; left: 4px; top: 6px; color: #5c6a4a; font-weight: 700; }
.m-stimme-wer { display: block; margin-top: 12px; font-family: 'Segoe UI', Arial, sans-serif; font-style: normal; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: #a0812e; }

/* ===== ZMG-Ueberblick: Weg mit hervorgehobenen Stationen (Anprobe 27.08.2026) ===== */
.zmg-weg { background: #fff; padding: 56px 24px 64px; }
.zmg-weg-h { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 400; color: #1f3a4d; margin: 10px 0 30px; }
.zmg-weg-reihe { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.zmg-station { flex: 1 1 150px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px; background: #fdfcfa; border: 1px solid #ddd8cc; border-radius: 14px; text-decoration: none; text-align: center; }
.zmg-station img { width: 92px; border-radius: 5px; border: 1px solid #ddd8cc; box-shadow: 0 6px 14px rgba(29,58,79,0.16); }
.zmg-station strong { font-family: Georgia, serif; font-size: 0.98rem; color: #1f3a4d; line-height: 1.3; }
.zmg-station .mat-pin { margin-top: 0; width: 34px; height: 34px; font-size: 1rem; }
.zmg-station--aktiv { background: #eef0e6; border: 2px solid #5c6a4a; }
a.zmg-station:hover { box-shadow: 0 10px 22px rgba(29,58,79,0.16); }
.zmg-station-anlaesse { font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.8rem; color: #6b625a; line-height: 1.5; display: flex; align-items: center; min-height: 128px; }
.zmg-weg-hinweis { margin: 24px 0 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.95rem; color: #6b625a; }
.matA-buch--hervor { background: #eef0e6 !important; border: 2px solid #5c6a4a !important; }

/* ===== ZMG geteilter Kopf (Anprobe 27.08.2026) ===== */
.zmg-kopf { display: flex; align-items: stretch; flex-wrap: wrap; background: #c9d0b8; min-height: 540px; }
.zmg-kopf { position: relative; }
.zmg-zurueck { position: absolute; top: 30px; left: clamp(24px, 4vw, 64px); margin-bottom: 0 !important; z-index: 2; }
.zmg-kopf-links { flex: 1 1 340px; padding: 80px clamp(24px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.zmg-kopf-mitte { flex: 0 0 auto; background: #faf8f3; padding: 40px 32px; margin: 36px 0; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.zmg-kopf-text { flex: 1 1 340px; padding: 80px clamp(24px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1000px) { .zmg-kopf-mitte { flex: 1 1 100%; align-items: center; order: 3; } }
.zmg-kzeile { display: flex; align-items: center; gap: 16px; padding: 11px 22px 11px 16px; background: #fdfcfa; border: 1px solid rgba(198,161,91,0.55); border-radius: 12px; text-decoration: none; width: 100%; max-width: 380px; }
.zmg-kzeile strong { flex: 1; font-family: Georgia, serif; font-size: 1rem; color: #1f3a4d; }
.zmg-kzeile .mat-pin { margin-top: 0; width: 32px; height: 32px; font-size: 0.95rem; flex-shrink: 0; }
.zmg-kzeile img { height: 56px; border-radius: 3px; border: 1px solid #ddd8cc; }
.zmg-kzeile-cover { display: flex; gap: 5px; }
.zmg-kzeile--aktiv { background: #eef0e6; border: 2px solid #5c6a4a; }
a.zmg-kzeile:hover { box-shadow: 0 8px 18px rgba(29,58,79,0.14); }

/* ===== Heft-Spruch auf den Buchseiten (Anprobe 27.08.2026) ===== */
.heft-spruch { background: #fff; padding: 44px 24px; }
.heft-spruch p { max-width: 820px; margin: 0 auto; text-align: center; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.3rem; line-height: 1.7; color: #1f3a4d; }

/* ===== Antwort mit Erlaeuterung darunter (Ziele Block 3, 28.08.2026) ===== */
.m-antworten { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.m-antwort-block { background: #fdfcfa; border: 1px solid #ddd8cc; border-left: 4px solid #c6a15b; border-radius: 0 12px 12px 0; padding: 20px 26px; }
.m-antwort { margin: 0 0 10px; font-family: Georgia, serif; font-style: italic; font-size: 1.08rem; line-height: 1.6; color: #4a4238; }
.m-antwort-erklaerung { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.98rem; line-height: 1.7; color: #3d3a35; }
.m-antwort-klapp summary { cursor: pointer; list-style: none; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.92rem; font-weight: 600; color: #a0812e; }
.m-antwort-klapp summary::-webkit-details-marker { display: none; }
.m-antwort-klapp[open] summary span { display: inline-block; transform: rotate(180deg); }
.m-antwort-klapp .m-antwort-erklaerung { margin-top: 12px; }

/* Kostenfrei-Band unter der Kopfleiste */
.gratis-band { display:flex; align-items:center; justify-content:center; gap:20px; background:#3e4a56; color:#e8ca79; text-align:center; padding:8px 22px; border-top:4px solid #c6a15b; border-bottom:4px solid #c6a15b; font-family:'Segoe UI',Arial,sans-serif; font-size:1.15rem; font-weight:600; letter-spacing:0.01em; text-decoration:none; }
.gratis-band .gb-hand { font-family:'Caveat','Segoe Print',cursive; font-weight:600; font-size:1.5rem; letter-spacing:0; color:#e8ca79; }
.gratis-unterband { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; background:#A28B12; border-bottom:4px solid #c6a15b; color:#6b5a10; text-align:left; padding:2px 10px 6px; font-family:'Segoe UI',Arial,sans-serif; font-size:0.78rem; font-weight:500; line-height:1.6; }
.gratis-unterband .gu-gruppe { padding:2px 18px; }
.gratis-unterband .gu-gruppe + .gu-gruppe { border-left:1px solid rgba(198,161,91,0.55); }
.gratis-unterband .gu-titel { display:block; font-size:0.84rem; font-weight:700; color:#4a3a1f; margin-bottom:2px; }
.gratis-unterband a { color:#6b5a10; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(107,90,16,0.45); }
.gratis-unterband a:hover { color:#463b0a; text-decoration-color:#463b0a; }
.gratis-unterband .gu-alle { align-self:center; font-weight:700; }
.gratis-unterband .gu-alle a { color:#8a6d0e; text-decoration:none; }
.gratis-unterband .gu-alle a:hover { color:#463b0a; }
@media (max-width: 760px) { .gratis-band .gb-hand { display:none; } .gratis-unterband .gu-gruppe + .gu-gruppe { border-left:none; } }

/* Variante B: Chips */
.gratis-unterband .gu-chip { display:inline-block; background:transparent; border:none; border-radius:10px; padding:4px 18px; text-align:left; text-decoration:none; color:#fff; line-height:1.35; }
.gratis-unterband .gu-chip .gc-titel { display:block; font-size:0.84rem; font-weight:400; color:#ffffff; }
.gratis-unterband .gu-chip .gc-sub { display:block; font-size:0.76rem; font-weight:400; font-style:italic; color:rgba(255,255,255,0.88); }
.gratis-unterband .gu-chip .gc-sub a { color:rgba(255,255,255,0.95); }
a.gu-chip:hover { background:rgba(255,255,255,0.14); }
.gratis-unterband .gu-chip-cta { background:transparent; border:1px solid rgba(255,255,255,0.85); border-radius:999px; padding:6px 22px; }
.gratis-unterband .gu-chip-cta .gc-titel { color:#ffffff; }
.gratis-unterband .gu-chip-cta:hover { background:rgba(255,255,255,0.14); }

.orient-unterkarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .orient-unterkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .orient-unterkarten { grid-template-columns: 1fr; } }