/* Website (/, /installieren, /impressum, /datenschutz). Baut auf styles.css auf (Farben, Schriften, Tafel,
   Fächerfarben) und bringt eigenes Layout und Bewegung mit: Abschnitte gleiten beim Scrollen herein,
   das Beispiel-Handy wechselt von selbst zwischen Heute, Woche und To-dos. */

/* Kopf oben, Fuß immer am unteren Rand – auch wenn eine Seite kürzer ist als das Fenster */
body.site {
  padding: 0; background: var(--bg); overflow-x: clip; overscroll-behavior-y: auto;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
.site > main { flex: 1 0 auto; width: 100%; }
.site > main:not(.site-wrap) { max-width: none; padding: 0; }
.site > .site-foot { flex-shrink: 0; }
.site-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.site a { color: inherit; }
.site :target { scroll-margin-top: 80px; }
html:has(body.site) { scroll-behavior: smooth; }

/* ---------------------------------------------------------------- Kopfzeile */

.site-nav {
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s;
}
.site-nav.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgb(12 15 29 / 0.4); }
.site-nav-in { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; letter-spacing: -0.03em; text-decoration: none; }
.site-brand img { width: 34px; height: 34px; border-radius: 10px; }
.site-links { display: none; gap: 4px; margin-left: 18px; }
.site-links a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 0.94rem; }
.site-links a:hover { background: var(--surface); color: var(--ink); }
.site-nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (max-width: 440px) { .site-nav .site-brand span { display: none; } }
@media (min-width: 960px) { .site-links { display: flex; } }

/* ---------------------------------------------------------------- Bausteine der Website */

.kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: 0.86rem; font-weight: 650; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.kicker i { font-style: normal; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.76rem; font-weight: 700; }
.eyebrow-site { font: 700 0.8rem/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.site-h2 { font: 850 clamp(2rem, 6vw, 3.1rem)/1.04 var(--font-ui); letter-spacing: -0.048em; margin: 0 0 16px; }
.site-lead { color: var(--ink-2); font-size: 1.1rem; line-height: 1.6; max-width: 36em; }
.site-section { padding: 88px 0; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-cta .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero-cta .btn { flex: 0 0 auto; } }
.btn-on-dark { background: var(--board-2); color: var(--board-ink); box-shadow: none; }
.btn-on-dark:hover { background: var(--board-3); }

/* Beim Scrollen hereingleiten (nur mit JavaScript – ohne bleibt alles sichtbar) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Start */

.hero { position: relative; overflow: hidden; isolation: isolate; padding: 28px 0 72px; }
.hero::before {
  /* Karopapier wie ein leerer Stundenplan */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 46px, 92px 100%;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, #000 25%, transparent 78%);
}
.hero::after {
  /* weicher Lichtfleck in der Akzentfarbe hinter dem Handy */
  content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; right: -160px; top: 40px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
  filter: blur(10px);
}
.hero-in { display: grid; gap: 48px; align-items: center; }
.hero-title { font: 850 clamp(2.7rem, 10vw, 5rem)/0.98 var(--font-ui); letter-spacing: -0.055em; margin: 22px 0 22px; }
.hero-title mark {
  color: inherit; padding: 0 0.06em; margin: 0 -0.06em; border-radius: 0.12em;
  background: linear-gradient(transparent 54%, var(--hl) 54%, var(--hl) 92%, transparent 92%) no-repeat;
  background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: marker 0.8s var(--ease) 0.5s forwards;
}
@media (prefers-color-scheme: dark) { .hero-title mark { background-image: linear-gradient(transparent 84%, var(--hl) 84%, var(--hl) 97%, transparent 97%); } }
@keyframes marker { to { background-size: 100% 100%; } }
.hero-lead { font-size: 1.18rem; line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.trust { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-3); font-size: 0.92rem; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust .icon { color: var(--ok); }
.hero-text [data-reveal]:nth-child(2) { --d: 0.06s; }
.hero-text [data-reveal]:nth-child(3) { --d: 0.12s; }
.hero-text [data-reveal]:nth-child(4) { --d: 0.18s; }
.hero-text [data-reveal]:nth-child(5) { --d: 0.24s; }

/* Bühne mit dem Beispiel-Handy */
.hero-stage { position: relative; justify-self: center; width: min(360px, 100%); perspective: 1200px; padding: 18px 0; }
.phone {
  position: relative; z-index: 1; display: flex; flex-direction: column; overflow: hidden;
  height: 640px; border-radius: 44px; background: var(--bg); padding: 0 12px;
  box-shadow: 0 40px 80px -30px rgb(12 15 29 / 0.55), 0 0 0 9px var(--surface), 0 0 0 10px var(--line-2);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease-out;
  animation: phone-in 0.9s var(--ease) 0.2s both;
}
@keyframes phone-in { from { transform: translateY(40px) rotateX(10deg); opacity: 0; } }
.phone-tag { position: absolute; top: 46px; right: 18px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 8px; font: 700 0.8rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.phone-status.is-dark { color: #fff; }
.phone-island { width: 84px; height: 24px; border-radius: 14px; background: #05060b; }
.phone-screens { position: relative; flex: 1; }
.demo-screen { position: absolute; inset: 0; padding-top: 6px; opacity: 0; transform: translateX(30px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); pointer-events: none; }
.demo-screen.is-active { opacity: 1; transform: none; }
.demo-screen.is-left { transform: translateX(-30px); }
.demo-head { padding: 4px 4px 10px; }
.demo-head b { display: block; font: 850 1.45rem/1.1 var(--font-ui); letter-spacing: -0.04em; }
.demo-head small { color: var(--ink-3); font-size: 0.78rem; }
.phone .board { margin-bottom: 10px; padding: 14px; border-radius: 18px; }
.phone .board-title { font-size: 1.12rem; }
.phone .stop a { margin-bottom: 6px; padding: 10px 10px 10px 12px; grid-template-columns: 46px minmax(0, 1fr) auto; }
.phone .stop-time b { font-size: 1.1rem; }
.phone .stop-gap { margin-bottom: 8px; }
.phone .stop-room { font-size: 0.95rem; }
.phone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 6px 18px; margin: 0 -12px; background: color-mix(in srgb, var(--surface) 90%, transparent); border-top: 1px solid var(--line); }
.phone-tabs button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font: 650 0.66rem/1 var(--font-ui);
}
.phone-tabs svg { width: 22px; height: 22px; padding: 2px; border-radius: 9px; transition: background 0.25s, color 0.25s; }
.phone-tabs [aria-selected="true"] { color: var(--ink); }
.phone-tabs [aria-selected="true"] svg { background: var(--accent-soft); color: var(--accent); }
/* Fallblatt in den Tafel-Zellen: rollende Ziffern ohne Kacheln */
.board-cell .flap { background: none; width: auto; min-width: 0.5em; }
.board-cell .flap::after { display: none; }
.board-cell .flaps { gap: 0; }
.board-cell .flap.space { width: 0.24em; }

/* Woche im Handy */
.mini-week-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 6px; text-align: center; font: 700 0.62rem/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mini-week-head .is-today { color: var(--accent); }
.mini-week-grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 64px); gap: 4px; }
.mini-week-grid span {
  grid-column: var(--c); grid-row: var(--r); border-radius: 8px; padding: 6px 5px; background: var(--sc); color: var(--sc-ink);
  font: 700 0.66rem/1.15 var(--font-ui); overflow: hidden; display: flex; flex-direction: column; gap: 2px;
}
.mini-week-grid small { font: 600 0.68rem/1.1 var(--font-sign); opacity: 0.92; white-space: normal; }
.mini-now { position: absolute; left: 0; right: 0; top: calc((var(--r) - 1) * 68px + 40px); height: 2px; background: var(--accent); z-index: 2; }
.mini-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* To-dos im Handy und als Karte */
.demo-todos, .todo-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.demo-todos li, .todo-card li {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  font-weight: 650; font-size: 0.9rem; transition: color 0.3s;
}
.demo-todos i, .todo-card i { flex-shrink: 0; position: relative; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sc); transition: background 0.3s; }
.demo-todos i::after, .todo-card i::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--sc-ink); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transition: transform 0.3s var(--spring);
}
.demo-todos small, .todo-card small { display: block; color: var(--ink-3); font-weight: 550; font-size: 0.78rem; margin-top: 2px; }
.demo-todos li.is-done, .todo-card li.is-done { color: var(--ink-3); }
.demo-todos li.is-done > span, .todo-card li.is-done > span { text-decoration: line-through; }
.demo-todos li.is-done i, .todo-card li.is-done i { background: var(--sc); }
.demo-todos li.is-done i::after, .todo-card li.is-done i::after { transform: rotate(45deg) scale(1); }

/* Schwebende Fächer und die Benachrichtigung neben dem Handy */
.float-chip {
  position: absolute; z-index: 2; padding: 7px 13px; border-radius: 999px; background: var(--sc); color: var(--sc-ink);
  font: 750 0.86rem/1 var(--font-ui); box-shadow: var(--shadow-lg);
  animation: chip-in 0.6s var(--spring) both, float 6s ease-in-out infinite;
  animation-delay: calc(0.6s + var(--k) * 0.12s), calc(var(--k) * -1.3s);
}
.float-chip:nth-of-type(1) { left: -70px; top: 150px; }
.float-chip:nth-of-type(2) { right: -50px; top: 250px; }
.float-chip:nth-of-type(3) { left: -82px; top: 420px; }
.float-chip:nth-of-type(4) { right: -40px; top: 540px; }
@keyframes chip-in { from { opacity: 0; scale: 0.5; } }
@keyframes float { 50% { translate: 0 -10px; } }
.demo-push {
  position: absolute; z-index: 3; left: 50%; top: 66px; width: min(330px, 92%); translate: -50% 0;
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  opacity: 0; transform: translateY(-24px) scale(0.96); transition: opacity 0.45s var(--ease), transform 0.45s var(--spring); pointer-events: none;
}
.demo-push.is-on { opacity: 1; transform: none; }
.demo-push b { display: block; font-size: 0.88rem; }
.demo-push small { display: block; color: var(--ink-2); font-size: 0.8rem; }
.demo-push-icon img { display: block; width: 34px; height: 34px; border-radius: 9px; }

/* Auf schmalen Bildschirmen würden die Fächer das Handy verdecken – dort zeigt das Laufband die Farben */
@media (max-width: 600px) { .float-chip { display: none; } }
@media (max-width: 420px) { .phone { height: 600px; } }
@media (min-width: 960px) {
  .hero { padding: 48px 0 96px; }
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
}
@media (min-width: 1200px) {
  .hero-in { grid-template-columns: 1.1fr 0.9fr; }
}

/* ---------------------------------------------------------------- Laufband */

.marquee { overflow: hidden; padding: 18px 0; border-block: 1px solid var(--line); background: var(--surface); }
.marquee-track { display: flex; gap: 10px; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { padding: 9px 16px; border-radius: 999px; background: var(--sc); color: var(--sc-ink); font: 750 0.95rem/1 var(--font-ui); white-space: nowrap; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 5px)); } }

/* ---------------------------------------------------------------- Funktionen (abwechselnd links/rechts) */

.feature { padding: 96px 0; }
.feature-alt { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 4%, transparent) 30%, transparent); }
.feature-in { display: grid; gap: 44px; align-items: center; }
.feature-visual { position: relative; min-width: 0; }
.feature-points { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.feature-points li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--ink); }
.feature-points li::before {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@media (min-width: 960px) {
  .feature-in { grid-template-columns: 1fr 1fr; gap: 72px; }
  .feature-alt .feature-text { order: 2; }
  .install-teaser .feature-visual { order: 0; }
}

/* Große Tafel */
.board-xl { padding: 22px 24px 24px; border-radius: 28px; max-width: 520px; margin: 0 auto; }
.board-xl .board-title { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.board-xl .board-cell { padding: 12px 16px 14px; border-radius: 16px; }
.board-xl .board-cell b { font-size: clamp(1.8rem, 9cqw, 3.2rem); }
.board-xl .board-count { font-size: 1.4rem; padding: 8px 14px 7px; }

/* Woche in Farbe */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.legend button {
  border: 0; cursor: pointer; padding: 9px 15px; border-radius: 999px; background: var(--sc-soft); color: var(--sc-text);
  font: 750 0.92rem/1 var(--font-ui); box-shadow: inset 0 0 0 2px transparent; transition: background 0.2s, color 0.2s, transform 0.15s var(--spring), box-shadow 0.2s;
}
.legend button:hover { transform: translateY(-2px); }
.legend button[aria-pressed="true"] { background: var(--sc); color: var(--sc-ink); box-shadow: 0 8px 20px -10px var(--sc); }
.legend-hint { margin-top: 10px; color: var(--ink-3); font-size: 0.86rem; }
.week-card { padding: 14px 14px 16px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.week-card-head { display: grid; grid-template-columns: 44px repeat(5, 1fr); gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); text-align: center; font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.week-card-head .is-today { color: var(--accent); }
.week-card-body { display: grid; grid-template-columns: 44px 1fr; column-gap: 6px; padding-top: 10px; --hour: 54px; }
.week-card-hours { display: flex; flex-direction: column; }
.week-card-hours span { height: var(--hour); font: 600 0.74rem/1 var(--font-sign); color: var(--ink-3); transform: translateY(-5px); }
.week-card-grid {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 6px; height: calc(var(--hour) * 7.5);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hour));
}
.week-card-grid > span {
  grid-column: var(--c); grid-row: 1; align-self: start; margin-top: calc(var(--from) * var(--hour)); height: calc(var(--len) * var(--hour) - 3px);
  border-radius: 10px; padding: 6px 7px; background: var(--sc); color: var(--sc-ink); overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; container-type: inline-size;
  transition: opacity 0.3s, filter 0.3s, transform 0.3s var(--ease);
}
.week-card-grid b {
  /* lange Namen brechen mit Trennstrich um ("Infor-matik"), höchstens zwei Zeilen */
  font: 750 0.78rem/1.15 var(--font-ui); overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex-shrink: 0;
}
.week-card-grid small { font: 600 0.8rem/1.1 var(--font-sign); letter-spacing: 0.01em; }
.week-card-grid em { font: 700 0.8rem/1.1 var(--font-sign); font-style: normal; margin-top: auto; }
.wc-short { display: none; }
@container (max-width: 58px) {
  .week-card-grid small { font-size: 0.72rem; }
  .week-card-grid em { display: none; }
  .wc-full { display: none; }
  .wc-short { display: inline; }
}
/* Handy: schmale Spalten – Namen dürfen umbrechen (mit Trennstrich), Uhrzeit steht dann untereinander */
@media (max-width: 520px) {
  .week-card { padding: 12px 10px 14px; border-radius: 22px; }
  .week-card-head { grid-template-columns: 30px repeat(5, 1fr); gap: 4px; }
  .week-card-body { grid-template-columns: 30px 1fr; column-gap: 4px; }
  .week-card-hours span { font-size: 0.68rem; }
  .week-card-grid { column-gap: 4px; }
  .week-card-grid > span { padding: 5px 4px; border-radius: 8px; }
  .week-card-grid b { font-size: 0.72rem; }
}
.week-card-grid.has-focus > span:not(.is-focus) { opacity: 0.18; filter: saturate(0.3); }
.week-card-grid.has-focus > span.is-focus { transform: scale(1.03); }
.week-card-now { position: absolute; left: 0; right: 0; top: calc(var(--at) * var(--hour)); height: 2px; background: var(--accent); z-index: 2; }
.week-card-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
/* Blöcke fallen nacheinander in ihre Spalte */
.js .week-card-grid > span { opacity: 0; transform: translateY(-14px) scale(0.96); }
.js .week-card.is-built .week-card-grid > span { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.5s var(--spring); transition-delay: calc(var(--i, 0) * 70ms); }
.js .week-card.is-built .week-card-grid.has-focus > span { transition-delay: 0s; }
.js .week-card.is-built .week-card-grid.has-focus > span:not(.is-focus) { opacity: 0.18; }

/* To-do-Karte und Notiz */
.todo-card { padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); max-width: 460px; }
.todo-card-title { display: flex; justify-content: space-between; align-items: baseline; font: 850 1.3rem/1.2 var(--font-ui); letter-spacing: -0.03em; margin-bottom: 12px; }
.todo-card-title span { font: 650 0.84rem/1 var(--font-ui); color: var(--ink-3); letter-spacing: 0; }
.todo-card li { background: var(--bg); }
.note-card {
  position: relative; max-width: 300px; margin: 16px 0 0 auto; padding: 16px 18px; border-radius: 20px; transform: rotate(1.5deg);
  background: linear-gradient(180deg, var(--sc-soft), var(--surface) 80%); border: 1px solid color-mix(in srgb, var(--sc) 30%, var(--line)); box-shadow: var(--shadow-lg);
}
.note-card b { display: block; font-weight: 800; margin-bottom: 4px; }
.note-card p { color: var(--ink-2); font-size: 0.92rem; }

/* Sperrbildschirm mit Benachrichtigungen */
.lock {
  position: relative; max-width: 420px; margin: 0 auto; padding: 28px 18px 26px; border-radius: 34px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, #5a49f0, #1b2150 60%, #0d1129); color: #fff; box-shadow: var(--shadow-lg);
}
.lock-time { text-align: center; font: 300 4.2rem/1 var(--font-ui); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-bottom: 26px; }
.lock-time small { display: block; font: 600 0.9rem/1.4 var(--font-ui); letter-spacing: 0; opacity: 0.85; margin-top: 6px; }
.lock-note {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-top: 8px; border-radius: 20px;
  background: rgb(255 255 255 / 0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lock-note b { display: block; font-size: 0.92rem; }
.lock-note small { display: block; font-size: 0.82rem; opacity: 0.85; }
.js .lock-note { opacity: 0; transform: translateY(-18px) scale(0.97); }
.js .lock.is-in .lock-note { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.55s var(--spring); }
.js .lock.is-in .lock-note:nth-of-type(1) { transition-delay: 0.3s; }
.js .lock.is-in .lock-note:nth-of-type(2) { transition-delay: 1.1s; }
.js .lock.is-in .lock-note:nth-of-type(3) { transition-delay: 1.9s; }

/* ---------------------------------------------------------------- Kacheln, Schritte, Vergleich */

.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tile {
  padding: 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, opacity 0.7s var(--ease) !important;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile b { display: block; font: 800 1.12rem/1.25 var(--font-ui); letter-spacing: -0.02em; margin: 16px 0 6px; }
.tile p { color: var(--ink-2); }
.tile-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--sc); color: var(--sc-ink); }
.tile-icon svg { width: 24px; height: 24px; }
.tiles .tile:nth-child(2) { --d: 0.06s; }
.tiles .tile:nth-child(3) { --d: 0.12s; }
.tiles .tile:nth-child(5) { --d: 0.06s; }
.tiles .tile:nth-child(6) { --d: 0.12s; }

.site-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; position: relative; }
.site-steps li { position: relative; padding: 26px 24px 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.site-steps li:nth-child(2) { --d: 0.1s; }
.site-steps li:nth-child(3) { --d: 0.2s; }
.site-step-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--board); color: var(--board-ink); font: 700 1.6rem/1 var(--font-sign); margin-bottom: 16px; }
.site-steps b { display: block; font: 800 1.15rem/1.25 var(--font-ui); letter-spacing: -0.02em; margin-bottom: 6px; }
.site-steps p { color: var(--ink-2); }
@media (min-width: 900px) { .site-steps { grid-template-columns: repeat(3, 1fr); } }

.account-in { display: grid; gap: 32px; align-items: start; }
.account-in > * { min-width: 0; }
@media (min-width: 960px) { .account-in { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }
.compare-card { padding: 8px 20px; border-radius: 26px; box-shadow: var(--shadow-lg); }
.compare { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.compare th, .compare td { padding: 14px 8px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.compare thead th { font: 750 0.8rem/1.2 var(--font-ui); letter-spacing: 0.04em; color: var(--ink-2); }
.compare thead th.is-best { color: var(--accent); }
.compare tbody th { text-align: left; font-weight: 600; color: var(--ink); padding-left: 2px; }
.compare td.is-best { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.yes, .no { display: inline-block; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
.yes { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.no { background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' stroke='%237d8398' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------------------------------------------------------------- Home-Bildschirm, Fragen, Schluss, Fuß */

.home-phone {
  position: relative; width: min(300px, 80vw); height: 560px; margin: 0 auto; border-radius: 42px; overflow: hidden; padding: 0 16px;
  background: radial-gradient(130% 80% at 30% 0%, #6a58ff, #2a2f7a 55%, #121738);
  box-shadow: 0 40px 80px -30px rgb(12 15 29 / 0.55), 0 0 0 9px var(--surface), 0 0 0 10px var(--line-2);
}
.home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 12px; padding: 26px 4px 0; }
.home-grid i { aspect-ratio: 1; border-radius: 14px; background: rgb(255 255 255 / 0.2); }
.home-app { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font: 600 0.62rem/1 var(--font-ui); }
.home-app img { width: 100%; aspect-ratio: 1; border-radius: 14px; box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.5); }
.home-dock { position: absolute; left: 12px; right: 12px; bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 12px; border-radius: 28px; background: rgb(255 255 255 / 0.18); }
.home-dock i { aspect-ratio: 1; border-radius: 14px; background: rgb(255 255 255 / 0.28); }
.js .home-app { opacity: 0; transform: scale(0.3); }
.js .home-phone.is-in .home-app { opacity: 1; transform: none; transition: opacity 0.3s, transform 0.6s var(--spring); transition-delay: 0.5s; }
.js .home-phone.is-in .home-app img { animation: wiggle 0.6s ease-in-out 1.2s 2; }
@keyframes wiggle { 25% { rotate: -6deg; } 75% { rotate: 6deg; } }

.faq-in { max-width: 820px; }
.faq { display: grid; gap: 10px; }
.faq .card { margin: 0; padding: 20px 22px; border-radius: 20px; }
.faq summary { font-size: 1.05rem; }

.final { padding: 40px 0 96px; }
.final-in {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 64px 24px; border-radius: 36px;
  background: var(--board); color: var(--board-ink);
}
.final-in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background-image: radial-gradient(color-mix(in srgb, var(--board-ink) 12%, transparent) 1px, transparent 1.2px); background-size: 9px 9px;
}
.final-in .site-lead { margin: 0 auto; color: var(--board-dim); }
.final-in .hero-cta { justify-content: center; }
.final-board { display: flex; justify-content: center; margin-bottom: 22px; font: 700 clamp(2.4rem, 10vw, 4.4rem)/1 var(--font-sign); }
.final-board .flaps { gap: 4px; }
.final-board .flap { width: 0.68em; border-radius: 8px; }

.site-foot { padding: 34px 0 calc(34px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.site-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-foot nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.94rem; }
.site-foot nav a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- Rechtliches (/impressum, /datenschutz) */

.legal-main { max-width: 860px; padding-top: 24px; padding-bottom: 48px; }
/* Kopf und Fuß an der Textspalte ausrichten */
.site-legal .site-wrap { max-width: 860px; }
.site-legal .legal-text { padding: 28px clamp(18px, 4vw, 40px); }

/* ---------------------------------------------------------------- Anleitung (/installieren) */

.guide { padding: 40px 0 80px; }
.guide-head { max-width: 760px; margin-bottom: 26px; }
.guide-tabs { display: flex; gap: 2px; padding: 4px; margin: 0 0 28px; max-width: 520px; background: var(--surface-2); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.guide-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 11px; background: none; cursor: pointer; font: 650 0.95rem/1 var(--font-ui); color: var(--ink-3); }
.guide-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.guide-panel[hidden] { display: none; }
.guide-note {
  display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 0 0 24px; padding: 14px 16px; border-radius: 16px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--ink); font-size: 0.95rem;
}
.guide-note .icon { color: var(--accent); width: 20px; height: 20px; margin-top: 1px; }
.guide-install { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 24px; }
.guide-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.guide-step { display: flex; flex-direction: column; gap: 14px; }
.guide-shot {
  position: relative; border-radius: 34px; overflow: hidden; background: var(--surface); aspect-ratio: 1179 / 2556;
  box-shadow: 0 30px 60px -28px rgb(12 15 29 / 0.5), 0 0 0 7px var(--surface), 0 0 0 8px var(--line-2);
}
.guide-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-shot.is-text { aspect-ratio: auto; display: grid; place-items: center; padding: 34px 20px; min-height: 180px; box-shadow: none; border: 1px dashed var(--line-2); }
.guide-glyph { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: var(--accent-soft); color: var(--accent); }
.guide-glyph svg { width: 40px; height: 40px; }
.guide-text { display: flex; gap: 12px; align-items: flex-start; }
.guide-n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--board); color: var(--board-ink); font: 700 1.25rem/1 var(--font-sign); }
.guide-text b { display: block; font: 800 1.05rem/1.3 var(--font-ui); letter-spacing: -0.015em; }
.guide-text p { color: var(--ink-2); font-size: 0.94rem; margin-top: 3px; }
.guide-text .inline-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: -5px; border-radius: 6px; background: var(--surface-2); color: var(--accent); }
.guide-text .inline-glyph svg { width: 15px; height: 15px; }
/* Markierung auf dem Bildschirmfoto: Ring um die Stelle, Pfeil zeigt darauf */
.mark { position: absolute; left: var(--x); top: var(--y); width: var(--w, 16%); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--hl);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.35), 0 0 24px rgb(0 0 0 / 0.35); animation: ping 1.6s ease-out infinite;
}
.mark.is-wide { aspect-ratio: auto; height: var(--h, 7%); }
.mark.is-wide::before { border-radius: 14px; }
@keyframes ping { 0% { scale: 0.92; opacity: 1; } 100% { scale: 1.18; opacity: 0.4; } }
.done-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .week-card-grid > span, .js .lock-note, .js .home-app { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
  html:has(body.site) { scroll-behavior: auto; }
}
.guide-shot .guide-app { width: 74px; height: 74px; object-fit: contain; border-radius: 18px; box-shadow: 0 14px 30px -12px rgb(12 15 29 / 0.5); }
.guide-shot.is-text .done-badge { font-size: 1.05rem; padding: 10px 18px; background: var(--accent-soft); color: var(--accent); }
.guide .hero-cta { margin-top: 20px; }
.compare thead th, .compare td b { white-space: nowrap; }
.compare td { width: 88px; }
@media (max-width: 420px) {
  .compare-card { padding: 4px 12px; }
  .compare { font-size: 0.88rem; }
  .compare th, .compare td { padding: 12px 4px; }
  .compare tbody th { hyphens: auto; overflow-wrap: anywhere; }
  .compare td { width: 58px; }
  .compare thead th { font-size: 0.72rem; }
}

/* Wartungsarbeiten: gelber Streifen unter der Kopfzeile */
.site-maint { background: var(--hl); color: #241a00; font-size: 0.95rem; line-height: 1.45; }
.site-maint .site-wrap { padding-top: 10px; padding-bottom: 10px; }