/* ============================================================
   digitalantrieb / 10 - UNTERSEITEN

   Gilt fuer die Landingpages, die Kontaktseite und die
   Rechtstexte. Sie teilen die Tokens und die Basis mit der
   Startseite, laufen aber bewusst ohne GSAP, Lenis, Loader,
   Custom Cursor und Schwungrad.

   Der Grund ist nicht Sparsamkeit, sondern Aufgabe: die
   Startseite ist eine Vorfuehrung, eine Landingpage ist eine
   Antwort auf eine Suchanfrage. Wer aus der Suche kommt, will
   in zwei Sekunden lesen, ob er hier richtig ist. Jede
   Sekunde Ladezeit und jede Animation davor kostet genau das.
   ============================================================ */

/* ------------------------------------------------------------
   KOPF
   ------------------------------------------------------------ */
.phead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-2);
  padding: 0.9rem var(--gutter);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--hair) solid var(--rule);
}

.phead__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--chalk);
}

.phead__brand .mark { width: 31px; height: 30px; flex: none; }

/* Die Ligatur. Dieselbe Geometrie wie auf der Startseite, aber
   ohne 04-chrome.css: die Unterseiten laden die Chrome-Ebene
   nicht, und ein SVG ohne Strichfarbe ist unsichtbar. */
.mark circle,
.mark line {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}
/* Das ganze d in Signalfarbe, siehe 04-chrome.css. */
.mark .mark__d,
.mark .mark__axis { stroke: var(--signal); }

.marke-d { color: var(--signal); }

.phead__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.phead__right { display: flex; align-items: center; gap: var(--stack-2); }

.phead__back {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--on-stage-2);
  text-decoration: none;
}
.phead__back:hover { color: var(--chalk); }

.phead__cta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  border: var(--hair) solid var(--signal);
  color: var(--signal);
  text-decoration: none;
  border-radius: var(--r-1);
  white-space: nowrap;
}
.phead__cta:hover { background: var(--signal); color: var(--ink); }

@media (max-width: 40rem) {
  .phead__back { display: none; }
}

/* ------------------------------------------------------------
   RUMPF
   ------------------------------------------------------------ */
.page {
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) var(--sec-y);
}

.page--wide { max-width: var(--maxw); }

/* Brotkrumen. Eine Zeile, echte Links, kein Zierrat. */
.crumbs {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--on-stage-2);
  margin-bottom: var(--stack-3);
}
.crumbs a { color: inherit; text-decoration: none; border-bottom: var(--hair) solid var(--rule); }
.crumbs a:hover { color: var(--chalk); }
.crumbs span { margin: 0 0.5rem; opacity: 0.5; }

.page h1 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: var(--lead-snug);
  letter-spacing: var(--track-xl);
  text-wrap: balance;
  margin: 0 0 var(--stack-3);
}

.page__lede {
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--chalk);
  margin: 0 0 var(--stack-4);
  max-width: 42rem;
}

.page h2 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: var(--lead-snug);
  letter-spacing: var(--track-lg);
  text-wrap: balance;
  margin: var(--stack-5) 0 var(--stack-2);
}

.page h3 {
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  margin: var(--stack-3) 0 var(--stack-1);
}

.page p,
.page li {
  font-size: var(--t-body);
  line-height: var(--lead-body);
  color: var(--on-stage-2);
}

.page p { margin: 0 0 var(--stack-2); max-width: 42rem; }

.page b, .page strong { color: var(--chalk); font-weight: 600; }

.page a:not(.btn):not(.phead__cta):not(.card) {
  color: var(--chalk);
  text-decoration: none;
  border-bottom: var(--hair) solid var(--signal);
}
.page a:not(.btn):not(.phead__cta):not(.card):hover { color: var(--signal); }

.page ul, .page ol { margin: 0 0 var(--stack-3); padding-left: 1.1rem; max-width: 42rem; }
.page li { margin-bottom: 0.45rem; }
.page li::marker { color: var(--signal); }

/* Hervorgehobener Absatz: das eine, was haengen bleiben soll. */
.page__note {
  border-left: 2px solid var(--signal);
  padding: var(--stack-2) 0 var(--stack-2) var(--stack-2);
  margin: var(--stack-3) 0;
  background: var(--surface);
  max-width: 42rem;
}
.page__note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   PREISZEILE
   ------------------------------------------------------------ */
.pprice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--stack-2) var(--stack-3);
  border: var(--hair) solid var(--rule);
  background: var(--surface);
  padding: var(--stack-3);
  margin: var(--stack-4) 0;
}
.pprice__amount {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--signal);
  letter-spacing: var(--track-lg);
  margin: 0;
}
.pprice__amount i { font-style: normal; font-size: 0.62em; letter-spacing: 0; }
.pprice__text { margin: 0; flex: 1 1 16rem; min-width: 0; }

/* ------------------------------------------------------------
   KARTENRASTER: was drin ist, verwandte Seiten
   ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: var(--hair) solid var(--rule);
  margin: var(--stack-3) 0 var(--stack-4);
}

.card {
  background: var(--ink);
  padding: var(--stack-3);
  display: block;
  text-decoration: none;
  color: inherit;
}
a.card:hover { background: var(--surface-2); }

.card__n {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  color: var(--signal);
  display: block;
  margin-bottom: var(--stack-1);
}
.card b { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--chalk); }
.card span { font-size: var(--t-sm); line-height: 1.5; color: var(--on-stage-2); }

/* ------------------------------------------------------------
   FRAGEN UND ANTWORTEN
   ------------------------------------------------------------ */
.faq { border-top: var(--hair) solid var(--rule); margin: var(--stack-3) 0 var(--stack-4); max-width: 42rem; }

.faq details {
  border-bottom: var(--hair) solid var(--rule);
}

.faq summary {
  cursor: pointer;
  padding: var(--stack-2) 2rem var(--stack-2) 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--chalk);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--signal);
  font-family: var(--font-mono);
  transition: transform var(--d-l3) var(--e-out);
}
.faq details[open] summary::after { content: "–"; }

.faq summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.faq details > p { padding-bottom: var(--stack-2); margin-bottom: 0; }

/* ------------------------------------------------------------
   ABSCHLUSS
   ------------------------------------------------------------ */
.pcta {
  border: var(--hair) solid var(--signal);
  background: var(--surface);
  padding: var(--stack-4) var(--stack-3);
  margin-top: var(--stack-5);
  text-align: center;
}
.pcta h2 { margin-top: 0; }
.pcta p { margin-left: auto; margin-right: auto; }

.pcta .btn { margin-top: var(--stack-2); }

/* ------------------------------------------------------------
   FUSS
   ------------------------------------------------------------ */
.pfoot {
  border-top: var(--hair) solid var(--rule);
  padding: var(--sec-y) var(--gutter) var(--stack-4);
}

.pfoot__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--stack-4);
}

.pfoot h2 {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--on-stage-2);
  font-weight: 400;
  margin: 0 0 var(--stack-2);
}

.pfoot ul { list-style: none; margin: 0; padding: 0; }
.pfoot li { margin-bottom: 0.5rem; }

.pfoot a {
  color: var(--on-stage-2);
  text-decoration: none;
  font-size: var(--t-sm);
}
.pfoot a:hover { color: var(--chalk); }

.pfoot__bar {
  max-width: var(--maxw);
  margin: var(--stack-4) auto 0;
  padding-top: var(--stack-2);
  border-top: var(--hair) solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-2);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--on-stage-2);
}
.pfoot__bar a { font-family: inherit; font-size: inherit; letter-spacing: inherit; }

/* ------------------------------------------------------------
   RECHTSTEXTE

   Hier zaehlt Lesbarkeit, nicht Auftritt. Schmalere Spalte,
   kleinere Ueberschriften, mehr Luft zwischen den Absaetzen.
   ------------------------------------------------------------ */
.legal { max-width: 46rem; }
.legal h1 { font-size: var(--t-lg); }
.legal h2 { font-size: var(--t-md); margin-top: var(--stack-4); }
.legal h3 { font-size: 1.05rem; }
.legal p, .legal li { font-size: 1rem; }

/* Stellen, die vor dem Livegang ausgefuellt werden muessen.
   Sichtbar markiert, damit keine im Text untergeht. */
.legal mark,
.page mark {
  background: color-mix(in srgb, var(--signal) 22%, transparent);
  color: var(--chalk);
  padding: 0.05em 0.3em;
  border-radius: var(--r-1);
}

/* ============================================================
   DER VORFUEHRRAHMEN

   Auf /beispiele/ laufen die Demo-Seiten LIVE in einem Rahmen,
   nicht als Bildschirmfoto. Das hat zwei Gruende:

   1. Ein Bildschirmfoto veraltet in dem Moment, in dem jemand
      die Demo aendert. Der Rahmen zeigt immer den echten Stand.
   2. Man kann hineinklicken. Eine Website beurteilt man nicht
      am Standbild, sondern daran, wie sie sich anfuehlt.

   Die Karten auf der Uebersicht zeigen dieselben Seiten, nur
   verkleinert und ohne Eingabe: dort soll man waehlen, nicht
   schon bedienen.
   ============================================================ */

.schau {
  margin: var(--stack-3) 0 var(--stack-4);
}

.schau__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface-2);
  border: var(--hair) solid var(--rule);
  border-bottom: 0;
}

/* Die drei Punkte links. Reine Zitat-Geste: sie sagen dem Auge
   in einem Sekundenbruchteil "das ist ein Browserfenster". */
.schau__punkte { display: flex; gap: 6px; margin-right: 0.4rem; }
.schau__punkte i {
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--chalk) 22%, transparent);
}

.schau__adresse {
  flex: 1 1 10rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--on-stage-2);
  background: var(--stage);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-round);
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schau__schalter { display: flex; gap: 0.3rem; }
.schau__schalter button {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--on-stage-2);
  background: transparent;
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-1);
  padding: 0.4rem 0.7rem;
  min-height: 36px;
  cursor: pointer;
}
.schau__schalter button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--signal);
  border-color: var(--signal);
}

.schau__buehne {
  border: var(--hair) solid var(--rule);
  background: var(--ink);
  padding: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.schau__buehne iframe {
  width: 100%;
  height: min(78svh, 44rem);
  border: 0;
  display: block;
  background: #fff;
  transition: width 0.45s var(--e-out);
}

/* Telefonbreite. Der Rahmen bleibt gleich, nur die Seite darin
   wird schmaler - so sieht man den Unterschied, ohne dass das
   Layout der Seite drumherum springt. */
.schau__buehne[data-breite="telefon"] iframe {
  width: 402px;
  max-width: 100%;
  border-inline: var(--hair) solid var(--rule);
}

/* max-width zuruecksetzen: .page p begrenzt Absaetze auf 42rem
   Lesebreite. Das ist fuer Fliesstext richtig und fuer eine
   Leiste unter einem randbreiten Rahmen falsch. */
.schau__fuss {
  max-width: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-sm);
  color: var(--on-stage-2);
  border: var(--hair) solid var(--rule);
  border-top: 0;
  padding: 0.7rem 0.75rem;
}

@media (max-width: 40rem) {
  .schau__adresse { order: 3; flex-basis: 100%; }
  .schau__buehne iframe { height: 70svh; }
}

/* ------------------------------------------------------------
   DIE AUSWAHL

   Jede Karte zeigt die echte Seite, verkleinert. pointer-events
   liegt auf none: hier wird gewaehlt, nicht bedient.
   ------------------------------------------------------------ */
.wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--stack-2);
  margin: var(--stack-3) 0 var(--stack-4);
}

.wahl__karte {
  display: flex;
  flex-direction: column;
  border: var(--hair) solid var(--rule);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--d-l3) var(--e-out), background var(--d-l3) var(--e-out);
}
.wahl__karte:hover,
.wahl__karte:focus-visible { border-color: var(--signal); background: var(--surface-2); }

.wahl__blick {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  border-bottom: var(--hair) solid var(--rule);
}
.wahl__blick iframe {
  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  height: 960px;
  border: 0;
  transform: scale(0.33);
  transform-origin: top left;
  pointer-events: none;
}

.wahl__text { padding: var(--stack-2) var(--stack-2) var(--stack-3); }
.wahl__text b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
  color: var(--chalk);
}
.wahl__text span { display: block; font-size: var(--t-sm); line-height: 1.5; color: var(--on-stage-2); }
.wahl__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--stack-2);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--signal);
}

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