/* DiKita — Stylesheet
   Design-Tokens aus dem Mockup: Farben, Typografie, Spacing, Radien, Schatten.
   Lokal gehostete Schriften (DSGVO-konform), keine externen Ressourcen. */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --mint: #2d8cf0;
  --mint-soft: #dbeafe;
  --mint-dark: #1a6fd4;
  --orange: #2d8cf0;
  --orange-dark: #1a6fd4;
  --navy: #2a3142;
  --navy-deep: #1a1f2e;
  --bg: #FFFFFF;
  --bg-soft: #F7F9F8;
  --text: #1F2937;
  --text-muted: #6B7280;
  --border: #E5E7EB;

  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04);

  --container: 1200px;
  --gap: 24px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 170px;
  /* iOS Safari vergrößert Text in manchen Layouts eigenmächtig ("Font Boosting").
     Das sprengt vor allem das Tagebuch, dessen Zeilen auf ein festes 30px-Raster
     gemalt sind. 100% = Text genau so groß wie im CSS definiert. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 820px) {
  html { scroll-padding-top: 120px; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--text);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); }
h2 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem); }
h3 { font-size: 1.125rem; font-family: var(--font-sans); font-weight: 600; }
h4 { font-size: 0.95rem; font-family: var(--font-sans); font-weight: 600; }

p {
  margin: 0 0 1em;
  color: var(--text-muted);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.accent-mint  { color: var(--mint-dark); }
.accent-orange {
  color: var(--mint);
  background: linear-gradient(100deg, #1a6fd4 0%, #5aa9f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 12px rgba(45, 140, 240, 0.25);
}
.btn-primary:hover {
  background: var(--orange-dark);
  transform: translateY(-1px);
}

.btn-ghost {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--text);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 20, 28, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--text);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  height: 44px;
  padding: 0 24px 0 8px;
  max-width: none;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.menu-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ---------- Mega-Menü (Vollbild-Overlay) ---------- */

.mega-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  overflow-y: auto;
  pointer-events: none;
}

.mega-menu__bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 10% 92%, rgba(45, 140, 240, 0.28), transparent 55%),
    #ffffff;
  z-index: -1;
}

.mega-menu__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px 48px;
}

.mega-menu__top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 32px;
}

.logo-img-menu { height: 130px; margin: -28px -10px; }

.mega-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mega-menu__close:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

.mega-menu__hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}

.mega-menu__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 22px;
}

.mega-menu__hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw + 0.8rem, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 18px;
}

.mega-menu__underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.mega-menu__underline::after {
  content: '';
  position: absolute;
  left: 0.04em;
  right: 0.04em;
  bottom: -0.08em;
  height: 0.08em;
  background: linear-gradient(90deg, rgba(45, 140, 240, 0.18), rgba(45, 140, 240, 0.58), rgba(45, 140, 240, 0.18));
  border-radius: 999px;
  opacity: 1;
  transform: scaleX(0.98);
  transform-origin: left center;
}

.mega-menu__hero-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 0 28px;
}

.mega-menu__hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.mega-menu__hero-ctas .btn { gap: 8px; }
.mega-menu__hero-ctas .btn-arrow { font-size: 1rem; }

.mega-menu__video-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  transition: color 0.15s ease;
}

.mega-menu__video-link:hover { color: var(--orange); }

.mega-menu__play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--text);
  display: inline-grid;
  place-items: center;
  color: var(--text);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mega-menu__video-link:hover .mega-menu__play {
  border-color: var(--orange);
  color: var(--orange);
}

.mega-menu__hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-left: auto;
}

.mega-menu__photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 45% 55% / 45% 50% 50% 55%;
  overflow: hidden;
  background: var(--mint-soft);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.10);
}

.mega-menu__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mega-menu__floating-card {
  position: absolute;
  right: -8%;
  bottom: 12%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px 14px 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.mega-menu__heart {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(45, 140, 240, 0.18);
  color: var(--orange);
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.mega-menu__floating-card strong {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.mega-menu__grid--6col {
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 48px;
}

.mega-menu__grid--6col .mega-card {
  padding: 20px 18px 22px;
  transform: none;
  opacity: 1;
}

.mega-menu__grid--6col .mega-card h3 {
  font-size: 1rem;
  letter-spacing: -0.005em;
}

.mega-menu__grid--6col .mega-card__head {
  margin-bottom: 14px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.mega-menu__grid--6col .mega-card__badge {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--mint-dark);
}

.mega-menu__grid--6col .mega-card__list { gap: 6px; }
.mega-menu__grid--6col .mega-card__list a {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 2px 0;
  gap: 6px;
}
.mega-menu__grid--6col .mega-card__list .mega-arrow { display: none; }

.mega-menu__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 28px 0 0;
  border-top: 1px solid var(--border);
}

.mega-menu__trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mega-menu__trust-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--mint-dark);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mega-menu__trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-menu__trust-text strong {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.mega-menu__trust-text span {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.mega-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: 26px 28px 24px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  transform: translateY(24px);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease,
    box-shadow 0.25s ease;
}

.mega-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  background: var(--mint);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mega-card:hover,
.mega-card:focus-within {
  transition-delay: 0s;
  box-shadow:
    0 0 0 2px var(--mint-dark),
    0 0 22px 6px rgba(45, 140, 240, 0.45),
    0 0 60px 14px rgba(45, 140, 240, 0.30);
}

.mega-card:hover::before,
.mega-card:focus-within::before { opacity: 0; }

.mega-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.mega-card__badge {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--text);
  color: var(--text);
  flex-shrink: 0;
}

.mega-card h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.mega-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mega-card__list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  transition: color 0.15s ease, transform 0.18s ease;
}

.mega-card__list .mega-arrow {
  display: inline-grid;
  place-items: center;
  width: 18px;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color 0.15s ease, transform 0.18s ease;
}

.mega-card__list a:hover {
  color: var(--mint-dark);
}

.mega-card__list a:hover .mega-arrow {
  color: var(--mint-dark);
  transform: translateX(3px);
}


.mega-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.menu-toggle:checked ~ .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-toggle:checked ~ .mega-menu .mega-card {
  transform: translateY(0);
  opacity: 1;
}

.menu-toggle:checked ~ .mega-menu .mega-card:nth-child(1) { transition-delay: 0.00s; }
.menu-toggle:checked ~ .mega-menu .mega-card:nth-child(2) { transition-delay: 0.00s; }
.menu-toggle:checked ~ .mega-menu .mega-card:nth-child(3) { transition-delay: 0.00s; }
.menu-toggle:checked ~ .mega-menu .mega-card:nth-child(4) { transition-delay: 0.00s; }
.menu-toggle:checked ~ .mega-menu .mega-card:nth-child(5) { transition-delay: 0.00s; }
.menu-toggle:checked ~ .mega-menu .mega-card:nth-child(6) { transition-delay: 0.00s; }

body:has(#menu-toggle:checked) { overflow: hidden; }

@media (max-width: 900px) {
  .mega-menu__grid { grid-template-columns: repeat(2, 1fr); }
  .mega-menu__grid--6col { grid-template-columns: repeat(3, 1fr); }
  .mega-menu__inner { padding: 20px 20px 40px; }
  .mega-menu__top { margin-bottom: 24px; }
  .logo-img-menu { height: 100px; margin: -20px -8px; }
  .mega-menu__hero { grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; }
  .mega-menu__hero-visual { max-width: 360px; margin: 0 auto; }
  .mega-menu__trust { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
  .mega-menu__grid { grid-template-columns: 1fr; }
  .mega-menu__grid--6col { grid-template-columns: 1fr; gap: 12px; }
  .mega-menu__footer { flex-direction: column; align-items: flex-start; }
  .mega-menu__floating-card { right: 0; bottom: 4%; padding: 10px 14px; }
  .mega-menu__hero-ctas { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text);
}

.logo-img {
  height: 220px;
  width: auto;
  display: block;
  object-fit: contain;
  margin: -70px -18px;
}

.logo-img-footer { height: 64px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.site-nav a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  transition: color 0.18s ease, background 0.2s ease;
}

.site-nav a:hover {
  color: var(--orange);
  background: rgba(45, 140, 240, 0.12);
}

.chev {
  font-size: 0.7em;
  margin-left: 2px;
  opacity: 0.7;
}

/* ---------- Hero ---------- */

.hero {
  padding: 64px 0 96px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  position: relative;
  overflow: hidden;
}

.hero-inline-logo {
  display: inline-block;
  height: 1.6em;
  width: auto;
  margin-left: 0.14em;
  position: relative;
  top: 0.02em;
}

.hero-nowrap {
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  transform: translateY(0.3em);
}

.hero-kinder {
  display: inline-block;
  font-size: 1.2em;
  padding-right: 0.14em;
  filter: drop-shadow(0 0 5px rgba(45, 140, 240, 0.45));
  animation: kinderGlow 2.6s ease-in-out infinite;
}

@keyframes kinderGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(45, 140, 240, 0.30)); }
  50%      { filter: drop-shadow(0 0 16px rgba(45, 140, 240, 0.80)); }
}

.hero-mit {
  display: inline-block;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -260px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: none;
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: none;
}

.hero-photo {
  width: 230%;
  max-width: none;
  height: auto;
  display: block;
  margin-left: -10%;
  margin-right: -120%;
  transform: translateX(-220px);
}

@media (min-width: 1024px) {
  .hero-photo {
    margin-right: clamp(-680px, calc(240px - 50vw), -65%);
  }
}

@media (max-width: 820px) {
  .hero-photo { width: 100%; margin-right: 0; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 12px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.badge-icon {
  color: var(--orange);
  flex-shrink: 0;
}

.hero h1 {
  margin-bottom: 20px;
}

.hero p.lead {
  font-size: 1.1rem;
  max-width: 540px;
  margin-top: 48px;
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.trust-row .trust-icon {
  color: var(--mint-dark);
  display: inline-flex;
  align-items: center;
}

.trust-row .trust-flag {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.btn-icon-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-left: 4px;
}

/* Hero visual + floating cards */

.hero-visual {
  position: relative;
}

.hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: transparent;
}

@media (min-width: 1024px) {
  .hero-image {
    margin-right: clamp(-220px, calc(576px - 50vw), 0px);
  }
}

.hero-image:empty::after {
  content: attr(data-label);
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 0.9rem;
  background: var(--mint-soft);
  opacity: 0.7;
}

.hero-image img,
.hero-image .hero-illu {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.floating-card {
  position: absolute;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
}

.card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.card-text .card-label {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.card-text .card-value {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
}

.card-text .card-of {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 400;
  font-family: var(--font-serif);
}

.card-text .card-value-sm {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.card-text .card-sub {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.card-icon.icon-mint {
  background: rgba(45, 140, 240, 0.32);
  color: var(--mint-dark);
}

.card-icon.icon-orange {
  background: rgba(45, 140, 240, 0.18);
  color: var(--orange-dark);
}

.card-attendance { top: 6%; right: -10%; }
.card-incidents  { top: 40%; right: -16%; }
.card-message    { bottom: 6%; right: -6%; }

/* ---------- App download ---------- */

.app-download {
  padding: 56px 0;
  background:
    linear-gradient(135deg, rgba(45, 140, 240, 0.30), rgba(247, 215, 196, 0.34)),
    var(--bg-soft);
}

.app-download__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto;
  align-items: center;
  gap: 32px;
}

.app-download__copy {
  max-width: 760px;
}

.app-download__eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--orange-dark);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-download h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3vw + 1rem, 3.9rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.app-download__stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}

.store-badge {
  min-width: 238px;
  min-height: 84px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(31, 41, 55, 0.10);
  box-shadow: 0 14px 32px rgba(31, 41, 55, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.store-badge:hover,
.store-badge:focus-visible {
  transform: translateY(-2px);
  border-color: var(--mint-dark);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(45, 140, 240, 0.28),
    0 18px 38px rgba(31, 41, 55, 0.14);
}

.store-badge:hover .store-badge__icon,
.store-badge:focus-visible .store-badge__icon {
  color: var(--mint-dark);
}

.store-badge__icon {
  display: inline-flex;
  color: var(--text);
  flex-shrink: 0;
}

.store-badge__icon--play {
  color: var(--mint-dark);
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}

.store-badge__text span {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.store-badge__text strong {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Features ---------- */

.features {
  padding: 96px 0;
  background: var(--bg);
}

.features h2 {
  text-align: left;
  margin-bottom: 48px;
  max-width: 720px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 32px;
}

.feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.feature:hover {
  border-color: var(--mint-dark);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 24px 6px rgba(45, 140, 240, 0.45),
    0 0 60px 14px rgba(45, 140, 240, 0.3);
}

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--mint-soft);
  color: var(--mint-dark);
  margin-bottom: 14px;
}

.feature-icon.orange {
  background: rgba(45, 140, 240, 0.14);
  color: var(--orange-dark);
}

.feature h3 {
  margin-bottom: 6px;
}

.feature p {
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- Section drop animation (orange wave on scroll-in) ---------- */

main > section {
  position: relative;
}

main > section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 96%;
  max-width: 1400px;
  height: 100px;
  background: radial-gradient(
    ellipse 55% 100% at center top,
    rgba(45, 140, 240, 0.20) 0%,
    rgba(45, 140, 240, 0.10) 35%,
    rgba(45, 140, 240, 0.04) 65%,
    transparent 85%
  );
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scaleX(0.1);
  transform-origin: center top;
  z-index: 3;
}

main > section.section-glow::after {
  animation: section-drop 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes section-drop {
  0%   { opacity: 0;    transform: translateX(-50%) scaleX(0.05); }
  20%  { opacity: 1;    transform: translateX(-50%) scaleX(0.4);  }
  55%  { opacity: 0.8;  transform: translateX(-50%) scaleX(1);    }
  100% { opacity: 0;    transform: translateX(-50%) scaleX(1);    }
}

/* ---------- Subpages (Kita, Eltern, Lösung, Verwaltungsportal, Beratung) ---------- */

.breadcrumb {
  background: var(--bg);
  padding: 16px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.breadcrumb a:hover { color: var(--orange); }

.breadcrumb__sep {
  margin: 0 8px;
  color: var(--text-muted);
  opacity: 0.6;
}

.breadcrumb__current { color: var(--text); font-weight: 500; }

.subpage-hero {
  padding: 48px 0 32px;
  text-align: center;
}

.subpage-hero .badge { margin-bottom: 22px; }

.subpage-hero h1 {
  font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem);
  margin-bottom: 18px;
}

.subpage-hero__lead {
  font-size: 1.08rem;
  max-width: 680px;
  margin: 0 auto;
  color: var(--text-muted);
}

.subpage-visual {
  padding: 32px 0 56px;
}

.subpage-visual__frame {
  margin: 0;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.05);
}

.subpage-visual__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mitlaufende Bildunterschrift – zentriert direkt unter dem jeweiligen Gerät.
   Warme Serif-Schrift + handgezeichnete Unterstreichung (Marken-Stil). */
.device-caption {
  margin: 16px 0 0;
  width: 100%;
  padding: 0 16px;
  min-height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: opacity 0.18s ease;
}

/* Symbol passend zum Thema – rundes Badge links neben der Caption */
.device-caption__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--mint-dark);
  display: grid;
  place-items: center;
}
.device-caption__icon svg { width: 21px; height: 21px; }

.device-caption__text {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
  text-align: center;
}

/* Titel mittig DIREKT UNTER dem jeweiligen Gerät (Gerät sitzt rechts im Bild) */
.device-caption--phone   { padding-left: 31.5%; }  /* Handy-Mitte ~65,7% */
.device-caption--ipad    { padding-left: 22%; }    /* iPad-Mitte ~61,1% */
.device-caption--monitor { padding-left: 23%; }    /* Monitor-Mitte ~61,6% */

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

/* ---------- „Für Leitungen": manueller Snap-Slider im Monitor-Display ---------- */
.leitung-frame { position: relative; display: block; }

/* Maske = exakt die sichtbare Displayfläche des Monitors.
   Horizontaler Scroll-Container mit Snap: steht immer auf genau einem Screenshot. */
.leitung-screen {
  position: absolute;
  /* exakt vermessene Displayfläche des neuen Monitors (pc neu) */
  left: 30.66%;
  top: 6.85%;
  width: 61.88%;
  height: 57.16%;
  z-index: 2;
  background: #fff;
  border-radius: 0.4%;

  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;   /* rastet immer auf einem Screenshot ein */
  scroll-behavior: smooth;
  cursor: grab;
  touch-action: pan-x;             /* horizontal wischen/scrollen */
  -ms-overflow-style: none;        /* Scrollbar ausblenden (IE/Edge alt) */
  scrollbar-width: none;           /* Firefox */
}

/* Scrollbar im Monitor ausblenden (WebKit/Chrome/Safari) */
.leitung-screen::-webkit-scrollbar { display: none; }

.leitung-screen.is-dragging { cursor: grabbing; }

.leitung-screen img {
  /* jedes Bild füllt exakt die Displayfläche -> immer genau ein Screenshot sichtbar */
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* füllt das Display ohne Verzerrung */
  object-position: top center;
  scroll-snap-align: center;
  scroll-snap-stop: always;        /* überspringt beim Scrollen kein Bild */
  display: block;
  border-radius: 0;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;            /* Ziehen übernimmt der Container */
}

.quick-benefits {
  padding: 56px 0;
  background: var(--bg-soft);
}

.quick-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.quick-benefit {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-benefit:hover {
  border-color: var(--mint-dark);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 24px 6px rgba(45, 140, 240, 0.45),
    0 0 60px 14px rgba(45, 140, 240, 0.30);
}

.quick-benefit__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--mint-dark);
  margin-bottom: 14px;
}

.quick-benefit strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.quick-benefit p {
  font-size: 0.92rem;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.subpage-cta {
  padding: 80px 0;
  background: var(--bg);
  text-align: center;
}

.subpage-cta h2 {
  margin-bottom: 14px;
}

.subpage-cta p {
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 30px;
}

.subpage-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Beratung-Formular ---------- */

.interesse-form {
  padding: 80px 0 96px;
  background: var(--bg);
}

.interesse-form__intro {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.interesse-form__intro h2 {
  margin-bottom: 16px;
}

.interesse-form__intro p {
  font-size: 1.05rem;
  color: var(--text);
  margin: 0;
  line-height: 1.65;
}

.interesse-form__intro p strong {
  color: var(--text);
  font-weight: 700;
}

.beratung-form {
  max-width: 880px;
  margin: 0 auto;
  background: var(--mint-soft);
  border-radius: var(--radius-lg);
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.form-row--full {
  grid-template-columns: 1fr;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.field__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.field__hint {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: -2px 0 6px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  font: inherit;
  font-size: 1rem;
  padding: 14px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field textarea:focus,
.field__select select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(45, 140, 240, 0.15);
}

.field textarea { resize: vertical; min-height: 110px; }

.field__select {
  position: relative;
  display: block;
}

.field__select::after {
  content: '▾';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  pointer-events: none;
  font-size: 0.9rem;
}

.field__select select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 1rem;
  padding: 14px 44px 14px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.beratung-form__legal {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.beratung-form__legal a {
  color: var(--orange);
  text-decoration: underline;
}

.beratung-form .checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}

.beratung-form .checkbox input { margin-top: 3px; flex-shrink: 0; }

.beratung-form .checkbox a {
  color: var(--orange);
  text-decoration: underline;
}

.beratung-form__submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.beratung-form__submit button {
  min-width: 140px;
  padding: 14px 28px;
  font-size: 1rem;
}

@media (max-width: 760px) {
  .beratung-form { padding: 28px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 18px; }
  .interesse-form { padding: 56px 0 72px; }
  .beratung-form__submit { justify-content: stretch; }
  .beratung-form__submit button { width: 100%; }
}

.related-pages {
  padding: 64px 0 96px;
  background: var(--bg-soft);
}

.related-pages h2 {
  text-align: center;
  margin-bottom: 36px;
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2rem);
}

.related-pages__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Einzelne Karte mittig ausrichten */
.related-pages__grid:has(.related-card:only-child) {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}

.related-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--mint-soft), #fff);
  color: var(--mint-dark);
  box-shadow: 0 0 0 1px var(--mint);
  margin-bottom: 14px;
  transition: transform 0.2s ease;
}

.related-card:hover .related-card__icon {
  transform: scale(1.08);
}

.related-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 22px;
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.related-card h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  padding-right: 40px;
}

.related-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 30px 0 0;
  line-height: 1.45;
}

.related-card__arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 1.05rem;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--mint-dark);
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 24px 6px rgba(45, 140, 240, 0.45),
    0 0 60px 14px rgba(45, 140, 240, 0.30);
}

.related-card:hover .related-card__arrow {
  background: var(--mint-dark);
  color: #fff;
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .quick-benefits__grid { grid-template-columns: 1fr; max-width: 460px; }
  /* minmax(0, 1fr) statt 1fr: ein Grid-Feld schrumpft sonst nie unter sein
     laengstes unteilbares Wort. "Kindergarteneinrichtungen" ist 229px breit
     und hat die Karte auf 311px aufgeblasen - auf einem 320px-Display schob
     das die ganze Seite seitlich auf. Dazu Worttrennung erlauben, sonst ragt
     statt der Karte das Wort heraus. hyphens braucht das lang="de" im <html>,
     das ist gesetzt. */
  .related-pages__grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); max-width: 480px; }
  .related-card h3, .related-card p { overflow-wrap: break-word; hyphens: auto; }
  .subpage-hero { padding: 32px 0 24px; }
  .subpage-visual { padding: 16px 0 32px; }
}

/* ---------- Audience-Page (Kita, Krippe, Eltern …) ---------- */

.audience-page {
  padding: 80px 0 120px;
}

.audience-page__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: start;
}

.audience-page__content .badge {
  margin-bottom: 28px;
}

.audience-page__content h1 {
  margin-bottom: 24px;
  font-size: clamp(2rem, 3.2vw + 1rem, 3.25rem);
}

.audience-page__content .lead {
  font-size: 1.08rem;
  color: var(--text);
  margin-bottom: 18px;
}

.audience-page__content > p {
  font-size: 1rem;
  margin-bottom: 16px;
}

.audience-page__benefits-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 40px;
  margin-bottom: 22px;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.55;
}

.benefits-list li .check { margin-top: 2px; }

.audience-outro {
  font-style: italic;
  color: var(--text-muted);
  border-left: 3px solid var(--mint);
  padding-left: 16px;
  margin: 0 0 36px;
}

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

.audience-page--full {
  padding: 16px 0 24px;
  min-height: calc(100vh - 170px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.audience-cover {
  width: 100vw;
  max-width: none;
  margin: 0 0 20px;
  padding: 0;
  display: block;
}

.audience-cover img {
  display: block;
  width: 100vw;
  height: calc(100vh - 250px);
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.audience-cover__link {
  position: relative;
  display: block;
  width: 100%;
}

.audience-cover__hotspot {
  position: absolute;
  left: 6%;
  bottom: 8%;
  width: 28%;
  height: 9%;
  border-radius: 999px;
  transition: background 0.18s ease, transform 0.18s ease;
}

.audience-cover__link:hover .audience-cover__hotspot {
  background: rgba(255, 255, 255, 0.08);
}

.audience-cover__link:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.audience-page__ctas--centered {
  justify-content: center;
}

.audience-page__visual {
  position: sticky;
  top: 200px;
}

.audience-image {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 30%, rgba(45, 140, 240, 0.45), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(45, 140, 240, 0.16), transparent 60%),
    var(--mint-soft);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
}

.audience-image::after {
  content: attr(data-label);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .audience-page { padding: 56px 0 80px; }
  .audience-page__grid { grid-template-columns: 1fr; gap: 40px; }
  .audience-page__visual { position: static; }
  .audience-image { aspect-ratio: 4 / 3; }
}

/* ---------- Section helpers ---------- */

.section-lead {
  font-size: 1.05rem;
  max-width: 640px;
  margin: -8px 0 48px;
}

.check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--mint-soft);
  color: #155cb0;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Screenshots ---------- */

.screenshots {
  padding: 96px 0;
  background: var(--bg-soft);
}

.devices-row {
  position: relative;
  overflow: hidden;
  margin: 48px auto 0;
  max-width: 1480px;
  padding: 0 16px;
  min-height: 660px;
}

.devices-track {
  display: flex;
  height: 100%;
  min-height: 660px;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.device-item {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  opacity: 0.35;
  transform: scale(0.92);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.device-item.is-active {
  opacity: 1;
  transform: scale(1);
}

.device-item img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  height: auto;
}

/* iPad (Querformat): Screenshot in der Displayfläche.
   Der Wrapper trägt die bisherigen Karussell-Offsets, damit das Overlay
   exakt mit dem Mockup skaliert. Der Screenshot liegt HINTER dem Gehäuse –
   das undurchsichtige iPad-Gehäuse maskiert die Kanten (saubere Rundung). */
.device-item--tablet .ipad-screen-wrap {
  position: relative;
  z-index: 0;
  display: inline-block;     /* schrumpft exakt auf das Mockup -> Overlay skaliert mit */
  line-height: 0;
  margin-top: -137px;        /* transparenten Rand oben wegschneiden (wie zuvor) */
  left: -48px;               /* leichter Links-Versatz wie im Original */
}

.device-item--tablet .ipad-frame-img {
  display: block;
  position: relative;
  z-index: 1;                /* Gehäuse über dem Screenshot */
  max-height: 1100px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0;
  left: 0;
}

.device-item--tablet .ipad-shot {
  position: absolute;
  z-index: -1;               /* hinter dem Gehäuse – sichtbar durch das transparente Display */
  /* exakt vermessene Displayfläche, minimal vergrößert -> Ränder verschwinden unter dem Gehäuse */
  left: 20.2%;
  top: 19.5%;
  width: 68.2%;
  height: 57.5%;
  object-fit: cover;         /* füllt das Display ohne Verzerrung */
  object-position: center;
  border-radius: 1.6%;
  max-width: none;
  max-height: none;
}

.device-item--phone img {
  max-height: 620px;
}

.device-item--laptop img {
  max-height: 1040px;
  margin-top: -121px;
}

.device-item.device-item--laptop figcaption {
  margin-top: -97px;
}

.device-item.device-item--tablet figcaption {
  margin-top: -124px;
}

.device-item figcaption {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 460px;
  max-width: 90vw;
}

.device-item figcaption strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.device-item figcaption span {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.devices-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.devices-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.devices-dots button:hover { transform: scale(1.15); }

.devices-dots button[aria-selected="true"] {
  background: var(--orange);
  transform: scale(1.25);
}

.devices-nav {
  position: absolute;
  top: 40%;
  z-index: 3;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transform: translateY(-50%);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.devices-nav:hover {
  background: var(--orange);
  color: #fff;
}

.devices-nav:active { box-shadow: none; }

.devices-nav--prev { left: 4px; }
.devices-nav--next { right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .devices-track,
  .device-item { transition: none; }
}

@media (max-width: 820px) {
  .devices-row { min-height: 500px; max-width: 100%; }
  .devices-track { min-height: 500px; }
  .device-item img { max-height: 360px; }
  /* iPad-Mockup proportional verkleinern; Overlay (Screenshot) skaliert automatisch mit */
  .device-item--tablet .ipad-frame-img { max-height: 360px; }
  .device-item--tablet .ipad-screen-wrap { margin-top: -45px; left: -16px; }
  .device-item figcaption { width: auto; max-width: 90vw; }
  /* Die negativen Abstände der Bildunterschriften (-124px / -97px) sind für
     die großen Desktop-Mockups berechnet. Auf dem Telefon ist das Bild nur
     etwa ein Viertel so hoch — die Unterschrift landete dadurch mitten im
     Gerätebild. Prozentwerte beziehen sich auf die Breite des Elternelements
     und skalieren deshalb korrekt mit. Die Auswahl muss zweiklassig bleiben,
     sonst gewinnt die spezifischere Desktop-Regel. */
  /* --- Einheitlicher Bildbereich -------------------------------------
     Die drei Geräte sind unterschiedlich hoch (Telefon hochkant, MacBook
     flach). Folgt die Unterschrift direkt dem Bild, springt sie beim
     Wechsel um über 140px. Deshalb bekommen alle drei einen gleich hohen
     Bildbereich, in dem das Gerät zentriert sitzt — die Unterschriften
     beginnen dadurch immer an derselben Stelle.
     Die negativen Abstände der Desktop-Fassung entfallen hier, weil sie
     das Gerät innerhalb dieses Bereichs verschieben würden. */
  .device-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .device-item > img,
  .device-item > .ipad-screen-wrap {
    height: 340px;
    min-height: 340px;
    max-height: 340px;
    flex: none;
    margin-top: 0 !important;
  }
  .device-item > img {
    width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
  }
  /* MacBook und iPad haben rund 15 % transparenten Rand unter dem Gerät,
     das Telefonbild keinen. Ohne Ausgleich steht der Text beim Telefon
     direkt am Gerät, bei den anderen mit deutlichem Abstand — beim
     Blättern wirkt das unruhig. Die Werte holen den Rand wieder heraus,
     sodass die sichtbaren Unterkanten auf einer Linie liegen. */
  .device-item--laptop img { transform: translateY(40px); }
  .device-item--tablet .ipad-screen-wrap { transform: translateY(61px); }
  .device-item--tablet .ipad-screen-wrap {
    left: 0 !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .device-item--tablet .ipad-frame-img {
    height: 100%;
    width: auto;
    max-height: none;
  }
  .device-item figcaption,
  .device-item.device-item--tablet figcaption,
  .device-item.device-item--laptop figcaption {
    margin-top: 18px;
  }
  .devices-nav { width: 40px; height: 40px; }
  .devices-nav--prev { left: 0; }
  .devices-nav--next { right: 0; }
}

/* ---------- Sicherheit ---------- */

.security {
  padding: 96px 0;
  background: var(--bg);
}

.security-grid {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 56px;
  align-items: center;
}

.security-shield svg {
  width: 100%;
  height: auto;
  max-width: 200px;
}

.security-shield__check {
  transform-box: fill-box;
  transform-origin: center;
}

.security-shield:hover .security-shield__check {
  animation: shield-check-pop 0.34s ease-out;
}

@keyframes shield-check-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.security-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.security-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--text);
}

.security-badge {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.security-badge strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

.security-badge p {
  font-size: 0.85rem;
  margin: 0;
}

.security-standards {
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
}

.security-standards__label {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.security-standards__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.security-standards__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 15px;
  background: var(--mint-soft);
  color: var(--mint-dark);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

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

.pricing {
  padding: 96px 0;
  background: var(--bg-soft);
}

.pricing-calculator {
  max-width: 640px;
  margin: 0 auto 48px;
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.pricing-calculator__label {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

/* Custom dropdown (pricing calculator) — fully styled, replaces native <select> popup */
.size-dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
}

/* native <select> kept for logic but visually hidden */
.size-dropdown__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.size-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 280px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 13px 20px 13px 24px;
  border: 2px solid var(--text);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.size-dropdown__trigger:hover { border-color: var(--orange); }

.size-dropdown__trigger:focus-visible,
.size-dropdown.is-open .size-dropdown__trigger {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(45, 140, 240, 0.15);
}

.size-dropdown__chevron {
  flex-shrink: 0;
  color: var(--orange);
  transition: transform 0.2s ease;
}

.size-dropdown.is-open .size-dropdown__chevron { transform: rotate(180deg); }

.size-dropdown__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  min-width: 100%;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.size-dropdown.is-open .size-dropdown__list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.size-dropdown__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.size-dropdown__option:hover,
.size-dropdown__option.is-active { background: var(--bg-soft); }

.size-dropdown__option.is-selected { color: var(--orange); }

.size-dropdown__option.is-selected::after {
  content: '✓';
  margin-left: auto;
  font-weight: 700;
}

.pricing-calculator__note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 480px;
  line-height: 1.5;
}

.price-card [data-price] {
  transition: color 0.2s ease;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.price-card-featured {
  border-color: var(--orange);
  box-shadow: 0 12px 28px rgba(45, 140, 240, 0.18);
}

.badge-featured {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.price-card h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.price-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.price strong {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
}

.price span {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.price-card ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.92rem;
  flex-grow: 1;
}

.price-card ul li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-card .btn {
  align-self: stretch;
}

.pricing-footnote {
  text-align: center;
  margin-top: 28px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ---------- Über uns ---------- */

.about {
  padding: 96px 0;
  background: var(--bg);
  text-align: center;
}

.about .badge { margin-bottom: 16px; }

.about h2 { margin-bottom: 48px; }

.about .section-lead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
}

.about-mission {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: stretch;
  margin: 0 auto 64px;
  max-width: 1100px;
  text-align: left;
}

.about-mission--full {
  display: block;
  max-width: 1240px;
}

.about-mission--split {
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1240px;
  margin-bottom: 40px;
}

.about-mission--split + .about-mission--split {
  margin-top: 0;
}

.about-mission__half {
  margin: 0;
  aspect-ratio: var(--half-ratio, 768 / 1024);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-mission__half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-mission__half--left img  { object-position: left center; }
.about-mission__half--right img { object-position: right center; }

.about-mission__half:hover {
  transform: translateY(-3px);
  border-color: var(--mint-dark);
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 24px 6px rgba(45, 140, 240, 0.45),
    0 0 60px 14px rgba(45, 140, 240, 0.30);
}

.about-mission__visual {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(45, 140, 240, 0.55), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(45, 140, 240, 0.18), transparent 60%),
    var(--mint-soft);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.05);
  min-height: 380px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border: 2px solid transparent;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-mission__placeholder {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px dashed currentColor;
}

.about-mission__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}

.about-mission__visual:hover {
  transform: translateY(-3px);
  border-color: var(--mint-dark);
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 24px 6px rgba(45, 140, 240, 0.45),
    0 0 60px 14px rgba(45, 140, 240, 0.30);
}

.about-mission__text {
  background: var(--mint-soft);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 2px solid transparent;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-mission__text:hover {
  transform: translateY(-3px);
  border-color: var(--mint-dark);
  box-shadow:
    0 0 0 2px var(--mint),
    0 0 24px 6px rgba(45, 140, 240, 0.45),
    0 0 60px 14px rgba(45, 140, 240, 0.30);
}

.about-mission__text h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2vw + 0.8rem, 2.25rem);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.about-mission__text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}

.about-stats {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 0;
}

.about-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--mint-dark);
  line-height: 1;
  margin-bottom: 6px;
}

.about-stat span {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.team-member { margin: 0; }

.team-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 50% 40%, rgba(45, 140, 240, 0.55), transparent 65%),
    var(--mint-soft);
  margin-bottom: 10px;
}

.team-photo::after {
  content: attr(data-label);
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 0.8rem;
  opacity: 0.6;
}

.team-member figcaption {
  font-size: 0.85rem;
  color: var(--text-muted);
}

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

.contact {
  padding: 96px 0 120px;
  background: var(--bg-soft);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
}

.contact-text h2 { margin-bottom: 16px; }

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}

.contact-info li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}

.contact-info a {
  color: var(--text);
  transition: color 0.15s ease;
}

.contact-info a:hover { color: var(--orange); }

.contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--mint-dark);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-md);
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(45, 140, 240, 0.15);
}

.contact-form textarea { resize: vertical; }

.contact-form .checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.contact-form .checkbox input { margin-top: 3px; }

.contact-form .checkbox a {
  color: var(--orange);
  text-decoration: underline;
}

.contact-form button {
  margin-top: 6px;
  align-self: flex-start;
}

/* ---------- Footer ---------- */

.site-footer {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0 24px;
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px 48px;
  margin-bottom: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-brand p {
  margin-top: 0;
  max-width: 240px;
  font-size: 0.88rem;
}

.site-footer h4 {
  margin-bottom: 14px;
  color: #fff;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.site-footer ul li {
  margin-bottom: 0;
}

.site-footer ul a {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.15s ease;
}

.site-footer ul a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .team-grid  { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .security-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  /* Sobald das Raster einspaltig wird, steht das Schild allein über dem Text.
     text-align wirkt nicht auf das SVG, weil es ein Blockelement mit
     max-width ist — es bliebe linksbündig. Deshalb hier eigens zentrieren. */
  .security-shield svg { margin-inline: auto; }
  .security-list { max-width: 400px; margin: 0 auto; text-align: left; }
  .about-mission { grid-template-columns: 1fr; gap: 24px; }
  .about-mission__visual { min-height: 280px; }
  .about-mission__text { padding: 32px 28px; }
  /* Jede Karte zeigt eine Haelfte ihres Bildes: links den Text, rechts die
     Illustration. Diese Haelften sind hochformatig (768 x 1024). Die
     fruehere Mobil-Regel presste sie in eine flache Karte von 280px Hoehe
     und schnitt sie dadurch an - zu lesen war nur noch "sere Mission".
     Deshalb bleibt das Seitenverhaeltnis hier erhalten, und jede Haelfte
     behaelt ihren Bildausschnitt. */
  .about-mission--split { grid-template-columns: 1fr; max-width: 520px; }

  /* Die Personen stehen normalerweise mittig zum Text. Sobald eine Rolle
     umbricht ("Gruender & Ideengeber · ehemaliger Erzieher"), wird deren
     Block hoeher und das Bild rutscht gegenueber dem anderen nach unten.
     Oben ausgerichtet stehen beide Bilder auf einer Linie mit dem Namen. */
  /* Beide Personen stehen in einem zentrierten Block. Weil Armans Rolle
     laenger ist ("Gruender & Ideengeber · ehemaliger Erzieher"), war sein
     Block breiter und sein Bild rutschte 70px weiter nach links als das
     von Murat. Eine gemeinsame Breite mit linksbuendigem Inhalt stellt
     beide Bilder auf dieselbe Kante; der laengere Text bricht darin um.
     Zweiklassig notiert, weil die Grundregel .founder-person weiter unten
     in der Datei steht und bei gleicher Gewichtung sonst gewinnt. */
  .founder-aside .diary-founders .founder-person {
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    text-align: left;
  }
  .founder-aside .diary-founders .founder-person__name { line-height: 1.25; }
}

@media (max-width: 820px) {
  .hero { padding: 40px 0 64px; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { order: -1; }
  .hero-image { margin-right: 0 !important; }
  .card-attendance { top: 6%; right: 4%; }
  .card-incidents  { top: 42%; right: -2%; }
  .card-message    { bottom: 6%; right: 4%; }

  .site-nav { display: none; }

  .app-download__inner { grid-template-columns: 1fr; }
  .app-download__stores { justify-content: flex-start; }

  .features, .screenshots, .security, .pricing, .about, .contact { padding: 64px 0; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-stats { gap: 40px; }
}

@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  .floating-card { min-width: 180px; padding: 10px 14px; }
  .card-text .card-value { font-size: 1.3rem; }
  .team-grid  { grid-template-columns: repeat(2, 1fr); }
  .about-stats { flex-direction: column; gap: 24px; }
  .contact-form { padding: 22px; }
  .app-download { padding: 44px 0; }
  .app-download h2 { font-size: 2rem; }
  .app-download__stores { flex-direction: column; }
  .store-badge { width: 100%; min-width: 0; min-height: 76px; }
  .store-badge__text strong { font-size: 1.45rem; }
}


/* ---------- Hero v2 (neues Layout, alter Text) ---------- */

/* Eyebrow ersetzt die Pill-Badge */
.hero--v2 .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-dark);
  margin-bottom: 20px;
}

/* Handgezeichneter Unterstrich + Kursiv unter dem orangen Wort */
.hero--v2 .hero-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 0.04em;
  font-style: italic;
}
.hero--v2 .hero-underline__svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.32em;
  color: currentColor;
  pointer-events: none;
  overflow: visible;
}

/* CTAs */
.hero--v2 .hero-ctas {
  margin-top: 28px;
  margin-bottom: 30px;
  align-items: center;
}
.hero--v2 .btn-primary {
  gap: 10px;
}
.hero-video-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.18s ease;
}
.hero-video-link:hover { color: var(--orange); }
.hero-video-link__play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(45, 140, 240, 0.30);
  color: var(--orange);
  display: grid;
  place-items: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
.hero-video-link:hover .hero-video-link__play {
  background: rgba(45, 140, 240, 0.18);
  transform: scale(1.04);
}

/* Hintergrund-Deko (Blobs + Punktraster) */
.hero--v2 .hero-visual { position: relative; }
.hero--v2 .hero-photo { position: relative; z-index: 1; }
.hero-deco { position: absolute; pointer-events: none; z-index: 0; }
.hero-deco--blob-mint {
  top: -4%;
  left: 2%;
  width: 78%;
  height: 86%;
  background: rgba(15, 20, 28, 0.96);
  border-radius: 60% 50% 55% 45% / 50% 60% 40% 50%;
  filter: blur(0.5px);
}
.hero-deco--blob-orange {
  top: 6%;
  right: -2%;
  width: 26%;
  height: 28%;
  background: rgba(15, 20, 28, 0.96);
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
}
.hero-deco--dots {
  top: 8%;
  left: 4%;
  width: 80px;
  height: 80px;
  background-image: radial-gradient(circle, rgba(45, 140, 240, 0.65) 1.7px, transparent 2px);
  background-size: 12px 12px;
  z-index: 1;
}

/* Kompakte Floating-Card */
.hero--v2 .hero-floating-card {
  position: absolute;
  right: -2%;
  bottom: 6%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  padding: 12px 16px 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  max-width: 210px;
}
.hero--v2 .hero-floating-card__heart {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(45, 140, 240, 0.18);
  color: var(--orange);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.hero--v2 .hero-floating-card p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--text-muted);
}
.hero--v2 .hero-floating-card strong { color: var(--text); font-weight: 700; }

@media (max-width: 860px) {
  .hero--v2 .hero-floating-card {
    position: static;
    margin-top: 14px;
    max-width: 100%;
  }
  .hero-deco--dots { display: none; }
}

/* ---------- Hero-Hintergrund: weiß ---------- */
.hero.hero--v2 {
  background: transparent;
}


/* ---------- Header-Logo zentriert und größer ---------- */
.site-header .header-inner { position: relative; }
.site-header .header-left .logo {
  position: absolute;
  left: 50%;
  top: calc(50% + 14px);
  transform: translate(-50%, -50%);
  z-index: 1;
}
/* Vergrößertes Logo (skaliert den vorhandenen negativen Margin-Trick) */
.site-header .header-left .logo .logo-img {
  height: 230px;
  margin: -72px -18px;
}


/* ---------- Erzieher-Tablet-Karussell ÜBER dem Marketing-Bild ----------
   Position des Karussells = exakt da, wo das iPad im Hintergrundbild ist.
   Werte sind Startwerte und können bei Bedarf feinjustiert werden. */
.erzieher-frame { position: relative; display: block; }
.erzieher-bg { display: block; width: 100%; height: auto; }

.erzieher-tablet-carousel {
  position: absolute;
  left: 42.33%;
  top: 23.79%;
  width: 22.77%;
  height: 54.51%;
  overflow: hidden;
  z-index: 2;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  border-radius: 4px;
}
.erzieher-tablet-carousel:active { cursor: grabbing; }

.erzieher-tablet-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
  will-change: transform;
}
.erzieher-tablet-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.erzieher-tablet-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.erzieher-tablet-dots {
  position: absolute;
  left: 42.33%;
  width: 22.77%;
  top: 84%;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 3;
}
.erzieher-tablet-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.erzieher-tablet-dots button[aria-selected="true"] {
  background: var(--mint-dark);
  transform: scale(1.3);
}

/* ---------- Eltern-Phone-Karussell ÜBER dem Marketing-Phone ---------- */
.eltern-frame { position: relative; display: block; }
.eltern-bg { display: block; width: 100%; height: auto; }

/* ---------- „Für Eltern": Auto-Slider im Smartphone-Display ---------- */
/* Maske = exakt die sichtbare Displayfläche des Smartphones (pixelgenau vermessen).
   Gleicher Mechanismus wie „Für Leitungen": horizontaler Snap-Scroller. */
.eltern-screen {
  position: absolute;
  left: 55.74%;
  top: 10.10%;
  width: 19.98%;
  height: 76.94%;
  z-index: 2;
  background: #fff;
  border-radius: 13.8% / 6.35%;    /* Display-Rundung des iPhones (kreisförmige Ecken) */

  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;   /* steht immer auf genau einem Screenshot */
  scroll-behavior: smooth;
  cursor: grab;
  touch-action: pan-x;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.eltern-screen::-webkit-scrollbar { display: none; }
.eltern-screen.is-dragging { cursor: grabbing; }

.eltern-screen img {
  flex: 0 0 100%;                  /* jedes Bild füllt exakt das Display -> ein Screenshot */
  width: 100%;
  height: 100%;
  object-fit: cover;               /* füllt ohne Verzerrung, Seitenverhältnis bleibt erhalten */
  object-position: top center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;            /* Ziehen übernimmt der Container */
}

/* Dynamic Island als Geräte-Element über dem Slider */
.eltern-island {
  position: absolute;
  left: 62.80%;
  top: 10.84%;
  width: 5.92%;
  height: 2.76%;
  background: #000;
  border-radius: 999px;            /* perfekte Pille bei jeder Größe */
  z-index: 3;
  pointer-events: none;
}

/* iPad-Screenshot-Slider auf dem neuen Hero-Bild (Technik wie Eltern-App)
   Hero 1672x941, Display x≈823–1336, y≈74–809 */
.kita-ipad-frame { position: relative; display: block; }
.kita-ipad-bg { display: block; width: 100%; height: auto; }

/* ---------- „Für Erzieher und Erzieherinnen": Auto-Slider im iPad-Display ---------- */
/* Maske = exakt die sichtbare Displayfläche des iPads (pixelgenau vermessen).
   Gleicher Mechanismus wie „Für Eltern" / „Für Leitungen": horizontaler Snap-Scroller. */
.kita-ipad-screen {
  position: absolute;
  left: 43.86%;
  top: 6.55%;
  width: 34.42%;
  height: 80.57%;
  z-index: 2;
  background: #fff;
  border-radius: 4.06% / 3.25%;    /* iPad-Display-Rundung (kreisförmige Ecken) */

  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;   /* steht immer auf genau einem Screenshot */
  scroll-behavior: smooth;
  cursor: grab;
  touch-action: pan-x;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.kita-ipad-screen::-webkit-scrollbar { display: none; }
.kita-ipad-screen.is-dragging { cursor: grabbing; }

/* ---------- Manuelle Pfeil-Steuerung neben den Geräten (iPad / Handy / Monitor) ---------- */
.device-nav {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.4vw, 52px);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.device-nav svg { width: 48%; height: 48%; display: block; }
.device-nav:hover {
  background: var(--mint);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%) scale(1.06);
}
.device-nav:active { transform: translate(-50%, -50%) scale(0.96); }
.device-nav:focus-visible {
  outline: 3px solid var(--mint-soft);
  outline-offset: 2px;
}

/* iPad – „Für Erzieher" (Display-Mitte ~46,8 %) */
.device-nav--kita { top: 46.8%; }
.device-nav--kita.device-nav--prev { left: 37.5%; }
.device-nav--kita.device-nav--next { left: 84%; }

/* Handy – „Für Eltern" (Display-Mitte ~48,6 %) */
.device-nav--eltern { top: 48.6%; }
.device-nav--eltern.device-nav--prev { left: 50%; }
.device-nav--eltern.device-nav--next { left: 81%; }

/* Monitor – „Für Leitungen" (Display-Mitte ~35,4 %) */
.device-nav--leitung { top: 35.4%; }
.device-nav--leitung.device-nav--prev { left: 25.5%; }
.device-nav--leitung.device-nav--next { left: 97%; }

@media (max-width: 720px) {
  .device-nav { width: clamp(34px, 9vw, 44px); }
  .device-nav--kita.device-nav--prev { left: 39%; }
  .device-nav--kita.device-nav--next { left: 82.5%; }
  .device-nav--eltern.device-nav--prev { left: 51.5%; }
  .device-nav--eltern.device-nav--next { left: 80%; }
  .device-nav--leitung.device-nav--prev { left: 24%; }
  .device-nav--leitung.device-nav--next { left: 97.5%; }
}

.kita-ipad-screen img {
  flex: 0 0 100%;                  /* jedes Bild füllt exakt das Display -> ein Screenshot */
  width: 100%;
  height: 100%;
  object-fit: cover;               /* füllt ohne Verzerrung, Seitenverhältnis bleibt erhalten */
  object-position: top center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;            /* Ziehen übernimmt der Container */
}
.kita-ipad-carousel {
  position: absolute;
  left: 49.22%;
  top: 7.86%;
  width: 30.68%;
  height: 78.11%;
  overflow: hidden;
  border-radius: 1.55% / 1.08%;
  z-index: 2;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.kita-ipad-carousel:active { cursor: grabbing; }
.kita-ipad-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
  will-change: transform;
}
.kita-ipad-slide { flex: 0 0 100%; height: 100%; }
.kita-ipad-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.kita-ipad-dots {
  position: absolute;
  left: 49.22%;
  width: 30.68%;
  top: 89%;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 3;
}
.kita-ipad-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: rgba(70, 75, 80, 0.4); cursor: pointer; padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.kita-ipad-dots button[aria-selected="true"] { background: var(--mint-dark); transform: scale(1.3); }


/* Position des Karussells = exakt da, wo das Phone im Marketing-Bild ist
   (Marketing-Bild 1529x1029, Phone bei x≈600-922, y≈79-779) */
.eltern-phone-carousel {
  position: absolute;
  left: 37.5%;
  top: 6.8%;
  width: 24%;
  height: 69%;
  overflow: hidden;
  z-index: 2;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.eltern-phone-carousel:active { cursor: grabbing; }

.eltern-phone-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
  will-change: transform;
}
.eltern-phone-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eltern-phone-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Pfeil-Buttons neben dem Phone */
.eltern-phone-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
  z-index: 3;
  transition: background 0.18s ease, transform 0.12s ease;
}
.eltern-phone-nav--prev { left: 33%; }
.eltern-phone-nav--next { right: 30%; }
.eltern-phone-nav:hover { background: var(--mint-soft); color: var(--mint-dark); }
.eltern-phone-nav:active { transform: translateY(-50%) scale(0.94); }

/* Dots zentriert über dem unteren Bereich */
.eltern-phone-dots {
  position: absolute;
  left: 37.5%;
  width: 24%;
  top: 78%;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 3;
}
.eltern-phone-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.eltern-phone-dots button[aria-selected="true"] {
  background: var(--mint-dark);
  transform: scale(1.3);
}

@media (max-width: 720px) {
  .eltern-phone-nav { width: 32px; height: 32px; }
  .eltern-phone-nav--prev { left: 2%; }
  .eltern-phone-nav--next { right: 2%; }
}






.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Dezente Trennlinien zwischen Sections ---------- */
main > section + section {
  position: relative;
}
/* Statische Linie + wandernder Lichtpunkt in einem Layer */
main > section + section::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1800px);
  height: 21px;
  pointer-events: none;
  background-image:
    radial-gradient(
      ellipse 180px 2px at 50% 50%,
      rgba(45, 140, 240, 0.5) 0%,
      rgba(45, 140, 240, 0.35) 35%,
      rgba(45, 140, 240, 0.18) 65%,
      rgba(45, 140, 240, 0.06) 85%,
      rgba(45, 140, 240, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(27, 36, 52, 0) 0%,
      rgba(27, 36, 52, 0.14) 12%,
      rgba(27, 36, 52, 0.18) 50%,
      rgba(27, 36, 52, 0.14) 88%,
      rgba(27, 36, 52, 0) 100%
    );
  background-repeat: no-repeat, no-repeat;
  background-size: 360px 5px, 100% 2px;
  background-position: -360px 50%, 50% 50%;
  filter: drop-shadow(0 0 5px rgba(45, 140, 240, 0.22));
  animation: divider-glow 15s ease-in-out infinite alternate;
}
@keyframes divider-glow {
  0%   { background-position: -360px 50%, 50% 50%; }
  100% { background-position: calc(100% + 360px) 50%, 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  main > section + section::before {
    animation: none;
    background-position: 50% 50%, 50% 50%;
  }
}
@media (max-width: 720px) {
  main > section + section::before {
    width: 86%;
  }
}


/* ---------- Features-Sektion als Memory-Karten ---------- */
.features-memory {
  padding: 64px 0 72px;
  background: #FBFAFA;
}
.features-memory__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1180px;
  margin: 0 auto;
}
.memo-card {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  perspective: 1200px;
  aspect-ratio: 1 / 1;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  will-change: transform;
}
.memo-card:hover {
  transform: translateY(-8px) scale(1.03);
  filter: drop-shadow(0 18px 28px rgba(60, 50, 40, 0.18));
  z-index: 2;
}
.memo-card:active {
  transform: translateY(-3px) scale(1.01);
  transition-duration: .12s;
}
.memo-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
  border-radius: 22px;
}
.memo-card.is-flipped .memo-card__inner {
  transform: rotateY(180deg);
}
.memo-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px;
  border-radius: 22px;
  background: #F4EFE7;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -10px 18px rgba(160,140,110,.10) inset,
    0 14px 30px rgba(60,50,40,.08),
    0 2px 6px rgba(60,50,40,.06);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
}
.memo-card__face--back {
  transform: rotateY(180deg);
  background: #FFFFFF;
  gap: 12px;
  padding: 24px;
  justify-content: center;
}
.memo-card__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #FAF6EF;
  color: #4A4A48;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -6px 12px rgba(160,140,110,.18) inset,
    0 6px 14px rgba(60,50,40,.10);
  transform: translateY(-2px) rotate(-4deg);
  transition: transform .35s ease;
}
.memo-card:hover .memo-card__icon {
  transform: translateY(-6px) rotate(-2deg);
}
.memo-card__icon svg {
  width: 38px;
  height: 38px;
}
.memo-card__title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: #1B2434;
}
.memo-card__hint {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9A9388;
  transition: color .25s ease;
}
.memo-card:hover .memo-card__hint {
  color: #6B6358;
}
.memo-card__back-title {
  font-weight: 700;
  font-size: 17px;
  color: #1B2434;
  margin-bottom: 4px;
}
.memo-card__back-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: #4D5566;
}
.memo-card:focus-visible {
  outline: none;
}
.memo-card:focus-visible .memo-card__inner {
  box-shadow: 0 0 0 3px rgba(45, 140, 240,.45);
}
@media (max-width: 980px) {
  .features-memory__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .features-memory { padding: 44px 0 52px; }
  .features-memory__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .memo-card__icon { width: 60px; height: 60px; }
  .memo-card__icon svg { width: 32px; height: 32px; }
  .memo-card__title { font-size: 15px; }
  .memo-card__back-text { font-size: 13.5px; }
}

/* === Globaler Seiten-Verlauf (1:1 wie im Menü) === */
body {
  background:
    radial-gradient(circle at 10% 92%, rgba(45, 140, 240, 0.28), transparent 55%),
    #ffffff;
  background-attachment: fixed;
}
.hero,
.features,
.quick-benefits,
.pricing,
.security,
.about,
.screenshots,
.features-memory,
.subpage-hero,
.subpage-visual,
.related-pages,
.subpage-cta {
  background: transparent;
}

/* === "Von einem Erzieher entwickelt" – Gründer/Presse === */
.founder { padding: 96px 0; }
.founder-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  margin-top: 44px;
}
.founder .ph { background: #fff4cc; border-radius: 4px; padding: 1px 6px; box-decoration-break: clone; }
.founder-person { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.founder-person__photo {
  position: relative; width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, var(--mint-soft), #fff);
  border: 1px solid var(--mint); display: grid; place-items: center;
}
/* echtes Foto: randlos und exakt im Kreis (Bild füllt den Container absolut) */
.founder-person__photo:has(img) { border: none; background: none; padding: 0; }
.founder-person__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%; display: block;
}
.founder-person__photo svg { width: 30px; height: 30px; color: var(--mint-dark); }
.founder-person__name { display: block; font-family: var(--font-serif); font-size: 1.25rem; color: var(--text); }
.founder-person__role { color: var(--text-muted); font-size: 0.9rem; }
.founder-text { font-size: 1.06rem; line-height: 1.75; color: var(--text); margin: 0 0 24px; }
.founder-facts { display: flex; gap: 36px; margin: 0 0 26px; flex-wrap: wrap; }
.founder-facts li { display: flex; flex-direction: column; gap: 2px; }
.founder-facts__num { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; color: var(--mint-dark); line-height: 1; }
.founder-facts li span:last-child { color: var(--text-muted); font-size: 0.9rem; }
.founder-seal {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--mint-soft); color: var(--mint-dark);
  font-weight: 600; font-size: 0.95rem;
  padding: 9px 18px; border-radius: var(--radius-pill);
}
.founder-press {
  margin: 0; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}
.press-label {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mint-dark);
  background: var(--mint-soft); padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.press-clip {
  aspect-ratio: 4 / 3; display: grid; place-items: center; gap: 12px; align-content: center;
  border: 2px dashed #c7d6ea; border-radius: var(--radius-md);
  background: var(--bg-soft); color: var(--text-muted); text-align: center; padding: 16px;
  margin-bottom: 18px;
}
.press-clip__ph { font-size: 0.9rem; max-width: 260px; }
.press-quote {
  font-family: var(--font-serif); font-style: italic; font-size: 1.18rem;
  line-height: 1.5; color: var(--text); margin: 0 0 12px;
}
.press-source { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
@media (max-width: 880px) {
  .founder-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Founder: zwei Personen (Ideengeber + Gründer) */
.founder-people { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.founder-people .founder-person { margin-bottom: 0; }

/* Founder: linke Seite als Karte + Kindergarten-Deko */
.founder-grid { align-items: start; }
.founder-story {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #f6faff 0%, #e9f1fc 100%);
  border: 1px solid #e3edf9;
  border-radius: var(--radius-lg);
  padding: 34px 36px 30px;
}
.founder-story > *:not(.founder-deco) { position: relative; z-index: 1; }
.founder-story::before {
  content: "\201C";
  position: absolute; top: 2px; right: 28px; z-index: 0;
  font-family: var(--font-serif); font-size: 8.5rem; line-height: 1;
  color: rgba(45, 140, 240, 0.10); pointer-events: none;
}
.founder-deco {
  position: absolute; right: -6px; bottom: -10px; z-index: 0;
  width: 138px; opacity: 0.85; pointer-events: none;
}

/* Tagebuch-/Handschrift-Look für die Gründer-Story */
.founder-text {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 500;
  color: #2a3550;
}

/* ===== Interaktives Tagebuch ===== */
.diary-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.founder-grid { align-items: stretch; }

/* Tagebuch-Cover (rechte Spalte) */
.diary-book {
  display: flex; align-items: stretch; cursor: pointer; text-align: left;
  border-radius: var(--radius-lg); overflow: hidden; color: #fff;
  background: linear-gradient(140deg, #2d8cf0 0%, #1a6fd4 100%);
  box-shadow: 0 18px 40px rgba(45,140,240,0.30);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  min-height: 250px;
}
.diary-book:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(45,140,240,0.40); }
.diary-book__spine { flex: 0 0 14px; background: rgba(255,255,255,0.22); box-shadow: inset -1px 0 0 rgba(255,255,255,0.25); }
.diary-book__inner { padding: 32px 32px 30px; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.diary-book__label { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.diary-book__title { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.25; }
.diary-book__sub { font-size: 0.96rem; opacity: 0.92; line-height: 1.5; margin-bottom: 8px; max-width: 290px; }
.diary-book__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; background: rgba(255,255,255,0.18); padding: 9px 18px; border-radius: var(--radius-pill); }

/* Overlay + Seite */
.diary-modal { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 24px; perspective: 2600px; }
.diary-toggle:checked ~ .diary-modal { display: grid; }
body:has(.diary-toggle:checked) { overflow: hidden; }
.diary-modal__bg { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(3px); cursor: pointer; animation: diaryFade 0.25s ease; }
.diary-page {
  position: relative; z-index: 1; width: min(1000px, 94vw); height: min(86vh, 800px); overflow: visible;
  display: flex; flex-direction: column;
  background: linear-gradient(125deg, #fffefb, #fbf6ea);
  border-radius: 10px 14px 14px 10px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.35), inset 0 0 70px rgba(120,96,60,0.07);
  padding: 42px 46px;
  transform-origin: left center;
  animation: diaryOpen 0.68s cubic-bezier(0.42, 0.0, 0.25, 1) both;
}
.diary-spreads { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Tagebuch: durchgehender Bundsteg (Mittellinie) über alle Seiten */
.diary-page::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 26px; bottom: 74px; left: 50%; transform: translateX(-50%); width: 64px;
  background: linear-gradient(to right,
    rgba(110,92,62,0) 0%, rgba(110,92,62,0.10) 40%,
    rgba(78,62,40,0.20) 50%, rgba(110,92,62,0.10) 60%, rgba(110,92,62,0) 100%);
}
.diary-page::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 26px; bottom: 74px; left: 50%; transform: translateX(-50%); width: 2px;
  background: rgba(78,62,40,0.40);
}
@keyframes diaryFade { from { opacity: 0; } }
/* Buch schlägt auf: 3D-Drehung um die linke Kante + sanftes Einblenden */
@keyframes diaryOpen {
  0%   { opacity: 0; transform: rotateY(-74deg) scale(0.96); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .diary-page { animation: diaryFade 0.25s ease both; transform: none; }
}
.diary-page__close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #efe9db; color: #6a6052; cursor: pointer; transition: background 0.15s ease; }
.diary-page__close:hover { background: #e5dccb; }
.diary-page__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 42px; align-items: start; }
.diary-page__story { position: relative; padding-left: 24px; }
.diary-page__story::before { content: ""; position: absolute; left: 4px; top: 2px; bottom: 2px; width: 2px; background: #e7b3aa; }
.diary-page__eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #b0846a; margin-bottom: 14px; }
.diary-page .founder-text { margin: 0; color: #36302a; }
.diary-page__press { margin: 0; }
@media (max-width: 820px) {
  .diary-page__grid { grid-template-columns: 1fr; gap: 28px; }
  .diary-page { padding: 30px 22px; }
  .diary-book { min-height: auto; }
}

/* ===== Tagebuch-Cover: echtes Notizbuch-Aussehen ===== */
.diary-book {
  position: relative; display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-align: center; min-height: 340px; padding: 36px 34px;
  overflow: visible; border-radius: 5px 14px 14px 5px;
  background:
    radial-gradient(130% 120% at 28% 12%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(135deg, #32486c 0%, #1c2c47 100%);
  box-shadow: 0 22px 48px rgba(15,23,42,0.42);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  isolation: isolate;
}
.diary-book:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: 0 30px 62px rgba(15,23,42,0.50); }
.diary-book::before { content: ""; position: absolute; left: 13px; top: 16px; bottom: 16px; border-left: 2px dashed rgba(255,255,255,0.20); }
.diary-book::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.05); pointer-events: none; }
.diary-book__pages { position: absolute; top: 12px; bottom: 12px; right: -7px; width: 13px; z-index: -1; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(to bottom, #f5efdd 0 2px, #d9cdb0 2px 3px); box-shadow: 3px 0 9px rgba(0,0,0,0.20); }
.diary-book__band { position: absolute; top: -5px; bottom: -5px; right: 30px; width: 12px; z-index: 4; background: linear-gradient(90deg, #10182a, #2a3a57 45%, #10182a); box-shadow: -2px 0 5px rgba(0,0,0,0.30), 2px 0 5px rgba(0,0,0,0.30); }
.diary-book__ribbon { position: absolute; bottom: -18px; left: 52px; width: 16px; height: 38px; z-index: 1; background: linear-gradient(#e0a04f, #c8823a); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); box-shadow: 0 4px 8px rgba(0,0,0,0.20); }
.diary-book__plate { position: relative; z-index: 3; padding-right: 24px; }
.diary-book__label { display: inline-block; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: #bcd0ee; margin-bottom: 12px; }
.diary-book__title { display: block; font-family: var(--font-serif); font-size: 1.7rem; line-height: 1.25; color: #fff; margin-bottom: 8px; }
.diary-book__sub { display: block; font-family: 'Caveat', 'Bradley Hand', cursive; font-size: 1.3rem; color: #cdddf2; margin-bottom: 20px; }
.diary-book__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; color: #17233a; background: #eaf0f8; padding: 9px 18px; border-radius: var(--radius-pill); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }

/* Tagebuch groß & mittig (linke Karte entfernt) */
.founder-book-wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(24px, 4vw, 60px); margin-top: 48px;
}
.founder-book-wrap .diary-book { width: min(600px, 100%); min-height: 360px; }
.founder-aside { max-width: 300px; }
.founder-aside--left { justify-self: end; }
.founder-aside--right { justify-self: start; }
.founder-aside__label {
  display: inline-block; font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px;
}
.founder-aside__text {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 1.55rem; line-height: 1.4; color: #3b342a;
}
.founder-aside .diary-founders { margin-top: 0; }
@media (max-width: 900px) {
  .founder-book-wrap { grid-template-columns: 1fr; justify-items: center; gap: 32px; }
  .founder-book-wrap .diary-book { width: min(440px, 86vw); }
  .founder-aside { max-width: 460px; justify-self: center; text-align: center; }
  .founder-aside .founder-person { justify-content: center; }
}

/* Aufgeklappt: breite Doppelseite mit Buchfalz */
.diary-page { width: min(1120px, 95vw); }
.diary-page__grid { grid-template-columns: 1fr 1fr; gap: 52px; position: relative; height: 100%; align-items: center; }
.diary-page__grid .diary-page__story--intro { display: flex; flex-direction: column; justify-content: center; }
/* Signatur-Block in der Tagebuch-Seite */
.diary-sign { margin-top: 26px; padding-top: 22px; border-top: 1px dashed #ddd0b6; }
.diary-sign .founder-people { margin-bottom: 18px; }
.diary-sign .founder-facts { margin-bottom: 18px; }
.diary-sign .founder-person__role { color: #7a715f; }
.diary-sign .founder-person__name { color: #2e2a23; }

/* Tagebuch geschlossen: normale Notizbuch-Größe (Hochformat), mittig */
.founder-book-wrap .diary-book { width: min(340px, 100%); min-height: 430px; }
.diary-book__title { font-size: 1.55rem; }

/* Tagebuch geschlossen: etwas größer */
.founder-book-wrap .diary-book { width: min(400px, 100%); min-height: 510px; }
.diary-book__title { font-size: 1.75rem; }
.diary-book__sub { font-size: 1.45rem; }

/* Tagebuch noch größer */
.founder-book-wrap .diary-book { width: min(480px, 44vw); max-width: 100%; min-height: 610px; }
.diary-book__title { font-size: 2rem; }
.diary-book__sub { font-size: 1.6rem; }
.diary-book__cta { font-size: 1rem; }

/* Presse-Box: bei eingesetztem Artikel kein Platzhalter-Rahmen mehr */
.press-clip:has(img) {
  aspect-ratio: auto;
  border: none;
  background: none;
  padding: 0;
  display: block;
}
.press-clip img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 26px rgba(0,0,0,0.14);
}

/* Mehrseitiges Tagebuch: Blättern */
.diary-spread { display: none; }
.diary-spread.is-active { display: block; height: 100%; animation: diaryFade 0.3s ease; }

/* Zeitungsartikel im Tagebuch – Spalte 1 = linke Buchseite, Spalte 2 = rechte */
.diary-article-page, .diary-article-cont { height: 100%; display: flex; flex-direction: column; }
.diary-article__columns {
  flex: 1 1 auto; min-height: 0;
  column-count: 2; column-gap: 52px; column-fill: auto;
}
/* Letzte Artikelseite: Spalten gleichmäßig füllen, damit kein halb-leerer Block entsteht */
.diary-article-cont.is-last .diary-article__columns { column-fill: balance; }
.diary-article__columns > * { break-inside: avoid; }
.diary-article__columns .diary-page__eyebrow { margin-bottom: 10px; }
.diary-article__headline {
  font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2;
  color: #2e2a23; margin: 2px 0 0;
}
.diary-article__lead {
  font-size: 0.85rem; font-style: italic; line-height: 1.5;
  color: #8a8170; margin: 9px 0 14px;
}
.diary-article__columns > p {
  margin: 0;
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 1.02rem; line-height: 30px; color: #36302a;
  text-align: left; hyphens: none; break-inside: auto;
  /* Linie exakt auf der Schrift-Grundlinie (20px je 30px-Zeile), kein Absatzabstand */
  background-image: repeating-linear-gradient(to bottom, transparent 0 20px, rgba(120,104,78,0.2) 20px 21px, transparent 21px 30px);
}
.diary-article__columns > p:last-child { margin-bottom: 0; }
.diary-article__subhead {
  font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.25;
  color: #2e2a23; margin: 4px 0 9px;
}
.diary-article__clip {
  margin: 0 0 12px; padding: 7px; background: #fff; border-radius: 5px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
  width: fit-content; max-width: 100%;
}
.diary-article__clip img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(230px, 27vh); aspect-ratio: 2052 / 1152; border-radius: 3px;
}
.diary-article__caption {
  margin-top: 7px; padding: 0 2px;
  font-size: 0.76rem; line-height: 1.4; color: #6b6357;
}
.diary-article__credit { color: #9a9080; }

/* Tagebuch-Doppelseite: links Arman, rechts Murat (handschriftlich) */
.diary-entry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; height: 100%; }
/* Notizblock-Linien: Periode = Zeilenhöhe (30px), Text sitzt auf den Linien */
.diary-entry__col {
  display: flex; flex-direction: column; min-width: 0;
  /* Linie exakt auf der Schrift-Grundlinie (gemessen: 20px in jeder 30px-Zeile) */
  background-image: repeating-linear-gradient(to bottom, transparent 0 20px, rgba(120,104,78,0.2) 20px 21px, transparent 21px 30px);
}
.diary-entry__col > p {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 1.02rem; line-height: 30px; color: #36302a;
  text-align: left; hyphens: none; margin: 0;
}
.diary-entry .diary-page__eyebrow { line-height: 30px; height: 30px; margin: 0; }
.diary-entry__sign {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  line-height: 30px; margin: 30px 0 0;
  text-align: right; color: #6a5f4c;
  font-style: normal; font-weight: 600;
}

@media (max-width: 820px) {
  .diary-article-page, .diary-article-cont { display: block; }
  .diary-article__columns { column-count: 1; column-fill: balance; }
  .diary-entry__grid { grid-template-columns: 1fr; gap: 30px; height: auto; }

  /* Das Overlay hat 24px Innenabstand, die Seite war aber auf 95vw gesetzt —
     zusammen mehr als die Bildschirmbreite. Dadurch stand der Text rechts
     über dem Rand. */
  .diary-page { width: 100%; max-width: 100%; }

  /* Die Buchfalz sitzt fest auf halber Seitenbreite. Bei zwei Spalten liegt
     sie dazwischen, bei einer mitten im Text — hier also weg. */
  .diary-page::before,
  .diary-page::after { display: none; }
}
.diary-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: #fff; color: #2d3a4f; cursor: pointer; z-index: 4;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.20); transition: background 0.15s ease, transform 0.15s ease;
}
.diary-nav:hover { background: #eef3fb; transform: translateY(-50%) scale(1.06); }
.diary-nav--prev { left: -23px; }
.diary-nav--next { right: -23px; }
.diary-pager { flex-shrink: 0; text-align: center; margin-top: 20px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a59f8d; }
.diary-pager span { color: #6e6757; font-weight: 700; }
@media (max-width: 820px) {
  .diary-nav--prev { left: 6px; }
  .diary-nav--next { right: 6px; }
}

/* Tagebuch Seite 2: Menschen + Zahlen */
.diary-founders { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.diary-founders .founder-person__photo { width: 56px; height: 56px; }
.diary-facts { gap: 46px; margin: 8px 0 26px; }
.diary-facts .founder-facts__num { font-size: 2.5rem; }
.diary-closing { font-family: 'Caveat', 'Bradley Hand', cursive; font-size: 1.55rem; line-height: 1.4; color: #6b6452; margin: 28px 0 0; }

/* Tagebuch öffnet sich wie ein Buch (3D-Aufklappen von links) */
.diary-modal { perspective: 2400px; }
.diary-toggle:checked ~ .diary-modal .diary-page {
  transform-origin: left center;
  animation: diaryOpen 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  box-shadow: -18px 30px 80px rgba(0,0,0,0.4);
}
@keyframes diaryOpen {
  0%   { opacity: 0; transform: rotateY(-108deg); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg); }
}

/* ===== Echtes Umblättern (3D) ===== */
.diary-spreads { position: relative; perspective: 2800px; }
.diary-spread {
  position: absolute; top: 0; left: 0; width: 100%;
  display: block; visibility: hidden;
  transform-origin: left center;
  backface-visibility: hidden;
  animation: none;
}
.diary-spread.is-active { position: relative; visibility: visible; z-index: 1; }
.diary-spread.is-turning { position: absolute; visibility: visible; z-index: 6; box-shadow: 14px 0 50px rgba(0,0,0,0.30); }
/* Buch-Öffnen ohne bleibende Transform (sonst stört es die 3D-Perspektive) */
.diary-toggle:checked ~ .diary-modal .diary-page { animation: diaryOpen 0.72s cubic-bezier(0.22, 1, 0.36, 1); }

/* ===== Zurück zur einfachen Anzeige (kein Aufklappen/Blättern) ===== */
.diary-modal { perspective: none; }
.diary-toggle:checked ~ .diary-modal .diary-page {
  animation: diaryPop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform: none;
  box-shadow: 0 40px 90px rgba(0,0,0,0.35);
}
.diary-spreads { perspective: none; }
.diary-spread {
  position: static; display: none; visibility: visible;
  transform: none; transform-origin: initial;
  backface-visibility: visible; box-shadow: none;
}
.diary-spread.is-active { position: static; display: block; visibility: visible; z-index: auto; animation: diaryFade 0.3s ease; }
.diary-spread.is-turning { display: none; }


/* ---------- Tagebuch-Cover auf schmalen Geraeten ----------------------
   Vier Breitenangaben fuer .founder-book-wrap .diary-book stehen ohne
   Groessenbegrenzung in der Datei; die letzte (width: min(480px, 44vw))
   gewinnt dadurch auf allen Geraeten. Auf einem Telefon sind 44vw nur
   rund 190px — das Buch wurde schmal gequetscht, Titel, Untertitel und
   Knopf standen ueber seinem Rand.
   Diese Regel steht bewusst am Dateiende, damit sie die vorherigen
   ueberschreibt. */
@media (max-width: 900px) {
    .founder-book-wrap .diary-book {
        /* An den umgebenden Bereich binden statt an die Bildschirmbreite:
           der Bereich hat seitlich Abstand, 88vw waren dafuer zu breit. */
        /* Ein Buch braucht Hochformat. Zwischenzeitlich stand hier volle
           Breite bei 300px Hoehe - das ergab ein breites, gedrungenes
           Rechteck, das wie eine Karte aussah und nicht wie ein Tagebuch.
           300 zu 420 ist das Verhaeltnis eines echten Buchruecken-Covers.
           Die Hoehe war nie das Problem, die Breite war es. */
        width: 100%;
        max-width: 300px;
        min-height: 420px;
    }
    /* Die angedeutete Seitenkante sitzt normalerweise 7px ausserhalb des
       Buchs und stand damit weiter rechts als Ueberschrift und Text -
       das Buch wirkte breiter als alles andere. Hier buendig setzen. */
    .diary-book__pages { right: 0; }
    .diary-book__title { font-size: 1.5rem; }
    .diary-book__cta { align-self: center; }
}