/*
Theme Name: Anke Weismantel
Theme URI: https://www.reha-psych.de
Author: Anke Weismantel
Description: Individuelles Theme fuer reha-psych.de - warmer Hintergrund, Navy-Blau-Akzent, haltungsbasierte Seitenstruktur.
Version: 3.1
Text Domain: anke-weismantel
*/

:root{
  --navy:#16325C;
  --slate:#2C4A5E;
  --ink:#2B2B2B;
  --muted:#6B6B6B;
  --paper:#F9F7F3;
  --paper-alt:#F2EEE6;
  --line:#E6DFD3;
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* "Anbau"-Bereiche: eigene Akzentfarbe je Bereich, gleiches Theme sonst.
   Ueberschreibt nur --navy, dadurch faerben sich Ueberschriften, Buttons,
   Links und der aktive Menuepunkt automatisch mit um. */
body.area-systemarbeit{
  --navy:#B5651D; /* Platzhalter Terrakotta - austauschen, sobald Anke sich entschieden hat */
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:1.03rem;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  color:var(--navy);
  line-height:1.25;
  margin:0 0 .5em;
}

p{margin:0 0 1.2em;}
a{color:var(--navy);}
img{max-width:100%;height:auto;}
ul,ol{padding-left:1.4em;}

/* Header */
header.site{
  border-bottom:1px solid var(--line);
  padding:1.4rem 2rem;
}
.site-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.logo img{display:block;height:75px;width:auto;}
.logo a{text-decoration:none;font-family:var(--serif);font-size:1.5rem;color:var(--navy);}
nav.main ul{list-style:none;display:flex;gap:1.7rem;margin:0;padding:0;flex-wrap:wrap;}
nav.main a{text-decoration:none;color:var(--ink);font-size:.95rem;letter-spacing:.01em;}
nav.main a:hover{color:var(--navy);}
nav.main a.current,nav.main .current-menu-item>a{color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:2px;}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:30px;padding:0;border:0;background:none;cursor:pointer;
}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--navy);}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  nav.main{display:flex;flex-direction:column;width:100%;}
  nav.main .nav-toggle{align-self:flex-end;}
  nav.main ul{
    display:none;flex-direction:column;gap:0;width:100%;
    background:var(--paper);border:1px solid var(--line);border-radius:6px;
    margin-top:.8rem;padding:.4rem 0;
  }
  nav.main.is-open ul{display:flex;}
  nav.main ul a{display:block;padding:.65rem 1.2rem;}
}

/* Layout */
main{max-width:720px;margin:0 auto;padding:3.5rem 1.5rem 5rem;}
body.home main{max-width:920px;}

.hero{text-align:center;padding:1rem 0 3rem;border-bottom:1px solid var(--line);margin-bottom:2.5rem;}
.hero h1{font-size:2.5rem;}
.hero .subtitle{color:var(--muted);font-size:1.08rem;letter-spacing:.02em;}

.lead{
  font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--navy);
  border-left:3px solid var(--navy);padding-left:1.3rem;margin:2rem 0 2.5rem;
}

/* Hinweis-Box (z.B. Praxisumzug): von Anke selbst im Editor per "Gruppe"-Block
   mit Zusatz-CSS-Klasse hinweis-box gebaut, siehe ANLEITUNG.md */
.hinweis-box{
  background:var(--paper-alt);border-left:3px solid var(--navy);
  border-radius:6px;padding:1rem 1.25rem;margin-bottom:2.5rem;font-size:.95rem;
}

/* Service-Kacheln: von Anke selbst im Editor per "Gruppe"-Block mit
   Zusatz-CSS-Klasse service-list / service gebaut, siehe ANLEITUNG.md */
.service-list{
  width:100% !important;max-width:none !important;margin:2.5rem 0;
}
.service-list > .wp-block-group__inner-container{
  --wp--style--global--content-size:none;
  --wp--style--global--wide-size:none;
  display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:1.8rem;
  width:100% !important;max-width:none !important;margin:0 !important;
}
.service-list > *{margin:0;}
.service{border-top:1px solid var(--line);padding-top:1rem;position:relative;}
.service h3{font-size:1.15rem;margin-bottom:.3rem;padding-left:1.1rem;position:relative;}
.service h3::before{
  content:"";position:absolute;left:0;top:.35em;width:6px;height:6px;
  border-radius:50%;background:var(--navy);
}
.service p{color:var(--muted);font-size:.95rem;margin:0;padding-left:1.1rem;}

.badge-row{
  display:flex;align-items:center;gap:1.1rem;
  padding:1.5rem 0;border-top:1px solid var(--line);margin-top:2.5rem;
}
.badge-seal{flex:none;display:block;}
.badge-row p{margin:0;color:var(--muted);font-size:.9rem;}

.cta{
  display:inline-block;margin-top:.5rem;
  background:var(--navy);color:#fff;text-decoration:none;
  padding:.75em 1.6em;border-radius:2px;font-size:.95rem;letter-spacing:.02em;
}
.cta:hover{background:var(--slate);color:#fff;}

/* Jeder normale WordPress-Button-Block sieht automatisch so aus wie .cta,
   ohne dass eine eigene CSS-Klasse gesetzt werden muss. */
.wp-block-button__link{
  background:var(--navy) !important;color:#fff !important;text-decoration:none;
  border-radius:2px !important;font-size:.95rem;letter-spacing:.02em;
}
.wp-block-button__link:hover{background:var(--slate) !important;color:#fff !important;}

/* Container fuer Button + "Weiter"-Link in einer Zeile: Gruppe mit
   Zusatz-CSS-Klasse cta-row, genau wie service-list/service. */
.cta-row,
.cta-row > .wp-block-group__inner-container{
  display:flex !important;justify-content:space-between !important;align-items:center;
  flex-wrap:wrap;gap:1rem;width:100% !important;max-width:none !important;
}
.cta-row{margin-top:2rem;}

/* Bild-Layouts pro Seite */
.mood-hero-wrap{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:-3.5rem;margin-bottom:2.5rem;
  position:relative;
  clip-path:url(#arcClip);
}
.mood-hero{width:100%;height:min(56vh,460px);object-fit:cover;display:block;margin:0;}

.mood-top-bleed-wrap{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:-1rem;margin-bottom:2.5rem;
}
.mood-top-bleed{width:100%;height:280px;object-fit:cover;display:block;margin:0;}

.mood-banner{width:100%;height:190px;object-fit:cover;display:block;margin:0 0 2.5rem;border-radius:2px;}

/* Fuer Bild-Bloecke, die Anke selbst per "Vollbreite" (Block-Werkzeugleiste)
   ueber die ganze Seitenbreite ziehen moechte, z.B. auf der Essays-Seite. */
.alignfull{width:100vw !important;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw !important;}
.alignfull img{width:100% !important;height:280px !important;object-fit:cover !important;display:block;}

.mood-solo-img{text-align:center;margin:0 0 2.5rem;}
.mood-solo-img img{max-width:560px;width:100%;height:auto;border-radius:2px;display:inline-block;margin:0;}

/* Kontakt-Seite: Bild neben der Praxisadresse (aus dem Auszug-Feld),
   das Formular steht separat darunter, siehe template-kontakt.php */
.mood-contained-row{display:flex;gap:2.2rem;align-items:center;justify-content:center;margin:0 0 2.5rem;flex-wrap:wrap;}
.mood-contained-row img{flex:1 1 260px;max-width:320px;width:100%;height:auto;border-radius:2px;display:block;margin:0;}
.mood-contained-row .contact-text{flex:1 1 260px;min-width:0;}
.mood-contained-row .contact-text p{margin:0 0 .6em;}

.portrait-photo{
  float:left;width:320px;aspect-ratio:1132/1390;object-fit:cover;
  border-radius:4px;margin:0 1.8rem 1rem 0;display:block;
}
@media (max-width:640px){
  .portrait-photo{float:none;width:100%;margin:0 0 1.5rem;}
}

.mood-float-img{
  float:left;width:360px;aspect-ratio:4/5;object-fit:cover;
  border-radius:2px;margin:0 2rem 1rem 0;display:block;
}
@media (max-width:640px){
  .mood-float-img{float:none;width:100%;margin:0 0 1.5rem;}
}

dl.contact{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:1rem;margin:0;}
dl.contact dt{color:var(--muted);}
dl.contact dd{margin:0;}

/* Footer */
footer.site{
  background:var(--paper-alt);border-top:1px solid var(--line);
  padding:3rem 2rem;margin-top:3rem;
}
.footer-inner{
  max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:2rem;font-size:.88rem;color:var(--muted);
}
.footer-inner nav ul{list-style:none;display:flex;gap:1.1rem;padding:0;margin:0;}
.footer-inner a{color:var(--muted);}

@media (max-width:640px){
  .hero h1{font-size:1.9rem;}
  main{padding:2.5rem 1.25rem 3.5rem;}
  .mood-contained-row{flex-direction:column;}
  .service-list > .wp-block-group__inner-container{grid-template-columns:1fr !important;}
}