/* ==========================================================================
   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;
  white-space: nowrap;
}
.nav-main a:hover, .nav-main a.active, .nav-main a[aria-current="page"] { 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 h3, .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); }

/* Project override: long descriptive cells in the location fact tables should wrap
   on narrow screens rather than forcing the table into horizontal scroll. */
@media (max-width: 760px) {
  .price-table td:last-child { white-space: normal; }
}

/* Project override: this site's footer carries a fourth column (Service Areas)
   alongside brand, site links and contact. */
@media (min-width: 981px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}