/* ============================================================
   Pontico – WordPress-Ergänzungen zu pontico.css
   pontico.css bleibt unverändert; Anpassungen an Breakdance stehen hier.
   Wird nach pontico.css ausgegeben.
   ============================================================ */

/* Breakdance setzt auf jeden Code-Block
     .bde-code-block { display:flex; flex-direction:column; align-items:flex-start }
   Die Abschnitte der Vorlage (section, footer …) haben keine eigene Breite und
   schrumpften dadurch auf Inhaltsbreite: Hintergründe nicht mehr vollbreit, und
   .container (width: min(996px, 100% - 64px)) rechnet gegen die falsche Bezugsbreite.
   Die Vorlage erwartet normalen Blockfluss. Zwei Klassen, damit die Regel sicher
   vor Breakdances Einzelklasse greift. */
.breakdance .bde-code-block {
  display: block;
}

/* ============================================================
   Terminbuchung (Microsoft Bookings) – Overlay
   Getesteter Code aus CLAUDE.md, Abschnitt 9. Bewusst hier und nicht im
   Code-Block: CSS und JS kommen global, nie pro Block.
   Der Button selbst trägt die Klassen der Vorlage (btn btn--outline-deep),
   deshalb fehlt der dort beschriebene .pt-book-trigger.
   Die Höhe steht in dvh mit Safe-Area-Abstand: mit vh verschwand der obere
   Rand samt Schließen-Knopf hinter der Adressleiste mobiler Browser.
   ============================================================ */
.pt-book {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--track);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.pt-book__text { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--grey-text); }

.pt-book-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(8, 27, 21, .66);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top, 0px) + 24px);
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 24px);
}
.pt-book-overlay.is-open { display: flex; }
.pt-book-modal {
  position: relative;
  width: 100%; max-width: 560px;
  height: 85dvh; max-height: 850px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(8, 27, 21, .32);
  display: flex; flex-direction: column;
}
.pt-book-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 38px; height: 38px;
  border-radius: 999px; border: none;
  background: rgba(8, 27, 21, .06); color: #081B15;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pt-book-modal__close:hover { background: rgba(8, 27, 21, .12); }
.pt-book-modal iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 640px) {
  .pt-book-modal { max-width: 100%; height: 88dvh; border-radius: 16px; }
}

/* ============================================================
   Blog und Beitragsvorlagen – Kompatibilität für Ladebereich Stufe 3
   ============================================================
   Ab Stufe 3 lädt pontico.css global, weil Kopf- und Fußzeile der Vorlage auf
   jeder Seite stehen – also auch auf dem Blog. pontico.css setzt dabei Regeln
   auf nackte Elemente (body, h1–h4, p, ul, a, img), die den Beitragsinhalt
   verändern würden. Dieser Block nimmt genau diese Regeln innerhalb der
   Breakdance-Elemente zurück, damit der Blog aussieht wie bisher.

   Geltungsbereich sind die WordPress-Body-Klassen der Blog-, Archiv-, Such-
   und 404-Seiten. Die neuen Seiten der Vorlage tragen .page und bleiben
   unberührt; Kopf- und Fußzeile sind Code-Blöcke ohne bde-Klassen und werden
   von keiner Regel hier getroffen.

   Zur Spezifität, weil sie hier Absicht ist: Regeln, die nur einen geerbten
   Wert zurückholen, stehen in :where() und wiegen damit nichts – eine im
   Builder gesetzte Schriftgröße gewinnt weiter. Regeln, die eine
   Element-Regel aus pontico.css überstimmen müssen, brauchen mindestens eine
   Klasse; weil diese Datei nach allen Breakdance-Stylesheets ausgegeben wird,
   gewinnen sie bei Gleichstand auch gegen im Builder gesetzte Werte. Wenn auf
   einer Blogseite eine Einstellung aus dem Builder nicht greift, ist dieser
   Block die erste Stelle zum Nachsehen.

   Die Werte stammen nicht aus dem Design der Vorlage, sondern aus dem, was
   auf dem Blog heute gilt: --bde-*-Variablen aus global-settings.css,
   line-height 1.4 aus normalize.min.css, alles Übrige aus den Vorgaben des
   Browsers (deshalb `revert`).
   ============================================================ */

/* 1 – Fließtext. Ohne diese Regel erbt der Beitragstext 15px/600/22px aus der
   body-Regel von pontico.css statt der 20px der Breakdance-Einstellungen. */
:where(.single, .blog, .archive, .search, .error404)
:where(.bde-text, .bde-rich-text, .breakdance-rich-text-styles) {
  font-family: var(--bde-body-font-family);
  font-size: var(--bde-body-font-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--bde-body-text-color);
}

/* 2 – Abstände im Beitragstext. pontico.css: h1, h2, h3, h4, p { margin: 0 }.
   Im Beitrag kommen diese Abstände aus dem Browser – die Absätze klebten
   sonst aneinander. Betrifft nur den Inhalt der Textelemente: die
   Breakdance-Elemente selbst stehen ohnehin auf margin: 0 (.bde-text,
   .bde-heading in den Element-Vorgaben), dort ändert pontico.css nichts. */
:is(.single, .blog, .archive, .search, .error404)
:is(.bde-text, .bde-rich-text, .breakdance-rich-text-styles)
:is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, pre, table) {
  margin: revert;
}

/* 3 – Listen. pontico.css: ul { margin: 0; padding: 0; list-style: none } –
   die Aufzählungen im Beitrag verlören Punkte und Einzug. Menüs, Inhalts-
   verzeichnis und Icon-Listen bringen ihre eigene Regel mit und sind hier
   nicht betroffen. */
:is(.single, .blog, .archive, .search, .error404)
:is(.bde-text, .bde-rich-text, .breakdance-rich-text-styles)
:is(ul, ol) {
  padding: revert;
  list-style: revert;
}

/* 4 – Überschriftenschnitt. pontico.css stellt h1/h2 auf 800 und h3/h4 auf
   700; auf dem Blog gilt der Schnitt des Browsers (fett) bzw. 700 aus den
   Breakdance-Einstellungen. Gilt für Überschriften im Beitragstext und für
   Überschriften-Elemente der Vorlagen. */
:is(.single, .blog, .archive, .search, .error404)
:is(.bde-text, .bde-rich-text, .breakdance-rich-text-styles)
:is(h1, h2, h3, h4, h5, h6),
:is(.single, .blog, .archive, .search, .error404)
:is(h1, h2, h3, h4, h5, h6).bde-heading {
  font-weight: revert;
}

/* 5 – Links im Beitragstext. pontico.css: a { color: inherit }. Heute sind
   Textlinks in der Farbe aus den Breakdance-Einstellungen gesetzt. */
:is(.single, .blog, .archive, .search, .error404)
:is(.bde-text, .bde-rich-text, .breakdance-rich-text-styles) a {
  color: var(--bde-links-color);
}
:is(.single, .blog, .archive, .search, .error404)
:is(.bde-text, .bde-rich-text, .breakdance-rich-text-styles) a:hover {
  color: var(--bde-links-color-hover);
}

/* 6 – Bilder. pontico.css: img, svg { display: block }. Auf dem Blog gilt die
   Vorgabe aus normalize.min.css; mit display:block verschieben sich Bilder um
   die Grundlinie und verlieren eine mittige Ausrichtung über text-align. */
:is(.single, .blog, .archive, .search, .error404)
:is(.bde-text, .bde-rich-text, .breakdance-rich-text-styles) img,
:is(.single, .blog, .archive, .search, .error404) img.bde-image2 {
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================
   Cockpit-Reiter: weiche Füllkante
   ============================================================
   pontico.css füllt den aktiven Reiter über clip-path: Der Verlauf wird in
   4 Sekunden von links nach rechts freigelegt, dahinter steht die dunkle
   Pille (.tabs__indicator, --green-900). Die Freilegungskante ist dabei eine
   harte Senkrechte – und weil der Verlauf hell ausläuft, stößt kurz vor dem
   rechten Ende Mint direkt an Fast-Schwarz. Das liest sich als unsauberer
   Rand, ist aber die laufende Animation.

   Hier läuft dieselbe Bewegung über eine Maske statt über clip-path, mit
   16 px weichem Übergang an der Kante. Die Maskenposition steckt in einer
   registrierten Eigenschaft, weil sich nur so ein Farbverlaufs-Stopp
   animieren lässt.

   Rückfall ohne @property (Safari < 16.4, Firefox < 128): Der deklarierte
   Wert 100% bleibt stehen, der Reiter ist dann sofort vollständig gefüllt.
   Bewusst so herum – lieber ohne Animation als dauerhaft ungefüllt.
   ============================================================ */

@property --pt-tab-fill {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

.tab.is-active.is-running::after {
  /* die harte Kante aus pontico.css abschalten */
  clip-path: none;
  --pt-tab-fill: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 var(--pt-tab-fill), transparent calc(var(--pt-tab-fill) + 16px));
          mask-image: linear-gradient(90deg, #000 var(--pt-tab-fill), transparent calc(var(--pt-tab-fill) + 16px));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: pt-tab-fill 4s linear forwards;
}

/* Start bei -16px, damit die weiche Kante zu Beginn vollständig links außen
   liegt und nicht schon ein Streifen sichtbar ist. */
@keyframes pt-tab-fill {
  from { --pt-tab-fill: -16px; }
  to   { --pt-tab-fill: 100%; }
}

/* Die dunkle Pille 1 px schmaler zeichnen als das Element breit ist.
   Grund: pontico.js setzt ihre Breite aus btn.offsetWidth, und das ist auf
   ganze Pixel gerundet – bei gebrochener Schaltflächenbreite steht sie
   dadurch bis zu einem Pixel über und blitzt am hellen Ende des Verlaufs als
   dunkler Saum durch. Die Elementbreite bleibt unangetastet (das Skript
   rechnet weiter damit), beschnitten wird nur die Zeichnung.

   Bewusst über clip-path und nicht über border-inline mit
   background-clip: padding-box: Ein Rahmen verkleinert nur den waagerechten
   Radius um seine Breite, den senkrechten nicht – aus dem kreisrunden
   Abschluss würde eine um 1 px gestauchte Ellipse, und genau die fiel an der
   Kappe auf. clip-path rechnet den Radius auf dem beschnittenen Rechteck neu
   und hält die Kappe rund. */
.tabs__indicator {
  clip-path: inset(0 1px round 999px);
}

/* ============================================================
   Cockpit-Reiter: Rundung ohne Treppchen
   ============================================================
   .tab bringt aus pontico.css overflow: hidden mit. Ein solcher Beschnitt
   wird an Rundungen in Blink ohne Kantenglättung gezeichnet – die Kurve der
   aktiven Pille franst dadurch sichtbar aus, während die grauen Reiter glatt
   bleiben (dort ist nichts zu beschneiden).

   Der Beschnitt ist hier entbehrlich: .tab::after liegt mit inset: 0 exakt im
   Element, hat über border-radius: inherit denselben Radius und begrenzt sich
   seit dem Umbau auf die Maske ohnehin selbst. Ohne den Beschnitt zeichnet
   der Browser nur noch die Rundung des Pseudo-Elements – und die ist
   kantengeglättet.
   ============================================================ */
.tab { overflow: visible; }

/* ============================================================
   Überschriften: Farbe wieder erben lassen
   ============================================================
   Breakdance setzt in global-settings.css

       h1, h2, h3, h4, h5, h6 { color: var(--bde-headings-color) }   -> #081B15

   als Element-Regel. Die Vorlage färbt Überschriften dagegen nie selbst – sie
   erben die Farbe ihrer Sektion (.bg-dark setzt color: var(--white), helle
   Kästen wie .step-panel setzen color: var(--green-900)).

   Eine Element-Regel trifft das Element direkt und schlägt damit jeden
   geerbten Wert, unabhängig von der Spezifität des Vorfahren. Folge: Auf
   dunklen Sektionen standen alle Überschriften in Fast-Schwarz auf
   Fast-Schwarz und waren unsichtbar – 11 Stück auf vier Seiten, darunter
   "Warum wir zu Ihnen passen!" auf der Startseite.

   color: inherit stellt genau das Verhalten der Vorlage wieder her: Die
   Überschrift nimmt die Farbe ihres Kastens, hell wie dunkel.

   Ausgenommen sind Überschriften, die Breakdance selbst gebaut hat
   (Klasse bde-*) – die tragen ihre Farbe aus dem Builder und sollen sie
   behalten. Deshalb der :not()-Ausschluss und nicht einfach h1–h6.
   ============================================================ */
#main :is(h1, h2, h3, h4, h5, h6):not([class*="bde-"]) {
  color: inherit;
  /* Breakdance setzt zusätzlich font-family auf seine eigene Schriftkopie
     ("Plus Jakarta Sans_local", statische Schnitte aus dem Uploads-Ordner).
     Die Vorlage liefert eine variable Schrift 400–800 aus dem Plugin und
     lässt Überschriften die Schrift des Fließtexts erben. inherit holt das
     zurück – gleiche Datei für alles, und ein Download weniger. */
  font-family: inherit;
}

/* ============================================================
   Links und Buttons: Farbe beim Überfahren behalten
   ============================================================
   Breakdance setzt in global-settings.css

       a:hover, .button-atom--text:hover { color: var(--bde-links-color-hover) }   -> #081B15

   mit Spezifität (0,1,1). Die Farben der Vorlage stehen auf einzelnen Klassen
   und wiegen nur (0,1,0) – beim Überfahren gewinnt deshalb Breakdance.

   Folge: Jeder Button mit weißer Schrift verliert sie beim Hover.
   .btn--dark, .btn--deep und .btn--muted stehen auf dunklem Grund, die
   Beschriftung wurde dort praktisch unsichtbar – auf jeder Seite, im Hero
   ebenso wie im CTA-Band. Dasselbe gilt für einfache Links in der dunklen
   Fußzeile, die ihre Farbe über a { color: inherit } erben.

   Die Vorlage ändert beim Überfahren nie die Schriftfarbe: Sie arbeitet mit
   Schatten, Deckkraft und Hintergrund. Deshalb sind die Farbregeln der
   Vorlage hier eins zu eins auf :hover gespiegelt, statt Einzelfälle zu
   flicken. Die Zuordnung ist maschinell aus pontico.css erzeugt; die
   relativen Spezifitäten bleiben dadurch erhalten, sodass etwa
   .hero--media .btn--dark weiterhin .btn--dark schlägt.

   Ausgenommen sind .btn--outline, .btn--outline-deep und .hero .btn--outline:
   Die kehren sich beim Überfahren bewusst um und bringen dafür eine eigene
   Hover-Regel mit, die Breakdance ohnehin schlägt.
   ============================================================ */

a:hover { color: inherit; }
.btn--dark:hover { color: var(--white); }
.btn--deep:hover { color: var(--white); }
.btn--light:hover { color: var(--green-900); }
.btn--muted:hover { color: var(--white); }
.nav__link:hover { color: var(--green-900); }
.lead-form__back a:hover { color: var(--green-900); }
.btn--ghost:hover { color: var(--green-900); }
.legal__body a:hover { color: var(--green-900); }
.lead-form__alt a:hover { color: var(--green-900); }

@media (max-width: 780px) {
  .hero--media .btn--dark:hover { color: var(--green-900); }
  .hero--media .btn--deep:hover { color: var(--green-900); }
  .hero--media .btn--outline:hover { color: var(--white); }
  .hero--media .btn--outline-deep:hover { color: var(--white); }
}

/* ============================================================
   Cockpit-Pläne (Basis / Plus / Pro)
   Ersetzt den zweispaltigen Abschnitt .plans aus der Vorlage.
   Eigener Namensraum pt-plan*, damit die alten .plan*-Regeln aus
   pontico.css unangetastet bleiben und nicht gegeneinander laufen.
   Alle Werte aus den Tokens der Vorlage; Schaltflächen tragen .btn.
   ============================================================ */

/* Der Umschalter sitzt zwischen Abschnittskopf und Karten. Der Kopf bringt
   aus .section-head schon 70px Abstand mit, hier nur der Rest. */
.pt-cycle-row { display: flex; justify-content: center; margin-bottom: 40px; }

.pt-cycle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--grey-bg);
}
.pt-cycle__btn {
  display: inline-flex;
  align-items: center;
  height: 39px;
  padding-inline: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--green-900);
  font-family: inherit;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.pt-cycle__btn:hover { background: #e8ebe9; }
.pt-cycle__btn:active { transform: scale(0.985); transition-duration: 90ms; }
.pt-cycle__btn:focus-visible { outline: 2px solid var(--green-900); outline-offset: 3px; }
.pt-cycle__btn[aria-pressed="true"] { background: var(--green-900); color: var(--white); }
.pt-cycle__btn[aria-pressed="true"]:hover { background: var(--green-800); }
.pt-cycle__save {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 9px;
  padding-inline: 8px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--green-900);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}

/* Drei gleich breite Karten: 1140px (container--wide) = 3 x 364 + 2 x 24 */
.pt-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pt-plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 28px 32px;
  border-radius: var(--radius-card);
  background: var(--grey-bg);
  color: var(--green-900);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pt-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.pt-plan--accent { background: var(--green-900); color: var(--white); }
.pt-plan--accent:hover { box-shadow: 0 10px 28px rgba(8, 27, 21, 0.26); }

/* h-card bringt die Größe (20px) mit, hier nur der Eigenabstand weg */
.pt-plan__name { margin: 0; }

.pt-plan__price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pt-plan__amount {
  font-size: 30px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pt-plan__unit { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--grey-text); }
.pt-plan--accent .pt-plan__unit { color: rgba(255, 255, 255, 0.62); }

.pt-plan__note {
  margin: -8px 0 0;            /* zieht die Zeile an den Preis heran */
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--grey-text);
}
.pt-plan--accent .pt-plan__note { color: rgba(255, 255, 255, 0.62); }

.pt-plan__trial {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  margin: 0;
  padding-inline: 11px;
  border-radius: 999px;
  background: rgba(8, 27, 21, 0.06);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}
.pt-plan__trial svg { width: 11px; height: auto; }
.pt-plan--accent .pt-plan__trial { background: rgba(171, 237, 210, 0.14); color: var(--mint); }

/* pontico.css setzt globale ul-Regeln, deshalb hier zurücksetzen */
.pt-plan__features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.pt-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
.pt-plan__features svg { flex: 0 0 auto; width: 13px; height: auto; margin-top: 5px; }
.pt-plan--accent .pt-plan__features svg { color: var(--mint); }

.pt-plan__cta { margin-top: 8px; }
.pt-plan__cta .btn { width: 100%; height: 47px; font-size: 13px; padding-inline: 20px; }

/* Preis- und Hinweiszeilen: je Zeitraum ist nur eine Fassung sichtbar.
   Umschalten über eine Klasse am Container, damit kein Text neu geschrieben
   und nichts gemessen werden muss. */
.pt-plans [data-pt-yr] { display: none; }
.pt-plans.is-yearly [data-pt-mo] { display: none; }
.pt-plans.is-yearly [data-pt-yr] { display: inline; }
.pt-plans.is-yearly p[data-pt-yr] { display: block; }

/* Ohne Skript bleibt der Monatspreis stehen – nichts springt, nichts fehlt. */

/* ---- 1060px: Karten dürfen enger stehen ---- */
@media (max-width: 1060px) {
  .pt-plans__grid { gap: 18px; }
  .pt-plan { padding: 26px 22px 28px; }
}

/* ---- 780px: untereinander ---- */
@media (max-width: 780px) {
  .pt-cycle-row { margin-bottom: 28px; }
  .pt-cycle__btn { height: 41px; padding-inline: 18px; font-size: 14px; }
  .pt-plans__grid { grid-template-columns: 1fr; gap: 16px; }
  .pt-plan { padding: 26px 22px 30px; }
  .pt-plan:hover { transform: none; box-shadow: none; }
  .pt-plan__amount { font-size: 28px; line-height: 32px; }
}

/* ============================================================
   Startseite, Hero-Bühne mobil: Bildausschnitt oben ansetzen
   Das Mobilbild (hero-team-mobile, 950 x 1080) ist ein Hochformat-Ausschnitt
   um beide Köpfe. Auf kleinen, flachen Bühnen (z. B. 375 x 281) schneidet
   object-fit: cover oben und unten ab – mittig angesetzt fielen dabei die
   Köpfe heraus. 10 % von oben hält die Gesichter im Bild und lässt die
   gestapelten Schaltflächen auf der Wand darüber stehen.
   ============================================================ */
@media (max-width: 780px) {
  .hero-stage__img { object-position: 50% 10%; }
}

/* ============================================================
   Team-Fotos: Wechsel Jackett → Hemd („Milchglas“), Fassung 3
   Ersetzt die früheren Fassungen (Canvas/Körnung und Milchglas v2).
   Ebenen im Rahmen von .team__photo (von unten nach oben):
     .pt-reveal__top    Jackett – ohne Skript das einzige sichtbare Bild
     .pt-reveal__alt    Hemd, scharf – wächst als weicher Kreis von der
                        Maus- bzw. Tippstelle aus
     .pt-reveal__glass  Hemd, weichgezeichnet und aufgehellt – liegt als
                        Milchglas-Ring genau auf der Übergangskante
   Das Skript setzt nur drei Werte (--pt-x, --pt-y, --pt-r); Unschärfe und
   Tönung stehen fest, animiert wird ausschließlich die Maske. Das ist
   günstig für den Browser und bleibt auch auf dem Handy flüssig.
   isolation: isolate hält die Ebenen in diesem Rahmen – das Karussell-Band
   hat transform und bildet sonst den Bezug für die z-Indizes.
   ============================================================ */
.pt-reveal {
  isolation: isolate;
  --pt-x: 50%;
  --pt-y: 30%;
  --pt-r: -200px;      /* Ruhelage: nichts vom Hemd sichtbar */
  --pt-soft: 70px;     /* weiche Kante der scharfen Fläche */
  --pt-band: 60px;     /* Breite des Milchglas-Rings – bewusst schmal */
}

.pt-reveal__top {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  opacity: 1 !important;   /* Jackett ist immer das Grundbild – schützt gegen
                              Reste der früheren Canvas-Fassung, die es ausblendete */
}

.pt-reveal__alt {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;          /* ohne Skript unsichtbar */
  visibility: hidden;
}
/* Hemd und Glas sind nur während des Übergangs und im umgeschalteten Zustand
   da. In Ruhe sind sie ausgeblendet – unabhängig davon, ob der Browser die
   Maske anwendet. So ist das Jackett in jedem Fall das erste Bild. */
.pt-reveal.is-active .pt-reveal__alt,
.pt-reveal.is-active .pt-reveal__glass { visibility: visible; }
.pt-reveal.is-ready .pt-reveal__alt {
  opacity: 1;
  -webkit-mask-image: radial-gradient(circle at var(--pt-x) var(--pt-y),
    #000 calc(var(--pt-r) - var(--pt-soft)), transparent var(--pt-r));
          mask-image: radial-gradient(circle at var(--pt-x) var(--pt-y),
    #000 calc(var(--pt-r) - var(--pt-soft)), transparent var(--pt-r));
}

/* Milchglas: eine weichgezeichnete Kopie des Hemd-Bildes, leicht vergrößert
   (wirkt wie Lichtbrechung) und aufgehellt, nur als Ring auf der Kante. */
.pt-reveal__glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0.55;       /* Glas nur angedeutet */
  -webkit-mask-image: radial-gradient(circle at var(--pt-x) var(--pt-y),
    transparent calc(var(--pt-r) - var(--pt-band)),
    #000 calc(var(--pt-r) - var(--pt-band) * 0.45),
    #000 calc(var(--pt-r) + var(--pt-band) * 0.1),
    transparent calc(var(--pt-r) + var(--pt-band) * 0.6));
          mask-image: radial-gradient(circle at var(--pt-x) var(--pt-y),
    transparent calc(var(--pt-r) - var(--pt-band)),
    #000 calc(var(--pt-r) - var(--pt-band) * 0.45),
    #000 calc(var(--pt-r) + var(--pt-band) * 0.1),
    transparent calc(var(--pt-r) + var(--pt-band) * 0.6));
}
.pt-reveal__glass img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: blur(9px) saturate(1.1) brightness(1.05);
}
/* heller Glanz auf dem Ring – die „Glaskante“ */
.pt-reveal__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--pt-x) var(--pt-y),
      rgba(255, 255, 255, 0) calc(var(--pt-r) - var(--pt-band) * 0.5),
      rgba(255, 255, 255, 0.12) calc(var(--pt-r) - var(--pt-band) * 0.05),
      rgba(255, 255, 255, 0) calc(var(--pt-r) + var(--pt-band) * 0.35)),
    rgba(255, 255, 255, 0.04);
}

.pt-reveal .team__linkedin { z-index: 3; }

/* Ohne Maskenunterstützung oder bei reduzierter Bewegung: ruhiges Überblenden */
.pt-reveal.is-fade .pt-reveal__alt {
  -webkit-mask-image: none;
          mask-image: none;
  visibility: visible;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.pt-reveal.is-fade.is-revealed .pt-reveal__alt { opacity: 1; }
.pt-reveal.is-fade .pt-reveal__glass { display: none; }

/* Umschalter: auf Touch-Geräten sichtbar als Hinweis, am Desktop nur bei
   Tastaturfokus – dort übernimmt das Überfahren mit der Maus. */
.pt-reveal__toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--green-900);
  cursor: pointer;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--spring);
}
.pt-reveal__toggle svg { width: 20px; height: 20px; transition: transform 0.5s var(--spring); }
.pt-reveal.is-revealed .pt-reveal__toggle svg { transform: rotate(90deg) scale(0.9); }
.pt-reveal__toggle:active { transform: scale(0.92); transition-duration: 90ms; }
.pt-reveal__toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .pt-reveal__toggle { opacity: 0; pointer-events: none; }
  .pt-reveal__toggle:focus-visible { opacity: 1; pointer-events: auto; }
}

@media (max-width: 780px) {
  .pt-reveal { --pt-soft: 44px; --pt-band: 40px; }
  .pt-reveal__glass img { filter: blur(7px) saturate(1.1) brightness(1.05); }
  .pt-reveal__toggle { right: 14px; bottom: 14px; width: 38px; height: 38px; }
  .pt-reveal__toggle svg { width: 18px; height: 18px; }
}

/* ============================================================
   Team-Fotos: beide Bildebenen als Block und deckungsgleich
   ============================================================
   Nachtrag zu snippets/team-reveal.css (Fassung 3), am Messstand
   Kasten für Kasten nachgewiesen:

     - Jackett-Ebene im Fluss mit height: 100%  ->  malt nicht (weiß),
       auch nicht mit fester Höhe an der Ebene oder am Bild.
     - Hemd-Ebene absolut, aber ohne display   ->  malt nicht, auch mit
       abgeschalteter Maske und allen gesetzten Klassen.
     - Beide absolut, inset: 0 und display: block  ->  malen.

   Der Grund ist derselbe für beide: <picture> ist von Haus aus inline.
   Der Baustein setzt display: block nur auf der Jackett-Ebene, nicht auf
   der Hemd-Ebene – deshalb blieb erst das Jackett weiß und nach dessen
   Korrektur das Hemd unsichtbar.

   inset: 0 füllt den Rahmen unabhängig davon, wie dessen Höhe zustande
   kommt: am Desktop feste 515 px, mobil height: auto mit Seitenverhältnis
   222/295. z-index bleibt aus dem Baustein (Jackett 0, Hemd 1), die
   Reihenfolge ist also unverändert.

   Gehört bei der nächsten Überarbeitung in den Baustein selbst; bis dahin
   steht es hier dahinter und überschreibt ihn.
   ============================================================ */
.pt-reveal__top,
.pt-reveal__alt {
  position: absolute;
  inset: 0;
  display: block;
  height: auto;
}

/* ============================================================
   Cockpit-Reiter (/loesungen/#cockpit): weiches Überblenden der Screenshots
   pontico.css schaltet die Panels hart um (display: none → block) und blendet
   nur das neue Panel ein – das alte verschwindet schlagartig. Hier liegen alle
   Panels im selben Rasterfeld übereinander und blenden gegeneinander über:
   das alte aus, das neue zeitgleich ein. Bild und Bildunterschrift wechseln
   gemeinsam.
   Nebeneffekt, gewollt: Der Bereich ist so hoch wie das höchste Panel, beim
   Wechsel springt darunter nichts. Und die Bilder der verdeckten Panels werden
   vorgeladen, statt erst beim Umschalten nachzuladen.
   pontico.js (initTabs) bleibt unverändert – es setzt weiter nur .is-active.
   ============================================================ */
.tab-panels { display: grid; }

.tab-panel,
.tab-panel.is-active {
  display: block;
  grid-area: 1 / 1;
  animation: none;
}
.tab-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}
.tab-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.6s var(--ease), visibility 0s;
}

/* ============================================================
   Kontaktformular: Versand über WordPress (siehe pontico-wp.js,
   initKontaktForm) – Fehlermeldung und Sende-Zustand
   ============================================================ */
.pt-form-error {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: #b4483c;   /* Fehlerfarbe der Vorlage (.field[aria-invalid]) */
}
.pt-form-error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lead-form__form[aria-busy="true"] .lead-form__submit { cursor: progress; opacity: 0.7; }

/* Datenschutz-Hinweis unter dem Formular (Markup im Code-Block der Seite) */
.pt-privacy-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
  color: var(--grey-text);
}
.pt-privacy-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }