/* =========================
   Sofien Apotheke – style.css (Hybrid + Post-Theme)
   ========================= */

/* -------- System / Defaults -------- */
:root{
  /* Apotheke */
  --apte-green: #00796b;
  --apte-green-700:#00695c;
  --apte-deep:#004d40;
  --bg: #F9F7F1;
  --text:#212121;
  --muted:#6b7280;
  --accent:#C62828;

  /* Cards / lines */
  --card:#fff;
  --card-border:#e6e6e6;
  --shadow:0 6px 18px rgba(0,0,0,.08);

  /* Post */
  --post-yellow:#ffcc00;
  --post-yellow-600:#e6b800;
}

/* Stabil gegen Layout-Sprünge (Scrollbar-Reserve) */
html { scrollbar-gutter: stable both-edges; }

/* Reset/Structure */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
}

/* Sticky footer */
main { flex: 1; display:flex; flex-direction:column; }

/* Media defaults */
img, svg, video { max-width: 100%; height: auto; display:block; }
a { color: inherit; }

/* Containers */
.container{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.container--wide{
  width: 100%;
  max-width: none;
  margin: 0;
}

/* =========================
   Header
   ========================= */
header{
  background: var(--apte-green);
  color: #fff;
}
.top-bar{
  background: var(--apte-green-700);
  padding: .35rem 0;
  font-size: .95rem;
  text-align:center;
}
.top-bar a{ color:#fff; text-decoration:none; }

.sticky{
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

/* Header content: Logo + Nav zentriert als Block */
header .header-content{
  display:flex;
  align-items:center;
  justify-content:center;      /* Block mittig */
  gap: 1rem;
  padding: .9rem 0;
}

.logo-wrapper{ flex:0 0 auto; }
.logo-image{ height:58px; width:auto; display:block; }

/* Navigation */
header nav{ flex:0 1 auto; }
header nav ul{
  display:flex;
  align-items:center;
  gap:1.25rem;
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
}
header nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  padding:.3rem .6rem;
  border-radius:6px;
  transition: background-color .2s ease;
}
header nav a:hover,
header nav a.active{ background: rgba(255,255,255,.22); }

/* =========================
   Hero (full-bleed, optional Overlay)
   ========================= */
.hero.container--wide{
  position:relative;
  min-height:420px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  padding: 6rem 1rem;
  background: url("Images/Reisfeld.jpg") no-repeat center/cover;
}
.hero.container--wide::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
}
.hero.container--wide > *{ position:relative; z-index:1; }
.hero .btn{ margin-top:1rem; }

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-block;
  background: var(--apte-green);
  color:#fff;
  padding:.6rem 1rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  transition: filter .15s ease, transform .05s ease;
}
.btn:hover{ filter:brightness(.95); }
.btn:active{ transform: translateY(1px); }
.btn--accent{ background: var(--accent); }
.btn--accent:hover{ filter:brightness(.92); }

/* =========================
   Carousel (klassisch: 1 sichtbar)
   ========================= */
.carousel{
  position:relative;
  overflow:hidden;
  width:100%;
  height:700px;
  background:#ddd;
}
.carousel-slide{
  display:none;
  position:absolute; inset:0;
  background-size:100%;
  background-position:center;
}
.carousel-slide.active{ display:block; }
.carousel-caption{
  position:absolute;
  bottom:20%;
  left:50%;
  transform: translateX(-50%);
  color:#fff;
  text-align:center;
  background: rgba(0,0,0,.5);
  padding:1rem 2rem;
  border-radius:4px;
}
.carousel-controls{
  position:absolute; top:50%; left:0; right:0;
  display:flex; justify-content:space-between;
  transform: translateY(-50%);
  padding:0 1rem;
}
.carousel-controls button{
  background: rgba(0,0,0,.5);
  border:none; color:#fff;
  font-size:1.5rem; cursor:pointer;
  padding:.5rem 1rem; border-radius:50%;
}
.carousel-controls button:hover{ background: rgba(0,0,0,.8); }

/* =========================
   Sections & Grids
   ========================= */
.section{ padding:2rem 0; }
.section h2{ text-align:center; margin-bottom:1.2rem; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* fix 4 Spalten */
  gap: 1.5rem;
  text-align: center;
}

/* Responsiv auf Handy: weniger Spalten */
@media (max-width: 1200px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
  gap: 1.5rem;
  text-align: center;
}

/* Responsiv */
@media (max-width: 1000px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

.service{
  background: var(--card);
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.service:hover{
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.service i{ font-size:2rem; color: var(--apte-green); margin-bottom:.5rem; }
.service h3{ margin-bottom:.5rem; color: var(--apte-deep); }

.product{
  background: var(--card);
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.product:hover{
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.product i{ font-size:2rem; color: var(--apte-green); margin-bottom:.5rem; }
.product h3{ margin-bottom:.5rem; color: var(--apte-deep); }

/* Über uns Grid */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: center;
}

.about-image img {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.about-text h3 {
  margin: 0 0 .25rem 0;
  color: var(--apte-green);
}
.about-text h4 {
  margin: 0 0 1rem 0;
  color: var(--apte-deep);
}
.about-text p {
  margin: 0;
  line-height: 1.6;
}

/* Mobil: stapeln */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-image img {
    margin: 0 auto 1rem;
  }
}


/* ========== Footer (neu, bündig & sauber) ========== */
footer{
  background: var(--apte-deep);
  color:#fff;
  margin-top:auto;
}
/* ===== Footer: Layout besser ausnutzen + größeres Logo ===== */

/* Breiter arbeiten, aber zentriert */
footer .container--wide{
  padding: 2.25rem 32px 1.25rem;
  max-width: 1400px;      /* Inhalt auf großen Screens angenehm breit */
  margin: 0 auto;
}

/* 4-spaltiges Grid mit sinnvoller Gewichtung */
.footer-grid-4{
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1.4fr auto;  /* Textspalten breiter, Logo rechts kompakt */
  column-gap: 3rem;
  align-items: start;      /* Texte beginnen oben, wirken aufgeräumter */
  justify-items: start;
  text-align: left;
}

/* Typografie etwas kräftiger */
.footer-col h4{
  font-size: 1.05rem;
}
.footer-col p,
.footer-col li{
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Instagram-Button dezent größer */
.social-btn{
  padding: .55rem .85rem;
}
.social-btn .icon{
  width: 20px; height: 20px;
}

/* Logo deutlich größer auf Desktop */
.footer-logo{
  text-align: right;
}
.footer-logo img{
  max-height: 90px;   /* vorher z.B. 50–60px */
  width: auto;
  display: inline-block;
  filter: none !important;  /* farbig lassen */
}

/* Breakpoints */
@media (max-width: 1200px){
  .footer-grid-4{
    grid-template-columns: 1.2fr 1fr 1fr auto;
    column-gap: 2rem;
  }
  .footer-logo img{ max-height: 72px; }
}

@media (max-width: 1100px){
  .footer-grid-4{
    grid-template-columns: 1fr;
    row-gap: 1rem;
    text-align: center;
    justify-items: center;
  }
  .footer-logo{
    text-align: center;
    margin-top: .5rem;
  }
  .footer-logo img{ max-height: 56px; }
}


/* ===== Post-Theme: Footer bleibt gelb, Farben angepasst ===== */
body.post-theme footer{
  background: var(--post-yellow);
  color: var(--text);
}
body.post-theme .footer-col h4{ color: var(--text); }
body.post-theme footer a{ color: #000; }
body.post-theme .social-btn{
  background: rgba(0,0,0,.08);
}
body.post-theme .social-btn:hover{
  background: rgba(0,0,0,.14);
}
body.post-theme .social-btn .icon{ fill:#000; }


/* =========================
   Accessibility
   ========================= */
:focus{ outline:none; }
:focus-visible{
  outline:3px solid rgba(198,40,40,.5);
  outline-offset:2px; border-radius:6px;
}
header nav a:focus-visible,
.btn:focus-visible{ outline:3px solid rgba(255,255,255,.6); }

/* Motion: reduziere bei Wunsch */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important;
     transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =========================
   Responsive Header tweaks
   ========================= */
@media (max-width:1100px){
  header nav ul{ gap:1rem; }
  header nav a{ font-size:.95rem; }
  .logo-image{ height:52px; }
}
@media (max-width:900px){
  header .header-content{ flex-wrap:wrap; row-gap:.75rem; }
  .logo-wrapper{ order:1; }
  nav{ order:2; width:100%; display:flex; justify-content:center; }
  .logo-image{ height:50px; }
}

/* =========================================================
   POST THEME (nur wenn <body class="post-theme"> gesetzt)
   ========================================================= */
body.post-theme{
  background:#f7f7f7;
  color:var(--text);
}

/* Gelber Header/Topbar */
body.post-theme header{ background: var(--post-yellow); color: var(--text); }
body.post-theme .top-bar{ background: var(--post-yellow-600); color: var(--text); }
body.post-theme header nav a{ color: var(--text); font-weight:700; }
body.post-theme header nav a:hover,
body.post-theme header nav a.active{ background: rgba(0,0,0,.08); }

/* Hero Karte */
.post-hero{
  background: var(--card);
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:2rem 1.5rem;
  margin:1.25rem 0 1.5rem;
  box-shadow: var(--shadow);
  position:relative;
}
.post-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:4px;
  background: var(--post-yellow);
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
}
.post-hero-content{
  display:flex; align-items:center; justify-content:center;
  gap:1rem 1.25rem; flex-wrap:wrap; text-align:center;
}
.partner-logo{ height:62px; width:auto; }
.post-hero h1{ margin:0; font-size:2rem; line-height:1.2; }
.post-hero-sub{ margin:.75rem 0 0; color:var(--muted); text-align:center; }

/* Post Cards */
.card{
  background: var(--card);
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:1.5rem;
  margin:1rem 0;
  box-shadow: var(--shadow);
}
.card-title{
  margin:0 0 .75rem 0;
  font-size:1.25rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.card-title::after{
  content:""; display:inline-block; width:6px; height:6px; border-radius:999px;
  background: var(--post-yellow);
}
.feature-list{ list-style:none; margin:0; padding:0; }
.feature-list li{ padding:.65rem 0; border-bottom:1px dashed #ececec; }
.feature-list li:last-child{ border-bottom:none; }
.hours{ margin:.25rem 0; font-size:1.05rem; }
.note{ margin:0; color:var(--muted); }

/* Gelber Footer auf Post-Seite */
body.post-theme footer{
  background: var(--post-yellow);
  color: var(--text);
  margin-top:2rem;
}
body.post-theme .footer-grid h4{ color: var(--text); }
body.post-theme footer a{ color: var(--text); text-decoration: underline; }


/* ===== Hamburger-Menü nur mobil – kollisionsfrei ===== */

/* Desktop: Button verstecken, Navi wie gehabt anzeigen */
@media (min-width: 901px){
  .nav-toggle{ display:none; }
  #site-nav{ display:block !important; }
}

/* Mobil: Button zeigen, Navi einklappbar */
@media (max-width: 900px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.5rem .75rem;
    border:1px solid rgba(255,255,255,.35);
    background: transparent;
    color:#fff; border-radius:8px; font-weight:700;
    line-height:1; font-size:1.05rem; cursor:pointer;
  }
  /* (optional) Post-Theme: dunkle Schrift auf gelbem Header */
  body.post-theme .nav-toggle{
    color:#000; border-color: rgba(0,0,0,.35);
  }

  /* Navi zu/auf */
  #site-nav{ display:none; width:100%; }
  #site-nav.open{ display:block; }

  /* Liste mobil untereinander – DEINE Hover/Active-Regeln bleiben bestehen */
  #site-nav ul{
    display:flex; flex-direction:column; align-items:stretch;
    gap:.45rem; padding:.5rem 0; margin:0;
  }
  #site-nav a{
    display:block;
    background: rgba(255,255,255,.10);
    padding:.6rem .8rem; border-radius:8px; text-decoration:none; font-weight:700;
  }
}
/* Footer: Social-Link ohne Hinterlegung (auch im Post-Theme) */
footer .social-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:0;
  background:transparent !important;
  border:0;
  box-shadow:none;
}
footer .social-btn:hover{
  text-decoration: underline;
  background:transparent !important;
}
footer .social-btn .icon{
  width:20px; height:20px;
  fill:currentColor;
}
footer .social-btn span{
  background:transparent !important; /* falls ein Span noch färbt */
}

/* Post-Theme sicherstellen: keine gelbe Verdunklung */
body.post-theme footer .social-btn{
  background:transparent !important;
}