/* =====================================================
   Setara-Anna Lorenz – Redesign Stylesheet
   Corporate Design: Orange / Petrol / Türkis-Akzent
   ===================================================== */

/* Manche Page-Builder-/Block-Plugins (z. B. "Stackable") wickeln den Inhalt
   eines Shortcode-Blocks zusätzlich in ein <p>-Element ein. Da <div> kein
   gültiges Kind von <p> ist, schließt der Browser dieses <p> sofort wieder –
   es bleibt aber als leeres Element mit eigenem Rand/Hintergrund direkt vor
   unserem Design stehen (sichtbar als dünner Streifen über der Navbar).
   Wird hier ausgeblendet, sobald direkt danach unser Wrapper folgt. */
p:has(+ .setara-site) {
  display: none;
}

:root {
  --nav-h: 76px;
  --c-primary: #E8712E;
  --c-primary-dark: #C15A1F;
  --c-primary-light: #F5AD74;
  --c-secondary: #123C3C;
  --c-accent: #2EC4B6;
  --c-accent-dark: #23A296;
  --c-bg: #F7FAF9;
  --c-bg-alt: #EAF3F1;
  --c-white: #FFFFFF;
  --c-text: #123C3C;
  --c-text-muted: #4C6B68;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 4px 14px rgba(18, 60, 60, 0.06);
  --shadow-md: 0 10px 30px rgba(18, 60, 60, 0.10);
  --shadow-lg: 0 20px 45px rgba(18, 60, 60, 0.16);
  --font-head: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --max-width: 1180px;
}

/* ---------- Reset & Base ---------- */
.setara-site * { box-sizing: border-box; }
.setara-site {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.65;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* Lange deutsche Wortzusammensetzungen (z. B. "Themenschwerpunkte",
     "Medienpädagogik") haben keine natürliche Umbruchstelle und würden auf
     sehr schmalen Handybreiten sonst die Seite horizontal aufreißen statt
     umzubrechen. Gilt (vererbt) für alle Texte innerhalb der Seite. */
  overflow-wrap: break-word;
}
.setara-site img { max-width: 100%; height: auto; display: block; }
.setara-site svg { stroke: currentColor; }
.setara-site a { color: var(--c-primary); text-decoration: none; transition: color .2s ease; }
.setara-site a:hover { color: var(--c-primary-dark); }
/* Basis-Normalisierung für Formularelemente – unabhängig davon, was Theme
   (Blocksy) oder andere Plugins (WPForms, Elementor, Stackable) global
   vorgeben, damit z. B. ein künftiges Auswahlfeld in einem WPForms-Formular
   automatisch zur eigenen Typografie passt statt Theme-Standardwerte zu übernehmen. */
.setara-site input, .setara-site select, .setara-site textarea, .setara-site button {
  font-family: var(--font-body); color: var(--c-text); line-height: 1.5;
}
.setara-site h1, .setara-site h2, .setara-site h3, .setara-site h4 {
  font-family: var(--font-head);
  color: var(--c-secondary);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .6em;
}
.setara-site h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.setara-site h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.setara-site h3 { font-size: 1.25rem; }
.setara-site p { margin: 0 0 1em; color: var(--c-text-muted); }
.setara-site .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.setara-site section { padding: 90px 0; }
.setara-site .section-tight { padding: 60px 0; }

/* ---------- Eyebrow / Section headers ---------- */
.setara-site .eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(232,113,46, .1);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.setara-site .section-head { max-width: 720px; margin: 0 auto 50px; text-align: center; }
.setara-site .section-head p { font-size: 1.08rem; }

/* ---------- Buttons ---------- */
.setara-site .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.setara-site .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.setara-site .btn:hover { transform: translateY(-2px); }
.setara-site .btn-primary {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.setara-site .btn-primary:hover { background: var(--c-primary-dark); color: var(--c-white); box-shadow: var(--shadow-md); }
.setara-site .btn-secondary {
  background: transparent;
  border-color: var(--c-secondary);
  color: var(--c-secondary);
}
.setara-site .btn-secondary:hover { background: var(--c-secondary); color: var(--c-white); }
.setara-site .btn-light {
  background: var(--c-white);
  color: var(--c-secondary);
  box-shadow: var(--shadow-sm);
}
.setara-site .btn-light:hover { background: var(--c-secondary); color: var(--c-white); }
.setara-site .btn-block { width: 100%; justify-content: center; }
.setara-site .btn-sm { padding: 10px 20px; font-size: .85rem; }

/* ---------- Nav ---------- */
.setara-site .site-nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(18,60,60,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.setara-site .site-nav .nav-inner {
  display: flex; align-items: center; justify-content: space-between; height: 100%;
  padding: 0 24px; max-width: var(--max-width); margin: 0 auto;
}
/* Auf Seiten mit Headerbild: Navbar transparent, solange nicht gescrollt wurde –
   das Headerbild reicht bis hinter die Navbar und scheint durch. */
.setara-site .site-nav:has(~ .page-hero .page-hero-bg):not(.is-scrolled) {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
.setara-site .nav-brand { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--c-white); }
.setara-site .nav-brand span { color: var(--c-primary-light); }
.setara-site .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.setara-site .nav-links > li { position: relative; }
.setara-site .nav-links a { font-weight: 600; color: rgba(255,255,255,.75); font-size: .95rem; display: inline-flex; align-items: center; gap: 4px; }
.setara-site .nav-links a:hover { color: var(--c-accent); }
.setara-site .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.setara-site .nav-toggle span { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--c-white); border-radius: 2px; }

/* ---------- Hero ---------- */
.setara-site .hero {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #FDEEE6 0%, var(--c-bg) 100%);
  overflow: hidden;
}
.setara-site .hero .hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; grid-template-areas: "copy photo";
  gap: 60px; align-items: center;
}
.setara-site .hero-copy { grid-area: copy; }
.setara-site .hero-eyebrow {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-primary); font-size: .85rem; margin-bottom: 14px;
}
.setara-site .hero h1 { margin-bottom: 20px; }
.setara-site .hero .lead { font-size: 1.15rem; max-width: 560px; margin-bottom: 32px; }
.setara-site .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.setara-site .hero-photo-wrap {
  grid-area: photo;
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5; background: var(--c-secondary);
}
.setara-site .hero-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.setara-site .hero-badge {
  position: absolute; bottom: 20px; left: 20px; background: var(--c-white);
  border-radius: var(--radius-sm); padding: 14px 18px; box-shadow: var(--shadow-md);
  font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--c-secondary);
}
.setara-site .hero-badge span { display: block; font-weight: 400; font-size: .78rem; color: var(--c-text-muted); }

/* ---------- Cards / Grid ---------- */
.setara-site .services-grid,
.setara-site .about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.setara-site .card {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(18,60,60,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.setara-site .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(232,113,46,.25);
}
.setara-site .card-icon {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,113,46,.12); color: var(--c-primary);
  margin-bottom: 20px;
}
.setara-site .card-icon svg { width: 28px; height: 28px; stroke: var(--c-primary); }
.setara-site .card h3 { margin-bottom: 10px; }
.setara-site .card p { flex-grow: 1; margin-bottom: 20px; }
.setara-site .card-cta {
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  color: var(--c-secondary); display: inline-flex; align-items: center; gap: 6px;
}
.setara-site .card-cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.setara-site .card:hover .card-cta svg { transform: translateX(4px); }
.setara-site .card-cta:hover { color: var(--c-primary); }

/* Orange accent variant (e.g. featured card) */
.setara-site .card-orange {
  background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: var(--c-white); border: none;
}
.setara-site .card-orange h3, .setara-site .card-orange p { color: var(--c-white); }
.setara-site .card-orange .card-icon { background: rgba(255,255,255,.18); color: var(--c-white); }
.setara-site .card-orange .card-icon svg { stroke: var(--c-white); }
.setara-site .card-orange .card-cta { color: var(--c-white); }

.setara-site .grid-cta { text-align: center; margin-top: 44px; }

/* ---------- Timeline (used on Lebenslauf) ---------- */
.setara-site .timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.setara-site .timeline li {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 24px 1fr; column-gap: 20px;
  padding-bottom: 28px;
}
.setara-site .timeline li:last-child { padding-bottom: 0; }
.setara-site .timeline .tl-date {
  grid-column: 2; grid-row: 1;
  font-family: var(--font-head); font-weight: 700; color: var(--c-primary);
  font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.setara-site .timeline .tl-dot {
  grid-column: 1; grid-row: 2; align-self: center; justify-self: center;
  position: relative; z-index: 1;
  display: inline-block; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  background: var(--c-primary); border: 4px solid var(--c-bg); box-shadow: 0 0 0 3px rgba(232,113,46,.25);
}
/* Robustheit: falls der Editor die Zeile jemals in einen <p>-Tag einwickelt
   (wpautop), bleibt der Punkt dank display:inline-block trotzdem ein Kreis
   statt ein formloser Blob – ein <p> um den Punkt herum kostet keinen Platz. */
.setara-site .timeline p:has(> .tl-dot) { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; margin: 0; line-height: 0; }
.setara-site .timeline .tl-dot::before,
.setara-site .timeline .tl-dot::after {
  content: ''; position: absolute; left: 50%; width: 2px; height: 300px;
  background: rgba(18,60,60,.18); transform: translateX(-50%); z-index: 0;
}
.setara-site .timeline .tl-dot::before { bottom: 100%; }
.setara-site .timeline .tl-dot::after { top: 100%; }
.setara-site .timeline li:first-child .tl-dot::before { display: none; }
.setara-site .timeline li:last-child .tl-dot::after { display: none; }
.setara-site .timeline h3 { grid-column: 2; grid-row: 2; margin: 0; }
.setara-site .timeline p { grid-column: 2; grid-row: 3; margin: 6px 0 0; }

/* ---------- Contact ---------- */
.setara-site .contact-section { background: var(--c-secondary); color: var(--c-white); border-radius: var(--radius); }
.setara-site .contact-section-inner { padding-top: 60px; padding-bottom: 60px; }
.setara-site .contact-section .section-head p { color: rgba(255,255,255,.75); }
.setara-site .contact-section .eyebrow { background: rgba(255,255,255,.12); color: var(--c-accent); }
.setara-site .contact-section h2 { color: var(--c-white); }
.setara-site .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.setara-site .contact-info-item { display: flex; gap: 14px; margin-bottom: 24px; }
.setara-site .contact-info-item .ci-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: rgba(46,196,182,.2); color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
}
.setara-site .contact-info-item .ci-icon svg { width: 20px; height: 20px; stroke: var(--c-accent); }
.setara-site .contact-info-item strong { display: block; color: var(--c-white); font-family: var(--font-head); }
.setara-site .contact-info-item span { color: rgba(255,255,255,.7); font-size: .92rem; }

.setara-site .contact-form { background: var(--c-white); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow-lg); }
.setara-site .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.setara-site .form-group { margin-bottom: 18px; }
.setara-site .form-group label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--c-secondary); margin-bottom: 8px; }
.setara-site .form-group input,
.setara-site .form-group textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(18,60,60,.15); background: var(--c-bg);
  font-family: var(--font-body); font-size: .96rem; color: var(--c-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.setara-site .form-group input:focus,
.setara-site .form-group textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(232,113,46,.12); background: var(--c-white);
}
.setara-site .form-group textarea { resize: vertical; min-height: 140px; }
.setara-site .form-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; }
.setara-site .form-note { font-size: .82rem; color: var(--c-text-muted); margin-top: 10px; }
.setara-site .form-alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: .92rem; font-weight: 600; }
.setara-site .form-alert-success { background: #E4F3E7; color: #245C34; }
.setara-site .form-alert-error { background: #FBE6E1; color: #8A2E1B; }

/* ---------- WPForms-Formular ("Kontaktanfrage"): dezente Anpassung an das
   Corporate Design, ohne das WPForms-eigene Layout zu überschreiben ----------
   Das Formular sitzt direkt auf dem petrolfarbenen Hintergrund von
   .contact-section (kein eigener weißer Kasten) – WPForms setzt seine
   Label-Farben intern über CSS-Variablen, die hier überschrieben werden,
   damit Labels/Hinweistexte auf Petrol lesbar (weiß) bleiben. */
.setara-site .wpforms-container {
  --wpforms-label-color: #ffffff !important;
  --wpforms-label-sublabel-color: rgba(255,255,255,.7) !important;
}
.setara-site .wpforms-container .wpforms-field-label,
.setara-site .wpforms-container .wpforms-field-sublabel {
  color: #ffffff !important; font-family: var(--font-head); font-weight: 600;
}
.setara-site .wpforms-container .wpforms-field-description { color: rgba(255,255,255,.75) !important; }
.setara-site .wpforms-container button[type="submit"] {
  background: var(--c-primary) !important; border-color: var(--c-primary) !important;
  border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 600;
}
.setara-site .wpforms-container button[type="submit"]:hover { background: var(--c-primary-dark) !important; border-color: var(--c-primary-dark) !important; }

/* ---------- Page hero (subpages): Bild als Vollbild-Banner, Text überlagert ---------- */
.setara-site .page-hero {
  position: relative;
  padding: 0; margin: 0; overflow: hidden; background: var(--c-secondary);
}
.setara-site .page-hero:has(.page-hero-bg) {
  margin-top: calc(-1 * var(--nav-h));
}
.setara-site .page-hero + .section-tight { padding-top: 24px; }
.setara-site .page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.setara-site .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.setara-site .page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(18,60,60,.92) 0%, rgba(18,60,60,.78) 34%, rgba(18,60,60,.42) 62%, rgba(18,60,60,.12) 100%);
}
/* Icon schwebt unabhängig vom Hintergrundbild – bleibt bei jeder Fensterbreite
   rechtsbündig sichtbar und wird nie durch object-fit: cover mit abgeschnitten.
   Fixer Ankerpunkt direkt unter der Navbar (top: var(--nav-h)) plus eine rein
   viewport-basierte Maximalhöhe (kein Abhängen von der Elternhöhe) – dadurch
   kann das Icon nie hinter/über die Navbar geraten und verschwindet nie durch
   eine nicht auflösbare Prozent-Höhe. */
.setara-site .page-hero-icon {
  position: absolute; z-index: 2;
  top: var(--nav-h); right: clamp(20px, 6vw, 90px);
  pointer-events: none;
}
.setara-site .page-hero-icon svg {
  display: block;
  width: clamp(200px, 32vw, 380px);
  height: auto;
  max-height: clamp(160px, 26vw, 300px);
  opacity: 0.92;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.setara-site .page-hero .container {
  position: relative; z-index: 3; width: 100%;
  padding-top: 48px; padding-bottom: 48px;
}
/* Bei Headerbild: Text startet erst unterhalb der (transparenten) Navbar,
   damit Bild+Navbar überlappen, aber der Hero trotzdem mit dem Textinhalt endet. */
.setara-site .page-hero:has(.page-hero-bg) .container {
  padding-top: calc(var(--nav-h) + 40px);
}
.setara-site .page-hero .breadcrumb { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.65); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 100%; overflow-x: auto; }
.setara-site .page-hero .breadcrumb a { color: var(--c-accent); }
.setara-site .page-hero .eyebrow { background: rgba(255,255,255,.15); color: var(--c-accent); }
.setara-site .page-hero h1 { max-width: 55%; color: var(--c-white); }
.setara-site .page-hero .lead { max-width: 48%; font-size: 1.1rem; color: rgba(255,255,255,.88); }
.setara-site .breadcrumb { font-size: .85rem; font-weight: 600; color: var(--c-text-muted); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 100%; overflow-x: auto; }
.setara-site .breadcrumb a { color: var(--c-primary); }

.setara-site .content-block { max-width: 820px; }
.setara-site .content-block h2 { margin-top: 1.4em; }
.setara-site .content-block > h2:first-child { margin-top: 0; }
.setara-site .content-block ul { padding-left: 1.3em; color: var(--c-text-muted); }
.setara-site .content-block li { margin-bottom: .5em; }

.setara-site .info-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0;
}
.setara-site .info-strip .info-item {
  background: var(--c-white); border-radius: var(--radius-sm); padding: 22px; box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--c-primary);
}
.setara-site .info-strip .info-item strong { display: block; font-family: var(--font-head); color: var(--c-secondary); margin-bottom: 4px; }

/* ---------- Beitragsliste (Projekte & Einblicke) ---------- */
.setara-site .post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.setara-site .post-card {
  background: var(--c-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(18,60,60,.05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.setara-site .post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(232,113,46,.25); }
.setara-site .post-card-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-primary) 100%); }
.setara-site .post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.setara-site .post-card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.setara-site .post-date { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 10px; }
.setara-site .post-date svg { width: 14px; height: 14px; stroke: var(--c-primary); }
.setara-site .post-card h3 { margin-bottom: 10px; }
.setara-site .post-card h3 a { color: var(--c-secondary); }
.setara-site .post-card h3 a:hover { color: var(--c-primary); }
.setara-site .post-excerpt { flex-grow: 1; margin-bottom: 18px; }
.setara-site .post-empty { background: var(--c-white); border-radius: var(--radius); padding: 48px; text-align: center; box-shadow: var(--shadow-sm); }

.setara-site .cta-band {
  background: var(--c-secondary); color: var(--c-white); border-radius: var(--radius);
  padding: 24px; text-align: center; margin-top: 30px;
}
.setara-site .cta-band h2 { color: var(--c-white); font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin-bottom: .5em; }
.setara-site .cta-band .hero-buttons { justify-content: center; }
.setara-site .cta-band .btn { padding: 10px 20px; font-size: .85rem; }

/* ---------- Footer ---------- */
.setara-site .site-footer { background: var(--c-secondary); color: rgba(255,255,255,.8); padding: 60px 0 30px; margin-top: 50px; }
.setara-site .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.setara-site .site-footer h4 { color: var(--c-white); font-family: var(--font-head); font-size: 1rem; margin-bottom: 16px; }
.setara-site .site-footer a { color: rgba(255,255,255,.7); }
.setara-site .site-footer a:hover { color: var(--c-accent); }
.setara-site .footer-links { list-style: none; margin: 0; padding: 0; }
.setara-site .footer-links li { margin-bottom: 10px; }
.setara-site .footer-brand { font-family: var(--font-head); font-weight: 800; color: var(--c-white); font-size: 1.2rem; margin-bottom: 10px; }
.setara-site .footer-brand span { color: var(--c-primary-light); }
.setara-site .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: .85rem; color: rgba(255,255,255,.55);
}
.setara-site .footer-bottom-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }

/* ---------- Responsive ---------- */
/* Unter 1024px (Tablet-Breite und schmäler) ist neben dem Text kein Platz
   mehr für die große, hochformatige Hero-Foto-Spalte – eine zweispaltige
   Anordnung würde hier zwangsläufig eng werden und beim Ändern der
   Fensterbreite unruhig wirken. Statt dessen wechselt der Hero-Bereich auf
   eine eigene, kompakte Anordnung: Name und ein kleines, quadratisch
   wirkendes Profilfoto stehen auf gleicher Höhe nebeneinander, darunter
   folgen Fließtext und Buttons über die volle Breite. `display: contents`
   löst die Umschließung von .hero-copy auf, damit deren Kinder (Eyebrow,
   Name, Text, Buttons) direkt als Grid-Felder des Hero-Grids positioniert
   werden können – ohne die Reihenfolge im HTML ändern zu müssen. */
@media (max-width: 1024px) {
  .setara-site .hero .hero-grid {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "eyebrow eyebrow"
      "name    photo"
      "lead    lead"
      "buttons buttons";
    column-gap: 20px;
    row-gap: 6px;
  }
  .setara-site .hero-copy { display: contents; }
  .setara-site .hero-eyebrow { grid-area: eyebrow; margin-bottom: 2px; }
  .setara-site .hero-name {
    grid-area: name; align-self: center; margin-bottom: 0;
    font-size: clamp(1.75rem, 5.5vw, 2.4rem);
  }
  .setara-site .hero .lead { grid-area: lead; max-width: none; margin: 14px 0 24px; }
  .setara-site .hero-buttons { grid-area: buttons; }
  .setara-site .hero-photo-wrap {
    grid-area: photo; align-self: center; justify-self: end;
    width: 92px; height: 115px; max-width: none; margin: 0;
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  }
  /* Die freistehende Info-Karte ("Pädagogin & Legasthenietrainerin, Wien")
     ist für die große Desktop-Fotokachel gedacht und würde auf dem kleinen
     Foto nicht mehr lesbar Platz finden – auf Kompaktbreiten daher ausgeblendet. */
  .setara-site .hero-badge { display: none; }
}

@media (max-width: 480px) {
  .setara-site .hero-photo-wrap { width: 72px; height: 90px; }
}

/* Das dekorative Seitenkopf-Icon (Unterseiten mit Illustration) und der
   Eyebrow-Badge ("Angebot" etc.) kommen sich auf sehr schmalen Handybreiten
   in die Quere, da beide oben rechts/links um denselben schmalen Streifen
   konkurrieren. Da das Icon rein dekorativ ist, wird es hier ausgeblendet,
   statt den Text dahinter kollidieren zu lassen. */
@media (max-width: 540px) {
  .setara-site .page-hero-icon { display: none; }
}

/* Die vier Nav-Links samt Marke passen ab ca. 750px nicht mehr entspannt in
   eine Zeile (einzelne Links würden umbrechen, ohne dass die Navbar dafür
   höher wird) – das Hamburger-Menü greift daher schon deutlich vor der
   680px-Marke der übrigen mobilen Anpassungen. */
@media (max-width: 860px) {
  .setara-site .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; background: rgba(18,60,60,.98);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 24px 20px;
    box-shadow: var(--shadow-md); border-bottom: 1px solid rgba(255,255,255,.08);
    display: none;
  }
  .setara-site .nav-links.is-open { display: flex; }
  .setara-site .nav-links > li { width: 100%; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .setara-site .nav-toggle { display: block; }
}

@media (max-width: 980px) {
  .setara-site .services-grid,
  .setara-site .about-grid { grid-template-columns: repeat(2, 1fr); }
  .setara-site .contact-grid { grid-template-columns: 1fr; }
  .setara-site .post-grid { grid-template-columns: 1fr; }
  .setara-site .info-strip { grid-template-columns: repeat(2, 1fr); }
  .setara-site .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .setara-site section { padding: 60px 0; }
  /* Hero und Kontakt-Teaser hatten auf Handybreite zusammen sehr viel reinen
     Leerraum (100px Hero-Innenabstand unten + 60px Section-Abstand oben,
     ohne dass optisch etwas dazwischen passiert) – auf dieser Breite reicht
     spürbar weniger, damit sich die Startseite nicht unnötig in die Länge zieht. */
  .setara-site .hero { padding: 48px 0 56px; }
  .setara-site .page-hero .container { padding-top: 32px; padding-bottom: 32px; }
  .setara-site .page-hero:has(.page-hero-bg) .container { padding-top: calc(var(--nav-h) + 28px); }
  /* Die 68%-Begrenzung hält Überschrift/Lead auf Unterseiten mit Headerbild
     bewusst neben dem dekorativen Icon bzw. dem dunklen Verlauf schmal.
     Seiten ohne Headerbild (z. B. Kontakt, Angebote) haben dieses Icon nicht
     und brauchen die Einschränkung nicht – dort wirkte sie nur wie ein
     unmotivierter, zu früher Zeilenumbruch. */
  .setara-site .page-hero:has(.page-hero-bg) h1,
  .setara-site .page-hero:has(.page-hero-bg) .lead { max-width: 68%; }
  .setara-site .page-hero:not(:has(.page-hero-bg)) h1,
  .setara-site .page-hero:not(:has(.page-hero-bg)) .lead { max-width: 100%; }
  .setara-site .page-hero-icon { right: 16px; }
  .setara-site .page-hero-icon svg { width: clamp(140px, 50vw, 225px); max-height: clamp(110px, 40vw, 180px); opacity: .8; }
  .setara-site .page-hero::after { background: linear-gradient(180deg, rgba(18,60,60,.88) 0%, rgba(18,60,60,.7) 55%, rgba(18,60,60,.35) 100%); }
  .setara-site .services-grid,
  .setara-site .about-grid,
  .setara-site .info-strip,
  .setara-site .footer-grid { grid-template-columns: 1fr; }
  .setara-site .form-row { grid-template-columns: 1fr; }
  .setara-site .cta-band .hero-buttons { flex-direction: column; align-items: stretch; }
  .setara-site .cta-band .btn { width: 100%; text-align: center; justify-content: center; }
  .setara-site .hero-buttons .btn { padding: 12px 20px; font-size: .88rem; }
  .setara-site .contact-form { padding: 26px; }
  .setara-site .contact-section-inner { padding-top: 40px; padding-bottom: 40px; }
  .setara-site .cta-band { padding: 17px 11px; }
  .setara-site .footer-bottom { flex-direction: column; align-items: flex-start; }
}