@charset "UTF-8";
/* ==========================================================================
   perspekTEAM – Stylesheet
   Alle Ressourcen lokal eingebunden (DSGVO-konform, keine externen Requests)
   ========================================================================== */

/* ---------- Fonts (lokal) ---------- */
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand_book-webfont.woff2") format("woff2"),
       url("../fonts/quicksand_book-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand_bold-webfont.woff2") format("woff2"),
       url("../fonts/quicksand_bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/notosans-regular-webfont.woff2") format("woff2"),
       url("../fonts/notosans-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/notosans-bold-webfont.woff2") format("woff2"),
       url("../fonts/notosans-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  --blau:        #004d7b;
  --blau-hell:   #0a6396;
  --cyan:        #009ed7;
  --gruen:       #7db159;
  --gruen-dunkel:#6a9a49;
  --gruen-blass: #eaeee7;
  --magenta:     #d73b84;
  --schwarz:     #1d1d1b;
  --text:        #333333;
  --text-leise:  #6f6f6f;
  --bg:          #f6f6f6;
  --weiss:       #ffffff;
  --weiss-leicht: rgba(255, 255, 255, .74);
  --linie:       #d9dbd6;

  --font-head: "Quicksand", "Trebuchet MS", sans-serif;
  --font-body: "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  --header-h: 96px;
  --header-h-klein: 68px;
  --radius: 4px;
  --shadow: 0 4px 18px rgba(0, 0, 0, .12);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: var(--blau); text-decoration: none; }
a:hover, a:focus-visible { color: var(--gruen); text-decoration: none; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 .6em;
  color: var(--schwarz);
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

/* ---------- Hilfsklassen ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px;
  z-index: 2000;
  background: var(--blau); color: #fff;
  padding: 10px 18px; border-radius: var(--radius);
  transition: top .2s;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ==========================================================================
   Kopfbereich / Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: var(--weiss);
  border-bottom: 1px solid transparent;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.site-header.is-sticky {
  background: var(--gruen-blass);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
  border-bottom-color: rgba(0, 0, 0, .05);
}

.header-inner {
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(16px, 2.4vw, 40px);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: min-height .28s ease;
}
.site-header.is-sticky .header-inner { min-height: var(--header-h-klein); }

/* Logo: am Desktop groß als weiße Karte, die über den Hero ragt */
.logo {
  display: block;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  align-self: flex-start;        /* schliesst oben mit dem Browserrand ab */
  background: var(--weiss);
  border-radius: 0 0 16px 16px;
  box-shadow: var(--shadow);
  padding: 10px 22px 18px;
  margin-bottom: -74px;          /* ragt in den Hero hinein */
  transition: padding .28s ease, margin .28s ease, background .28s ease,
              box-shadow .28s ease, border-radius .28s ease;
}
.logo img {
  width: 264px;
  transition: width .28s ease;
}
.logo:hover, .logo:focus-visible { text-decoration: none; }

/* Sticky: Logo verkleinern, Karte auflösen */
.site-header.is-sticky .logo {
  align-self: center;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
.site-header.is-sticky .logo img { width: 134px; }

/* Hauptnavigation */
.hauptnav ul {
  list-style: none;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.hauptnav a {
  position: relative;
  display: block;
  padding-top: 22px;             /* Platz für das Männchen-Icon */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--text-leise);
  transition: color .2s ease;
}
.hauptnav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 21px;
  transform: translateX(-50%) scale(.6);
  background-color: var(--gruen);
  -webkit-mask: url("../img/perspek-figur.svg") no-repeat center / contain;
          mask: url("../img/perspek-figur.svg") no-repeat center / contain;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.hauptnav a:hover,
.hauptnav a:focus-visible,
.hauptnav a[aria-current="page"] {
  color: var(--gruen);
  text-decoration: none;
}
.hauptnav a:hover::before,
.hauptnav a:focus-visible::before,
.hauptnav a[aria-current="page"]::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Mobile-Umschalter */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--gruen);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 22px; height: 2px;
  margin-inline: auto;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-start {
  position: relative;
  margin-top: var(--header-h);
  min-height: min(62vh, 560px);
  background: #cfd8dc center / cover no-repeat;
}
.hero-start img {
  width: 100%;
  height: min(62vh, 560px);
  object-fit: cover;
}

/* Hero der Unterseiten: grünes Textfeld + Bild */
.hero {
  margin-top: var(--header-h);
  padding-top: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 340px;
}
.hero-text {
  background: var(--gruen);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
  padding: 42px 38px 38px;
}
.hero-text .hero-icon {
  width: 58px; height: 58px;
  margin-bottom: 16px;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.hero-text .hero-kicker {
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  margin: 0 0 6px;
  color: #fff;
}
.hero-text h1 { color: #fff; margin: 0; hyphens: auto; overflow-wrap: break-word; }
.hero-bild { position: relative; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.section { position: relative; padding: 68px 0; }
.section--eng { padding: 46px 0; }
.section--gruen { background: var(--gruen-blass); }
.section--weiss { background: var(--weiss); }

/* Hintergrundfigur (aus bg-bild, hier als SVG):
   genau einmal je Seite, waagerecht und senkrecht in der Mitte des Inhalts. */
main { isolation: isolate; overflow: hidden; }
.inhalt { position: relative; }
.inhalt::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 62vw);
  aspect-ratio: 1720 / 1494;
  background-color: var(--gruen);
  opacity: .085;
  -webkit-mask: url("../img/perspek-figur.svg") no-repeat center / contain;
          mask: url("../img/perspek-figur.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 1;
}
.section > .container { position: relative; z-index: 2; }

.section-kopf {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px;
}
.section-kopf h2 { color: var(--blau); }
.section-kopf .lead { font-size: 1.05rem; }
.section-kopf > *:last-child { margin-bottom: 0; }

.start-claim {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.start-claim h1,
.start-claim .claim-zeile2 {
  color: var(--blau);
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
}
.start-claim h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: .15em; }
.start-claim .claim-zeile2 { font-size: clamp(1.5rem, 3vw, 2.15rem); margin: 0 0 .8em; }

/* Zwei-/Dreispalter */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px; }
.grid-3--kontakt { grid-template-columns: 1fr 1fr 1.05fr; align-items: start; }
.grid-2--eng { gap: 30px 46px; }

/* Listen mit Ringpunkten wie in der Vorlage */
.liste { list-style: none; margin: 0 0 1.1em; padding: 0; }
.liste li {
  position: relative;
  padding-left: 26px;
  margin-bottom: .45em;
}
.liste li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 8px; height: 8px;
  border: 1px solid #9a9a9a;
  border-radius: 50%;
}
.liste--gruen li::before { border-color: var(--gruen); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 30px;
  background: var(--gruen);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--gruen-dunkel); color: #fff; text-decoration: none; }
.btn--weiss { background: #fff; color: var(--blau); }
.btn--weiss:hover, .btn--weiss:focus-visible { background: #eef4f7; color: var(--blau); }
.btn .icon { flex: 0 0 auto; width: 1.45em; height: 1.45em; }
.btn--weiss .icon { background-color: var(--blau); }
.btn--gross { padding: 18px 34px; font-size: 1.02rem; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.btn-reihe--zentriert { justify-content: center; }

/* ==========================================================================
   Icons (als CSS-Masken, keine Emojis, keine externen Requests)
   ========================================================================== */
.icon {
  display: inline-block;
  width: 1.15em; height: 1.15em;
  vertical-align: -.2em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.btn .icon { background-color: #fff; }
.icon--gross { width: 1.5em; height: 1.5em; }

.icon--telefon  { -webkit-mask-image: var(--i-telefon);  mask-image: var(--i-telefon); }
.icon--mobil    { -webkit-mask-image: var(--i-mobil);    mask-image: var(--i-mobil); }
.icon--mail     { -webkit-mask-image: var(--i-mail);     mask-image: var(--i-mail); }
.icon--adresse  { -webkit-mask-image: var(--i-adresse);  mask-image: var(--i-adresse); }
.icon--kontakt  { -webkit-mask-image: var(--i-kontakt);  mask-image: var(--i-kontakt); }
.icon--workshop { -webkit-mask-image: var(--i-workshop); mask-image: var(--i-workshop); }
.icon--bausteine{ -webkit-mask-image: var(--i-bausteine);mask-image: var(--i-bausteine); }
.icon--team     { -webkit-mask-image: var(--i-team);     mask-image: var(--i-team); }
.icon--info     { -webkit-mask-image: var(--i-info);     mask-image: var(--i-info); }
.icon--pfeil    { -webkit-mask-image: var(--i-pfeil);    mask-image: var(--i-pfeil); }
.icon--pdf      { -webkit-mask-image: var(--i-pdf);      mask-image: var(--i-pdf); }
.icon--kalender { -webkit-mask-image: var(--i-kalender); mask-image: var(--i-kalender); }
.icon--linkedin { -webkit-mask-image: var(--i-linkedin); mask-image: var(--i-linkedin); }
.icon--instagram{ -webkit-mask-image: var(--i-instagram);mask-image: var(--i-instagram); }
.icon--extern   { -webkit-mask-image: var(--i-extern);   mask-image: var(--i-extern); }

:root {
  --i-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.7 21 3 13.3 3 3.9c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.3 0 .7-.2 1l-2.2 2.2z'/%3E%3C/svg%3E");
  --i-mobil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.5 1h-9A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h9a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 16.5 1zM12 21.4a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zM17 17.5H7v-14h10v14z'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.2-8 5-8-5V6l8 5 8-5v2.2z'/%3E%3C/svg%3E");
  --i-adresse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  --i-kontakt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 4H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM8.5 7.5a2.2 2.2 0 1 1 0 4.4 2.2 2.2 0 0 1 0-4.4zM13 17H4v-.9c0-1.5 3-2.3 4.5-2.3s4.5.8 4.5 2.3v.9zm7-1.5h-5V14h5v1.5zm0-3h-5V11h5v1.5zm0-3h-5V8h5v1.5z'/%3E%3C/svg%3E");
  --i-workshop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 3h-9V1.5h-2V3H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h7.2l-2.6 4.4 1.7 1 1.9-3.2V22h2v-3.8l1.9 3.2 1.7-1-2.6-4.4H21a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 11h-8V5h8v9zM7 6.2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm3.2 7.8H3.8v-.6c0-1.3 2.1-2 3.2-2s3.2.7 3.2 2v.6z'/%3E%3C/svg%3E");
  --i-bausteine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm12.5 0H21v3h-2v2h2v3h-8v-8h2.5z'/%3E%3C/svg%3E");
  --i-team: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm7.5 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM9 14c-3 0-7 1.5-7 4.5V21h14v-2.5C16 15.5 12 14 9 14zm7.5 0c-.9 0-1.9.1-2.8.4 1.4 1.1 2.3 2.5 2.3 4.1V21H23v-2.2c0-2.6-3.4-4.8-6.5-4.8z'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
  --i-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.2 4.6 11.8 6l5 5H3v2h13.8l-5 5 1.4 1.4L20.6 12z'/%3E%3C/svg%3E");
  --i-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM8.4 18.5H7v-5h2c1.1 0 1.8.7 1.8 1.7s-.7 1.7-1.8 1.7h-.6v1.6zm0-2.8h.5c.4 0 .6-.2.6-.5s-.2-.5-.6-.5h-.5v1zm3.3 2.8v-5h1.9c1.4 0 2.3 1 2.3 2.5s-.9 2.5-2.3 2.5h-1.9zm1.4-1.2h.4c.7 0 1-.5 1-1.3s-.3-1.3-1-1.3h-.4v2.6zM17 14.7v.9h1.4v1.2H17v1.7h-1.3v-5H19v1.2h-2z'/%3E%3C/svg%3E");
  --i-kalender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zM7 12h5v5H7v-5z'/%3E%3C/svg%3E");
  --i-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.4 2H3.6C2.7 2 2 2.7 2 3.6v16.8c0 .9.7 1.6 1.6 1.6h16.8c.9 0 1.6-.7 1.6-1.6V3.6c0-.9-.7-1.6-1.6-1.6zM8.1 18.7H5.2V9.4h2.9v9.3zM6.6 8.1a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4zm12.1 10.6h-2.9v-4.5c0-1.1 0-2.5-1.5-2.5s-1.8 1.2-1.8 2.4v4.6H9.7V9.4h2.8v1.3h.1c.4-.7 1.3-1.5 2.8-1.5 3 0 3.5 2 3.5 4.5v5z'/%3E%3C/svg%3E");
  --i-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.3-.1-1.7-.1-4.9s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.3-.1 1.7-.1 4.9-.1zm0 3.8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 9.9a3.9 3.9 0 1 1 0-7.8 3.9 3.9 0 0 1 0 7.8zm7.6-10.1a1.4 1.4 0 1 1-2.8 0 1.4 1.4 0 0 1 2.8 0z'/%3E%3C/svg%3E");
  --i-zitat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.3 4.4 11.4 6.6C9.5 7.7 8.1 9.4 7.7 11.1c.3-.1.7-.1 1-.1 2.1 0 3.6 1.6 3.6 3.7 0 2.2-1.7 3.9-3.9 3.9-2.6 0-4.5-2.1-4.5-5.3 0-3.7 2.5-7.2 6.4-8.9zm10 0 1.1 2.2c-1.9 1.1-3.3 2.8-3.7 4.5.3-.1.7-.1 1-.1 2.1 0 3.6 1.6 3.6 3.7 0 2.2-1.7 3.9-3.9 3.9-2.6 0-4.5-2.1-4.5-5.3 0-3.7 2.5-7.2 6.4-8.9z'/%3E%3C/svg%3E");
  --i-extern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3v2h3.6l-8.3 8.3 1.4 1.4L19 6.4V10h2V3h-7zM5 5h5V3H3v18h18v-7h-2v5H5V5z'/%3E%3C/svg%3E");
}

/* Bilder der beiden Startseiten-Spalten auf gleiche Hoehe bringen */
.start-bild {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 22px;
}

/* ==========================================================================
   Karten (Übersicht Workshops + Trainings)
   ========================================================================== */
.karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--weiss-leicht);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.karte:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .09); border-color: #c3c9bd; }
.karte-bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
  background: #e3e3e3;
  border-bottom: 1px solid var(--linie);
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.karte:hover .karte-bild img { transform: scale(1.04); }
.karte h3 { margin: 24px 26px .35em; }
.karte p { color: var(--text); margin: 0 26px 1.4em; }
.karte .btn { margin: auto 26px 26px; align-self: flex-start; }

/* Zusatzhinweis unterhalb des Buchungsblocks */
.buchung-hinweis {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--linie);
}
.buchung-hinweis p { margin: 0; }

/* ==========================================================================
   Termine
   ========================================================================== */
.termin-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 520px));
  justify-content: center;
  gap: 42px 30px;
  margin-top: 46px;
}
.termin {
  position: relative;
  background: var(--weiss-leicht);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 40px 28px 28px;
}
/* Kalender-Icon unterbricht den Rahmen links oben */
.termin-icon {
  position: absolute;
  top: -23px;
  left: 24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  /* Deckend, damit der Kachelrahmen dahinter sauber unterbrochen wird.
     Der Farbwert entspricht der leicht transparenten Kachel auf gruenem Grund. */
  background: #fafbf9;
  border: 1px solid var(--linie);
  border-radius: 50%;
}
.termin-icon .icon {
  width: 24px; height: 24px;
  background-color: var(--gruen);
}
.termin-datum {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--gruen);
  letter-spacing: -.01em;
  margin-bottom: .1em;
}
.termin-ort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  color: var(--text-leise);
  margin-bottom: 1em;
}
.termin-ort .icon { width: 1.05em; height: 1.05em; background-color: var(--gruen); }
.termin h3 { color: var(--blau); font-size: 1.18rem; margin-bottom: .4em; }
.termin p { margin-bottom: .9em; }
.termin-veranstalter { font-size: .95rem; color: var(--text-leise); }
.termin-veranstalter strong { color: var(--text); }
.termin-anmeldung {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: .5em;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--gruen);
  word-break: break-word;
}
.termin-anmeldung .icon { background-color: var(--gruen); }
.termin-anmeldung:hover, .termin-anmeldung:focus-visible { color: var(--gruen-dunkel); }
.termin-anmeldung .icon { transition: transform .2s ease; }
.termin-anmeldung:hover .icon { transform: translateX(3px); }
.termin-offen {
  margin-top: .5em;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text-leise);
}

/* Keine Termine vorhanden */
.termin-leer {
  background: var(--weiss-leicht);
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
  padding: 34px 28px;
  text-align: center;
  color: var(--text-leise);
  margin-top: 34px;
}


/* ==========================================================================
   Handlungsaufruf
   ========================================================================== */
.cta {
  background: var(--cyan);
  color: #fff;
  padding: 40px 44px;
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  justify-content: space-between;
}
.cta h2 { color: #fff; margin-bottom: .2em; }
.cta .cta-zeile2 {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin: 0 0 .6em;
}
.cta p { margin: 0; }
.cta-text { flex: 1 1 380px; }
.cta--uebersicht { background: var(--cyan); }

/* ==========================================================================
   Team
   ========================================================================== */
.person { padding: 46px 0; border-bottom: 1px solid var(--linie); }
.person:last-child { border-bottom: 0; }
.person > h2 { color: var(--blau); margin-bottom: .15em; }
.person .person-rolle { color: var(--text-leise); margin-bottom: 26px; }
.person-grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.person-bild img { border-radius: var(--radius); width: 100%; }
.person-abschluss {
  border-bottom: 2px solid var(--blau);
  padding-bottom: 10px;
  margin-bottom: 22px;
  font-family: var(--font-body);
}
.person h3 { font-size: 1.05rem; margin: 1.4em 0 .5em; }

/* Referentinnen-Kacheln auf Workshop-Seiten */
.referentinnen { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.referentin { width: 220px; text-align: center; }
.referentin img { border-radius: var(--radius); margin-bottom: 14px; width: 100%; }
.referentin strong { display: block; font-family: var(--font-head); color: var(--blau); }
.referentin span { font-size: .92rem; color: var(--text-leise); }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.kontakt-karte {
  background: rgba(125, 177, 89, .13);
  border-radius: var(--radius);
  padding: 32px 30px 34px;
  height: 100%;
}
.kontakt-karte h3 { color: var(--blau); margin-bottom: .8em; }
.kontakt-karte h3 + .kontakt-liste { margin-top: 0; }
.kontakt-karte .person-block + .person-block { margin-top: 34px; }
.kontakt-liste { list-style: none; margin: 0; padding: 0; }
.kontakt-liste li { margin-bottom: 1.5em; }
.kontakt-liste li:last-child { margin-bottom: 0; }
/* Icon gross ueber der zugehoerigen Zeile */
.kontakt-liste .icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: .35em;
  background-color: var(--gruen);
}
.kontakt-liste a { color: var(--text); word-break: break-word; }
.kontakt-liste a:hover, .kontakt-liste a:focus-visible { color: var(--gruen); }
.kontakt-intro h3 { color: var(--blau); }
.kontakt-intro h3 + p { margin-top: -.3em; }

/* Im Fussbereich bleiben die Icons klein und stehen neben dem Text */
.kontakt-liste--footer li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: .7em;
}
.kontakt-liste--footer .icon {
  display: inline-block;
  width: 22px; height: 22px;
  margin-bottom: 0;
  background-color: #fff;
}
.site-footer .kontakt-liste a { color: #fff; }
.site-footer .kontakt-liste a:hover, .site-footer .kontakt-liste a:focus-visible { color: var(--gruen); }

/* ==========================================================================
   Fußbereich
   ========================================================================== */
.site-footer { background: var(--blau); color: #fff; padding: 64px 0 52px; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 46px; }
.footer-logo img { width: 250px; }
.site-footer h2 {
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.1em;
}
.site-footer a { color: #fff; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--gruen); }
.footer-kontakt p { margin-bottom: .8em; }
.footer-social { margin-top: 26px; }
.footer-social p { margin-bottom: .6em; }
.social-liste { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.social-liste a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  transition: background .2s ease, border-color .2s ease;
}
.social-liste a:hover, .social-liste a:focus-visible { background: var(--gruen); border-color: var(--gruen); }
.social-liste .icon { width: 20px; height: 20px; background-color: #fff; }
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: .5em; }

.footer-bottom { background: var(--gruen); color: #fff; padding: 18px 0; font-size: .9rem; }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.footer-bottom a { color: #fff; }

/* ==========================================================================
   Rechtstexte
   ========================================================================== */
.rechtstext { max-width: 820px; }
.rechtstext--mitte { margin-inline: auto; }
.rechtstext blockquote {
  position: relative;
  margin: 1.6em 0;
  padding: 0 0 0 52px;
  color: var(--text);
}
.rechtstext blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 34px;
  height: 34px;
  background-color: var(--gruen);
  opacity: .38;
  -webkit-mask: var(--i-zitat) no-repeat center / contain;
          mask: var(--i-zitat) no-repeat center / contain;
}
.rechtstext blockquote p {
  font-style: italic;
  font-size: 1.06rem;
  margin-bottom: .6em;
}
.rechtstext blockquote p:first-of-type::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 9px;
  vertical-align: -3px;
  background-color: var(--gruen);
  opacity: .38;
  transform: rotate(180deg);
  -webkit-mask: var(--i-zitat) no-repeat center / contain;
          mask: var(--i-zitat) no-repeat center / contain;
}
.rechtstext blockquote p:last-child {
  font-style: normal;
  font-size: .92rem;
  color: var(--text-leise);
  margin-bottom: 0;
}
.rechtstext h2 { color: var(--blau); margin-top: 1.9em; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: 1.6em; margin-bottom: .5em; }
.rechtstext h4 {
  margin-top: 1.4em;
  margin-bottom: .4em;
  color: var(--text);
  font-size: 1rem;
}
.rechtstext > *:first-child { margin-top: 0; }
.rechtstext ul { margin-bottom: 1.3em; }

/* Zurueckhaltende Nebenangabe, z. B. "Umsetzung Internetauftritt" */
.rechtstext .rechtstext-dezent {
  margin-top: 2.8em;
  margin-bottom: .5em;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--text-leise);
}
.rechtstext .rechtstext-dezent + p {
  font-size: .92rem;
  color: var(--text-leise);
}
.rechtstext a { word-break: break-word; }
.platzhalter {
  background: #fff8e1;
  border: 1px solid #f0d98a;
  border-left: 6px solid #e2b93b;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 34px;
}
.platzhalter p { margin-bottom: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .logo img { width: 216px; }
  .hauptnav ul { gap: 16px; }
  .hauptnav a { font-size: .75rem; letter-spacing: .06em; }
}

/* Tablet hochkant: Übersicht zweispaltig */
@media (max-width: 950px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3--kontakt { grid-template-columns: repeat(2, 1fr); }
  .kontakt-intro { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --header-h: 88px; --header-h-klein: 72px; }

  .nav-toggle { display: block; }

  .logo { align-self: flex-start; margin-bottom: 0; padding: 6px 14px 12px;
          border-radius: 0 0 12px 12px; }
  .logo img { width: 138px; }
  .site-header.is-sticky .logo { align-self: flex-start; padding: 6px 14px 12px; }
  .site-header.is-sticky .logo img { width: 120px; }

  .hauptnav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--gruen-blass);
    box-shadow: 0 12px 20px rgba(0, 0, 0, .12);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    display: none;
  }
  .hauptnav.is-offen { display: block; }
  .hauptnav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .hauptnav li { border-bottom: 1px solid rgba(0, 0, 0, .07); }
  .hauptnav li:last-child { border-bottom: 0; }
  .hauptnav a { padding: 15px 0 15px 34px; font-size: .875rem; }
  .hauptnav a::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%) scale(.7);
    width: 24px; height: 20px;
  }
  .hauptnav a:hover::before,
  .hauptnav a:focus-visible::before,
  .hauptnav a[aria-current="page"]::before { transform: translateY(-50%) scale(1); }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-text { align-items: flex-start; text-align: left; padding: 30px 26px; min-height: 200px; }
  .hero-text .hero-icon { margin-bottom: 20px; }
  .hero-bild img { height: 260px; }

  .section { padding: 48px 0; }
  .grid-2 { grid-template-columns: 1fr; gap: 34px; }
  .person-grid { grid-template-columns: 1fr; gap: 22px; }
  .person-bild { max-width: 260px; }
  .footer-grid { grid-template-columns: 1fr; gap: 38px; }
  .cta { padding: 30px 26px; }
  .inhalt::before { width: 82vw; opacity: .08; }
}

@media (max-width: 620px) {
  .grid-3, .grid-3--kontakt { grid-template-columns: 1fr; }

  /* Smartphone hochkant: Ueberschriften und Einleitungstexte linksbuendig */
  .start-claim,
  .section-kopf {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  /* Ausnahme: kurze Ueberschriften ueber mittig stehenden Inhalten */
  .section-kopf--mitte { text-align: center; }

  .termin-leer { text-align: left; }
  .termin-liste { grid-template-columns: 1fr; }
  .btn { padding: 14px 22px; font-size: .88rem; }
  .btn--gross { padding: 15px 24px; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Druck ---------- */
@media print {
  .site-header, .nav-toggle, .footer-bottom, .cta, .btn { display: none !important; }
  body { background: #fff; }
  .hero, .hero-start { margin-top: 0; }
}