/* =========================================================
   minimal.css (v16)
   - Headerbild + oranger Balken mit zentriertem Menü
   - Einspaltiger, zentrierter Content
   - Hintergrund: #FDF7ED, Schrift: Arial/Helvetica
   ========================================================= */

/* -------- Variablen -------- */
:root{
  --brand-orange:#f39c12;
  --text:#222;
  --bg:#FDF7ED;
  --maxw:1100px;
  --hero-h:380px;     /* Header-Höhe */
  --band-h:68px;      /* Höhe des orangen Balkens */
}

/* -------- Basis -------- */
*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background:var(--bg);
}

body{
  font:16px/1.55 Arial, Helvetica, sans-serif;
  color:var(--text);
}

a{ color:#0b57d0; text-decoration:underline; }
a:hover{ opacity:.85; }

h1{ font-size:clamp(1.6rem, 2.8vw, 2.2rem); margin:.2rem 0 1rem; }
h2{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); margin:1.2rem 0 .6rem; }

/* -------- HEADER -------- */
#topbar{ position:relative; min-height:var(--hero-h); }

/* Bildpfad ggf. anpassen */
#topbar .hero{
  display:block;
  height:var(--hero-h);
  background:url('/images/hero.jpg') center 38% / cover no-repeat; /* 30–45% testen */
}

/* Oranger Balken mit Menü */
#topbar .topband{
  position:absolute; left:0; right:0; bottom:0;
  height:var(--band-h);
  background:var(--brand-orange);
  display:flex; align-items:center; justify-content:center; /* zentriert */
  padding:0 24px;
  z-index:5;
}

/* Menü auf dem Balken */
.topband .nav .mod-menu,
.topband .nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:2rem; flex-wrap:wrap;
}
.topband .nav li{ margin:0; padding:0; }
.topband .nav a{
  display:flex; align-items:center; justify-content:center;
  height:var(--band-h);               /* vertikal perfekt mittig */
  padding:0 .25rem;
  font-weight:700; text-decoration:none;
  color:#000; white-space:nowrap;
}
.topband .nav li.active > a,
.topband .nav li.current > a{
  text-decoration:underline; text-underline-offset:.2em;
}

/* -------- CONTENT (einspaltig, zentriert) -------- */
main#content{
  max-width:var(--maxw);
  margin:1.5rem auto 2.5rem;          /* Luft unter Header */
  padding:0 1rem;
  text-align:center;
}

/* -------- Responsive -------- */
@media (max-width:992px){
  :root{ --hero-h:300px; }
}
@media (max-width:768px){
  :root{ --hero-h:220px; --band-h:60px; }
  #topbar .topband{ padding:0 12px; }
  .topband .nav ul{ gap:1rem; }
}
@media (min-width:1400px){
  :root{ --hero-h:460px; }            /* mehr Bild auf sehr breiten Screens */
}

/* -------- Optionen (bei Bedarf aktivieren) -------- */
/* Menü links statt mittig: */
/* #topbar .topband{ justify-content:flex-start; } */
/* Menülinks weiß: */
/* .topband .nav a{ color:#fff; } */
/* Individueller Header NUR für die Seite "Über mich" (Alias: ueber-mich) */
.ueber-mich #topbar .hero{
  background-image:url('/images/praxis/ueber-mich-hero.jpg');
  background-position:center 30%;
  height:360px;                /* nach Geschmack 320–450px */
}
/* Praxis-Hinweis Block */
.praxis-hinweis {
  margin-top: 30px;
  padding: 20px;
  background-color: #f9f9f9; /* dezenter Hintergrund */
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
}

.praxis-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #f57c00; /* orange als Akzentfarbe */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.praxis-button:hover {
  background-color: #e96b00; /* dunkler beim Hover */
}