/* ==========================================================================
   FREUNDE Messebau — Stylesheet
   Farben und Schrift nach Styleguide FREUNDE Messebau / VISPAL
   ========================================================================== */

:root{
  /* Bilder, die mehrfach vorkommen, liegen genau einmal hier. */
  --logo:      url("/bilder/03-e58435.png");
  --v-layher:  url("/bilder/04-0675ce.webp");
  --v-salomon: url("/bilder/05-17a4d6.webp");

  /* --- Styleguide --- */
  --fm-rot:        #E6000F;
  --vispal-blau:   #0052CC;
  --grau:          #2a2a2a;
  --schwarz:       #000000;
  --weiss:         #FFFFFF;

  /* --- Flächen --- */
  --papier:        #FBF9F4;   /* Seitengrund, warmes Off-White */
  --beige:         #E9E5D9;   /* Footer, warmer Sandton */
  /* Hero-Fläche und Video sind eine Fläche. Das Hero-Video traegt seinen
     Hintergrund selbst; er laeuft von oben nach unten minimal auf. Deshalb
     zwei Werte: der obere fuer die Flaeche ueber der Schnittkante, der
     untere fuer die harte Naht am Videofuss. */
  --hero-bg:       #ECDFDC;   /* entspricht der oberen Kante des Hero-Videos */
  --hero-bg-fuss:  #EDE2DF;   /* entspricht der unteren Kante des Hero-Videos */
  --rot-hauch:     #FCF1EF;
  --blau-hauch:    #EFF4FD;
  --linie:         #E6E1D4;
  --platzhalter:   #F2EFE7;
  --grau-text:     #5C584E;

  --r-klein: 5px;
  --r:       9px;
  --r-gross: 14px;
  --r-knopf: 10px;

  --sanft:  cubic-bezier(0.22, 1, 0.36, 1);
  --feder:  cubic-bezier(0.34, 1.42, 0.64, 1);
  --t-kurz: 130ms;
  --t:      260ms;
  --t-lang: 420ms;

  --accent:      var(--fm-rot);
  --box-rahmen:  transparent;
  --box-schatten: 0 1px 2px rgba(70,58,30,.05), 0 8px 24px rgba(70,58,30,.06);

  --font: "Avenir Next LT Pro", "Avenir Next", Avenir, "Segoe UI", Arial, Helvetica, sans-serif;
  --fs-label: 12px;

  --maxw: 1240px;
  --pad:  clamp(1.25rem, 5vw, 3.5rem);
  --gap:  clamp(2rem, 5vw, 4.5rem);
  --sec-y: clamp(3.25rem, 7vw, 6rem);
  --nav-h: 78px;   /* Höhe der Kapsel inkl. Abstand nach oben */
}

*,*::before,*::after{box-sizing:border-box;}

/* ==========================================================================
   PUNKT 1 · Sauberer Seitengrund
   Der Canvas (das, was beim Über-den-Rand-Scrollen sichtbar wird) bekommt
   denselben Beigeton wie Hero und Footer. Damit ist oben wie unten kein
   fremdfarbiger Streifen mehr zu sehen. overscroll-behavior unterbindet das
   Gummiband zusätzlich.
   ========================================================================== */
html{
  background:var(--hero-bg);
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}

body{
  margin:0;
  background:var(--papier);
  color:var(--schwarz);
  font-family:var(--font);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;             /* keine waagerechte Wanderung durch Randfälle */
}
main{display:block;background:var(--papier);}
img,video{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0;text-wrap:balance;}
h1{font-size:clamp(2rem,1.1rem + 3.4vw,3.85rem);line-height:1.04;letter-spacing:-0.035em;font-weight:700;}
h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem);line-height:1.07;letter-spacing:-0.028em;font-weight:700;}
h3{font-size:1.0625rem;line-height:1.3;letter-spacing:-0.008em;font-weight:600;}
p{margin:0;max-width:62ch;letter-spacing:0;}

.label{
  font-size:var(--fs-label);line-height:1;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 1.1rem;
}
.lead{font-size:clamp(1.0625rem,1rem + 0.5vw,1.35rem);line-height:1.38;letter-spacing:-0.012em;color:var(--grau);}
a{color:var(--grau);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ==========================================================================
   PUNKT 2 · Schwebende, eingerahmte Navigation
   Eine ruhige Kapsel über dem Inhalt statt der verspielten Traverse:
   Logo links, drei Menüpunkte, Kontakt als hervorgehobener Knopf.
   Weil sie frei über der Fläche liegt, entsteht unter ihr auch keine Kante.
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:clamp(10px,1.5vw,18px) var(--pad);
  pointer-events:none;
}
.nav__inner{
  pointer-events:auto;
  width:max-content;max-width:100%;margin-inline:auto;
  display:flex;align-items:center;gap:clamp(.55rem,3.4vw,3.25rem);
  height:62px;
  /* rechts mehr Luft: der Kontaktknopf darf die Rundung der Kapsel nicht schneiden */
  padding-inline:1.2rem 1rem;
  border:1px solid rgba(70,58,30,.13);
  border-radius:999px;
  background:rgba(252,251,247,.74);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 4px 20px rgba(70,58,30,.08);
  transition:background-color var(--t) var(--sanft), border-color var(--t) var(--sanft),
             box-shadow var(--t) var(--sanft);
}
.nav[data-fest] .nav__inner{
  background:rgba(252,251,247,.92);
  border-color:rgba(70,58,30,.18);
  box-shadow:0 8px 30px rgba(70,58,30,.13);
}
.nav__logo{display:flex;align-items:center;flex:0 0 auto;padding-inline:.7rem;}
.nav__logo i{display:block;height:28px;width:76px;
  /* Das Logo liegt als rote Flaeche auf Transparenz vor. Als Maske gesetzt
     bestimmt nicht die Datei die Farbe, sondern --logo-farbe. So steht auf
     der VISPAL-Seite exakt das Styleguide-Blau statt eines Filter-Blaus. */
  background-color:var(--logo-farbe,var(--fm-rot));
  -webkit-mask:var(--logo) no-repeat left center/contain;
          mask:var(--logo) no-repeat left center/contain;
  transition:background-color var(--t) var(--sanft);}
.nav__menue{display:flex;align-items:center;gap:clamp(.15rem,1.7vw,1.1rem);
  list-style:none;margin:0;padding:0;position:relative;}

/* Der Schieberegler wandert hinter den Menuepunkten. Er steht auf dem
   aktiven Eintrag, folgt dem Zeiger beim Ueberfahren und kehrt danach
   zurueck. Breite und Weg setzt das Skript, weil beides von der
   tatsaechlichen Textbreite abhaengt. */
.nav__gleiter{
  position:absolute;left:0;top:50%;z-index:0;
  width:var(--gleiter-b,0px);height:34px;
  transform:translate(var(--gleiter-x,0px),-50%);
  border-radius:999px;pointer-events:none;
  background:color-mix(in srgb, var(--gleiter-ton,var(--schwarz)) 10%, transparent);
  opacity:0;
  transition:transform 460ms var(--feder), width 460ms var(--feder),
             background-color var(--t-lang) var(--sanft), opacity var(--t) var(--sanft);
}
.nav__menue[data-gleiter] .nav__gleiter{opacity:1;}
.nav__menue li{position:relative;z-index:1;}
.nav__link{
  display:block;padding:.5rem 1.6rem;border-radius:999px;
  font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  color:var(--grau);text-decoration:none;white-space:nowrap;
  transition:color var(--t) var(--sanft), background-color var(--t) var(--sanft);
}
.nav__link:hover{color:var(--ton,var(--schwarz));background:rgba(42,42,42,.06);}
.nav__link{--ton:var(--schwarz);}
.nav__link--messebau{--ton:var(--fm-rot);}
.nav__link--vispal{--ton:var(--vispal-blau);}
.nav__link[aria-current]{color:var(--ton);background:rgba(42,42,42,.055);}
/* Sobald der Schieberegler laeuft, uebernimmt er die Flaeche —
   sonst laegen zwei Markierungen uebereinander. */
.nav__menue[data-gleiter] .nav__link[aria-current],
.nav__menue[data-gleiter] .nav__link:hover{background:transparent;}

/* Kontakt ist bewusst der einzige gefüllte Knopf in der Leiste */
/* .btn setzt min-height:52px — hier braucht es die höhere Spezifität,
   sonst schneidet der Knopf die Rundung der Kapsel an. */
.btn.nav__knopf{margin-left:clamp(.3rem,1.7vw,1.1rem);min-height:46px;padding:0 1.6rem;
  font-size:.875rem;border-radius:999px;}

/* Mobiles Menü */
.nav__burger{
  display:none;width:44px;height:44px;flex:0 0 auto;
  background:none;border:0;cursor:pointer;padding:0;
  align-items:center;justify-content:center;border-radius:999px;
}
.nav__burger span{display:block;position:relative;width:19px;height:1.5px;background:var(--grau);
  transition:background-color var(--t) var(--sanft);}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--grau);
  transition:transform var(--t) var(--sanft);}
.nav__burger span::before{top:-6px;} .nav__burger span::after{top:6px;}
.nav[data-offen] .nav__burger span{background:transparent;}
.nav[data-offen] .nav__burger span::before{transform:translateY(6px) rotate(45deg);}
.nav[data-offen] .nav__burger span::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:720px){
  .nav__inner{width:auto;}
  .nav__logo{margin-right:auto;}
  .nav__burger{display:flex;}
  .nav__navi{
    position:absolute;left:var(--pad);right:var(--pad);top:calc(100% + 8px);
    background:var(--papier);
    border:1px solid rgba(70,58,30,.14);border-radius:var(--r-gross);
    box-shadow:0 12px 34px rgba(70,58,30,.14);
    padding:.5rem 1rem 1rem;display:grid;gap:.15rem;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--t) var(--sanft), transform var(--t) var(--sanft), visibility var(--t);
  }
  .nav[data-offen] .nav__navi{opacity:1;visibility:visible;transform:none;}
  .nav__menue{flex-direction:column;align-items:stretch;gap:0;}
  .nav__gleiter{display:none;}
  .nav__menue[data-gleiter] .nav__link[aria-current]{background:rgba(42,42,42,.055);}
  .nav__link{padding:.85rem .25rem;font-size:1.0625rem;border-bottom:1px solid var(--linie);border-radius:0;}
  .btn.nav__knopf{margin:1rem 0 0;justify-self:start;min-height:52px;}
}
@media (min-width:721px){
  .nav__navi{display:flex;align-items:center;}
}

/* ==========================================================================
   Knöpfe
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:0 1.7rem;border-radius:var(--r-knopf);
  font:inherit;font-weight:600;font-size:.9375rem;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background-color var(--t) var(--sanft), color var(--t) var(--sanft),
             border-color var(--t) var(--sanft), transform var(--t) var(--feder),
             box-shadow var(--t) var(--sanft);
}
.btn--fill{background:var(--accent);color:var(--weiss);border-color:var(--accent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);}
.btn--fill:hover{transform:translateY(-2px);box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);}
.btn--outline{background:rgba(255,255,255,.6);color:var(--schwarz);border-color:var(--linie);}
.btn--outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.btn--hell{background:var(--weiss);color:var(--vispal-blau);border-color:var(--weiss);
  box-shadow:0 6px 18px rgba(0,30,80,.24);}
.btn--hell:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,30,80,.32);}
.btn:active{transform:scale(.97);transition-duration:var(--t-kurz);}

/* ==========================================================================
   Sektionen
   ========================================================================== */
.section{padding-block:var(--sec-y);position:relative;}
.section--messebau{--accent:var(--fm-rot);}
.section--vispal{--accent:var(--vispal-blau);--box-rahmen:var(--vispal-blau);--box-schatten:none;}
.section--team{--accent:var(--fm-rot);}
.section--kontakt{--accent:var(--fm-rot);}

/* PUNKT 1 + 3 · Übergang Hero → Inhalt
   Das Band überlappt oben und unten um 1px, damit zwischen Verlauf und Fläche
   keine Subpixel-Kante stehen bleibt (das war der dünne Strich unter dem Hero).
   Es ist außerdem deutlich flacher als vorher — dadurch rückt die Sektion
   "Messebau" spürbar nach oben. */
.uebergang{
  height:clamp(48px,6vw,96px);
  margin-block:-1px;
  background:linear-gradient(180deg,var(--hero-bg-fuss) 0%,var(--papier) 100%);
}
.section--anschluss{padding-block-start:clamp(.5rem,1.5vw,1.25rem);}

.section--getoent{background:var(--rot-hauch);border-radius:var(--r-gross);}
.section--blau{background:var(--blau-hauch);border-radius:var(--r-gross);}
.section--getoent,.section--blau{margin-inline:clamp(0px,2vw,28px);}

.section__head{max-width:64ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem);}
.section__head p{margin-top:1rem;color:var(--grau-text);}
/* Eine einzeilige Ueberschrift braucht die ganze Spaltenbreite. */
.section__head--breit{max-width:none;}
.section__head--breit p{max-width:70ch;}
.section__head a{color:var(--accent);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);}
.section__head a:hover{border-bottom-color:var(--accent);}

/* Diese Ueberschrift soll ausdruecklich in einer Zeile stehen. Ab 900 px
   Fensterbreite regelt das die Schriftgroesse; darunter waere einzeilig
   unleserlich klein, dort bricht sie wie jede andere Ueberschrift um. */
@media (min-width:900px){
  .h2--einzeilig{
    white-space:nowrap;
    font-size:clamp(1.35rem, 2.45vw, 2rem);
    letter-spacing:-.022em;
  }
}

.split{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:center;}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;}}

/* Animationen ohne Rahmen — der Hintergrund ist in die Videodateien eingerechnet.
   Der Holz-Film wurde beim Kodieren auf genau --papier (#FBF9F4) getoent,
   deshalb steht er ohne sichtbare Kante auf der Seitenflaeche. */
.anim{border:0;background:none;box-shadow:none;line-height:0;}
.anim video{width:100%;height:auto;background:none;}

/* ==========================================================================
   Kennzahlen
   ========================================================================== */
.kpi{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.25rem);}
.kpi li{background:var(--weiss);border-radius:var(--r);
  padding:clamp(1.1rem,2.5vw,1.6rem);box-shadow:var(--box-schatten);}
.kpi__num{display:block;font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);line-height:1;
  font-weight:700;letter-spacing:-0.04em;color:var(--accent);font-variant-numeric:tabular-nums;}
.kpi__txt{display:block;margin-top:.6rem;font-size:.9375rem;line-height:1.35;color:var(--grau-text);}

.claim{margin-top:1.75rem;border-left:3px solid var(--accent);
  padding-left:1rem;font-size:1.0625rem;line-height:1.45;}

/* ==========================================================================
   Klickbare Karten
   ========================================================================== */
.boxes{display:grid;gap:1rem;}
.boxes--zwei{grid-template-columns:1fr;}
@media (min-width:620px){.boxes--zwei{grid-template-columns:repeat(2,1fr);}}
.boxes--drei{grid-template-columns:1fr;}
@media (min-width:620px){.boxes--drei{grid-template-columns:repeat(2,1fr);}}
@media (min-width:980px){.boxes--drei{grid-template-columns:repeat(3,1fr);}}

.box{
  display:flex;flex-direction:column;gap:.4rem;
  min-height:150px;padding:1.4rem;
  background:var(--weiss);
  border:1px solid var(--box-rahmen);
  border-radius:var(--r);
  box-shadow:var(--box-schatten);
  text-decoration:none;color:var(--schwarz);
  transition:border-color var(--t) var(--sanft), transform var(--t) var(--feder),
             box-shadow var(--t) var(--sanft);
}
.box__kicker{font-size:var(--fs-label);line-height:1;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:600;color:var(--grau-text);transition:color var(--t) var(--sanft);}
.box__pfeil{margin-top:auto;font-size:1.15rem;line-height:1;color:var(--accent);
  transition:transform var(--t) var(--feder);}
.box:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 30px rgba(70,58,30,.12);}
.box:hover h3,.box:hover .box__kicker{color:var(--accent);}
.box:hover .box__pfeil{transform:translateX(6px);}
.box:active{transform:scale(.985);transition-duration:var(--t-kurz);}

.box--linie{
  background:transparent;border:1.5px solid var(--linie);box-shadow:none;
  min-height:0;flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.15rem 1.4rem;
}
.box--linie .box__pfeil{margin-top:0;margin-left:auto;}
.box--linie:hover{background:var(--weiss);border-color:var(--accent);box-shadow:var(--box-schatten);}

.gruppentitel{
  font-size:var(--fs-label);line-height:1;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--grau-text);margin:0 0 .9rem;
}

/* ==========================================================================
   PUNKT 4a · Fallknopf mit Vorschaubild
   ========================================================================== */
.fallknopf{
  display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);
  align-items:stretch;gap:0;overflow:hidden;
  background:var(--weiss);border:1px solid var(--box-rahmen);border-radius:var(--r);
  box-shadow:var(--box-schatten);text-decoration:none;color:var(--schwarz);
  transition:border-color var(--t) var(--sanft), transform var(--t) var(--feder),
             box-shadow var(--t) var(--sanft);
}
.fallknopf__bild{position:relative;overflow:hidden;background:var(--platzhalter);min-height:132px;}
.fallknopf__bild i{
  position:absolute;inset:0;display:block;
  background:var(--bild) no-repeat center/cover;
  transition:transform var(--t-lang) var(--sanft);
}
.fallknopf__bild--layher{--bild:var(--v-layher);}
.fallknopf__bild--salomon{--bild:var(--v-salomon);}
.fallknopf__text{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.15rem 1.3rem;min-width:0;
}
.fallknopf__text .box__pfeil{margin-top:auto;}
.fallknopf:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 30px rgba(70,58,30,.12);}
.fallknopf:hover .fallknopf__bild i{transform:scale(1.05);}
.fallknopf:hover h3,.fallknopf:hover .box__kicker{color:var(--accent);}
.fallknopf:hover .box__pfeil{transform:translateX(6px);}
.fallknopf:active{transform:scale(.985);transition-duration:var(--t-kurz);}

/* ==========================================================================
   PUNKT 5 · Referenzen als Logoraster
   ========================================================================== */
.logos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.75rem;
}
.logos li{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--r);
  min-height:104px;
  display:flex;align-items:center;justify-content:center;
  padding:1rem 1.25rem;
  transition:border-color var(--t) var(--sanft), transform var(--t) var(--feder),
             box-shadow var(--t) var(--sanft);
}
.logos li:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--box-schatten);}
.logos img{
  max-height:46px;max-width:100%;width:auto;object-fit:contain;
  /* Eine gemeinsame Anmutung fasst die sehr unterschiedlichen Logos zusammen */
  filter:grayscale(1) contrast(.95) opacity(.74);
  transition:filter var(--t-lang) var(--sanft);
}
.logos li:hover img{filter:none;}
.logos .wortmarke{
  font-size:1rem;font-weight:700;letter-spacing:-.012em;
  color:var(--grau-text);text-align:center;line-height:1.25;
}
.logos--vispal li{border-color:color-mix(in srgb,var(--vispal-blau) 22%,transparent);}


.referenzblock{margin-top:clamp(1.75rem,3.5vw,2.5rem);}
.referenz-titel{margin:0 0 .9rem;
  font-size:var(--fs-label);line-height:1;letter-spacing:.18em;text-transform:uppercase;font-weight:700;}
.referenz-titel span{display:inline-flex;align-items:center;gap:.6rem;}
.referenz-titel span::before{content:"";width:22px;height:3px;border-radius:3px;background:currentColor;}
.referenz-titel--rot{color:var(--fm-rot);}
.referenz-titel--blau{color:var(--vispal-blau);}

/* ==========================================================================
   Zwei Wege: Case Studies und Demo-Dashboard
   ========================================================================== */
.zweiweg{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.25rem);
  margin-top:clamp(2rem,4vw,3rem);align-items:stretch;}
@media (min-width:960px){.zweiweg{grid-template-columns:1.15fr .85fr;}}
.zweiweg__spalte{background:var(--weiss);border-radius:var(--r-gross);
  padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--box-schatten);}
.zweiweg__label,.dashboard__label{
  font-size:var(--fs-label);line-height:1;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin:0 0 .6rem;}
.zweiweg__label{color:var(--grau-text);}
.zweiweg__titel,.dashboard__titel{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.1;
  letter-spacing:-.025em;font-weight:700;margin:0 0 .6rem;}
.zweiweg__text{color:var(--grau-text);font-size:.9375rem;}
.zweiweg__spalte .box{border-color:color-mix(in srgb,var(--vispal-blau) 30%,transparent);}

/* PUNKT 4c · Kompakte Fallknoepfe. In der VISPAL-Spalte teilen sie sich den
   Platz mit der Partnerkarte darunter, deshalb fallen hier die 150px
   Mindesthoehe weg — Kicker, Titel und Pfeil stehen dicht beieinander. */
.box--kompakt{min-height:0;padding:.95rem 1.15rem;gap:.2rem;}
.box--kompakt .box__pfeil{margin-top:.45rem;font-size:1rem;}

/* PUNKT 4d · Partnerkarte. Sie ist bewusst keine Kachel im Logoraster: es ist
   die eine Partnerschaft, nicht der Anfang einer Reihe. Eine geschlossene
   Flaeche mit dem Logo mittig darauf liest sich als Entscheidung, eine
   einzelne Kachel neben Leerstellen laese sich als unfertig. Aus demselben
   Grund bleibt das Logo hier farbig — die Graustufe im Raster fasst viele
   Logos zusammen, hier steht nur eines. */
.partnerbox{
  margin-top:1rem;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  text-align:center;
  background:var(--blau-hauch);
  border:1px solid color-mix(in srgb,var(--vispal-blau) 18%,transparent);
  border-radius:var(--r);
  padding:clamp(1.15rem,2.5vw,1.5rem) clamp(1.25rem,3vw,1.75rem);
}
.partnerbox__label{
  margin:0;font-size:var(--fs-label);line-height:1;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--vispal-blau);
}
.partnerbox__logo{max-height:56px;max-width:min(100%,280px);width:auto;object-fit:contain;}
a.partnerbox{text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;}
a.partnerbox:hover,a.partnerbox:focus-visible{
  border-color:color-mix(in srgb,var(--vispal-blau) 42%,transparent);
  box-shadow:0 8px 24px rgba(0,60,160,.12);transform:translateY(-2px);}

.dashboard{
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  background:var(--vispal-blau);color:var(--weiss);border-radius:var(--r-gross);
  padding:clamp(1.6rem,3.2vw,2.4rem);box-shadow:0 16px 44px rgba(0,60,160,.28);
  position:relative;overflow:hidden;
}
.dashboard::after{content:"";position:absolute;right:-30%;top:-40%;width:80%;aspect-ratio:1;
  background:radial-gradient(circle at 30% 70%, rgba(255,255,255,.14), transparent 62%);pointer-events:none;}
.dashboard__label{color:rgba(255,255,255,.72);}
.dashboard__text{color:rgba(255,255,255,.88);font-size:.9375rem;margin-bottom:1.4rem;max-width:38ch;}
.dashboard__hinweis{margin-top:1.1rem;font-size:.8125rem;line-height:1.45;
  color:rgba(255,255,255,.74);max-width:40ch;}
.dashboard__hinweis a{color:var(--weiss);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);}
.dashboard__hinweis a:hover{border-bottom-color:var(--weiss);}

/* ==========================================================================
   Team
   ========================================================================== */
.buehne{display:grid;grid-template-columns:1fr;gap:clamp(.75rem,2vw,1.25rem);
  margin-top:clamp(2rem,4vw,3rem);}
@media (min-width:820px){
  .buehne{grid-template-columns:1.35fr 1fr 1fr;align-items:stretch;}
  .buehne__bild:nth-child(2){margin-top:clamp(1.5rem,4vw,3rem);}
  .buehne__bild:nth-child(3){margin-top:clamp(3rem,8vw,6rem);}
}
.buehne__bild{position:relative;overflow:hidden;border-radius:var(--r-gross);
  box-shadow:0 10px 34px rgba(70,58,30,.14);margin:0;}
.buehne__bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  filter:saturate(.82) contrast(1.06) brightness(1.02);
  transition:filter var(--t-lang) var(--sanft), transform var(--t-lang) var(--sanft);}
.buehne__bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg, rgba(230,0,15,.16), rgba(42,42,42,.10) 60%, rgba(234,230,217,.20));
  mix-blend-mode:soft-light;transition:opacity var(--t-lang) var(--sanft);}
.buehne__bild:hover img{filter:none;transform:scale(1.03);}
.buehne__bild:hover::after{opacity:0;}

/* ==========================================================================
   PUNKT 6 · Kontakt — Formular wächst mit der Bildschirmbreite
   Die Infospalte ist nach oben begrenzt, statt starr die Hälfte einzunehmen.
   Dadurch bleibt links kein großer Leerraum stehen und das Formular bekommt
   den ganzen Rest.
   ========================================================================== */
.kontakt-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.75rem,4vw,3.25rem);align-items:start;
}
@media (min-width:760px){
  .kontakt-grid{grid-template-columns:minmax(13rem,clamp(13rem,24vw,19rem)) minmax(0,1fr);}
}
.infoliste{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;}
.infoliste dt{
  font-size:var(--fs-label);line-height:1;letter-spacing:0.16em;text-transform:uppercase;
  font-weight:700;color:var(--grau-text);margin-bottom:.45rem;}
.infoliste dd{margin:0;}
.infoliste a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);}
.infoliste a:hover{border-bottom-color:var(--accent);}
address{font-style:normal;line-height:1.5;}

.formkarte{
  background:var(--weiss);border-radius:var(--r-gross);
  padding:clamp(1.4rem,3vw,2.4rem);
  box-shadow:0 2px 6px rgba(70,58,30,.05), 0 18px 46px rgba(70,58,30,.10);
  position:relative;overflow:hidden;width:100%;
}
.form{display:grid;gap:1.15rem;}
.form__row{display:grid;grid-template-columns:1fr;gap:1.15rem;}
@media (min-width:620px){.form__row{grid-template-columns:1fr 1fr;}}
.form p{max-width:none;}

.feld{position:relative;}
.feld input,.feld textarea{
  font:inherit;width:100%;color:var(--schwarz);background:var(--papier);
  border:1.5px solid var(--linie);border-radius:var(--r-klein);
  padding:1.5rem .95rem .6rem;min-height:60px;
  transition:border-color var(--t) var(--sanft), background-color var(--t) var(--sanft),
             box-shadow var(--t) var(--sanft);
}
.feld textarea{min-height:150px;resize:vertical;line-height:1.5;padding-top:1.7rem;}
.feld label{position:absolute;left:1rem;top:1.1rem;
  font-size:.9375rem;color:var(--grau-text);pointer-events:none;transform-origin:left top;
  transition:transform var(--t) var(--sanft), color var(--t) var(--sanft);}
.feld input:focus,.feld textarea:focus{
  outline:none;border-color:var(--accent);background:var(--weiss);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);}
.feld input:focus + label,.feld textarea:focus + label,
.feld input:not(:placeholder-shown) + label,.feld textarea:not(:placeholder-shown) + label{
  transform:translateY(-.72rem) scale(.78);color:var(--accent);}
.feld .pflicht{color:var(--accent);}

.zustimmung{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;line-height:1.45;color:var(--grau-text);}
.zustimmung input{flex:0 0 auto;width:22px;height:22px;margin-top:.15rem;accent-color:var(--accent);border-radius:6px;}
.zustimmung a{color:var(--accent);}

.danke{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;text-align:center;padding:2rem;background:var(--weiss);
  opacity:0;visibility:hidden;transform:scale(.96);
  transition:opacity var(--t) var(--sanft), transform var(--t-lang) var(--feder), visibility var(--t);}
.formkarte[data-gesendet] .danke{opacity:1;visibility:visible;transform:scale(1);}
.formkarte[data-gesendet] .form{opacity:0;transform:scale(.98);pointer-events:none;}
.form{transition:opacity var(--t) var(--sanft), transform var(--t) var(--sanft);}
.danke__haken{width:74px;height:74px;}
.danke__haken circle{fill:none;stroke:color-mix(in srgb,var(--accent) 25%,transparent);stroke-width:4;transform-origin:center;}
.danke__haken path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:48;stroke-dashoffset:48;}
.formkarte[data-gesendet] .danke__haken path{animation:haken 520ms var(--sanft) 120ms forwards;}
.formkarte[data-gesendet] .danke__haken circle{animation:kreis 420ms var(--feder) forwards;}
@keyframes haken{to{stroke-dashoffset:0;}}
@keyframes kreis{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ==========================================================================
   PUNKT 8 · Footer
   Er trägt denselben Beigeton wie Hero und Canvas — damit ist auch am unteren
   Seitenende kein fremdfarbiger Streifen mehr möglich.
   ========================================================================== */
.footer{background:var(--beige);border-top:1px solid rgba(70,58,30,.09);padding-block:clamp(2.5rem,5vw,4rem) 1.75rem;}
.footer__oben{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:start;}
@media (min-width:760px){.footer__oben{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));}}
.footer__logo{display:block;height:38px;width:103px;margin-bottom:1rem;
  background-color:var(--logo-farbe,var(--fm-rot));
  -webkit-mask:var(--logo) no-repeat left center/contain;
          mask:var(--logo) no-repeat left center/contain;
  transition:background-color var(--t) var(--sanft);}
.footer__claim{color:var(--grau-text);font-size:.9375rem;max-width:34ch;}
.footer h2{font-size:var(--fs-label);line-height:1;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--grau-text);margin-bottom:1rem;}
.footer__liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.9375rem;}
.footer__liste a{color:var(--grau);text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--t) var(--sanft),border-color var(--t) var(--sanft);}
.footer__liste a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.footer__unten{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;
  border-top:1px solid rgba(70,58,30,.09);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;
  font-size:.8125rem;color:var(--grau-text);
}
.footer__rechtlich{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;margin-left:auto;list-style:none;padding:0;}
.footer__rechtlich a{color:var(--grau-text);text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--t) var(--sanft),border-color var(--t) var(--sanft);}
.footer__rechtlich a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* ==========================================================================
   PUNKT 7 · Popup für Case Studies und Referenzen
   FEHLERBEHOBEN: display:flex galt vorher auch für das geschlossene <dialog>
   und überschrieb dessen display:none. Deshalb hing das zuletzt geöffnete
   Popup unten am Seitenende. Jetzt gilt die Fläche nur noch mit [open].
   ========================================================================== */
.lb{
  --accent:var(--fm-rot);
  border:0;padding:0;margin:auto;
  width:min(1100px,94vw);max-width:none;max-height:92dvh;
  background:var(--weiss);border-radius:var(--r-gross);
  color:var(--schwarz);overflow:hidden;
  box-shadow:0 30px 80px rgba(40,32,16,.28);
}
.lb:not([open]){display:none;}
.lb[open]{display:flex;flex-direction:column;animation:lb-auf var(--t-lang) var(--sanft);}
.lb[data-marke="vispal"]{--accent:var(--vispal-blau);}
.lb::backdrop{background:rgba(48,40,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
@keyframes lb-auf{from{opacity:0;transform:scale(.97) translateY(10px);}to{opacity:1;transform:none;}}

.lb__kopf{display:flex;align-items:center;gap:.9rem;padding:1rem 1.15rem;
  border-bottom:1px solid var(--linie);flex:0 0 auto;flex-wrap:wrap;}
.lb__titel{font-weight:700;font-size:.9375rem;margin:0;max-width:none;letter-spacing:-.01em;}
.lb__zaehler{font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--grau-text);margin:0 auto 0 0;max-width:none;}
.lb__pdf{
  display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;
  font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--weiss));
  border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:var(--r-knopf);padding:.5rem .8rem;white-space:nowrap;
  transition:background-color var(--t) var(--sanft), border-color var(--t) var(--sanft),
             opacity var(--t) var(--sanft);
}
.lb__pdf svg{width:16px;height:16px;flex:0 0 auto;}
.lb__pdf:hover{background:color-mix(in srgb,var(--accent) 15%,var(--weiss));
  border-color:var(--accent);}
.lb__pdf[disabled]{opacity:.6;cursor:progress;}
@media (max-width:520px){ .lb__pdf span{display:none;} .lb__pdf{padding:.5rem .6rem;} }

.lb__zu{font:inherit;font-size:1.6rem;line-height:1;cursor:pointer;background:none;border:0;
  color:var(--grau-text);padding:.15rem .45rem;border-radius:var(--r-knopf);
  transition:color var(--t) var(--sanft), background-color var(--t) var(--sanft);}
.lb__zu:hover{color:var(--schwarz);background:var(--platzhalter);}
.lb__seiten{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background:var(--platzhalter);padding:.9rem;display:grid;gap:.9rem;}
.lb__seiten img{width:100%;height:auto;border-radius:var(--r-klein);background:var(--weiss);
  box-shadow:0 2px 8px rgba(70,58,30,.12);}

/* Kurzer Hinweis statt eines blockierenden alert() */
.hinweis{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);
  z-index:200;max-width:min(440px,92vw);
  background:var(--grau);color:var(--weiss);
  border-radius:var(--r-knopf);padding:.85rem 1.15rem;font-size:.9375rem;
  box-shadow:0 12px 34px rgba(40,32,16,.3);
  opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--sanft), transform var(--t) var(--sanft), visibility var(--t);
}
.hinweis[data-an]{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* ==========================================================================
   Unterseiten und Rechtstexte
   ========================================================================== */
.page-head{padding-block:clamp(7.5rem,13vw,10rem) clamp(1.5rem,3vw,2.5rem);}
.page-head .lead{margin-top:1.35rem;max-width:52ch;}

.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:620px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (min-width:980px){.cards--3{grid-template-columns:repeat(3,1fr);}}
.card{padding:1.5rem;background:var(--weiss);
  border:1px solid var(--box-rahmen);border-radius:var(--r);box-shadow:var(--box-schatten);}
.card p{font-size:.9375rem;color:var(--grau-text);margin-top:.45rem;}
.card__num{display:block;font-size:var(--fs-label);line-height:1;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:.75rem;}
.cta-band{padding-block:var(--sec-y);}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;}

.fall{display:block;padding:1.5rem;background:var(--weiss);
  border:1px solid var(--box-rahmen);border-radius:var(--r);
  box-shadow:var(--box-schatten);text-decoration:none;color:var(--schwarz);
  transition:border-color var(--t) var(--sanft),transform var(--t) var(--feder),box-shadow var(--t) var(--sanft);}
.fall p{font-size:.9375rem;color:var(--grau-text);margin-top:.45rem;}
.fall__pfeil{display:inline-block;margin-top:1rem;font-size:1.15rem;color:var(--accent);
  transition:transform var(--t) var(--feder);}
.fall:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 30px rgba(70,58,30,.12);}
.fall:hover h3{color:var(--accent);}
.fall:hover .fall__pfeil{transform:translateX(6px);}
.fall:active{transform:scale(.985);transition-duration:var(--t-kurz);}

/* Rechtstexte */
.rechtstext{max-width:74ch;padding-bottom:clamp(3rem,6vw,5rem);}
.rechtstext p{max-width:none;margin-bottom:1rem;color:var(--grau-text);font-size:.9688rem;line-height:1.65;}
.rechtstext h2{font-size:clamp(1.3rem,1.05rem + .8vw,1.65rem);margin:2.5rem 0 1rem;letter-spacing:-.02em;}
.rechtstext h3{font-size:1.125rem;margin:2rem 0 .75rem;font-weight:700;letter-spacing:-.012em;}
.rechtstext h4{font-size:.9375rem;margin:1.4rem 0 .5rem;font-weight:700;color:var(--accent);
  letter-spacing:.02em;}
.rechtstext > *:first-child{margin-top:0;}
.rechtstext .rt__abc{padding-left:1.6rem;text-indent:-1.6rem;}
.rechtstext .rt__stand{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grau-text);margin-bottom:2rem;}
.rechtstext .rt__karte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(1.25rem,2.5vw,1.75rem);margin-bottom:1.75rem;
}
.rechtstext .rt__karte p{margin-bottom:.35rem;color:var(--schwarz);}
.rechtstext a{color:var(--accent);}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:var(--hero-bg);
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;
}
.hero__inner{
  position:relative;z-index:2;flex:0 0 auto;
  /* Oben: die Kapsel schwebt frei, darunter braucht die Zeile spuerbar Luft.
     Der Mindestwert traegt dabei die schmalen Fenster — 6vw sind bei 380 px
     Breite nur 23 px und die Ueberschrift klebte am Menue.
     Unten: so wenig wie moeglich, die Animation soll direkt anschliessen. */
  padding-block:calc(var(--nav-h) + clamp(6rem, 3.9rem + 5.8vw, 10.5rem)) clamp(.4rem,1vw,1.1rem);
  text-align:center;
}

/* PUNKT 3 · Die H1 darf breiter werden, bleibt aber innerhalb der freien
   Mitte des Videos. Maximum und Minimum sind hier ausdrücklich gesetzt:
   das Video legt seine Motive links (ab ~8 % Breite) und rechts (bis ~93 %)
   in der unteren Bildhälfte ab — die Überschrift bleibt darüber und schmaler
   als dieser Korridor. */
.hero h1{
  --h1-max: 58rem;    /* Maximum: greift ab ~1180 px Fensterbreite */
  --h1-min: 17rem;    /* Minimum: darunter wird nicht weiter eingeengt */
  width:clamp(var(--h1-min), 86vw, var(--h1-max));
  max-width:100%;
  margin-inline:auto;
}
@media (min-width:1500px){ .hero h1{--h1-max:64rem;} }
.hero .lead{margin:1.35rem auto 0;max-width:44ch;color:#3E3A31;}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem;}

@media (max-width:899px){
  /* Ohne feste Schirmhoehe steht die Animation direkt unter dem Text,
     statt vom Flexraum nach unten gedrueckt zu werden. */
  .hero{min-height:0;}
  .hero__media{flex:0 0 auto;}
}

/* Die beiden Filme stehen unten im Hero, bündig zur Unterkante. */
.hero__media{
  flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;overflow:hidden;
  padding-inline:var(--pad);
}

/* Zwei getrennte Filme statt eines Breitbilds: links entsteht der Stand,
   rechts steht er fertig und misst. Sie stehen auf jeder Breite neben-
   einander und werden auf schmalen Schirmen einfach kleiner — untereinander
   sollen sie nie liegen.

   Der Hintergrund beider Filme ist vor dem Kodieren freigestellt und auf
   Reinweiss gelegt. Zusammen mit mix-blend-mode:multiply verschwindet er
   vollstaendig: Weiss mal Untergrund ergibt genau den Untergrund.

   Das ist der Grund, warum hier nicht einfach die Seitenfarbe in den Film
   kodiert ist. Ein angeglichener Farbwert haelt nicht: Browser und
   Bildschirm verwalten Videofarben anders als CSS-Farben, weshalb der
   Kasten trotz rechnerisch gleicher Werte sichtbar blieb. Als Multiplikator
   ist der Film davon unabhaengig — er passt auf jeden Untergrund. */
.hero__paar{
  width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.4rem,2vw,1.5rem);align-items:end;
}
.hero__film{margin:0;line-height:0;}
.hero__film video{display:block;width:100%;height:auto;mix-blend-mode:multiply;}

@media (min-width:900px){
  /* Der Textblock — Zeile, Ueberschrift, Vorspann und Knoepfe — steht mittig
     im Bild. Die beiden Filme sitzen unten in den Ecken und lassen die Mitte
     frei; deshalb liegen sie als eigene Ebene am unteren Rand, statt eine
     Rasterreihe zu belegen, die den Text nach oben druecken wuerde. */
  .hero{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100svh;}
  .hero__inner{
    grid-row:1;
    display:flex;flex-direction:column;justify-content:center;
    /* Der Block steht mittig zwischen Menuekapsel und dem unteren Streifen,
       den die Filme fuellen. Der Streifen wird hier nur reserviert, nicht
       gemessen: Die Filme liegen als eigene Ebene darunter und duerfen
       darueber hinauswachsen, ohne den Text zu verschieben oder ihn auf
       flachen Fenstern abzuschneiden. */
    padding-block:calc(var(--nav-h) + 3rem) clamp(150px,min(22vw,46vh),350px);
  }
  .hero__media{
    position:absolute;left:0;right:0;bottom:0;
    padding-inline:clamp(.5rem,1vw,1.25rem);
    padding-bottom:clamp(1.25rem,4vh,2.75rem);
  }
  .hero__paar{
    grid-template-columns:auto auto;
    justify-content:space-between;
    align-items:end;
    gap:clamp(.4rem,1vw,1rem);
  }
  /* So gross, wie zwei Filme nebeneinander ins Fenster passen. Die Breite
     ist die Grenze, nicht die Hoehe — nach oben duerfen sie dem Textblock
     nahekommen und ihn auch ueberlappen. */
  .hero__film{width:clamp(280px,min(48vw,95vh),840px);}
}

/* Flaches Fenster: der Textblock wird kompakter, damit er neben den Filmen
   genug Luft behaelt. Die Zentrierung bleibt — die Filme liegen als eigene
   Ebene unten und drueckten den Text frueher nach oben. */
@media (min-width:900px) and (max-height:820px){
  .hero h1{--h1-max:50rem;font-size:clamp(1.9rem,1rem + 2.4vw,3rem);}
  .hero .lead{margin-top:1rem;font-size:1.0625rem;}
  .cta{margin-top:1.25rem;}
  .cta .btn{min-height:46px;}
}

/* ==========================================================================
   Sanftes Einblenden beim Scrollen
   ========================================================================== */
.auf{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-lang) var(--sanft), transform var(--t-lang) var(--sanft);}
.auf.da{opacity:1;transform:none;}

/* ---- Einzeldatei-Fassung: Ansichten ---- */



/* ==========================================================================
   VISPAL-Seite: die ganze Ansicht traegt Blau
   Kontaktknopf, Logo in Kopf und Fuss und alle Akzente wechseln die Farbe,
   sobald man auf die VISPAL-Seite geht. Das Logo liegt als Maske vor
   (siehe .nav__logo i), deshalb ist das hier exakt das Styleguide-Blau
   und kein umgefaerbtes Rot.
   ========================================================================== */
#seite-vispal{
  --accent:var(--vispal-blau);
  --logo-farbe:var(--vispal-blau);
}
#seite-vispal .nav__link--vispal[aria-current]{color:var(--vispal-blau);}

/* ==========================================================================
   Einsatzgebiete auf der VISPAL-Seite
   Bild oben, Text darunter — die Bilder sind der eigentliche Inhalt der
   Karte, deshalb laufen sie ohne Rahmen bis an die Kante.
   ========================================================================== */
.einsaetze{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.5vw,1.75rem);
}
@media (min-width:760px){.einsaetze{grid-template-columns:repeat(2,minmax(0,1fr));}}
.einsatz{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--weiss);border-radius:var(--r-gross);
  border:1px solid color-mix(in srgb,var(--vispal-blau) 16%,transparent);
  box-shadow:0 2px 6px rgba(70,58,30,.05), 0 14px 38px rgba(0,40,110,.07);
  transition:transform var(--t) var(--feder), box-shadow var(--t) var(--sanft),
             border-color var(--t) var(--sanft);
}
.einsatz img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  background:var(--hero-bg);
  border-bottom:1px solid color-mix(in srgb,var(--vispal-blau) 12%,transparent);
}
.einsatz__text{padding:clamp(1.15rem,2.5vw,1.65rem);}
.einsatz__text p:last-child{margin-top:.5rem;font-size:.9375rem;color:var(--grau-text);}
.einsatz__kicker{
  font-size:var(--fs-label);line-height:1;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--vispal-blau);margin:0 0 .55rem;
}
.einsatz:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--vispal-blau) 34%,transparent);
  box-shadow:0 18px 44px rgba(0,40,110,.13);}
.einsatz__hinweis{
  margin-top:clamp(1.5rem,3vw,2.25rem);max-width:56ch;
  font-size:.9375rem;color:var(--grau-text);
  border-left:3px solid var(--vispal-blau);padding-left:1rem;
}

/* Der Kontaktabschnitt der VISPAL-Seite ist derselbe wie auf der Startseite,
   nur in Blau. --accent zieht Knopf, Feldrahmen, Haken und Links mit. */
.section--kontakt-vispal{--accent:var(--vispal-blau);}
.section--kontakt-vispal .formkarte{box-shadow:0 2px 6px rgba(70,58,30,.05), 0 18px 46px rgba(0,40,110,.12);}

/* ==========================================================================
   Barrierefreiheit
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .auf{transform:none;transition:opacity 200ms ease;}
  .box:hover,.btn:hover,.fall:hover,.fallknopf:hover,.logos li:hover,.einsatz:hover{transform:none;}
  .nav__gleiter{transition:opacity 200ms ease;}
  .buehne__bild:hover img,.fallknopf:hover .fallknopf__bild i{transform:none;}
  .lb[open]{animation:none;}
  .formkarte[data-gesendet] .danke__haken path{animation:none;stroke-dashoffset:0;}
  .formkarte[data-gesendet] .danke__haken circle{animation:none;}
}
@media (prefers-reduced-transparency:reduce){
  .nav[data-fest],.nav__navi{background:var(--weiss);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .lb::backdrop{background:rgba(40,34,22,.9);backdrop-filter:none;}
}
@media (prefers-contrast:more){
  .box,.kpi li,.card,.logos li{border:1px solid var(--grau);}
}

/* ==========================================================================
   Startseite: Abschnittsfarbe in der Menueleiste
   Frueher wanderte der aktive Menuepunkt beim Scrollen auf 'Messebau' bzw.
   'VISPAL' — das las sich, als waere man schon auf der Unterseite. Aktiv
   bleibt jetzt 'Startseite'. Nur die Farbe folgt dem Abschnitt, in dem man
   gerade steht. Das Skript setzt dafuer data-bereich auf die Ansicht.

   Der Zeiger hat weiter Vorrang: .nav__link:hover faerbt den ueberfahrenen
   Eintrag ueber dessen eigenes --ton (Messebau rot, VISPAL blau). Beide
   Zustaende liegen auf getrennten Selektoren und stoeren sich nicht.
   ========================================================================== */
#seite-start[data-bereich="messebau"] .nav__link[aria-current]{--ton:var(--fm-rot);}
#seite-start[data-bereich="vispal"]   .nav__link[aria-current]{--ton:var(--vispal-blau);}
/* Im VISPAL-Teil ziehen Kontaktknopf und Logo mit — aber nur in der Leiste.
   Der Rest der Startseite behaelt die Akzente seiner eigenen Abschnitte. */
#seite-start[data-bereich="vispal"] .nav{
  --accent:var(--vispal-blau);
  --logo-farbe:var(--vispal-blau);
}

/* ==========================================================================
   Messebau-Seite: Kopf mit Kennzahlen daneben
   Ueberschrift links, die Kennzahlen rechts oben daneben. Darunter laeuft
   die Aufbau-Animation ueber die volle Breite.
   ========================================================================== */
.kopf-split{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:start;}
@media (min-width:1000px){
  .kopf-split{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;}
}
.kopf-split .lead{margin-top:1.35rem;max-width:52ch;}

/* Die vier Boxen stehen unter dem Kopf ueber die volle Breite — damit oben
   rechts Platz fuer die Animation bleibt und sie beim Aufruf der Seite
   vollstaendig im Bild steht. */
.kopf-boxen{margin-top:clamp(2rem,4.5vw,3.25rem);}
@media (min-width:900px){
  .kpi.kopf-boxen{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* Die grosse Animation sitzt im Seitenkopf rechts neben der Ueberschrift. */
.anim--gross{border-radius:var(--r-gross);overflow:hidden;}
.anim--gross video{display:block;width:100%;height:auto;}
/* Der Messebau-Film bringt einen hellgrauen Hintergrund mit, der auf dem
   warmen Papierton eine sichtbare Kante haette. Gerundet und mit derselben
   Flaeche hinterlegt steht er sauber auf der Seite. Die VISPAL-Animation
   ist dagegen auf genau --papier kodiert und braucht keinen Rahmen. */
.anim--rahmen{background:#C8C8C8;box-shadow:0 10px 34px rgba(70,58,30,.12);}

/* Ein Knopf direkt im Abschnittskopf — dort steht die Referenzmappe jetzt,
   gleich neben den beiden Case Studies statt ganz unten auf der Seite.
   .section__head a ist fuer Textlinks gedacht: Schrift im Akzentton, dazu
   eine Unterkante. Auf einem gefuellten Knopf ergaebe das rote Schrift auf
   rotem Grund. Deshalb bekommt der Knopf hier sein eigenes Aussehen zurueck. */
.section__head .cta-row{margin-top:1.5rem;}
.section__head .cta-row .btn{border:1.5px solid transparent;}
.section__head .cta-row .btn--fill{color:var(--weiss);border-color:var(--accent);}
.section__head .cta-row .btn--outline{color:var(--schwarz);border-color:var(--linie);}
.section__head .cta-row .btn--outline:hover{color:var(--accent);border-color:var(--accent);}

/* ==========================================================================
   VISPAL: die vier Kacheln unter dem Kopf
   Eine Spalte auf dem Handy, zwei auf dem Tablet, vier nebeneinander,
   sobald die volle Breite dafuer reicht.
   ========================================================================== */
.cards--vier{grid-template-columns:1fr;}
@media (min-width:620px){.cards--vier{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1040px){.cards--vier{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* ==========================================================================
   Kontakt: Umschalter zwischen Formular und Terminbuchung (VISPAL)
   ========================================================================== */
.umschalter{
  display:inline-flex;gap:.2rem;padding:.28rem;margin-bottom:clamp(1rem,2vw,1.5rem);
  border:1px solid var(--linie);border-radius:999px;background:rgba(255,255,255,.7);
}
.umschalter__knopf{
  appearance:none;border:0;cursor:pointer;font:inherit;
  font-size:.875rem;font-weight:600;letter-spacing:-.005em;
  padding:.6rem 1.35rem;border-radius:999px;
  color:var(--grau-text);background:transparent;
  transition:background-color var(--t) var(--sanft), color var(--t) var(--sanft),
             box-shadow var(--t) var(--sanft);
}
.umschalter__knopf:hover{color:var(--accent);}
.umschalter__knopf[aria-selected="true"]{
  background:var(--weiss);color:var(--accent);
  box-shadow:0 1px 2px rgba(70,58,30,.06), 0 6px 16px rgba(70,58,30,.09);
}
.umschalter__knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.kontaktweg[hidden]{display:none;}

/* Der weisse Rahmen umschliesst das Calendly-Widget genau: kein Innen-
   abstand, kein weiterer Inhalt und keine Zeilenhoehe, die darunter einen
   weissen Streifen stehen liesse. Der Hinweis steht deshalb ausserhalb.
   line-height:0 ist noetig, weil das Widget ein Inline-Block ist — sonst
   bliebe unter ihm der Platz fuer die Schriftunterlaenge stehen. */
.terminrahmen{
  background:var(--weiss);border-radius:var(--r-gross);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--vispal-blau) 16%,transparent);
  box-shadow:0 2px 6px rgba(70,58,30,.05), 0 18px 46px rgba(0,40,110,.12);
  line-height:0;font-size:0;
}
.terminrahmen .calendly-inline-widget{display:block;width:100%;min-width:0 !important;}
.terminrahmen iframe{display:block;}
@media (max-width:520px){
  .terminrahmen .calendly-inline-widget{height:820px;}
}
.terminrahmen__fuss{
  margin-top:.9rem;font-size:.875rem;color:var(--grau-text);
}
.terminrahmen__fuss a{color:var(--accent);}

/* ==========================================================================
   Variante ohne Formular: E-Mail und Telefon an derselben Stelle
   ========================================================================== */
.kontaktwege{
  background:var(--weiss);border-radius:var(--r-gross);
  border:1px solid var(--box-rahmen);box-shadow:var(--box-schatten);
  padding:clamp(1.5rem,3.5vw,2.5rem);
}
.kontaktwege h3{font-size:1.35rem;}
.kontaktwege__text{margin-top:.6rem;color:var(--grau-text);max-width:46ch;}
.kontaktwege .cta-row{margin-top:1.5rem;}
.kontaktwege__zeit{margin-top:1.25rem;font-size:.875rem;color:var(--grau-text);}

/* ==========================================================================
   Einwilligung fuer externe Inhalte
   ========================================================================== */
.einwilligung{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  padding:clamp(.75rem,2vw,1.25rem);
  transform:translateY(110%); transition:transform 320ms var(--sanft,ease);
  pointer-events:none;
}
.einwilligung[data-offen]{ transform:translateY(0); pointer-events:auto; }
.einwilligung__inhalt{
  max-width:44rem; margin-inline:auto;
  background:var(--weiss,#fff); color:var(--schwarz,#111);
  border:1px solid var(--box-rahmen,rgba(42,42,42,.16));
  border-radius:var(--r,.6rem);
  box-shadow:0 18px 50px rgba(40,34,22,.22);
  padding:clamp(1.1rem,3vw,1.6rem);
}
.einwilligung__titel{
  margin:0 0 .55rem; font-size:1.0625rem; line-height:1.3;
}
.einwilligung__text{
  margin:0 0 1rem; font-size:.9375rem; line-height:1.6;
  color:var(--grau-text,#4a4a4a);
}
.einwilligung__knoepfe{ display:flex; flex-wrap:wrap; gap:.6rem; }
/* Ablehnen muss genauso leicht erreichbar sein wie Zustimmen. */
.einwilligung__knoepfe .btn{ flex:1 1 14rem; justify-content:center; }
.einwilligung__fuss{
  margin:.9rem 0 0; font-size:.8125rem; line-height:1.5;
  color:var(--grau-text,#4a4a4a);
}

.gesperrt{
  display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
  padding:clamp(1.1rem,3vw,1.75rem);
  background:var(--sand-hell,#f7f3ec);
  border:1px dashed var(--box-rahmen,rgba(42,42,42,.28));
  border-radius:var(--r,.6rem);
}
.gesperrt__titel{ margin:0; font-weight:600; }
.gesperrt__text{ margin:0; font-size:.9375rem; line-height:1.6; max-width:46ch;
  color:var(--grau-text,#4a4a4a); }
.gesperrt__fuss{ margin:.2rem 0 0; font-size:.8125rem; }

@media (prefers-reduced-motion:reduce){
  .einwilligung{ transition:none; }
}

/* Auf schmalen Geräten legte sich der Kasten über die beiden
   Handlungsziele im Kopfbereich. Er sitzt jetzt als flache Leiste
   ganz unten und laesst den oberen Bildbereich frei. */
@media (max-width: 30rem){
  .einwilligung{ padding:.5rem; }
  .einwilligung__inhalt{
    padding:.9rem 1rem;
    max-height:38vh;
    border-radius:var(--r,.6rem) var(--r,.6rem) 0 0;
  }
  .einwilligung__titel{ font-size:.9375rem; margin-bottom:.35rem; }
  /* Der Text ist die Hoehe. Er bekommt einen eigenen Scrollbereich,
     damit Titel und Knoepfe immer sichtbar bleiben und der Kasten die
     Handlungsziele im Kopfbereich nicht mehr verdeckt. */
  .einwilligung__text{
    font-size:.8125rem; line-height:1.5; margin-bottom:.7rem;
    max-height:6.5em; overflow-y:auto;
  }
  .einwilligung__knoepfe{ gap:.45rem; }
  .einwilligung__knoepfe .btn{ flex:1 1 100%; padding-block:.7rem; font-size:.75rem; }
  .einwilligung__fuss{ margin-top:.65rem; font-size:.75rem; }
}

/* ==========================================================================
   Karriereseite
   ========================================================================== */
.karr-kopf{
  padding-block:clamp(3.5rem,9vh,6rem) clamp(2.5rem,6vh,4rem);
  text-align:center; background:var(--weiss);
}
.karr-kopf .wrap{ max-width:52rem; }
.karr-marke{
  display:inline-block; margin:0 0 1.25rem;
  padding:.45rem 1.1rem; border-radius:999px;
  background:var(--blau-hauch); color:var(--vispal-blau);
  font-size:.8125rem; font-weight:700; letter-spacing:.04em;
}
.karr-kopf h1{ margin:0 0 1rem; }
.karr-blau{ color:var(--vispal-blau); }
.karr-kopf .lead{ margin:0 auto 2rem; max-width:38rem; }
.btn--blau{ background:var(--vispal-blau); color:var(--weiss); border-color:var(--vispal-blau); }
.btn--blau:hover{ opacity:.9; }
.label--blau{ color:var(--vispal-blau); }

.stellen{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
}
.stelle{
  background:var(--weiss); border:1px solid var(--box-rahmen,var(--linie));
  border-radius:var(--r-gross); padding:clamp(1.4rem,3vw,2rem);
  box-shadow:var(--box-schatten,0 6px 22px rgba(70,58,30,.06));
}
.stelle h3{ margin:.85rem 0 .6rem; font-size:1.25rem; }
.stelle p{ margin:0; color:var(--grau-text); font-size:.9375rem; line-height:1.65; }
.stelle__marken{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .25rem; }
.marke{
  display:inline-block; padding:.3rem .7rem; border-radius:999px;
  background:var(--blau-hauch); color:var(--vispal-blau);
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.marke--aktiv{ background:#E8F5EC; color:#1B7F3B; }

.bewerbung{
  margin-top:clamp(2rem,5vw,3.25rem);
  padding:clamp(1.75rem,4vw,3rem);
  border-radius:var(--r-gross);
  background:var(--vispal-blau); color:var(--weiss);
  text-align:center;
}
.bewerbung__label{
  margin:0 0 .6rem; font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; opacity:.75;
}
.bewerbung h2{ margin:0 0 .9rem; color:var(--weiss); }
.bewerbung__text{ margin:0 auto 1.5rem; max-width:44ch; opacity:.92; line-height:1.7; }
.bewerbung__mail{
  display:inline-block; padding:.9rem 1.6rem; border-radius:var(--r-knopf);
  background:var(--weiss); color:var(--vispal-blau);
  font-weight:700; font-size:1.0625rem; text-decoration:none;
  transition:transform var(--t) var(--feder);
}
.bewerbung__mail:hover{ transform:translateY(-2px); }
.bewerbung__fuss{ margin:1.4rem auto 0; max-width:46ch; font-size:.875rem; opacity:.8; }

/* ==========================================================================
   Linktree-Seiten (/hub/ und /erik/)
   Eigenstaendige Seiten mit dunklem Grund -- sie werden aus Profilen
   heraus aufgerufen, wo dunkle Oberflaechen der Normalfall sind.
   ========================================================================== */
body.lt{
  margin:0; min-height:100dvh;
  background:#242424; color:#fff;
  font-family:var(--font,"Avenir Next LT Pro","Avenir Next",Avenir,Arial,sans-serif);
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(1.5rem,5vh,3.5rem) 1rem;
}
/* main traegt im Haupt-Stylesheet einen hellen Grund -- hier nicht. */
.lt__karte{ width:100%; max-width:30rem; text-align:center; background:none; }

.lt__avatar{
  width:96px; height:96px; margin:0 auto 1.25rem;
  border-radius:50%; overflow:hidden;
  background:var(--vispal-blau); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.lt__avatar img{ width:100%; height:100%; object-fit:cover; background:#fff; }
.lt__initialen{ font-size:2rem; font-weight:700; letter-spacing:.02em; }

.lt__name{ margin:0 0 .4rem; font-size:1.5rem; line-height:1.25; color:#fff !important; }
.lt__rolle{
  margin:0 0 2rem; font-size:.8125rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:#9a9a9a;
}

.lt__liste{ display:flex; flex-direction:column; gap:.65rem; }
.lt__gruppe{
  margin:1.1rem 0 .15rem; text-align:left;
  font-size:.6875rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#8a8a8a;
}
.lt__knopf{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.25rem; border-radius:12px;
  background:#2f3340; border:1px solid #3b4050;
  color:#fff; text-decoration:none; font-size:1.0625rem;
  transition:background var(--t,260ms) ease, transform var(--t,260ms) ease;
}
.lt__knopf:hover{ background:#3a3f4e; transform:translateY(-1px); }
.lt__knopf--haupt{
  margin-top:.5rem;
  background:var(--vispal-blau); border-color:var(--vispal-blau);
}
.lt__knopf--haupt:hover{ background:#0047b3; }
.lt__icon{ flex:0 0 1.5rem; text-align:center; opacity:.85; }
.lt__knopf--offen{ opacity:.45; cursor:default; }
.lt__offen{
  margin-left:auto; font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:#c9a227;
}

.lt__fuss{ margin-top:2.5rem; font-size:.8125rem; color:#8a8a8a; }
.lt__fuss p{ margin:.4rem 0; }
.lt__fuss a{ color:#8a8a8a; }
.lt__fuss a:hover{ color:#fff; }