/* =========================================================================
   Rose / ATTEC Website  ·  Stylesheet  ·  v64, 21.10.2026

   Neu aufgesetzt nach den Seiten, die Jonas (KULU) im Figma-File
   tioFdwn8RhC2bCEMhMxCwQ gestaltet hat, Seitenreihe vom 19./20.08.2026.
   Die Bausteine folgen seiner Formensprache, nicht mehr dem alten Wireframe:

     - Sektionskoepfe stehen zentriert, Kicker darueber
     - Kennzahlen stehen frei nebeneinander, ohne Kartenflaeche
     - Leistungen sind breite Zeilen mit Nummer, rundem Pfeil und Bild
     - Zitate sitzen in einer dunklen Sprechblase mit Nase
     - Bilder haben grosse Radien, Pillen ragen darueber

   Farben  = Figma-Collection "Color"
   Typo    = Figma-Textstile, Geist, lokal eingebunden
   Bewegung= gemessen an averint.webflow.io: 500 ms, outQuad
   ========================================================================= */

@font-face{
  font-family:'Geist';
  src:url('fonts/geist-variable.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --dunkel:#191818;
  --text:#2D2C2C;
  --grau:#5D5C5B;
  --weiss:#FFFFFF;
  --bg:#EEECE6;
  --creme:#F4F3EF;
  --linie:rgba(25,24,24,.14);
  --linie-fein:rgba(25,24,24,.08);
  --auf-dunkel:rgba(255,255,255,.72);
  --auf-dunkel-leise:rgba(255,255,255,.55);

  --f:'Geist',system-ui,-apple-system,sans-serif;
  --h1:clamp(38px,4.4vw,60px);   --h1-lh:1.16;
  --h2:clamp(30px,3.4vw,45px);   --h2-lh:1.22;
  --h3:clamp(25px,2.6vw,32px);   --h3-lh:1.31;
  --h4:clamp(21px,1.9vw,25px);   --h4-lh:1.40;
  --h5:clamp(19px,1.6vw,22px);   --h5-lh:1.45;
  --h6:clamp(18px,1.4vw,20px);   --h6-lh:1.50;
  --eng:-.02em;

  --rand:clamp(20px,8.33vw,160px);
  /* Die Grenze gilt fuer den Aussenkasten, das Polster zaehlt mit. Stand hier
     1600, blieben bei 1920 nur 1280 fuer den Inhalt und der Rand wuchs auf 320.
     Jonas' Frames und das Template averint arbeiten mit 160 Rand und 1600
     Inhalt. Deshalb kommt der Rand jetzt oben drauf. */
  --maxw:calc(1600px + 2 * var(--rand));
  /* Abstand zwischen zwei Bereichen. Im Entwurf liegen zwischen den Bloecken
     rund 155 von 1920, gemessen ueber die ganze Startseite und Über uns. Zwei
     Bereiche steuern je die Haelfte bei, also 78. Vorher standen hier 150 je
     Seite, macht 300 zwischen zwei Bereichen, also fast das Doppelte. */
  --luft:clamp(46px,4.06vw,78px);

  --e:cubic-bezier(.25,.46,.45,.94);
  --e-weich:cubic-bezier(.33,1,.68,1);
  --r:20px;          /* Standardradius fuer Bilder und Flaechen */
  --r-klein:12px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:110px;}
body{
  font-family:var(--f);font-size:16px;line-height:1.625;letter-spacing:.005em;
  background:var(--weiss);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand);}
section{padding:var(--luft) 0;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

:focus-visible{outline:2px solid var(--dunkel);outline-offset:3px;border-radius:4px;}
header :focus-visible,footer :focus-visible,.hero :focus-visible,.subhero :focus-visible,
.dunkel :focus-visible,.film :focus-visible,.blase :focus-visible{outline-color:var(--weiss);}

.skip{
  position:fixed;top:0;left:50%;transform:translate(-50%,-120%);z-index:300;
  background:var(--weiss);color:var(--text);padding:12px 22px;
  border-radius:0 0 var(--r-klein) var(--r-klein);font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s var(--e);
}
.skip:focus{transform:translate(-50%,0);}

/* ---------- Typo ---------- */
h1,.h1{font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:-.04em;font-weight:500;}
h2,.h2{font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:-.03em;font-weight:500;}
h3,.h3{font-size:var(--h3);line-height:var(--h3-lh);letter-spacing:var(--eng);font-weight:500;}
.h4{font-size:var(--h4);line-height:var(--h4-lh);letter-spacing:var(--eng);font-weight:500;}
.h5{font-size:var(--h5);line-height:var(--h5-lh);letter-spacing:var(--eng);font-weight:500;}
.h6{font-size:var(--h6);line-height:var(--h6-lh);letter-spacing:var(--eng);font-weight:500;}
.lead{font-size:16px;line-height:26px;color:var(--grau);}

/* Kicker: kleine Zeile mit Stern, steht ueber jeder Ueberschrift */
.kicker{
  font-weight:600;font-size:16px;line-height:1.6;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:9px;color:var(--text);
}
.kicker svg{width:13px;height:13px;flex:none;}

/* ---------- Sektionskopf: bei Jonas fast immer zentriert ---------- */
.kopf{max-width:900px;margin:0 auto clamp(40px,5vw,70px);text-align:center;}
.kopf .lead{margin-top:18px;max-width:620px;margin-left:auto;margin-right:auto;}
.kopf--links{margin-left:0;text-align:left;}
.kopf--links .lead{margin-left:0;}

/* Pille mitten im Ueberschriftentext, wie im Zaehlerblock */
.inline-pille{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.35em;height:.68em;border-radius:100px;background:var(--dunkel);
  vertical-align:middle;margin:0 .16em;
}
.inline-pille svg{width:.42em;height:.42em;}

/* ---------- Flaechen ---------- */
.creme{background:var(--creme);}
.beige{background:var(--bg);}
.dunkel{background:var(--dunkel);color:var(--weiss);}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel .h4,.dunkel .h5,.dunkel .kicker{color:var(--weiss);}
.dunkel .lead,.dunkel p{color:var(--auf-dunkel);}

/* ---------- Knoepfe ----------
   Dunkle Pille mit weissem Kreis rechts, so wie im Entwurf. */
.knopf{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--dunkel);color:var(--weiss);border-radius:100px;border:none;cursor:pointer;
  padding:7px 7px 7px 22px;font-family:var(--f);font-weight:500;font-size:16px;line-height:34px;
  white-space:nowrap;transition:transform var(--e) .3s,box-shadow .3s var(--e),background .3s var(--e);
}
.knopf .kreis{
  width:34px;height:34px;border-radius:50%;background:var(--weiss);flex:none;
  display:grid;place-items:center;transition:transform .4s var(--e);
}
.knopf .kreis svg{width:14px;height:14px;}
.knopf .kreis svg path{stroke:var(--dunkel);}
.knopf:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(25,24,24,.22);}
.knopf:hover .kreis{transform:rotate(45deg);}
.knopf--hell{background:var(--weiss);color:var(--text);}
.knopf--hell .kreis{background:var(--dunkel);}
.knopf--hell .kreis svg path{stroke:var(--weiss);}
.knopf--rand{background:transparent;color:var(--text);border:1px solid var(--linie);padding-left:22px;}
.knopf--rand .kreis{background:var(--dunkel);}
.knopf--rand .kreis svg path{stroke:var(--weiss);}

.textlink{
  font-weight:500;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;transition:text-underline-offset .3s var(--e);
}
.textlink:hover{text-underline-offset:7px;}
.knopfreihe{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.knopfreihe--mitte{justify-content:center;}

/* Runder Pfeilknopf, steht an den Leistungszeilen */
.pfeilkreis{
  width:46px;height:46px;border-radius:50%;flex:none;
  border:1px solid var(--linie);background:transparent;cursor:pointer;
  display:grid;place-items:center;
  transition:background .3s var(--e),border-color .3s var(--e),transform .4s var(--e);
}
.pfeilkreis svg{width:16px;height:16px;}
.pfeilkreis svg path{stroke:var(--text);transition:stroke .3s var(--e);}
.pfeilkreis:hover{border-color:var(--dunkel);}
.ist-offen .pfeilkreis,.pfeilkreis--voll{background:var(--dunkel);border-color:var(--dunkel);}
.ist-offen .pfeilkreis svg path,.pfeilkreis--voll svg path{stroke:var(--weiss);}
.ist-offen .pfeilkreis{transform:rotate(45deg);}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;
  transition:background .35s var(--e),padding .35s var(--e),backdrop-filter .35s var(--e);
}
header.fest{background:rgba(25,24,24,.9);backdrop-filter:blur(14px);padding:12px 0;}
.navzeile{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;}
.marke{display:flex;align-items:center;gap:10px;}
.marke svg{width:22px;height:22px;transition:transform .5s var(--e);}
.marke:hover svg{transform:rotate(-8deg);}
.marke span{font-size:28px;line-height:1;letter-spacing:-.03em;color:var(--weiss);}
.navlinks{display:flex;gap:clamp(18px,2.6vw,52px);}
.navlinks > a,.hut > a,.hut > button{
  font-size:var(--h6);line-height:30px;letter-spacing:var(--eng);
  color:var(--weiss);opacity:.85;transition:opacity .3s var(--e);position:relative;
}
.navlinks > a:hover,.hut > a:hover,.hut > button:hover,.navlinks a[aria-current="page"]{opacity:1;}
.navlinks > a::after,.hut > a::after,.hut > button::after{
  content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e);
}
.navlinks > a:hover::after,.hut > a:hover::after,.hut > button:hover::after,.navlinks a[aria-current="page"]::after{transform:scaleX(1);}
.navmeta{font-weight:500;font-size:16px;letter-spacing:-.03em;color:var(--weiss);opacity:.7;}
.navrechts{display:flex;align-items:center;gap:22px;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.burger span{display:block;width:26px;height:2px;background:var(--weiss);margin:5px 0;transition:.3s var(--e);}
.burger.auf span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.auf span:nth-child(2){opacity:0;}
.burger.auf span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nur-mobil{display:none;}

/* Aufklappmenues unter "Leistungen" und "Über uns" */
.hut{position:static;}
.hut > a,.hut > button{display:inline-flex;align-items:center;gap:7px;}
/* Der Knopf soll aussehen wie die Nachbarn im Kopf, nicht wie ein Knopf. */
/* color kommt aus der gemeinsamen Regel oben und ist im dunklen Kopf
   weiss. Ein color:inherit hier wuerde sie ueberschreiben, der Knopf
   waere dann schwarz auf dunklem Grund und damit unsichtbar. */
/* font:inherit waere zu grob, es zieht auch die Zeilenhoehe mit und der
   Knopf waere vier Pixel niedriger als die Links daneben. */
.hut > button{background:none;border:none;padding:0;margin:0;cursor:pointer;
  /* Nur die Schriftart und das Gewicht erben. Groesse und Laufweite kommen
     aus der gemeinsamen Regel oben, sonst faellt der Knopf auf die
     Standardwerte des Browsers zurueck und ist kleiner als die Links. */
  font-family:inherit;font-weight:inherit;}
.chev{width:11px;height:7px;flex:none;transition:transform .3s var(--e);opacity:.8;}
.hut:hover .chev,.hut:focus-within .chev{transform:rotate(180deg);}
/* Das Menue haengt an .navzeile, und die ist ein .wrap. Ein absolutes left:0
   misst ab der aeusseren Kante, also mitsamt Polster, und das Menue lief
   dadurch bis an den Fensterrand. Mit dem Rand als Wert steht es genau auf der
   Kante der Menueleiste, links auf dem Logo und rechts auf dem Knopf. */
.menue{
  position:absolute;top:100%;left:var(--rand);right:var(--rand);margin-top:16px;z-index:6;
  background:var(--creme);border:1px solid var(--linie-fein);border-radius:var(--r);
  padding:30px 32px 32px;box-shadow:0 30px 70px rgba(25,24,24,.28);color:var(--text);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--e),transform .25s var(--e),visibility .25s;
}
.hut:hover .menue,.hut:focus-within .menue{opacity:1;visibility:visible;transform:none;}
/* Zwei Textspalten und das Bild. Vorher waren es drei Textspalten, die
   dritte war Unternehmen und steckt jetzt im eigenen Menue. */
/* Zwei Textspalten in fester Breite, das Bild sitzt rechtsbuendig. Der Platz,
   den die frühere dritte Spalte frei gemacht hat, bleibt als Luft dazwischen. */
.menue-raster{display:grid;grid-template-columns:minmax(0,400px) minmax(0,400px) minmax(0,1fr);gap:28px;align-items:start;}
.menue-h{
  display:block;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grau);margin:6px 0 10px 14px;
}
.navlinks .menue-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:var(--r-klein);font-weight:500;font-size:15px;line-height:1.45;
  letter-spacing:0;color:var(--text);opacity:1;transition:background .2s var(--e);
}
.navlinks .menue-link::after{display:none;}
.navlinks .menue-link small{display:block;font-weight:400;font-size:12.5px;line-height:18px;color:var(--grau);}
.navlinks .menue-link .arr{flex:none;opacity:.55;transition:transform .25s var(--e),opacity .25s var(--e);}
.navlinks .menue-link:hover{background:var(--bg);}
.navlinks .menue-link:hover .arr{transform:translateX(4px);opacity:1;}
/* Das Bild fuellt den Platz, den die dritte Textspalte frei gemacht hat.
   Ohne festes Seitenverhaeltnis zieht height:100% das ganze Menue in die
   Laenge, sobald die Spalte breiter wird. */
.menue-foto{
  border-radius:var(--r-klein);overflow:hidden;
  /* feste Groesse, sonst zieht das Bild das ganze Menue in die Laenge */
  aspect-ratio:4/3;height:auto;min-height:0;
  width:min(100%,360px);margin-left:auto;
}
.menue-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e);}
.menue-foto:hover img{transform:scale(1.05);}
.menue-cta{
  margin-top:26px;background:var(--dunkel);border-radius:var(--r-klein);
  padding:20px 14px 20px 28px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.menue-cta p{color:var(--weiss);margin:0;}

/* ---------- Banner ---------- */
.hero{
  position:relative;background:var(--dunkel);color:var(--weiss);
  /* svh statt vh: auf dem Handy zaehlt vh die Adressleiste mit, der Banner
     wird dadurch hoeher als der sichtbare Bereich und die Marke rutscht
     unter die Kante. */
  min-height:min(1000px,100vh);min-height:min(1000px,100svh);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(128px,15.3vw,294px) 0 0;overflow:hidden;
}
.hero-bild{position:absolute;inset:0;overflow:hidden;}
.hero-bild img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.08) translate(-1.2%,1%);}}
.hero-schleier{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(25,24,24,.7) 0%,rgba(25,24,24,.2) 26%),
    linear-gradient(100deg,rgba(25,24,24,.9) 0%,rgba(25,24,24,.78) 30%,rgba(25,24,24,.45) 55%,rgba(25,24,24,.18) 78%),
    linear-gradient(0deg,rgba(25,24,24,.7) 0%,rgba(25,24,24,0) 38%);
}
/* Zentrierte Banner brauchen eine gleichmaessige Abdunklung, weil der Text
   ueber die ganze Breite laeuft und nicht nur links steht. */
.subhero--mitte .hero-schleier,.subhero:not(.subhero--mitte) .hero-schleier{
  background:
    linear-gradient(180deg,rgba(25,24,24,.72) 0%,rgba(25,24,24,.3) 30%),
    linear-gradient(100deg,rgba(25,24,24,.88) 0%,rgba(25,24,24,.7) 42%,rgba(25,24,24,.5) 70%,rgba(25,24,24,.4) 100%),
    linear-gradient(0deg,rgba(25,24,24,.6) 0%,rgba(25,24,24,0) 40%);
}
.hero .wrap{position:relative;z-index:1;}
/* Alles im Banner steht auf dem Foto und muss hell sein, unabhaengig davon,
   ob die Sektion zusaetzlich .dunkel traegt. */
.hero .kicker,.subhero .kicker,.hero h1,.subhero h1,.hero .unter,.subhero .unter{color:var(--weiss);}
.hero .kicker svg path,.subhero .kicker svg path{fill:var(--weiss);}
.hero .krume,.subhero .krume{color:rgba(255,255,255,.7);}
/* Das Raster fuellt den Platz zwischen Vorlauf und Wortmarke. Der Text steht
   oben, die Karten sitzen unten buendig, genau wie im Entwurf. */
.hero-raster{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,455px);gap:40px;
  align-items:start;flex:1;
}
.hero-raster > .schwebe{align-self:end;}
.hero h1{max-width:620px;margin:18px 0 34px;}
.hero .unter{max-width:520px;color:var(--auf-dunkel);font-size:17px;line-height:28px;margin:-16px 0 34px;}
.wortmarke{
  font-size:clamp(44px,13vw,250px);line-height:.75;letter-spacing:-.03em;color:var(--weiss);
  margin-top:auto;padding-top:clamp(24px,3vw,50px);
  pointer-events:none;user-select:none;position:relative;z-index:1;
  /* width:100% ist noetig, sonst gewinnen die auto-Seitenraender aus .wrap
     gegen das Strecken im Flex-Container und die Marke rutscht in die Mitte. */
  width:100%;
}

/* Die Grundlinie der Marke sitzt auf der Bildkante. Ein negativer Aussenabstand
   schiebt die Zeile unter die Kante, und der Banner schneidet dort ab, auf dem
   Handy deutlich sichtbar. Deshalb steht hier nichts mehr. */

/* Schwebende Karten im Banner.
   Wie im Entwurf ist immer genau eine Karte aufgeklappt. Zeigt jemand auf die
   andere, wechselt der offene Zustand. Das laeuft ohne JavaScript, weil beim
   Zeigen auf die Gruppe erst alles zuklappt und danach die Karte unter dem
   Zeiger wieder aufgeht. */
.schwebe{display:flex;flex-direction:column;gap:10px;}
.bkarte{
  border-radius:var(--r-klein);padding:16px;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;animation:schweben 7s ease-in-out infinite;
  transition:background .3s var(--e),border-color .3s var(--e);
}
.bkarte--glas{
  background:rgba(25,24,24,.28);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(10px);
}
.bkarte--glas:hover,.bkarte--glas:focus-within{background:rgba(25,24,24,.5);border-color:rgba(255,255,255,.55);}
.bkarte--weiss{background:var(--weiss);color:var(--text);animation-delay:1.6s;}
.bkarte .kartentitel{
  font-size:var(--h6);line-height:1.5;letter-spacing:var(--eng);font-weight:500;margin:0;
}
.bkarte--glas .kartentitel{color:var(--weiss);}
.bkarte .klapptext{
  flex-basis:100%;font-size:15px;line-height:24px;margin:0;
  max-height:0;overflow:hidden;
  transition:max-height .45s var(--e),margin .45s var(--e);
}
.bkarte--glas .klapptext{color:rgba(255,255,255,.78);}
.bkarte--weiss .klapptext{color:var(--grau);}
/* Ruhezustand: beide Karten zeigen nur ihren Titel. Der Text erscheint beim
   Zeigen und verschwindet wieder, sobald der Zeiger weg ist.
   Keine Ausnahme fuer zeigerlose Geraete: die Abfrage (hover:none) greift auch
   auf Notebooks mit Touchscreen, dort stand der Text dann dauerhaft offen.
   Stattdessen laesst sich jede Karte antippen, das erledigt site.js. */
.bkarte:hover .klapptext,.bkarte:focus-within .klapptext,
.bkarte.offen .klapptext{max-height:180px;margin-top:6px;}
/* Immer nur eine der beiden Karten steht offen. Liegt die Maus irgendwo
   auf dem Paar, klappen erst beide zu, danach oeffnet die Regel darunter
   die eine, auf der die Maus wirklich liegt. Auch die Karte, die im
   Grundzustand offen steht, geht dabei zu. Faehrt die Maus weg, greift
   wieder der Grundzustand. */
.schwebe:hover .bkarte .klapptext,
.schwebe:focus-within .bkarte .klapptext{max-height:0;margin-top:0;}
.schwebe:hover .bkarte:hover .klapptext,
.schwebe:focus-within .bkarte:focus-within .klapptext{max-height:180px;margin-top:6px;}
.bkarte{cursor:pointer;}
@keyframes schweben{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.punkt{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;}
.punkt--hell{background:var(--weiss);}
.punkt--dunkel{background:var(--dunkel);}
.punkt svg{width:16px;height:16px;}

/* ---------- Banner der Unterseiten ---------- */
.subhero{
  position:relative;background:var(--dunkel);color:var(--weiss);
  /* Das Polster unten laesst der Marke Platz fuer Unterlaengen. Ohne das wurde
     das g in "Förderung" und "Engineering" mittendrin abgeschnitten. */
  padding:clamp(150px,16vw,200px) 0 clamp(12px,3.3vw,64px);overflow:hidden;
}
.subhero .hero-bild img{object-position:center 40%;}
.subhero .wrap{position:relative;z-index:1;}
.subhero h1{max-width:17ch;margin:10px 0 20px;}
.subhero .unter{max-width:620px;color:var(--auf-dunkel);font-size:17px;line-height:28px;margin-bottom:32px;}
.subhero .wortmarke{padding-top:clamp(40px,7vw,90px);}
.krume{font-size:14px;color:var(--auf-dunkel-leise);margin-bottom:18px;}
.krume a:hover{color:var(--weiss);}
.krume span{opacity:.6;padding:0 6px;}

/* ---------- Kundenlogos ---------- */
/* Feste Reihe statt Laufband. Im Entwurf steht die Reihe von Rand zu Rand,
   191 px hoch, mit Linien oben, unten und zwischen den fuenf Feldern. */
.logoreihe{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--linie-fein);border-bottom:1px solid var(--linie-fein);
  /* Buendig an den Banner, im Entwurf gibt es dazwischen keinen weissen
     Streifen. Frueher standen hier 70 px Vorlauf. */
  margin-top:0;
}
.logo-feld{
  display:grid;place-items:center;padding:14px 10px;
  min-height:clamp(96px,9.95vw,191px);
  border-left:1px solid var(--linie-fein);
}
.logo-feld:first-child{border-left:none;}
/* Drei Felder fuer die Mitgliedschaften auf Über uns. */
.logoreihe--drei{grid-template-columns:repeat(3,minmax(0,1fr));}
.logoreihe--drei .logo-platz{color:rgba(25,24,24,.5);text-align:center;white-space:normal;}
.logo-platz{
  color:rgba(25,24,24,.32);font-size:clamp(15px,1.15vw,22px);
  letter-spacing:.02em;white-space:nowrap;font-weight:500;
}
.dunkel .logo-platz{color:rgba(255,255,255,.5);}
.dunkel .logoreihe,.dunkel .logo-feld{border-color:rgba(255,255,255,.12);}
/* Fuenf Felder passen auf schmalen Schirmen nicht nebeneinander, der Text
   schob die Seite sonst nach rechts aus dem Bild. */
@media(max-width:900px){
  .logoreihe:not(.logoreihe--drei){grid-template-columns:repeat(3,minmax(0,1fr));}
  .logo-feld:nth-child(3n+1){border-left:none;}
  .logo-feld:nth-child(n+4){border-top:1px solid var(--linie-fein);}
}
@media(max-width:560px){
  .logoreihe{grid-template-columns:repeat(2,minmax(0,1fr));}
  .logoreihe--drei{grid-template-columns:minmax(0,1fr);}
  .logo-feld{border-left:1px solid var(--linie-fein);}
  .logo-feld:nth-child(odd){border-left:none;}
  .logo-feld:nth-child(n+3){border-top:1px solid var(--linie-fein);}
}

/* ---------- Kennzahlen ----------
   Im Entwurf drei Flaechen nebeneinander, je 513 x 243 bei 1920 px Breite,
   30 px Abstand, darin Zahl, Beschriftung und drei Punkte. */
.zahlen{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,30px);
  text-align:center;
}
.zahl{
  background:var(--weiss);border:1px solid var(--linie-fein);border-radius:var(--r);
  min-height:clamp(158px,12.65vw,243px);
  padding:clamp(24px,2.4vw,42px) clamp(14px,1.8vw,26px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.zahl b{
  display:block;font-size:clamp(46px,5.4vw,78px);line-height:1.2;
  letter-spacing:-.045em;font-weight:500;margin-bottom:10px;
}
/* Nur der direkte span ist die Beschriftung. Ohne das Kindzeichen traefe die
   Regel auch span.walze in der Zahl und stellte die Ziffern untereinander. */
.zahl > span{display:block;font-size:var(--h6);line-height:1.5;color:var(--grau);}
.zahl .punkte{display:flex;gap:5px;justify-content:center;margin-top:18px;}
.zahl .punkte i{width:5px;height:5px;border-radius:50%;background:var(--linie);display:block;}
/* Die Punkte sind bei Jonas eine Positionsanzeige: die erste Zahl bekommt
   einen gefuellten Punkt, die zweite zwei, die dritte drei. Sie zaehlen also
   die Spalte mit und stehen nicht fuer einen Wert. */
.zahlen > .zahl:nth-child(1) .punkte i:nth-child(-n+1),
.zahlen > .zahl:nth-child(2) .punkte i:nth-child(-n+2),
.zahlen > .zahl:nth-child(3) .punkte i:nth-child(-n+3){background:var(--dunkel);}
/* Ziffernwalze: der Stapel faehrt hoch, bis die Zielziffer steht */
.walze{display:inline-block;height:1.2em;line-height:1.2;overflow:hidden;vertical-align:bottom;}
.walze i{display:block;font-style:normal;transform:translateY(0);transition:transform 1.5s var(--e-weich);}
.walze i em{display:block;height:1.2em;line-height:1.2;font-style:normal;}
.zahl b .walze{font-size:inherit;line-height:inherit;}

/* Ueberlappende Rundbilder, im Entwurf ueber der Vertrauenszeile */

/* ---------- Leistungszeilen ----------
   Breite Zeile: Nummer, Titel, rechts ein runder Pfeil. Die offene Zeile
   zeigt Text, Aufzaehlung, Knopf und rechts ein Bild. */
.lzeilen{border-top:1px solid var(--linie-fein);}
.lzeile{border-bottom:1px solid var(--linie-fein);transition:background .4s var(--e);}
.lzeile.ist-offen{background:var(--bg);}
.creme .lzeile.ist-offen{background:var(--weiss);}
.lzeile-kopf{
  display:grid;grid-template-columns:70px minmax(0,1fr) 46px;align-items:center;gap:clamp(16px,3vw,40px);
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--f);padding:clamp(22px,2.6vw,34px) clamp(8px,1.4vw,24px);
}
.lzeile-kopf .nr{font-size:var(--h6);color:var(--grau);letter-spacing:.04em;font-weight:400;}
.lzeile-kopf .titel{
  font-size:var(--h3);line-height:1.25;letter-spacing:var(--eng);font-weight:500;color:var(--text);
}
.lzeile-koerper{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--e),visibility 0s linear .5s;
  visibility:hidden;
}
.lzeile.ist-offen .lzeile-koerper{
  grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s var(--e),visibility 0s;
}
.lzeile-innen{overflow:hidden;}
.lzeile-inhalt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,60px);align-items:stretch;
  padding:0 clamp(8px,1.4vw,24px) clamp(20px,1.7vw,32px) calc(70px + clamp(16px,3vw,40px));
}
.lzeile-inhalt .vorspann{font-size:16px;line-height:27px;color:var(--grau);margin-bottom:14px;}
.lzeile-inhalt ul{list-style:none;margin-bottom:24px;}
.lzeile-inhalt li{
  font-size:16px;line-height:1.8;color:var(--text);padding-left:18px;position:relative;
}
.lzeile-inhalt li::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--dunkel);
}
/* Das Bild richtet sich nach der Texthoehe und nicht umgekehrt. Vorher gab das
   Seitenverhaeltnis die Hoehe vor, das Bild wurde bei breiter Spalte riesig und
   hat die ganze Zeile auseinander gezogen. Jetzt bestimmt der Text die Hoehe,
   das Bild fuellt sie nur aus, so wie im Entwurf. */
.lzeile-bild{
  border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#e2e0da,#cfcdc6);
  position:relative;margin-left:auto;
  align-self:stretch;height:auto;min-height:clamp(96px,7.8vw,150px);
  width:100%;max-width:clamp(230px,23.7vw,455px);
}
.lzeile-bild[data-platz]::after{
  content:attr(data-platz);position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(25,24,24,.34);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.lzeile-bild img{width:100%;height:100%;object-fit:cover;}

/* ---------- Zweispalter mit Bild ---------- */
.paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center;}
.paar--breit-links{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.paar--breit-rechts{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
.bild{
  border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#e2e0da,#cfcdc6);
  position:relative;aspect-ratio:4/3;
}
.bild--hoch{aspect-ratio:3/4;}
.bild--breit{aspect-ratio:16/9;}
.bild[data-platz]::after{
  content:attr(data-platz);position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(25,24,24,.34);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:20px;
}
.bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e);}
.bild:hover img{transform:scale(1.04);}
/* Weisse Pille, die unten ueber das Bild ragt */
/* Im Entwurf ist das Bild rund um die Pille ausgespart. Der Ring in der Farbe
   des Seitengrunds bildet genau diese Aussparung ab. */
.bild-pille{
  position:absolute;left:clamp(16px,4%,44px);bottom:clamp(16px,5%,40px);z-index:2;
  background:var(--weiss);border-radius:100px;padding:14px 26px;
  border:clamp(8px,1vw,16px) solid var(--weiss);
  font-weight:500;font-size:16px;color:var(--text);box-shadow:0 12px 34px rgba(25,24,24,.16);
}
.creme .bild-pille{border-color:var(--creme);}
.beige .bild-pille{border-color:var(--bg);}
.bild-halter{position:relative;}

/* ---------- Zitat in dunkler Sprechblase ---------- */
.blase{
  background:var(--dunkel);color:var(--weiss);border-radius:var(--r);
  padding:clamp(28px,3vw,40px);position:relative;
}
/* Die Nase unten rechts ist raus. Sie war als Maske gebaut und hat als
   Sichel gerendert statt als sauberer Anschnitt. */
.blase p{font-size:clamp(18px,1.55vw,22px);line-height:1.5;letter-spacing:var(--eng);color:var(--weiss);}
.blase .wer{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:15px;color:rgba(255,255,255,.66);}
.blase .wer .foto{
  width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.14);flex:none;overflow:hidden;
}
.zitate{position:relative;}
.zitat{
  opacity:0;visibility:hidden;position:absolute;inset:0;transform:translateY(10px);
  transition:opacity .5s var(--e),transform .5s var(--e),visibility .5s;
}
.zitat.an{opacity:1;visibility:visible;transform:none;position:relative;}
.zitat-punkte{display:flex;gap:8px;margin-top:30px;}
.zitat-punkte button{
  width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:.3s var(--e);
}
.zitat-punkte button.aktiv{background:var(--weiss);width:26px;border-radius:100px;}

/* ---------- Auswahlliste mit Unterstrich ---------- */
.wahl{border-top:1px solid var(--linie-fein);}
.wahl-zeile{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  text-align:left;background:none;border:none;cursor:pointer;font-family:var(--f);
  font-size:var(--h6);letter-spacing:var(--eng);font-weight:400;color:var(--text);
  padding:20px 2px;border-bottom:1px solid var(--linie-fein);position:relative;
}
.wahl-zeile::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--dunkel);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e);
}
.wahl-zeile:hover::after,.wahl-zeile.an::after{transform:scaleX(1);}
.wahl-zeile svg{flex:none;opacity:0;transform:translate(-6px,6px);transition:.35s var(--e);}
.wahl-zeile:hover svg,.wahl-zeile.an svg{opacity:1;transform:none;}
/* Alle Tafeln liegen in derselben Rasterzelle. Dadurch ist die Hoehe immer die
   der laengsten Tafel und aendert sich beim Wechsel nicht. Vorher wuchs und
   schrumpfte der Block, die Liste darunter sprang mit und der Zeiger landete
   abwechselnd auf zwei Zeilen. Genau das hat zwischen den Eintraegen geflackert. */
.tafeln{display:grid;margin-bottom:30px;}
.tafel{
  grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s var(--e),transform .4s var(--e),visibility .4s;
}
.tafel.an{opacity:1;visibility:visible;transform:none;}
.tafel p{color:var(--grau);max-width:560px;}

/* ---------- Video ---------- */
.film{position:relative;height:clamp(420px,52vw,760px);overflow:hidden;background:var(--dunkel);padding:0;}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.film-schleier{position:absolute;inset:0;background:rgba(25,24,24,.16);transition:background .4s var(--e);pointer-events:none;}
.film.laeuft .film-schleier{background:rgba(25,24,24,0);}
.abspielen{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(96px,10vw,138px);height:clamp(96px,10vw,138px);border-radius:50%;
  background:var(--weiss);border:none;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 0 0 10px rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.35);
  transition:transform .3s var(--e),opacity .4s var(--e),visibility .4s;
}
.abspielen:hover{transform:translate(-50%,-50%) scale(1.06);}
.abspielen::before,.abspielen::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);animation:pulsieren 2.6s ease-out infinite;
}
.abspielen::after{animation-delay:1.3s;}
@keyframes pulsieren{0%{transform:scale(1);opacity:.8;}100%{transform:scale(1.55);opacity:0;}}
.abspielen .dreieck{
  width:0;height:0;margin-left:6px;
  border-left:clamp(24px,2.6vw,35px) solid var(--dunkel);
  border-top:clamp(15px,1.6vw,21px) solid transparent;
  border-bottom:clamp(15px,1.6vw,21px) solid transparent;
}
.film.laeuft .abspielen{opacity:0;visibility:hidden;}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);}
.mitglied{display:block;}
/* Hochformat wie im Entwurf, 440 zu 501. */
.mitglied .bild{aspect-ratio:440/501;margin-bottom:0;}
/* Aus der unteren rechten Ecke ist ein Kreis herausgeschnitten, darin sitzt der
   Pfeil. Die Maske nimmt den Kreis aus dem Bild, der Knopf liegt daneben im
   Halter und bleibt deshalb sichtbar. */
.bild-eck{position:relative;margin-bottom:20px;--knopf:clamp(40px,3.13vw,60px);}
.bild-eck .bild{
  -webkit-mask-image:radial-gradient(circle at calc(100% - var(--knopf)/2) calc(100% - var(--knopf)/2),
    transparent calc(var(--knopf)/2 + clamp(16px,1.35vw,26px)),
    #000 calc(var(--knopf)/2 + clamp(16px,1.35vw,26px) + 1px));
  mask-image:radial-gradient(circle at calc(100% - var(--knopf)/2) calc(100% - var(--knopf)/2),
    transparent calc(var(--knopf)/2 + clamp(16px,1.35vw,26px)),
    #000 calc(var(--knopf)/2 + clamp(16px,1.35vw,26px) + 1px));
}
.eckknopf{
  position:absolute;right:0;bottom:0;width:var(--knopf);height:var(--knopf);
  border-radius:50%;background:var(--dunkel);display:grid;place-items:center;
  transition:transform .35s var(--e);
}
.eckknopf svg{width:42%;height:42%;}
.eckknopf svg path{stroke:var(--weiss);}
.mitglied:hover .eckknopf{transform:rotate(45deg);}
.mitglied-fuss{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.mitglied .name{font-size:var(--h5);letter-spacing:var(--eng);font-weight:500;}
.mitglied .rolle{font-size:15px;color:var(--grau);margin-top:2px;}

/* ---------- Werte, Prozess, einfache Kacheln ---------- */
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);}
.raster-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px);}
.kachel{
  border-top:1px solid var(--linie);padding-top:26px;
  display:flex;flex-direction:column;gap:12px;
}
.kachel .nr{font-size:15px;color:var(--grau);letter-spacing:.04em;}
.kachel h3{font-size:var(--h4);line-height:1.32;letter-spacing:var(--eng);font-weight:500;}
.kachel p{font-size:16px;line-height:27px;color:var(--grau);}
.dunkel .kachel{border-color:rgba(255,255,255,.18);}
.dunkel .kachel p{color:var(--auf-dunkel);}
.dunkel .kachel .nr{color:var(--auf-dunkel-leise);}

/* ---------- FAQ ---------- */
.faq{max-width:1100px;margin:0 auto;}
.faq details{
  background:var(--weiss);border:1px solid var(--linie-fein);border-radius:var(--r);
  margin-bottom:12px;overflow:hidden;transition:border-color .3s var(--e);
}
.beige .faq details,.creme .faq details{background:var(--weiss);}
.faq details[open]{border-color:var(--linie);}
.faq summary{
  list-style:none;cursor:pointer;padding:26px clamp(22px,2.6vw,34px);
  font-size:var(--h5);letter-spacing:var(--eng);font-weight:500;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";width:15px;height:15px;flex:none;
  background:
    linear-gradient(var(--text),var(--text)) center/100% 1.5px no-repeat,
    linear-gradient(var(--text),var(--text)) center/1.5px 100% no-repeat;
  transition:transform .3s var(--e);
}
/* Beim Aufklappen bleibt der waagerechte Balken stehen. Vorher wurde er um
   90 Grad gedreht und stand danach senkrecht, also gar kein Minus. */
.faq details[open] summary::after{transform:rotate(180deg);
  background:linear-gradient(var(--text),var(--text)) center/100% 1.5px no-repeat;}
.faq details p{
  padding:0 clamp(22px,2.6vw,34px) 28px;font-size:16px;line-height:27px;
  color:var(--grau);max-width:820px;
}

/* ---------- Formular ---------- */
.formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.feld{display:flex;flex-direction:column;gap:8px;}
.feld.voll{grid-column:1/-1;}
label{font-size:var(--h6);font-weight:500;color:var(--text);}
input,select,textarea{
  font-family:var(--f);font-size:16px;color:var(--text);background:var(--weiss);
  border:none;border-bottom:1px solid var(--linie);border-radius:0;
  padding:12px 2px;width:100%;transition:border-color .3s var(--e);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--dunkel);}
textarea{min-height:130px;resize:vertical;}
.creme input,.creme select,.creme textarea,.beige input,.beige select,.beige textarea{background:transparent;}
.hinweis{font-size:14px;color:var(--grau);margin-top:16px;}
.hakenzeile{display:flex;align-items:flex-start;gap:12px;grid-column:1/-1;}
.hakenzeile input{width:auto;flex:none;margin-top:5px;}
.hakenzeile label{font-size:15px;font-weight:400;color:var(--grau);}

/* ---------- Kontaktangaben ---------- */
.kontaktblock{margin-bottom:34px;}
.kontaktblock h3{font-size:var(--h4);letter-spacing:var(--eng);font-weight:500;margin-bottom:8px;}
.kontaktblock p,.kontaktblock a{font-size:16px;line-height:27px;color:var(--grau);}
.kontaktblock a:hover{color:var(--text);}
.netzliste{list-style:none;}
.netzliste a{text-decoration:underline;text-underline-offset:3px;}
/* Im Entwurf ist die Karte 956 x 609 bei 1920, also deutlich groesser als
   vorher und im festen Seitenverhaeltnis. */
/* Die Karte kommt aus Natural Earth, gemeinfrei. Kein Kartendienst von aussen,
   damit bleibt die Datenschutzerklaerung wie sie ist. */
/* Im Entwurf steht die Karte frei auf dem Grund, ohne Kasten und ohne Rundung. */
.karte-flaeche{
  aspect-ratio:956/609;background:none;border-radius:0;
  position:relative;display:grid;place-items:center;
}
.karte-flaeche img{width:100%;height:auto;max-height:100%;object-fit:contain;}
.karte-flaeche::after{
  content:attr(data-platz);position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(25,24,24,.34);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- Rechtstexte ---------- */
.recht{max-width:820px;}
.recht h2{font-size:var(--h4);letter-spacing:var(--eng);font-weight:500;margin:38px 0 12px;}
.recht h2:first-of-type{margin-top:0;}
.recht p{font-size:16px;line-height:27px;color:var(--grau);margin-bottom:14px;}
.recht .stand{font-size:15px;color:var(--grau);margin-bottom:34px;}
.merker{
  background:var(--bg);border-radius:var(--r);padding:24px 28px;
  font-size:16px;line-height:27px;color:var(--grau);margin-bottom:38px;
}
.merker b{color:var(--text);}

/* ---------- Abschluss ---------- */
.abschluss{background:var(--creme);text-align:center;}
.creme + .abschluss,.film + .abschluss{background:var(--bg);}
.abschluss h2{max-width:900px;margin:0 auto 18px;}
.abschluss .lead{margin-bottom:32px;}

/* ---------- Footer ---------- */
footer{
  background:var(--dunkel);color:var(--weiss);
  padding-top:clamp(70px,5.9vw,113px);overflow:hidden;position:relative;
}
/* Der geschwungene Grauverlauf aus dem Entwurf. */
footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(240px,26vw,500px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 500' preserveAspectRatio='none'%3E%3Cpath d='M0 466 C 470 466 610 152 1112 152 C 1516 152 1676 126 1920 110 L1920 0 L0 0 Z' fill='rgba(255,255,255,0.028)'/%3E%3C/svg%3E") center top/100% 100% no-repeat;pointer-events:none;
}
/* Die feine Linie ueber der ganzen Breite, im Entwurf bei 62 von 976. */
footer::after{
  content:"";position:absolute;left:0;right:0;top:clamp(40px,3.23vw,62px);height:1px;
  background:rgba(255,255,255,.12);pointer-events:none;
}
footer > *{position:relative;z-index:1;}
.f-oben{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:0;
  padding-bottom:clamp(40px,4.5vw,86px);align-items:stretch;
}
/* Senkrechte Trenner zwischen den Spalten, wie im Entwurf. */
.f-oben > div + div{
  border-left:1px solid rgba(255,255,255,.12);
  padding-left:clamp(20px,2.8vw,54px);
}
.f-oben > div{padding-right:clamp(16px,2.2vw,42px);}
.f-oben h2{font-size:var(--h4);letter-spacing:var(--eng);font-weight:500;color:var(--weiss);margin-bottom:18px;}
.f-oben a,.f-oben p{display:block;color:rgba(255,255,255,.7);font-size:16px;line-height:30px;}
.f-oben a{position:relative;width:fit-content;transition:color .3s var(--e);}
.f-oben a:hover{color:#fff;}
.f-oben a::after{
  content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e);
}
.f-oben a:hover::after{transform:scaleX(1);}
/* .f-oben a setzt display:block und ist spezifischer als .marke. Ohne diese
   Zeile rutscht das Zeichen im Fussbereich unter den Schriftzug. */
.f-oben .marke{display:flex;align-items:center;gap:10px;}
.f-marke p{color:rgba(255,255,255,.6);font-size:15px;line-height:26px;margin-top:16px;max-width:340px;}
/* Im Entwurf steht die Marke unten rechts. */
.f-wort{
  font-size:clamp(44px,13.5vw,250px);line-height:.8;letter-spacing:-.04em;text-align:right;
  color:rgba(255,255,255,.09);padding-bottom:20px;user-select:none;white-space:nowrap;
}
.f-unten{
  border-top:1px solid rgba(255,255,255,.12);padding:26px 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:14px;color:rgba(255,255,255,.6);
}
.f-unten a{text-decoration:underline;text-underline-offset:3px;}
.f-unten a:hover{color:#fff;}

/* ---------- Einblenden beim Scrollen ---------- */
.js .ein{opacity:0;transform:translateY(.625rem);transition:opacity .5s var(--e),transform .5s var(--e);}
.js .ein.da{opacity:1;transform:none;}
.js .ein-worte .w{
  display:inline-block;max-width:100%;overflow-wrap:break-word;
  opacity:0;transform:translateY(.7em);transition:opacity .5s var(--e),transform .5s var(--e);
}
.js .ein-worte.da .w{opacity:1;transform:none;}
.js .ein-gross{transform:scale(.94);opacity:0;transition:transform .7s var(--e),opacity .7s var(--e);}
.js .ein-gross.da{transform:none;opacity:1;}
.js .ein-linie{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e);}
.js .ein-linie.da{transform:none;}

/* Notbremse, falls das Skript ausbleibt */
@keyframes notbremse{to{opacity:1;transform:none;}}
html.js:not(.js-laeuft) .ein,
html.js:not(.js-laeuft) .ein-gross,
html.js:not(.js-laeuft) .ein-linie,
html.js:not(.js-laeuft) .ein-worte .w{animation:notbremse .01s linear 2s forwards;}

@media(prefers-reduced-motion:reduce){
  .js .ein,.js .ein-worte .w,.js .ein-gross,.js .ein-linie{opacity:1;transform:none;transition:none;animation:none;}
  .hero-bild img,.logolauf-band,.abspielen::before,.abspielen::after,
  .bkarte{animation:none;}
  .walze i{transition:none;}
  html{scroll-behavior:auto;}
}


/* ---------- Nachgereichte Varianten ----------
   Die Entwuerfe brauchen ein paar Spielarten der Bausteine, die beim ersten
   Aufsetzen fehlten. Ohne sie mussten Umwege gebaut werden, etwa ein leeres
   Nummernfeld nur damit die Spalte stimmt. */

/* Kopfleiste: der Knopf rechts weicht auf schmalen Schirmen dem Burger */
.navcta{display:inline-flex;}

/* Leistungszeilen ohne Nummer, etwa fuer die Werte */
.lzeilen--ohne-nr .lzeile-kopf{grid-template-columns:minmax(0,1fr) 46px;}
.lzeilen--ohne-nr .lzeile-kopf .nr{display:none;}
.lzeilen--ohne-nr .lzeile-inhalt{padding-left:clamp(8px,1.4vw,24px);}

/* Aufgeklappter Inhalt ohne Bild, dann laeuft der Text ueber die halbe Breite */
.lzeile-inhalt--text{grid-template-columns:minmax(0,1fr);}
.lzeile-inhalt--text > div{max-width:70ch;}

/* Auf cremefarbener Flaeche bleibt die offene Zeile creme, nur etwas tiefer */
.creme .lzeile.ist-offen{background:rgba(25,24,24,.035);}

/* Banner mit zentriertem Inhalt, so steht die Leistungsuebersicht im Entwurf */
.subhero--mitte .wrap{text-align:center;}
.subhero--mitte h1{max-width:22ch;margin-left:auto;margin-right:auto;}
.subhero--mitte .unter{margin-left:auto;margin-right:auto;}
.subhero--mitte .knopfreihe{justify-content:center;}
.subhero--mitte .krume{justify-content:center;display:flex;}

/* Kachel mit Icon, mittig ausgerichtet */
.kachel--mitte{text-align:center;align-items:center;}
.icon-quadrat{
  width:52px;height:52px;border-radius:14px;background:var(--dunkel);
  display:grid;place-items:center;flex:none;
}
.icon-quadrat svg{width:22px;height:22px;}
.icon-quadrat svg path,.icon-quadrat svg rect,.icon-quadrat svg circle{stroke:var(--weiss);}
.dunkel .icon-quadrat{background:var(--weiss);}
.dunkel .icon-quadrat svg path,.dunkel .icon-quadrat svg rect,.dunkel .icon-quadrat svg circle{stroke:var(--dunkel);}

@media(max-width:640px){
  .navcta{display:none;}
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .hero-raster,.paar,.paar--breit-links,.paar--breit-rechts,.team,
  .raster-2,.raster-3,.raster-4,.formular,.lzeile-inhalt{grid-template-columns:minmax(0,1fr);}
  .schwebe{max-width:455px;}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px;}
  .f-oben{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 0;}
  .f-oben > div + div{border-left:none;padding-left:0;}
  .menue-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .menue-foto{display:none;}
  .lzeile-bild{order:-1;margin-bottom:8px;}
}
@media(max-width:860px){
  .navlinks,.navmeta{display:none;}
  .burger{display:block;}
  html{scroll-padding-top:80px;}
  .navlinks.auf{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:rgba(25,24,24,.96);backdrop-filter:blur(14px);border-radius:var(--r-klein);
    padding:22px 26px;gap:6px;margin-top:14px;max-height:calc(100vh - 120px);overflow-y:auto;
  }
  .navlinks.auf .nur-mobil{display:block;}
  .hut .chev{display:none;}
  .menue{
    position:static;margin:4px 0 10px;padding:0 0 0 14px;background:none;border:none;
    border-left:1px solid rgba(255,255,255,.18);border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
  }
  .menue-raster{grid-template-columns:minmax(0,1fr);gap:0;}
  .menue-h{color:rgba(255,255,255,.45);margin:10px 0 4px 0;}
  .navlinks .menue-link{padding:8px 0;color:var(--weiss);border-radius:0;}
  .navlinks .menue-link:hover{background:none;}
  .navlinks .menue-link small,.navlinks .menue-link .arr{display:none;}
  .menue-cta{display:none;}
  /* Beide Menues stehen hier untereinander offen. Überblick waere sonst
     zweimal zu sehen. */
  .hut--unternehmen .menue-ueberblick{display:none;}
  .hero{padding-top:120px;}
  .subhero{padding-top:130px;}
  .lzeile-inhalt{padding-left:clamp(8px,1.4vw,24px);}
}
@media(max-width:560px){
  h1,.h1,h2,.h2,.lzeile-kopf .titel,.faq summary{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;}
  .zahlen{grid-template-columns:minmax(0,1fr);}
  .f-oben{grid-template-columns:minmax(0,1fr);}
  .knopfreihe{flex-direction:column;align-items:stretch;}
  .knopf{width:100%;justify-content:space-between;white-space:normal;line-height:1.35;padding:9px 9px 9px 20px;text-align:left;}
  .knopfreihe .textlink{align-self:center;}
  .lzeile-kopf{grid-template-columns:minmax(0,1fr) 40px;gap:6px 12px;padding:20px 8px;}
  .lzeile-kopf .nr{grid-column:1;grid-row:1;font-size:14px;}
  .lzeile-kopf .titel{grid-column:1;grid-row:2;font-size:var(--h4);}
  .lzeile-kopf .pfeilkreis{grid-column:2;grid-row:1/3;width:40px;height:40px;}
  .bild-pille{left:14px;bottom:14px;padding:11px 18px;font-size:15px;}
}

/* =========================================================================
   Gruenderseiten  ·  v05, 20.08.2026
   Nachgebaut nach dem Figma-Frame "Team Mitglied Detail" (2961:3136).
   Masse aus dem Entwurf bei 1920 px Breite, umgerechnet in vw, damit die
   Seite genauso mitwaechst wie der Rest (Rand 8.33vw = 160/1920).

     Name gross und frei ueber der Seite, kein dunkler Banner
     darunter Bild links, dunkle Zitatkarte rechts, beide gleich hoch
     danach zwei Spalten, getrennt durch eine senkrechte Linie
     die waagerechten Trenner laufen nach links aus dem Bild heraus
   ========================================================================= */

/* Kopfleiste in dunkler Schrift. Die Gruenderseiten haben keinen dunklen
   Banner, ueber den die weisse Fassung sonst laeuft. */
/* header davorsetzen: die Marke steht auch im Fussbereich, der bleibt dunkel. */
/* Seit die Auslöser Leistungen und Über uns Knöpfe sind, muss der
   Selektor sie mitnennen. Sonst blieben sie auf den sechs Seiten mit
   hellem Kopf weiss auf hell und waren nicht zu lesen. */
.heller-kopf header .marke span,
.heller-kopf .navlinks > a,.heller-kopf .hut > a,.heller-kopf .hut > button,
.heller-kopf .navmeta{color:var(--text);}
.heller-kopf header .marke svg rect{fill:var(--dunkel);}
.heller-kopf header .marke svg path{fill:var(--weiss);}
.heller-kopf .burger span{background:var(--text);}
.heller-kopf header.fest{
  background:rgba(244,243,239,.92);
  box-shadow:0 1px 0 var(--linie-fein);
}
.heller-kopf header .knopf--hell{background:var(--dunkel);color:var(--weiss);}
.heller-kopf header .knopf--hell .kreis{background:var(--weiss);}
.heller-kopf header .knopf--hell .kreis svg path{stroke:var(--dunkel);}
.heller-kopf header :focus-visible{outline-color:var(--dunkel);}

.gseite{background:var(--creme);}
.gseite .gruenderkopf{padding-top:clamp(96px,10.5vw,202px);padding-bottom:0;}

/* Der Name. Im Entwurf 122 px bei 1920 px Breite. */
.gname{
  font-size:clamp(38px,6.35vw,122px);line-height:1.04;
  letter-spacing:-.035em;font-weight:400;color:var(--dunkel);
  margin-bottom:clamp(28px,3.4vw,66px);
}

/* Bild und Zitatkarte. 980 zu 530 bei 80 px Abstand. */
.gkopf{
  display:grid;grid-template-columns:minmax(0,1.849fr) minmax(0,1fr);
  gap:clamp(18px,4.17vw,80px);align-items:stretch;
}
.gbild{
  /* width:100% ist wichtig: ohne feste Breite rechnet der Browser sie bei
     gestreckter Hoehe aus dem Seitenverhaeltnis und das Bild laeuft ueber die
     Spalte hinaus auf die Zitatkarte. Mit fester Breite gibt das Verhaeltnis
     nur noch die Mindesthoehe vor, und beide Spalten enden auf gleicher Hoehe. */
  width:100%;align-self:stretch;
  aspect-ratio:980/704;border-radius:var(--r);overflow:hidden;
  background:#EDECE8;position:relative;
}
.gbild img{width:100%;height:100%;object-fit:cover;}
/* Platzhalter, solange kein Foto vorliegt */
.gbild[data-platz]::after{
  content:attr(data-platz);position:absolute;inset:0;display:grid;place-items:center;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:rgba(25,24,24,.28);
  text-align:center;padding:20px;
}

.gzitat{
  background:var(--dunkel);border-radius:var(--r);
  padding:clamp(22px,3.2vw,62px);height:100%;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
}
.gzitat p{
  font-size:clamp(17px,1.45vw,28px);line-height:1.4;letter-spacing:var(--eng);
  color:var(--weiss);font-weight:500;
}
/* Das Zeichen ist im Entwurf eine geometrische Form, keine geschwungene
   Serifenschrift. Masse aus dem Frame: 55 breit, 43 hoch. */
.gz-zeichen{display:block;width:clamp(34px,2.87vw,55px);line-height:0;flex:none;}
.gz-zeichen svg{width:100%;height:auto;display:block;}
.gz-auf{color:var(--weiss);}
.gz-zu{color:rgba(255,255,255,.2);align-self:flex-end;}

/* Der zweispaltige Unterbau. Die senkrechte Linie ist die rechte Kante
   der linken Spalte, im Entwurf bei x=1222 von 1920. */
.gruender{overflow:hidden;padding-top:clamp(48px,6.98vw,134px);}
.gr-raster{
  display:grid;grid-template-columns:minmax(0,2.27fr) minmax(0,1fr);
  column-gap:clamp(26px,3.44vw,66px);align-items:start;
}
.gr-haupt{
  border-right:1px solid var(--linie);
  /* Im Entwurf laeuft die Senkrechte noch rund 140 unter den letzten Text
     weiter, bis zum Fussbereich. */
  padding-right:0;padding-bottom:clamp(50px,7.3vw,140px);
}
/* Zwischen zwei Bloecken liegen im Entwurf rund 138, die Linie sitzt etwas
   ueber der Mitte. Vorher waren es 180. */
.gr-block + .gr-block{
  position:relative;
  margin-top:clamp(38px,4vw,77px);padding-top:clamp(30px,3.2vw,61px);
}
/* Der Trenner laeuft im Entwurf ueber den Seitenrand hinaus nach links.
   -100vw plus overflow:hidden am Elternteil bildet das ohne Rechnerei ab. */
.gr-block + .gr-block::before{
  content:"";position:absolute;top:0;left:-100vw;right:0;height:1px;
  background:var(--linie);
}
.gr-block h2{margin-bottom:22px;}
.gr-block > p{margin-bottom:16px;max-width:62ch;}
.gr-block > p:last-of-type{margin-bottom:0;}

/* Beschriftung links, Wert rechts. Im Entwurf Label 30 Prozent der Spalte. */
.gr-daten{margin-top:clamp(28px,3.6vw,70px);}
.gr-daten > div{
  display:grid;grid-template-columns:minmax(0,30fr) minmax(0,70fr);
  gap:14px;align-items:baseline;
  padding-bottom:clamp(16px,1.9vw,36px);
}
.gr-daten > div:last-child{padding-bottom:0;}
.gr-daten dt{font-size:var(--h6);line-height:1.4;letter-spacing:var(--eng);color:var(--dunkel);}
.gr-daten dd{font-size:16px;line-height:27px;color:var(--grau);}
.gr-daten dd a:hover{color:var(--text);text-decoration:underline;}

/* Die schmale Spalte rechts hat mehr Platz fuer die Beschriftung. */
.gr-seite .gr-daten{margin-top:0;}
.gr-seite .gr-daten > div{grid-template-columns:minmax(0,42fr) minmax(0,58fr);}
.gr-seite .gr-daten dt{font-size:17px;line-height:1.45;}
.gr-kontakt{margin-top:clamp(22px,2.3vw,44px);}
.gr-kontakt span{display:block;font-size:var(--h6);line-height:1.4;color:var(--dunkel);}
.gr-kontakt a{
  display:inline-block;margin-top:4px;
  font-size:clamp(19px,1.56vw,30px);line-height:1.3;letter-spacing:var(--eng);color:var(--dunkel);
}
.gr-kontakt a:hover{text-decoration:underline;}
.gr-seite .knopf{margin-top:clamp(22px,2.2vw,42px);}
.gr-weiter{display:block;margin-top:18px;font-size:15px;color:var(--grau);text-decoration:underline;}
.gr-weiter:hover{color:var(--text);}

/* Punkteliste im Hauptteil */
.gr-punkt{margin-top:clamp(22px,2.1vw,40px);max-width:62ch;}
.gr-punkt h3{font-size:var(--h5);line-height:1.4;letter-spacing:var(--eng);font-weight:400;margin-bottom:4px;}
.gr-punkt p{font-size:16px;line-height:27px;color:var(--grau);}
.gr-liste{list-style:none;margin-top:24px;max-width:62ch;}
.gr-liste li{position:relative;padding-left:24px;margin-bottom:11px;font-size:16px;line-height:27px;}
.gr-liste li::before{
  content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--dunkel);
}

@media(max-width:900px){
  .gkopf{grid-template-columns:minmax(0,1fr);}
  .gbild{aspect-ratio:4/3;}
  .gr-raster{grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,6vw,70px);}
  .gr-haupt{border-right:none;padding-bottom:0;}
  .gr-seite{
    border-top:1px solid var(--linie);padding-top:clamp(34px,5vw,56px);
  }
  .gruender{padding-bottom:var(--luft);}
}
@media(max-width:560px){
  .gr-daten > div,.gr-seite .gr-daten > div{grid-template-columns:minmax(0,1fr);gap:4px;}
}


/* =========================================================================
   Ergaenzungen v07  ·  21.08.2026
   Nach den Figma-Frames "Über Uns" (2961:2376), "Kontakt" (2961:5242) und
   "Impressum" (2961:7403).
   ========================================================================= */

/* ---------- Banner mit Bildwechsel ----------
   Im Entwurf liegen zwei Bildebenen uebereinander, unten rechts steht die
   Anzeige 01 / 02 mit einem Balken dazwischen. Ueber dem Bild liegen vier
   feine Senkrechten bei 285, 735, 1185 und 1635 von 1920. */
.hero-bild .dia{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--e);
}
.hero-bild .dia.an{opacity:1;}
.hero-linien{position:absolute;inset:0;pointer-events:none;z-index:1;}
.hero-linien i{
  position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.09);
}
.hero-linien i:nth-child(1){left:14.84%;}
.hero-linien i:nth-child(2){left:38.28%;}
.hero-linien i:nth-child(3){left:61.72%;}
.hero-linien i:nth-child(4){left:85.16%;}

.hero-anzeige{
  position:absolute;right:var(--rand);bottom:clamp(34px,5.2vw,100px);z-index:2;
  display:flex;align-items:center;gap:clamp(12px,1.5vw,28px);
  width:min(640px,52%);
}
.hero-anzeige .nr{font-size:16px;color:rgba(255,255,255,.75);flex:none;}
.hero-anzeige .bahn{
  flex:1;height:1px;background:rgba(255,255,255,.28);position:relative;
}
.hero-anzeige .bahn i{
  position:absolute;left:0;top:-1px;height:3px;background:var(--weiss);
  width:50%;transition:transform 1.1s var(--e);
}
.hero-anzeige[data-dia="2"] .bahn i{transform:translateX(100%);}
.hero-anzeige[data-dia="1"] .nr:first-child,
.hero-anzeige[data-dia="2"] .nr:last-child{color:var(--weiss);}

/* ---------- Bild mit Stufenmaske ----------
   Im Entwurf ist das Bild nicht vollstaendig zu sehen, sondern in eine Form
   aus vier ineinandergreifenden Rechtecken geschnitten. */
.maskbild{
  aspect-ratio:785/763;width:100%;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#e2e0da,#cfcdc6);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 785 763' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='459' height='408' rx='26' fill='%23fff'/%3E%3Crect x='192' y='85' width='593' height='390' rx='26' fill='%23fff'/%3E%3Crect x='88' y='460' width='541' height='185' rx='26' fill='%23fff'/%3E%3Crect x='611' y='636' width='143' height='127' rx='26' fill='%23fff'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 785 763' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='459' height='408' rx='26' fill='%23fff'/%3E%3Crect x='192' y='85' width='593' height='390' rx='26' fill='%23fff'/%3E%3Crect x='88' y='460' width='541' height='185' rx='26' fill='%23fff'/%3E%3Crect x='611' y='636' width='143' height='127' rx='26' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.maskbild img{width:100%;height:100%;object-fit:cover;}
.maskbild[data-platz]::after{
  content:attr(data-platz);position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(25,24,24,.34);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- Werteliste ----------
   Im Entwurf steht der Text als ein Absatz mit einem kleinen Quadrat davor,
   nicht als Liste mit weiten Abstaenden. */
.lzeile-inhalt--text ul{margin-bottom:0;}
.lzeile-inhalt--text li{
  font-size:16px;line-height:27px;color:var(--grau);padding-left:16px;margin-bottom:8px;
}
.lzeile-inhalt--text li:last-child{margin-bottom:0;}
.lzeile-inhalt--text li::before{top:.62em;width:4px;height:4px;}

/* ---------- Kreuzraster "Was uns unterscheidet" ----------
   Zwei mal zwei Felder, dazwischen ein Kreuz mit Punkt in der Mitte. Die
   Waagerechte laeuft im Entwurf ueber die volle Breite. */
/* Die Waagerechte ragt links und rechts aus dem Satzspiegel heraus. Ohne
   overflow-x:clip am Band waechst die Seite dadurch nach rechts und laesst
   sich seitlich scrollen. */
.kreuz-band{overflow-x:clip;}
.kreuz{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  position:relative;isolation:isolate;
}
.kreuz-feld{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(18px,2.4vw,46px);
  padding:clamp(34px,4.2vw,80px) clamp(12px,2vw,40px);
}
.kreuz-feld .zeichen{
  width:clamp(48px,3.4vw,65px);height:clamp(48px,3.4vw,65px);border-radius:14px;
  background:var(--dunkel);display:grid;place-items:center;flex:none;
}
.kreuz-feld .zeichen svg{width:46%;height:46%;}
.kreuz-feld h3{
  font-size:var(--h4);line-height:1.35;letter-spacing:var(--eng);font-weight:400;
  max-width:14ch;
}
/* Senkrechte in der Mitte, mit Luecke fuer den Punkt */
.kreuz::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(var(--linie-fein) 0 calc(50% - 22px),transparent calc(50% - 22px) calc(50% + 22px),var(--linie-fein) calc(50% + 22px));
  transform:translateX(-.5px);z-index:-1;
}
/* Waagerechte ueber die volle Seitenbreite, ebenfalls mit Luecke */
.kreuz::after{
  content:"";position:absolute;top:50%;left:-100vw;right:-100vw;height:1px;
  background:linear-gradient(90deg,var(--linie-fein) 0 calc(50% - 30px),transparent calc(50% - 30px) calc(50% + 30px),var(--linie-fein) calc(50% + 30px));
  z-index:-1;
}
.kreuz-punkt{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;background:var(--dunkel);
}
@media(max-width:760px){
  .kreuz{grid-template-columns:minmax(0,1fr);}
  .kreuz::before,.kreuz::after,.kreuz-punkt{display:none;}
  .kreuz-feld{border-top:1px solid var(--linie-fein);}
  .kreuz-feld:first-child{border-top:none;}
}

/* ---------- Heller Seitenkopf ----------
   Impressum, Datenschutz, AGB und Kontakt haben im Entwurf keinen dunklen
   Banner, sondern beginnen schlicht auf hellem Grund. */
.hellkopf{
  background:var(--creme);
  padding:clamp(150px,15.3vw,294px) 0 clamp(30px,3.5vw,66px);
}
.hellkopf h1{max-width:20ch;}
.hellkopf .lead{max-width:60ch;margin-top:18px;}

/* ---------- Kontaktseite ----------
   Links Anschrift, rechts die Karte, darunter das Formular auf hellerem Grund. */
.kontaktkopf{background:var(--bg);padding:clamp(150px,15.3vw,294px) 0 clamp(60px,7vw,120px);}
.paar-kontakt{
  display:grid;grid-template-columns:minmax(0,565fr) minmax(0,956fr);
  gap:clamp(34px,4vw,80px);align-items:start;
}
.kzeilen{margin-top:clamp(30px,3.4vw,66px);}
.kzeilen > div{
  border-top:1px solid var(--linie);padding:clamp(18px,1.8vw,34px) 0 0;
  margin-bottom:clamp(18px,1.8vw,34px);
}
.kzeilen dt{font-size:var(--h5);letter-spacing:var(--eng);font-weight:400;color:var(--dunkel);}
.kzeilen dd{font-size:16px;line-height:27px;color:var(--grau);margin-top:6px;}
.kzeilen dd a{text-decoration:underline;text-underline-offset:3px;}
.kzeilen dd a:hover{color:var(--text);}
@media(max-width:900px){
  .paar-kontakt{grid-template-columns:minmax(0,1fr);}
}


/* ---------- Banner der Leistungsseiten ----------
   Rechts oben eine kurze Zeile mit Stern, auf der KI-Seite unten rechts
   zusaetzlich eine Bildkarte. Masse aus den Frames bei 1920 px:
   Stern 35 x 35 bei y 230, Zeile 386 breit, Karte 410 x 241. */
/* Seit v14 steht dort nur noch die Beispielkarte der KI-Seite, und die gehoert
   ans untere Ende. Stern und Zeile sind auf Jonas' Wunsch raus. */
.hero-seite{
  align-self:stretch;display:flex;flex-direction:column;
  justify-content:flex-end;gap:clamp(30px,4vw,70px);
}
/* Die Zeile steht im Entwurf hoeher als der Kicker, deshalb bekommt die linke
   Spalte einen Vorlauf. */
.hero-raster--dienst > div:first-child{padding-top:clamp(0px,4vw,80px);}
.hero-karte{
  border-radius:var(--r-klein);overflow:hidden;position:relative;
  background:linear-gradient(135deg,#e2e0da,#cfcdc6);
  aspect-ratio:410/241;width:100%;
}
.hero-karte img{width:100%;height:100%;object-fit:cover;}
.hero-karte[data-platz]::after{
  content:attr(data-platz);position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(25,24,24,.34);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;padding:16px;
}
@media(max-width:1100px){
  .hero-raster--dienst > div:first-child{padding-top:0;}
  .hero-seite{gap:26px;}
}

/* =========================================================================
   Handyansicht  ·  v11, 21.08.2026
   Gemessen bei echten 390 CSS-Pixeln. Headless Chrome klemmt die Layoutbreite
   unter Windows bei 526 fest, deshalb waren die Fehler vorher nicht sichtbar.
   ========================================================================= */


/* .logoreihe:not(.logoreihe--drei) ist spezifischer als .logoreihe. Die
   Zweispalten-Regel fuer schmale Schirme kam dadurch nie an. */
@media(max-width:560px){
  .logoreihe:not(.logoreihe--drei){grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:760px){
  /* Das Bild stand rechtsbuendig und schmal ueber dem Text, mit einer leeren
     Flaeche daneben. Auf dem Handy laeuft es ueber die ganze Breite. */
  .lzeile-bild{max-width:none;margin-left:0;height:auto;aspect-ratio:326/150;}
  /* Die Stufenmaske aus vier Rechtecken ergibt bei 300 px Breite nur noch
     Bloecke. Auf dem Handy bleibt das Bild eine schlichte Flaeche. */
  .maskbild{
    -webkit-mask-image:none;mask-image:none;
    aspect-ratio:4/3;border-radius:var(--r);
  }
}

/* =========================================================================
   Runde vom 24.08.2026  ·  nach Jonas' zwei Sprachnachrichten
   ========================================================================= */

/* ---------- Pille auf dem Bild, gläsern ----------
   Im Entwurf liegt die Pille nicht weiss auf dem Bild, sondern durchscheinend.
   Davor steht ein kleines dunkles Quadrat. */
.bild-pille{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-color:transparent;
  box-shadow:0 10px 30px rgba(25,24,24,.14);
  display:inline-flex;align-items:center;gap:12px;
}
.bild-pille::before{
  content:"";width:7px;height:7px;flex:none;border-radius:1px;background:var(--dunkel);
}
.creme .bild-pille,.beige .bild-pille{border-color:transparent;}

/* ---------- Wortmarke der Unterseiten buendig ----------
   Jonas: die Marke soll auf der Unterkante des Banners aufliegen und direkt an
   die Logoleiste anschliessen. line-height 1 haelt die Unterlaengen im Kasten. */
.subhero{padding-bottom:0;}
.subhero .wortmarke{padding-top:clamp(30px,4vw,70px);line-height:1;}

/* ---------- Ablauf, fuenf Karten mit Eckausschnitt ----------
   Im Entwurf drei Karten oben, zwei versetzt darunter, je 513 x 355 von 1600.
   Oben rechts ein Ausschnitt mit Pfeil, oben links ein Zeichen. */
.ablauf{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.9vw,30px);
}
.ablauf > *{grid-column:span 2;}
.ablauf > *:nth-child(4){grid-column:2/4;}
.ablauf > *:nth-child(5){grid-column:4/6;}
.astufe{position:relative;--knopf:clamp(34px,2.6vw,50px);}
.astufe-flaeche{
  background:var(--weiss);border-radius:var(--r);
  padding:clamp(22px,2.2vw,40px);
  min-height:clamp(210px,18.4vw,355px);
  display:flex;flex-direction:column;
  transition:box-shadow .35s var(--e);
  /* Ausschnitt oben rechts fuer den Pfeil */
  -webkit-mask-image:radial-gradient(circle at calc(100% - var(--knopf)/2) calc(var(--knopf)/2),
    transparent calc(var(--knopf)/2 + clamp(10px,.9vw,17px)),
    #000 calc(var(--knopf)/2 + clamp(10px,.9vw,17px) + 1px));
  mask-image:radial-gradient(circle at calc(100% - var(--knopf)/2) calc(var(--knopf)/2),
    transparent calc(var(--knopf)/2 + clamp(10px,.9vw,17px)),
    #000 calc(var(--knopf)/2 + clamp(10px,.9vw,17px) + 1px));
}
.astufe:hover .astufe-flaeche{box-shadow:0 20px 50px rgba(25,24,24,.10);}
.astufe .eckpfeil{
  position:absolute;right:0;top:0;width:var(--knopf);height:var(--knopf);
  border-radius:50%;display:grid;place-items:center;color:var(--text);
  transition:background .3s var(--e),color .3s var(--e),transform .35s var(--e);
}
.astufe:hover .eckpfeil{background:var(--dunkel);color:var(--weiss);transform:rotate(45deg);}
.astufe .eckpfeil svg{width:42%;height:42%;}
.astufe .zeichen{
  width:clamp(34px,2.6vw,50px);height:clamp(34px,2.6vw,50px);
  color:var(--dunkel);margin-bottom:auto;
}
.astufe .zeichen svg{width:100%;height:100%;}
.astufe h3{font-size:var(--h5);letter-spacing:var(--eng);font-weight:400;margin:clamp(26px,3vw,56px) 0 8px;}
.astufe p{font-size:15px;line-height:24px;color:var(--grau);}
@media(max-width:900px){
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ablauf > *,.ablauf > *:nth-child(4),.ablauf > *:nth-child(5){grid-column:span 1;}
  .astufe-flaeche{min-height:0;}
}
@media(max-width:560px){
  .ablauf{grid-template-columns:minmax(0,1fr);}
}

/* ---------- Phasen als Kette ----------
   Im Entwurf vier Pillen nebeneinander, durch Linien verbunden. Die letzte
   Phase steht hell, die davor dunkel. */
.kette{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-bottom:clamp(28px,3vw,50px);}
.kette-glied{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  background:var(--weiss);color:var(--text);border-radius:100px;
  padding:12px 22px;font-size:16px;letter-spacing:var(--eng);
  font-family:inherit;border:none;cursor:pointer;text-align:left;
  box-shadow:0 8px 24px rgba(25,24,24,.10);
  transition:background .35s var(--e),color .35s var(--e),box-shadow .35s var(--e);
}
/* Schwarz ist der Zustand, nicht die Grundfarbe. Immer nur ein Chip. */
.kette-glied[aria-selected="true"]{
  background:var(--dunkel);color:var(--weiss);box-shadow:none;
}
.kette-glied:hover{box-shadow:0 10px 28px rgba(25,24,24,.16);}
.kette-glied[aria-selected="true"]:hover{box-shadow:none;}
.kette-glied svg{width:20px;height:20px;flex:none;}
.kette-glied--offen{
  background:var(--weiss);color:var(--text);box-shadow:0 8px 24px rgba(25,24,24,.10);
}
.kette-strich{flex:1 1 24px;min-width:18px;height:1px;background:var(--dunkel);}
.kette-strich--leise{background:var(--linie);}
.kette-fuss{border-top:1px solid var(--linie-fein);padding-top:clamp(24px,2.6vw,42px);}
.kette-fuss p{max-width:62ch;color:var(--grau);}
.kette-liste{list-style:none;margin-top:18px;max-width:78ch;}
.kette-liste li{position:relative;padding-left:20px;margin-bottom:9px;font-size:16px;line-height:26px;color:var(--grau);}
.kette-liste li::before{content:"";position:absolute;left:2px;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--dunkel);}
.kette-liste b{color:var(--text);font-weight:500;}
@media(max-width:760px){
  .kette{flex-direction:column;align-items:flex-start;gap:10px;}
  .kette-strich{display:none;}
}


/* ---------- Banner der Leistungsseiten, Hoehe und Fusslage ----------
   Jonas: die Wortmarke soll unten aufliegen und die Beispielkarte soll unten in
   der Hero-Section sitzen, nicht mittig. Dafuer wird der Banner zur Spalte und
   das Raster fuellt den Platz dazwischen. */
.subhero:has(.hero-raster--dienst){
  display:flex;flex-direction:column;
  min-height:min(1000px,100vh);min-height:min(1000px,100svh);
}
/* width:100% ist hier Pflicht. Der Banner ist eine Flex-Spalte, und das
   margin:0 auto aus .wrap schaltet das Strecken ab. Ohne feste Breite schrumpft
   der Kasten auf seinen Inhalt und dieselbe Mitte-Regel rueckt ihn dann in die
   Mitte des Banners. Auf Foerderung und Engineering stand die Ueberschrift
   dadurch 105 px zu weit rechts, waehrend die Wortmarke darunter am Rand blieb.
   Dieselbe Falle wie beim Banner der Startseite. */
.subhero:has(.hero-raster--dienst) .hero-raster{flex:1;width:100%;}
.subhero:has(.hero-raster--dienst) .wortmarke{margin-top:auto;}

/* ---------- Beispielkarte mit Bildwechsel ----------
   Im Entwurf laufen dort mehrere Beispiele durch. */
.hero-karte{isolation:isolate;}
.hk-dia{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#e2e0da,#cfcdc6);
  color:rgba(25,24,24,.34);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;padding:18px;
  opacity:0;transition:opacity .9s var(--e);
}
.hk-dia::after{content:attr(data-platz);}
.hk-dia.an{opacity:1;}
.hk-punkte{position:absolute;left:14px;bottom:12px;display:flex;gap:5px;z-index:2;}
.hk-punkte i{width:5px;height:5px;border-radius:50%;background:rgba(25,24,24,.28);display:block;transition:background .3s var(--e);}
.hk-punkte i.an{background:var(--dunkel);}


/* ---------- Beispielkarte im KI-Banner ----------
   Jonas: weiter nach rechts und weiter nach unten. Der Versatz nach rechts geht
   in den Seitenrand hinein, der nach unten in das Band der Wortmarke. Beides in
   vw, damit es mitwaechst. Auf schmalen Schirmen faellt der Versatz weg. */
.hero-raster--dienst .hero-karte{
  /* Versatz ueber relative Verschiebung. transform faellt aus, weil die
     Einblendung diese Eigenschaft schon belegt und beim Erscheinen auf none
     zuruecksetzt. left und top stoeren das Raster nicht. */
  position:relative;
  left:clamp(0px,4vw,80px);
  top:clamp(0px,11vw,210px);
}
@media(max-width:1100px){
  .hero-raster--dienst .hero-karte{left:0;top:0;}
}


/* ---------- Banner der Leistungsseiten, Breite und Fusslinie ----------
   Jonas: die Ueberschrift soll die ganze Bannerbreite nutzen und nicht mittig
   enden. Wo die rechte Spalte leer ist, faellt sie ganz weg, sonst reserviert
   das Raster weiter 455 px, die niemand braucht. */
.hero-raster--dienst:not(:has(.hero-seite)){grid-template-columns:minmax(0,1fr);}
.subhero h1{max-width:26ch;}
/* Auf der KI-Seite bleibt die Ueberschrift in ihrer Spalte, weil rechts daneben
   die Beispielkarte steht. Ein Versuch, sie ueber die volle Breite laufen zu
   lassen, hat die Karte in die Ueberschrift geschoben. */
.subhero:has(.hero-seite) h1{max-width:20ch;}


/* ---------- Marke buendig auf der Kante ----------
   Die Grundlinie sitzt auf der Kante zur naechsten Sektion. Unterlaengen wie
   das g in Förderung schneiden sauber auf der Farbkante ab, das ist gewollt. */
.hero .wortmarke{margin-bottom:-.024em;}
/* KI hat keine Unterlaenge. Ohne Nachhilfe bleibt unter der Grundlinie der
   Platz stehen, den bei Förderung das g fuellt. */
.wortmarke--kurz{margin-bottom:-.149em;}


/* ---------- Kundenlogos als Laufband ----------
   Jonas: nicht weiss hinterlegt, sondern in der Hintergrundfarbe, und die Logos
   sollen durchlaufen. Die feste Reihe bleibt fuer die Mitgliedschaften auf
   Über uns, die soll stehen. Zwei gleiche Saetze nebeneinander, der Lauf endet
   bei -50 Prozent und setzt dadurch ohne Sprung wieder an. */
/* Der Grund ist derselbe wie in der Flaeche darunter, die Leiste setzt sich
   also nicht ab. Im Entwurf haben Leiste und der Bereich Unser Ansatz exakt
   denselben Ton, getrennt nur durch die feinen Linien. Vorher stand hier --bg
   und war damit eine Spur dunkler als die Umgebung. */
.logozug{
  background:var(--creme);overflow:hidden;
  border-top:1px solid var(--linie-fein);border-bottom:1px solid var(--linie-fein);
}
/* 7 s je Logo, damit das Band bei mehr Logos nicht schneller laeuft (14 Logos). */
.logoband{display:flex;width:max-content;animation:logozug 98s linear infinite;}
.logozug:hover .logoband{animation-play-state:paused;}
.logosatz{display:flex;flex:none;}
.logozug .logo-feld{
  width:clamp(190px,20vw,384px);min-height:clamp(96px,9.95vw,191px);
  border-left:1px solid var(--linie-fein);border-top:none;
}
@keyframes logozug{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .logoband{animation:none;}
}


/* ---------- Bannerinhalt auf volle Breite ----------
   .wrap hat margin:0 auto. In einer Flex-Spalte schaltet das die Streckung ab,
   der Kasten schrumpft auf seinen Inhalt und steht mittig. Der Banner der
   Startseite war dadurch rund 150 px enger als die Wortmarke darunter, Text und
   Marke standen nicht auf derselben Kante. */
.hero > .wrap{width:100%;}

/* ---------- Karten im Banner ----------
   Jonas: schmaler, weiter nach rechts und weiter nach unten. Der Versatz laeuft
   ueber die relative Verschiebung, transform ist von der Einblendung belegt. */
/* nur der Banner der Startseite, die Leistungsseiten behalten ihre Spalte */
.hero > .hero-raster{grid-template-columns:minmax(0,1fr) minmax(0,360px);}
/* Diese Regel steht hinter der allgemeinen Handy-Abfrage und wuerde sie sonst
   aushebeln. Dann klemmt die Ueberschrift auf 350 px Breite neben eine
   360-px-Spalte und bricht Buchstabe fuer Buchstabe um. */
@media(max-width:1100px){
  .hero > .hero-raster{grid-template-columns:minmax(0,1fr);}
}
.schwebe{
  position:relative;
  left:clamp(0px,3.4vw,64px);
  top:clamp(0px,5.2vw,100px);
}
@media(max-width:1100px){
  .schwebe{left:0;top:0;max-width:360px;}
}


/* ---------- Leiste auf den Gruenderbildern ----------
   Beim Zeigen faehrt rechts eine helle Pille mit LinkedIn und Instagram ein,
   ueber dem Eckpfeil. Die Kachel ist deshalb kein Link mehr, sondern ein div:
   in einen Link duerfen keine weiteren Links. Ziel haengt jetzt am Pfeil und
   am Namen. */
.mitglied{display:block;}
.mitglied .name{display:inline-block;}
.mitglied .name:hover{text-decoration:underline;text-underline-offset:3px;}
/* Jonas: die Leiste war zu klein und stand zu dicht am unteren Bildrand.
   Sie ist jetzt breiter, die Zeichen sind groesser, und der Abstand nach unten
   waechst von rund zwoelf auf rund dreissig Pixel. Gerechnet wird ab dem
   Eckpfeil, damit sich die beiden nie beruehren. */
.sozial{
  position:absolute;right:clamp(12px,1.15vw,20px);
  bottom:calc(var(--knopf) + clamp(20px,1.9vw,34px));
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,1.3vw,22px);
  padding:clamp(14px,1.3vw,22px) 0;
  width:clamp(46px,3.5vw,64px);
  background:var(--weiss);border-radius:100px;
  box-shadow:0 10px 30px rgba(25,24,24,.18);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .35s var(--e),transform .35s var(--e);
}
.mitglied:hover .sozial,.mitglied:focus-within .sozial{
  opacity:1;transform:none;pointer-events:auto;
}
.sozial a,.sozial .sozial-fehlt{
  display:grid;place-items:center;color:var(--dunkel);
  width:clamp(24px,1.7vw,30px);height:clamp(24px,1.7vw,30px);
  transition:opacity .2s var(--e);
}
.sozial a:hover{opacity:.55;}
/* Ohne hinterlegte Adresse bleibt das Zeichen sichtbar, aber ohne Ziel. */
.sozial .sozial-fehlt{opacity:.32;cursor:default;}
.sozial svg{width:100%;height:100%;}
@media(hover:none){
  /* Ohne Zeiger gibt es kein Zeigen. Dort steht die Leiste dauerhaft. */
  .sozial{opacity:1;transform:none;pointer-events:auto;}
}


/* ---------- Ablaufkarten, Text erst beim Zeigen ----------
   Der Platz bleibt reserviert, es wird nur die Deckkraft geschaltet. Sonst
   springen die Karten in der Hoehe, sobald der Zeiger darueberfaehrt.
   Die Abfrage laeuft ueber die Breite und nicht ueber (hover:none). Letztere
   greift auch auf Notebooks mit Touchscreen, dort stuende der Text dann
   dauerhaft offen. */
.astufe p{
  opacity:0;transform:translateY(6px);
  transition:opacity .32s var(--e),transform .32s var(--e);
}
.astufe:hover p,.astufe:focus-within p{opacity:1;transform:none;}
@media(max-width:1100px){
  .astufe p{opacity:1;transform:none;}
}


/* ---------- Karte auf der Kontaktseite ----------
   Die Grafik hat jetzt dasselbe Verhaeltnis wie Jonas' Rahmen, 956 zu 609, und
   fuellt ihn dadurch ganz aus. Vorher war sie in Zylinderprojektion mit 2.43 zu
   1 gezeichnet und lag mit Luft oben und unten im Kasten, deshalb wirkte sie zu
   klein. Im Entwurf beginnt sie ausserdem 43 px ueber der Ueberschrift. */
.karte-flaeche{
  position:relative;
  top:calc(-1 * clamp(0px,2.24vw,43px));
}
.karte-flaeche img{width:100%;height:100%;object-fit:contain;max-height:none;}
@media(max-width:900px){
  .karte-flaeche{top:0;}
}


/* ---------- Unser Ansatz auf der Foerderungsseite ----------
   Masse aus Jonas' Frame: Textspalte 675, Bildspalte 785, Abstand 140, das Bild
   785 x 831. Der Rest ist dieselbe Kette wie bei den vier Phasen auf der
   KI-Seite. */
.paar-ansatz{
  display:grid;grid-template-columns:minmax(0,675fr) minmax(0,785fr);
  gap:clamp(34px,7.3vw,140px);align-items:center;
}
.bild--ansatz{aspect-ratio:785/831;}
/* Die Kette soll in einer Zeile bleiben. Bricht sie um, steht das letzte
   Glied allein darunter und die Verbindung ergibt keinen Sinn mehr. */
@media(min-width:1101px){.paar-ansatz .kette{flex-wrap:nowrap;}}
@media(max-width:1100px){
  .paar-ansatz{grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,50px);}
}


/* ---------- Beispiele aus der Praxis ----------
   Drei gleich breite Karten, im Entwurf je 513 x 633 von 1600. Die Zitatkarten
   sind hell, mit grossem Zeichen oben links und einer Aussparung unten rechts,
   derselben Form wie bei den Gruenderbildern. */
.praxis{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.9vw,30px);
}
/* Masse aus dem Frame, Zeile fuer Zeile am Bild abgetastet: die Karte ist
   456 x 590, die Aussparung unten rechts ist ein Kreis mit Radius 45, dessen
   Mittelpunkt genau in der Ecke sitzt. Meine erste Fassung hatte Radius 35 und
   einen nach innen versetzten Mittelpunkt, dadurch war der Ausschnitt zu klein
   und sass zu weit im Feld. */
.bild--praxis{aspect-ratio:456/590;}
.stimme{position:relative;}
.stimme-flaeche{
  background:var(--weiss);border-radius:var(--r);
  padding:clamp(24px,2.9vw,46px);
  aspect-ratio:456/590;
  display:flex;flex-direction:column;
  --aus:clamp(30px,2.8vw,45px);
  -webkit-mask-image:radial-gradient(circle at 100% 100%,
    transparent var(--aus), #000 calc(var(--aus) + 1px));
  mask-image:radial-gradient(circle at 100% 100%,
    transparent var(--aus), #000 calc(var(--aus) + 1px));
}
.stimme-zeichen{display:block;width:clamp(64px,6.9vw,110px);color:#E4E2DC;line-height:0;}
.stimme-zeichen svg{width:100%;height:auto;display:block;}
.stimme blockquote{margin:clamp(24px,2.6vw,48px) 0 auto;}
.stimme p{
  font-size:clamp(16px,1.15vw,22px);line-height:1.55;letter-spacing:var(--eng);color:var(--text);
}
.stimme-wer{
  display:flex;align-items:center;gap:12px;margin-top:24px;
  font-size:14px;line-height:20px;color:var(--text);max-width:76%;
}
.stimme-wer .foto{
  width:clamp(34px,2.4vw,46px);height:clamp(34px,2.4vw,46px);border-radius:12px;
  background:#E4E2DC;flex:none;
}
@media(max-width:900px){
  .praxis{grid-template-columns:minmax(0,1fr);}
  .stimme-flaeche{aspect-ratio:auto;}
}


/* ---------- Pille auf dem maskierten Bild ----------
   Im Entwurf sitzt sie nicht in der Ecke, sondern weiter innen. Unten links ist
   die Form ausgeschnitten, dort wuerde die Pille frei in der Luft haengen. */
.bild-halter:has(.maskbild) .bild-pille{left:20%;bottom:13%;}
@media(max-width:760px){
  .bild-halter:has(.maskbild) .bild-pille{left:14px;bottom:14px;}
}


/* ---------- Chipleisten als Reiter ----------
   Jonas: der aktive Chip ist schwarz, darunter steht der Text dazu, und nach
   einer Weile rueckt der naechste vor. Die Striche vor dem aktiven Chip sind
   kraeftig, die dahinter leise, damit man den Fortschritt sieht.

   Die Tafeln liegen uebereinander im selben Rasterfeld. Uebereinander heisst:
   die hoechste Tafel gibt die Hoehe vor und beim Wechsel springt nichts.
   Untereinander waere die Seite bei jedem Wechsel gehuepft. */
.kette-strich{transition:background .35s var(--e);}
.js .kette-stapel{display:grid;}
.js .kette-tafel{
  grid-area:1/1;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--e),transform .4s var(--e);
  pointer-events:none;
}
.js .kette-tafel.an{opacity:1;transform:none;pointer-events:auto;}
/* Ohne JavaScript stehen alle Tafeln untereinander und sind lesbar. Das
   hidden-Attribut wird dann beim Start entfernt. */
.kette-tafel + .kette-tafel{margin-top:26px;}
.js .kette-tafel + .kette-tafel{margin-top:0;}


/* ---------- Menue nach der Wahl zuklappen ----------
   Steht hinter der Regel fuers Zeigen, damit sie gewinnt. Ohne das bliebe das
   Menue offen, solange die Maus darauf steht. */
.menue-zu .menue{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;}
.menue-zu .chev{transform:none;}


/* ---------- Bild in der Maske wechselt mit dem Zitat ----------
   Die Bilder liegen uebereinander im selben Kasten, sichtbar ist immer nur
   eines. Das erste traegt die Klasse schon im Quelltext, damit ohne
   JavaScript ein Bild steht statt keines. */
.maskbild--wechsel img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--e);}
.maskbild--wechsel img.an{opacity:1;}


/* ---------- Banner Über uns auf volle Hoehe ----------
   Jonas: der Banner soll sich fast ueber die Seite strecken, wie bei den
   Dienstleistungen. Dieselbe Mindesthoehe wie dort. Der Anker ist das
   data-dias am Banner, das gibt es nur auf dieser Seite. So bleibt der
   flachere Banner der Uebersichtsseite Leistungen unberuehrt. */
.subhero[data-dias]{
  min-height:min(1000px,100vh);min-height:min(1000px,100svh);
  display:flex;flex-direction:column;
}
.subhero[data-dias] > .wrap{width:100%;}


/* ---------- Über uns: mehr Luft und ein buendiger Textblock ----------
   Jonas: die Sektionen wirken gequetscht, und der Text unter dem Bild soll auf
   dessen Kante stehen. Die Luft gilt nur auf dieser Seite, deshalb haengt der
   Wert an der Seitenklasse und nicht an :root. Alle Sektionen darin erben ihn.
   Zwischen zwei Sektionen sind es damit rund 216 statt 156 Pixel. */
.seite-ueber-uns{--luft:clamp(84px,7.4vw,142px);}
/* Das Filmband laeuft ohne eigenes Polster von Kante zu Kante. Damit es
   nicht an der Logoreihe und an der Werteliste klebt, bekommt es auf
   dieser Seite Abstand ueber die Aussenkante statt ueber Polster, sonst
   waere das schwarze Feld selbst hoeher geworden. */
/* Oben schliesst das Band direkt an die Logoreihe an, unten bleibt der
   Abstand zur Werteliste. */
.seite-ueber-uns .film{margin:0 0 clamp(30px,3.2vw,60px);}

/* Der Block steht wie das Bild in der Mitte und ist darin linksbuendig
   gesetzt. Vorher lief er ueber kopf--links an den Seitenrand und begann
   damit rund 220 Pixel weiter links als das Bild. */
.kopf--unterbild{text-align:left;}
.kopf--unterbild .lead{margin-left:0;margin-right:0;}


/* ---------- Einsatzfelder auf der KI-Seite ----------
   Masse aus Jonas' Frame Our Expertise: linker Kasten 823 breit und 556 hoch,
   darin das Bild 770 x 442 mit 26 Innenabstand, rechts die Textspalte 611 mit
   110 Abstand. Der Strich darunter ist 229 breit und steht mittig unter dem
   Kasten. Die Faelle liegen im Stapel uebereinander, damit die Hoehe beim
   Wechsel nicht springt. */
.einsatz{
  display:grid;grid-template-columns:minmax(0,823fr) minmax(0,611fr);
  gap:clamp(30px,5.7vw,110px);align-items:start;
}
.ef-stapel,.ef-seite{display:grid;}
.ef-karte,.ef-text{grid-area:1/1;}
.js .ef-karte,.js .ef-text{
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .7s var(--e),transform .7s var(--e);
}
.js .ef-karte.an,.js .ef-text.an{opacity:1;transform:none;pointer-events:auto;}
.ef-karte{
  margin:0;background:var(--weiss);border-radius:var(--r);
  padding:clamp(12px,1.62vw,26px);
}
.ef-bild{border-radius:var(--r-klein);overflow:hidden;aspect-ratio:770/442;background:var(--bg);}
.ef-bild img{width:100%;height:100%;object-fit:cover;}
.ef-name{
  display:flex;align-items:center;gap:15px;
  margin-top:clamp(14px,1.6vw,26px);padding-bottom:clamp(4px,.9vw,14px);
  font-size:clamp(14px,1.15vw,18px);letter-spacing:var(--eng);color:var(--text);
}
.ef-name::before{content:"";width:7px;height:7px;background:var(--dunkel);flex:none;}
/* Im Entwurf beginnen Kasten und Titel auf derselben Hoehe. */
.ef-seite{padding-top:0;}
.ef-text h3{font-size:clamp(22px,2.3vw,44px);line-height:1.14;letter-spacing:-.03em;}
.ef-text .lead{margin-top:clamp(14px,1.4vw,26px);max-width:38ch;}

/* Der Strich zeigt, an welcher Stelle man ist, und laesst sich anklicken. */
.ef-bahn{
  display:flex;gap:0;width:clamp(150px,11.9vw,229px);
  margin:clamp(34px,4.2vw,80px) auto 0;
}
.ef-strich{
  flex:1;height:2px;border:none;padding:0;background:rgba(25,24,24,.16);
  cursor:pointer;transition:background .4s var(--e);
}
.ef-strich.an{background:var(--dunkel);}
@media(max-width:1100px){
  .einsatz{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.4vw,40px);}
  .ef-seite{padding-top:0;}
}


/* ---------- Kundenlogos im laufenden Band ----------
   Die Logos kommen aus verschiedenen Quellen und haben sehr verschiedene
   Proportionen. Eine gemeinsame Hoehengrenze und eine Breitengrenze halten
   sie im Band gleich gross. Grau und leicht gedimmt, wie im Entwurf, wo die
   Logos einfarbig stehen. Beim Zeigen kommt die Farbe. */
.logo-bild{
  /* --f kommt je Bild aus dem Markup und gleicht die Form aus. Ein
     breiter Schriftzug bekommt weniger Hoehe als ein Signet. */
  max-height:calc(var(--f,1) * clamp(26px,2.4vw,44px));
  max-width:clamp(120px,13vw,230px);
  width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;
  transition:filter .35s var(--e),opacity .35s var(--e);
}
.logozug:hover .logo-bild,.logoreihe .logo-bild:hover{filter:none;opacity:1;}


/* Ein Klick oeffnet und schliesst das Menue. Steht hinter der Marke fuers
   Zuklappen, damit ein Klick auf den Knopf wieder aufmacht. */
.hut.auf .menue{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.hut.auf .chev{transform:rotate(180deg);}


/* ---------- Unterzeile im Banner Über uns ----------
   Jonas' Textentwurf hat dort eine Zeile unter der Überschrift. Gleiche Maße
   wie die Unterzeile im Banner der Startseite. */
.subhero .unter{max-width:560px;font-size:17px;line-height:28px;margin:-4px 0 30px;color:var(--auf-dunkel);}

/* ---------- Zeilenumbrueche ----------
   Headlines verteilen ihre Woerter gleichmaessig auf die Zeilen, damit kein
   einzelnes Wort allein in der letzten Zeile steht. Fliesstext vermeidet
   ebenfalls ein einzelnes Wort am Absatzende. */
h1,.h1,h2,.h2,h3,h4,.faq summary,.lzeile-kopf .titel,.kicker{text-wrap:balance;}
p,blockquote,li{text-wrap:pretty;}

/* ---------- Gruenderkarten (v63) ----------
   Beide Fotos samt Namen sollen auf einem Laptop ohne Scrollen zu sehen sein.
   Deshalb Format 4:5 und eine feste Hoechstbreite fuer das Paar. Die Fotos
   sind auf denselben Zuschnitt gebracht, Scheitel und Kinn liegen gleich. */
.team{max-width:740px;margin-inline:auto;}
.mitglied .bild{aspect-ratio:4/5;}
.mitglied{position:relative;display:flex;flex-direction:column;}
.mitglied .bild-eck{margin-bottom:18px;}

/* Kurzbeschreibung. Mit Maus liegt sie beim Ueberfahren unten auf dem Foto.
   Der Absatz deckt dafuer genau die Bildflaeche ab (gleiches Format 4:5). */
.bildtext{margin:0;}
@media(hover:hover){
  .mitglied .bildtext{
    position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;
    display:flex;align-items:flex-end;
    padding:clamp(16px,1.6vw,24px);
    padding-right:calc(var(--knopf,48px) + clamp(14px,1.4vw,22px));
    border-radius:inherit;
    background:linear-gradient(to top,rgba(24,24,24,.94) 0,rgba(24,24,24,.8) 22%,rgba(24,24,24,0) 48%);
    color:var(--weiss);font-size:15px;line-height:23px;
    opacity:0;transform:translateY(10px);
    transition:opacity .35s var(--e),transform .35s var(--e);
    pointer-events:none;
  }
  .mitglied:hover .bildtext,.mitglied:focus-within .bildtext{opacity:1;transform:none;}
  /* Hat die Karte einen Pfeil, bleibt der Kreis in der Ecke frei wie beim Foto. */
  .mitglied:has(.eckknopf) .bildtext{
    -webkit-mask-image:radial-gradient(circle at calc(100% - var(--knopf)/2) calc(100% - var(--knopf)/2),
      transparent calc(var(--knopf)/2 + clamp(16px,1.35vw,26px)),
      #000 calc(var(--knopf)/2 + clamp(16px,1.35vw,26px) + 1px));
    mask-image:radial-gradient(circle at calc(100% - var(--knopf)/2) calc(100% - var(--knopf)/2),
      transparent calc(var(--knopf)/2 + clamp(16px,1.35vw,26px)),
      #000 calc(var(--knopf)/2 + clamp(16px,1.35vw,26px) + 1px));
  }
  .mitglied:not(:has(.eckknopf)) .bildtext{padding-right:clamp(16px,1.6vw,24px);}
}
/* Ohne Maus (Handy, Tablet) steht der Text dauerhaft unter Name und Rolle. */
@media(hover:none){
  .mitglied .bildtext{order:3;margin-top:10px;font-size:15px;line-height:23px;color:var(--grau);}
  .mitglied .mitglied-fuss{order:2;}
}
/* Karten ohne eigene Personenseite: Name ist kein Link. */
.mitglied span.name{display:inline-block;}
/* Ohne Pfeil braucht das Foto keine Aussparung in der Ecke. */
.bild-eck:not(:has(.eckknopf)) .bild{-webkit-mask-image:none;mask-image:none;}


/* ---------- Kennzeichnung KI-generierter Bilder (Art. 50 Abs. 4 KI-VO) ----------
   Kleines Etikett im Bildrahmen, standardmaessig unten links. Im Banner unten
   rechts, damit es nicht mit dem grossen Schriftzug kollidiert. In der Maske
   oben links, weil die Maske die unteren Ecken ausschneidet. */
.ki-marke{
  position:absolute;left:12px;bottom:12px;z-index:3;
  padding:3px 9px;border-radius:999px;
  background:rgba(25,24,24,.58);color:#fff;
  font-size:11px;line-height:1.35;font-weight:500;letter-spacing:.02em;
  pointer-events:none;white-space:nowrap;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.menue-foto,.ef-bild{position:relative;}
.hero-bild .ki-marke{left:auto;right:clamp(16px,2vw,32px);bottom:clamp(12px,1.4vw,20px);}
.maskbild .ki-marke{left:18px;top:18px;bottom:auto;}
/* Rahmen mit Bildpille unten links: Etikett nach oben links. */
.bild-halter .ki-marke{top:12px;bottom:auto;}


/* ---------- Foerdercheck auf der Kontaktseite ----------
   Links der Ablauf in drei Schritten, rechts das Formular auf weisser Karte.
   Pflicht sind nur Unternehmen, Website und E-Mail. Der Rest ist freiwillig
   und zum Teil eingeklappt, damit die Huerde klein bleibt. */
.fc-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);align-items:start;}
.fc-schritte{list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;counter-reset:fc;display:grid;gap:20px;}
.fc-schritte li{counter-increment:fc;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;
  font-size:16px;line-height:26px;color:var(--grau);}
.fc-schritte li::before{content:"0" counter(fc);grid-row:1 / span 2;font-size:14px;line-height:var(--h6-lh);color:var(--grau);}
.fc-schritte li > span{grid-column:2;}
.fc-schritte b{display:block;font-weight:500;color:var(--text);font-size:var(--h6);line-height:var(--h6-lh);margin-bottom:2px;}
.fc-karte{background:var(--weiss);border-radius:var(--r);padding:clamp(24px,3vw,44px);}
.fc-karte input,.fc-karte select,.fc-karte textarea{background:transparent;}
.fc-karte textarea{min-height:110px;}
.fc-wahl{border:0;padding:0;margin:0;min-width:0;}
.fc-karte .feld[hidden]{display:none;}
.fc-wahl legend{font-size:var(--h6);font-weight:500;color:var(--text);padding:0;margin-bottom:12px;}
.fc-optionen{display:flex;flex-wrap:wrap;gap:10px;}
.fc-optionen label{position:relative;display:inline-flex;align-items:center;padding:9px 18px;
  border:1px solid var(--linie);border-radius:999px;font-size:15px;font-weight:500;cursor:pointer;
  transition:background .25s var(--e),color .25s var(--e),border-color .25s var(--e);}
.fc-optionen input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0;}
.fc-optionen label:hover{border-color:var(--dunkel);}
.fc-optionen label:has(input:checked){background:var(--dunkel);border-color:var(--dunkel);color:var(--weiss);}
.fc-optionen label:has(input:focus-visible){outline:2px solid var(--dunkel);outline-offset:2px;}
.fc-frei{font-weight:400;font-size:14px;color:var(--grau);margin-left:6px;}
.fc-mehr{margin-top:24px;border-top:1px solid var(--linie);padding-top:18px;}
.fc-mehr summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  font-size:var(--h6);font-weight:500;color:var(--text);}
.fc-mehr summary::-webkit-details-marker{display:none;}
.fc-mehr summary::before{content:"+";display:inline-grid;place-items:center;width:24px;height:24px;flex:none;
  border:1px solid var(--linie);border-radius:50%;font-size:16px;line-height:1;transition:transform .3s var(--e);}
.fc-mehr[open] summary::before{transform:rotate(45deg);}
.fc-mehr .formular{margin-top:22px;}
.nobr{white-space:nowrap;}
.fc-falle{position:absolute !important;left:-9999px;width:1px !important;height:1px;opacity:0;}
.fc-status{font-size:15px;color:var(--grau);margin-top:10px;}
.fc-status:empty{display:none;}
.fc-status.fehler{color:#9b2c2c;}
.fc-danke h3{font-size:var(--h4);line-height:var(--h4-lh);font-weight:500;margin-bottom:10px;}
.fc-danke p{font-size:16px;line-height:26px;color:var(--grau);}
@media(max-width:900px){
  .fc-raster{grid-template-columns:minmax(0,1fr);}
}