/*
  Die Seite Ueber uns.

  Farben und Schriften aus dem Bestand: Poppins fuer den Text, Lora kursiv
  fuer Bildunterschriften (wie "Lieferung" auf der Startseite), das Gruen der
  Marke und der dunkle Grund der Management-Seite. Die Karte ist die eine
  laute Stelle; alles andere bleibt ruhig darum herum.
*/

.uu {
  --uu-gruen: #82ae46;
  --uu-gruen-text: #5e8a2a;   /* auf Weiss lesbar (4.6:1) */
  --uu-hell: #b7d986;
  --uu-grund: #1e2a23;
  --uu-grund-2: #23312a;
  --uu-text: #1d2520;
  --uu-leise: #5f6b62;
  --uu-linie: #e3e8df;
  --uu-flaeche: #f5f8f2;
}

.uu h2 {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 600;
  color: var(--uu-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

/* ================================================= Einleitung */

.uu-einleitung {
  padding: 6em 0 5em;
  background: #fff;
}

.uu-einleitung__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.uu-einleitung h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 24px;
  max-width: 16ch;
}

.uu-einleitung p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--uu-leise);
  max-width: 58ch;
  margin: 0 0 16px;
}

.uu-einleitung p strong { color: var(--uu-text); font-weight: 600; }

.uu-werte {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
}

.uu-werte li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--uu-leise);
  line-height: 1.6;
}

.uu-werte li strong { display: block; color: var(--uu-text); font-weight: 600; }

.uu-werte svg {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--uu-gruen);
}

/* Das Fotopaar: die Kueche, fuer die wir liefern, und die Ware, die
   ankommt. Das zweite Bild ueberlappt das erste - eine Lieferung, die in
   der Kueche landet. */
.uu-fotos {
  position: relative;
  margin: 0;
  padding-bottom: 18%;
}

.uu-fotos__gross {
  display: block;
  width: 86%;
  height: auto;   /* sonst gilt das height-Attribut und das Seitenverhaeltnis faellt weg */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.uu-fotos__klein {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 8px solid #fff;
  box-shadow: 0 18px 40px rgba(20, 30, 24, 0.18);
}

.uu-fotos figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44%;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--uu-leise);
}

/* ================================================= Herkunft */

.herkunft {
  background: var(--uu-grund);
  color: #e7efe2;
  padding: 6em 0;
  overflow: hidden;
}

.herkunft__kopf {
  max-width: 62ch;
  margin-bottom: 40px;
}

.herkunft h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 16px;
}

.herkunft__kopf p {
  font-size: 16px;
  line-height: 1.75;
  color: #b9c7b3;
  margin: 0;
}

.herkunft__kopf p strong { color: #fff; font-weight: 600; }

.herkunft__buehne {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 32px;
  align-items: center;
}

/* Zwei Schichten: das Land als ruhendes Bild, darueber die Boegen. */
.herkunft__karte { margin: 0; position: relative; }
.herkunft__grund { display: block; width: 100%; height: auto; }
.herkunft__netz { position: absolute; inset: 0; width: 100%; height: 100%; }


.herkunft__bogen {
  fill: none;
  stroke: #9cc85e;          /* Rueckfall; der Verlauf je Bogen steht inline */
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke 0.2s ease, stroke-width 0.2s ease, opacity 0.2s ease;
}

.herkunft__ursprung { fill: var(--uu-hell); stroke: var(--uu-grund); stroke-width: 2; }
.herkunft__fracht { fill: #eaf6d6; }

.herkunft__region {
  fill: rgba(130, 174, 70, 0.14);
  stroke: rgba(183, 217, 134, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}

.herkunft__punkt { fill: #fff; stroke: var(--uu-gruen); stroke-width: 3; }
.herkunft__puls { fill: var(--uu-gruen); transform-origin: center; animation: herkunft-puls 2.4s ease-out infinite; }
.herkunft--pause .herkunft__puls { animation-play-state: paused; }

.herkunft__wienname {
  fill: #fff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
}

@keyframes herkunft-puls {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(4.2); opacity: 0; }
}

/* Einmal zeichnen, wenn die Karte in den Blick kommt. Ohne JavaScript
   bleibt diese Klasse weg und die Boegen stehen einfach da. */
.herkunft--bereit .herkunft__bogen { stroke-dashoffset: 1; }
.herkunft--bereit .herkunft__fracht { opacity: 0; }

.herkunft--zeichnen .herkunft__bogen {
  animation: herkunft-zeichnen 1.4s cubic-bezier(0.6, 0, 0.2, 1) forwards;
  animation-delay: var(--verzug, 0s);
}

@keyframes herkunft-zeichnen { to { stroke-dashoffset: 0; } }

/* Die Kennzahlen neben der Karte: wer hinter dem Netz steht. Die Zahl steht
   vorn und gross, weil sie die Aussage ist; wofuer sie steht, darunter. */
.herkunft__zahlen {
  margin: 0;
  display: grid;
  gap: 0;
}

.herkunft__zahl {
  display: grid;
  /* Breit genug fuer "1.000+" in der grossen Zahl - ch waere hier in der
     kleinen Schrift des Absatzes gerechnet und viel zu schmal. */
  grid-template-columns: 9.5rem 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(183, 217, 134, 0.16);
}

.herkunft__zahl:first-child { border-top: 1px solid rgba(183, 217, 134, 0.16); }

.herkunft__zahl dd {
  order: -1;
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.herkunft__zahl dt { margin: 0; font-weight: 400; }

.herkunft__was {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--uu-hell);
  line-height: 1.3;
}

.herkunft__wozu {
  display: block;
  font-size: 13px;
  color: #9fb095;
  line-height: 1.45;
  margin-top: 2px;
}

/* ================================================= Schnittstellen */

.uu-it {
  padding: 6em 0;
  background: var(--uu-flaeche);
}

.uu-it__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

.uu-it h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 20px; max-width: 18ch; }

.uu-it p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--uu-leise);
  max-width: 56ch;
  margin: 0 0 16px;
}

.uu-it a { color: var(--uu-gruen-text); font-weight: 500; }

.uu-vorteile {
  list-style: none;
  margin: 8px 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 56ch;
}

.uu-vorteile li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--uu-leise);
}

.uu-vorteile li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--uu-gruen);
}

.uu-vorteile strong { color: var(--uu-text); font-weight: 600; }

/* Das Schaubild: zwei Systeme, dazwischen die Leitung. Links steht, was der
   Kunde schickt, rechts, was zurueckkommt. */
.leitung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin: 0;
}

.leitung__system {
  background: #fff;
  color: var(--uu-text);
  border: 1px solid var(--uu-linie);
  border-radius: 10px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(20, 30, 24, 0.06);
}

.leitung__system--danisman {
  background: var(--uu-grund-2);
  border-color: var(--uu-grund-2);
  color: #fff;
}

.leitung__system svg { width: 30px; height: 30px; color: var(--uu-gruen); margin-bottom: 10px; }
.leitung__system--danisman svg { color: var(--uu-hell); }

.leitung__name { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.leitung__art  { display: block; font-size: 13px; color: var(--uu-leise); margin-top: 4px; line-height: 1.4; }
.leitung__system--danisman .leitung__art { color: var(--uu-hell); }

.leitung__weg {
  list-style: none;
  margin: 0;
  padding: 0 6px;
  display: grid;
  gap: 12px;
}

.leitung__weg li {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: var(--uu-text);
  text-align: center;
  padding-bottom: 8px;
}

/* Die Pfeillinie unter jedem Datensatz */
.leitung__weg li::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--uu-gruen), var(--uu-gruen));
}

.leitung__weg li::before {
  content: "";
  position: absolute;
  bottom: -4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.leitung__weg .hin::before   { right: 0;  border-left: 8px solid var(--uu-gruen); }
.leitung__weg .zurueck::before { left: 0; border-right: 8px solid var(--uu-gruen); }

.leitung__unterschrift {
  grid-column: 1 / -1;
  margin-top: 16px;
  text-align: center;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--uu-leise);
}

/* ================================================= schmal */

/* Karte und Tabelle brauchen nebeneinander mehr Platz als der Rest - sie
   stapeln sich schon unter 1200px, sonst ragt die Tabelle ueber den Rand. */
@media (max-width: 1199.98px) {
  .herkunft__buehne { grid-template-columns: 1fr; gap: 36px; }
  .herkunft__zahlen { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 32px; }
}

@media (max-width: 991.98px) {
  .uu-einleitung__raster,
  .uu-it__raster { grid-template-columns: 1fr; gap: 44px; }
  .uu-einleitung h2, .uu-it h2 { max-width: none; }
}

@media (max-width: 575.98px) {
  .uu-einleitung, .herkunft, .uu-it { padding: 4em 0; }
  .herkunft__wienname { font-size: 34px; }
  .leitung { grid-template-columns: 1fr; gap: 14px; }
  .leitung__weg { padding: 4px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .herkunft__fracht { display: none; }
  .herkunft__puls { animation: none; opacity: 0; }
  .herkunft--bereit .herkunft__bogen { stroke-dashoffset: 0; }
  .herkunft--zeichnen .herkunft__bogen { animation: none; }
}


/* ================================================= Lieferweg */
/*
  Drei Karten, drei kleine Bilder - und eine Animation, die sie der Reihe
  nach abspielt: erst tippt jemand eine Bestellung ins Telefon, dann fallen
  Tomate, Apfel und Orange in die Kiste, dann faehrt der Wagen vor. Die
  Karte, deren Bild gerade laeuft, ist hervorgehoben.

  Ein Umlauf dauert 9 s, jeder Schritt hat 3 s. Alle Bewegungen teilen sich
  dieselbe Laenge und werden je Schritt um 3 s verschoben (animation-delay);
  so bleiben sie im Takt, ohne dass ein Skript mitzaehlt.

  Ruhelage - ohne JavaScript, bei "Bewegung reduzieren" und zwischen den
  eigenen drei Sekunden: jedes Bild vollstaendig, der Wagen steht, die Kiste
  ist voll. Bewegt wird nur transform und opacity.
*/

.lieferweg {
  padding: 5em 0 4.5em;
  background: var(--uu-flaeche);
}

.lieferweg h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 28px;
}

.lieferweg__schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.lieferweg__schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 18px 20px 22px;
  border: 1px solid var(--uu-linie);
  border-radius: 18px;
  background: #fff;
  color: var(--uu-leise);
  line-height: 1.6;
  font-size: 15px;
}

.lieferweg__schritte li::before {
  content: counter(schritt);
  position: absolute;
  top: 28px;
  left: 30px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--uu-grund-2);
  color: var(--uu-hell);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lieferweg__schritte strong {
  display: block;
  color: var(--uu-text);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 2px;
}

.lw-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--uu-flaeche);
}
.lw-bild svg { width: 150px; height: auto; overflow: visible; }

/* Die Verbindung zur naechsten Karte - sie fuellt sich, wenn es weitergeht. */
.lieferweg__schritte li:not(:last-child) .lw-bild::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -50px;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--uu-gruen);
  transform-origin: left center;
}

/* ---------------------------------------------- Zeichnung */

.lw-telefon      { fill: #fff; stroke: var(--uu-grund-2); stroke-width: 3; }
.lw-kerbe        { fill: var(--uu-grund-2); }
.lw-zeile        { fill: #dfe7d8; }
.lw-knopf        { fill: var(--uu-gruen); }
.lw-haken circle { fill: var(--uu-gruen); }
.lw-haken path   { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.lw-kiste        { fill: #c8935c; stroke: #a8743f; stroke-width: 1.5; stroke-linejoin: round; }
.lw-latten       { fill: none; stroke: #a8743f; stroke-width: 1.5; }
.lw-tomate       { fill: #d9553f; }
.lw-apfel        { fill: var(--uu-gruen); }
.lw-orange       { fill: #f0a03a; }
.lw-stiel        { fill: none; stroke: #5b7a2e; stroke-width: 2; stroke-linecap: round; }

.lw-strasse      { fill: #34443a; }
.lw-koffer       { fill: #fff; stroke: #cfd8ca; stroke-width: 1.5; }
.lw-streifen     { fill: var(--uu-gruen); }
.lw-kabine       { fill: var(--uu-gruen); }
.lw-scheibe      { fill: #e3f2cf; }
.lw-rad          { fill: #1e2a23; }
.lw-nabe         { fill: var(--uu-hell); }
.lw-fahrtwind    { fill: none; stroke: #b9c6b1; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }

.lw-haken, .lw-obst, .lw-wagen { transform-box: fill-box; transform-origin: center; }

/* ---------------------------------------------- Bewegung */

.lieferweg--an .lieferweg__schritte li,
.lieferweg--an .lieferweg__schritte li::before,
.lieferweg--an .lw-bild::after,
.lieferweg--an .lw-zeile,
.lieferweg--an .lw-haken,
.lieferweg--an .lw-obst,
.lieferweg--an .lw-wagen,
.lieferweg--an .lw-fahrtwind {
  animation-duration: 9s;
  animation-iteration-count: infinite;
  /* Kein "backwards": waehrend der Verschiebung zu Beginn sollen Schritt 2
     und 3 in Ruhelage stehen, nicht im ersten Bild ihrer Bewegung. */
}

/* Karte und Nummer: hervorgehoben in den eigenen drei Sekunden. */
.lieferweg--an .lieferweg__schritte li      { animation-name: lw-karte; }
.lieferweg--an .lieferweg__schritte li::before { animation-name: lw-nummer; }
.lieferweg--an .lw-bild::after              { animation-name: lw-verbindung; transform: scaleX(0); }
.lieferweg--an .lieferweg__schritte li:nth-child(2) .lw-bild::after { animation-name: lw-verbindung-2; }

/* Die Verschiebung je Schritt - fuer alles, was darin liegt. */
.lieferweg--an .lieferweg__schritte li:nth-child(2),
.lieferweg--an .lieferweg__schritte li:nth-child(2)::before,
.lieferweg--an .lieferweg__schritte li:nth-child(2) .lw-bild::after,
.lieferweg--an .lieferweg__schritte li:nth-child(2) .lw-obst { animation-delay: 3s; }
.lieferweg--an .lieferweg__schritte li:nth-child(3),
.lieferweg--an .lieferweg__schritte li:nth-child(3)::before,
.lieferweg--an .lieferweg__schritte li:nth-child(3) .lw-wagen,
.lieferweg--an .lieferweg__schritte li:nth-child(3) .lw-fahrtwind { animation-delay: 6s; }

@keyframes lw-karte {
  0%, 31%  { border-color: #b7d986; box-shadow: 0 18px 36px -24px rgba(30, 42, 35, .45); color: var(--uu-text); }
  35%, 100% { border-color: var(--uu-linie); box-shadow: none; color: var(--uu-leise); }
}
@keyframes lw-nummer {
  0%, 31%  { background: var(--uu-gruen); color: #fff; transform: scale(1.12); }
  35%, 100% { background: var(--uu-grund-2); color: var(--uu-hell); transform: scale(1); }
}
/*
  Die Linien fuellen sich am Ende ihres Schritts und leeren sich, wenn der
  Umlauf bei Schritt 1 neu beginnt. Die zweite laeuft 3 s spaeter an; damit
  sie zum Neubeginn mit leer wird, ist sie im letzten Drittel ihres eigenen
  Umlaufs schon wieder leer.
*/
@keyframes lw-verbindung {
  0%, 24%  { transform: scaleX(0); }
  33%, 100% { transform: scaleX(1); }
}
@keyframes lw-verbindung-2 {
  0%, 24%  { transform: scaleX(0); }
  33%, 66% { transform: scaleX(1); }
  67%, 100% { transform: scaleX(0); }
}

/* 1 - Bestellung tippen: drei Zeilen, dann der Haken. */
.lieferweg--an .lw-zeile--1 { animation-name: lw-zeile-1; }
.lieferweg--an .lw-zeile--2 { animation-name: lw-zeile-2; }
.lieferweg--an .lw-zeile--3 { animation-name: lw-zeile-3; }
.lieferweg--an .lw-haken    { animation-name: lw-haken; }

@keyframes lw-zeile-1 { 0%, 3%  { opacity: 0; } 6%, 100%  { opacity: 1; } }
@keyframes lw-zeile-2 { 0%, 8%  { opacity: 0; } 11%, 100% { opacity: 1; } }
@keyframes lw-zeile-3 { 0%, 13% { opacity: 0; } 16%, 100% { opacity: 1; } }
@keyframes lw-haken {
  0%, 18% { opacity: 0; transform: scale(0); }
  22%     { opacity: 1; transform: scale(1.18); }
  25%, 100% { opacity: 1; transform: scale(1); }
}

/* 2 - Zusammenstellen: das Obst faellt nacheinander in die Kiste. */
.lieferweg--an .lw-obst--1 { animation-name: lw-fallen-1; }
.lieferweg--an .lw-obst--2 { animation-name: lw-fallen-2; }
.lieferweg--an .lw-obst--3 { animation-name: lw-fallen-3; }

@keyframes lw-fallen-1 {
  0%, 2%  { opacity: 0; transform: translateY(-46px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  9%      { opacity: 1; transform: translateY(0); }
  11%     { transform: translateY(-4px); }
  13%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes lw-fallen-2 {
  0%, 9%  { opacity: 0; transform: translateY(-46px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  16%     { opacity: 1; transform: translateY(0); }
  18%     { transform: translateY(-4px); }
  20%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes lw-fallen-3 {
  0%, 16% { opacity: 0; transform: translateY(-46px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  23%     { opacity: 1; transform: translateY(0); }
  25%     { transform: translateY(-4px); }
  27%, 100% { opacity: 1; transform: translateY(0); }
}

/* 3 - Liefern: der Wagen faehrt vor und haelt. */
.lieferweg--an .lw-wagen     { animation-name: lw-vorfahren; }
.lieferweg--an .lw-fahrtwind { animation-name: lw-wind; }

@keyframes lw-vorfahren {
  0%, 2%  { opacity: 0; transform: translateX(-70px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  5%      { opacity: 1; }
  22%     { transform: translateX(0); }
  24%     { transform: translateX(-2px); }
  26%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes lw-wind {
  0%, 4%  { opacity: 0; }
  8%, 17% { opacity: 1; }
  23%, 100% { opacity: 0; }
}

/* Laeuft nur, solange man den Abschnitt sieht. */
.lieferweg--pause *,
.lieferweg--pause .lieferweg__schritte li,
.lieferweg--pause .lieferweg__schritte li::before,
.lieferweg--pause .lw-bild::after { animation-play-state: paused !important; }

@media (max-width: 767.98px) {
  .lieferweg__schritte { grid-template-columns: 1fr; gap: 16px; }
  .lieferweg { padding: 3.5em 0; }
  /* Untereinander braucht es keine Verbindung - die Reihenfolge ist klar. */
  .lieferweg__schritte li:not(:last-child) .lw-bild::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lieferweg--an *,
  .lieferweg--an .lieferweg__schritte li,
  .lieferweg--an .lieferweg__schritte li::before,
  .lieferweg--an .lw-bild::after { animation: none !important; }
}