/* Stylesheet der statischen Rechts- und Leistungsseiten.
   Diese Seiten liegen bewusst als statisches HTML neben der App, damit sie
   auch ohne JavaScript lesbar sind.

   ⚠️ Dieses Stylesheet kennt die Klassennamen der App NICHT automatisch (P6).
   Wer hier eine Huelle definiert (.wrap), die eine Seite nicht benutzt,
   bekommt weder Satzbreite noch Rand – der Text klebt am Fensterrand und
   laeuft bei einem breiten Fenster als eine einzige unlesbare Zeile durch.
   Beim Umbau einer Seite pruefen, dass ihre Huelle hier aufgefuehrt ist.

   Rechtstexte werden ausgedruckt und abgeheftet – enge Raender sind hier
   laestiger als anderswo. */

/* Dieselben selbst gehosteten Schriften wie die App – sonst wirken die
   statischen Seiten wie von einer anderen Website. Nur der latin-Satz: Diese
   Seiten tragen deutschen Text, der Ergaenzungssatz waere totes Gewicht.
   Lizenz und Herkunft: siehe fonts/LIESMICH.txt (P6). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/raleway-latin.woff2') format('woff2');
}

:root {
  --grund: #0b0b0e;
  --flaeche: #141419;
  --text: #f2f0ec;
  --text-leise: rgba(242, 240, 236, 0.7);
  --signal: #ff6b1a;
  --signal-hell: #ff8c4d;
  --kante: rgba(242, 240, 236, 0.14);
  --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --schrift-display: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.02rem;
  line-height: 1.7;
}

body, h1, h2, h3, p, li, dt, dd, td, th, address {
  overflow-wrap: break-word;
  hyphens: manual;
}

.wrap, .recht-wrap {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vh, 5rem);
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}

h1 {
  font-family: var(--schrift-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 1.6rem;
}
h2 {
  font-family: var(--schrift-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  line-height: 1.25;
  margin: 2.6rem 0 0.7rem;
}
h3 { font-size: 1.02rem; margin: 1.6rem 0 0.5rem; }

/* --- Zubehoer der Leistungsseiten ------------------------------------- */

.seiten-logo { height: 34px; width: auto; display: block; margin-bottom: 2rem; }

.vorspann { font-size: 1.12rem; color: var(--text); margin-bottom: 2rem; }

.ort {
  display: inline-block;
  margin-bottom: 1.6rem;
  color: rgba(242, 240, 236, 0.45);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Aufzaehlung mit Signalstrich statt Punkt – wie auf der Startseite. */
.liste { list-style: none; padding-left: 0; }
.liste li { position: relative; padding-left: 1.2rem; margin-bottom: 0.5rem; }
.liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--signal);
}

.btn-seite {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: 4px;
  background: var(--signal);
  color: #16060a;
  font-weight: 600;
  text-decoration: none;
}
.btn-seite:hover { background: var(--signal-hell); }

.abschluss {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--kante);
}

p, li { color: var(--text-leise); margin: 0 0 0.9rem; }
ul, ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }

a { color: var(--signal); }

.zurueck {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--text-leise);
  text-decoration: none;
  font-size: 0.92rem;
}
.zurueck:hover { color: var(--text); }

.platzhalter {
  border: 1px dashed var(--signal);
  border-radius: 4px;
  padding: 1.3rem 1.5rem;
  color: #ff7c4d;
  font-size: 0.95rem;
}

.fuss {
  border-top: 1px solid var(--kante);
  margin-top: 3rem;
  padding-top: 1.4rem;
  font-size: 0.88rem;
  color: rgba(242, 240, 236, 0.45);
}

/* --------------------------------------------------------------- Fallbeispiel
   Ein Projekt zum Ansehen statt zum Nachlesen. Das Video laeuft stumm und in
   Schleife – es ist ein Durchlauf durch eine Oberflaeche, kein Film mit
   Handlung, und niemand soll dafuer etwas anklicken muessen.

   ⚠️ Das Video ist HELL, die Seite ist dunkel. Deshalb ein eigener, heller
   Rahmen darum: Ohne ihn steht die Flaeche wie ein Leuchtkasten mitten im
   Text. Der Rahmen nimmt die Beigetoene des Videos auf und vermittelt. */
.fall {
  margin: 0 0 2.2rem;
  padding: 0;
}

.fall-rahmen {
  border-radius: 14px;
  overflow: hidden;                /* schneidet das Video auf die Rundung */
  background: #efe7da;             /* Beige aus dem Video – kein weisser Blitz
                                      beim Laden, bevor das erste Bild da ist */
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  line-height: 0;                  /* sonst sitzt unter dem Video eine Zeile Luft */
}

.fall-rahmen video {
  width: 100%;
  height: auto;
  display: block;
}

.fall figcaption {
  margin-top: 0.7rem;
  color: var(--text-still);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Der Name des Projekts steht ueber dem Video, nicht darunter: Er ordnet ein,
   bevor man schaut. */
.fall-marke {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.5rem;
}

/* --- Auf schmalen Bildschirmen: volle Breite statt Ausschnitt -------------
   ⚠️ Hier stand zwischenzeitlich ein Beschnitt aufs Hochformat: Der Kasten
   wurde 9:16 und zeigte nur noch das Telefon, weil bei 340 px Breite von einem
   16:9-Video wenig uebrig bleibt (gemessen 191 px Hoehe).

   Simons Befund am Geraet war eindeutig dagegen: "Ich glaube das Format muss
   bei 16:9 bleiben damit man alles erkennt." Das Video zeigt links das
   Telefon UND rechts die Beschriftung – wer beschneidet, wirft die Haelfte
   der Aussage weg.

   Stattdessen holt das Video hier die volle Bildschirmbreite: Es tritt aus der
   Satzbreite heraus, indem es deren Innenabstand negativ ausgleicht. Der
   Zugewinn ist klein, aber es ist alles, was ohne Beschnitt zu holen ist. */
@media (max-width: 620px) {
  .fall {
    margin-inline: calc(-1 * clamp(1.5rem, 5vw, 3rem));
  }

  .fall-rahmen { border-radius: 0; border-inline: none; }

  /* Die Bildunterschrift bleibt in der Satzbreite – sie ist Text. */
  .fall figcaption { padding-inline: clamp(1.5rem, 5vw, 3rem); }
}

/* --------------------------------------------------------------- Seitenkopf
   Die Unterseiten hatten nur einen Zurueck-Verweis. Wer ueber eine Suche
   direkt hier landet – und genau dafuer gibt es diese Seiten (K.7) –, kam
   weder zu den anderen Leistungen noch zum Kontakt.

   Bewusst OHNE Klappmenue: Das braeuchte JavaScript, und diese Seiten kommen
   ohne aus. Auf schmalen Bildschirmen wird die Leistungsreihe deshalb
   ausgeblendet; dort fuehrt der Block "Weitere Leistungen" am Seitenende
   weiter. Ein Menue, das man nicht bedienen kann, waere schlechter als keins. */
.seiten-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.75rem clamp(1.5rem, 5vw, 3rem);
  background: rgba(11, 11, 14, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Der Schriftzug ist zugleich der Weg zurueck. Auf den Leistungsseiten steht
   deshalb KEIN zusaetzlicher "Zurueck zur Startseite"-Verweis mehr – er stand
   sonst direkt unter dem Kopf und sagte dasselbe zweimal. Auf den
   Rechtsseiten, die keinen Kopf tragen, bleibt er. */
.kopf-marke { display: block; flex-shrink: 0; }

/* Der Verlauf von weich nach scharf – identisch zur Startseite und aus
   demselben Grund so gebaut: ZWEI Ebenen derselben SCHARFEN Datei mit
   gegenlaeufigen Masken, nicht die Datei mit eingebauten Weichzeichnern.

   ⚠️ Deren Staerken stehen in Zeichnungs-Einheiten und schrumpfen beim
   Verkleinern mit. Chromium rechnet das mit, WebKit nicht – auf dem iPhone
   kam der Verlauf gar nicht an, dort war der ganze Schriftzug gleichmaessig
   weich. Dreimal nachgebessert, dreimal am Geraet gescheitert.
   CSS-Weichzeichner rechnen dagegen in echten Bildschirmpunkten: `blur(1.4px)`
   sind ueberall 1,4 px, unabhaengig von viewBox und Anzeigegroesse.

   Der Wert ist hier kleiner als auf der Startseite (dort 2,2 px), weil der
   Schriftzug hier kleiner ist – 26 statt 42 px hoch. Gleiche Unschaerfe bei
   kleinerer Schrift saehe nur nach Fehler aus. */
.marke-stapel {
  position: relative;
  display: block;
  height: 26px;
}

.kopf-marke img {
  height: 26px;
  width: auto;
  display: block;
}

.marke-weich {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(1.4px);
  /* Links voll sichtbar, nach rechts ausgeblendet. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 12%, transparent 58%);
  mask-image: linear-gradient(to right, #000 0%, #000 12%, transparent 58%);
}

.marke-scharf {
  /* Gegenlaeufig: links unsichtbar, ab der Mitte voll da. Die Summe beider
     Masken ergibt an jeder Stelle etwa eine volle Deckung – deshalb
     ueberlagern sich die Ebenen nicht zu einem Doppelbild. */
  -webkit-mask-image: linear-gradient(to right, transparent 10%, #000 58%, #000 100%);
  mask-image: linear-gradient(to right, transparent 10%, #000 58%, #000 100%);
}

/* ⚠️ `text-decoration: none` ist hier noetig, weil auf diesen Seiten
   Verweise im Fliesstext bewusst unterstrichen sind – die Kopfzeile erbt das
   sonst mit. In einer Navigation ist der Strich ueberfluessig: Dass es
   Verweise sind, sagt schon die Position. Die einzige Markierung, die bleibt,
   ist der orangene Strich unter der aktuellen Seite. */
.kopf-links { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); flex-wrap: wrap; }
.kopf-links a { color: var(--text-leise); font-size: 0.9rem; text-decoration: none; }
.kopf-links a:hover { color: var(--text); }

/* Die Seite, auf der man steht – dieselbe Marke wie in der Hauptnavigation:
   Optik und Bedeutung tragen dieselbe Information. */
.kopf-links a[aria-current='page'] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--signal);
}

.kopf-cta {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--signal);
  color: #0b0b0e;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;        /* ein Knopf wird nicht unterstrichen */
}
.kopf-cta:hover { background: var(--signal-hell); }

/* Der Kopf klebt oben – Sprungziele muessen darunter Platz lassen. */
:target { scroll-margin-top: 5rem; }

@media (max-width: 760px) {
  .kopf-links { display: none; }
}

/* ------------------------------------------------------- Weitere Leistungen
   Steht am Seitenende und ist damit die Fortsetzung fuer alle, die unten
   angekommen sind – und auf schmalen Bildschirmen der einzige Weg zu den
   Schwesterseiten. Fuer Google zugleich die Querverbindung zwischen den
   Leistungsseiten, ohne die jede fuer sich allein steht. */
.weitere {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--kante);
}
.weitere h2 { font-size: 1.05rem; margin-bottom: 0.9rem; }
.weitere ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.weitere a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.weitere a:hover { color: var(--signal-hell); }

/* ------------------------------------------ Menue und Leiste auf dem Handy
   Die Leistungsreihe im Kopf hat auf schmalen Bildschirmen keinen Platz. Statt
   sie dort ersatzlos auszublenden – dann fuehrte von einer Unterseite kein Weg
   zur naechsten –, tragen diese Seiten jetzt dieselbe Bedienung wie die
   Startseite: oben die drei Striche, unten die feste Leiste mit dem Aufruf.

   ⚠️ Anders als auf der Startseite steckt hier KEIN React dahinter. Das Menue
   liegt als fertiges Markup in jeder Datei, `kopf.js` schaltet nur eine Klasse
   um. Faellt das Skript aus, bleiben Kopf, Inhalt und Leiste bedienbar; nur
   das Klappmenue oeffnet dann nicht – und dafuer gibt es unten weiterhin den
   Block "Weitere Leistungen". */

.nav-schalter {
  display: none;                /* nur schmal, siehe unten */
  margin-left: auto;
  width: 44px; height: 44px;    /* Trefferflaeche fuer den Daumen */
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--signal);
  cursor: pointer;
}

.nav-striche,
.nav-striche::before,
.nav-striche::after {
  display: block;
  width: 19px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.16s ease;
}
.nav-striche { position: relative; }
.nav-striche::before,
.nav-striche::after { content: ''; position: absolute; left: 0; }
.nav-striche::before { top: -6px; }
.nav-striche::after  { top: 6px; }

.nav-schalter[aria-expanded='true'] .nav-striche { background: transparent; }
.nav-schalter[aria-expanded='true'] .nav-striche::before { transform: translateY(6px) rotate(45deg); }
.nav-schalter[aria-expanded='true'] .nav-striche::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-menue {
  display: none;
  position: fixed;
  top: 3.5rem;                  /* Hoehe des Kopfes */
  left: 0; right: 0;
  max-height: calc(100svh - 3.5rem - 62px);
  overflow-y: auto;
  padding: 1rem clamp(1.5rem, 5vw, 3rem) 1.6rem;
  z-index: 49;

  /* Fast deckend – ein Menue muss lesbar sein, nicht durchscheinend. */
  background: rgba(11, 11, 14, 0.985);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);

  /* Nicht ueber `display` ein- und ausblenden: Darauf laesst sich nicht
     animieren, und ohne `visibility` blieben die Verweise im geschlossenen
     Zustand mit der Tastatur erreichbar. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-menue.ist-offen { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-menue ul { list-style: none; padding: 0; margin: 0; }
.nav-menue a {
  display: block;
  padding-block: 0.6rem;
  color: var(--text-leise);
  font-size: 1.02rem;
  text-decoration: none;
}
.nav-menue a[aria-current='page'] { color: var(--signal); }
.nav-menue .menue-titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-still);
  margin: 0.6rem 0 0.2rem;
}

/* Die feste Leiste am unteren Rand – wie auf der Startseite. */
.kontaktleiste {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  height: 62px;
  gap: 0.6rem;
  align-items: center;
  padding-inline: 0.9rem;
  background: rgba(6, 6, 7, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--kante);
}
.kontaktleiste a {
  flex: 1 1 0;
  text-align: center;
  padding-block: 0.7rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.kontaktleiste .leiste-signal { background: var(--signal); color: #0b0b0e; }
.kontaktleiste .leiste-leise { border: 1px solid var(--kante); color: var(--text); }

@media (max-width: 760px) {
  .seiten-kopf { padding-block: 0.6rem; }
  .kopf-cta { display: none; }        /* steht unten in der festen Leiste */
  .nav-schalter { display: inline-flex; }
  .nav-menue { display: block; }
  .kontaktleiste { display: flex; }

  /* Platz fuer die Leiste, sonst verdeckt sie die Fusszeile. */
  .wrap, .recht-wrap { padding-bottom: calc(62px + 2rem); }
}