/* site.css — macht aus dem Canvas-Design (feste 1440px-Frames) eine fließende,
   responsive Website. Lädt NACH sysfacts-a.css und hauptseiten-extra.css. */

html{scroll-behavior:smooth}

/* ---------- 1440-Raster ----------
   Kein Seitenrahmen: Die Flächen laufen bis zum Bildschirmrand, wie das Brand
   Manual es für die Website vorsieht. Der Inhalt bleibt aber im 1440-Raster mit
   60px Rand (Manual 2.0, Seite 10) — sonst zieht er sich auf breiten Schirmen
   auseinander, die Eyebrow klebt links außen, der Kreiscluster rechts außen,
   und die Hero-Section verliert ihre Form.

   --gutter-min ist der linke wie rechte Innenrand: mindestens 60px, auf breiten
   Schirmen so viel, dass der Inhalt eine 1440px-Spalte bildet. */
:root{--grid:1440px;--gutter-min:60px}
/* Deep, damit das Gummiband beim Überscrollen am Seitenende zur Footer-Fläche
   passt. --bg/--bg2 sind auf .lp definiert und hier oben nicht sichtbar,
   deshalb der Token aus tokens/colors.css. */
body{background:var(--sf-green-deep)}

/* Frames aus dem Canvas-Modus in normalen Dokumentfluss überführen */
.frame{position:static;width:auto !important;left:auto;top:auto}
.lp{min-height:100vh}

/* Alle direkten Kinder von .lp tragen das Raster. Die Liste ist vollständig
   über alle zehn Seiten geprüft — kommt ein neuer Sektionstyp dazu, muss er
   hier ergänzt werden, sonst läuft er als einziger bis zum Rand. */
.lp nav,
.lp .hero,
.lp .herolight,
.lp .sect,
.lp .statement,
.lp .cta,
.lp .stage,
.lp .chain,
.lp .logoband,
.lp .sectbridge,
.lp .techbruecke,
.lp .pxlegal,
.lp .pagefoot{padding-inline:max(var(--gutter-min), calc((100% - var(--grid)) / 2 + var(--gutter-min)))}
.lp .pl-foot{margin-inline:max(var(--gutter-min), calc((100% - var(--grid)) / 2 + var(--gutter-min)))}

a.btn{cursor:pointer}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Bild-Platzhalter (ersetzt <image-slot> aus dem Design-Tool) ---------- */
.imgslot{position:absolute;inset:0;border:.5px dashed color-mix(in oklab,currentColor 35%,transparent);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;background:color-mix(in oklab,currentColor 4%,transparent)}
.imgslot.rect{border-radius:0}
.logoband .ls .imgslot{padding:6px;font-size:8.5px}

/* Play-Button-Dreieck ohne SVG */
.playov .playbtn::before{content:"";display:block;width:0;height:0;border-left:18px solid currentColor;border-top:11px solid transparent;border-bottom:11px solid transparent}

/* Caseband: rechte Bildzelle braucht im gestapelten Layout eine Höhe */
.caseband>div:last-child{min-height:280px}

/* Hero der Startseite: drei Spalten inkl. Kreiscluster (aus dem Design-Frame) */
.herohome{grid-template-columns:230px 1fr auto;padding-bottom:130px}
@media (max-width:1100px){.herohome{grid-template-columns:1fr;padding-bottom:56px}}

/* Video-Testimonial-Band (Startseite) */
.vband .vmedia{height:clamp(420px,48vw,620px) !important}
.vband h3{font-size:clamp(20px,2.6vw,30px)}
.vband .playbtn{pointer-events:auto;cursor:pointer}
.vband .playbtn:hover{opacity:.85}

/* ---------- Navigation ----------
   Bleibt beim Scrollen oben stehen. Sie braucht dafür eine eigene Fläche: im
   Fluss war sie durchsichtig und hätte den durchlaufenden Inhalt gezeigt.
   Die vorhandene Hairline am unteren Rand trennt sie vom Inhalt darunter.

   Kein Platz geht verloren, weil sticky das Element im Fluss belässt — anders
   als position:fixed, das einen Ausgleich am Seitenanfang nötig machen würde.

   Hier und nicht in hauptseiten-extra.css: Das Design-Canvas rendert
   unbewegliche Frames, Scrollverhalten gibt es dort nicht. */
.lp nav{flex-wrap:wrap;gap:16px;position:sticky;top:0;z-index:20;background:var(--bg)}
/* Auf der Startseite steht die Navigation im hellen Kopfbereich. Die Regel muss
   hier stehen und nicht in hauptseiten-extra.css: Die Flaeche kommt erst durch
   das sticky-Verhalten zustande, und site.css laedt spaeter. */
.lp .topfold nav{background:var(--paper)}

/* Sprungziele der Proxmox-Seite (#plattform, #wechsel, #betrieb …) landen sonst
   unter der Navigation. scroll-padding-top hält sie darunter frei; der Wert
   folgt der gemessenen Navigationshöhe je Breakpoint (91/83/75px plus Luft).

   Die Proxmox-Navigation trägt zusätzlich den Angebots-CTA und ist deshalb
   höher — zwischen rund 960 und 1260px bricht sie sogar auf zwei Zeilen um
   (gemessen: 147 bis 155px). Sie bekommt eigene Werte, angesprochen über
   :has(), damit kein HTML angefasst werden muss. Wo :has() fehlt, greift der
   Grundwert; das Sprungziel liegt dann etwas zu hoch, aber nie verdeckt. */
html{scroll-padding-top:var(--nav-h)}
/* Gemessen: Die Leiste ist mit dem groesseren Logo 99px hoch (vorher 91).
   Der Wert haelt Sprungziele darunter frei und traegt etwas Luft. */
:root{--nav-h:104px}
html:has(.lp-proxmox){--nav-h:104px}
@media (max-width:1260px){
  html:has(.lp-proxmox){--nav-h:164px}
}
.navtoggle{display:none;background:none;border:.5px solid var(--line);border-radius:4px;padding:10px;cursor:pointer;flex-direction:column;gap:5px}
.navtoggle span{display:block;width:22px;height:1.5px;background:var(--paper)}

/* ---------- Kontaktformular ---------- */
.sf-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.sf-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.sf-form input,.sf-form select,.sf-form textarea{font-family:var(--font-ui);font-size:15px;letter-spacing:-.2px;color:var(--ink);background:#fff;border:.5px solid var(--line-ink);border-radius:4px;padding:12px 14px;width:100%}
.sf-form input:focus,.sf-form select:focus,.sf-form textarea:focus{outline:2px solid var(--acc-ink);outline-offset:0}
.sf-form textarea{min-height:120px;resize:vertical}
.sf-form button{border:0;cursor:pointer}
.sf-form .hint{font-family:var(--font-display);font-size:12.5px;line-height:1.5;color:color-mix(in oklab,var(--ink) 60%,var(--paper))}

/* ==================================================================
   Proxmox-Landingpage
   ================================================================== */
.heropx{grid-template-columns:200px minmax(0,1fr) minmax(280px,340px);padding-bottom:100px}
/* Headline etwas kleiner als auf der Startseite: die Mittelspalte teilt sich
   den Platz mit dem Screenshot, und „Verantwortet betrieben.“ ist eine lange Zeile. */
.hero.heropx h1{font-size:clamp(34px,3.9vw,52px)}
.heroshot{align-self:center;display:flex;flex-direction:column;gap:10px;min-width:0}
.lp-proxmox nav .navcta{display:flex;align-items:center;gap:18px}
.logoband.plain .logos4{grid-template-columns:repeat(4,minmax(0,1fr))}
.logoband.plain .logos4 .ls{height:84px}
.timeline.tl6{grid-template-columns:repeat(6,1fr)}
.opgrid{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start}
.pxlegal{padding:20px 60px;border-top:.5px solid var(--line);display:flex;justify-content:space-between;gap:24px;font-family:var(--font-ui);font-size:12px;color:color-mix(in oklab,var(--paper) 55%,var(--bg))}
.lp-proxmox .nofit .kpis>div{padding-right:14px}
.lp-proxmox .nofit .kpis span{line-height:1.5}

@media (max-width:1100px){
  .heropx{grid-template-columns:1fr;padding-bottom:56px}
  .heroshot{align-self:stretch}
  .timeline.tl6{grid-template-columns:repeat(3,1fr);gap:0 24px}
  .opgrid{grid-template-columns:1fr;gap:36px}
  .logoband.plain .logos4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pxlegal{padding:20px 32px;flex-direction:column;gap:8px}
}
@media (max-width:700px){
  .timeline.tl6{grid-template-columns:1fr}
  .logoband.plain .logos4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pxlegal{padding:20px}
  .lp-proxmox nav .navcta{flex-direction:row;justify-content:space-between;width:100%;margin-top:14px}
  .lp-proxmox .nofit .kpis{flex-direction:column;gap:14px}
  .lp-proxmox .nofit .kpis>div{border-right:0;padding-left:0 !important}
}

/* ==================================================================
   Scroll-Animationen
   Überschreibt bewusst Regeln aus hauptseiten-extra.css — die Datei wird
   aus Claude Design synchronisiert, Korrekturen gehören deshalb hierher.
   ================================================================== */

/* Fortschrittslinie. Sie kommt in zwei Rollen vor, die unterschiedlich laufen
   muessen:

   1. Als Footer-Leiste, direktes Kind von .lp, kurz vor dem Footer. Sie zeigt
      den Seitenfortschritt. In hauptseiten-extra.css haengt sie an view() mit
      Ziel „cover 45 %“ — das kann sie nie erreichen, weil das Element ganz
      unten sitzt und den Viewport nie durchlaeuft. Am Seiten-Scrollfortschritt
      gehaengt wird sie unten garantiert voll.

      Der Bereich lag bei 85 % bis 100 % der Scrollstrecke. Gemessen erscheint
      die Leiste aber erst, wenn nur noch rund 93px Scrollweg uebrig sind — bei
      85 % war sie dann schon zu 73 bis 90 % gefuellt, je nach Seitenlaenge.
      --plfill ist deshalb genau dieser Restweg: Die Leiste ist leer, wenn sie
      ins Blickfeld kommt, und fuellt sich auf den letzten Pixeln.
      Der Wert folgt der Footerhoehe und aendert sich mit ihr an den
      Breakpoints (gemessen: 91/75/129px Footer, 93/77/131px Restweg).

   2. Als Trenner mitten auf der Proxmox-Seite, innerhalb einer .sect. Dort
      waere der Seitenfortschritt falsch: Die Leiste kommt bei rund 60 % der
      Seite vorbei und stuende bis 85 % leer da. Sie haengt deshalb an ihrer
      eigenen Sichtbarkeit. */
:root{--plfill:92px}
@supports (animation-timeline: view()) {
  .lp > .pl-foot .sg{animation:pl-grow linear both;animation-timeline:scroll(root block);animation-range:calc(100% - var(--plfill)) 100%}
  .sect .pl-foot .sg{animation:pl-grow linear both;animation-timeline:view();animation-range:cover 0% cover 45%}
}

/* Zeitleiste (Historie auf der Unternehmensseite, Phasen auf der Proxmox-Seite):
   Die Linie füllt sich beim Scrollen, die Punkte leuchten nacheinander auf. */
.timeline{position:relative;view-timeline-name:--tlline}
.timeline::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);animation:tl-fill 1.6s cubic-bezier(.4,0,.2,1) .15s both}
.tl::before{transform:scale(.5);opacity:.3;animation:tl-dot .45s cubic-bezier(.34,1.4,.64,1) both}
.tl:nth-child(1)::before{animation-delay:.20s}
.tl:nth-child(2)::before{animation-delay:.46s}
.tl:nth-child(3)::before{animation-delay:.72s}
.tl:nth-child(4)::before{animation-delay:.98s}
.tl:nth-child(5)::before{animation-delay:1.24s}
.tl:nth-child(6)::before{animation-delay:1.50s}
@keyframes tl-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tl-dot{from{transform:scale(.5);opacity:.3}to{transform:scale(1);opacity:1}}

@supports (animation-timeline: view()) {
  .timeline::after{animation:tl-fill linear both;animation-timeline:view();animation-range:cover 8% cover 42%}
  /* Punkte hängen an der Zeitleiste selbst (--tlline), nicht an der eigenen Spalte:
     Die Spalten treten alle gleichzeitig ins Bild, nur so leuchten sie nacheinander auf. */
  .tl::before{animation:tl-dot linear both;animation-timeline:--tlline}
  .tl:nth-child(1)::before{animation-range:cover 8%  cover 15%}
  .tl:nth-child(2)::before{animation-range:cover 15% cover 22%}
  .tl:nth-child(3)::before{animation-range:cover 22% cover 29%}
  .tl:nth-child(4)::before{animation-range:cover 29% cover 35%}
  .tl:nth-child(5)::before{animation-range:cover 35% cover 41%}
  .tl:nth-child(6)::before{animation-range:cover 41% cover 46%}
}

/* Einspaltig (Mobil) stehen die Einträge untereinander. Eine waagerechte Füllleiste
   am oberen Rand wäre dort ohne Bezug und sofort aus dem Bild gescrollt. Stattdessen
   leuchtet jeder Punkt auf, wenn sein eigener Eintrag ins Bild kommt. */
@media (max-width:700px){
  .timeline::after{display:none}
  /* Vertikale Verbindungslinie: macht aus den gestapelten Einträgen eine echte
     Timeline statt loser Punkte. Punkt links, Linie darunter, Inhalt rechts. */
  .timeline .tl{padding:2px 0 26px 26px}
  .timeline .tl::before{top:7px;left:0}
  .timeline .tl::after{content:"";position:absolute;left:4px;top:18px;bottom:-4px;width:.5px;background:var(--line)}
  .timeline .tl:last-child::after{display:none}
  @supports (animation-timeline: view()) {
    .tl::before{animation-timeline:view()}
    .tl:nth-child(1)::before,.tl:nth-child(2)::before,.tl:nth-child(3)::before,
    .tl:nth-child(4)::before,.tl:nth-child(5)::before,.tl:nth-child(6)::before{
      animation-range:entry 10% entry 70%}
  }
}

/* Wer Bewegung reduziert haben will, sieht den Endzustand ohne Animation. */
@media (prefers-reduced-motion: reduce){
  .timeline::after,.tl::before,.pl-foot .sg,.pl-foot .ct{animation:none !important}
  .core,.ring,.onode{animation:none !important;opacity:1}
  .herometa::before{animation:none !important;transform:scaleX(1)}
  /* Ohne Bewegung steht die Sequenz im Endzustand: zwei oben, zwei unten.
     Die Kippung der hinteren beiden muss dabei erhalten bleiben, sonst faellt
     der Umschlag weg und es sind nur noch vier gleiche Formen. */
  .sectbridge .flipseq i,.statement .flipseq i{animation:none !important;opacity:var(--o)}
  .sectbridge .flipseq i:nth-child(3),.sectbridge .flipseq i:nth-child(4),
  .statement .flipseq i:nth-child(3),.statement .flipseq i:nth-child(4){transform:rotate(180deg)}
  .ringdeco i{animation:none !important;opacity:1;transform:translate(-50%,-50%) scale(1)}
  .tolfuell,.tolziel,.tolring{animation:none !important;transform:none;opacity:1}
  .tbfuell,.tbpunkt{animation:none !important;transform:none;opacity:1}
  .timeline::after{transform:scaleX(1)}
  .tl::before{transform:scale(1);opacity:1}
}

/* ==================================================================
   Logoband (Startseite + Referenz-Header)
   Die Gestaltung — Papier-Kacheln, Label, Hairlines — steht bewusst NICHT hier,
   sondern in hauptseiten-extra.css. Sie ist eine Gestaltungsentscheidung und
   gehört damit ins Claude-Design-Projekt, sonst sieht der Entwurf dort anders
   aus als die ausgelieferte Seite. Hier bleibt nur, was die Ebene ausmacht:
   das Umbrechen des Rasters auf schmalen Schirmen. */
@media (max-width:1100px){
  .logoband.plain{padding-block:28px 30px}
  .logoband.plain .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .logoband.plain{padding-block:24px 26px}
  .logoband.plain .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Referenzen: Kundenlogo im Case-Band.
   Die Logos stehen auf einem hellen Plättchen statt aufgehellt zu werden. Ein
   pauschaler Aufhell-Filter funktioniert nur bei einfarbig dunklen Logos: Bei
   mehrfarbigen (Hanebutt) verschwindet die Wortmarke, bei Logos mit ausgesparter
   weißer Schrift (IHK) wird der Block weiß und die Schrift damit unsichtbar.
   Auf dem Plättchen behalten alle Marken ihre echten Farben. */
.caselogo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px}
.caselogo img{height:26px;width:auto;display:block;background:var(--paper);border-radius:3px;padding:7px 10px;box-sizing:content-box}
.caselogo span{font-size:13.5px}

/* Referenzen: Kurzliste weiterer Transitionen */
.reflist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reflist>div{background:#fff;border:.5px solid var(--line-ink);border-radius:4px;padding:22px 24px;display:flex;flex-direction:column;gap:7px}
.reflist .br{font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.reflist b{font-family:var(--font-ui);font-weight:500;font-size:16.5px;letter-spacing:-.3px}
.reflist p{font-size:13.5px;line-height:1.5;margin:0}
.reflist .dur{margin-top:auto;padding-top:12px;border-top:.5px solid var(--line-ink);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,var(--ink) 55%,var(--paper))}
@media (max-width:1100px){.reflist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.reflist{grid-template-columns:1fr}}

/* Referenzen-Hero: Prozess-Kette (Ausgangslage → … → Ergebnis).
   Auf Mobil bricht die waagerechte Kette um und die Pfeile landen verwaist am
   Zeilenende. Stattdessen als vertikale Kette: Chips untereinander, die Pfeile
   um 90° gedreht zeigen nach unten. */
@media (max-width:700px){
  .procchain{flex-direction:column;align-items:center;gap:6px}
  .procchain>span{transform:rotate(90deg)}
}

/* Leistungen: Der Stufen-Übergang hat links/rechts Deko-Hairlines um einen
   Mono-Text. Auf Mobil bricht der Text um und quetscht die Linien auf null.
   Dort nur der zentrierte Text, ohne die Linien. */
@media (max-width:700px){
  .stage .stagelink{justify-content:center}
  .stage .stagelink i{display:none}
}

/* Rechtsseiten (Impressum, Datenschutz) */
.legal{max-width:760px}
.legal h2{font-size:clamp(24px,3vw,32px);font-weight:400;letter-spacing:-.6px;line-height:1.1;margin:44px 0 16px}
.legal h3{font-size:19px;font-weight:400;letter-spacing:-.3px;margin:28px 0 10px}
.legal p{font-size:15px;line-height:1.6;margin:0 0 14px;color:color-mix(in oklab,var(--ink) 80%,var(--paper))}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{font-size:15px;line-height:1.6;margin-bottom:6px;color:color-mix(in oklab,var(--ink) 80%,var(--paper))}
.legal a{color:var(--acc-ink);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.legal .adr{font-size:16px;line-height:1.7;margin:0 0 18px}

/* Embed-Platzhalter (Calendly) */
.embedslot{margin-top:16px;border:.5px dashed color-mix(in oklab,var(--ink) 35%,transparent);border-radius:4px;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center}

/* Fließende Typografie */
/* Die Hero-Headline misst sich an der Karte (cqi), nicht am Viewport. Mit vw
   blieb sie bei 72px stehen, während die Karte durch den Seitenrahmen schmaler
   wurde — auf 1280er Screens brach „Klar entscheiden. Sicher verändern. Sauber
   übernehmen." dadurch auf sechs Zeilen. Bei voller Kartenbreite läuft 5.625cqi
   in die 72px-Obergrenze des Entwurfs, darunter skaliert es mit. */
.hero{container-type:inline-size}
.hero h1{font-size:clamp(40px,5.625cqi,72px)}
.shead h2{font-size:clamp(30px,4.2vw,48px)}
.statement h2{font-size:clamp(30px,4.6vw,56px)}
.cta h2{font-size:clamp(30px,4.2vw,52px)}
.split h2{font-size:clamp(28px,4vw,46px)}
.stage h2{font-size:clamp(32px,4.4vw,54px)}
.stage .bignum{font-size:clamp(64px,9vw,112px)}

/* ==================================================================
   ≤ 1100px
   ================================================================== */
@media (max-width:1100px){
  .lp nav{padding:20px 32px}
  :root{--nav-h:96px;--plfill:76px}
  .hero{grid-template-columns:1fr;gap:24px;padding:56px 32px}
  .sect{padding:64px 32px}
  .shead{grid-template-columns:1fr;gap:12px;margin-bottom:40px}
  .statement{padding:80px 32px}
  .cta{grid-template-columns:1fr;gap:36px;padding:72px 32px}
  .pagefoot{padding:28px 32px}
  .logoband{padding:28px 32px;flex-direction:column;align-items:flex-start;gap:20px}
  .logoband .logos{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-foot{margin:0 32px}
  /* Nur der Seitenrand wird schmaler. Die 40px stammten aus der Zeit, als die
     Bruecke ein Block war; als Naht darf sie auf kleinen Schirmen nicht hoeher
     werden als auf grossen. */
  .sectbridge{padding:18px 32px}

  .stackgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caseband{grid-template-columns:1fr}
  .caseband .txt{padding:36px 32px}

  /* Der alte dunkle Hero blendete den Cluster mobil aus. Im hellen Hero ist
     er das Bildmotiv und muss bleiben — sonst steht dort gar nichts. */
  .circlecluster:not(.herokreise){display:none}
  .herokreise{justify-self:start}
  .logoband.plain .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vband .vmedia{height:auto !important}
  .vband .playov{align-items:flex-start;padding-top:90px}
  .vband .vmeta{position:relative !important;inset:auto !important;z-index:2;grid-template-columns:1fr !important;gap:24px;padding:240px 24px 28px}
  .vband .vmeta .kpis{width:100%}

  .stage{grid-template-columns:1fr;gap:28px;padding:64px 32px 56px}
  .stage .bignum{line-height:1}
  .stage .stagelink{margin-top:36px}

  .anlrow{grid-template-columns:1fr;gap:20px;padding:36px 0}
  .anlrow .aside{flex-direction:row;align-items:baseline;gap:16px}
  .golink{text-align:left;padding-top:0}

  .timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .tl{padding-bottom:28px}
  .fitgrid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .prinrow{grid-template-columns:1fr;gap:10px}
  .lp .prinrow{grid-template-columns:1fr}

  body.sf-kompakt .sect,body.sf-kompakt .hero{padding-left:32px;padding-right:32px}
}

/* ==================================================================
   ≤ 960px — mobile Navigation, Orbit als Liste
   ================================================================== */
@media (max-width:960px){
  .navtoggle{display:flex}
  /* Ab hier klappt auch die Proxmox-Navigation auf den Menue-Button zusammen
     und ist nicht mehr zweizeilig. */
  html:has(.lp-proxmox){--nav-h:96px}
  .lp nav .links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-top:8px}
  .lp nav .links.open{display:flex}
  .lp nav .links a{padding:14px 4px;border-top:.5px solid var(--line)}
  .lp nav .links a.on::before{display:none}
  .lp nav .links .btn{margin-top:14px;justify-content:center}

}

/* ==================================================================
   Team & Netzwerk: gestapelter Modus
   Der Kreis braucht Platz. Bei 1100px reichten die Knoten bis auf 28px an den
   Bildschirmrand — kein Ueberlauf, aber kein Puffer. Deshalb faellt die Grafik
   hier in zwei benannte Gruppen statt in eine Chip-Wolke: Der Unterschied
   innen/aussen, den der Kreis zeigt, steht dann als Ueberschrift da.
   ================================================================== */
@media (max-width:1100px){
  .orbitwrap{height:auto;flex-direction:column;align-items:stretch;gap:26px;padding:8px 0;margin:10px 0 24px}
  .ring{display:none}
  .core{width:240px;height:240px;flex:none;margin:0 auto}

  /* Raster statt zentrierter Wolke. Vorher waren die Kacheln zentriert und
     unterschiedlich breit (93 bis 178px), dadurch begann jede Zeile an einer
     anderen Stelle — gemessen 29, 42, 49, 74, 62, 60 und 119px. Es fehlte die
     Fluchtlinie. Jetzt eine feste linke Kante und gleich hohe Zeilen. */
  .ogroup{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;width:100%}
  .ogrouptitle{display:block;grid-column:1/-1;text-align:left;font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
    padding-bottom:10px;margin-bottom:6px;border-bottom:.5px solid var(--line)}

  /* Ohne Pillenflaeche: Die Kachelbreite richtete sich nach der Textlaenge und
     erzeugte den unruhigen Rand. Die Unterscheidung Kern-Team gegen Netzwerk
     traegt jetzt die Gruppenueberschrift, dazu weiterhin der gefuellte
     gegenueber dem offenen Punkt. */
  /* Nur eine Oberlinie statt des vollen Kastens: .onode traegt aus dem
     Bestand border + border-radius:999px fuer die Pillenform. Als Zeile in
     einer Liste ist das zuviel. Dasselbe Muster wie .trow in der
     Uebergaenge-Sektion der Startseite. */
  .onode{position:static;transform:none;background:none;border:0;border-top:.5px solid var(--line);border-radius:0;padding:11px 0;justify-content:flex-start}
  .onode.in{background:none}
  /* Die Aufbau-Animation schiebt die Knoten sonst um ihre halbe Groesse:
     orb-node enthaelt translate(-50%,-50%), was nur absolut positioniert
     stimmt. orb-node-flat skaliert nur.

     Die Selektoren muessen so spezifisch sein wie die Grundregeln in
     hauptseiten-extra.css (.og-kern .onode ist 0,2,0). Ein blosses .onode
     (0,1,0) wurde ueberstimmt — die Kacheln standen dadurch im gestapelten
     Modus um ihre halbe Breite nach links versetzt und die linke Spalte lief
     aus dem Bild. Das war die eigentliche Ursache des unruhigen Eindrucks:
     jede Kachel verschob sich um ihre EIGENE halbe Breite, deshalb begann
     jede Zeile woanders. */
  .og-kern .onode,.og-netz .onode{animation-name:orb-node-flat}
  /* Die Legende erklaerte den Unterschied, den jetzt die Ueberschriften zeigen. */
  .orbitlegend{display:none}
}

/* ==================================================================
   ≤ 700px
   ================================================================== */
@media (max-width:700px){
  /* Die harten Umbrueche in den Ueberschriften sind auf die breite Fassung
     gesetzt. Auf dem Telefon bricht die Zeile ohnehin um, der zusaetzliche
     Umbruch erzeugt dann einen kurzen Rest als eigene Zeile. 15 Ueberschriften
     auf sieben Seiten sind betroffen, deshalb als Regel statt einzeln. */
  h1 br,h2 br,h3 br{display:none}
  /* Engerer Spaltenabstand, damit zwei Spalten auch auf dem Telefon tragen. */
  .ogroup{gap:0 16px}
  .lp nav{padding:16px 20px}
  :root{--nav-h:88px;--plfill:130px}
  html:has(.lp-proxmox){--nav-h:88px}
  .hero{padding:44px 20px}
  .hero h1{letter-spacing:-1px}
  .sect{padding:52px 20px}
  .statement{padding:60px 20px}
  .cta{padding:56px 20px}
  .pagefoot{padding:24px 20px;flex-direction:column;gap:14px;align-items:flex-start}
  .logoband{padding:24px 20px}
  .logoband .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-foot{margin:0 20px}
  .sectbridge{padding:16px 20px}

  .cards3,.cards4,.stackgrid,.anlstrip{grid-template-columns:1fr !important}
  .chain{flex-direction:column}
  .chain>div{border-right:0;border-bottom:.5px solid var(--line);padding:20px 0 24px}
  .chain>div:last-child{border-bottom:0}
  .timeline{grid-template-columns:1fr}
  .fund{grid-template-columns:1fr}
  .kpis{flex-wrap:wrap;gap:14px 0}
  .kpis>div{flex:1 1 45%}
  .checks b{min-width:0}
  .checks>div{flex-direction:column;gap:5px}
  .prins{grid-template-columns:1fr}
  .caseband .txt{padding:28px 20px}
  .hero .sub{font-size:17px}
  .trigs span{gap:5px}
  .person>div:first-child{height:340px !important}
  .logoband.plain .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vband .vmeta{padding:180px 18px 24px}
  .locard .locimg{height:300px !important}

  body.sf-kompakt .sect,body.sf-kompakt .hero{padding-left:20px;padding-right:20px}
}

/* ---- Seitenverhältnis nach Einführung der width/height-Attribute ----
   Die <img>-Tags tragen jetzt ihre echten Pixelmaße als Attribut, damit der
   Browser den Platz vor dem Laden reserviert (kein Springen des Layouts).
   Wo das CSS nur eine Dimension vorgibt, muss die andere wieder auf auto
   stehen, sonst gewinnt der Attributwert und das Bild wird verzerrt. */
.lp nav img,
.pagefoot img,
.caselogo img,
.logoband .ls img,
.vbadge img,
img[style*="height:30px"],
img[style*="height:34px"]{width:auto}

/* Innenrand auf kleinen Screens zurücknehmen — dort ist jeder Pixel Inhalt.
   Die bestehenden Breakpoint-Blöcke setzen bereits padding:...32px bzw. 20px
   auf die einzelnen Sektionen; --gutter-min zieht die Raster-Regel darüber
   nach, damit beide denselben Wert nennen. */
@media (max-width:1100px){
  :root{--gutter-min:32px}
}
@media (max-width:700px){
  :root{--gutter-min:20px}
}

/* ==================================================================
   Startseite v5: heller Hero und Übergänge, responsive
   ================================================================== */
/* Die Headline misst sich an der Karte, nicht am Viewport — dieselbe Begründung
   wie beim dunklen Hero weiter oben. */
.herolight{container-type:inline-size}
.herolight h1{font-size:clamp(38px,5.625cqi,72px)}

@media (max-width:1100px){
  .herolight{grid-template-columns:1fr;gap:32px;padding-block:56px 56px}
  .herophoto{height:300px}
  .herometa{gap:20px;margin-top:36px}
  .transband{gap:24px}
}
@media (max-width:820px){
  .transgrid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .herolight{padding-block:40px 44px}
  .herolight .eyebrow{margin-bottom:20px}
  .herophoto{height:220px}
  .herometa{flex-direction:column;gap:8px}
  .transcard{padding:24px 22px}
  .transband{flex-direction:column;align-items:flex-start;padding:24px 0}
  .tbig{font-size:22px}
  .tnote{white-space:normal}
}

/* Unterhalb von 360px tragen zwei Spalten die Beschriftungen nicht mehr:
   „Plattform-Engineering" laeuft dann aus seiner Spalte, gemessen 25px
   Seitenueberlauf bei 320px. Die Labels haben white-space:nowrap aus dem
   Bestand, brechen also nicht um, sondern schieben. */
@media (max-width:360px){
  .ogroup{grid-template-columns:1fr}
}

/* Unterhalb von 360px passen zwei 160px-Kreise nicht mehr nebeneinander:
   332px Cluster gegen 280px Inhaltsbreite bei 320px Viewport. */
@media (max-width:360px){
  .circlecluster.herokreise{width:272px}
  .circlecluster.herokreise .in{grid-template-columns:130px 130px}
  .circlecluster.herokreise img{width:130px;height:130px}
}
/* Zwischen 361 und 480px passen 2x200 nicht in die Inhaltsbreite (412 gegen
   350px bei 390px Viewport). */
@media (max-width:480px) and (min-width:361px){
  .circlecluster.herokreise{width:332px}
  .circlecluster.herokreise .in{grid-template-columns:160px 160px}
  .circlecluster.herokreise img{width:160px;height:160px}
}

/* Anlaesse 3C: Unter 1100px passt die feste Bildspalte von 560px nicht mehr
   neben die Liste. Bild nach oben, Liste darunter. */
@media (max-width:1100px){
  .anlgrid{grid-template-columns:1fr;gap:32px}
  /* Das Bild steht hier ueber die volle Breite. Hochkant und ungebremst waere
     es bei 1021px Breite fast 1170px hoch und wuerde den Bildschirm fuellen.
     Die alte Regel loeste das mit min-height:320px, also einem Verhaeltnis von
     3,19 zu 1 — ein Briefschlitz, in dem von stehenden Personen nur ein Band
     uebrig bliebe. Stattdessen bleibt das Verhaeltnis erhalten und die Breite
     wird begrenzt. */
  .anlbild{max-width:440px;margin-inline:auto;width:100%}
  .anlliste{justify-content:flex-start}
}
@media (max-width:700px){
  .anlbild{max-width:340px}
  .anlzeile{padding:16px 0}
  .anlzeile b{font-size:16px}
}

/* „Für wen"-Skala: Die vier Stufen brauchen Breite. Bei zwei Spalten bleibt die
   Leserichtung links-rechts erhalten, bei einer wird es eine Liste von
   verschmerzbar bis null. Die Bahn selbst ist prozentual und traegt jede
   Breite. */
@media (max-width:900px){
  .tolstufen{grid-template-columns:1fr 1fr;gap:20px 24px}
  .aspekte{grid-template-columns:1fr}
  .tolfoot{flex-direction:column;gap:10px}
  .tolcta{white-space:normal}
}
@media (max-width:560px){
  .tolstufen{grid-template-columns:1fr;gap:16px}
  .aspekt{padding:22px 22px}
}

/* ==================================================================
   Einwilligungsbanner

   Ausnahmsweise hier und nicht in hauptseiten-extra.css: Das Banner ist
   kein Bestandteil des Entwurfs in Claude Design, sondern eine Zutat der
   Auslieferung. In die design-gefuehrte Ebene gelegt, wuerde es bei jedem
   Abgleich als fremdes Bauteil dort auftauchen.

   Manualtreu: keine Schatten, keine Verlaeufe, Trennung ueber eine
   0.5px-Haarlinie und den Flaechenwert. Sage kommt nicht vor, das Banner
   ist kein Zeichen.
   ================================================================== */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);
  border-top:.5px solid var(--line-ink);color:var(--ink)}
.consent-in{display:flex;align-items:center;gap:40px;padding:20px 60px;
  margin-inline:auto;max-width:calc(var(--grid) + 2 * var(--gutter-min))}
.consent-txt{flex:1;min-width:0}
.consent-lbl{display:block;font-family:var(--font-mono);font-weight:500;font-size:10px;
  letter-spacing:.12em;color:var(--acc-ink);margin-bottom:6px}
.consent-txt p{margin:0;font-size:14px;line-height:1.5;max-width:760px}
.consent-txt a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.consent-btns{display:flex;align-items:center;gap:10px;flex:none}
/* Der ablehnende Knopf ist bewusst kein .btn.ghost: Der Rahmen des Ghost-Knopfs
   auf Papier ist zu schwach, und beide Wege muessen gleich gut erreichbar sein.
   Gleiche Hoehe wie der zustimmende, damit keiner versteckt wirkt. */
.consent-nein{height:48px;padding:0 20px;border:.5px solid var(--line-ink);border-radius:4px;
  background:none;color:var(--ink);font-family:var(--font-ui);font-weight:500;font-size:16px;
  letter-spacing:-.4px;cursor:pointer}
.consent-nein:hover{background:color-mix(in oklab,var(--ink) 6%,transparent)}
.consent-ja{cursor:pointer;border:0}
.consent :focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}

/* Widerruf: Der Eintrag haengt in der Fusszeile und sieht aus wie die
   Verweise daneben, ist aber ein Knopf. */
.consent-neu{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-ui);font-size:13px;
  color:color-mix(in oklab,var(--paper) 60%,var(--bg))}
.consent-neu:hover{color:var(--paper)}

@media (max-width:900px){
  .consent-in{flex-direction:column;align-items:flex-start;gap:16px;padding:18px 20px}
  .consent-btns{width:100%}
  /* min-width:0 hebt die Mindestbreite aus dem Inhalt auf. Ohne sie bekaeme
     der zustimmende Knopf mehr Platz, nur weil sein Text laenger ist — bei
     einer Einwilligung duerfen beide Wege nicht unterschiedlich gewichtet
     aussehen. */
  /* Zwei gleiche Spalten statt Flex-Verteilung: Bei flex:1 richtet sich die
     Breite trotz min-width:0 nach dem laengeren Text, und dann sieht einer der
     beiden Wege gewichtiger aus als der andere. Bei einer Einwilligung darf
     das nicht sein. */
  .consent-btns{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .consent-nein,.consent-btns .btn{min-width:0;justify-content:center}
  .consent-btns .btn i{padding:0 10px}
}

/* ==================================================================
   Leistungen: Technikbruecke und Kompetenzfelder
   ================================================================== */
/* Die Bruecke ist zweispaltig mit fester 400px-Marke. Darunter wird daraus
   ein Stapel, sonst bleibt fuer die Ueberschrift zu wenig Breite. */
@media (max-width:1100px){
  .techbruecke{grid-template-columns:1fr;gap:24px;padding:56px 32px}
  .techbruecke h2{font-size:34px}
  .tbbahn,.tbfoot{max-width:none}
}
@media (max-width:700px){
  .techbruecke{padding:44px 20px}
  .techbruecke h2{font-size:28px}
  /* Die beiden Kuerzelzeilen nebeneinander werden zu eng und brechen sonst
     mitten im Wort. Untereinander bleibt die Leserichtung erhalten. */
  .tbfoot{flex-direction:column;gap:8px}
}

/* Die Zeile hat vier Spalten: Nummer, Name, Erklaerung, Bild. Ab 1100px
   traegt das nicht mehr. Zwischenstufe: Bild rechts, Text darunter
   durchlaufend. Auf dem Telefon ein Stapel mit dem Bild zuoberst, damit
   jedes Feld wie eine eigene Karte liest. */
@media (max-width:1240px){
  .feld{grid-template-columns:56px 300px 1fr 220px;gap:24px}
  .feldname b{font-size:34px}
}
@media (max-width:1000px){
  .feld{grid-template-columns:56px 1fr 240px;grid-template-areas:"nr name bild" "nr text bild";gap:8px 24px;align-items:start}
  .feldnr{grid-area:nr}
  .feldname{grid-area:name}
  .feldtext{grid-area:text;max-width:none;margin-top:10px}
  .feldbild{grid-area:bild;align-self:center}
}
@media (max-width:700px){
  .feld{grid-template-columns:1fr;grid-template-areas:"bild" "nr" "name" "text";gap:0;padding:24px 0}
  .feldbild{height:160px;margin-bottom:16px}
  .feldnr{margin-bottom:8px}
  .feldname b{font-size:30px}
  .feldtext{margin-top:10px}
  .felderfoot{flex-direction:column;gap:12px;align-items:flex-start}
  .feldersum{white-space:normal}
}

/* ==================================================================
   Fusszeile: Platz fuer den Widerrufs-Eintrag
   Die Zeile trug bisher zwei Verweise. Mit "Datenschutz-Einstellungen" aus
   consent.js sind es drei, zusammen 350px — auf schmalen Schirmen laeuft sie
   damit ueber den Rand hinaus (gemessen: 360px Viewport +10, 320px +50).
   Umbrechen statt schrumpfen, damit die Ziele antippbar bleiben.
   ================================================================== */
.pagefoot .flinks{flex-wrap:wrap}
@media (max-width:700px){
  .pagefoot .flinks{gap:10px 18px}
}

/* Erstgespraech, "So laeuft es ab": Die Spalten des .split-Rasters schrumpfen
   nicht unter ihre Inhaltsbreite, weil Rasterelemente min-width:auto tragen.
   Bei 320px stehen sie dadurch 320px breit in einem 280px-Kasten. */
.split>*{min-width:0}

/* Proxmox-Kennzahlen: Die Zellen tragen als Flex-Elemente min-width:auto und
   schrumpfen deshalb nicht unter die Breite ihres laengsten Inhalts. Bei 480px
   ragte dadurch eine Zelle um 240px heraus. */
.kpis>div{min-width:0}
.kpis span{overflow-wrap:anywhere}

/* Proxmox, Block "Woher die Erfahrung kommt": Hier treffen zwei Regeln
   aufeinander. Unter 960px steht .kpis auf flex-direction:column, unter 700px
   bekommt es zusaetzlich flex-wrap:wrap und die Zellen flex:1 1 45%.

   In einer Spalte bezieht sich die Basis auf die Hoehe. Passt der Inhalt nicht
   in die 45 Prozent, bricht Flexbox in eine ZWEITE SPALTE um — der Kasten wird
   dadurch breiter statt hoeher und lief bei 480px um 240px heraus.

   Untereinander gestapelt braucht es weder Umbruch noch Basis. */
@media (max-width:960px){
  .lp-proxmox .nofit .kpis{flex-wrap:nowrap}
  .lp-proxmox .nofit .kpis>div{flex:0 0 auto}
}

/* ==================================================================
   Tippziele auf dem Telefon
   WCAG 2.2 AA verlangt 24x24px, Apple und Google empfehlen 44. Gemessen bei
   390px waren sechs Ziele darunter: die vier Assessment-Verweise auf der
   Anlassseite mit 18px und zweimal die Telefonnummer mit 11 und 16px.

   Senkrechtes Innenpolster vergroessert die Trefferflaeche. Bei den Verweisen
   im Fliesstext bleibt die Zeilenhoehe unberuehrt, weil vertikales Padding an
   Inline-Elementen den Zeilenkasten nicht aufspannt.
   ================================================================== */
@media (max-width:900px){
  .golink{padding-block:9px}
  a[href^="tel:"]{padding-block:8px}
  .pagefoot .flinks a,.consent-neu{padding-block:5px}
}