/* ---------------------------------------------------------------------
   Kinoschicht: alles, was die Seite größer wirken lässt, als sie ist.
   Liegt getrennt von der Startseite, damit man sie im Ganzen abschalten
   kann, wenn sie einmal stört.
   --------------------------------------------------------------------- */

/* Text im Aufmacher liegt über dem Hintergrund. */
.aufmacher .inhalt,.aufmacher .statuszeile{position:relative;z-index:10}

/* Überschriften kommen räumlich herein: jede Zeile kippt aus der Tiefe
   nach vorn, statt nur hochzurutschen. Das ist der Unterschied zwischen
   einer Animation und einer Kamera. */
.film{perspective:900px}
.film .zl{perspective:900px}
.film .zi{transform-origin:50% 100%;
  transform:translateY(108%) rotateX(38deg);
  transition:transform 1.15s var(--weich)}
.film.da .zi,.auf.da .film .zi{transform:none}

/* Große Überschriften bekommen beim Auftritt einen Hauch Leuchten mit,
   das dann ausläuft. */
@keyframes anleuchten{0%{text-shadow:0 0 42px rgba(143,216,231,.5)}100%{text-shadow:0 20px 60px rgba(0,0,0,.6)}}
.film.da .zi{animation:anleuchten 1.6s var(--weich) forwards}

/* Bewegter Aufmacher: der Clip liegt über dem Standbild und blendet auf,
   sobald er wirklich läuft. Kommt er nicht, bleibt das Bild stehen und
   niemand merkt etwas. */
.aufmacher .film-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 50%;opacity:0;transition:opacity 1.4s ease;will-change:opacity}
.aufmacher .film-bg.laeuft{opacity:1}
@media (max-width:900px){.aufmacher .film-bg{display:none}}

/* Ladevorhang: Wortmarke, eine Linie läuft voll, dann fährt alles auf. */
.vorspann{position:fixed;inset:0;z-index:101;background:var(--grund);display:grid;place-items:center;
  transition:opacity .7s ease .55s,visibility .7s .55s}
.vorspann .mitte{display:grid;justify-items:center;gap:26px}
.vorspann img{height:74px;width:auto;opacity:0;transform:translateY(14px);animation:vorspannLogo 1s var(--weich) .1s forwards}
.vorspann .linie{width:min(240px,50vw);height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.vorspann .linie i{display:block;height:100%;background:linear-gradient(90deg,var(--tuerkis),var(--gruen));
  transform:scaleX(0);transform-origin:0 50%;animation:vorspannLinie 1.15s var(--weich) .3s forwards}
html:not(.vorhang) .vorspann{opacity:0;visibility:hidden}
@keyframes vorspannLogo{to{opacity:1;transform:none}}
@keyframes vorspannLinie{to{transform:scaleX(1)}}

/* Lichtstreifen, der langsam über den Aufmacher zieht (Anamorphot-Look) */
.aufmacher .streif{position:absolute;top:-40%;left:-30%;width:40%;height:180%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(143,216,231,.16),rgba(255,255,255,.06),transparent);
  transform:rotate(14deg);filter:blur(22px);animation:streifen 11s ease-in-out infinite}
@keyframes streifen{0%{transform:rotate(14deg) translateX(-30vw);opacity:0}
  18%{opacity:1}42%{opacity:0}100%{transform:rotate(14deg) translateX(150vw);opacity:0}}

/* Hinweis, dass es weitergeht */
.weiterhinweis{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:rgba(234,244,245,.45);z-index:1}
.weiterhinweis .schiene{width:1px;height:54px;background:linear-gradient(180deg,rgba(46,171,197,.7),transparent);position:relative;overflow:hidden}
.weiterhinweis .schiene i{position:absolute;left:0;width:1px;height:16px;background:var(--tuerkis-hell);animation:rutschen 2.4s ease-in-out infinite}
@keyframes rutschen{0%{top:-16px}60%,100%{top:54px}}
@media (max-width:760px){.weiterhinweis{display:none}}

/* Zwei Bereiche als Karten: oben das Bild, darunter der Text auf ruhigem
   Grund. Bild und Schrift überlagern sich nie, das bleibt in jeder Größe
   lesbar. */
.bereiche .paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px);
  margin-top:clamp(28px,3.4vw,52px);align-items:stretch;perspective:1400px}
.bereich{position:relative;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  border:1px solid var(--rand);border-radius:26px;padding:0 0 clamp(26px,3vw,38px);
  background:rgba(255,255,255,.022);
  transform:rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg)) translateY(var(--kz,0px));
  transition:border-color .4s ease,transform .6s var(--weich)}
.bereich.zeigt{transition:border-color .4s ease,transform .12s linear}
.bereich:hover{border-color:rgba(46,171,197,.55);--kz:-5px}
.bereich .kachelbild{position:relative;aspect-ratio:16/10;overflow:hidden;margin-bottom:6px}
.bereich .kachelbild img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.2s var(--weich),filter .8s ease;
  filter:saturate(.9) brightness(.95)}
.bereich:hover .kachelbild img{transform:scale(1.08);filter:saturate(1) brightness(1.05)}
.bereich .kachelbild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,9,11,.75) 88%,rgba(4,9,11,.96) 100%)}
.bereich .glanz{display:none}
.bereich>h2,.bereich>.einzeiler,.bereich>.worte,.bereich>.tasten{
  padding-left:clamp(24px,2.8vw,40px);padding-right:clamp(24px,2.8vw,40px)}
.bereich h2{font-size:clamp(28px,3.2vw,44px);margin-top:-2px}
.bereich .einzeiler{color:var(--leise);font-size:clamp(16px,1.3vw,18px);max-width:44ch}
.bereich .worte{display:flex;flex-wrap:wrap;gap:8px}
.bereich .worte span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(143,216,231,.86);border:1px solid rgba(46,171,197,.3);border-radius:999px;padding:6px 13px}
.bereich .tasten{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:auto;padding-top:8px}
.bereich .weiterlesen{font-size:15px;color:rgba(143,216,231,.85)}
@media (max-width:860px){.bereiche .paar{grid-template-columns:1fr}}

/* Der Unterschied: vier Paare, links gestrichen, rechts abgehakt. Man
   erfasst es, statt es zu lesen. */
.paare{margin-top:clamp(28px,3.4vw,52px);display:grid;gap:0;
  border-top:1px solid rgba(255,255,255,.1)}
.paarzeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(16px,2.4vw,40px);padding:clamp(18px,2.2vw,28px) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(24px);
  transition:opacity .8s ease,transform .9s var(--weich)}
.paare.da .paarzeile{opacity:1;transform:none}
.paare.da .paarzeile:nth-child(3){transition-delay:.08s}
.paare.da .paarzeile:nth-child(4){transition-delay:.16s}
.paare.da .paarzeile:nth-child(5){transition-delay:.24s}
.paare.da .paarzeile:nth-child(6){transition-delay:.32s}
/* Der Haken wird gezeichnet, statt einfach da zu sein. */
.paarzeile .mit .zeichen svg path{stroke-dasharray:18;stroke-dashoffset:18;
  transition:stroke-dashoffset .6s var(--weich) .25s}
.paare.da .paarzeile .mit .zeichen svg path{stroke-dashoffset:0}
.paarzeile .pfeil{transform:translateX(-8px);opacity:0;transition:.7s var(--weich) .2s}
.paare.da .paarzeile .pfeil{transform:none;opacity:1}
.paarzeile .ohne,.paarzeile .mit{display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,1.9vw,26px);line-height:1.2}
.paarzeile .ohne{color:rgba(234,244,245,.42);text-decoration:line-through;
  text-decoration-color:rgba(234,244,245,.3);text-decoration-thickness:1px}
.paarzeile .mit{color:var(--schrift)}
.paarzeile .zeichen{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.paarzeile .ohne .zeichen{border:1px solid rgba(234,244,245,.22)}
.paarzeile .mit .zeichen{background:rgba(46,171,197,.16);border:1px solid rgba(46,171,197,.55)}
.paarzeile .zeichen svg{width:13px;height:13px}
.paarzeile .ohne .zeichen svg{stroke:rgba(234,244,245,.45)}
.paarzeile .mit .zeichen svg{stroke:var(--tuerkis-hell)}
.paarzeile .pfeil{color:rgba(46,171,197,.4);font-size:20px;line-height:1}
.paare .titelzeile{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,40px);
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.paare .titelzeile span{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(234,244,245,.45)}
.paare .titelzeile span.jetzt{color:var(--tuerkis)}
@media (max-width:760px){
  .paarzeile,.paare .titelzeile{grid-template-columns:1fr;gap:10px}
  .paarzeile .pfeil,.paare .titelzeile .pfeil{display:none}
  .paarzeile{padding:18px 0}
}


/* Der Einstieg als Zeitleiste: eine Schiene, drei Knoten, die nacheinander
   angehen, sobald der Abschnitt im Blick ist. */
.schiene{position:relative;margin-top:clamp(36px,4.4vw,64px)}
.gleis{position:absolute;left:22px;right:22px;top:21px;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.gleis i{display:block;height:100%;background:linear-gradient(90deg,var(--tuerkis),var(--gruen));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--weich) .15s}
.schiene.da .gleis i{transform:scaleX(1)}
.schiene .schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,48px);position:relative}
.schiene .schritte li{display:flex;flex-direction:column;gap:12px}
.knoten{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--grund);border:1px solid rgba(255,255,255,.18);position:relative;z-index:1;
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.04em;
  color:rgba(234,244,245,.45);transition:.7s var(--weich)}
.schiene.da .knoten{background:linear-gradient(rgba(46,171,197,.16),rgba(46,171,197,.16)),var(--grund);border-color:var(--tuerkis);
  color:var(--tuerkis-hell);box-shadow:0 0 0 6px rgba(46,171,197,.1)}
.schiene.da li:nth-child(2) .knoten{transition-delay:.5s}
.schiene.da li:nth-child(3) .knoten{transition-delay:1s}
.schiene .schritte h3{margin:6px 0 0}
.schiene .schritte p{color:var(--leise);font-size:17px}
@media (max-width:760px){
  .gleis{left:21px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .gleis i{width:100%;height:100%;transform:scaleY(0);transform-origin:50% 0;
    transition:transform 1.8s var(--weich) .15s}
  .schiene.da .gleis i{transform:scaleY(1)}
  .schiene .schritte{grid-template-columns:1fr;gap:30px}
  .schiene .schritte li{padding-left:64px;position:relative}
  .knoten{position:absolute;left:0;top:0}
}

/* Newsletter: erst die Ausgabe wählen, dann die Adresse */
.newsletter .wahl{border:0;padding:0;margin:0;display:grid;gap:10px}
.newsletter .wahl legend{padding:0;font-size:15px;color:rgba(234,244,245,.78);margin-bottom:10px}
.newsletter .wahl label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:13px 16px;
  transition:border-color .3s ease,background .3s ease}
.newsletter .wahl label:hover{border-color:rgba(46,171,197,.5)}
.newsletter .wahl label:has(input:checked){border-color:var(--tuerkis);background:rgba(46,171,197,.1)}
.newsletter .wahl input{accent-color:var(--tuerkis);margin-top:3px}
.newsletter .wahl span{display:grid;gap:2px;font-size:14px;color:rgba(234,244,245,.6)}
.newsletter .wahl b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--schrift)}
.newsletter .feldname{font-size:15px;color:rgba(234,244,245,.78);margin-top:4px}

/* Weiterentwicklung: drei Absätze, breit gesetzt, ruhiger als der Rest */
.weitertext{display:grid;gap:22px;margin-top:clamp(26px,3vw,42px);max-width:78ch}
.weitertext p{color:var(--leise);font-size:clamp(17px,1.5vw,21px)}
.weitertext p:first-child{color:var(--schrift);font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2vw,27px);letter-spacing:-.02em;line-height:1.3}

/* Partner: erst warum, dann die Namen */
.partnertext{margin-top:clamp(20px,2.4vw,32px);max-width:70ch;color:var(--leise);font-size:clamp(17px,1.5vw,21px)}
.partnerliste{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.partnerliste .chip{display:inline-flex;align-items:baseline;gap:10px;padding:9px 18px}
.partnerliste .chip b{font-family:var(--display);font-weight:700;letter-spacing:.01em;color:var(--schrift)}
.partnerliste .chip i{font-style:normal;font-size:14px;color:rgba(234,244,245,.55)}

/* Region: erst die Aussage, dann die Orte */
.regiontext{margin:clamp(22px,2.6vw,34px) auto 0;max-width:62ch;color:var(--leise);font-size:clamp(17px,1.5vw,21px)}
.regionzusatz{margin:16px auto 0;max-width:62ch;color:rgba(234,244,245,.5);font-size:16px}

/* Lücke, die Christian noch füllen muss. Fällt in der Vorschau auf und
   darf so nie auf die echte Seite. */
.luecke{background:rgba(216,154,78,.22);color:#F2C98A;padding:2px 8px;border-radius:6px;
  font-family:var(--display);font-weight:700;font-size:.82em;letter-spacing:.06em}

/* Titelkarte im Vollbild */
.titelkarte{position:relative;height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:0 var(--seite)}
.titelkarte .bild{position:absolute;inset:0;z-index:-2;overflow:hidden}
.titelkarte .bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform;filter:brightness(.62)}
.titelkarte::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%,rgba(4,9,11,.35),rgba(4,9,11,.94))}
.titelkarte h2{font-size:clamp(46px,11vw,168px);letter-spacing:-.06em;line-height:.92}
.titelkarte p{margin-top:26px;font-size:clamp(17px,1.8vw,23px);color:rgba(234,244,245,.78);max-width:620px;margin-left:auto;margin-right:auto}
.titelkarte .balken{position:absolute;left:0;right:0;height:9vh;background:#000;z-index:1}
.titelkarte .balken.oben{top:0}.titelkarte .balken.unten{bottom:0}

/* Leistungen: sechs Bänder über die volle Breite, eines unter dem anderen.
   Das Bild läuft bis an den Rand der Seite, die Seite wechselt von Band zu
   Band. So bekommt jede Leistung ihren eigenen Auftritt. */
.leistungen{padding-left:0;padding-right:0}
.leistungen .kopfzeile{padding:0 var(--seite);margin-bottom:clamp(30px,4vw,60px)}
.leistungsliste{display:flex;flex-direction:column}
.leistung{display:grid;grid-template-columns:1.06fr 1fr;align-items:stretch;
  border-top:1px solid rgba(255,255,255,.09)}
.leistung:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.leistung .bild{position:relative;overflow:hidden;min-height:clamp(250px,42vh,460px)}
/* Das Bild ist größer als sein Ausschnitt und wandert beim Scrollen darin.
   Nur eine Verschiebung, keine Größenänderung: das bleibt ruhig und kostet
   die Grafikkarte nichts. */
.leistung .bild img{width:100%;height:100%;object-fit:cover;will-change:transform;
  transform:translate3d(0,var(--py,0px),0) scale(1.14);
  filter:saturate(.6) contrast(1.06) brightness(.82);transition:filter .9s ease}
.leistung:hover .bild img{filter:saturate(1) contrast(1.02) brightness(1)}

/* Der Text jedes Bandes kommt mit, sobald das Band im Blick ist. */
.leistung .text>*{opacity:0;transform:translateY(22px);
  transition:opacity .9s ease,transform 1.1s var(--weich)}
.leistung.da .text>*{opacity:1;transform:none}
.leistung.da .text>*:nth-child(2){transition-delay:.1s}
.leistung.da .text>*:nth-child(3){transition-delay:.2s}
.leistung .bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 55%,rgba(4,9,11,.55) 100%);opacity:.9}
.leistung:nth-child(even) .bild::after{background:linear-gradient(270deg,transparent 55%,rgba(4,9,11,.55) 100%)}
.leistung .text{display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(32px,4.5vw,72px) var(--seite)}
.leistung .text h3{font-size:clamp(27px,3.4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.04}
.leistung .text p{font-size:clamp(17px,1.5vw,21px);color:var(--leise);max-width:46ch}
.leistung .text .stich{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.leistung .text .stich span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(143,216,231,.75);border:1px solid rgba(46,171,197,.3);border-radius:999px;padding:6px 14px}
/* Jedes zweite Band spiegelt sich: Bild rechts, Text links. */
.leistung:nth-child(even) .bild{order:2}
@media (max-width:820px){
  .leistung{grid-template-columns:1fr}
  .leistung:nth-child(even) .bild{order:0}
  .leistung .bild{min-height:clamp(200px,34vh,300px)}
  .leistung .text{padding:clamp(26px,6vw,40px) var(--seite) clamp(34px,7vw,48px)}
}

/* Laufband mit der Wortmarke */
.laufband{overflow:hidden;padding:clamp(28px,4vw,56px) 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.laufband .spur{display:flex;gap:56px;width:max-content;animation:laufen 38s linear infinite}
.laufband span{font-family:var(--display);font-weight:800;font-size:clamp(38px,7vw,96px);letter-spacing:-.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(143,216,231,.32)}
.laufband span.voll{color:rgba(46,171,197,.16);-webkit-text-stroke:0}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Bilder ziehen beim Auftritt auf, statt nur einzublenden */
.enthuellen{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--weich)}
.da .enthuellen,.enthuellen.da{clip-path:inset(0 0 0 0)}

/* Bildgrade: zurückgenommen im Ruhezustand, voll beim Überfahren */
.karte img{filter:saturate(.62) contrast(1.06) brightness(.9);transition:transform .8s var(--weich),filter .6s ease}
.karte:hover img{filter:none}

@media (prefers-reduced-motion: reduce){
  .aufmacher .streif,.weiterhinweis{display:none}
  .vorspann{display:none}
  .enthuellen{clip-path:none}
  .titelkarte{height:auto;padding:clamp(80px,10vw,140px) var(--seite)}
  .laufband .spur{animation:none}
  .fahrt .buehne{position:static;height:auto}
  .fahrt .reihe{flex-wrap:wrap;transform:none !important}
}

/* Übergänge: keine harten Kanten mehr zwischen den Abschnitten */
.titelkarte .balken{display:none}
.titelkarte::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--grund) 0%,rgba(4,9,11,.35) 14%,transparent 30%,
    transparent 70%,rgba(4,9,11,.35) 86%,var(--grund) 100%)}

/* Abstände zwischen zusammengehörenden Abschnitten enger ziehen */
.bereiche{padding-top:clamp(24px,3vw,46px);padding-bottom:clamp(26px,3.4vw,52px)}
#ausgangslage{padding-top:clamp(26px,3.4vw,52px);padding-bottom:clamp(30px,4vw,60px)}
.leistungen{padding-top:clamp(30px,4vw,60px)}

/* Hervorhebungen in Überschriften, gleiche Farbe wie im Aufmacher */
.film em{font-style:normal;color:var(--tuerkis)}

/* Die beiden Spaltenköpfe der Gegenüberstellung sollen auffallen */
.paare .titelzeile{padding-bottom:16px}
.paare .titelzeile span{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:800;font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(234,244,245,.4)}
.paare .titelzeile span::before{content:"";width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(234,244,245,.3)}
.paare .titelzeile span.jetzt{color:var(--tuerkis-hell)}
.paare .titelzeile span.jetzt::before{background:var(--tuerkis);border-color:var(--tuerkis);
  box-shadow:0 0 0 4px rgba(46,171,197,.18)}
.paare .titelzeile span.pfeil::before{display:none}

/* Was in der Pauschale steckt, als abgehakte Liste in der Preiskarte */
.drin-titel{margin-top:22px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--schrift)}
ul.drin{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
ul.drin li{position:relative;padding-left:28px;font-size:16px;color:var(--leise);line-height:1.4}
ul.drin li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:rgba(46,171,197,.16);border:1px solid rgba(46,171,197,.5)}
ul.drin li::after{content:"";position:absolute;left:5px;top:10px;width:5px;height:8px;
  border:solid var(--tuerkis-hell);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

/* Beratungsthemen der Weiterentwicklung */
ul.themen{list-style:none;margin:6px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 26px}
ul.themen li{position:relative;padding-left:22px;font-size:clamp(16px,1.4vw,19px);color:var(--schrift)}
ul.themen li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--tuerkis)}

/* Partner: helle Felder mit dem Namen darunter. Logos auf dunklem Grund
   einzufärben wäre bequemer, verstößt aber gegen fast jede Markenrichtlinie. */
.partnerliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(14px,1.8vw,26px);align-items:start;margin-top:clamp(24px,3vw,40px)}
.partner-eintrag{display:grid;gap:10px;justify-items:center;text-align:center}
.partnerfeld{display:grid;place-items:center;width:100%;min-height:84px;padding:16px 20px;
  border-radius:14px;background:#fff;transition:transform .35s var(--weich),box-shadow .35s ease}
.partner-eintrag:hover .partnerfeld{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.partnerfeld img{max-width:100%;max-height:42px;width:auto;height:auto}
.partnername{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(234,244,245,.55)}

/* Kontakt: alle Wege auf einen Blick */
.kontaktfelder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(20px,2.6vw,40px);margin-top:clamp(28px,3.4vw,52px)}
.kontaktfeld{display:grid;gap:12px;align-content:start;
  border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
.kontaktfeld .gross{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,1.9vw,25px);color:var(--schrift)}
.kontaktfeld .gross:hover{color:var(--tuerkis-hell)}
.kontaktfeld address{font-style:normal;color:var(--leise);font-size:17px;line-height:1.5}
.kontaktfeld .knopf{justify-self:start}

/* Solange ein Logo fehlt, steht der Name da, statt eines kaputten Bildes. */
.partnerfeld.ohnelogo{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.partnerfeld.ohnelogo img{display:none}
.partnerfeld.ohnelogo::after{content:attr(data-name);font-family:var(--display);font-weight:700;
  font-size:16px;color:rgba(234,244,245,.7)}

/* Solange ein Logo fehlt, steht der Name da, statt eines kaputten Bildes. */
.partnerfeld.ohnelogo img{display:none}
.partnerfeld.ohnelogo::after{content:attr(data-name);font-family:var(--display);font-weight:700;
  font-size:16px;color:rgba(234,244,245,.7)}

/* Sieben Menüpunkte plus Knopf brauchen auf mittleren Bildschirmen weniger
   Luft, sonst bricht die Kopfzeile um. */
.kopf nav a{white-space:nowrap}
@media (max-width:1200px){
  .kopf nav{gap:clamp(10px,1.3vw,20px);font-size:15px}
  .kopf .knopf{padding:10px 17px;font-size:15px}
  .kopf img{height:clamp(40px,4.2vw,58px)}
}
@media (max-width:1010px){
  .kopf nav{gap:9px;font-size:14px}
  .kopf .knopf{padding:9px 14px;font-size:14px}
}

/* Die Gegenüberstellung steht jetzt ohne Spaltenköpfe. */
.paare .titelzeile{display:none}