/* Hover states lifted out of the design's style-hover attributes.
   The preview runtime applied these with JavaScript; as plain CSS they
   work without any script and survive with JS disabled. */
[data-hv="h1"]:hover{opacity:.6}
[data-hv="h2"]:hover{color:var(--acc-soft,#a9bad5)}
[data-hv="h3"]:hover{opacity:.7}
[data-hv="h4"]:hover{border-color:#3A3A3A;background:#181818}
[data-hv="h5"]:hover{border-color:#25D366;background:#181818}
[data-hv="h6"]:hover{color:#fff}
[data-hv="h7"]:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.26);color:#111}
[data-hv="h8"]:hover{background:rgba(0,0,0,.38);transform:translateY(-3px);color:#fff}
[data-hv="h9"]:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.16);color:#fff}
[data-hv="h10"]:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.2);color:#fff}
[data-hv="h11"]:hover{filter:brightness(1.08);transform:translateY(-2px);color:#fff}
[data-hv="h12"]:hover{border-color:#3A3A3A}
[data-hv="h13"]:hover{border-color:#25D366}
[data-hv="h14"]:hover{border-color:#0A66C2}
[data-hv="h15"]:hover{color:#fff;gap:18px}
[data-hv="h16"]:hover{background:var(--acc-grad-fill)}
[data-hv="h17"]:hover{filter:brightness(1.08);transform:translateY(-1px)}
[data-hv="h18"]:hover{color:#111}
[data-hv="h19"]:hover{filter:brightness(1.1);transform:translateY(-1px)}
[data-hv="h20"]:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.18)}
[data-hv="h21"]:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.16)}
[data-hv="h22"]:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.4);color:#fff}
[data-hv="h23"]:hover{transform:translateY(-2px)}
[data-hv="h24"]:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4);color:#fff}
[data-hv="h25"]:hover{background:#1E1E1E;color:#fff}
[data-hv="h26"]:hover{opacity:.78}

/* --- base ------------------------------------------------------------ */
html{scroll-behavior:smooth}
[data-ref="navLinks"] a{text-decoration:none}
[hidden]{display:none!important}
img{max-width:100%}
/* Bei geöffnetem Menü wird die Kopfzeile durchsichtig. Das Menü liegt als
   schwarze Fläche darunter, die Kopfzeile darüber — blieb sie weiss, stand
   ein heller Balken quer über dem schwarzen Overlay und der Schliessen-Knopf
   verschwand darin. Die Regel gab es bisher nur für das Handy (base.css);
   Sammy-Jo am 01.08.2026: "wenn man die Nav öffnet, Desktop, da auch dass es
   oben transparent ist statt weisser Balken und nur das X weiss." */
body:has(#menu:not([hidden])) header[data-ref="nav"]{
  background:transparent!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body:has(#menu:not([hidden])) [data-ref="navLogo"]{color:#fff!important;opacity:1!important}
body:has(#menu:not([hidden])) #burger span{background:#fff!important}
/* Die Navigationspunkte der Kopfzeile liegen bei geöffnetem Menü hinter dem
   Overlay und würden sonst dunkel durchscheinen. */
body:has(#menu:not([hidden])) header[data-ref="nav"] nav a{color:rgba(255,255,255,.92)!important}
/* Fünf Projektkarten ergeben bei vier Spalten eine zweite Zeile mit genau
   einer Karte. Automatisch entstehende Rasterzeilen bekommen sonst nur ihre
   Inhaltshöhe — die einzelne Karte blieb dadurch 84px flacher als ihre
   Nachbarn (gemessen 01.08.2026: 665 gegen 581). 1fr gibt allen Zeilen
   dieselbe Höhe, abgeleitet vom längsten Inhalt statt fest gesetzt.
   Erst ab Tablet: gestapelt auf dem Handy wäre das nur Leerraum. */
@media (min-width:769px){
  [data-sc-name="Referenzen"] [style*="minmax(320px, 1fr)"]{grid-auto-rows:1fr}
}
/* Der Bildbereich der Projektkarten folgt dem Format der Bildschirmaufnahmen
   statt einer festen Höhe. Vorher: 260px hoch bei 354px Breite, also fast
   quadratisch — von einer 1,93:1 breiten Aufnahme blieben 64 Prozent der Breite
   übrig, und der Rest war weggeschnitten. Sammy-Jo dazu am 01.08.2026:
   "abgehackt, sieht nicht professionell aus."
   So lösen es die Etablierten: Linear lässt den Rahmen dem Bild folgen
   (aspect-ratio:auto 3600/2360 auf der Changelog-Seite), das Bild bleibt ganz.
   Hier steht das Verhältnis fest statt auf auto, weil vier der fünf Karten
   noch einen Platzhalter tragen und alle Karten gleich hoch bleiben sollen.
   Die Zahlen sind die Pixelmaße der ersten echten Aufnahme.

   04.08.2026: Die Titelbilder sind Mockups geworden — die Aufnahme steht auf
   dem Bildschirm eines MacBook und ist dadurch fast quadratisch (1400x1077).
   Nach derselben Regel folgt der Rahmen dem Bild, sonst wäre das Gerät oben
   und unten abgeschnitten. Die Bilder der Projektseiten bleiben unberührt —
   sie liegen unter ihren alten Namen weiter im Ordner. */
[data-sc-name="Referenzen"] a[data-card]>div:first-child{
  height:auto!important;aspect-ratio:1400/1077}
[data-sc-name="Referenzen"] a[data-card]>div:first-child>img{
  object-position:center!important}
/* Die Kopfzeile liegt fest oben und ist 74px hoch. Ein Sprung über die
   Navigation setzte den Abschnitt bisher an den oberen Bildschirmrand — also
   hinter die Kopfzeile. Verdeckt wurde damit das kleine Label über der
   Überschrift ("+Ablauf", "+Arbeitsweise"); gemessen am 02.08.2026:
   60,7px bei Ablauf und 34,2px bei Arbeitsweise auf 1440er Breite, 68,8 und
   52,8 auf 1024er. Sammy-Jo dazu: "schneiden mit der Navleiste minimal die
   Überschrift, das darf nicht sein."
   `scroll-margin-top` ist der dafür vorgesehene Weg (CSS Scroll Snap Module,
   von allen Browsern seit 2019 getragen): es setzt den Zielpunkt eines Sprungs
   um den angegebenen Wert nach unten, ohne am Layout etwas zu ändern.
   88px sind die 74 der Kopfzeile plus 14 Luft — derselbe Wert, der auf dem
   Handy schon für den Kontaktabschnitt steht.
   Nur ab Tablet: auf dem Handy landet jeder der drei Abschnitte bereits frei
   (gemessen: 67 bis 159px unter der Kopfzeile), dort würde die Regel nur
   Leerraum hinzufügen. */
@media (min-width:769px){
  #leistungen,#ablauf,#ueber,#projekte,#kontakt,#datenlage{scroll-margin-top:88px}
}
:focus-visible{outline:2px solid var(--acc,#5A7BAE);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (max-width:1129px){[data-ref="navLinks"]{display:none!important}}