/* Die Hausschrift von PP-Trans.
 *
 * Steht ganz oben, weil @import nur am Dateianfang gilt.
 *
 * Barlow Condensed statt Bricolage Grotesque: schmal, aufrecht,
 * schildhaft - die Anmutung von Beschriftung auf Blech. Hanse Heide
 * traegt eine breite, warme Groteske; nebeneinander erkennt man die
 * beiden Firmen an der Ueberschrift, bevor man eine Farbe wahrgenommen
 * hat. Das ist der staerkste Unterschied, den zwei Seiten mit demselben
 * Aufbau haben koennen.
 *
 * Ueber Google Fonts, das die Seite ohnehin laedt - kein neuer Dritter.
 */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap");

/* ======================================================================
   PP-Trans.

   Liegt UEBER static/css/hanse.css und aendert nur Farben. Struktur,
   Abstaende und Verhalten teilen sich beide Firmen - eine Korrektur am
   Formular gilt damit fuer beide, ohne dass jemand sie zweimal macht.

   Die Palette ist nicht erfunden. Sie stand bis vor kurzem am Koffer im
   Hero: navy Kasten, rotes Quadrat, weisse Schrift. Als die alte
   Lackierung geloescht wurde, blieben die Werte - hier sind sie wieder.

   Navy traegt, Rot betont. Rot ist bewusst sparsam: als Marke, als
   Hervorhebung in der Ueberschrift, als Warnfarbe. Ein Rot, das
   Flaechen fuellt, liest sich als Alarm, nicht als Transport.

   Zum Rot noch eine Messung. Das Lackrot #E1252B kommt auf dem navy
   Koffer nur auf 2,5 bis 3,3:1 - unter der Grenze von 3:1, ab der eine
   Flaeche als eigenstaendig erkennbar gilt. Auf Blech in der Sonne ist
   das kein Problem, auf einem Schirm schon: der Streifen saeuft ab.
   Deshalb steht er hier eine Stufe heller auf #F5484E (4,4 / 4,0 /
   3,2:1) und die Hervorhebung in der Ueberschrift auf #FF6B6E (7,0:1).
   Das Lackrot bleibt trotzdem als --red erhalten, fuer alles, was
   wirklich die Marke selbst ist.
   ====================================================================== */

:root{
  /* Der Grundton. --purple heisst im gemeinsamen Bestand die Leitfarbe;
     der Name ist historisch, die Rolle ist das, was zaehlt. */
  --purple:#16243F;      /* navy - Leitfarbe, Knoepfe, Ueberschriften */
  --purple-2:#F5484E;    /* rot  - Markenbalken, Akzent (siehe Messung oben) */
  --red:#E1252B;         /* das Lackrot, unveraendert */
  --lavender:#D6DEEB;    /* helles Blaugrau statt Flieder */
  --heath:#2E4B7F;       /* zweite Blaustufe statt Heidegruen */
  --indigo:#1B2B4B;

  /* Die Flaechen und Schriften auf dunklem Grund. Ohne diese Zeilen
     blieben die Unterseiten lila, waehrend die Startseite navy war -
     genau so sah es aus, bevor die Werte im gemeinsamen Bestand zu
     Token wurden. */
  --auf-dunkel:#DCE6F4;
  --auf-dunkel-2:#AFC0D6;
  --akzent-hell:#FF6B6E;
  --verlauf-kopf:linear-gradient(150deg,#0E1728,#16243F 55%,#22375E);
  --verlauf-bild:linear-gradient(160deg,#16243F,#2E4B7F);
  --verlauf-dunkel:linear-gradient(158deg,#0E1728 0%,#16243F 52%,#2E4B7F 100%);
  --verlauf-anmeldung:radial-gradient(120% 80% at 70% 0%, #22375E 0%, transparent 60%),
    linear-gradient(160deg,#080E1A,#0E1728 55%,#16243F);

  --line:#DCE2EC;
  --muted:#5C6675;
  --bg:#F2F5F9;
  --paper:#FBFCFE;
  --ink:#101823;
}

/* Die Hervorhebung in der Hero-Ueberschrift. Im gemeinsamen Bestand ein
   helles Flieder auf dunklem Himmel - hier ein Rot, das auf Navy noch
   traegt. Reines #E1252B faellt auf dunkelblauem Grund ab, deshalb eine
   Stufe heller. */
.hero-copy h1 em{color:#FF6B6E}

/* Der Himmel: dieselbe Fahrt, andere Stunde. Statt Nacht-nach-
   Morgenroete ein blauer Zug von der Nacht in den klaren Tag. */
#sA .s1{stop-color:#080E1A} #sA .s2{stop-color:#152744} #sA .s3{stop-color:#2C4670}
#sB .s1{stop-color:#0E1B33} #sB .s2{stop-color:#24406B} #sB .s3{stop-color:#4A6C9E}
#sC .s1{stop-color:#16243F} #sC .s2{stop-color:#3E6597} #sC .s3{stop-color:#B9CBE2}

/* Stadt, Vorstadt und Heide im Vorbeifahren. Dieselbe Bewegung, nur
   ohne den Lilastich - der gehoert der anderen Firma. */
@keyframes tint{
  0%{--far:#22355C;--mid:#101A2E;--haze:#2C4472}
  20%{--far:#2A4066;--mid:#141F38;--haze:#35507F}
  40%{--far:#37538A;--mid:#1B2B4B;--haze:#436494}
  55%{--far:#4A6C9E;--mid:#243A5E;--haze:#557CB0}
  72%{--far:#37538A;--mid:#1B2B4B;--haze:#436494}
  88%{--far:#2A4066;--mid:#141F38;--haze:#35507F}
  100%{--far:#22355C;--mid:#101A2E;--haze:#2C4472}
}

/* Der Koffer. Im gemeinsamen Bestand hell mit lila Schrift; hier navy
   mit weisser Schrift und rotem Streifen - die Lackierung, die die
   Firma tatsaechlich gefahren hat. Weiss auf Navy sind 12,6:1, der
   Streifen bleibt als Marke stehen statt als Flaeche zu wirken. */
@keyframes bshift{
  0%,14%{fill:#16243F} 34%{fill:#1B2B4B} 52%,68%{fill:#24395F} 86%,100%{fill:#16243F}
}
.liv-name{fill:#FFFFFF}
.liv-zusatz{fill:#B9CBE2}
.liv-zeichen{fill:#F5484E}
.liv-band{fill:#F5484E}
.liv-glas{fill:#9FB4D6}
.liv-strich{fill:#F5484E;opacity:1}

/* ======================================================================
   Der eigene Auftritt von PP-Trans.

   Ab hier geht es nicht mehr nur um Farbe: Diese Regeln gehoeren zu
   marken/pptrans/site/start.html und zu sonst nichts. Sie stehen
   trotzdem hier und nicht in einer dritten Datei - eine Marke, ein
   Stylesheet, sonst muss man beim Suchen raten.

   Alle Klassen tragen pp-, damit auf einen Blick klar ist, dass sie im
   gemeinsamen Bestand nicht vorkommen und dort auch nichts anfassen.
   ====================================================================== */

/* Hero: Text rechts, Ladeliste links. Auf schmalen Schirmen wieder
   untereinander - eine stehende Schiene neben einer Ueberschrift
   braucht Breite, sonst sind es zwei Spalten mit je drei Woertern. */
/* Der LKW faehrt im unteren Drittel. Deshalb sitzt der Inhalt hier
   hoeher als in der Mitte - sonst laeuft die Beschriftung am Auflieger
   durch den Absatz, und zwar genau dann, wenn er gerade vorbeikommt.
   Ein bewegtes Bild laesst sich nicht einmal pruefen und dann vergessen:
   Es steht in jedem Moment woanders. */
.pp-hero-raster{position:relative;z-index:2;width:var(--shell);margin:0 auto;flex:1;
  display:grid;grid-template-columns:minmax(190px,15rem) 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding-bottom:clamp(4rem,12vh,8rem)}
.pp-hero-raster .pp-copy{width:auto;margin:0}

/* Die Ladeliste. Dieselben vier Angaben wie im Streifen des gemeinsamen
   Bestands, nur stehend - und mit einer Linie, die sie als Liste liest
   statt als vier einzelne Kaesten. */
.pp-liste{position:relative;padding-left:1.1rem;border-left:2px solid var(--purple-2)}
.pp-liste::before{content:"";position:absolute;z-index:-1;inset:-12% -18% -12% -30%;
  pointer-events:none;
  background:radial-gradient(60% 60% at 40% 50%, rgba(8,14,26,.86), rgba(8,14,26,0) 72%)}
.pp-liste-kopf{display:block;color:var(--purple-2);margin-bottom:.9rem;letter-spacing:.16em}
.pp-liste div{padding:.55rem 0;border-bottom:1px solid rgba(251,252,254,.16)}
.pp-liste div:last-child{border-bottom:0}
.pp-liste span{color:#9FB4D6;font-size:.72rem}
.pp-liste b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1rem;
  font-weight:600;color:#fff;margin-top:.15rem}

@media (max-width:860px){
  .pp-hero-raster{grid-template-columns:1fr;gap:1.6rem;padding:1.5rem 0 2rem}
  .pp-liste{border-left:0;border-top:2px solid var(--purple-2);padding-left:0;padding-top:1rem;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 1.2rem}
  .pp-liste-kopf{grid-column:1/-1}
  .pp-liste div{border-bottom:0}
}

/* Der Frachtbrief: eine Linie, vier Stationen darauf. Die Linie liegt
   als Pseudoelement dahinter und waechst mit der Anzahl der Stationen -
   die kommt aus der Redaktion und nicht aus dem Stylesheet. */
.pp-frachtbrief{list-style:none;margin:2.2rem 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem}
.pp-frachtbrief::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;
  background:linear-gradient(to right,var(--purple-2),var(--purple));opacity:.35}
.pp-station{border-top:0;padding-top:1.6rem;position:relative}
.pp-punkt{position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--paper);box-shadow:inset 0 0 0 3px var(--purple-2)}
.pp-station .mono{color:var(--purple-2)}

/* Auf schmalen Schirmen kippt der Frachtbrief in die Senkrechte. Eine
   waagerechte Linie ueber einer einspaltigen Liste zeigt in keine
   Richtung mehr und stiftet nur Verwirrung. */
@media (max-width:700px){
  .pp-frachtbrief{grid-template-columns:1fr;gap:1.4rem}
  .pp-frachtbrief::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:linear-gradient(to bottom,var(--purple-2),var(--purple))}
  .pp-station{padding-top:0;padding-left:2rem}
  .pp-punkt{top:4px}
}

/* Der dunkle Grund hinter dem Text.
 *
 * Im gemeinsamen Bestand sitzt er bei 26 % - passend zu linksbuendigem
 * Text ueber einer Szene, deren LKW rechts faehrt. Hier steht der Text
 * rechts, also lag der Grund daneben und die Beschriftung des LKW
 * schlug mitten durch den Absatz. Gemessen, nicht geschaetzt: Weisse
 * Schrift auf dem hellen Fahrerhaus kommt auf unter 2:1.
 *
 * Deshalb mittig und eine Spur dichter. Nicht flaechig dunkel - dann
 * waere die Szene hinter einem grauen Kasten, und die ist der Grund,
 * warum die Seite so aussieht, wie sie aussieht.
 */
.pp-copy::before{inset:-16% -22% -16% -20%;
  background:radial-gradient(60% 66% at 50% 50%,
    rgba(8,14,26,.94), rgba(8,14,26,.78) 46%, rgba(8,14,26,0) 80%)}

/* ======================================================================
   Was PP-Trans von Hanse Heide unterscheidet - jenseits der Farbe.
   ====================================================================== */

:root{
  --schrift-titel:"Barlow Condensed",Impact,sans-serif;
  --schrift-text:"Barlow","Instrument Sans",-apple-system,sans-serif;
}

/* Barlow Condensed laeuft schmaler und traegt bei gleicher Punktgroesse
   weniger. Ueberschriften duerfen deshalb groesser stehen, und die
   negative Laufweite von Bricolage schadet hier - eine schmale Schrift
   braucht Luft, sonst klebt sie zusammen. */
h1,h2,h3,h4{letter-spacing:0;font-weight:700}
.hero-copy h1{font-size:clamp(2.8rem,7.5vw,5.2rem);line-height:.98;
  text-transform:uppercase}
.hero-copy h1 em{font-style:normal}
.band h2{font-size:clamp(2rem,4.6vw,3.1rem);text-transform:uppercase;letter-spacing:.01em}

/* Harte Kanten statt weicher. Hanse Heide rundet leicht ab und arbeitet
   mit Verlaeufen; ein Transportbetrieb darf kantig sein - Paletten,
   Kisten, Bordwaende. */
.btn,.box,.kpi,.f input,.f select,.f textarea{border-radius:0}
.e-kachel{border-radius:0}

/* Der Ablauf steht auf dunklem Grund statt auf hellem Papier. Damit
   kehrt sich der Rhythmus der Seite um: Bei Hanse Heide folgt auf den
   dunklen Hero ein heller Block, hier bleibt es dunkel und der helle
   Teil kommt spaeter. Zwei Seiten mit demselben Aufbau lesen sich
   dadurch verschieden schnell. */
.pp-band{background:var(--purple);color:#E8EEF6}
.pp-band h2{color:#fff}
.pp-band .vor{color:#AFC0D6}
.pp-band .pp-station h3{color:#fff}
.pp-band .pp-station p{color:#AFC0D6}
.pp-band .pp-punkt{background:var(--purple);box-shadow:inset 0 0 0 3px var(--purple-2)}

/* Quadratische Marken statt runder - dieselbe Ueberlegung wie oben. */
.pp-punkt{border-radius:0}

/* ======================================================================
   Bewegung.

   Der Grundzustand ist SICHTBAR. Erst wenn bewegung.js laeuft, setzt es
   html.bewegt, und erst dann starten die Elemente unsichtbar.
   Andersherum waere die Seite leer, sobald das Skript klemmt - und der
   Text ist der Zweck, die Bewegung die Zugabe.

   Wer prefers-reduced-motion gesetzt hat, bekommt hier gar nichts: Das
   Skript setzt .bewegt dann nicht, und der Block unten greift nie.
   ====================================================================== */

.bewegt [data-auf]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),
             transform .7s cubic-bezier(.22,.7,.3,1)}
.bewegt [data-auf].da{opacity:1;transform:none}

/* Andere Richtungen, damit nicht alles von unten kommt. */
.bewegt [data-auf="links"]{transform:translateX(-28px)}
.bewegt [data-auf="rechts"]{transform:translateX(28px)}
.bewegt [data-auf="gross"]{transform:scale(.94);opacity:0}
.bewegt [data-auf="links"].da,
.bewegt [data-auf="rechts"].da,
.bewegt [data-auf="gross"].da{transform:none;opacity:1}

/* Der Schreibbalken beim Tippen. */
.tippt::after{content:"";display:inline-block;width:.5ch;height:1em;
  margin-left:.08em;background:var(--purple-2);vertical-align:-.12em;
  animation:balken .9s steps(2) infinite}
@keyframes balken{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .tippt::after{animation:none;opacity:0}
}

/* ---------------------------------------------------------------- Zahlen */
.pp-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.6rem 2.4rem;margin:0}
.pp-zahl b{display:block;font-family:var(--schrift-titel);font-weight:700;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;color:#fff;
  font-variant-numeric:tabular-nums}
.pp-zahl span{display:block;margin-top:.45rem;color:var(--auf-dunkel-2);
  font-size:.9rem;line-height:1.4}
.pp-zahl i{font-style:normal;color:var(--purple-2)}

/* -------------------------------------------------------------- Laufband */
.pp-band-lauf{overflow:hidden;border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);padding:.9rem 0;
  background:var(--purple)}
.pp-lauf{display:flex;gap:3rem;width:max-content;
  animation:lauf 34s linear infinite}
.pp-lauf span{font-family:var(--schrift-titel);text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.06em;color:var(--auf-dunkel-2);
  white-space:nowrap;display:flex;align-items:center;gap:3rem}
.pp-lauf span::after{content:"";width:7px;height:7px;background:var(--purple-2);
  display:inline-block}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Beim Darueberfahren anhalten: Wer lesen will, soll lesen koennen. */
.pp-band-lauf:hover .pp-lauf{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .pp-lauf{animation:none;flex-wrap:wrap;width:auto}
}

/* ------------------------------------------------------------- Leistungen */
.pp-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.pp-karte{background:var(--paper);padding:1.8rem 1.6rem;position:relative;
  overflow:hidden;transition:background .3s}
.pp-karte::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:var(--purple-2);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.7,.3,1)}
.pp-karte:hover::before{transform:scaleX(1)}
.pp-karte:hover{background:#fff}
.pp-karte .nr{font-family:var(--schrift-mono);color:var(--purple-2);
  font-size:.7rem;letter-spacing:.16em}
.pp-karte h3{margin:.7rem 0 .5rem;font-size:1.5rem;text-transform:uppercase;
  color:var(--purple)}
.pp-karte p{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0}

/* ------------------------------------------------------------------ Bild */
.pp-dunkel{background:var(--purple);color:var(--auf-dunkel);
  padding:clamp(3.5rem,9vw,6rem) 0;overflow:hidden;position:relative}
.pp-dunkel .inner{width:var(--shell);margin:0 auto;position:relative;z-index:1}
.pp-dunkel h2{color:#fff;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1;margin-bottom:1.2rem}
.pp-dunkel .vor{color:var(--auf-dunkel-2);max-width:52ch;line-height:1.7}
/* Ein grosser, langsam wandernder Schein - der einzige Farbverlauf auf
   dieser Seite, und er liegt hinter allem. */
.pp-dunkel::after{content:"";position:absolute;z-index:0;width:70vmax;height:70vmax;
  left:-15vmax;top:-25vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(245,72,78,.18),transparent 62%);
  animation:schein 26s ease-in-out infinite alternate}
@keyframes schein{to{transform:translate(28vmax,18vmax) scale(1.15)}}
@media (prefers-reduced-motion: reduce){.pp-dunkel::after{animation:none}}

/* Die Kante des Koffers.
 *
 * Anlass: Der Koffer ist bei dieser Marke navy - und der Nachthimmel
 * der Szene auch. Gemessen kam der Kasten auf 1,03:1 gegen den Himmel;
 * ab 3:1 gilt eine Flaeche als erkennbar. Uebrig blieben Schriftzug und
 * roter Streifen, die dann aussahen, als schwebten sie hinter dem LKW.
 *
 * Die Flaeche kann das nicht loesen: Der Himmel wandert von #080E1A bis
 * #B9CBE2, und keine einzige Farbe haelt gegen beide Enden Abstand.
 * Hanse Heide loest es ueber die Kante - nur ist die dort dunkel, was
 * auf einem dunklen Koffer nichts hilft.
 *
 * Also eine helle Kante: 6,7:1 gegen den Koffer. Damit traegt die FORM
 * den Kasten, unabhaengig davon, wie der Himmel gerade steht - so wie
 * eine Konturmarkierung an einem echten Auflieger.
 */
.body-kante{stroke:#9FB4D6;opacity:.75;stroke-width:3}
path.body-haus{stroke:#9FB4D6;stroke-opacity:.75;stroke-width:3}