/*
Theme Name: Mein Slim Theme
Author: Du
Version: 1.0
*/

:root{
  /* Höhe Topbar: kleiner Start, kompakter Shrink */
  --topbar-h: 72px;                 /* Start */
  --topbar-h-sh: 44px;              /* „knapp unter dem Seitennamen“ */

  /* Höhe Bildbereich (Hero) + Schrumpf (2/3) */
  --hero-h: 42vh;
  --hero-h-sh: calc(var(--hero-h) * .6666667);

  /* Hintergrundton passend zum Bild (ggf. anpassen) */
  /*--hero-bg: #efe4d2;*/
  --hero-bg: #fdf3df;

  --t: 260ms ease;
  --text: #111;
}

/* kleine Grundtypografie */
html,body{margin:0;padding:0;background:#f1e6d4;}
body{font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Header */
.site-header{ position:sticky; top:0; z-index:1000; background:#fff; }

/* Topbar */
.topbar{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px;
  height:var(--topbar-h); padding:0 20px;
  transition:height var(--t), padding var(--t);
  /*background:#fff;*/
  background:#efe4d2;
}
.branding a{
  display:block; font-weight:700; color:var(--text);
  font-size:clamp(20px,2.2vw,30px);
  line-height:var(--topbar-h); height:var(--topbar-h);
  transition:line-height var(--t), height var(--t);
}

/* Menü nur im Top – ohne Bullets */
.main-nav ul{ margin:0; padding:0; list-style:none; display:flex; gap:clamp(12px,2vw,28px); }
.main-nav li{ list-style:none; }
.main-nav a{
  display:block; text-decoration:none; color:var(--text);
  line-height:var(--topbar-h); height:var(--topbar-h);
  transition:line-height var(--t), height var(--t);
}

/* Hero: Bild unten ausrichten, nicht vergrößern, Hintergrund wie Bild */
.hero{
  height:var(--hero-h);
  background:var(--hero-bg);
  transition:height var(--t);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.hero img{
  width:auto; height:auto;               /* Originalgröße */
  max-width:100%; max-height:100%;
  display:block;
}

/* Scrollzustand */
.is-scrolled .topbar{
  height:var(--topbar-h-sh); padding:0 16px;
}
.is-scrolled .branding a,
.is-scrolled .main-nav a{
  line-height:var(--topbar-h-sh); height:var(--topbar-h-sh);
}
.is-scrolled .hero{
  height:var(--hero-h-sh);
}

/* Inhalt */
main#content{ max-width:1100px; margin:40px auto; padding:0 20px; }
footer.site-footer{padding:40px 20px;border-top:1px solid #eee;color:#555}

/* Mobil kompakter starten */
@media (max-width:640px){
  :root{--topbar-h:72px;--hero-h:36vh}
}

/* Adminbar korrekt berücksichtigen, ohne Sticky zu „blockieren“ */
@media (min-width:783px){ body.admin-bar { padding-top:32px; } }
@media (max-width:782px){ body.admin-bar { padding-top:46px; } }