/* Theme overrides: Logo-Größe, Typografie, Animationen */
:root{--ease: cubic-bezier(.22,1,.36,1)}
/* Logo etwas präsenter (dezent) */
header img[alt*="Wappen"], header img[alt*="Logo"]{
  height: 56px; width: 56px;
}
@media (min-width: 768px){
  header img[alt*="Wappen"], header img[alt*="Logo"]{ height: 64px; width: 64px; }
}
/* Kompaktere H1: leicht enger gesetzt */
h1{ letter-spacing: -0.01em; }
/* Reveal Animations */
.reveal{ opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity: 1; transform: none; }
/* Prefers-reduced-motion: Animationen abschalten */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Dezente Hover-Interaktionen für Karten/Links */
.card, .feature, a.button, .cta{
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover, .feature:hover, a.button:hover, .cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2,132,199,.12);
}
/* Optional: subtile Divider-Animation */
hr{ border-color: #e5e7eb; }


/* ---- v18 Enhancements ---- */

/* Körper-Fade-in */
body{opacity:0; transform: translateY(4px); transition: opacity .5s var(--ease), transform .5s var(--ease);}
body.ready{opacity:1; transform:none;}

/* Logo größer (präsenter) */
header img[alt*="Wappen"], header img[alt*="Logo"]{
  height: 72px; width: 72px;
}
@media (min-width: 768px){
  header img[alt*="Wappen"], header img[alt*="Logo"]{ height: 84px; width: 84px; }
}

/* Subpage-Menüzeile mit eigener Hintergrundfarbe */
:root{ --nav-sub-bg: #0d3b66; /* dunkles Blau */ --nav-link: #e2e8f0; --nav-link-hover:#93c5fd; }
.subpage header nav{ background: var(--nav-sub-bg); border-bottom: 1px solid rgba(255,255,255,.08); }
.subpage header nav a{ color: var(--nav-link); }
.subpage header nav a:hover{ color: var(--nav-link-hover); }

/* Nav-Link Unterstreichungsanimation */
header nav a{ position:relative; }
header nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:#60a5fa;
  transition: right .3s var(--ease);
}
header nav a:hover::after{ right:0; }

/* "Mehr Details" stärker betonen */
.prose h2{ font-weight: 800; letter-spacing:-0.005em; }
.prose h3{ font-weight: 700; }

/* Buttons / CTAs Micro-Animation */
a.button, .cta, button, .btn{
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
a.button:hover, .cta:hover, button:hover, .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(2,132,199,.15);
}

/* Galerie: subtiler Hover-Zoom */
.gallery .gallery-item img{ transition: transform .35s var(--ease); }
.gallery .gallery-item:hover img{ transform: scale(1.02); }

/* ---- v19 Header overhaul ---- */
:root{
  --header-bg: #eaf3ff;       /* leichtes Blau */
  --header-text: #0f172a;     /* very dark slate */
  --nav-link: #0f172a;
  --nav-link-hover: #1d4ed8;
}
.site-header{ background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid #dbeafe; }
.site-header .container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.header-flex{ display:flex; align-items:center; gap: 16px; padding: 14px 0; }
.header-flex img{ height: 84px; width: 84px; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
@media (min-width: 768px){
  .header-flex img{ height: 96px; width: 96px; }
}
.header-brand{ line-height: 1.2; }
.header-brandline{ font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); letter-spacing:-0.01em; }
.header-claim{ color:#334155; font-weight: 600; font-size: clamp(13px, 1.4vw, 16px); margin-top: 3px; }
.header-nav{ display:flex; flex-wrap: wrap; gap: 10px 12px; padding: 10px 0 14px; border-top: 1px solid rgba(15,23,42,.06); }
.header-nav a{ color: var(--nav-link); text-decoration: none; padding: 6px 10px; border-radius: 10px; position:relative; }
.header-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:#60a5fa; transition:right .3s var(--ease); }
.header-nav a:hover{ background: rgba(255,255,255,.6); }
.header-nav a:hover::after{ right:0; }
/* Ensure previous subpage nav color overrides don't conflict */
.subpage header nav{ background: transparent !important; }