/* PowerWirkstatt – Kirby-Nachbau der Startseite (Layout der heutigen WordPress-Seite)
   Farben: Hintergrund #BDE1E5, Text #163F46, Akzent #65B2BF, Karten #49A2B2, Fuss #2C6F7A */

:root {
  --hintergrund: #bde1e5;
  --text: #163f46;
  --akzent: #65b2bf;
  --karte: #49a2b2;
  --petrol: #2c6f7a;
  --dunkel: #0f172a;
  --linie: #04535d;
}

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

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

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: 'Viaoda Libre', display, serif;
  font-size: 21px;
  line-height: 1.65;
  overflow-x: clip; /* clip statt hidden: hidden wuerde den klebenden Kopf (sticky) verhindern */
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: 'DM Serif Display', serif;
  font-weight: 600;
  color: var(--dunkel);
  margin: 0;
}
h2 { font-size: 38px; line-height: 1.3; }
h3 { font-size: 30px; line-height: 1.3; }

p { margin: 0 0 1.5em; }

/* ---------- Kopf ---------- */
/* Kopf klebt oben (Christof, 05.10.2026: "menu oben klebt, also immer sichtbar").
   Startseite: liegt zuerst durchsichtig ueber dem Kopfbild (fixed), bekommt beim Scrollen Petrol.
   Unterseiten: sticky mit Petrol. Die Klasse .gescrollt setzt ein kleines Skript in kopf.php. */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color .25s ease, box-shadow .25s ease; }
.unterseite .kopf { position: sticky; background: var(--petrol); }
.kopf.gescrollt { background: rgba(44, 111, 122, 0.96); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.logo img { transition: width .25s ease; }
/* Im Petrol-Balken (Unterseiten immer, Startseite nach dem Scrollen): Logo klein und in der Hoehe mittig.
   Nur ab 922 px — darunter sitzt das Logo ohnehin per Flexbox mittig (siehe @media max-width 921px). */
@media (min-width: 922px) {
  .unterseite .logo, .kopf.gescrollt .logo { top: 50%; transform: translateY(-50%); }
  .unterseite .logo img, .kopf.gescrollt .logo img { width: 66px; }
}
.kopf-innen {
  position: relative;
  min-height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 35px;
}
.logo { position: absolute; left: 35px; top: 18px; display: block; line-height: 0; }
.logo img { width: 150px; height: auto; display: block; }

.menue ul { list-style: none; margin: 0; padding: 0; display: flex; }
.menue li { padding: 0; }
.menue a {
  display: block;
  padding: 8px 1em 0;
  line-height: 70px;
  color: #fff;
  text-decoration: none;
  font-size: 21px;
  position: relative;
}
.menue a:hover, .menue li.aktiv a { color: var(--akzent); }
.menueschalter, .menueknopf { display: none; }

/* ---------- Startseite: Kopfbild ---------- */
.held {
  background-color: #163339;
  background-image: linear-gradient(rgba(0,0,0,.355), rgba(0,0,0,.355)), var(--kopf-gross);
  background-repeat: no-repeat;
  background-position: var(--bild-pos, top center); /* Fokus der Bilddatei (Panel), sonst wie bisher oben Mitte */
  background-size: auto;
  min-height: 813px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.held-text {
  margin-top: 500px;
  width: 100%;
  min-height: 261px;
  padding: 0 0 3px;
  background: rgba(188, 194, 190, .31);
  color: #fff;
  font-family: 'Aboreto', sans-serif;
  text-align: center;
  text-transform: none;
}
.held-titel { font-size: 33px; padding-top: 5px; }
.held-titel p { margin: 0 0 .8em; }
.held-fliess { font-size: 21px; padding: 0 5px; }
.held-fliess p { margin: 0 0 1.5em; }
.held-fliess p:last-child { margin-bottom: 0; }
.held-fliess strong, .held-titel strong { font-weight: 700; }

/* ---------- WIRK-Kasten ---------- */
.kasten-kopf { text-align: center; padding: 25px 10px 0; max-width: 1160px; margin: 0 auto; }
.kasten-kopf h3 { margin: 0; }
.kasten-untertitel { font-size: 25px; margin-top: 13px; }
.kasten-untertitel p { margin: 0; }
.kasten-kopf hr {
  width: 14%;
  border: 0;
  border-top: 2px solid var(--linie);
  margin: 28px auto 0;
}

.kasten {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 10px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr; /* alle Kaesten gleich hoch → Knoepfe auf gleicher Hoehe */
  gap: 20px;
}
.karte {
  background: var(--karte);
  border-radius: 15px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.karte h2 { text-align: center; }
/* Auftrag 2 (06.10.2026): Titel · Untertitel (eigene Zeile, fett) · Absatz · Schlusssatz (eigene Zeile) */
.karte-untertitel { margin: 8px 0 0; font-size: 1.05em; line-height: 1.4; color: #0b252a; }
.karte-untertitel strong { font-weight: 700; }
.karte-abschluss { margin: 1.2em 0 0; color: #0b252a; }
.karte-bild { display: block; margin: 10px auto; border-radius: 10px; }
/* Kartentext etwas dunkler als im WP-Original (#163f46 → Kontrast 3,9 auf --karte);
   #0b252a ergibt 5,4 und ist damit gut lesbar, auch auf dem Handy */
.karte-text { margin-top: 20px; color: #0b252a; }
.karte-text p { margin: 0 0 1.5em; }
.karte-text strong { font-weight: 700; }
/* Knopf immer am unteren Kartenrand: in allen 4 Kaesten gleich ausgerichtet (Christof, 05.10.2026) */
.knopf-zeile { margin: auto 0 0; padding-top: 20px; text-align: center; }
.knopf {
  display: inline-block;
  background: var(--petrol); /* WP-Original #62b0bd: weiss darauf nur Kontrast 2,5; Petrol 5,7 */
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 30px;
  border-radius: 3px;
}
.knopf:hover { background: var(--linie); }

/* ---------- Zitatband ---------- */
.zitatband {
  position: relative;
  min-height: clamp(480px, 60vh, 640px);
  padding: 100px 20px;
  background: #032c30 var(--zitat-bild) var(--bild-pos, center) / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.zitatband::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #032c30;
  opacity: .67;
  z-index: -1;
}
.zitat { width: 100%; max-width: 1350px; position: relative; padding: 110px 0; text-align: center; }
.zitat-text {
  font-family: 'Fleur De Leah', cursive;
  font-size: 53px;
  line-height: 49px;
  letter-spacing: 2.8px;
  color: #fff;
}
.zitat-text p { margin: 0; }
.zitat-zeichen {
  position: absolute;
  font-family: 'DM Serif Display', serif;
  font-size: 160px;
  line-height: 1;
  color: #fff;
}
.zitat-auf { left: 20%; top: 0; }
.zitat-zu { right: 20%; bottom: 0; }

/* ---------- Unterseiten (vorerst leer) ---------- */
.leerseite { max-width: 1140px; margin: 0 auto; padding: 60px 20px; min-height: 40vh; }

/* ---------- Unterseiten: Titelband ---------- */
.titelband {
  position: relative;
  isolation: isolate;
  min-height: 245px;
  padding: 10px;
  text-align: center;
  background: #242424 var(--band-bild) var(--bild-pos, center) / cover no-repeat;
}
.titelband::before {
  /* 06.10.2026 (Aenderungsauftrag 7/8/10/53): Bild deutlich heller (vorher: ueberall 50 % Dunkelgrau).
     Jetzt nur 15 % Grundabdunkelung; hinter dem Titel ein weicher, dunkler Schein, damit der weisse Titel lesbar bleibt. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 70% at 50% 55%, rgba(10, 34, 40, .7) 0, rgba(10, 34, 40, .7) 40%, rgba(10, 34, 40, 0) 100%),
    rgba(36, 36, 36, .15);
  z-index: -1;
}
.titelband h1 {
  font-size: 60px;
  line-height: 1.2;
  margin: 70px auto 0;
  color: #fff;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 14px rgba(0, 0, 0, .5);
}
.titelband-linie { display: block; width: 9%; height: 2px; background: #fff; opacity: .8; margin: 14px auto 0; }

/* ---------- Aufklappbarer Text (<details>, ohne JavaScript) ---------- */
.aufklappen { width: 100%; }
.aufklappen summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #d5d8dc;
  color: #1f2124;
  text-align: center;
}
.aufklappen summary::-webkit-details-marker { display: none; }
.aufklappen summary:hover, .aufklappen[open] summary { background: rgba(255, 255, 255, .3); }
.aufklappen summary:focus-visible { outline: 2px solid var(--linie); outline-offset: 2px; }
.aufklappen-text { padding-top: 20px; text-align: center; }
.aufklappen-text p { margin: 0 0 1.6em; }
.aufklappen-text p:last-child { margin-bottom: 0; }

/* ---------- Ueber Uns ---------- */
.about-intro { max-width: 1140px; margin: 0 auto; padding: 100px 10px 0; text-align: center; }
.about-intro-titel { font-size: 24px; line-height: 1.2; color: #000; margin: 0 0 20px; }
.about-intro-untertitel { margin: 0 0 1.6em; }
.about-intro-text p { margin: 0 0 1.6em; }
/* Auftrag 12 (06.10.2026): Team-Text etwas fetter (die Schrift hat nur ein Gewicht, daher feine Kontur statt Faux-Bold),
   letzter Absatz groesser und fett */
.about-intro-text { -webkit-text-stroke: .35px currentColor; }
/* seit 07.10.2026: nicht mehr "letzter Absatz", sondern jeder GANZ fett gesetzte Absatz (im Panel mit B markiert, sichtbar und speicherfest) */
.about-intro-text p.absatz-betont { font-size: 1.3em; font-weight: 700; line-height: 1.5; -webkit-text-stroke: 0; }
.about-intro-text p:last-child { margin-bottom: 0; }

.about-paar {
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.paar-seite h2 { font-size: 24px; line-height: 1.2; color: #000; text-align: center; margin: 0 0 20px; }
.paar-linie { display: block; width: 50%; height: 2px; background: #074651; margin: 0 0 20px; }
.paar-rechts .paar-linie { margin-left: auto; }
.paar-links .paar-text, .paar-links .aufklappen-text { text-align: left; }
.paar-rechts .paar-text, .paar-rechts .aufklappen-text { text-align: right; }
.paar-text p { margin: 0 0 1.6em; }
.paar-bild img { display: block; width: 100%; height: auto; }

.about-team {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 100px 20px;
  background: var(--hintergrund) var(--welle) var(--welle-pos, left top) / var(--welle-groesse, auto) no-repeat;
}
.about-team h3 { text-align: center; }
.team-karten {
  padding-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
}
.team-karte {
  margin: 50px 0;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 45px rgba(0, 0, 0, .07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.team-zeichen { font-family: 'DM Serif Display', serif; font-size: 56px; line-height: 1; height: 26px; color: var(--akzent); }
/* Rahmen fuer alle Team-Fotos gleich gross (Auftrag 14); Vergroesserung/Ausschnitt je Person per --zoom/--fokus aus dem Panel */
.team-foto-rahmen { display: block; width: 176px; max-width: 100%; height: 258px; overflow: hidden; border-radius: 100px; border: 1px solid var(--text); flex: none; }
.team-foto { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: 50% var(--fokus, 20%); }
.team-linie { display: block; width: 25px; height: 2px; background: var(--akzent); }
.team-name { line-height: 1; }
.team-text { text-align: center; padding: 0 10px; }
.team-text p { margin: 0; }
.team-karte .aufklappen { margin-top: auto; }

/* ---------- Angebot ---------- */
.angebot-einleitung {
  max-width: 1140px;
  margin: 0 auto;
  padding: 70px 10px 40px;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 61px;
  line-height: 1.2;
}
.angebot-einleitung p { margin: 0; }
.angebot-einleitung em { color: #008080; }

.angebot-spalten {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.angebot-spalte { padding: 10px; display: flex; flex-direction: column; gap: 20px; }
.angebot-spalte h2 { text-align: center; }
.spalte-links { background: #97c8d0; }
.spalte-rechts { background: #70b8c4; }
.angebot-karte {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.spalte-links .angebot-karte { background: #70b8c4; }
.spalte-rechts .angebot-karte { background: #97c8d0; }
.angebot-karte h3 { font-size: 21px; line-height: 1.2; text-align: center; margin: 0; }
.angebot-text { text-align: center; overflow-wrap: anywhere; }
.angebot-text p { margin: 0 0 1.6em; }
.angebot-text p:last-child { margin-bottom: 0; }
.angebot-karte .aufklappen { margin-top: auto; }
/* Auftrag 5/51/52: kurze Karte = nur Titel + Link; der Knopf sitzt unten und fuehrt direkt zum Angebot */
.angebot-karte .knopf-zeile { padding-top: 0; }
.angebot-karte-kurz { text-align: center; }
.angebot-karte-kurz h3 { font-size: 24px; }
/* Auftrag 6: Kasten unten mittig unter beiden Spalten; Zwischentitel (Absatz nur aus Fett) gut lesbar */
.angebot-unten { max-width: 1140px; margin: 0 auto; padding: 20px 10px 70px; }
.angebot-karte-unten { max-width: 820px; margin: 0 auto; padding: 22px 26px; background: #97c8d0; }
.angebot-karte-unten h3 { font-size: 28px; }
.angebot-karte-unten .angebot-text p:has(> strong:only-child) {
  margin: 1.4em 0 .4em;
  font-size: 1.15em;
  line-height: 1.3;
  color: var(--dunkel);
}
.angebot-karte-unten .angebot-text p:has(> strong:only-child):first-child { margin-top: 0; }
.angebot-karte-unten .angebot-text strong { font-weight: 700; }

/* ---------- Kontakt ---------- */
.kontakt-flaeche { background: #fff var(--welle) var(--welle-pos, right top) / var(--welle-groesse, auto) no-repeat; padding: 100px 10px 100px; }
.kontakt-innen { max-width: 1140px; margin: 0 auto; }
.kontakt-logo { display: block; width: 300px; height: auto; margin: 0 auto -10px; }
.info-karten { padding: 25px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 50px; row-gap: 25px; }
.info-karte {
  min-height: 215px;
  padding: 20px 15px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 0 45px #f0ebeb;
  text-align: center;
  overflow-wrap: anywhere;
}
.info-symbol { display: flex; justify-content: center; align-items: center; height: 40px; fill: #65b2bf; color: #65b2bf; }
.info-karte h3 { font-size: 20px; line-height: 1.3; margin: 12px 0 20px; }
.info-karte p { margin: 0; }

.wirkpost {
  margin: 21px 25px 0;
  padding: 20px 75px 40px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 0 45px rgba(213, 191, 191, .5);
  text-align: center;
}
.wirkpost-symbol { display: flex; justify-content: center; color: #000; }
.wirkpost h3 { font-size: 21px; line-height: 1.2; margin: 14px 0 0; }
.wirkpost-linie { display: block; width: 86px; height: 2px; background: #65b2bf; margin: 14px auto 25px; }
.wirkpost-form { text-align: left; }
.feld { margin: 0 0 20px; }
.feld input, .feld textarea {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  color: #0f172a;
  background: rgba(15, 23, 42, .02);
  border: 1px solid rgba(15, 23, 42, .25);
  border-radius: 6px;
}
.feld textarea { min-height: 117px; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: #808285; opacity: 1; }
.feld input:focus, .feld textarea:focus { outline: 2px solid #65b2bf; outline-offset: 0; border-color: #65b2bf; }
.feld input[aria-invalid="true"] { border-color: #b3261e; }
.feld-fehler { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: #b3261e; }
.feld-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-knopf { margin: 0; }
.form-knopf button {
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 14px;
  color: #fff;
  background: #65b2bf;
  border: 1px solid #65b2bf;
  border-radius: 6px;
  cursor: pointer;
}
.form-knopf button:hover { background: #4a97a5; border-color: #4a97a5; }
.form-meldung { margin: 0 0 25px; padding: 12px 16px; border-radius: 6px; text-align: center; font-size: 18px; line-height: 1.5; }
.form-erfolg { background: #e3f3f5; border: 1px solid #65b2bf; color: var(--text); }
.form-fehler { background: #fdecea; border: 1px solid #b3261e; color: #7a1f1a; }
.form-fehler a { text-decoration: underline; }

/* ---------- Fuss ---------- */
.fuss { background: var(--petrol); color: #fefafa; }
.fuss-oben { height: 40px; }
.fuss-unten {
  border-top: 1px solid rgba(242, 245, 247, .3);
  min-height: 80px;
  padding: 20px;
  display: flex;
  align-items: center;
}
.fuss-unten p {
  margin: 0 auto 0 0;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  font-size: 15px;
  text-align: center; /* Fussnote zentriert (Christof, 05.10.2026) */
}

/* ---------- Bild vergroessern (Panel: "Vergroesserung in %"), 07.10.2026 ----------
   Die Klasse .bild-zoom setzt die Vorlage nur, wenn im Panel mehr als 100 % eingetragen sind. Das Bild liegt dann auf einer
   eigenen Schicht (::before bzw. ::after, hinter Abdunklung und Text), die um den Fokuspunkt vergroessert wird; overflow:hidden
   schneidet ab, der Bereich wird nicht groesser und nichts laeuft seitlich ueber. */
.held.bild-zoom { position: relative; isolation: isolate; overflow: hidden; background-image: none; }
.held.bild-zoom::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(0,0,0,.355), rgba(0,0,0,.355)), var(--kopf-gross);
  background-repeat: no-repeat;
  background-position: var(--bild-pos, top center);
  background-size: auto;
  transform: scale(var(--bild-zoom, 1));
  transform-origin: var(--bild-ursprung, top center);
}
.titelband.bild-zoom, .zitatband.bild-zoom { overflow: hidden; }
.titelband.bild-zoom::after, .zitatband.bild-zoom::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--bild-pos, center);
  transform: scale(var(--bild-zoom, 1));
  transform-origin: var(--bild-ursprung, center);
}
.titelband.bild-zoom::after { background-image: var(--band-bild); }
.zitatband.bild-zoom::after { background-image: var(--zitat-bild); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .held {
    background-image: linear-gradient(rgba(0,0,0,.355), rgba(0,0,0,.355)), var(--kopf-klein);
    background-size: 100% auto, contain;
    min-height: 500px;
  }
  .held.bild-zoom::before {
    background-image: linear-gradient(rgba(0,0,0,.355), rgba(0,0,0,.355)), var(--kopf-klein);
    background-size: 100% auto, contain;
  }
  .held-text { margin-top: 330px; }
  .zitatband { min-height: min(49vh, 520px); padding: 40px 20px; }
  .zitat { padding: 0; }
  .zitat-zeichen { position: static; display: block; font-size: 100px; height: 70px; }
  .zitat-auf, .zitat-zu { margin: 0 auto; }
  .logo img { width: 70px; }
  .about-paar { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .paar-bild { order: 0; max-width: 472px; margin: 0 auto; }
  .paar-links { order: -1; }
  .paar-linie { width: 40%; }
  .team-karten { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
  .angebot-spalten { grid-template-columns: minmax(0, 1fr); }
  .info-karten { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
}

@media (max-width: 921px) {
  .kopf-innen { justify-content: space-between; padding: 0 20px; min-height: 70px; align-items: center; }
  .logo { position: static; }
  .menueknopf {
    display: block;
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: relative;
  }
  .menueknopf span, .menueknopf span::before, .menueknopf span::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #fff;
  }
  .menueknopf span { top: 21px; }
  .menueknopf span::before { left: 0; right: 0; top: -8px; }
  .menueknopf span::after { left: 0; right: 0; top: 8px; }
  .menue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
  }
  .menueschalter:checked ~ .menue { display: block; }
  .menue ul { flex-direction: column; }
  .menue a { color: var(--dunkel); padding: 0 20px; line-height: 50px; }
  .menue a:hover, .menue li.aktiv a { color: var(--akzent); }
}

/* ---------- Handy ---------- */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .logo img { width: 60px; }
  .held { min-height: 400px; }
  .held-text { margin-top: 82px; min-height: 0; padding: 4px 0 20px; }
  .held-titel { font-size: 20px; line-height: 1.25; padding-top: 15px; margin-bottom: 0; }
  .held-fliess { font-size: 14px; }
  h2 { font-size: 30px; }
  h3 { font-size: 26px; }
  .kasten-untertitel { font-size: 20px; }
  .kasten { grid-template-columns: 1fr; grid-auto-rows: auto; padding-left: 10px; padding-right: 10px; }
  .zitat-text { font-size: 38px; line-height: 38px; letter-spacing: 1.5px; }
  .zitatband { padding: 40px 15px; }
  .titelband { min-height: 160px; }
  .titelband::before { background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(10, 34, 40, .75) 0, rgba(10, 34, 40, .75) 40%, rgba(10, 34, 40, 0) 100%), rgba(36, 36, 36, .12); }
  .titelband h1 { font-size: 38px; margin-top: 36px; }
  .about-intro { padding-top: 60px; }
  .about-intro-titel { font-size: 18px; }
  .paar-seite h2 { font-size: 18px; }
  .about-team { width: 100%; padding: 70px 20px; }
  .team-karten { padding-top: 20px; }
  .team-karte { margin: 10px 0; }
  .angebot-einleitung { font-size: 36px; padding-top: 50px; }
  .angebot-karte h3 { font-size: 15px; }
  .angebot-karte-kurz h3 { font-size: 20px; }
  .angebot-karte-unten h3 { font-size: 22px; }
  .angebot-karte-unten { padding: 16px 14px; }
  .angebot-spalte h2 { font-size: 28px; }
  .kontakt-flaeche { padding: 60px 10px; }
  .kontakt-logo { width: 220px; }
  .info-karten { padding: 20px 0; }
  .info-karte { min-height: 0; }
  .info-karte h3 { font-size: 18px; }
  .wirkpost { margin: 20px 0 0; padding: 20px 15px 30px; }
}

/* ---------- Schwebende Knoepfe: Modul schwebeknoepfe (seit 06.10.2026), Farben der PowerWirkstatt ---------- */
:root { --sk-knopf: #3b5fe0; --sk-pfeil: #163339; }
/* Das Design der PowerWirkstatt bleibt auch im Dunkelmodus des Besuchers hell: die Knoepfe sehen dann aus wie im hellen Modus */
:root { --sk-pfeil-dunkel: #163339; --sk-pfeil-text-dunkel: #fff; }
@media (prefers-color-scheme: dark) {
  .sk-kontakt summary, .sk-kanal { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
  .sk-kontakt summary:focus-visible, .sk-kanal:focus-visible, .sk-oben:focus-visible { box-shadow: 0 0 0 6px #163339; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Startseite: die sichtbare Hauptzeile des Kopfbilds ist die <h1>; Aussehen wie vorher als Textzeile */
h1.held-titel { font-family: inherit; font-weight: inherit; color: inherit; line-height: inherit; margin: 0 0 .8em; }

/* Fehlerseite (404) */
.fehlerseite { max-width: 760px; margin: 0 auto; padding: 50px 20px 80px; text-align: center; font-size: 20px; }
.fehlerseite p { margin: 0 0 1.5em; }

/* ---------- Impressum und Datenschutz (Modul rechtliches; Klassen des Moduls, Aussehen wie bisher) ---------- */
.rechtliches-seite .rechtliches { max-width: 820px; margin: 0 auto; padding: 50px 20px 70px; font-size: 18px; line-height: 1.7; }
.rechtliches-seite .rechtliches h2 { font-size: 28px; margin: 1.6em 0 .4em; }
.rechtliches-seite .rechtliches-text > h2:first-child { margin-top: 0; }
.rechtliches-seite .rechtliches a { color: var(--petrol); }
.rechtliches-seite .rechtliches-stand { margin-top: 2em; font-size: 15px; opacity: .8; }
.fuss-unten a { color: #fefafa; }
.form-hinweis { font-size: 14px; margin: 0 0 12px; }
.form-hinweis a { color: var(--petrol); }
@media (max-width: 767px) { .rechtliches-seite .rechtliches { font-size: 16px; padding-top: 30px; } .rechtliches-seite .rechtliches h2 { font-size: 23px; } }

/* ---------- Baukastenweb (seit 06.10.2026) ---------- */
/* Datenschutz-Abschnitte der Module (kern_zusatz): Abstand wie die uebrigen Ueberschriften */
/* (die Abschnitte der Module liegen in .rechtliches-zusatz, ihre erste Ueberschrift behaelt den normalen Abstand: die Regel oben trifft nur direkte Kinder von .rechtliches-text) */

/* ---------- Auftrag 17 (06.10.2026): "Neudenkerei.ch" groesser und fett ---------- */
/* Gilt fuer jeden Link auf neudenkerei.ch (im Panel als Link im Text setzen) und fuer ein Wort mit der Klasse .neudenkerei */
a[href*="neudenkerei"], .neudenkerei { font-size: 1.25em; font-weight: 700; }

/* Newsletter-Anmeldung auf der Kontaktseite (09.10.2026): eingebetteter Rahmen von news.powerwirkstatt.ch */
.newsletter-kasten { margin-top: 40px; }
.newsletter-text { margin: 0 0 12px; }
.newsletter-rahmen { display: block; width: 100%; max-width: 100%; border: 0; min-height: 200px; background: transparent; }
.newsletter-knopf .knopf-link { display: inline-block; font-size: 16px; line-height: 1.5; padding: 10px 14px; min-height: 44px; box-sizing: border-box; color: #fff; background: #65b2bf; border: 1px solid #65b2bf; border-radius: 6px; text-decoration: none; }
.newsletter-knopf .knopf-link:hover, .newsletter-knopf .knopf-link:focus-visible { background: #4a97a5; border-color: #4a97a5; }

/* WIRK-Post-Anmeldung (Vorlage des Moduls newsletter, 09.10.2026): Seitenrand wie die anderen Seiten (ohne ihn klebte
   der Text auf dem Handy am Rand), Tippflaechen mind. 44 px, Knopf mit genug Kontrast (Weiss auf Akzent war zu hell). */
.inhalt.newsletter-seite { max-width: 46rem; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.newsletter-seite .newsletter-wahl { margin: 0; padding: .45rem 0; }
.newsletter-seite .newsletter-formular button { background: var(--petrol); color: #fff; }