/* Gemeinsames Verhalten fuer alle Richtungen:
   1) Mobile-Header versteckt sich beim Runterscrollen, kommt beim Raufscrollen zurueck
   2) Logo groesser auf Mobile
   3) On-Load- und In-View-Reveal (sanft nach oben einblenden)
   4) Sprungmarken-Offset (rules/anker-sprungmarken-offset.md)
*/

/* --- 4) Anker-Offset ---
   EINE Regel, die immer passt: der Offset ist die GEMESSENE Hoehe des Menuebalkens
   plus kleiner Puffer. Die Variable --hdr-h setzt enhance.js beim Laden und bei Resize.
   ACHTUNG: scroll-padding-top (Scrollport) UND scroll-margin-top (Ziel) ADDIEREN sich
   bei nativer Anker-Navigation. Darum traegt nur EIN Wert den Offset. */
:root{--hdr-h:76px;}
html{scroll-padding-top:calc(var(--hdr-h) + 4px);}
section[id]{scroll-margin-top:0;}

/* Richtung 4: auf Mobile zuerst die Ueberschrift, dann das Foto.
   Sonst landet man beim Sprung auf "Ueber uns" mitten im Bild. */
@media(max-width:960px){
  .about .about-in .ph{order:2;}
  .about .about-in > div:not(.ph){order:1;}
}

/* --- 1) Header-Verhalten beim Scrollen (Mobile) --- */
@media(max-width:720px){
  header{transition:transform .34s cubic-bezier(.4,0,.2,1),background-color .3s ease,box-shadow .3s ease;will-change:transform;}
  header.hdr-hide{transform:translateY(-102%);}
  /* Richtung 4: Header liegt ueber dem Hero, wird beim Scrollen fest und farbig */
  header.hdr-float{position:fixed;top:0;left:0;right:0;background:rgba(4,34,58,.94);backdrop-filter:blur(12px);box-shadow:0 6px 22px -12px rgba(0,0,0,.6);}
  header.hdr-float .nav{height:70px;}
}

/* --- 2) Logo groesser auf Mobile --- */
@media(max-width:720px){
  .nav .logo{height:50px;}
}
@media(max-width:400px){
  .nav .logo{height:44px;}
}

/* --- 3) Reveal-Animationen --- */
html.motion [data-rev]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .78s cubic-bezier(.22,.61,.36,1),transform .78s cubic-bezier(.22,.61,.36,1);
}
html.motion [data-rev].is-in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  html.motion [data-rev]{opacity:1!important;transform:none!important;transition:none!important;}
}