/* ============================================================
   Enoxo Flow — Handgemacht (v16.1)
   Startseite und Rechtsseiten

   Liegt über den vorhandenen <style>-Blöcken der acht Seiten und
   hängt an `body.hand`. Klasse weg = alter Zustand.

   WAS ERSETZT WIRD
   Die Startseite war dunkel mit drei Radialverläufen, einem
   Papierstapel in 3D-Perspektive, Verlaufsknöpfen und
   Weichzeichner hinter der Kopfleiste. Dieselbe Bauform wie
   zehntausend andere Startseiten, weil sie aus demselben
   Baukasten stammt.

   WAS STATTDESSEN
   Dieselbe Sprache wie die Anwendung seit v16.0: Tinte auf
   Papier. Was hier dazukommt, ist das Handgemachte — die
   Startseite darf wärmer sein als das Werkzeug:

   · Die drei Dokumentblätter liegen flach auf dem Tisch, leicht
     verdreht, wie hingelegt. Keine Perspektive, kein Schweben.
     Eine 2D-Drehung um zwei Grad liest sich als „von Hand
     hingelegt". Eine 3D-Kippung liest sich als CSS-Kunststück.
   · Abschnitte trennen Linien, keine Kästen mit Schatten.
   · Der Satzspiegel führt, nicht die Dekoration.
   · Orange bleibt der eine Akzent.
   ============================================================ */

body.hand{
  --tinte:#14100c;
  --tinte-blass:#6b6357;
  --tinte-zart:#958d7e;
  --papier:#fbf8f1;
  --blatt:#ffffff;
  --hairline:#ddd5c4;
  --hairline-kraeftig:#b4a992;
  --sonne:#d96f0c;
  --rot:#8e2b20;
  --tuerkis:#1fb8c9;

  background:var(--papier);
  color:var(--tinte);
}

body.hand ::selection{background:rgba(217,111,12,.22)}

/* ============================================================
   1 · Kopfleiste
   ============================================================ */
body.hand .kopf{
  background:var(--papier);
  backdrop-filter:none;
  border-bottom:1px solid var(--hairline-kraeftig);
  box-shadow:none;
  /* Die Rechtsseiten waren dunkel entworfen und setzen auf .kopf
     eine HELLE Schriftfarbe, die a.marke per `color:inherit`
     übernimmt. Auf dem neuen Papiergrund stand „Enoxo" damit
     hell auf hell — unsichtbar. Ohne diese Zeile bleibt der
     Schriftzug weg, egal was daneben steht. */
  color:var(--tinte);
}
/* `header.kopf a.marke` der Rechtsseiten ist (0,2,2);
   `body.hand .kopf .marke` ist (0,3,1) und schlägt es. */
body.hand .kopf .marke{
  color:var(--tinte);font-family:var(--display);font-weight:600;
  letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px;
  font-size:19px;
}
/* Startseite schreibt <i>Flow</i>, die Rechtsseiten <span>Flow</span>.
   Beide Fälle abdecken, sonst fehlt auf sechs Seiten der Akzent. */
body.hand .kopf .marke i,
body.hand .kopf .marke span{
  font-style:normal;color:var(--sonne);font-weight:600;
}
body.hand .kopf .marke b{color:var(--tinte);font-weight:600}
body.hand .kopf nav a{color:var(--tinte-blass);font-weight:500}
body.hand .kopf nav a:hover{color:var(--tinte);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--sonne)}
body.hand .kopf nav a[aria-current="page"]{color:var(--sonne);font-weight:600}

/* Der Esel ist die Marke — auf jeder Seite dasselbe Zeichen. */
body.hand .marke .esel-marke{
  width:26px;height:26px;flex-shrink:0;
  border-radius:0;filter:none;display:block;
}

/* ============================================================
   2 · Knöpfe — flach, eine Kante, keine Verläufe
   ============================================================ */
body.hand .knopf{
  border-radius:2px;font-weight:600;letter-spacing:0;
  box-shadow:none;border:1px solid var(--hairline-kraeftig);
  background:var(--blatt);color:var(--tinte);
  transition:background .12s linear,border-color .12s linear,color .12s linear;
}
body.hand .knopf:hover{background:#f2ece0;border-color:var(--tinte-blass);
  box-shadow:none;transform:none}
body.hand .knopf:active{background:#e9e1d2;transform:none}
body.hand .knopf.sonne{
  background:var(--sonne);border-color:var(--sonne);color:#fff;
}
body.hand .knopf.sonne:hover{background:#c46209;border-color:#c46209}
body.hand .knopf.rand{background:transparent;border-color:var(--hairline-kraeftig)}
body.hand .knopf.rand:hover{background:#f2ece0;border-color:var(--tinte)}
body.hand .knopf::before,body.hand .knopf::after{display:none}
body.hand .knopf:focus-visible{outline:2px solid var(--sonne);outline-offset:2px}

/* ============================================================
   3 · Held
   ============================================================ */
body.hand .held{
  background:var(--papier);
  border-bottom:1px solid var(--hairline-kraeftig);
  padding:56px 0 64px;
}
body.hand .held::before,body.hand .held::after{display:none}

body.hand .augenbraue{
  color:var(--sonne);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:9px;margin-bottom:20px;
  border-bottom:1px solid var(--hairline);
  display:block;max-width:34ch;
}
body.hand .augenbraue::before,body.hand .augenbraue::after{display:none}

body.hand .held h1{
  font-family:var(--display);
  font-size:clamp(34px,5.4vw,62px);line-height:1.03;
  font-weight:600;letter-spacing:-.035em;color:var(--tinte);
  margin:0 0 22px;
}
body.hand .held h1 em{font-style:normal;color:var(--sonne)}
body.hand .vorspann{
  font-size:16.5px;line-height:1.68;color:var(--tinte-blass);
  max-width:46ch;margin:0 0 28px;
}
body.hand .kleingedruckt{
  font-size:12.5px;color:var(--tinte-zart);margin-top:16px;
  font-variant-numeric:tabular-nums;
}

/* ---- Die drei Blätter, flach hingelegt ----
   ACHTUNG, hier lag ein Fehler in v16.1: Die Blätter liegen im
   Original alle auf `inset:0`. Ihre Trennung kam AUSSCHLIESSLICH
   aus `translate3d(-58px,-38px,-104px)`. Ein Override, der nur
   `rotate()` setzt, ersetzt die ganze Transformation — und alle
   drei fallen aufeinander. Genau das ist passiert.

   Richtig ist: die X/Y-Versätze behalten, nur die Z-Achse
   streichen. Ohne Tiefe werden die hinteren Bögen nicht mehr
   kleiner gerechnet — sie sind gleich groß, wie Papier auf einem
   Tisch nun einmal ist. Das ist kein Verlust, das ist der Punkt.

   Die Drehung bleibt zweidimensional. Eine 2D-Drehung liest sich
   als von Hand hingelegt, eine 3D-Kippung als CSS-Kunststück. */
body.hand .buehne{perspective:none;min-height:520px}
body.hand .kippe{transform:none;transition:none}
body.hand .schwebe{transform:none}

body.hand .blatt{
  background:var(--blatt);
  border:1px solid var(--hairline);
  border-radius:1px;
  box-shadow:0 1px 3px rgba(20,16,12,.09);
  transition:transform .2s ease-out;
}
body.hand .blatt--vertrag {transform:translate(-58px,-38px) rotate(-3deg)}
body.hand .blatt--angebot {transform:translate(-29px,-19px) rotate(-1.4deg)}
body.hand .blatt--rechnung{transform:translate(0,0) rotate(.4deg)}

/* Der Original-Hover ist `.kippe:hover .blatt--vertrag` (0,3,0)
   und schlägt eine Regel mit `body.hand .blatt--vertrag` (0,2,1).
   Ohne diese drei Zeilen käme beim Überfahren das 3D zurück. */
body.hand .kippe:hover .blatt--vertrag {transform:translate(-74px,-48px) rotate(-4.2deg)}
body.hand .kippe:hover .blatt--angebot {transform:translate(-37px,-24px) rotate(-2deg)}
body.hand .kippe:hover .blatt--rechnung{transform:translate(4px,2px) rotate(.2deg)}

/* Die hinteren Bögen liegen im Schatten der vorderen. Ohne diesen
   Hauch verliert der Stapel jede Tiefe, sobald die Perspektive weg ist. */
body.hand .blatt--vertrag::after{background:rgba(20,16,12,.06)}
body.hand .blatt--angebot::after{background:rgba(20,16,12,.03)}

/* Der Reiter wird zur Beschriftung am Rand — wie ein Stempel. */
body.hand .blatt .reiter{
  background:var(--papier);color:var(--tinte-zart);
  border:1px solid var(--hairline-kraeftig);border-radius:0;
  font-size:9px;letter-spacing:.13em;font-weight:700;
  padding:3px 8px;box-shadow:none;
}
body.hand .blatt--rechnung .reiter{color:var(--sonne);border-color:var(--sonne)}

/* ============================================================
   4 · Abschnitte
   Getrennt durch Linien und Luft, nicht durch Kästen.
   ============================================================ */
body.hand main > section{
  background:var(--papier);
  border-bottom:1px solid var(--hairline);
  padding:60px 0;
}
body.hand main > section::before,
body.hand main > section::after{display:none}

body.hand h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.028em;
  color:var(--tinte);
}
body.hand h3{font-family:var(--display);font-weight:600;color:var(--tinte)}
body.hand p{color:var(--tinte-blass)}

body.hand .karte{
  background:var(--blatt);
  border:1px solid var(--hairline);
  border-radius:2px;
  box-shadow:none;
}
body.hand .karte:hover{transform:none;box-shadow:none;border-color:var(--hairline-kraeftig)}

/* Merkmalliste: Nummerierung statt bunter Marker. */
body.hand .marker{
  background:transparent;color:var(--sonne);
  border:0;border-radius:0;padding:0;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
}

body.hand .gegen,body.hand .sicher,body.hand .neu,body.hand .vertraege{
  background:var(--papier);
}
/* Ein einziger Abschnitt darf dunkel sein — der Preisblock.
   Kontrast wirkt, wenn er selten ist. */
body.hand .preis{
  background:var(--tinte);border-bottom:0;
}
body.hand .preis h2,body.hand .preis h3{color:#f7f3ea}
body.hand .preis p{color:#b0a696}
body.hand .preis .karte{
  background:transparent;border-color:rgba(247,243,234,.22);
}
body.hand .preis .augenbraue{color:#f5a94e;border-bottom-color:rgba(247,243,234,.2)}
body.hand .preis .knopf.sonne{background:var(--sonne);border-color:var(--sonne)}
body.hand .preis .knopf.rand{
  border-color:rgba(247,243,234,.32);color:#f7f3ea;background:transparent;
}
body.hand .preis .knopf.rand:hover{background:rgba(247,243,234,.12)}

/* Preise mit Tabellenziffern — es sind Zahlen, keine Zierde. */
body.hand .preis .betrag,body.hand .preis strong{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* ---- Was ist neu ----
   Der Zeitstrahl war ein Farbverlauf mit Leuchtpunkten. Hier wird
   er zu dem, was er ist: eine Randlinie mit Marken daran, wie in
   einem geführten Buch. Die Versionsnummer steht in Ziffernbreite,
   damit v9.1 und v16.2 untereinander gleich breit sind. */
body.hand .neuliste{padding-left:24px;max-width:70ch}
body.hand .neuliste::before{
  background:var(--hairline-kraeftig);width:1px;left:5px;
}
body.hand .neueintrag::before{
  background:var(--papier);border:1px solid var(--hairline-kraeftig);
  border-radius:50%;width:11px;height:11px;left:-24px;top:6px;
}
body.hand .neueintrag:first-child::before{
  background:var(--sonne);border-color:var(--sonne);
}
body.hand .neueintrag > ul{color:var(--tinte-blass)}
body.hand .neueintrag > ul li{font-size:14.5px;line-height:1.68}
body.hand .neueintrag > ul li b{color:var(--tinte);font-weight:600}
body.hand .neuversion{
  font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:12px;font-weight:700;color:var(--tinte-blass);
  background:transparent;border:1px solid var(--hairline-kraeftig);
  border-radius:2px;padding:2px 7px;
  font-variant-numeric:tabular-nums;
}
body.hand .neueintrag:first-child .neuversion{
  color:var(--sonne);border-color:var(--sonne);
}
body.hand .neumarke{
  background:transparent;color:var(--sonne);border:0;border-radius:0;padding:0;
  font-size:10px;letter-spacing:.13em;font-weight:700;
}
body.hand .neukopf time{
  font-size:12.5px;color:var(--tinte-zart);font-variant-numeric:tabular-nums;
}

/* ============================================================
   5 · Der Esel und „Made with heart"
   ============================================================ */
body.hand .abschluss{
  text-align:center;padding:56px 32px;
  border:1px solid var(--hairline-kraeftig);border-radius:2px;
  background:var(--blatt);
}
body.hand .esel{
  display:block;margin:0 auto 20px;width:96px;height:96px;filter:none;
}
@media (prefers-reduced-motion:no-preference){
  body.hand .esel{animation:none}
  body.hand .abschluss:hover .esel{animation:eselNick .8s ease-out}
  @keyframes eselNick{
    35%{transform:translateY(-9px) rotate(4deg)}
    70%{transform:translateY(0) rotate(-2deg)}
    100%{transform:translateY(0) rotate(0)}
  }
}

/* Die Herzzeile. Sie steht für sich, mit Luft drumherum —
   ein Absender, kein Werbebanner. */
body.hand .herzzeile{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:30px 0 26px;margin-top:0;
  font-size:13.5px;color:var(--tinte-blass);
  border-top:1px solid var(--hairline);
}
body.hand .herzzeile svg{width:15px;height:15px;flex-shrink:0}
body.hand .herzzeile b{color:var(--tinte);font-weight:600}
body.hand .herzzeile .ort{color:var(--tinte-zart)}

/* ============================================================
   6 · Fußzeile
   ============================================================ */
body.hand .fuss{
  background:var(--papier);
  border-top:1px solid var(--hairline-kraeftig);
  color:var(--tinte-blass);padding:26px 0 34px;
}
body.hand .fuss .rechte{color:var(--tinte-blass);font-size:12.5px}
body.hand .fuss nav a{
  color:var(--tinte-blass);font-size:12.5px;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--hairline-kraeftig);
}
body.hand .fuss nav a:hover{color:var(--tinte);text-decoration-color:var(--sonne)}
body.hand .eselzeile img{width:22px;height:22px;filter:none}

/* ============================================================
   7 · Rechtsseiten
   Ein Rechtstext ist ein Dokument, kein Auftritt. Er bekommt
   den Satzspiegel eines Buches: eine Spalte, ruhiger Fluss,
   Nummerierung, die man wiederfindet.
   ============================================================ */
body.hand .rechtstext{
  max-width:68ch;margin:0 auto;padding:0 0 20px;
}
body.hand .rechtstext h1{
  font-family:var(--display);font-size:clamp(26px,3.6vw,38px);
  font-weight:600;letter-spacing:-.03em;color:var(--tinte);
  padding-bottom:12px;margin-bottom:8px;
  border-bottom:2px solid var(--tinte);
}
body.hand .rechtstext h2{
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  margin:34px 0 10px;padding-top:14px;
  border-top:1px solid var(--hairline);color:var(--tinte);
}
body.hand .rechtstext h3{font-size:14px;margin:20px 0 6px}
body.hand .rechtstext p,
body.hand .rechtstext li{
  font-size:14.5px;line-height:1.72;color:var(--tinte-blass);
}
body.hand .rechtstext strong,body.hand .rechtstext b{color:var(--tinte);font-weight:600}
body.hand .rechtstext a{color:var(--tinte);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--sonne)}
body.hand .rechtstext table{
  width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px;
}
body.hand .rechtstext th{
  text-align:left;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinte-zart);border-bottom:1px solid var(--hairline-kraeftig);
  padding:8px 10px 7px;font-weight:700;
}
body.hand .rechtstext td{
  padding:9px 10px;border-bottom:1px solid var(--hairline);
  color:var(--tinte-blass);vertical-align:top;
}
body.hand .stand{
  font-size:12px;color:var(--tinte-zart);
  font-variant-numeric:tabular-nums;
  border:0;background:transparent;padding:0;margin-bottom:26px;
}
/* Auf den Rechtsseiten ist die Karte nur ein Rahmen um Text —
   ohne Schatten, ohne Fülle. */
body.hand .rechtstext .karte,
body.hand .rechtstext .kasten{
  background:var(--blatt);border:1px solid var(--hairline);
  border-radius:2px;box-shadow:none;padding:16px 18px;margin:16px 0;
}

/* ============================================================
   8 · Schmale Bildschirme
   ============================================================ */
@media (max-width:760px){
  body.hand .held{padding:36px 0 42px}
  body.hand main > section{padding:42px 0}
  /* Schmal: gestapelt statt gefaechert, sonst laufen die
     hinteren Boegen aus dem Bild. */
  body.hand .buehne{min-height:400px}
  body.hand .blatt--vertrag {transform:translate(-22px,-15px) rotate(-2.4deg)}
  body.hand .blatt--angebot {transform:translate(-11px,-7px) rotate(-1.2deg)}
  body.hand .blatt--rechnung{transform:translate(0,0) rotate(.3deg)}
  body.hand .esel{width:76px;height:76px}
  body.hand .abschluss{padding:38px 20px}
  body.hand .herzzeile{flex-wrap:wrap;font-size:13px}
  body.hand .rechtstext h1{font-size:25px}
}

/* ============================================================
   9 · Druck
   ============================================================ */
@media print{
  body.hand .kopf,body.hand .fuss nav,body.hand .abschluss,
  body.hand .herzzeile{display:none}
  body.hand .preis{background:none;color:#000}
  body.hand .rechtstext{max-width:none}
}