/* ABC Systematik — Shinsa (/shinsa)
   Ergänzt site.css; alle Klassen mit sh- vorangestellt, damit sie sich nicht
   mit dem Shinsa-Abschnitt der Startseite (.sh-…) beißen. */

/* --- Einstieg mit Video ---
   Der Vorspann hat weiße Ränder und liegt deshalb ohne Rahmen, ohne runde Ecken
   und ohne eigene Hintergrundfläche direkt auf der Seite. Sobald er durchgelaufen
   ist, legt sich der graue Verlauf aus dem Schlussbild über die volle Seitenbreite
   und läuft nach unten als weiche graue Trennlinie aus. */
.sh-hero { padding-block: 40px 52px; text-align: center; }
.sh-band { position: relative; margin-bottom: 64px; }
.sh-stage {
  position: relative; width: min(460px, 100%); margin: 0 auto;
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg);
}
.sh-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Haarlinie unter dem Vorspann.
   Sie liegt unter dem Bild, nicht darüber, und zeichnet sich in dem Moment,
   in dem der Vorspann endet, von der Mitte nach außen. An den Enden läuft
   sie aus, damit sie nicht gegen den Fensterrand stößt. */
.sh-linie {
  height: 1px; margin-top: 26px; pointer-events: none;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--line) 14%,
      var(--tinte, #33312c) 50%,
      var(--line) 86%,
      transparent 100%);
  opacity: .55;
  transform: scaleX(0); transform-origin: center;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.sh-band.is-done .sh-linie { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .sh-linie { transition: none; }
}
/* Nur das Symbol, in einem Grau eine Spur dunkler als der Verlauf darunter:
   erkennbar, ohne sich vor das Schlussbild zu stellen. */
.sh-replay {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(20,24,31,.17); color: rgba(255,255,255,.95);
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.sh-replay:hover, .sh-replay:focus-visible { background: rgba(20,24,31,.4); color: #fff; }
.sh-replay svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.sh-hero h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.14; }
.sh-hero .lead { margin: 16px auto 0; font-size: 18px; color: var(--text-2); max-width: 640px; }
.sh-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.sh-hero .sub { font-size: 12px; color: var(--text-2); margin-top: 18px; }
@media (max-width: 620px) { .sh-band { margin-bottom: 44px; } }

/* Ersatzdarstellung ohne Video (Wortmarke mit Lichtschein) */
.sh-wordmark { width: min(400px, 78%); margin: 0 auto 30px; position: relative; overflow: hidden; }
.sh-wordmark img { display: block; width: 100%; height: auto; }
.sh-wordmark::after {
  content: ""; position: absolute; top: -20%; left: -55%; width: 42%; height: 140%;
  transform: rotate(16deg); mix-blend-mode: lighten; pointer-events: none;
  background: linear-gradient(90deg, rgba(150,155,165,0) 0%, rgba(150,155,165,.75) 48%, rgba(190,195,205,.9) 52%, rgba(150,155,165,.75) 56%, rgba(150,155,165,0) 100%);
  animation: sh-schein 9s ease-in-out 1.6s infinite;
}
@keyframes sh-schein { 0%, 70% { left: -55%; } 92%, 100% { left: 115%; } }
@media (prefers-reduced-motion: reduce) { .sh-wordmark::after { display: none; } }

/* --- Geschichte --- */
.sh-story h2 { font-size: clamp(26px, 3.4vw, 36px); }
.sh-story p { margin-top: 16px; color: var(--text-2); max-width: 68ch; }
.sh-story p.first { font-size: 19px; color: var(--text); }
.sh-story .sign { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.sh-story .sign b { color: var(--text); font-weight: 600; }

/* --- Für wen --- */
.sh-who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .sh-who { grid-template-columns: 1fr; } }
.sh-who-card { border: 1px solid var(--line); border-radius: 8px; padding: 28px 24px; background: #fff; }
.sh-who-card h3 { font-size: clamp(22px, 2.4vw, 28px); }
.sh-who-card p { color: var(--text-2); margin-top: 10px; }

/* --- Die zwei Optionen --- */
.sh-path { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 820px) { .sh-path { grid-template-columns: 1fr; gap: 26px; } }
.sh-path + .sh-path { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.sh-path h3 { font-size: 24px; }
.sh-path .kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.sh-path p { color: var(--text-2); margin-top: 12px; }
.sh-path ul { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; }
.sh-path li { padding-left: 24px; position: relative; }
.sh-path li::before { content: ""; position: absolute; left: 0; top: .48em; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue); }
.sh-price { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); padding: 24px; }
.sh-price .amount { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.sh-price .note { color: var(--text-2); font-size: 14px; margin-top: 8px; }
.sh-price dl { margin: 18px 0 0; display: grid; gap: 10px; font-size: 14px; }
.sh-price dt { color: var(--text-2); }
.sh-price dd { margin: 2px 0 0; font-weight: 500; }

/* --- Ablauf --- */
.sh-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 900px) { .sh-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sh-steps { grid-template-columns: 1fr; } }
.sh-step { border-top: 2px solid var(--text); padding-top: 14px; }
.sh-step .num { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sh-step h3 { margin-top: 6px; font-size: 17px; }
.sh-step p { color: var(--text-2); font-size: 15px; margin-top: 6px; }

/* --- Wie es weitergeht --- */
.sh-after { border: 1px solid var(--line); border-radius: 8px; padding: 32px; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 820px) { .sh-after { grid-template-columns: 1fr; padding: 24px; } }
.sh-after h3 { font-size: 20px; margin-top: 12px; }
.sh-after p { color: var(--text-2); margin-top: 10px; }
.sh-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #eceef0; color: var(--text); }

/* --- Fragen --- */
.sh-faq { border-top: 1px solid var(--line); }
.sh-faq details { border-bottom: 1px solid var(--line); }
.sh-faq summary { padding: 18px 0; cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.sh-faq summary::-webkit-details-marker { display: none; }
.sh-faq summary::after { content: "+"; color: var(--blue); font-size: 22px; line-height: 1; }
.sh-faq details[open] summary::after { content: "–"; }
.sh-faq p { color: var(--text-2); padding-bottom: 20px; max-width: 70ch; }

/* --- Formular --- */
.sh-form-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 820px) { .sh-form-wrap { grid-template-columns: 1fr; } }
.sh-choice { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .sh-choice { grid-template-columns: 1fr; } }
.sh-choice label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 0; cursor: pointer; font-weight: 400; }
.sh-choice label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.sh-choice input { width: auto; margin-top: 3px; }
.sh-choice strong { display: block; font-weight: 600; font-size: 15px; }
.sh-choice span.d { font-size: 13px; color: var(--text-2); }
.sh-aside { border: 1px solid var(--line); border-radius: 8px; padding: 22px; background: var(--bg-2); font-size: 15px; }
.sh-aside h3 { font-size: 16px; }
.sh-aside h3 + ul { margin-top: 12px; }
.sh-aside ul { list-style: none; padding: 0; display: grid; gap: 8px; color: var(--text-2); }
.sh-aside li { padding-left: 18px; position: relative; }
.sh-aside li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--blue); }

/* --- Wasserzeichen: auf dieser Seite die Shinsa-Wortmarke statt des ABC-Zeichens.
   Sie ist breiter als das ABC-Zeichen und sitzt deshalb tiefer, etwa auf halber
   Fensterhöhe, damit sie nicht in der Kopfzeile klemmt. --- */
.seite-shinsa .section { background-image: url("wm-shinsa-dark.png"); background-position: center 44%; }
.seite-shinsa .section.alt { background-image: url("wm-shinsa-light.png"); background-position: center 44%; }

/* Kopfzeile trägt hier die Shinsa-Wortmarke statt des Firmennamens. */
.brand.brand-bild img { height: 46px; width: auto; }
@media (max-width: 480px) { .brand.brand-bild img { height: 38px; } }

/* ============================================================
   Ruhigerer Ton für Shinsa
   ------------------------------------------------------------
   Das Enso ist ein Pinselstrich, die ABC-Seite ist bewusst
   nüchtern. Damit beides zusammenpasst, bekommt diese Seite
   wärmeres Papier, Tinte statt Blau bei den Zierelementen und
   Trennlinien, die an den Enden auslaufen statt hart zu enden.
   Die Schaltflächen bleiben im Blau der Firma – dadurch bleibt
   erkennbar, dass es dieselbe Familie ist.
   ============================================================ */
.seite-shinsa {
  --bg-2: #f6f3ee;      /* warmes Papier statt kühlem Grau */
  --line: #e6dfd4;      /* weichere, wärmere Linien */
  --tinte: #33312c;     /* Ton des Logos */
}

/* Zierelemente in Tinte, nicht in Blau */
.seite-shinsa .eyebrow,
.seite-shinsa .sh-weg .kicker { color: var(--tinte); letter-spacing: .16em; }
.seite-shinsa .sh-weg li::before { border-color: var(--tinte); }
.seite-shinsa .sh-aside li::before { background: var(--tinte); }
.seite-shinsa .sh-faq summary::after { color: var(--tinte); }
.seite-shinsa .sh-step { border-top-color: var(--tinte); }

/* Überschriften etwas luftiger */
.seite-shinsa h1, .seite-shinsa h2 { font-weight: 500; letter-spacing: -0.005em; }
.seite-shinsa .sh-story p.first { font-weight: 400; }

/* Auslaufende Trennlinien statt harter Kanten */
.seite-shinsa .sh-weg + .sh-weg,
.seite-shinsa .sh-story .sign,
.seite-shinsa .sh-faq details,
.seite-shinsa .sh-faq {
  border-color: transparent;
  background-image: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.seite-shinsa .sh-weg + .sh-weg,
.seite-shinsa .sh-story .sign,
.seite-shinsa .sh-faq { background-position: 0 0; }
.seite-shinsa .sh-faq details { background-position: 0 100%; }

/* Kästen: weichere Ecken, weniger Rahmen */
.seite-shinsa .sh-who-card,
.seite-shinsa .sh-price,
.seite-shinsa .sh-after,
.seite-shinsa .sh-aside { border-radius: 14px; }
.seite-shinsa .sh-price { border-color: transparent; }

/* Der Kasten neben dem Formular */
.sh-aside .sh-direkt {
  margin-top: 20px; padding-top: 16px;
  background-image: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
  background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 0;
  color: var(--text-2); line-height: 1.6;
}
.sh-aside .sh-direkt a { display: block; margin-top: 2px; font-weight: 500; }

/* --- Herkunft des Namens --- */
.sh-name {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: 40px; padding: 20px 24px;
  background: var(--bg-2); border-radius: 14px;
  max-width: 68ch;
}
.sh-kanji {
  flex: 0 0 auto; font-size: 46px; line-height: 1; color: var(--tinte, #33312c);
  opacity: .32; font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
  letter-spacing: .02em;
}
.sh-name h3 { font-size: 16px; }
.sh-name p { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 520px) {
  .sh-name { gap: 16px; padding: 16px 18px; }
  .sh-kanji { font-size: 36px; }
}

/* Wortmarke über dem Video, bis der Vorspann wirklich läuft */
.sh-standbild {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: 46%; height: auto; pointer-events: none;
  transition: opacity .35s ease;
}
.sh-standbild.ist-weg { opacity: 0; }