/*
Theme Name:   Bricks Child Theme
Theme URI:    https://bricksbuilder.io/
Description:  Use this child theme to extend Bricks.
Author:       Bricks
Author URI:   https://bricksbuilder.io/
Template:     bricks
Version:      1.1-zell
Text Domain:  bricks
*/

/* ============================================================================
   ZELL-AUFMASS.DE — DESIGN-SYSTEM (zentrale Anpassungsstelle)
   ----------------------------------------------------------------------------
   Vorgabe Auftraggeber: Design möglichst global in Klassen/Token definieren.
   ALLE Farben, Typografie, Radien, Abstände NUR HIER ändern — die Bricks-
   Templates nutzen ausschließlich die zell-*-Klassen und CSS-Variablen.
   Referenz: Migrationsarchiv → reference-design/design-tokens-vorgabe.md
   ========================================================================== */

:root {
  /* ---- Farben (Ist-Design: Blau/Weiß) ---- */
  --zell-primary:       #0c71c3;   /* Markenblau: Überschriften, Buttons, Links */
  --zell-primary-dark:  #0a5aa0;   /* Hover, Top-Bar dunkel */
  --zell-primary-light: #eaf3fc;   /* helle Flächen, Hover-BGs */
  --zell-text:          #2b2b2b;   /* Fließtext */
  --zell-text-muted:    #6b7280;   /* Sekundärtext */
  --zell-bg:            #ffffff;
  --zell-bg-alt:        #f6f8fc;   /* abwechselnde Sections */
  --zell-border:        #d8dfec;
  --zell-accent:        #0e7c66;   /* Highlights (z. B. Preise) */
  --zell-error:         #b42318;
  --zell-white:         #ffffff;

  /* ---- Typografie ---- */
  --zell-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zell-font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zell-fs-h1: clamp(2.1rem, 1.4rem + 2.2vw, 3.4rem);
  --zell-fs-h2: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  --zell-fs-h3: 1.35rem;
  --zell-fs-body: 1.0625rem;
  --zell-fs-small: .9rem;
  --zell-lh-body: 1.65;

  /* ---- Raum & Form ---- */
  --zell-space-section: clamp(3.5rem, 2rem + 4vw, 6.5rem);
  --zell-space-block: 2rem;
  --zell-radius: 10px;
  --zell-radius-btn: 999px;        /* Pill-Buttons wie im Ist-Design */
  --zell-shadow: 0 8px 28px rgba(20, 44, 102, .10);
  --zell-shadow-hover: 0 12px 34px rgba(20, 44, 102, .16);
  --zell-container: 1200px;
}

/* ---------------------------------------------------------------------------
   Basis
   ------------------------------------------------------------------------- */
body {
  font-family: var(--zell-font-body);
  font-size: var(--zell-fs-body);
  line-height: var(--zell-lh-body);
  color: var(--zell-text);
  background: var(--zell-bg);
}

/* ---------------------------------------------------------------------------
   Layout-Bausteine
   ------------------------------------------------------------------------- */
.zell-container {
  width: 100%;
  max-width: var(--zell-container);
  margin-inline: auto;
  padding-inline: clamp(1rem, .5rem + 2vw, 2rem);
}

.zell-section {
  padding-block: var(--zell-space-section);
}
.zell-section--alt { background: var(--zell-bg-alt); }
.zell-section--tight { padding-block: calc(var(--zell-space-section) * .6); }

/* ---------------------------------------------------------------------------
   Typografie-Bausteine
   ------------------------------------------------------------------------- */
.zell-h1, .zell-h2, .zell-h3 {
  font-family: var(--zell-font-head);
  color: var(--zell-primary);
  line-height: 1.18;
  margin-block: 0 var(--zell-space-block);
}
.zell-h1 { font-size: var(--zell-fs-h1); }
.zell-h2 { font-size: var(--zell-fs-h2); }
/* Absicherung: klassenlose H1 im Hauptbereich (Bricks-Fallback-Reste) */
.zell-main h1:not([class]) { font-size: var(--zell-fs-h1); color: var(--zell-primary); line-height: 1.15; margin-block: 0 .9rem; }
.zell-h3 { font-size: var(--zell-fs-h3); margin-block-end: .8rem; }

.zell-lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color: var(--zell-text-muted);
  max-width: 62ch;
}
.zell-small { font-size: var(--zell-fs-small); color: var(--zell-text-muted); }

.zell-link { color: var(--zell-primary); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease; }
.zell-link:hover, .zell-link:focus-visible { border-bottom-color: var(--zell-primary); }

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.zell-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.7rem;
  border-radius: var(--zell-radius-btn);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.zell-btn:hover { transform: translateY(-1px); }

.zell-btn--primary { background: var(--zell-primary); color: var(--zell-white); }
.zell-btn--primary:hover { background: var(--zell-primary-dark); box-shadow: var(--zell-shadow); }

.zell-btn--ghost { background: transparent; color: var(--zell-primary); border-color: var(--zell-primary); }
.zell-btn--ghost:hover { background: var(--zell-primary-light); }

.zell-btn--light { background: var(--zell-white); color: var(--zell-primary); }
.zell-btn--light:hover { box-shadow: var(--zell-shadow); }

/* ---------------------------------------------------------------------------
   Karten (Leistungen, Projekte, Blog-Teaser)
   ------------------------------------------------------------------------- */
.zell-card {
  background: var(--zell-white);
  border: 1px solid var(--zell-border);
  border-radius: var(--zell-radius);
  box-shadow: var(--zell-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.zell-card:hover { box-shadow: var(--zell-shadow-hover); transform: translateY(-3px); }
.zell-card__media { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; }
.zell-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.zell-card__title { font-family: var(--zell-font-head); font-size: var(--zell-fs-h3); color: var(--zell-primary); margin: 0; }
.zell-card__text { margin: 0; color: var(--zell-text); }

.zell-tag {
  display: inline-block;
  padding: .25rem .8rem;
  border-radius: var(--zell-radius-btn);
  background: var(--zell-primary-light);
  color: var(--zell-primary-dark);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.zell-hero {
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
  background:
    linear-gradient(180deg, var(--zell-primary-light) 0%, var(--zell-bg) 100%);
}
.zell-hero__title { margin-block-end: 1.1rem; }
.zell-hero__text { margin-block-end: 1.8rem; }
.zell-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.zell-hero__media {
  margin: 0;
  border: 1px solid var(--zell-border);
  border-radius: var(--zell-radius);
  overflow: hidden;
  box-shadow: var(--zell-shadow);
  background: var(--zell-white);
}
.zell-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.zell-eyebrow {
  color: var(--zell-primary);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--zell-fs-small);
  margin-block-end: .9rem;
}
@media (max-width: 880px) {
  .zell-hero__grid { grid-template-columns: 1fr; }
  .zell-hero__media { order: -1; max-width: 560px; }
}

/* USP-Leiste (Startseite, unter dem Hero) */
.zell-usp-bar {
  list-style: none;
  margin: 1.4rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.zell-usp-bar li {
  background: var(--zell-white);
  border: 1px solid var(--zell-border);
  border-block-start: 3px solid var(--zell-primary);
  border-radius: var(--zell-radius);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .3rem;
  font-size: var(--zell-fs-small);
}
.zell-usp-bar strong { color: var(--zell-primary-dark); }
.zell-usp-bar a { color: var(--zell-primary); font-weight: 600; text-decoration: none; }
.zell-usp-bar a:hover { text-decoration: underline; }
@media (max-width: 880px) { .zell-usp-bar { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Listen
   ------------------------------------------------------------------------- */
.zell-list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.zell-list-check li { padding-left: 1.9rem; position: relative; }
.zell-list-check li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 1.3rem; height: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--zell-primary);
  color: var(--zell-white);
  font-size: .8rem; font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Header / Navigation (Bricks-Template „Header")
   ------------------------------------------------------------------------- */
.zell-topbar {
  background: var(--zell-primary-dark);
  color: var(--zell-white);
  font-size: var(--zell-fs-small);
}
.zell-topbar a { color: var(--zell-white); text-decoration: none; opacity: .92; }
.zell-topbar a:hover { opacity: 1; }

.zell-header {
  background: var(--zell-white);
  border-block-end: 1px solid var(--zell-border);
  position: sticky; top: 0; z-index: 50;
}
.zell-header__logo img { max-height: 76px; width: auto; }
.zell-nav { display: flex; align-items: center; }
.zell-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin: 0;
  padding: 0;
}
.zell-nav__list > li { position: relative; }
.zell-nav__list a {
  display: block;
  color: var(--zell-text);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  padding-block: .45rem;
  border-block-end: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.zell-nav__list a:hover,
.zell-nav__list .current-menu-item > a,
.zell-nav__list .current-menu-ancestor > a {
  color: var(--zell-primary);
  border-block-end-color: var(--zell-primary);
}
.zell-nav__list .menu-item-has-children > a::after {
  content: " ▾";
  font-size: .68em;
  opacity: .65;
}
.zell-nav__list .sub-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: .35rem 0;
  background: var(--zell-white);
  border: 1px solid var(--zell-border);
  border-radius: var(--zell-radius);
  box-shadow: var(--zell-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 70;
}
.zell-nav__list li:hover > .sub-menu,
.zell-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.zell-nav__list .sub-menu li { width: 100%; }
.zell-nav__list .sub-menu a {
  padding: .5rem 1.15rem;
  border-block-end: none;
  white-space: normal;
}
.zell-nav__list .sub-menu a:hover {
  background: var(--zell-primary-light);
  border-block-end: none;
}
@media (max-width: 920px) {
  .zell-nav { width: 100%; }
  .zell-nav__list { flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; }
  .zell-nav__list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-inline-start: 2px solid var(--zell-primary-light);
    border-radius: 0;
    min-width: 0;
    padding: .1rem 0 .1rem 1rem;
    margin-block-end: .25rem;
  }
}

/* Horizontales Überlaufen global unterbinden (clip statt hidden: sticky-safe) */
html, body { max-width: 100%; overflow-x: clip; }

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.zell-footer {
  background: var(--zell-primary-dark);
  color: rgba(255, 255, 255, .85);
  padding-block: 3rem 2rem;
  margin-block-start: var(--zell-space-section);
}
.zell-footer a { color: var(--zell-white); text-decoration: none; opacity: .9; }
.zell-footer a:hover { opacity: 1; text-decoration: underline; }
.zell-footer__title { color: var(--zell-white); font-weight: 700; margin-block-end: .8rem; }
.zell-footer__legal { border-block-start: 1px solid rgba(255,255,255,.18); margin-block-start: 2rem; padding-block-start: 1.2rem; font-size: var(--zell-fs-small); }

/* ---------------------------------------------------------------------------
   Formulare (Kontakt)
   ------------------------------------------------------------------------- */
.zell-form { display: grid; gap: 1rem; }
.zell-form label { font-weight: 600; font-size: .95rem; }
.zell-form input[type="text"],
.zell-form input[type="email"],
.zell-form input[type="tel"],
.zell-form textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--zell-border);
  border-radius: var(--zell-radius);
  font: inherit;
  background: var(--zell-white);
}
.zell-form input:focus-visible,
.zell-form textarea:focus-visible {
  outline: 2px solid var(--zell-primary);
  outline-offset: 1px;
  border-color: var(--zell-primary);
}

/* ---------------------------------------------------------------------------
  Utility
   ------------------------------------------------------------------------- */
.zell-text-center { text-align: center; }
.zell-mt-block { margin-block-start: var(--zell-space-block); }
.zell-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; }
.zell-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; }

@media (max-width: 640px) {
  .zell-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Content-Bereich (aus Divi konvertierte Seiteninhalte)
   ------------------------------------------------------------------------- */
.zell-content > * { max-width: 76ch; }
.zell-content > .zell-grid-2, .zell-content > .zell-grid-3,
.zell-content > figure, .zell-content > img, .zell-content > .zell-cta-row { max-width: none; }
.zell-content h1 { font-family: var(--zell-font-head); font-size: var(--zell-fs-h1); color: var(--zell-primary); line-height: 1.18; margin: 0 0 var(--zell-space-block); }
.zell-content h2 { font-family: var(--zell-font-head); font-size: var(--zell-fs-h2); color: var(--zell-primary); line-height: 1.2; margin: 2.2rem 0 .9rem; }
.zell-content h3 { font-family: var(--zell-font-head); font-size: var(--zell-fs-h3); color: var(--zell-primary-dark); margin: 1.6rem 0 .6rem; }
.zell-content p { margin-block: .8rem; }
.zell-content a { color: var(--zell-primary); }
.zell-content ul, .zell-content ol { padding-inline-start: 1.3rem; margin-block: .8rem; }
.zell-content li { margin-block: .3rem; }
.zell-content img { border-radius: var(--zell-radius); max-width: 100%; height: auto; }
.zell-content figure { margin: 1.5rem 0; }
.zell-content figure figcaption { font-size: var(--zell-fs-small); color: var(--zell-text-muted); margin-block-start: .4rem; }
.zell-content table { border-collapse: collapse; width: 100%; }
.zell-content th, .zell-content td { border: 1px solid var(--zell-border); padding: .5rem .7rem; text-align: start; }
.zell-content th { background: var(--zell-primary-light); }

/* Zitat (aus Divi-Testimonials) */
.zell-quote {
  border-inline-start: 4px solid var(--zell-primary);
  background: var(--zell-primary-light);
  padding: 1.1rem 1.4rem;
  border-radius: var(--zell-radius);
  margin: 1.4rem 0;
  font-style: italic;
}
.zell-quote__author { display: block; margin-block-start: .5rem; font-style: normal; font-weight: 600; color: var(--zell-primary-dark); font-size: var(--zell-fs-small); }

/* Galerie (aus Divi-Gallery) */
.zell-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.zell-gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--zell-radius); }

/* CTA-Reihe */
.zell-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-block: 1.6rem; }

/* Formular-Erfolg */
.zell-form-success {
  background: #e8f7f0; border: 1px solid var(--zell-accent);
  color: var(--zell-accent); border-radius: var(--zell-radius);
  padding: 1rem 1.3rem; margin-block: 1rem; font-weight: 600;
}
.zell-form-error {
  background: #fdebe9; border: 1px solid var(--zell-error);
  color: var(--zell-error); border-radius: var(--zell-radius);
  padding: 1rem 1.3rem; margin-block: 1rem; font-weight: 600;
}

/* Seiten-Titel-Bereich */
.zell-pagehead { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; }
.zell-breadcrumb { font-size: var(--zell-fs-small); color: var(--zell-text-muted); margin-block-end: .6rem; }
.zell-breadcrumb a { color: var(--zell-text-muted); }