/* Abschnitt „Über uns“ (.ue) und Fuß (.ft); Bewegung und Faden in ende.js. Das Erstgespräch (.kt) steht in abend.css.
   Faden: .ue-faden setzt die Punktlinie aus „Schon selbst mit KI angefangen?“ fort, an „Über uns“ vorbei bis an den
   oberen Rand des Erstgesprächs (dort führt abend.js ihn weiter). .ue liegt über .kt (z-index), damit der Faden über
   dem Übergang zum Abendhimmel läuft; Film und Texte liegen in .ue über dem Faden (auf dem Handy läuft er hinter dem
   Film durch, wie hinter der KI-Karte). Ohne JS: Standbild statt Film. Bewegt werden nur opacity und stroke-dashoffset. */

.ue,.ft{--gut:clamp(20px,5.2vw,84px)}

/* ---------- Über uns: Film links, Text rechts ---------- */
.ue{position:relative;z-index:3;--faden:#a3b3cb;--faden-weg:#d6b27c;--faden-abend:#5a62a8;
  padding:clamp(48px,5vw,80px) var(--gut) clamp(64px,6vw,100px);overflow-x:clip}
.ue-faden{position:absolute;left:0;top:0;width:100%;height:0;z-index:0;pointer-events:none}
.ue-faden svg{position:absolute;left:0;top:0;overflow:visible}
.ue-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:clamp(40px,5.4vw,96px);align-items:center}
.ue-kick{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#16479e}
.ue-text h2{margin:0;font-size:clamp(34px,3.3vw,50px);font-weight:600;line-height:1.08;letter-spacing:.002em;text-wrap:balance}
.ue-text p:not(.ue-kick){margin:18px 0 0;font-size:18px;line-height:1.55;color:#26344a;max-width:25.5em;text-wrap:pretty}
.ue-text .ue-lead{margin-top:22px;color:var(--ink);font-weight:500}
.ue-text .ue-lead+p{margin-top:8px}

/* Film: runde Ecken, weicher Schatten wie die Karten. Bild und Film etwas größer als der Rahmen,
   damit die dünnen schwarzen Ränder oben und unten im Zuschnitt verschwinden. */
.ue-film{order:-1;position:relative;margin:0;aspect-ratio:16/9;border-radius:20px;overflow:hidden;isolation:isolate;background:#557b77;
  box-shadow:0 34px 70px -30px rgba(15,27,45,.45),0 10px 22px -14px rgba(15,27,45,.22),0 0 0 1px rgba(15,27,45,.04)}
.ue-film img,.ue-film video{position:absolute;left:-1.6%;top:-1.6%;width:103.2%;height:103.2%;object-fit:cover;display:block;border:0}
.ue-film video{opacity:0;transition:opacity .6s ease}
.ue-film.play video{opacity:1}

/* ---------- Fuß ---------- */
.ft{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:26px var(--gut) calc(26px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:#fff;font-size:13.5px;color:var(--slate)}
.ft-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:600;font-size:16px;letter-spacing:.005em}
.ft-brand img{width:28px;height:28px;display:block}
.ft-addr{margin:0;line-height:1.5}
.ft-addr span{white-space:nowrap}
.ft-links{display:flex;gap:22px;margin-left:auto}
.ft-links a{text-decoration:none}
.ft-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ft a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------- Schmal: untereinander, Text oben; Faden rechts wie im Ablauf ---------- */
@media (max-width:899px){
  .ue{padding:36px var(--gut) 96px}
  .ue-in{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .ue-text{padding-right:58px;max-width:620px}
  .ue-kick{font-size:11px;letter-spacing:.14em;margin-bottom:10px}
  .ue-text h2{font-size:clamp(28px,8vw,36px)}
  .ue-text p:not(.ue-kick){font-size:16px;line-height:1.5}
  .ue-text .ue-lead{margin-top:16px}
  .ue-film{order:0;aspect-ratio:4/3;max-width:640px;border-radius:18px}

  .ft{flex-direction:column;align-items:flex-start;gap:12px;padding-top:24px}
  .ft-links{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .ue *{transition:none!important;animation:none!important}
}