/* Preis-Kacheln — CI-getreu (easytranscript.de/preise Redesign).
   Ground #201f24, Karten #26262c, Rahmen #3a3942, Labels/Titel #7dd2ff,
   Blau-Rampe #1e73be / #00a6fd, scharfe 3px-Ecken, Open Sans. */

.pc-857a9ebf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pc-857a9ebf-card {
    background-color: #26262c;
    border: 1px solid #3a3942;
    border-radius: 3px;
    padding: 22px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.pc-857a9ebf-card.featured {
    border-color: rgba(125, 210, 255, 0.28);
    box-shadow: 0 4px 20px rgba(0, 166, 253, 0.08);
}

.pc-857a9ebf-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(154deg, #00A6FD 0%, #006FB3 84%) !important;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pc-857a9ebf-header {
    text-align: left;
}

.pc-857a9ebf-title {
    font-size: 14px;
    font-weight: 700;
    color: #7dd2ff;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    letter-spacing: 0.09em;
}

.pc-857a9ebf-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.5;
    margin: 0;
}

/* Billing Toggle + Platzhalter. Die Button-Maße sind bewusst festgeschrieben
   (!important), damit die Höhe des Umschalters nicht von der Theme-Typografie
   abhängt – sonst ragen die Buttons aus ihrem eigenen Hintergrund heraus und der
   Umschalter wirkt unten abgeschnitten. */
.pc-857a9ebf-toggle-wrapper,
.pc-857a9ebf-billing-spacer {
    margin: 10px 0 14px;
    box-sizing: border-box;
}

.pc-857a9ebf-toggle-wrapper {
    display: inline-flex;
    background-color: #2c2c33;
    padding: 3px;
    border-radius: 3px;
    align-self: flex-start;
    justify-self: start;
}

.pc-857a9ebf-toggle-btn {
    background: none;
    border: none !important;
    color: rgba(255, 255, 255, 0.64);
    font-family: inherit;
    font-size: 11.5px !important;
    line-height: 18px !important;
    font-weight: 700;
    padding: 5px 12px !important;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pc-857a9ebf-toggle-btn.active {
    background-color: #1e73be;
    color: #ffffff;
}

.pc-857a9ebf-price-area {
    text-align: left;
}

.pc-857a9ebf-price-display {
    display: flex;
    align-items: baseline;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.pc-857a9ebf-amount {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.pc-857a9ebf-period {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.64);
    margin-left: 6px;
}

.pc-857a9ebf-subtext {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.35;
}

/* Luft zwischen Preisblock und Button: der Preis soll atmen, nicht am Button kleben.
   Im Kompaktmodus weiter unten wieder auf 0 gesetzt. */
.pc-857a9ebf-action {
    margin-top: 28px;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Ausrichtung über alle Kacheln.

   Subgrid: die Kacheln übernehmen die Zeilen des Rasters, jede Zeile ist also so
   hoch wie ihr größter Inhalt über alle Kacheln hinweg. Beschreibung, Umschalter,
   Preis und Button fluchten dadurch von selbst – ohne reservierten Leerraum, der
   die Preise sonst nach unten drückt.

   Der Fallback darunter (ältere Browser) reserviert stattdessen feste Höhen.
   --------------------------------------------------------------------------- */
@supports not (grid-template-rows: subgrid) {
    .pc-857a9ebf-desc { min-height: 3em; }
    .pc-857a9ebf-toggle-wrapper,
    .pc-857a9ebf-billing-spacer { min-height: 34px; }
    .pc-857a9ebf-subtext { min-height: 34px; }
}

@supports (grid-template-rows: subgrid) {
    .pc-857a9ebf-layout-grid .pc-857a9ebf-card {
        display: grid;
        /* header · umschalter · preis · button · fussnote */
        grid-template-rows: subgrid;
        grid-row: span 5;
        align-content: start;
        /* Der Zeilenabstand des Rasters (gap) gilt sonst auch INNERHALB der Kachel und
           reißt zwischen Text, Preis und Button je 16px auf. Abstände kommen hier
           ausschließlich aus den Margins der Elemente. */
        row-gap: 0;
    }
}

/* Marken-Verlauf-Buttons + Hover (bewusst der Gradient der Live-Seite). */
.pc-857a9ebf-btn {
    display: block;
    width: 100%;
    background: linear-gradient(154deg, #00A6FD 0%, #006FB3 84%) !important;
    color: #ffffff !important;
    text-align: center;
    padding: 11px 18px !important;
    border-radius: 3px;
    font-weight: 600 !important;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: none !important;
    box-sizing: border-box;
}

/* Hover: aufgehellter Verlauf. */
.pc-857a9ebf-btn:hover {
    background: linear-gradient(152.94deg, #37BFFF 0.45%, #0084D5 80%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 166, 253, 0.3) !important;
}

/* Dynamische Zustände (Login/Lizenz).
   „Nicht angemeldet" und „keine Lizenz" führen zum Login bzw. zur Lizenz — sie sind
   also echte Wege, keine Sackgassen, und werden als sekundärer Button gezeichnet
   (nicht als „deaktiviert", das würde vom Klicken abhalten). */
.pc-857a9ebf-btn.state-logged-out,
.pc-857a9ebf-btn.state-no-license {
    background: transparent !important;
    border: 1px solid rgba(125, 210, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.pc-857a9ebf-btn.state-logged-out:hover,
.pc-857a9ebf-btn.state-no-license:hover {
    background: transparent !important;
    border-color: #7dd2ff !important;
    color: #7dd2ff !important;
    box-shadow: none !important;
}

.pc-857a9ebf-btn.state-has-license {
    background: linear-gradient(154deg, #00A6FD 0%, #006FB3 84%) !important;
}
.pc-857a9ebf-btn.state-has-license:hover {
    background: linear-gradient(152.94deg, #37BFFF 0.45%, #0084D5 80%) !important;
}

/* Bereits aktive Lizenz: eine zweite laesst sich nicht kaufen. Anders als bei den
   Zustaenden oben gibt es hier keinen sinnvollen naechsten Schritt, der Button ist
   also wirklich gesperrt - es sei denn, es ist ein Konto-Link hinterlegt. */
.pc-857a9ebf-btn.state-owns-license {
    background: #2c2c33 !important;
    border: 1px solid #3a3942 !important;
    color: rgba(255, 255, 255, 0.42) !important;
    box-shadow: none !important;
}
.pc-857a9ebf-btn.state-owns-license.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
}
.pc-857a9ebf-btn.state-owns-license:not(.is-disabled):hover {
    background: #2c2c33 !important;
    border-color: #7dd2ff !important;
    color: #7dd2ff !important;
    box-shadow: none !important;
}

/* Kurzer Hinweis unter dem Button, wenn (noch) nicht gekauft werden kann. */
.pc-857a9ebf-hint {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
    margin: 8px 0 0;
}

/* Kompakt-Zeile (Stundenpakete): horizontales Layout. */
.pc-857a9ebf-layout-compact .pc-857a9ebf-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.pc-857a9ebf-layout-compact .pc-857a9ebf-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    gap: 20px;
}

/* Im Kompaktmodus kein Umschalter-Platzhalter. */
.pc-857a9ebf-layout-compact .pc-857a9ebf-billing-spacer {
    display: none;
}

.pc-857a9ebf-layout-compact .pc-857a9ebf-header {
    flex: 1;
    min-width: 200px;
}

.pc-857a9ebf-layout-compact .pc-857a9ebf-desc {
    min-height: 0;
}

.pc-857a9ebf-layout-compact .pc-857a9ebf-price-area {
    text-align: right;
    min-width: 150px;
}

.pc-857a9ebf-layout-compact .pc-857a9ebf-subtext {
    min-height: 0;
}

.pc-857a9ebf-layout-compact .pc-857a9ebf-action {
    margin-top: 0;
    margin-bottom: 0;
    min-width: 160px;
}

.pc-857a9ebf-layout-compact .pc-857a9ebf-btn {
    width: auto;
    display: inline-block;
    min-width: 160px;
}

@media (max-width: 768px) {
    .pc-857a9ebf-layout-compact .pc-857a9ebf-card {
        flex-direction: column;
        align-items: stretch;
        padding: 22px;
        text-align: center;
    }
    .pc-857a9ebf-layout-compact .pc-857a9ebf-header {
        text-align: center;
        min-width: 0;
    }
    .pc-857a9ebf-layout-compact .pc-857a9ebf-price-area {
        text-align: center;
        min-width: 0;
    }
    .pc-857a9ebf-layout-compact .pc-857a9ebf-action {
        width: 100%;
        min-width: 0;
    }
    .pc-857a9ebf-layout-compact .pc-857a9ebf-btn {
        width: 100%;
    }
}

.pc-857a9ebf-footer {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
    margin-top: 8px;
}

/* Die Fußnoten-Zeile wird immer ausgegeben (gleiche Zeilenzahl je Kachel für das
   Subgrid) – ohne Inhalt darf sie aber keinen Platz beanspruchen. */
.pc-857a9ebf-footer:empty {
    margin: 0;
}

.pc-857a9ebf-footer-link {
    color: #7dd2ff;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.pc-857a9ebf-footer-link:hover {
    color: #00a6fd;
}