/* ==================================================
   style.css — abgestimmt auf Praxis-Layout
   Ziel: Mobil unverändert; Desktop: Bildgröße wie Praxis,
   MyDrBen zentriert, gleiche Abstände und Spaltenverhältnisse
   ================================================== */

/* Farbvariablen */
:root{
  --bg: #faf7f2;
  --text: #4a3b2a;
  --muted: #7a5f43;
  --accent: #d8b25a;
  --header-text: #2a1c12;
  --border: #e6dcd2;
  --max-width: 900px;
  --container-pad: 1.5rem;
  --radius: 6px;
  --transition: 180ms ease;
}

/* Reset / Grundlayout */
*{box-sizing:border-box}
html{overflow-y:scroll;scrollbar-gutter:stable}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.7;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.header{
  background-image:url("blume_hell.jpg");
  background-size:cover;
  background-position:center;
  padding:3rem var(--container-pad);
  text-align:center;
  border-bottom:1px solid var(--border);
  position:relative;
  color:var(--header-text);
}
.header-inner{ padding-right:3.5rem; }
.header h1{ margin:0; font-size:1.8rem; font-weight:400; color:var(--header-text); line-height:1.05; }
.subtitle{ margin-top:.5rem; font-size:1.1rem; color:var(--header-text); }
.header a{ color:var(--header-text); text-decoration:underline; }

/* Burger-Menü */
.menu-toggle{
  display:block;
  position:absolute;
  right:1.5rem;
  top:1.8rem;
  background:none;
  border:none;
  font-size:2rem;
  cursor:pointer;
  color:var(--header-text);
}
.menu-toggle:focus{ outline:3px solid rgba(216,178,90,.18); outline-offset:3px; }

/* Navigation */
.nav{ display:none; background:var(--bg); border-bottom:1px solid var(--border); }
.nav.open{ display:block; }
.nav ul{ list-style:none; margin:0; padding:1rem; }
.nav li{ margin:.8rem 0; }
.nav a{ text-decoration:none; color:var(--muted); font-weight:500; transition:color var(--transition); }
.nav a:hover, .nav a.active{ color:var(--text); }

/* Content */
.content{ max-width:var(--max-width); margin:auto; padding:2rem var(--container-pad); }
h2{ font-weight:500; margin-top:2rem; color:var(--text); }

/* Index spacing like Praxis */
.content > h1:first-of-type,
.content > h2:first-of-type { margin-top:0.5rem; }
.intro h2 { margin-top:0.5rem; }
.overview h2 { margin-top:0.5rem; }
.praxisinfo h2 { margin-top:0.5rem; }

/* Notice box */
.notice{
  background:#fff9e5;
  border-left:4px solid var(--accent);
  padding:1rem;
  margin:1.5rem 0;
  border-radius:var(--radius);
  color:var(--text);
}

/* Bild / Portrait containers */
.intro-photo,
.praxis-photo-desktop,
.profile-wrap {
  width:100%;
  max-width:520px;
  margin:0 auto;
  overflow:hidden;
  display:block;
  text-align:center;
}

/* Kreis-Variante */
.portrait{
  width:180px;
  height:180px;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

/* Rechteck-Variante (praxis-like) */
.portrait-rect{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  object-position:center center;
  border-radius:6px;
  box-shadow:0 0 8px rgba(0,0,0,0.08);
  opacity:0;
  transform:translateY(10px) scale(.98);
  animation: fadeIn 700ms ease-out forwards 120ms;
}

/* Fade-In */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Prevent drag/select */
.portrait-rect, .portrait { -webkit-user-drag:none; user-select:none; }

/* Praxis-Flex default (mobile): image above text */
.praxis-flex { display:block; gap:0; }
.profile-wrap { order:-1; margin-bottom:1rem; }

/* Desktop layout to match Praxis page */
@media (min-width:800px) {
  .menu-toggle{ display:none; }
  .nav{ display:block; }
  .nav ul{ display:flex; flex-wrap:wrap; gap:1.2rem; padding:1rem 2rem; }
  .nav li{ margin:0; }
  .header h1{ font-size:2.4rem; }

  /* Flex layout with image on the right */
  .praxis-flex{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:2rem;
  }

  /* Right column for image: same visual weight as Praxis */
  .profile-wrap{
    order:2;
    margin:0;
    flex:0 0 320px; /* column width like Praxis */
    text-align:right;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:0.75rem;
  }

  /* Desktop image: responsive but capped to avoid huge sizes.
     clamp(min, preferred, max) keeps it visually similar to Praxis. */
  .profile-wrap .portrait-rect,
  .praxis-photo-desktop .portrait-rect {
    width: clamp(180px, 18vw, 320px);
    height: auto;
    object-fit:cover;
    border-radius:6px;
    box-shadow:0 0 10px rgba(0,0,0,0.08);
    opacity:1;
    transform:none;
    animation:none;
  }

  /* If circle portrait used in right column, keep it consistent */
  .praxis-photo-desktop .portrait {
    width:180px;
    height:180px;
    border-radius:50%;
    box-shadow:none;
  }

  /* Center the MyDrBen notice inside the right column (like Praxis) */
  .praxis-flex .notice {
    width:100%;
    text-align:center;
    margin:0.75rem 0;
    align-self:center;
  }

  /* Ensure the text column takes remaining space */
  .praxis-text { flex:1 1 auto; min-width:0; }
}

/* Responsive tweaks */
@media (max-width:900px) {
  .portrait-rect {object-position:center top; }
  .praxis-photo-desktop { flex:0 0 100%; max-width:100%; }
}
@media (max-width:480px) {
  .portrait-rect
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  .portrait-rect, .profile-wrap .portrait-rect { animation:none!important; transition:none!important; transform:none!important; opacity:1!important; }
}

/* Footer */
.footer{
  background-image:url("blume_hell.jpg");
  background-size:cover;
  background-position:center;
  color:var(--header-text);
  text-align:center;
  padding:2rem;
  font-size:.9rem;
}
.footer a{ color:var(--header-text); text-decoration:underline; }

/* UX for clickable headings */
.content h3 a{
  color:inherit;
  text-decoration:none;
  position:relative;
  display:inline-block;
  transition:color var(--transition), transform var(--transition);
}
.content h3 a::after{ content:" →"; opacity:.4; transition:opacity var(--transition); }
@media (hover:hover) {
  .content h3 a:hover{ color:var(--muted); transform:scale(1.03); }
  .content h3 a:hover::after{ opacity:.8; }
}
@media (hover:none) {
  .content h3 a:active{ color:var(--muted); transform:scale(1.03); }
  .content h3 a:active::after{ opacity:.8; }
}

/* Backlink / lists / print / small fixes */
.backlink{ text-decoration:underline; color:var(--muted); font-weight:500; transition:color var(--transition); }
.backlink:hover{ color:var(--text); }
.content ul{ margin-left:1.2rem; padding-left:0; }
.content li{ margin-bottom:.4rem; }
@media print{ .header,.nav,.footer,.menu-toggle{ display:none } .content{ padding:0; margin:0; max-width:100% } img{ max-width:100%; height:auto } }
img{ max-width:100%; height:auto; display:block; }