/* =========================================================
   SC34 — theme.css
   EINZIGE Design-/Farbdatei für ALLE Seiten (Start- und
   Unterseiten). Ersetzt die vorherigen zwei Dateien
   design.css + index-design.css, die sich zu 95%
   überschnitten haben — das war unpraktisch, weil man
   Farbänderungen an zwei Stellen machen musste.

   LADEREIHENFOLGE auf jeder Seite:
   1. style.css   — Struktur, Layout, Abstände (Skelett)
   2. theme.css   — DIESE Datei: Farben, Schrift, Logo (Look)
   3. <seite>.css — Nur Besonderheiten dieser einen Seite

   SCHRIFT: Ausschließlich Montserrat (Google Fonts).
   Vorher gab es einen Fehler: "Google Sans" ist KEINE
   öffentliche Google-Fonts-Schrift und lädt nie — das war
   der Grund, warum die Schrift nicht wie gewünscht aussah.
   Jetzt: eine Schrift, zwei Schnitte (500/600 für Überschriften,
   400 für Fließtext) — einfacher und zuverlässiger.

   AUFBAU:
   1. Design-Variablen (Farben)
   2. Typografie
   3. Globale Elemente (Buttons, Tags, Platzhalter, Bilder)
   4. Logo-Lockup (Icon + Wortmarke)
   5. Header & Footer
   6. Seiten-Heroes (Breadcrumb, Titel)
   7. Projekte-Übersicht
   8. Projektdetail
   9. Team
   10. Kontakt
   ========================================================= */


/* ---------------------------------------------------------
   1. DESIGN-VARIABLEN
   Alle Farben zentral — zum Anpassen nur hier ändern.
   --------------------------------------------------------- */
:root {
  --cream:      #F7F5F1;   /* warmes Off-White — Hintergrund */
  --ink:        #676762;   /* tiefes Anthrazit — Haupttext */
  --green:      #8E9F42;   /* Schilfgrün — Akzentfarbe */
  --green-dark: #445C47;   /* dunkleres Grün — für Hover */
  --sand:       #C4A882;   /* Sandton — zweiter Akzent, Tags */
  --warm-gray:  #D7D6C7;   /* warmes Hellgrau — Flächen */
  --stone-gray: #8f9c9e;   /* Steingrau — Footer-Hintergrund */

  /* NUR EINE Schrift-Familie, in zwei Rollen verwendet:
     --serif für Überschriften (etwas kräftiger, 600),
     --sans für Fließtext (400/500). Beide zeigen auf
     Montserrat — so bleibt es konsistent und lädt zuverlässig. */
  --serif: "Montserrat", sans-serif;
  --sans:  "Montserrat", sans-serif;
}


/* ---------------------------------------------------------
   2. TYPOGRAFIE
   --------------------------------------------------------- */
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
}

p { color: var(--ink); }


/* ---------------------------------------------------------
   3. GLOBALE ELEMENTE
   --------------------------------------------------------- */
.eyebrow { color: var(--green); }

.tag {
  border-color: var(--sand);
  color: #8a6e52;
  background: rgba(196, 168, 130, 0.1);
}

.img-placeholder {
  background: var(--warm-gray);
  border-color: #d8d4cc;
  color: #7a7a68;
}

.icon-placeholder {
  background: var(--warm-gray);
  border-color: #d8d4cc;
}

/* Echte Bilder in Platzhalter-Boxen: sauberer Zuschnitt.
   Gilt auf allen Seiten, wo <img> in einer .img-placeholder
   oder ähnlichen Box liegt. */
.cad-image img,
.proj-image img,
.project-image img,
.hero-image img,
.ueber-visual img,
.philosophie-bild img,
.kachel-bild img,
.projekt-hero-image img,
.galerie-bild img,
.next-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Buttons */
.btn-dark {
  background: var(--green);
  border-color: var(--green);
  border: solid 2px;
  border-radius: 35px;
  color: #fff;
}
.btn-dark:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  opacity: 1;
}

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--cream);
  opacity: 1;
}

.link-arrow { color: var(--green); }


/* Service-Icons: monochrom in der Ink-Farbe, kein bunter Akzent */
.service-icon { color: var(--ink); }
.service-icon svg { stroke: var(--ink); }

/* ---------------------------------------------------------
   4. LOGO-LOCKUP (Icon + Wortmarke)
   Wird im Header und Footer aller Seiten verwendet.
   .footer-logo-lockup ist die helle Variante für den
   dunklen Footer-Hintergrund.

   GRÖSSE: Das Icon ist so hoch wie der gesamte Textblock
   (SC34 + Landschaftsarchitektur zusammen) — nicht nur wie
   die erste Zeile. Header: 44px Icon zu ~40px Textblock.
   Footer: 54px Icon zu ~50px Textblock (heller Hintergrund,
   etwas größer für mehr Präsenz im Footer).
   --------------------------------------------------------- */
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.logo-sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 3px;
}

.footer-logo-lockup .logo-icon {
  width: 54px;
  height: 54px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.footer-logo-lockup .logo-text { color: var(--cream); font-size: 26px; }
.footer-logo-lockup .logo-sub { color: rgba(247,245,241,0.55); font-size: 11px; }


/* ---------------------------------------------------------
   5. HEADER & FOOTER
   --------------------------------------------------------- */
.site-header {
  background: var(--cream);
  border-bottom-color: #dedad3;
}

.main-nav a { color: var(--ink); }
.main-nav a:hover { color: var(--green); }
.main-nav a.active {
  border-bottom-color: var(--green);
  color: var(--green);
}

.nav-toggle span { background: var(--ink); }

.main-nav.is-open {
  background: var(--cream);
  border-bottom-color: #dedad3;
}

.site-footer {
  background: var(--stone-gray);
  border-top: none;
}

.footer-brand p     { color: rgba(247, 245, 241, 0.6); }
.footer-col h4      { color: var(--cream); }
.footer-col a       { color: rgba(247, 245, 241, 0.6); }
.footer-col a:hover { color: var(--cream); }

.footer-bottom {
  border-top-color: rgba(247, 245, 241, 0.15);
  color: rgba(247, 245, 241, 0.45);
}
.footer-legal a       { color: rgba(247, 245, 241, 0.45); }
.footer-legal a:hover { color: var(--cream); }


/* --- Aktuelles-Leiste --- */
.aktuelles-bar {
  background: var(--warm-gray);
  border-bottom: 1px solid #c8c6b8;
}
.aktuelles-tag {
  background: var(--green);
  color: #fff;
}
.aktuelles-text { color: var(--ink); }
.aktuelles-text strong { color: var(--ink); font-weight: 700; }
.aktuelles-link { color: var(--green); }
.aktuelles-link:hover { color: var(--green-dark); }


/* ---------------------------------------------------------
   6. SEITEN-HEROES (Unterseiten: Projekte, Team, Kontakt)
   --------------------------------------------------------- */
.breadcrumb-light a       { color: var(--green); }
.breadcrumb-light a:hover { color: var(--green-dark); }
.breadcrumb-light span    { color: #a0a090; }

.projekte-hero,
.team-hero,
.kontakt-hero {
  background: var(--cream);
  border-bottom-color: #dedad3;
}

.projekte-hero h1,
.team-hero h1,
.kontakt-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
}


/* ---------------------------------------------------------
   7. PROJEKTE-ÜBERSICHT (projekte.html)
   --------------------------------------------------------- */
.projekte-filter-section {
  background: var(--cream);
  border-bottom-color: #dedad3;
}

.filter-btn {
  border-color: #c8c6b8;
  color: #6a6860;
  background: var(--cream);
}
.filter-btn:hover {
  border-color: var(--green);
  color: var(--green);
}
.filter-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.projekte-zaehler { color: #9a9888; }

.kachel-ort   { color: var(--green); }
.kachel-titel { color: var(--ink); font-family: var(--serif); }

.kachel-badge {
  background: rgba(247, 245, 241, 0.95);
  color: var(--ink);
}

.keine-ergebnisse { color: #9a9888; }


/* ---------------------------------------------------------
   8. PROJEKTDETAIL (projekt-*.html)
   --------------------------------------------------------- */
.breadcrumb a       { color: rgba(247,245,241,0.8); }
.breadcrumb a:hover { color: var(--cream); }

.projekt-hero .tag {
  background: rgba(247, 245, 241, 0.95);
  border-color: transparent;
  color: var(--ink);
}

.projekt-meta-section {
  background: var(--warm-gray);
  border-bottom-color: #c8c6b8;
}

.meta-label { color: #7a7a68; }
.meta-value { color: var(--ink); }
.meta-item  { border-left-color: #c8c6b8; }

.projekt-leistungen { border-top-color: #dedad3; }
.leistungen-liste li::before { color: var(--green); }

.projekt-next { background: var(--warm-gray); border-top-color: #c8c6b8; }

.next-card {
  background: var(--cream);
  border-color: #dedad3;
}
.next-card:hover { box-shadow: 0 4px 20px rgba(42,42,30,0.1); }

.next-label { color: var(--green); }


/* ---------------------------------------------------------
   9. TEAM (team.html)
   --------------------------------------------------------- */
.team-philosophie { background: var(--cream); }
.team-schwerpunkte { background: var(--warm-gray); }

.schwerpunkt-item  { border-top-color: #c8c6b8; }
.schwerpunkt-nr    { color: var(--green); }

.team-mitglieder { background: var(--cream); }

.mitglied         { border-bottom-color: #dedad3; }
.mitglied-name    { color: var(--ink); }
.mitglied-rolle   { color: #7a7a68; }

.mitglied-avatar {
  background: rgba(142, 159, 66, 0.12);
  border-color: rgba(142, 159, 66, 0.3);
  color: var(--green-dark);
}
.mitglied-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.team-mitgliedschaften {
  background: var(--warm-gray);
  border-top-color: #c8c6b8;
  border-bottom-color: #c8c6b8;
}

.mitgliedschaft-card {
  background: var(--cream);
  border-color: #dedad3;
}

.mitgliedschaft-logo {
  background: var(--warm-gray);
  border-color: #c8c6b8;
}
.mitgliedschaft-logo-img {
  width: auto;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}
.mitgliedschaft-logo-img img {
  max-height: 56px;
  max-width: 180px;
  object-fit: contain;
}


/* ---------------------------------------------------------
   10. KONTAKT (kontakt.html)
   --------------------------------------------------------- */
.kontakt-hero { background: var(--cream); border-bottom-color: #dedad3; }
.kontakt-main { background: var(--cream); }

.form-group label { color: var(--ink); }

.form-group input,
.form-group select,
.form-group textarea {
  border-color: #c8c6b8;
  background: #fff;
  color: var(--ink);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
}

.form-check a { color: var(--green); }

.ap-name    { color: var(--ink); }
.ap-rolle   { color: #7a7a68; }

.ap-avatar {
  background: rgba(142, 159, 66, 0.12);
  border-color: rgba(142, 159, 66, 0.3);
  color: var(--green-dark);
}

.kontakt-label { color: var(--green); }
.kontakt-wert  { color: var(--ink); }
.kontakt-wert:hover { color: var(--green); }

.info-divider { border-top-color: #dedad3; }

.projektgebiete-claim { color: #6a6860; }
.gebiet { border-bottom-color: #dedad3; }
.gebiet-name { color: var(--ink); }
.gebiet-sub  { color: #7a7a68; }
.projektgebiete-hinweis { color: #9a9888; }

.reaktionszeit strong { color: var(--green); }