/* ==========================================================================
   SEO Microsite — Template 2 ("Agentur" style)
   Same class contract as style.css (Template 1) — every HTML block in
   references/component-patterns.md drops in unchanged. Only the tokens and a
   handful of selectors are reskinned: dark-navy/orange/mint, sharp corners,
   flat navy↔white alternating sections instead of white↔cream, solid-orange
   footer. Modeled on the visual language of webdesign-erlangen.com (colors
   sampled directly from its computed styles).

   Template-2-only additions live at the bottom, after the "=== TEMPLATE 2
   ADDITIONS ===" marker: the dark accordion (services list), the flat
   portfolio-tile grid, and the floating round badge.
   ========================================================================== */

/* Self-hosted fonts (no third-party requests, DSGVO-konform) ------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}

:root {
  --color-primary: #232e3e;        /* navy — header/hero/footer-alt bg (flat, no gradient) */
  --color-primary-dark: #1b2430;   /* darker navy — mobile-nav bg, hover states */
  --color-primary-darker: #232e3e; /* same navy — kept as a separate token so component-patterns.md's
                                       linear-gradient() calls still resolve (see Hero/CTA overrides below,
                                       which drop the gradient for a flat fill instead) */
  --color-primary-panel: #35465f;  /* lighter navy — dividers/hover rows on dark sections */
  --color-accent: #ff6920;         /* orange — primary CTA, links, accordion labels */
  --color-accent-dark: #e2530f;
  --color-mint: #4ad295;           /* secondary accent — checkmarks, floating badge, blob shapes */
  --color-mint-dark: #33b87d;
  --color-cream: #eef1f5;          /* cool light chip bg (icon tiles on white sections) */
  --color-cream-dark: #e2e7ee;
  --color-text: #1c2530;
  --color-text-muted: #5b6b7a;
  --color-white: #ffffff;
  --color-border: #e4e9ee;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1da851;
  --shadow-sm: 0 2px 8px rgba(20, 26, 36, 0.10);
  --shadow-md: 0 10px 28px rgba(20, 26, 36, 0.16);
  --radius: 6px;       /* sharp/squared, not the pill-heavy Template 1 look */
  --radius-btn: 4px;
  --font-head: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
svg { flex: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--color-primary);
  line-height: 1.12;
  margin: 0 0 0.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--color-text-muted); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }

ul { padding-left: 1.2em; color: var(--color-text-muted); }
li { margin-bottom: 0.4em; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 80px 0; }
/* The alternate section — navy instead of Template 1's cream. Same class
   name as Template 1 on purpose (see references/template-2-agency-style.md)
   so component-patterns.md needs no edits; only the skin differs. Every
   child heading/paragraph/eyebrow flips to a light color for contrast. */
.section--cream { background: var(--color-primary); }
.section--cream h1, .section--cream h2, .section--cream h3, .section--cream h4 { color: var(--color-white); }
.section--cream p, .section--cream li { color: rgba(255,255,255,0.78); }
.section--cream .eyebrow { color: var(--color-accent); }
.section--cream .stat-note, .section--cream .price-note { color: rgba(255,255,255,0.6); }
.section--tight { padding: 48px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 12px;
}

.section-head { max-width: 680px; margin: 0 0 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons — sharp corners, not pills ---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 0.96rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn--accent { background: var(--color-accent); color: var(--color-white); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--color-accent-dark); color: var(--color-white); box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; border-color: rgba(255,255,255,0.55); color: var(--color-white); }
.btn--outline:hover { background: rgba(255,255,255,0.12); color: var(--color-white); }

.btn--outline-dark { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline-dark:hover { background: var(--color-primary); color: var(--color-white); }

.btn--whatsapp { background: var(--color-whatsapp); color: var(--color-white); box-shadow: var(--shadow-sm); }
.btn--whatsapp:hover { background: var(--color-whatsapp-dark); color: var(--color-white); box-shadow: var(--shadow-md); }

.btn--block { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: 0.88rem; }

/* Header ------------------------------------------------------------------ */
.topbar {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
}
.topbar .container {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: rgba(255,255,255,0.85); display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: var(--color-accent); }

/* Header sits flush on the same navy as the hero — no visible seam, per
   webdesign-erlangen.com's reference. */
.site-header {
  background: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 24px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 44px; width: auto; max-width: none; flex-shrink: 0; }

.nav-main {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-main a {
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  font-size: 0.96rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-main a:hover, .nav-main a.active { color: var(--color-accent); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
}

/* Hero — flat navy, no gradient ---------------------------------------- */
.hero {
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
  padding-top: 88px;
  padding-bottom: 88px;
}
.hero-copy .eyebrow { color: var(--color-accent); }
.hero-copy h1 { color: var(--color-white); }
.hero-copy p.lead { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 50ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-badge { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.85); font-size: 0.9rem; font-weight: 600; }
.hero-badge svg { flex: none; color: var(--color-mint); }

.hero-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3.1;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media svg { display: block; width: 100%; height: 100%; max-width: 100%; }

/* Page (inner) hero for legal pages ------------------------------ */
.page-hero {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 64px 0;
}
.breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.breadcrumb a { color: rgba(255,255,255,0.75); }
.breadcrumb a:hover { color: var(--color-accent); }
.page-hero h1 { color: var(--color-white); margin-bottom: 10px; font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.page-hero p { color: rgba(255,255,255,0.8); max-width: 60ch; font-size: 1.05rem; margin-bottom: 0; }

/* Cards / grids ------------------------------------------------------------ */
.grid { display: grid; gap: 28px; }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}

.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: 16px;
  flex: none;
}

.usp-card { text-align: left; }
.usp-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.usp-card p { font-size: 0.92rem; margin-bottom: 0; }

/* Service cards */
.service-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card__media { aspect-ratio: 16/11; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.service-card__body h3 { margin-bottom: 8px; }
.service-card__body p { font-size: 0.94rem; flex: 1; }
.service-card__link { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.service-card__link svg { transition: transform 0.15s ease; }
.service-card__link:hover svg { transform: translateX(3px); }

/* Check list --------------------------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--color-text);
  font-size: 0.98rem;
}
.check-list svg { flex: none; margin-top: 3px; color: var(--color-mint-dark); }
.section--cream .check-list li { color: rgba(255,255,255,0.85); }
.section--cream .check-list svg { color: var(--color-mint); }

.check-list--2col { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }

/* Testimonials --------------------------------------------------------- */
.testimonial-card { display: flex; flex-direction: column; gap: 14px; }
.testimonial-card__stars { display: flex; gap: 2px; color: var(--color-accent); }
.testimonial-card__stars svg { width: 16px; height: 16px; }
.testimonial-card__quote { font-size: 0.96rem; font-style: italic; color: var(--color-text); margin: 0; flex: 1; }
.testimonial-card__meta { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.testimonial-card__project { font-weight: 700; font-size: 0.9rem; color: var(--color-primary); }
.testimonial-card__source { font-size: 0.82rem; color: var(--color-text-muted); }

/* Testimonial carousel ---------------------------------------------------- */
.testimonial-carousel { max-width: 640px; margin: 0 auto; }
.testimonial-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius);
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track .testimonial-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-height: 280px;
}
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.carousel-arrow {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.carousel-arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-dot.is-active { background: var(--color-accent); transform: scale(1.2); }
.section--cream .carousel-arrow { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: var(--color-white); }
.section--cream .carousel-arrow:hover { background: var(--color-accent); border-color: var(--color-accent); }
.section--cream .carousel-dot { background: rgba(255,255,255,0.25); }
.section--cream .carousel-dot.is-active { background: var(--color-accent); }
@media (min-width: 640px) {
  .testimonial-track .testimonial-card { padding: 32px; }
}

/* Content split layout ------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split img { border-radius: var(--radius); }
.split-reverse .split-media { order: 2; }

.step-list { counter-reset: step; display: grid; gap: 22px; }
.step-item { display: flex; gap: 18px; }
.step-num {
  counter-increment: step;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-head);
}
.step-num::before { content: counter(step); }
.step-body h3 { margin-bottom: 4px; font-size: 1.05rem; }
.step-body p { margin-bottom: 0; font-size: 0.95rem; }

/* Stat / Kennzahlen tiles ---------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-tile {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--radius);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.stat-tile__number {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--color-accent);
  line-height: 1.1;
  margin-bottom: 6px;
}
.stat-tile__label { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 600; }
.stat-note { font-size: 0.82rem; color: var(--color-text-muted); text-align: center; margin-top: 18px; }

/* On dark backgrounds (e.g. inside hero or cta-banner) */
.stat-grid--on-dark .stat-tile { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.stat-grid--on-dark .stat-tile__number { color: var(--color-accent); }
.stat-grid--on-dark .stat-tile__label { color: rgba(255,255,255,0.8); }

/* Pricing packages ------------------------------------------------------------ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pricing-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-card--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
}
.pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: var(--radius-btn);
  white-space: nowrap;
}
.pricing-card h3 { margin-bottom: 4px; }
.pricing-card__price { font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: var(--color-primary); margin-bottom: 2px; }
.pricing-card__price span { font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; color: var(--color-text-muted); }
.pricing-card__note { font-size: 0.85rem; margin-bottom: 20px; }
.pricing-card .check-list { margin-bottom: 24px; flex: 1; }
.pricing-card .check-list li { font-size: 0.92rem; }

/* Pricing table (simple, alternative to package cards) ----------------------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.price-table th, .price-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.price-table th {
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
}
.price-table td { color: var(--color-text); font-size: 0.95rem; }
.price-table td:last-child { font-weight: 700; color: var(--color-accent-dark); white-space: nowrap; }
.price-table tr:last-child td { border-bottom: none; }
.price-note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 14px; }

/* FAQ ------------------------------------------------------------------- */
.faq { display: grid; gap: 14px; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-mint-dark);
  flex: none;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; margin: 0; font-size: 0.95rem; }

/* CTA banner — flat navy, no gradient -------------------------------------- */
.cta-banner {
  background: var(--color-primary);
  border-radius: var(--radius);
  padding: 48px;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: visible; /* lets .badge-float sit half outside, per the Fenzl reference */
}
.cta-banner h2 { color: var(--color-white); margin-bottom: 6px; }
.cta-banner p { color: rgba(255,255,255,0.82); margin-bottom: 0; }
.cta-banner .btn-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* Contact card (used in footer / legal pages) --------------------------------- */
.contact-card {
  display: flex;
  gap: 16px;
  padding: 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.contact-card h3 { font-size: 1rem; margin-bottom: 4px; }
.contact-card p { margin-bottom: 0; font-size: 0.95rem; }
.contact-card a { font-weight: 600; }

/* Footer — solid orange bar, the boldest signature move of this template --- */
.site-footer { background: var(--color-accent); color: rgba(255,255,255,0.92); }
.footer-top { padding: 56px 0 36px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.footer-brand img { height: 40px; margin-bottom: 16px; }
.footer-brand p { color: rgba(255,255,255,0.85); font-size: 0.92rem; max-width: 32ch; }
.footer-col h4 {
  color: var(--color-white);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { color: rgba(255,255,255,0.92); font-size: 0.94rem; }
.footer-col a:hover { color: var(--color-primary); }
.footer-col address { font-style: normal; color: rgba(255,255,255,0.92); font-size: 0.94rem; line-height: 1.7; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.3);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}
.footer-bottom a { color: rgba(255,255,255,0.85); }
.footer-bottom a:hover { color: var(--color-primary); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

.demo-banner {
  background: rgba(0,0,0,0.18);
  text-align: center;
  padding: 10px 16px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}

/* Sticky mobile CTA bar (optional, high-conversion pattern, used on every page) --- */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
  padding: 10px 16px;
  gap: 10px;
}
.sticky-cta .btn { flex: 1; }

/* Legal pages ------------------------------------------------------------- */
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-text-muted); }
.prose { max-width: 78ch; }

/* Utilities --------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }


/* ==========================================================================
   === TEMPLATE 2 ADDITIONS ===
   Components that don't exist in Template 1 at all — see
   references/template-2-agency-style.md for the matching HTML. Additive
   only; nothing above depends on these.
   ========================================================================== */

/* Dark accordion — the "Leistungen" list pattern on webdesign-erlangen.com,
   an alternative to the .service-card icon-grid for a Template-2 Leistungen
   section. Always sits inside a .section--cream (navy) section. */
.accordion-dark { display: grid; }
.accordion-dark .accordion-item {
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.accordion-dark .accordion-item:first-child { border-top: 1px solid rgba(255,255,255,0.14); }
.accordion-dark summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-accent);
}
.accordion-dark summary::-webkit-details-marker { display: none; }
.accordion-dark summary::after {
  content: "+";
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-mint);
  flex: none;
  transition: transform 0.2s ease;
}
.accordion-dark .accordion-item[open] summary::after { transform: rotate(45deg); }
.accordion-dark .accordion-item p { padding: 0 4px 22px; margin: 0; color: rgba(255,255,255,0.75); max-width: 68ch; }

/* Flat portfolio tile grid — plain, chrome-free image tiles (no border,
   radius, or shadow), used only where there's real project imagery to show
   (e.g. an optional "so sehen unsere Projekte aus" section). Don't use this
   for anything without genuine images behind it — an empty/placeholder tile
   grid reads as a broken layout, not as intentional minimalism. */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.portfolio-tile { aspect-ratio: 4/3; overflow: hidden; background: var(--color-cream); }
.portfolio-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Floating round badge — the playful mint "Wir checken..." sticker from the
   reference site. Position it with inline style (top/right or bottom/left
   percentages) relative to a `position:relative` ancestor — usually
   .cta-banner. Use sparingly, at most once per page. */
.badge-float {
  position: absolute;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.25;
  padding: 12px;
  box-shadow: var(--shadow-md);
  transform: rotate(-8deg);
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 980px) {
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pricing-card--featured { transform: none; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 520px; }
  .split { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .check-list--2col { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topbar .container { justify-content: center; gap: 16px; }
  .nav-main { display: none; }
  .nav-toggle { display: block; }
  .site-header.is-open .nav-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary);
    padding: 12px 24px 20px;
    box-shadow: var(--shadow-md);
  }
  .site-header.is-open .nav-main a { padding: 10px 0; width: 100%; }
  .grid--5, .grid--4, .grid--3 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 56px 0; }
  .cta-banner { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .price-table { display: block; overflow-x: auto; }
  .sticky-cta { display: flex; }
  .badge-float { position: static; margin-top: 20px; transform: none; }
  body { padding-bottom: 64px; } /* room for sticky-cta */
}

@media (max-width: 480px) {
  .topbar .container a:nth-child(2) { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .brand img { height: 34px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn--accent.btn--sm { display: none; } /* sticky-cta covers this CTA at this width */
  .hero-actions .btn,
  .cta-banner .btn-group .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ==========================================================================
   FIX: white-on-white text inside white cards/FAQ items/testimonials that
   sit nested inside a .section--cream (navy) section. .section--cream's
   descendant color rules above are meant for text sitting directly on the
   navy background — they should not reach into a still-white child card.
   Hits in practice: a .card/.usp-card grid (e.g. a Standorte-Teaser or a
   Stadtteile grid) dropped into a .section--cream wrapper, a .testimonial-card
   block reused inside a cream section, or faq_accordion(..., cream=True) on
   a location page — all go invisible without this.
   ========================================================================== */
.section--cream .card h1,
.section--cream .card h2,
.section--cream .card h3,
.section--cream .card h4,
.section--cream .faq-item summary { color: var(--color-primary); }
.section--cream .card p,
.section--cream .card li,
.section--cream .faq-item p { color: var(--color-text-muted); }
.section--cream .card .eyebrow { color: var(--color-accent-dark); }
.section--cream .testimonial-card__quote { color: var(--color-text); }
.section--cream .testimonial-card__project { color: var(--color-primary); }
.section--cream .testimonial-card__source { color: var(--color-text-muted); }
.section--cream .pricing-card h3 { color: var(--color-text); }
.section--cream .pricing-card__note { color: var(--color-text-muted); }
.section--cream .pricing-card .check-list li { color: var(--color-text); }

/* ==========================================================================
   PROJEKT-ERGAENZUNGEN  webdesign-elektriker.de
   Wird von src/build_css.py an das Template-2-Stylesheet angehaengt.
   Nur Komponenten, die dieses Projekt zusaetzlich braucht.
   ========================================================================== */

/* Wortmarke im Header und Footer (Bildmarke als Inline-SVG + echter Text) --- */
.brand { gap: 12px; text-decoration: none; align-items: center; }
.brand__mark { display: block; width: 40px; height: 40px; color: var(--color-white); flex: none; }
.brand__mark svg { display: block; width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--color-white);
}
.brand__text > span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 5px;
}
.site-footer .brand { margin-bottom: 16px; }
.site-footer .brand__text > span { color: var(--color-primary); }

/* Topbar-Hinweis links --------------------------------------------------- */
.topbar__note { margin-right: auto; color: rgba(255,255,255,0.68); }

/* Angebotsblock auf der Startseite --------------------------------------- */
.offer { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 44px; align-items: start; }
.offer__main .check-list li { color: rgba(255,255,255,0.85); }
.offer__side { display: flex; flex-direction: column; }
.offer__side p { font-size: 0.92rem; }
.offer__side .btn { margin-bottom: 10px; }
.offer__price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--color-primary);
}
.offer__price { margin-bottom: 20px; }
.offer__price span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.offer__fine { font-size: 0.78rem; margin: 4px 0 0; }

/* Leistungskarten mit Icon statt Foto ------------------------------------ */
.service-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream-dark);
}
.service-card__icon { color: var(--color-accent-dark); line-height: 0; }
.service-card__icon svg { width: 46px; height: 46px; }

/* Karten, die selbst ein Link sind (Standortkacheln) ---------------------- */
a.card { text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
a.card h3 { color: var(--color-primary); }
a.card:hover h3 { color: var(--color-accent-dark); }

/* Kontaktkarten auf der Anfrage-Seite ------------------------------------ */
.contact-choice { display: flex; flex-direction: column; }
.contact-choice p { flex: 1; }
.contact-choice h3 { margin-bottom: 8px; }

/* Tabellen --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.price-table td { white-space: normal; }
.price-table--plain td:last-child {
  font-weight: 400;
  color: var(--color-text);
  white-space: normal;
}
.price-table th { white-space: normal; }
.section--cream .price-table { background: var(--color-white); }

/* Ratgeber-Artikel ------------------------------------------------------- */
.prose { margin-left: auto; margin-right: auto; }
.prose.article h2 { margin-top: 1.9em; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.prose.article h3 { margin-top: 1.4em; }
.prose.article ol, .prose.article ul { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose.article li { margin-bottom: 0.55em; }
.prose.article .table-wrap { margin: 0 0 1.6em; }
.prose.article .check-list { max-width: none !important; }
.prose.article .stat-note { text-align: left; }

/* Kleinigkeiten ---------------------------------------------------------- */
.stat-note a { font-weight: 600; }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
.check-list li span { display: block; }
.hero-media { background: transparent; }
.badge-float { z-index: 2; }

@media (max-width: 980px) {
  .offer { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* Template 2 bricht grid--3/4/5 um, grid--2 aber nicht - nachgeruestet. */
  .grid--2 { grid-template-columns: 1fr; }
  .topbar__note { display: none; }
  .topbar .container { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand__text strong { font-size: 1.02rem; }
  .brand__mark { width: 34px; height: 34px; }
}

@media (max-width: 480px) {
  .topbar .container a:nth-child(2) { display: inline-flex; }
  .offer__price { font-size: 2.3rem; }
}

/* Hero-Headline baendigen: Template 2 erlaubt bis 4.4rem, das ergibt auf der
   Startseite vier Zeilen und draengt die Buttons unter die Falz. */
.hero-copy h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); }

/* Lange deutsche Komposita (z. B. "Datenschutzerklaerung") sprengen auf
   schmalen Displays sonst den Viewport. */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: manual; }
/* Silbentrennung nur dort, wo einzelne lange Komposita sonst ueberlaufen -
   nicht in mehrwortigen Section-Headlines, das liest sich unruhig. */
.page-hero h1, .prose h2, .prose h3 { hyphens: auto; }
.prose a, .footer-col a, address a { overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .page-hero h1 { font-size: clamp(1.7rem, 7.6vw, 2.3rem); }
  .hero-copy h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
}

/* Sehr schmale Displays (ab iPhone SE): Grid-Kinder duerfen schrumpfen,
   sonst schieben lange Woerter den ganzen Viewport nach rechts. */
.grid > *, .offer > *, .stat-grid > *, .pricing-grid > * { min-width: 0; }
.accordion-dark summary { min-width: 0; overflow-wrap: break-word; }
.stat-tile__number, .stat-tile__label { overflow-wrap: break-word; }

@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* Die Hauptnavigation hat sechs Punkte plus CTA-Button. Template 2 klappt sie
   erst ab 760px ein - zwischen 760 und ~1000px passt sie aber nicht in eine
   Zeile und schiebt den Header breiter als den Viewport. Breakpoint angehoben. */
@media (max-width: 1000px) {
  .nav-main { display: none; }
  .nav-toggle { display: block; }
  .site-header.is-open .nav-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary);
    padding: 12px 24px 20px;
    box-shadow: var(--shadow-md);
    z-index: 110;
  }
  .site-header.is-open .nav-main a { padding: 10px 0; width: 100%; }
}

@media (max-width: 760px) {
  /* Auf dem Handy zuerst die Botschaft, dann das Bild - Template 2 stellt die
     Hero-Grafik sonst ueber die Headline. */
  .hero-media { order: 1; margin: 28px auto 0; }
  .hero .container { padding-top: 56px; padding-bottom: 56px; }
  /* Kleiner gesetzt, damit "Webdesign Elektriker" ohne Trennstrich in eine
     Zeile passt. */
  .hero-copy h1 { font-size: clamp(1.7rem, 7.2vw, 2.6rem); }
}

/* Hero-Headline: "Webdesign Elektriker" soll ungetrennt in eine Zeile passen. */
.hero .container { grid-template-columns: 1.2fr 0.8fr; }
.hero-copy h1 { font-size: clamp(2.2rem, 4vw, 3.1rem); }