/* ============================================================
   G.H. Web-Solutions — Layout
   Baut auf design-tokens.css auf. Hier stehen keine neuen Farben.

   Drei Entscheidungen, die alles andere erklaeren:

   1. Rhythmus statt Gleichmass. Die Seite wechselt bewusst
      zwischen Plakat, Information und Kleingedrucktem, und
      zwischen Schwarz, angehobenem Grau und Blau.
      Vier gleich ruhige Abschnitte hintereinander sind ein Fehler.

   2. Mobile zuerst. Alles unten ist die Handy-Fassung, die
      Media-Queries bauen nach oben.

   3. So wenig JavaScript wie moeglich: eine Funktion, die den
      Film nur dort laedt, wo er nicht schadet.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
    background: var(--grund);
  color: var(--tinte);
  font-family: "Archivo", system-ui, sans-serif;
  /* Deutlich groesser als ueblich. Die Zielgruppe liest das auf
     dem Handy, oft nicht mehr mit zwanzig Jahre alten Augen. */
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

/* Auf dunklem Grund muss der Fokusring HELL sein. */
:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Auf blauer Flaeche ist der helle Ring ebenfalls richtig. */

.zum-inhalt {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--tinte);
  color: var(--tinte-dunkel);
  padding: 14px 20px;
  text-decoration: none;
}
.zum-inhalt:focus { left: 0; }

/* ============================================================
   Gemeinsames Mass — Vollbreiten-Raster
   ------------------------------------------------------------
   Der Abschnitt bleibt so breit wie der Bildschirm, damit
   schwarze und blaue Flaechen bis an den Rand laufen. Der
   Inhalt landet in der mittleren Spalte.

   Wichtig: die Kinder bekommen hier KEIN margin-inline:auto.
   Genau das hat vorher jeden Textblock mit eigener Maximalbreite
   in die Mitte gerueckt statt an den linken Anschlag — und
   gleichzeitig die Zeilenlaenge der Ueberschriften ausgehebelt.
   ============================================================ */
.hero,
.zwischenruf,
.abschnitt,
.tafel,
.ort {
  display: grid;
  grid-template-columns:
    1fr
    min(var(--breite), 100% - var(--rand) * 2)
    1fr;
}
.hero > *,
.zwischenruf > *,
.abschnitt > *,
.tafel > *,
.ort > * {
  grid-column: 2;
}

/* Kopf und Fuss tragen keine vollflaechige Farbe und bleiben
   deshalb schlichte Reihen. */
.kopf, .fuss {
  position: relative;
  z-index: 1;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: clamp(56px, 11vw, 108px); }

/* Angehobener Abschnitt: dunkler Ton statt eigener Farbflaeche,
   damit der Film durchlaeuft. */
.abschnitt-weiss {
  border-block: 1px solid var(--linie);
}


/* ============================================================
   Der Film — EINE Ebene fuer die ganze Seite
   ------------------------------------------------------------
   Vorher lag je Abschnitt ein eigener Film. Das ergab harte
   Kanten: unter dem Hero brach das Bild einfach ab. Jetzt liegt
   ein einziger Film fest im Ansichtsfenster, der Inhalt scrollt
   darueber hinweg. Dadurch laeuft die Bewegung durch die
   gesamte Seite, ohne eine einzige Naht.

     Ebene -3  der Film
     Ebene -2  der Grundschleier, haelt ihn dunkel
      je Abschnitt ein eigener Farbschleier
   ============================================================ */
.seitenfilm {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  background: var(--grund) url("images/flaeche-schwarz.jpg") center / cover no-repeat;
}
.seitenfilm video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 900ms ease-out;
}
.seitenfilm.laeuft video { opacity: 1; }

/* Grundschleier. Ohne ihn traegt kein Fliesstext. */
.seitenfilm::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 9, 0.34);
}

/* Die Abschnitte sind jetzt durchsichtig und faerben den Film
   nur ein. Daraus entsteht der Rhythmus — nicht mehr aus harten
   Farbbloecken. */
.hero, .zwischenruf, .abschnitt, .tafel, .ort { background: transparent; }

/* Die Toene sind nach dem Textgewicht gestaffelt, nicht nach
   Geschmack: wo nur riesige weisse Schrift steht, darf der Film
   fast unverdeckt laufen. Wo kleiner grauer Fliesstext steht,
   muss er zurueck. Gemessen: der Grund darf bis rund 60 von 255
   hell werden, darueber faellt --tinte-leise unter 4,5:1. */
/* Der Hero bekommt einen Verlauf statt einer gleichmaessigen
   Decke: oben, wo die Plakatschrift und die Marke stehen, laeuft
   der Film fast unverdeckt. Unten sitzt die kleine Ortszeile —
   dort war der Film am hellsten und der Kontrast fiel auf 3,85.
   Also nur dort abdunkeln. */
.hero { --ton: linear-gradient(to bottom,
          rgba(7, 8, 9, 0.02) 0%,
          rgba(7, 8, 9, 0.06) 52%,
          rgba(7, 8, 9, 0.62) 100%); }
.tafel       { --ton: rgba(0, 0, 0, 0.16); }   /* nur Plakatschrift */
.zwischenruf { --ton: rgba(7, 8, 9, 0.26); }
/* 0.24 -> 0.38 am 11.09.2026. Der Ortsname stand bei 2,62:1, noetig
   sind 3:1 (Grosstext). Gemessen mit dem reparierten Pruefer — der las
   vorher oklch-Farben falsch und meldete Unsinn, siehe
   learnings/pruefer-oklch-fehler.md. */
.ort         { --ton: rgba(7, 8, 9, 0.38); }
/* 0.42 -> 0.58 am 11.09.2026. Der graue Fliesstext (--tinte-leise)
   stand bei 3,67:1 und 3,85:1, noetig sind 4,5:1. Nicht die Schrift
   aufgehellt, sondern den Grund abgedunkelt — sonst verliert der leise
   Ton seinen Zweck. */
.abschnitt   { --ton: rgba(7, 8, 9, 0.58); }   /* Fliesstext */
.abschnitt-weiss { --ton: rgba(16, 18, 21, 0.52); }

/* Die Fusszeile hatte bis zum 11.09.2026 GAR KEINE Decke und sass damit
   blank auf dem Seitenfilm. Ihre graue Zeile stand bei 3,09:1. */
.fuss        { --ton: rgba(7, 8, 9, 0.66); }

.hero, .zwischenruf, .abschnitt, .tafel, .ort, .fuss { position: relative; }
.hero::before, .zwischenruf::before, .abschnitt::before,
.tafel::before, .ort::before, .fuss::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ton);
}

/* ------------------------------------------------------------
   Handy: eigener Hochkantfilm.

   Vorgeschichte: erst war der Film dort zu dunkel, dann zu leer.
   Beides hatte dieselbe Ursache — der liegende Film wurde auf
   einem stehenden Schirm beschnitten. Bei 390 x 844 blieben von
   1280 px Breite noch 26 % uebrig, und ausgerechnet dieser Rand
   ist im Film fast ereignislos: gemessen in einer textfreien
   Zone schwankte die Helligkeit nur zwischen 1 und 38 von 255.
   Da war nichts mehr aufzuhellen.

   Jetzt laedt das Handy video/flaeche-hoch.mp4 — 9:16, in
   derselben Bildsprache erzeugt. Kein Beschnitt mehr, deshalb
   faellt object-position weg.
   ------------------------------------------------------------ */
@media (max-width: 48rem) {
  .seitenfilm { background-image: url("images/flaeche-hoch.jpg"); }
  .seitenfilm::after { background: rgba(7, 8, 9, 0.26); }
  /* Der Verlauf folgt den gemessenen Positionen im Hero, nicht
     einem Gefuehl. Auf 390 px sitzen:
       Schlagzeile   2,6 - 18,8 %   riesig, braucht nichts
       Absatz       21,5 - 33,8 %   klein, braucht 4,5:1
       Knopf        36,6 - 42,5 %   eigene Flaeche
       Bildmarke    45,7 - 81,5 %   soll frei liegen
       Ortszeile    88,4 - 95,2 %   klein, braucht 4,5:1
     Die Schlagzeile brauchte frueher nichts — der Film war dort
     fast schwarz. Mit dem Hochkantfilm liegt sie im hellen
     Streiflicht und kam nur noch auf 3,44:1. Deshalb jetzt ein
     leichter Schleier auch oben: gemessen 4,9:1 statt 3,44:1,
     und das Bild bleibt sichtbar. */
  .hero { --ton: linear-gradient(to bottom,
            rgba(7, 8, 9, 0.16) 0%,
            rgba(7, 8, 9, 0.16) 19%,
            rgba(7, 8, 9, 0.52) 22%,
            rgba(7, 8, 9, 0.52) 43%,
            rgba(7, 8, 9, 0.04) 47%,
            rgba(7, 8, 9, 0.04) 83%,
            rgba(7, 8, 9, 0.62) 88%,
            rgba(7, 8, 9, 0.62) 100%); }

  /* Die Kopfzeile liegt ueber dem hellsten Teil des Films und hat
     nur kleine Schrift. Ein nach unten auslaufender Schleier, damit
     die Navigation lesbar bleibt, ohne einen sichtbaren Balken. */
  .kopf::before {
    content: "";
    position: absolute;
    /* Seitlich NICHT ueberstehen: das macht die Seite breiter
       als den Bildschirm. Der Kopf reicht auf dem Handy ohnehin
       von Rand zu Rand. */
    inset: -10px 0 -24px 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(7, 8, 9, 0.94) 0%,
      rgba(7, 8, 9, 0.88) 62%,
      rgba(7, 8, 9, 0) 100%);
  }
  /* Die Schleier der Inhaltsabschnitte waren fuer den alten, fast
     schwarzen Ausschnitt gemessen. Der Hochkantfilm ist deutlich
     heller, und damit fielen 38 Textstellen unter 4,5:1 — vorher
     waren es acht. Deshalb hier staerker als am Rechner.

     Der Hero bleibt bewusst offen: dort soll man den Film sehen.
     Wo Fliesstext steht, hat Lesbarkeit Vorrang. */
  .zwischenruf     { --ton: rgba(7, 8, 9, 0.46); }
  .abschnitt       { --ton: rgba(7, 8, 9, 0.64); }
  .abschnitt-weiss { --ton: rgba(16, 18, 21, 0.70); }
  /* 0,40 reichte nicht: „Schnell. Verstaendlich." lag bei 3,61:1.
     Der Prueflauf misst hier 4,7:1. */
  .tafel           { --ton: rgba(0, 0, 0, 0.54); }
  /* 0,44 -> 0,56 am 11.09.2026: Der Ortsname stand auch auf dem Handy
     noch bei 2,62:1. Der Hochkantfilm ist an dieser Stelle fast weiss. */
  .ort             { --ton: rgba(7, 8, 9, 0.56); }
}

/* ============================================================
   Kopfzeile
   ============================================================ */
.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  padding-block: 18px;
}

.kopf-marke {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  min-width: 0;
}
/* Das Monogramm ist breiter als hoch — Hoehe festlegen, Breite folgt. */
.kopf-marke img { height: 40px; width: auto; display: block; flex: none; }

/* Auf dem Handy traegt das Monogramm allein. Die volle Wortmarke
   schrumpft dort auf Favicon-Groesse und sagt nichts mehr. */
.kopf-name { display: none; }
@media (min-width: 40rem) {
  .kopf-name {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }
}

.strich-blau { color: var(--blau-hell); }

.kopf-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
  font-size: 1rem;
}
.kopf-nav a {
  text-decoration: none;
  padding: 10px 0;
  color: var(--tinte-leise);
  border-bottom: 2px solid transparent;
  transition: color var(--uebergang), border-color var(--uebergang);
}
.kopf-nav a:hover { color: var(--tinte); border-bottom-color: var(--blau-hell); }

/* ============================================================
   Hero — Groesse A: Plakat
   ============================================================ */
.hero {
  padding-top: clamp(26px, 6vw, 56px);
  padding-bottom: clamp(48px, 9vw, 88px);
  row-gap: clamp(34px, 6vw, 56px);
}

/* Ab Tablet stehen Aussage und Logo-Animation nebeneinander.
   Darunter: Aussage zuerst, Animation danach — der Satz ist
   wichtiger als das Bild.

   Der Zweispalter sitzt in einem EIGENEN Raster innerhalb der
   mittleren Spalte. Erweitert man stattdessen das Aussenraster um
   fr-Spalten, verliert es seine Zentrierung: die aeusseren 1fr
   nehmen ihren Anteil mit, die Textspalte wird viel zu schmal, die
   Ueberschrift bricht um — und der Marker zieht sich dann als
   Flaeche ueber zwei Zeilen. Genau das war hier passiert. */
.hero-oben { display: grid; row-gap: clamp(32px, 5vw, 48px); }

@media (min-width: 56rem) {
  .hero-oben {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }
}

/* --- Die animierte Bildmarke --------------------------------
   Kein Rahmen, kein Feld, keine Bedienelemente: sie liegt frei auf
   dem Papier. Moeglich, weil das Schwarz der Vorlage zu Alpha
   gekeyt ist.

   In der Vorlage misst die Bildmarke nur 230 px. Deshalb wird sie
   hier nicht groesser als 380 px gezeigt — darueber wird sie
   sichtbar weich, und eine matschige Marke ist schlimmer als eine
   kleine. */
.hero-marke {
  justify-self: start;
  /* Wieder die Originalfassung mit schwarzem Grund: auf der
     dunklen Seite verschwindet der Kasten von selbst, und der
     Lichtschein im Logo bleibt erhalten. Genau der ging beim
     Freistellen auf hellem Papier verloren. */
  width: min(100%, 544px);
  line-height: 0;
}
.hero-marke video {
  width: 100%;
  height: auto;
  display: block;
  /* Der schwarze Grund der Vorlage verschwindet vollstaendig.
     „screen" rechnet Schwarz zu Null: wo das Video schwarz ist,
     bleibt der Hintergrund unveraendert stehen, alles Hellere
     leuchtet darueber. Anders als beim Freistellen ueber Alpha
     bleibt dabei der blaue Lichtschein erhalten — er ist ja hell.
     Funktioniert nur, weil die Seite dunkel ist. */
  mix-blend-mode: screen;

  /* Weiche Kante. „screen" allein reicht nicht: der Lichtstrahl
     der Animation laeuft waagerecht bis x=0 und x=543 und wurde
     dort schnurgerade abgeschnitten — daran erkannte man das
     Rechteck.

     Gemessen: das Logo selbst endet 8,6 % vom Rand entfernt, der
     Strahl laeuft bis 0 %. Die Blende geht deshalb bis 8 % — der
     Strahl laeuft aus, das Logo bleibt unangetastet. Senkrecht ist
     mehr Luft (25 %), dort darf die Blende laenger sein.

     Zwei Verlaeufe, per intersect verschnitten: nur wo BEIDE
     deckend sind, ist das Bild sichtbar. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
@media (min-width: 56rem) {
  .hero-marke { justify-self: center; }
}

.hero h1 {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  /* Laeuft auf dem Handy fast bis an den Rand. Eine Schlagzeile,
     die sich klein macht, ueberzeugt niemanden. */
  font-size: clamp(3.1rem, 1.1rem + 10.4vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.038em;
}

/* MUSS hinter der Grundregel stehen: gleiche Spezifitaet, also
   entscheidet die Reihenfolge. Weiter oben in der Media-Query
   hatte diese Zeile keinerlei Wirkung.

   Ab hier steht die Schlagzeile in der schmaleren linken Spalte.
   Die Kurve ist aus der Spaltenbreite gerechnet: „FÜR LEUTE"
   braucht rund 6,2 em, bei 896 px Bildschirm sind das hoechstens
   64 px Schriftgrad, bei 1440 px passen 96 px. */
@media (min-width: 56rem) {
  .hero h1 { font-size: clamp(2.8rem, 0.71rem + 5.88vw, 6rem); }
}

.hero-unter {
  margin-top: clamp(26px, 4.5vw, 38px);
  max-width: 36ch;
  font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.5;
  color: var(--tinte-leise);
  text-wrap: pretty;
}

.tat { margin-top: clamp(28px, 4.5vw, 40px); }

/* Groesse C: Mikroinformation */
.mikro {
  margin-top: clamp(34px, 5vw, 52px);
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  font-size: 0.9375rem;
  color: var(--tinte-leise);
}

/* Die einzige Bewegung der Seite: der Marker unter „von hier."
   wird einmal gezogen. Der Text ist von der ersten Millisekunde
   an vollstaendig da — nur der Strich waechst. */
.hero .markiert::before {
  transform-origin: left center;
  animation: marker-ziehen 640ms cubic-bezier(0.33, 0.9, 0.4, 1) 240ms both;
}
@keyframes marker-ziehen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   Zwischenruf — ein Satz, der allein steht
   ============================================================ */
.zwischenruf {
  padding-block: clamp(52px, 10vw, 104px);
  border-top: 1px solid var(--linie);
}
/* Die Zeilenlaenge gehoert an den Absatz, nicht an das
   blockquote: die Einheit „ch" rechnet mit der Schriftgroesse des
   Elements selbst. Am blockquote haengt noch die Fliesstextgroesse,
   dort ergaben 22ch nur 252 statt 840 Pixel — daher der viel zu
   schmale Umbruch. */
.zwischenruf p {
  max-width: 15ch;
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(2rem, 1.1rem + 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.zwischenruf cite {
  display: block;
  margin-top: clamp(16px, 2.5vw, 24px);
  font-style: normal;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  color: var(--tinte-leise);
}

/* ============================================================
   Groesse B: normale Information
   ============================================================ */
h2 {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 1.25rem + 3.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.033em;
  text-wrap: balance;
  max-width: 20ch;
}

.satz {
  margin-top: clamp(26px, 4vw, 40px);
  max-width: 54ch;
  display: grid;
  gap: 16px;
}
.satz p { text-wrap: pretty; }
.satz strong { font-weight: 700; }
.satz .stark {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(1.4rem, 1.15rem + 1.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Die vier Fragen. Markierungsstriche statt Aufzaehlungspunkte. */
.fragen {
  list-style: none;
  padding: 0;
  margin-block: 8px;
  display: grid;
  gap: 12px;
}
.fragen li {
  position: relative;
  padding-left: 34px;
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(1.15rem, 1.05rem + 0.7vw, 1.5rem);
  letter-spacing: -0.02em;
}
.fragen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 20px;
  height: 7px;
  background: var(--strich) center / 100% 100% no-repeat;
}

/* ============================================================
   Tafel — grosse schwarze Flaeche
   ------------------------------------------------------------
   Der visuelle Bruch. Weisse Schrift auf Schwarz ist hier
   unproblematisch: 18,7:1.
   ============================================================ */
.tafel {
  /* KEINE eigene Flaeche. Der Ton in der Filmebene faerbt ein, das
     Video laeuft durch. Vorher stand hier background: var(--tinte)
     — im hellen System war das Schwarz, im dunklen ist es Weiss.
     Daraus wurde eine weisse Flaeche mit weisser Schrift. */
  color: var(--tinte);
  padding-block: clamp(64px, 13vw, 132px);
}
.tafel-titel {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  /* Gemessen, nicht geschaetzt: „AGENTURSHOW." ist das laengste
     Wort der Seite und braucht 8,3 em. Bei 320 px Bildschirm
     bleiben nach Rand 284 px, also hoechstens 34 px Schriftgrad.
     Daraus ergibt sich diese Kurve. */
  font-size: clamp(2.05rem, 0.5rem + 8vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.038em;
  max-width: none;
}
.tafel-unter {
  margin-top: clamp(24px, 4vw, 36px);
  font-size: clamp(1.15rem, 1.05rem + 0.7vw, 1.5rem);
  color: #B9B8B1;
}

.tafel-satz {
  margin-top: clamp(28px, 4.5vw, 44px);
  max-width: 52ch;
  display: grid;
  gap: 16px;
  color: #C9C8C1;
}
.tafel-satz strong { color: var(--tinte); font-weight: 700; }

.zurufe {
  list-style: none;
  padding: 0;
  margin-block: 6px;
  display: grid;
  gap: 12px;
}
.zurufe li {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.05rem + 1.3vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--tinte);
  text-wrap: pretty;
}

.tafel-schluss .visitenkarte {
  margin-top: clamp(30px, 5vw, 46px);
  padding-top: 22px;
  border-top: 1px solid #2A2A26;
  font-style: normal;
  line-height: 1.75;
  color: #B9B8B1;
  font-size: 1.0625rem;
}
.tafel-schluss .visitenkarte a { color: var(--tinte); text-underline-offset: 4px; }

.tafel-schlusssatz {
  margin-top: clamp(26px, 4vw, 38px);
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(1.4rem, 1.15rem + 1.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  text-wrap: balance;
  max-width: 18ch;
}


/* ============================================================
   Aussagen — Arbeitsweise
   ------------------------------------------------------------
   Grosse Ansage, kleine Erklaerung. Bewusst keine Begriff-oder-
   Erklaerung-Tabelle mehr: die liest sich wie Dokumentation.
   ============================================================ */
.aussagen { display: grid; gap: clamp(38px, 6vw, 60px); }
.aussagen h3 {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.aussagen p {
  margin-top: 12px;
  max-width: 48ch;
  color: var(--tinte-leise);
  text-wrap: pretty;
}



/* ============================================================
   Preispakete
   ------------------------------------------------------------
   Drei Kacheln, leicht angehoben. Der 3D-Eindruck kommt aus drei
   Zutaten, nicht aus einem Schlagschatten allein:
     1. eine helle Haarlinie auf der Oberkante (Licht von oben)
     2. ein weicher Schatten nach unten (Abstand zur Flaeche)
     3. ein dunklerer Grund als die Seite (die Kachel liegt drauf)

   Die Deckung ist bewusst nicht voll: der Seitenfilm scheint
   durch, sonst wirken die Kacheln wie aufgeklebt.
   ============================================================ */
.pakete {
  list-style: none;
  padding: 0;
  margin-top: clamp(34px, 5vw, 52px);
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}
@media (min-width: 56rem) {
  .pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius);
  background: rgba(18, 21, 26, 0.78);
  border: 1px solid var(--linie);
  /* Licht von oben, Schatten nach unten */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 14px 28px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform var(--uebergang), box-shadow var(--uebergang),
              border-color var(--uebergang);
}
/* Hervorheben NUR wo es einen Mauszeiger gibt. Auf dem Handy
   loest eine Beruehrung sonst den Hover-Zustand aus und er
   bleibt danach haengen — die Kachel sieht dauerhaft
   ausgewaehlt aus, obwohl niemand mehr draufzeigt.

   :focus-within nimmt den Tastaturweg mit: wer sich mit der
   Tabulatortaste zum Knopf durchhangelt, sieht dieselbe
   Hervorhebung wie mit der Maus. */
@media (hover: hover) and (pointer: fine) {
  .paket:hover {
    transform: translateY(-4px);
    border-color: var(--blau);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 40px rgba(0, 0, 0, 0.55),
      0 3px 8px rgba(0, 0, 0, 0.45),
      /* das blaue Leuchten */
      0 0 0 1px var(--blau),
      0 0 28px rgba(26, 96, 235, 0.42);
  }
  .paket:hover .paket-knopf {
    background: var(--blau);
    border-color: var(--blau);
    color: var(--auf-blau);
  }
}
.paket:focus-within {
  border-color: var(--blau);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--blau),
    0 0 28px rgba(26, 96, 235, 0.42);
}

/* Wer Bewegung reduziert haben will, bekommt die Farbe, aber
   nicht den Sprung. */
@media (prefers-reduced-motion: reduce) {
  .paket, .paket-knopf { transition: none; }
  .paket:hover { transform: none; }
}

/* Der Handlungsknopf je Kachel.
   Sitzt unten buendig, weil die Kacheln unterschiedlich lang
   sind — margin-top:auto schiebt ihn ans Ende, damit die drei
   Knoepfe nebeneinander auf einer Linie stehen.
   IMMER sichtbar, nicht erst beim Ueberfahren: auf dem Handy
   gibt es kein Ueberfahren, und dort kommt die Mehrheit her. */
.paket-tat {
  margin-top: auto;
  padding-top: clamp(20px, 2.6vw, 28px);
}
.paket-knopf {
  display: block;
  text-align: center;
  padding: 14px 18px;
  border: 1px solid var(--blau-hell);
  border-radius: var(--radius);
  background: transparent;
  color: var(--blau-hell);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background var(--uebergang), color var(--uebergang),
              border-color var(--uebergang);
}
.paket-knopf:hover,
.paket-knopf:focus-visible {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--auf-blau);
}
.paket-knopf span { margin-left: 0.3em; }

.paket-name {
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blau-hell);
}
.paket-preis {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(2.6rem, 1.6rem + 2.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 8px;
}
.paket-preis span { font-size: 0.52em; margin-left: 0.08em; }

/* Der Umfang steht direkt unter dem Preis, nicht irgendwo in der
   Liste. Er ist die wichtigste Angabe der ganzen Kachel: ohne
   Deckelung waere „mehrere Seiten" nach oben offen. */
.paket-umfang {
  margin-top: 12px;
  font-size: 1rem;
  color: var(--tinte-leise);
  text-wrap: pretty;
}
.paket-umfang b {
  display: block;
  color: var(--tinte);
  font-weight: 700;
  font-size: 1.0625rem;
}

.paket-fuer {
  margin-top: 12px;
  padding-bottom: clamp(18px, 2.4vw, 24px);
  border-bottom: 1px solid var(--linie);
  color: var(--tinte-leise);
  font-size: 1rem;
  text-wrap: pretty;
}

/* Die Zeile, die sagt, worauf ein Paket aufbaut. Bewusst KEIN
   Aufzaehlungspunkt: „Alles aus ‚Eine Seite'" las sich in der Liste
   wie ein abgebrochener Satz. Als eigener Satz ist es eindeutig. */
.paket-basis {
  margin-top: clamp(18px, 2.4vw, 24px);
  padding-bottom: clamp(14px, 2vw, 18px);
  border-bottom: 1px solid var(--linie);
  font-size: 1rem;
  color: var(--tinte);
  text-wrap: pretty;
}
.paket-basis b { color: var(--blau-hell); font-weight: 700; }
.paket-basis + .paket-liste { margin-top: clamp(14px, 2vw, 20px); }

.paket-liste {
  list-style: none;
  padding: 0;
  margin-top: clamp(18px, 2.4vw, 24px);
  display: grid;
  gap: 12px;
  font-size: 1rem;
}
.paket-liste li {
  position: relative;
  padding-left: 26px;
  color: var(--tinte-leise);
  text-wrap: pretty;
}
/* Markierungsstrich statt Haken: dasselbe Zeichen wie ueberall */
.paket-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 16px;
  height: 6px;
  background: var(--strich) center / 100% 100% no-repeat;
}

/* ============================================================
   Zubuchbar
   ------------------------------------------------------------
   Zeilen mit Haarlinien, kein Kartenraster: es ist ein Anhang zu
   den Paketen, keine zweite Entscheidung. Der Preis steht rechts
   und ist auf allen Breiten gleich weit vom Rand — sonst wandert
   das Auge beim Vergleichen.
   ============================================================ */
.zusatz {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--linie);
}
.zusatz-titel {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.15rem + 1.4vw, 2rem);
  letter-spacing: -0.028em;
  line-height: 1.1;
}
.zusatz-vor {
  margin-top: 10px;
  max-width: 56ch;
  color: var(--tinte-leise);
  font-size: 1rem;
  text-wrap: pretty;
}
.zusatz-vor strong { color: var(--tinte); font-weight: 700; }

/* Eine Moeglichkeitsliste, keine Preisliste: zwei Spalten,
   Markierungsstrich, kein Zahlenblock rechts. */
.zusatz-liste {
  list-style: none;
  padding: 0;
  margin-top: clamp(20px, 2.6vw, 28px);
  display: grid;
  gap: 12px 40px;
}
@media (min-width: 52rem) {
  .zusatz-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zusatz-liste li {
  position: relative;
  padding-left: 26px;
  color: var(--tinte-leise);
  font-size: 1rem;
  text-wrap: pretty;
}
.zusatz-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 16px;
  height: 6px;
  background: var(--strich) center / 100% 100% no-repeat;
}

.zusatz-nach {
  margin-top: clamp(20px, 2.6vw, 28px);
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(1.15rem, 1.05rem + 0.7vw, 1.5rem);
  letter-spacing: -0.022em;
}

.pakete-hinweis {
  margin-top: clamp(22px, 3vw, 30px);
  max-width: 62ch;
  color: var(--tinte-leise);
  font-size: 1rem;
  text-wrap: pretty;
}
.pakete-hinweis strong { color: var(--tinte); font-weight: 700; }

/* Die Auswahl innerhalb eines Listenpunkts. Eingerueckt, ohne
   eigene Markierung — sie gehoert sichtbar zum Punkt darueber.
   Der Sinn ist die Begrenzung: EINES davon, nicht alle. */
.paket-wahl {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: grid;
  gap: 7px;
  font-size: 0.9375rem;
}
.paket-wahl li {
  position: relative;
  padding-left: 16px;
  color: var(--tinte-leise);
}
.paket-wahl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 1px;
  background: var(--tinte-leise);
}
.paket-liste b { color: var(--tinte); font-weight: 700; }

/* --- Der Stundensatz ---------------------------------------
   Bleibt gross und nackt zwischen zwei Linien. Er gehoert nicht
   in eine Kachel, weil er fuer alle drei gilt. */
.stundensatz {
  margin-top: clamp(36px, 5vw, 56px);
  padding-block: clamp(22px, 3vw, 30px);
  border-top: 2px solid var(--tinte);
  border-bottom: 2px solid var(--tinte);
  display: grid;
  gap: 8px 32px;
  align-items: baseline;
}
@media (min-width: 40rem) {
  .stundensatz { grid-template-columns: auto minmax(0, 1fr); }
}
.stundensatz-zahl {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.stundensatz-zahl span {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.28em;
  letter-spacing: 0;
  margin-left: 0.45em;
}
.stundensatz-text { color: var(--tinte-leise); }
.stundensatz-text strong { color: var(--tinte); font-weight: 700; }

/* ============================================================
   Punkte — die ruhige Dichte
   ============================================================ */
/* Bewusst KEINE zweispaltige Begriff-und-Erklaerung-Tabelle mehr.
   Die liest sich wie eine Bedienungsanleitung. Stattdessen eine
   klare Stufe: Aussage gross, Erklaerung klein darunter. */
.punkte {
  margin-top: clamp(30px, 5vw, 48px);
  display: grid;
}
.punkte > div {
  display: grid;
  gap: 8px;
  padding-block: clamp(22px, 3.4vw, 32px);
  border-top: 1px solid var(--linie);
}
.punkte > div:last-child { border-bottom: 1px solid var(--linie); }
.punkte dt {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 26ch;
}
.punkte dd {
  margin: 0;
  color: var(--tinte-leise);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ============================================================
   Der Ort
   ------------------------------------------------------------
   „Von hier" wird hier zum Bild, nicht zur Fussnote. Der Marker
   zieht sich quer durch den Ortsnamen.
   ============================================================ */
.ort {
  padding-block: clamp(60px, 12vw, 116px);
  border-top: 1px solid var(--linie);
}
.ort-name {
  font-family: "Archivo Black", system-ui, sans-serif;
  text-transform: uppercase;
  /* Ein langes Wort. Die Groesse richtet sich nach der Breite,
     sonst laeuft es auf schmalen Geraeten heraus. */
  font-size: clamp(1.9rem, 0.2rem + 8.2vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.ort-durchzogen {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
/* Der Strich sitzt UNTER dem Wort, nicht quer hindurch. Quer
   gelegt sah er aus wie eine steckengebliebene Animation. */
.ort-durchzogen::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.04em;
  right: -0.08em;
  top: calc(100% - 0.1em);
  height: 0.12em;
  background: var(--strich) center / 100% 100% no-repeat;
}
.ort-land {
  margin-top: clamp(6px, 1vw, 12px);
  font-size: clamp(1.2rem, 1rem + 1.2vw, 2rem);
  color: var(--tinte-leise);
  letter-spacing: -0.015em;
}
.ort .satz { margin-top: clamp(32px, 5vw, 52px); }
.ort-wen {
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  font-weight: 700;
  text-wrap: balance;
}

/* ============================================================
   Ablauf — fuenf Schritte wie auf einer Bauzeichnung
   ============================================================ */
.schritte {
  /* Die Groesse der Positionsnummer steht hier, weil zwei Dinge
     sie brauchen: die Nummer selbst und die Mitte des Strichs
     darunter. Ein zweites Mal hingeschriebene Zahl waere ein
     Fehler, der beim naechsten Umbau auseinanderlaeuft. */
  --nr: clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem);
  list-style: none;
  padding: 0;
  margin-top: clamp(32px, 5vw, 52px);
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}
.schritte li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: start;
}
/* Die Wegmarkierung zum naechsten Schritt.
   ------------------------------------------------------------
   Hier lag vorher der handgezeichnete Wellenstrich --strich-hoch,
   eingebaut mit preserveAspectRatio:none und 100% 100%. Der wurde
   damit auf JEDE Segmenthoehe anders gedehnt: Schritt 1 hat zwei
   Textzeilen, Schritt 3 nur eine — dieselbe Welle einmal auf 180
   und einmal auf 120 Pixel gezogen. Jedes Segment bekam dadurch
   eine andere Wellenfrequenz. Das liest sich nicht als Handschrift,
   sondern als Ungenauigkeit.

   Der Abschnitt ist als Bauzeichnung gemeint, und eine Bauzeichnung
   hat gerade Linien. Also ein exakter Strich, 2 px, mittig unter
   der Positionsnummer. Der handgezeichnete Charakter bleibt dort,
   wo er breit genug ist, um als Absicht zu wirken — bei den
   Listenzeichen und beim Textmarker. */
.schritte li::before {
  content: "";
  position: absolute;
  /* Mittig unter der Positionsnummer — bei JEDER Bildschirmbreite.
     Ein fester Pixelwert kann das nicht: die Ziffern skalieren mit,
     also wandert ihre Mitte. Gemessen ist eine zweistellige Nummer
     in Archivo Black 1,254 em breit, ihre Mitte liegt bei 0,627 em.

     Wichtig: NICHT ueber font-size dieses Elements loesen. Dann
     beziehen sich auch top und bottom auf die grosse Ziffer, und
     der Strich schrumpft auf 12 Pixel zusammen. Stattdessen die
     Groesse aus --nr holen und nur in dieser einen Rechnung
     verwenden. */
  left: calc(0.627 * var(--nr) - 1px);
  top: 3.4em;
  bottom: calc(-1 * clamp(32px, 5vw, 48px) - 0.6em);
  width: 2px;
  background: var(--blau-hell);
  opacity: 0.8;
}
.schritte li:last-child::before { display: none; }

/* Gross und nuechtern wie eine Positionsnummer im Plan */
.schritt-nr {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: var(--nr);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.schritte h3 {
  font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  margin-bottom: 8px;
}
.schritte p { color: var(--tinte-leise); max-width: 52ch; text-wrap: pretty; }

.nachsatz {
  margin-top: clamp(36px, 5.5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  font-size: clamp(1.15rem, 1.05rem + 0.7vw, 1.45rem);
}

/* ============================================================
   Knoepfe
   ============================================================ */
.knopf-blau {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.2rem);
  text-decoration: none;
  /* Kein Schatten und kein Leuchten. Beim Zeigen faellt ein
     schwarzer Rahmen um den Knopf — Kontrast statt Effekt. */
  box-shadow: inset 0 0 0 0 var(--tinte);
  transition: box-shadow var(--uebergang), transform var(--uebergang);
}
.knopf-blau:hover {
  box-shadow: inset 0 0 0 3px var(--tinte);
  transform: translateY(-1px);
}
.knopf-blau:active { transform: none; }

/* Textknopf mit Markierung, die beim Zeigen unterfaehrt */
.knopf-linie {
  display: inline-block;
  min-height: 48px;
  padding: 12px 0;
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(1.15rem, 1.05rem + 0.7vw, 1.5rem);
  letter-spacing: -0.02em;
  text-decoration: none;
  background: var(--strich) left bottom / 0% 0.24em no-repeat;
  transition: background-size var(--uebergang);
}
.knopf-linie::after { content: " →"; }
.knopf-linie:hover { background-size: 100% 0.24em; }

/* ============================================================
   Fuss
   ============================================================ */
.fuss {
  padding-block: 28px 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  font-size: 0.9375rem;
  color: var(--tinte-leise);
}
.fuss-links { display: flex; gap: 24px; }
.fuss a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--uebergang), border-color var(--uebergang);
}
.fuss a:hover { color: var(--tinte); border-bottom-color: var(--blau-hell); }

/* ============================================================
   Rechtsseiten
   ============================================================ */
.blatt {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 48px) var(--rand) clamp(60px, 10vw, 100px);
}
.blatt h1 {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
  letter-spacing: -0.032em;
  line-height: 1.04;
}
.blatt h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: none;
  margin: 40px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
}
.blatt p, .blatt li { color: var(--tinte-leise); margin-bottom: 12px; text-wrap: pretty; }
.blatt strong { color: var(--tinte); font-weight: 700; }
.blatt ul { padding-left: 1.15em; }
.blatt a { color: var(--tinte); text-underline-offset: 4px; }
.blatt-stand { font-size: 1rem; }

.zurueck {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  margin-bottom: 24px;
  font-size: 1rem;
  color: var(--tinte-leise);
  text-decoration: none;
  border-bottom: 2px solid var(--linie);
  transition: color var(--uebergang), border-color var(--uebergang);
}
.zurueck:hover { color: var(--tinte); border-bottom-color: var(--blau-hell); }

/* ============================================================
   Bewegung abgeschaltet
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .markiert::before { animation: none; transform: none; }
  .knopf-blau:hover { transform: none; box-shadow: none; }

  /* Die Bildmarke laeuft endlos in der Schleife — genau das will
     hier niemand sehen. Statt des Videos steht das Standbild, und
     zwar als Hintergrund des Kastens: so bleibt die Marke sichtbar,
     ohne dass ein verstecktes Video weiterdekodiert. */
  .hero-marke {
    aspect-ratio: 512 / 368;
    background: url("images/logo-monogramm.png") center / contain no-repeat;
  }
  .hero-marke video { display: none; }
}

/* Pflichtlinks am Fuss der Rechtsseiten. § 5 DDG verlangt das Impressum
   von jeder Seite aus unmittelbar erreichbar — auch von der
   Datenschutzerklaerung, und umgekehrt. Ergaenzt am 11.09.2026, nachdem
   der Justiziar beides rot gemeldet hatte. */
.blatt-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  font-size: 0.9375rem;
}
.blatt-fuss a {
  color: var(--tinte-leise);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.blatt-fuss a:hover,
.blatt-fuss a:focus-visible { color: var(--tinte); border-bottom-color: var(--blau-hell); }