/* ============================================================
   Frank hilft! – Computerhilfe zu Hause in Hamburg-Harburg
   Richtung: The split stage (feste Bildhälfte, ruhige Lesespalte)
   ============================================================ */

:root {
  /* Farbe: Papier, Tinte, Marine, Petrol – eine Grundfläche, eine Tinte, ein Akzent */
  --paper: #faf7f0;
  --paper-2: #f2ede2;
  --sand: #e7dfce;
  --sand-2: #ded4bf;
  --ink: #16263a;
  --ink-soft: #4a5a6c;
  --navy: #0e1b2b;
  --navy-soft: #c3ccd8;
  --navy-ink: #f2ede3;
  --petrol: #0f5d57;
  --petrol-dark: #0b4a45;
  --petrol-ink: #ffffff;

  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.08vw, 0.9375rem);
  --step-body: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --step-lead: clamp(1.375rem, 1.25rem + 0.55vw, 1.625rem);
  --step-head: clamp(2rem, 1.5rem + 1.7vw, 2.75rem);
  --step-display: clamp(2.5rem, 1.4rem + 3.8vw, 3.5rem);

  --pad-story: clamp(24px, 5vw, 72px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
.wordmark,
.footer__brand,
.stage figcaption,
.tel {
  font-family: var(--font-display);
  font-weight: 400;
}

h1 {
  font-size: var(--step-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}

h2 {
  font-size: var(--step-head);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  text-wrap: balance;
  hyphens: none;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  text-wrap: balance;
  hyphens: none;
}

p {
  margin: 0;
  max-width: 40ch;
  text-wrap: pretty;
  hyphens: none;
}

p + p {
  margin-top: 0.9em;
}

a {
  color: var(--petrol);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

::selection {
  background: var(--petrol);
  color: var(--petrol-ink);
}

:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 40;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 16px;
  font-size: 1rem;
}

.skip:focus {
  top: 12px;
}

.small {
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- Rahmen: feste Bildhälfte + Lesespalte ---------- */

.page {
  background: var(--paper);
}

/* Die feste Bildhälfte darf nur so lange kleben, wie die Lesespalte reicht:
   der Split ist der Bezugsrahmen, der Fuß steht außerhalb. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.stage {
  grid-column: 1;
  position: sticky;
  top: 0;
  height: 100svh;
  background: var(--navy);
  overflow: hidden;
}

.stage__item {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  /* Sichtbarkeit erst am Ende der Überblendung schalten: inaktive Bilder sind
     damit nicht im Screenreader-Baum und nicht als verborgener Text messbar. */
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}

.stage__item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms ease, visibility 0s;
}

.stage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.stage__item--portrait img {
  object-fit: contain;
  object-position: center bottom;
}

.stage__item figcaption {
  position: absolute;
  left: clamp(16px, 2.6vw, 30px);
  bottom: clamp(16px, 2.6vw, 30px);
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.35;
  color: var(--navy-ink);
  background: rgba(14, 27, 43, 0.86);
  padding: 9px 13px;
  max-width: calc(100% - 2 * clamp(16px, 2.6vw, 30px));
}

.stage__item--portrait figcaption {
  top: clamp(16px, 2.6vw, 30px);
  bottom: auto;
  left: var(--pad-story);
  background: none;
  padding: 0;
  color: var(--navy-soft);
}

.story {
  grid-column: 2;
  background: var(--paper);
  padding: clamp(36px, 3.4vw, 64px) var(--pad-story) clamp(64px, 7vw, 104px);
}

.story > * {
  max-width: 40rem;
  margin-inline: auto;
}

/* ---------- Erster Bildschirm ---------- */

.hero {
  padding-bottom: 8px;
}

.wordmark {
  display: inline-block;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
}

.hero h1 {
  margin-top: 26px;
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.38;
  max-width: 32ch;
  margin-top: 26px;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 40px;
}

.btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 92px;
  padding: 16px 20px;
  text-decoration: none;
  border-radius: 0;
  transition: background-color 160ms ease, transform 120ms ease;
}

.btn__label {
  font-size: var(--step-body);
  font-weight: 600;
  line-height: 1.2;
}

.btn__value {
  font-size: var(--step-body);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.btn--primary {
  background: var(--petrol);
  color: var(--petrol-ink);
}

.btn--primary:hover {
  background: var(--petrol-dark);
}

.btn--primary:focus-visible {
  outline-color: var(--ink);
}

.btn--secondary {
  background: var(--sand);
  color: var(--ink);
}

.btn--secondary:hover {
  background: var(--sand-2);
}

.btn:active {
  transform: translateY(1px);
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-top: 30px;
  font-size: var(--step-body);
}

.hero__links a {
  color: var(--ink);
  text-decoration-thickness: 0.05em;
}

.hero .small {
  margin-top: 26px;
}

/* ---------- Abschnitte ---------- */

.section {
  margin-top: clamp(76px, 8.5vw, 136px);
}

.section p {
  max-width: 40rem;
}

.section ul {
  margin: 0;
  padding-left: 1.15em;
  max-width: 38ch;
}

.section li {
  margin-top: 9px;
  padding-left: 0.15em;
}

.section li::marker {
  color: var(--ink-soft);
}

.group {
  margin-top: 40px;
}

.group:first-of-type {
  margin-top: 0;
}

.group h3 {
  margin-bottom: 8px;
}

.signature {
  margin-top: 34px;
  font-family: var(--font-display);
  font-size: var(--step-lead);
  line-height: 1.3;
}

.signature span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-text);
  font-size: var(--step-small);
  color: var(--ink-soft);
}

.statement {
  font-size: var(--step-lead);
  line-height: 1.34;
  max-width: 30ch;
  margin-top: 4px;
}

.family p + p {
  margin-top: 1em;
}

.features .group + .group {
  margin-top: 40px;
}

/* Ablauf: echte geordnete Liste */
.steps {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0;
  max-width: 40ch;
}

.steps li {
  margin-top: 30px;
  padding-left: 0.35em;
}

.steps li:first-child {
  margin-top: 0;
}

.steps li::marker {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--petrol);
}

.steps p {
  max-width: 36ch;
}

.how .small {
  margin-top: 30px;
}

/* Preise: wie eine Speisekarte */
.price {
  background: var(--sand);
  padding: clamp(22px, 3vw, 32px);
  margin-top: 6px;
}

.price h3 {
  margin-bottom: 16px;
}

.price__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  margin-top: 12px;
}

.price__row:first-of-type {
  margin-top: 0;
}

.price__name {
  font-size: var(--step-body);
}

.price__value {
  font-size: var(--step-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price__note {
  margin-top: 16px;
  max-width: none;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

.pricing p + p {
  margin-top: 1em;
}

.pricing > p {
  margin-top: 24px;
}


/* Rechner: Dauer wählen, Preis sehen (wird nur mit JavaScript eingeblendet) */
.calc {
  margin-top: 26px;
}

.calc__q {
  max-width: none;
  font-size: var(--step-body);
}

.calc__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.calc__opt {
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.calc__opt:hover {
  background: var(--sand);
}

.calc__opt.is-active {
  background: var(--petrol);
  color: var(--petrol-ink);
}

.calc__opt:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.calc__result {
  max-width: none;
  margin-top: 18px;
  font-size: var(--step-lead);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.calc__result strong {
  font-weight: 600;
  white-space: nowrap;
}

/* FAQ */
.faq dl {
  margin: 0;
}

.faq dt {
  font-size: var(--step-body);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 30px;
  max-width: 36ch;
}

.faq dt:first-of-type {
  margin-top: 0;
}

.faq dd {
  margin: 8px 0 0;
  max-width: 40rem;
}

/* Kontakt */
.tel {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 26px;
  font-variant-numeric: tabular-nums;
}

.tel a {
  color: var(--ink);
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.12em;
}

.tel a:hover {
  color: var(--petrol);
}

.contact p + p {
  margin-top: 1em;
}

.contact .small {
  margin-top: 24px;
}

.back-top {
  margin-top: clamp(64px, 7vw, 96px);
  font-size: var(--step-small);
}

/* Fotos in der Lesespalte: nur auf schmalen Bildschirmen */
.photo {
  margin: 34px 0 0;
}

.photo figcaption {
  margin-top: 10px;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40ch;
}

.photo--mobile {
  display: none;
}

/* ---------- Fuß ---------- */

.footer {
  background: var(--navy);
  color: var(--navy-ink);
}

.footer__inner {
  padding: clamp(48px, 6vw, 88px) var(--pad-story);
}

.footer a {
  color: var(--navy-ink);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 40px;
}

.footer__brand {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.footer__brand:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.2em;
}

.footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: var(--step-body);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 44px;
  font-size: var(--step-body);
}

.footer__nav a {
  text-decoration: none;
}

.footer__nav a:hover,
.footer__legal a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.footer__bottom {
  margin-top: 56px;
  display: grid;
  gap: 22px;
}

.footer__legal {
  display: flex;
  gap: 28px;
  font-size: var(--step-small);
}

.footer__operator {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--step-small);
  color: var(--navy-soft);
  max-width: 52ch;
}

.tatics {
  width: auto;
  height: 40px;
  opacity: 0.85;
  filter: invert(1);
}

.footer__credits {
  color: var(--navy-soft);
  max-width: 64ch;
  font-size: var(--step-small);
}

.footer__credits a {
  color: var(--navy-soft);
}

.footer a:focus-visible {
  outline-color: var(--navy-ink);
}

/* ---------- Fester Anrufblock auf dem Smartphone ---------- */

.callbar {
  display: none;
}

/* ---------- Rechtstexte ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--pad-story);
  border-bottom: 0;
}

.topbar__back {
  font-size: var(--step-small);
  color: var(--ink-soft);
}

.legal__main {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--pad-story) clamp(56px, 7vw, 96px);
}

.legal__main h1 {
  margin-bottom: 28px;
}

.legal__main h2 {
  font-size: 1.75rem;
  margin-top: 44px;
}

.legal__main h3 {
  margin-top: 28px;
}

.legal__main p,
.legal__main ul,
.legal__main address {
  max-width: 40rem;
}

.legal__main ul {
  padding-left: 1.2em;
}

.legal__main li + li {
  margin-top: 8px;
}

.legal__main address {
  font-style: normal;
}

.legal__note {
  background: var(--sand);
  padding: 20px 22px;
  margin: 0 0 32px;
  font-size: var(--step-small);
  line-height: 1.55;
}

.legal__note p {
  margin: 0;
  max-width: 52ch;
}

.legal__note strong {
  font-weight: 600;
}

.legal__foot {
  background: var(--navy);
  color: var(--navy-soft);
  padding: 32px var(--pad-story);
  font-size: var(--step-small);
}

.legal__foot a {
  color: var(--navy-ink);
}

.legal__foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.legal__foot p {
  margin-top: 16px;
  max-width: 52ch;
}

.legal__foot .tatics {
  height: 32px;
  margin-bottom: 4px;
}

/* ---------- Bewegung ---------- */

html.js .hero > *,
html.js .section > * {
  transition: opacity 600ms ease, transform 600ms ease;
}

html.js:not(.js-ready) .hero:not(.is-in) > *,
html.js:not(.js-ready) .section:not(.is-in) > * {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .stage__item,
  .btn,
  .callbar {
    transition: none;
  }
}

/* ---------- Schmale Bildschirme: Lesespalte in voller Breite ---------- */

@media (max-width: 999px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage {
    grid-column: 1;
    position: relative;
    top: auto;
    height: auto;
    background: var(--paper);
    overflow: visible;
  }

  /* Mobil zeigt die Bildhälfte nur das jeweils aktive Bild;
     die Unterschrift steht als eigene Zeile über dem Foto. */
  .stage__item {
    display: none;
  }

  .stage__item.is-active {
    display: block;
    position: relative;
    inset: auto;
    visibility: visible;
    opacity: 1;
  }

  .stage__item--portrait figcaption {
    position: static;
    order: -1;
    display: block;
    padding: 14px max(20px, calc((100% - 40rem) / 2)) 10px;
    background: var(--paper);
    color: var(--ink-soft);
    max-width: none;
    font-size: var(--step-small);
  }

  .stage__item--portrait img {
    width: 100%;
    height: clamp(300px, 44svh, 460px);
    object-fit: cover;
    object-position: center 12%;
  }

  .story {
    grid-column: 1;
    --pad-story: 20px;
    padding: 32px 20px 64px;
  }

  .footer__inner {
    /* gleiche Kante wie die zentrierte Lesespalte, damit der Rahmen symmetrisch bleibt */
    padding-inline: max(20px, calc((100% - 40rem) / 2));
  }

  .actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .br-narrow {
    display: inline;
  }

  .photo--mobile {
    display: block;
  }

  .callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper-2);
    /* Fester Schnellkontakt-Balken liegt über dem Inhalt: Schatten ist hier erlaubt (Ausnahme „sticky bar"). */
    box-shadow: 0 -6px 24px rgba(22, 38, 58, 0.14); /* taste-skill-ignore */
    /* Der Balken fährt beim Abwärtslesen aus dem Bild und kommt beim Hochscrollen zurück;
       sichtbar wird er nur über .is-visible (script.js), damit keine Zeile darunter liegt. */
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 280ms ease, visibility 0s linear 280ms;
  }

  .callbar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 280ms ease, visibility 0s;
  }

  .callbar__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 54px;
    padding: 8px 12px;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 0;
  }

  .callbar__num {
    font-size: var(--step-small);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }

  .callbar__btn--call {
    background: var(--petrol);
    color: var(--petrol-ink);
  }

  .callbar__btn--mail {
    background: var(--sand);
    color: var(--ink);
  }

  .stage__item--scene figcaption {
    max-width: calc(100% - 32px);
  }

  .legal__main {
    padding-inline: 20px;
  }

  .topbar {
    padding-inline: 20px;
  }

  .legal__foot {
    padding-inline: 20px;
  }
}

/* Tablet: höheres Bildband, damit der ganze Kopf (Krone bis Kinn) sichtbar ist.
   Das Band wächst mit der Breite, weil das Foto auf die Breite skaliert wird. */
@media (min-width: 600px) and (max-width: 999px) {
  .stage__item--portrait img {
    height: clamp(500px, 78vw, 760px);
    object-position: center 29%;
  }
}

@media (min-width: 1000px) {
  .br-narrow {
    display: none;
  }
}

@media (min-width: 1500px) {
  :root {
    --pad-story: 88px;
  }
}