/* =====================================================================
   KGS PRICING — Paketkarten auf Angebote-Niveau
   ---------------------------------------------------------------------
   Vorbemerkung: Die drei gleich grossen Karten je Abschnitt sind hier
   KEIN Listenfehler. Es sind Preisstufen, und die muss man
   nebeneinander vergleichen koennen - ein asymmetrisches Bento wuerde
   den Vergleich zerstoeren. Gleiche Groesse bleibt also.

   Was tatsaechlich nicht stimmte:

   1. Das Dreierraster klappte schon bei 1024px auf eine Spalte um.
      Gemessen: 1440px = 10 213px Seitenhoehe, 1024px = 15 405px - auf
      dem Tablet also dieselbe Laenge wie auf dem Telefon, obwohl 976px
      Breite zur Verfuegung standen. Die Umschaltung liegt jetzt bei
      900px; darunter bleibt es einspaltig, weil drei Karten dann
      wirklich zu schmal wuerden.

   2. Die Karten trugen nicht die Formsprache, die der Rest der Website
      inzwischen hat: keine umlaufende Goldkante, keine dauerhafte
      Bewegung ausser dem Schweben, Titel in Montserrat-Versalien statt
      in der Hausschrift.

   3. Die Empfehlungskarte verlor auf Mobil ihren Rang: die Seite setzt
      dort transform: scale(1), und damit sah sie aus wie die anderen.
      Sie behaelt ihn jetzt ueber Kante und Schein statt ueber Groesse.

   Zur Spezifitaet: die Kartenstile stehen in <style>-Bloecken in den
   Sektionen, also NACH dieser Datei, teils mit ID-Praefix. Wo hier
   !important steht, ist es genau deshalb noetig. Farben der dunklen
   Fassungen werden bewusst NICHT angefasst.
   ===================================================================== */

@property --pc-edge {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
/* Auch die beiden Kantenfarben werden registriert - sonst springt der
   Hover-Wechsel hart, statt mit der Karte weich mitzugehen. */
@property --pc-edge-linie {
    syntax: '<color>';
    initial-value: rgba(148, 102, 8, .34);
    inherits: true;
}
@property --pc-edge-licht {
    syntax: '<color>';
    initial-value: rgba(202, 138, 4, .95);
    inherits: true;
}

/* ── 1. Rasterbreite und Spaltenabstand ──
   Die Sektionsregeln sind mit ID vorangestellt und passen teils nicht
   zum Markup: #online-coaching und #gruppentraining definieren
   .grid-2-dark, im Markup steht aber .grid-3-dark. Diese Raster hatten
   deshalb GAR KEINEN Spaltenabstand (gemessen: gap normal). Zusammen
   mit dem scale(1.05) der Empfehlungskarte ergab das bei 1440px eine
   Ueberlappung von 10px zu beiden Nachbarn - die Karten klebten nicht
   nur, sie lagen uebereinander.

   Der Abstand wird deshalb hier gesetzt, fuer alle drei Raster gleich.
   Die Empfehlungskarte ragt durch die Skalierung rund 9,5px in jede
   Luecke hinein; 36px Abstand lassen also gut 26px Luft stehen. */
@media (min-width: 901px) {
    html body .grid-3-light,
    html body .grid-3-dark {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    html body .grid-2-dark {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    html body .grid-3-light,
    html body .grid-3-dark,
    html body .grid-2-dark {
        gap: 36px !important;
    }
}
/* Zwischen 901 und 1100px wird es eng - Innenmasse und Abstand straffen,
   damit drei Karten sauber nebeneinander stehen statt zu quetschen. */
@media (min-width: 901px) and (max-width: 1100px) {
    html body .grid-3-light,
    html body .grid-3-dark,
    html body .grid-2-dark {
        gap: 28px !important;
    }
    html body .glass-white-card,
    html body .obsidian-card,
    html body .dark-glass-card {
        padding: 28px 18px !important;
    }
    html body .pc-price { font-size: 2.15rem !important; }
    html body .pc-list li,
    html body .pc-desc { font-size: .79rem !important; }
}

/* ── 2. Umlaufende Goldkante ──
   Ohne @property waere --pc-edge nicht interpolierbar und die Kante
   staende still. Die Karten haben overflow: visible (das Badge ragt
   oben heraus), die maskierte Kante funktioniert trotzdem, weil sie
   sich auf inset beschraenkt.

   Sichtbarkeit: die erste Fassung war messbar in Bewegung, aber
   praktisch unsichtbar. Drei Gruende kamen zusammen -
   1. der Farbverlauf war auf 96% seines Umfangs transparent, es lief
      also nur ein kurzer Bogen um eine sonst leere Linie,
   2. das Ganze lag zusaetzlich auf opacity: .4, der hellste Punkt kam
      damit auf 0,32 Deckkraft,
   3. bei 1px Staerke und inset: 0 lag die Linie INNEN neben dem
      karteneigenen Rand - auf den hellen Karten ein weisser Rand auf
      cremefarbenem Grund, auf den dunklen Weiss mit 8% Deckkraft.
   Jetzt traegt der Verlauf eine durchgehende, ruhige Goldlinie, auf
   der ein heller Bogen umlaeuft. inset: -1px legt den Ring genau auf
   den karteneigenen Rand, statt daneben. */
html body .glass-white-card,
html body .obsidian-card,
html body .dark-glass-card {
    /* Grundlinie und Lichtbogen je nach Untergrund: auf Creme braucht
       es ein tiefes Gold, auf Schwarz ein helles. */
    --pc-edge-linie: rgba(148, 102, 8, .34);
    --pc-edge-licht: rgba(202, 138, 4, .95);
}
html body .obsidian-card,
html body .dark-glass-card {
    --pc-edge-linie: rgba(202, 138, 4, .30);
    --pc-edge-licht: rgba(245, 213, 112, 1);
}
html body .glass-white-card::after,
html body .obsidian-card::after,
html body .dark-glass-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 3;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    opacity: 1;
    background: conic-gradient(from var(--pc-edge),
        var(--pc-edge-linie) 0 58%,
        var(--pc-edge-licht) 73%,
        var(--pc-edge-linie) 88% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: kgsPcEdge 15s linear infinite;
    transition: opacity .4s ease;
}
/* Unterschiedliche Laufzeiten, damit die Kanten nicht im Gleichschritt
   laufen - drei nebeneinander im Takt wirken mechanisch. */
html body .pc-left::after   { animation-duration: 13s; }
html body .highlight::after { animation-duration: 11s; }
html body .pc-right::after  { animation-duration: 18s; }
@keyframes kgsPcEdge { to { --pc-edge: 360deg; } }

/* Die Empfehlungskarte fuehrt auch hier: kraeftigere Grundlinie. */
html body .glass-white-card.highlight { --pc-edge-linie: rgba(148, 102, 8, .5); }
html body .obsidian-card.highlight,
html body .dark-glass-card.highlight { --pc-edge-linie: rgba(202, 138, 4, .46); }

html body .glass-white-card:hover,
html body .obsidian-card:hover,
html body .dark-glass-card:hover { --pc-edge-linie: rgba(202, 138, 4, .62); }

/* ── 3. Typografie in der Hausschrift ──
   .pc-title stand in Montserrat 800 in Versalien - das ist die
   einzige Stelle der Website, an der ein Kartentitel so gesetzt war.
   font-family & Co. setzen die Sektionen ohne !important, deshalb
   genuegt hier !important; die Farben bleiben unangetastet. */
/* Beschreibungszeile unter dem Preis auf dunklen Karten.
   .pc-desc ist global mit #57534E gesetzt - dem Grauton fuer die hellen
   Karten. Auf den Obsidian-Karten stand dieses Dunkelgrau damit auf
   fast schwarzem Grund: gemessener Kontrast 2,52:1 gegen 7,43:1 auf
   den hellen Karten. Lesbar ist ab 4,5:1.
   #online-coaching hatte die Farbe als einzige Sektion mit !important
   nachgezogen, #gruppentraining und #breathwork nicht - der Fehler war
   also schon halb bekannt, nur nicht zu Ende gefuehrt. Die Regel greift
   deshalb ueber die Kartenklasse statt ueber die Sektions-ID.
   #D6D3D1 kommt auf 13,3:1 und bleibt trotzdem ruhiger als die
   Listenpunkte in #FAFAF9 - die Beschreibung soll die Ueberschrift
   nicht ueberholen. */
html body .obsidian-card .pc-desc,
html body .dark-glass-card .pc-desc {
    color: #D6D3D1;
}

html body .pc-title {
    font-family: 'KGSAmp', 'Playfair Display', serif !important;
    font-size: 1.22rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -.2px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
    hyphens: auto;
}

/* Der Preis ist der Blickfang der Karte - er bekommt ein ruhiges,
   versetztes Leuchten statt gar keiner Bewegung. */
html body .pc-price {
    display: inline-block;
    animation: kgsPcPrice 7s ease-in-out infinite;
}
html body .pc-left  .pc-price { animation-delay: 0s; }
html body .highlight .pc-price { animation-delay: 1.1s; }
html body .pc-right .pc-price { animation-delay: 2.2s; }
@keyframes kgsPcPrice {
    0%, 100% { text-shadow: 0 5px 15px rgba(202, 138, 4, .15); }
    45%      { text-shadow: 0 5px 18px rgba(202, 138, 4, .34), 0 0 26px rgba(202, 138, 4, .22); }
}

/* Der Hinweis auf die Zahlungsart steht auf jeder der neunzehn Karten.
   Er darf da bleiben, soll aber nicht mit dem Inhalt konkurrieren. */
html body .trust-badge {
    margin-top: 14px !important;
    opacity: .62;
    font-size: .6rem !important;
}

/* ── 3b. Desktop-Laenge ──
   Bei 1440px war die hoechste Karte 796px hoch, die Seite 11810px -
   dreizehn Bildschirme. Zwei Ursachen, beide messbar:

   1. Zeilenrhythmus: 13,6px Schrift auf 19px Zeilenhoehe, dazu 12px
      Abstand - also 31px Raster fuer eine einzeilige Angabe. Bei
      dreizehn Punkten allein 403px Liste.
   2. Der Freiraum stand in der MITTE. .pc-list hatte flex-grow: 1,
      also sammelte sich die Hoehendifferenz zur laengsten Karte
      zwischen dem letzten Listenpunkt und dem Abschluss - bei acht
      gegen dreizehn Punkte ein Loch von rund 150px mitten im Text.
      Jetzt waechst stattdessen der Abstand ueber dem Button: der
      Inhalt bleibt ein Block, der Button steht weiter am Blockende
      (Projektregel 4), und der Freiraum liest sich als Luft statt
      als Luecke.

   Alles nur ab 901px - die gestapelte Ansicht wurde bereits geprueft
   und bleibt unangetastet. */
@media (min-width: 901px) {
    html body .pc-list li { margin-bottom: 8px !important; }
    html body .pc-desc { margin-bottom: 12px !important; }
    html body .pc-divider { margin-bottom: 13px !important; }
    html body .pc-list { margin-bottom: 13px !important; flex-grow: 0 !important; }
    html body .pc-target { margin-bottom: 15px !important; padding-top: 12px !important; }

    html body .glass-white-card > a[class*="btn-"],
    html body .obsidian-card > a[class*="btn-"],
    html body .dark-glass-card > a[class*="btn-"] { margin-top: auto; }

    /* Die Kopfzeilen der Bloecke standen mit 50px Abstand zum Raster,
       bei acht Bloecken summiert sich das. */
    html body .ph-light,
    html body .ph-dark { margin-bottom: 38px !important; }

    /* Das Sektionspolster war der groesste Einzelposten der Seitenlaenge:
       140px oben und unten mal acht Bloecke sind 2240px, rund ein Fuenftel
       der ganzen Seite. 108px halten die Bloecke weiterhin klar getrennt
       (Projektregel 6), ohne die Seite zu strecken. Das style-Attribut der
       Sektionen setzt kein !important, deshalb greift diese Regel. */
    html body section.premium-section {
        padding-top: 108px !important;
        padding-bottom: 108px !important;
    }
}
/* Ab 1101px ist Platz fuer etwas mehr Innenmass; darunter greift die
   engere Regel aus Abschnitt 1. */
@media (min-width: 1101px) {
    html body .glass-white-card,
    html body .obsidian-card,
    html body .dark-glass-card {
        padding: 30px 24px !important;
    }
}

/* ── 4. Einspaltig: die Empfehlung behaelt ihren Rang ──
   Die Seite setzt dort transform: scale(1); ohne Groessenunterschied
   braucht die Karte ein anderes Mittel, um vorn zu stehen. */
@media (max-width: 900px) {
    html body .glass-white-card.highlight {
        border-width: 2px !important;
        border-color: #CA8A04 !important;
        box-shadow: 0 30px 60px rgba(72, 47, 7, .14),
                    0 0 42px rgba(202, 138, 4, .26) !important;
    }
    html body .obsidian-card.highlight,
    html body .dark-glass-card.highlight {
        border-color: rgba(229, 184, 59, .85) !important;
        box-shadow: 0 34px 70px rgba(0, 0, 0, .9),
                    0 0 44px rgba(202, 138, 4, .3) !important;
    }
    /* Einspaltig steht jede Karte allein - die Kante darf dann etwas
       ruhiger sein, aber sichtbar bleiben. */
    html body .glass-white-card.highlight { --pc-edge-linie: rgba(148, 102, 8, .44); }
    html body .obsidian-card.highlight,
    html body .dark-glass-card.highlight { --pc-edge-linie: rgba(202, 138, 4, .4); }

    /* Innenmasse straffen: neunzehn gestapelte Karten summieren sich */
    html body .glass-white-card,
    html body .obsidian-card,
    html body .dark-glass-card {
        padding: 28px 20px !important;
    }
    html body .grid-3-light,
    html body .grid-3-dark,
    html body .grid-2-dark {
        gap: 26px !important;
    }
    /* Einspaltig lief die Karte auf 852px Breite auseinander (gemessen
       bei 900px Viewport). Eine Preiskarte in dieser Breite wirkt
       gezogen, nicht hochwertig - deshalb begrenzt und zentriert. */
    html body .grid-3-light > *,
    html body .grid-3-dark > *,
    html body .grid-2-dark > * {
        width: 100%;
        max-width: 460px;
        margin-inline: auto;
    }
    html body .pc-title { font-size: 1.14rem !important; }
    html body .pc-price { font-size: 2.3rem !important; }
    html body .pc-list li { margin-bottom: 9px !important; }
    html body .pc-target { margin-bottom: 16px !important; padding-top: 12px !important; }
}

@media (max-width: 480px) {
    html body .glass-white-card,
    html body .obsidian-card,
    html body .dark-glass-card {
        padding: 24px 17px !important;
        border-radius: 18px;
    }
    html body .pc-title { font-size: 1.06rem !important; }
    html body .pc-price { font-size: 2.05rem !important; }
    html body .pc-list li { font-size: .8rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    /* Der Bogen steht still, die Kante bleibt aber sichtbar - sonst
       verlieren die Karten bei reduzierter Bewegung ihre Rahmung. */
    html body .glass-white-card::after,
    html body .obsidian-card::after,
    html body .dark-glass-card::after {
        animation: none !important;
        background: linear-gradient(180deg, var(--pc-edge-licht), var(--pc-edge-linie)) !important;
    }
    html body .pc-price { animation: none !important; }
}


/* =====================================================================
   FUSSNOTEN UND ZUSATZMODULE UNTER DEN PREISRASTERN
   ---------------------------------------------------------------------
   Neu hinzugekommen mit der Umstellung der Buchungslogik: Hinweise zum
   Leistungsumfang, zur Abgrenzung Online/Praesenz und die optionalen
   Firmen-Zusatzmodule. Gestaltung bewusst zurueckhaltend - die Karten
   bleiben der Blickfang.
   ===================================================================== */
html body .pc-fussnote {
    position: relative;
    z-index: 10;
    max-width: 1150px;
    margin: 34px auto 0;
    padding: 22px 26px;
    border-radius: 18px;
    border: 1px solid rgba(202, 138, 4, .22);
    font-family: 'Montserrat', sans-serif;
    font-size: .84rem;
    line-height: 1.75;
    text-align: center;
}
html body .pc-fussnote p { margin: 0; }
html body .pc-fussnote p + p { margin-top: 10px; }
html body .pc-fussnote--hell {
    background: linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(252, 247, 238, .82));
    box-shadow: 0 16px 40px rgba(72, 47, 7, .07), inset 0 1px 0 #FFF;
    color: #57534E;
}
html body .pc-fussnote--dunkel {
    background: linear-gradient(155deg, rgba(30, 26, 21, .7), rgba(9, 8, 7, .85));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
    color: #A8A29E;
}
html body .pc-fussnote--dunkel strong { color: #E5B83B; }
html body .pc-fussnote-klein {
    font-size: .72rem;
    line-height: 1.65;
    opacity: .82;
}

/* ── Optionale Zusatzmodule (Firmenfitness) ── */
html body .pc-module {
    position: relative;
    z-index: 10;
    max-width: 1150px;
    margin: 34px auto 0;
    padding: 30px 32px 26px;
    border-radius: 22px;
    border: 1px solid rgba(202, 138, 4, .24);
    background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(252, 247, 238, .86));
    box-shadow: 0 20px 48px rgba(72, 47, 7, .08), inset 0 1px 0 #FFF;
}
html body .pc-module-titel {
    margin: 0 0 8px;
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.32rem;
    font-weight: 500;
    letter-spacing: -.2px;
    color: #1C1917;
    text-align: center;
}
html body .pc-module-hinweis {
    margin: 0 0 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: .84rem;
    line-height: 1.7;
    color: #57534E;
    text-align: center;
}
html body .pc-module-hinweis strong { color: #8A6208; }
html body .pc-module-liste {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 0;
}
html body .pc-module-liste li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 2px;
    border-top: 1px solid rgba(202, 138, 4, .16);
    font-family: 'Montserrat', sans-serif;
    font-size: .87rem;
    line-height: 1.5;
    color: #292524;
}
html body .pc-module-liste li:first-child { border-top: 0; }
html body .pc-module-preis {
    flex-shrink: 0;
    font-weight: 600;
    color: #8A6208;
    text-align: right;
}
html body .pc-module .pc-fussnote-klein {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(202, 138, 4, .16);
    color: #78716C;
    text-align: center;
}

@media (max-width: 768px) {
    html body .pc-fussnote { margin-top: 26px; padding: 18px 18px; font-size: .8rem; }
    html body .pc-module { margin-top: 26px; padding: 24px 20px 22px; }
    html body .pc-module-titel { font-size: 1.16rem; }
    html body .pc-module-hinweis { font-size: .8rem; }
    /* Bezeichnung und Preis untereinander - nebeneinander wird der
       Preis sonst in eine eigene Zeile gequetscht. */
    html body .pc-module-liste li {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        font-size: .83rem;
    }
    html body .pc-module-preis { text-align: left; }
}


/* =====================================================================
   GLEICHE KARTENHOEHEN UND BUTTONS AUF EINER LINIE
   ---------------------------------------------------------------------
   Drei gemessene Ursachen fuer versetzte Buttons:

   1. Online Coaching und Gruppentraining sind von .grid-2-dark auf
      .grid-3-dark umgestellt worden. Die Rasterdefinition dieser
      Sektionen war aber auf .grid-2-dark gemuenzt - ohne
      align-items: stretch waren die Karten 602/629/660px hoch.

   2. Lange Beschriftungen ("Praezisionsanalyse buchen",
      "Intensivprogramm buchen", "Gesundheitstag anfragen") liefen in
      die zweite Zeile. Ein zweizeiliger Button ist hoeher, sein
      Oberkant sitzt damit 24px weiter oben als der der Nachbarn.

   3. Die Empfehlungskarte traegt einen 2px-Rand statt 1px, wodurch
      ihr Inhalt um 4px verschoben stand.
   ===================================================================== */

/* 1 — Raster: gleiche Hoehe fuer alle Karten einer Reihe */
html body .grid-3-light,
html body .grid-3-dark,
html body .grid-2-dark {
    display: grid;
    align-items: stretch;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}
html body .grid-3-light > *,
html body .grid-3-dark > *,
html body .grid-2-dark > * { height: 100%; }

/* 2 — Buttons: feste Mindesthoehe und Beschriftung, die in eine Zeile
   passt. 0.78rem bei 1.2px Sperrung reicht fuer die laengste
   Beschriftung auch dann, wenn die Karten bei 1100px auf 340px
   schrumpfen. Die Mindesthoehe faengt zweizeilige Faelle trotzdem ab. */
html body .glass-white-card > a[class*="btn-"],
html body .obsidian-card > a[class*="btn-"],
html body .dark-glass-card > a[class*="btn-"],
html body .glass-white-card > div > a[class*="btn-"],
html body .obsidian-card > div > a[class*="btn-"],
html body .dark-glass-card > div > a[class*="btn-"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    font-size: .78rem !important;
    letter-spacing: 1.2px !important;
    /* Die drei Buttonklassen brachten je eigene senkrechte Innenabstaende
       und Randstaerken mit - gemessen 58, 60 und 62px hoch. Mit
       aufgehobenem senkrechten Innenabstand und box-sizing: border-box
       ergibt die Mindesthoehe fuer alle exakt denselben Wert. */
    min-height: 60px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* In einer Reihe, die gekaufte und angefragte Angebote mischt (Breathwork),
   fehlt der Anfragekarte der Zahlungshinweis - ihr Button saesse dadurch
   31px tiefer als die der Nachbarn. Dafuer steht ein echter Platzhalter
   im Markup; ein ::after waere mit der umlaufenden Goldkante kollidiert,
   die genau dieses Pseudoelement belegt. */
html body .pc-platzhalter {
    display: block;
    height: 31px;
    flex-shrink: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    html body .glass-white-card > a[class*="btn-"],
    html body .obsidian-card > a[class*="btn-"],
    html body .dark-glass-card > a[class*="btn-"],
    html body .glass-white-card > div > a[class*="btn-"],
    html body .obsidian-card > div > a[class*="btn-"],
    html body .dark-glass-card > div > a[class*="btn-"] {
        min-height: 58px;
        font-size: .76rem !important;
    }
}