/*
 * PCC Rechner – Modern Financial Design
 *
 * Key differences from V1:
 *  - Cards with soft shadows instead of hard borders
 *  - Step numbers (orange circles) for clear user guidance
 *  - Bond selection as prominent rate cards (not radio button rows)
 *  - Result: dark navy hero card for total payout, detail rows below
 *  - Full-width CTA button
 *  - Rounded chart bars
 *  - Mobile-first: larger touch targets, scroll hint for chart
 */

/* ── Custom properties ───────────────────────────────────────────────────── */
.pcc2-wrap {
    --pcc2-orange  : #ff5a00;
    --pcc2-blue    : #003064;
    --pcc2-gray    : #6b7280;
    --pcc2-light   : #f4f6f9;
    --pcc2-bg      : #f4f6f9;
    --pcc2-white   : #ffffff;
    --pcc2-border  : #e2e5ea;
    --pcc2-error   : #b42318;
    --pcc2-shadow  : 0 2px 16px rgba(0, 48, 100, 0.07);
    --pcc2-shadow-lg: 0 8px 32px rgba(0, 48, 100, 0.12);
    --pcc2-radius  : 10px;

    box-sizing  : border-box;
    font-family : "myriad-pro", "Helvetica Neue", Arial, sans-serif;
    color       : var(--pcc2-blue);
    background  : var(--pcc2-bg);
    padding     : 32px 20px 56px;
}

.pcc2-wrap * { box-sizing: border-box; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.pcc2-header {
    margin-bottom : 28px;
    animation     : pcc2-fade-up 400ms ease both;
}
.pcc2-kicker {
    display        : inline-block;
    font-size      : 11px;
    font-weight    : 600;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    color          : var(--pcc2-orange);
    margin-bottom  : 6px;
}
.pcc2-title {
    margin      : 0 0 10px;
    font-weight : 300;
    font-size   : clamp(28px, 4.5vw, 48px);
    line-height : 1.1;
    color       : var(--pcc2-blue);
}
.pcc2-subtitle {
    margin      : 0;
    font-size   : clamp(14px, 1.8vw, 18px);
    line-height : 1.5;
    color       : var(--pcc2-gray);
}

/* ── Editor note ─────────────────────────────────────────────────────────── */
.pcc2-editor-note {
    padding       : 24px;
    background    : var(--pcc2-white);
    border        : 2px dashed var(--pcc2-border);
    border-radius : var(--pcc2-radius);
    text-align    : center;
    color         : var(--pcc2-gray);
    font-size     : 14px;
    margin        : 0;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.pcc2-card {
    background    : var(--pcc2-white);
    border-radius : var(--pcc2-radius);
    box-shadow    : var(--pcc2-shadow);
    padding       : 24px;
    margin-bottom : 16px;
    animation     : pcc2-fade-up 500ms ease both;
}
.pcc2-card:nth-child(2) { animation-delay: 60ms; }
.pcc2-card:nth-child(3) { animation-delay: 120ms; }
.pcc2-card:nth-child(4) { animation-delay: 180ms; }

/* ── Steps 2+3 side by side ─────────────────────────────────────────────── */
.pcc2-steps-row {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 16px;
    margin-bottom         : 0;
}
.pcc2-steps-row .pcc2-card {
    margin-bottom : 16px;
}
@media (max-width: 640px) {
    .pcc2-steps-row {
        grid-template-columns : 1fr;
    }
}

/* ── Step header ─────────────────────────────────────────────────────────── */
.pcc2-step-header {
    display     : flex;
    align-items : center;
    gap         : 12px;
    margin-bottom: 18px;
}
.pcc2-step-num {
    width           : 30px;
    height          : 30px;
    border-radius   : 50%;
    background      : var(--pcc2-orange);
    color           : #fff;
    font-size       : 14px;
    font-weight     : 700;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
    line-height     : 1;
}
.pcc2-step-title {
    font-size   : 16px;
    font-weight : 600;
    color       : var(--pcc2-blue);
    margin      : 0;
}

/* ── Bond rate cards ─────────────────────────────────────────────────────── */
.pcc2-bond-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(160px, 1fr));
    gap                   : 12px;
}
.pcc2-bond-card {
    position      : relative;
    border        : 2px solid var(--pcc2-border);
    border-radius : 8px;
    padding       : 20px 16px;
    cursor        : pointer;
    text-align    : center;
    transition    : border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    user-select   : none;
}
.pcc2-bond-card:hover {
    border-color : var(--pcc2-orange);
    box-shadow   : 0 0 0 3px rgba(255, 90, 0, 0.10);
}
.pcc2-bond-card input[type="radio"] {
    position : absolute;
    opacity  : 0;
    width    : 0;
    height   : 0;
}
.pcc2-bond-card.is-selected {
    border-color : var(--pcc2-orange);
    background   : #fff6f2;
    box-shadow   : 0 0 0 3px rgba(255, 90, 0, 0.12);
}
.pcc2-bond-card-rate {
    font-size   : clamp(32px, 5vw, 44px);
    font-weight : 300;
    color       : var(--pcc2-orange);
    line-height : 1;
    margin-bottom: 4px;
    display     : block;
}
.pcc2-bond-card-label {
    font-size  : 13px;
    color      : var(--pcc2-gray);
    line-height: 1.3;
    display    : block;
}
/* Selected checkmark badge */
.pcc2-bond-card.is-selected::after {
    content        : '✓';
    position       : absolute;
    top            : 8px;
    right          : 10px;
    color          : var(--pcc2-orange);
    font-size      : 14px;
    font-weight    : 700;
}

/* ── Input group ─────────────────────────────────────────────────────────── */
.pcc2-input-group {
    display    : flex;
    flex-direction: column;
    gap        : 8px;
}
.pcc2-label {
    font-size  : 13px;
    font-weight: 500;
    color      : var(--pcc2-gray);
    margin     : 0;
}
.pcc2-input-row {
    display  : flex;
    gap      : 0;
    position : relative;
}
.pcc2-input-prefix {
    background   : var(--pcc2-light);
    border       : 1px solid var(--pcc2-border);
    border-right : none;
    border-radius: 6px 0 0 6px;
    padding      : 0 14px;
    font-size    : 18px;
    color        : var(--pcc2-gray);
    display      : flex;
    align-items  : center;
    flex-shrink  : 0;
    font-weight  : 400;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.pcc2-wrap input[type="number"],
.pcc2-wrap input[type="text"],
.pcc2-wrap input[type="date"],
.pcc2-wrap select {
    width         : 100%;
    border        : 1px solid var(--pcc2-border);
    border-radius : 6px;
    background    : var(--pcc2-white);
    color         : var(--pcc2-blue);
    padding       : 13px 16px;
    font-family   : inherit;
    font-size     : 18px;
    transition    : border-color 0.15s ease, box-shadow 0.15s ease;
    appearance    : none;
}
/* When after prefix, left radius collapses */
.pcc2-input-row input {
    border-radius: 0 6px 6px 0;
}
.pcc2-wrap input:focus,
.pcc2-wrap select:focus {
    outline      : none;
    border-color : var(--pcc2-orange);
    box-shadow   : 0 0 0 3px rgba(255, 90, 0, 0.12);
}
.pcc2-wrap input[readonly] {
    background : var(--pcc2-light);
    color      : var(--pcc2-gray);
    cursor     : default;
}
.pcc2-wrap input[readonly]:focus {
    border-color : var(--pcc2-border);
    box-shadow   : none;
}

/* ── Hints ───────────────────────────────────────────────────────────────── */
.pcc2-hint {
    font-size  : 13px;
    color      : var(--pcc2-gray);
    line-height: 1.4;
    margin     : 0;
}
.pcc2-hint a {
    color           : var(--pcc2-blue);
    text-decoration : underline;
    text-decoration-thickness: 1px;
        font-size: 14px;
}
.pcc2-hint-min {
    font-size   : 14px;
    font-weight : 500;
    color       : var(--pcc2-blue);
}

/* ── Error ───────────────────────────────────────────────────────────────── */
.pcc2-error {
    min-height  : 1.2em;
    font-size   : 14px;
    color       : var(--pcc2-error);
    margin      : 0;
    display     : flex;
    align-items : center;
    gap         : 6px;
}
.pcc2-error:not(:empty)::before {
    content     : '⚠';
    font-size   : 14px;
    flex-shrink : 0;
}

/* ── Submit button ───────────────────────────────────────────────────────── */
.pcc2-btn {
    width          : 100%;
    border         : none;
    background     : var(--pcc2-orange);
    color          : #fff;
    padding        : 16px 32px;
    font-family    : inherit;
    font-size      : 17px;
    font-weight    : 600;
    letter-spacing : 0.04em;
    text-transform : uppercase;
    cursor         : pointer;
    border-radius  : 0;     /* PCC CI: sharp button corners */
    transition     : background 0.18s ease, transform 0.1s ease;
    margin-top     : 4px;
}
.pcc2-btn:hover,
.pcc2-btn:focus-visible {
    background : var(--pcc2-blue);
    outline    : none;
}
.pcc2-btn:active {
    transform: translateY(1px);
}

/* ── Result ──────────────────────────────────────────────────────────────── */
.pcc2-result {
    animation: pcc2-fade-up 360ms ease both;
}

/* Hero card – shows the most important number */
.pcc2-result-hero {
    background      : var(--pcc2-blue);
    border-radius   : var(--pcc2-radius);
    padding         : 28px 24px;
    text-align      : center;
    margin-bottom   : 12px;
}
.pcc2-result-hero-label {
    font-size  : 13px;
    color      : rgba(255,255,255,0.65);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.pcc2-result-hero-value {
    font-size   : clamp(36px, 6vw, 56px);
    font-weight : 300;
    color       : var(--pcc2-orange);
    line-height : 1.05;
    display     : block;
}
.pcc2-result-hero-sub {
    margin-top  : 10px;
    font-size   : 14px;
    color       : rgba(255,255,255,0.55);
}
.pcc2-result-hero-sub strong {
    color       : rgba(255,255,255,0.85);
    font-weight : 500;
}

/* Detail rows */
.pcc2-result-details {
    background    : var(--pcc2-white);
    border-radius : var(--pcc2-radius);
    box-shadow    : var(--pcc2-shadow);
    overflow      : hidden;
}
.pcc2-result-row {
    display         : flex;
    justify-content : space-between;
    align-items     : baseline;
    gap             : 16px;
    padding         : 12px 20px;
    border-bottom   : 1px solid var(--pcc2-border);
    transition      : background 0.1s ease;
}
.pcc2-result-row:last-child { border-bottom: none; }
.pcc2-result-row:hover      { background: #fafbfc; }
.pcc2-result-row span {
    font-size  : 14px;
    color      : var(--pcc2-gray);
    line-height: 1.3;
}
.pcc2-result-row strong {
    font-size   : 15px;
    font-weight : 600;
    color       : var(--pcc2-blue);
    text-align  : right;
    white-space : nowrap;
}
/* Highlight rows */
.pcc2-result-row.is-accent strong { color: var(--pcc2-orange); }

/* Stückzinsrechner formula */
.pcc2-formula {
    background    : #fff8f5;
    border-left   : 3px solid var(--pcc2-orange);
    border-radius : 0 6px 6px 0;
    padding       : 12px 16px;
    font-size     : 14px;
    color         : var(--pcc2-blue);
    margin-top    : 12px;
    animation     : pcc2-fade-up 300ms ease both;
}

/* ── Chart ───────────────────────────────────────────────────────────────── */
.pcc2-chart-card {
    background    : var(--pcc2-white);
    border-radius : var(--pcc2-radius);
    box-shadow    : var(--pcc2-shadow);
    padding       : 20px;
    margin-top    : 16px;
    animation     : pcc2-fade-up 400ms ease both;
}
.pcc2-chart-title {
    font-size   : 16px;
    font-weight : 600;
    color       : var(--pcc2-blue);
    margin      : 0 0 4px;
}
.pcc2-chart-subtitle {
    font-size  : 13px;
    color      : var(--pcc2-gray);
    margin     : 0 0 16px;
    line-height: 1.4;
}
.pcc2-chart-legend {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 16px;
    margin-bottom: 14px;
}
.pcc2-legend-item {
    display     : inline-flex;
    align-items : center;
    gap         : 7px;
    font-size   : 13px;
    color       : var(--pcc2-gray);
}
.pcc2-legend-dot {
    width         : 10px;
    height        : 10px;
    border-radius : 50%;
    flex-shrink   : 0;
}
.pcc2-dot-base { background: var(--pcc2-orange); }
.pcc2-dot-int  { background: var(--pcc2-blue); }

/* Chart scroll wrapper */
.pcc2-chart-scroll {
    overflow-x     : auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom : 4px;
    /* Subtle right fade to signal scrollability */
    mask-image     : linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.pcc2-chart-scroll.no-scroll {
    mask-image     : none;
    -webkit-mask-image: none;
}
.pcc2-chart-bars {
    display           : grid;
    grid-auto-flow    : column;
    grid-auto-columns : minmax(72px, 1fr);
    align-items       : end;
    gap               : 8px;
    min-height        : 260px;
    padding-bottom    : 8px;
    min-width         : 100%;
}
.pcc2-scroll-hint {
    font-size  : 12px;
    color      : var(--pcc2-gray);
    text-align : center;
    margin-top : 6px;
    opacity    : 0.7;
}

.pcc2-bar-item {
    display       : grid;
    gap           : 5px;
    align-content : end;
    justify-items : center;
}
.pcc2-bar {
    width         : 100%;
    min-height    : 12px;
    border-radius : 4px 4px 0 0;   /* Rounded tops – design */
    display       : flex;
    flex-direction: column-reverse;
    overflow      : hidden;
    background    : var(--pcc2-border);
}
.pcc2-bar-base {
    width      : 100%;
    background : linear-gradient(180deg, #ff8c52 0%, var(--pcc2-orange) 100%);
}
.pcc2-bar-interest {
    width      : 100%;
    background : linear-gradient(180deg, #2a5b94 0%, var(--pcc2-blue) 100%);
}
.pcc2-bar-value {
    font-size  : 11px;
    color      : var(--pcc2-blue);
    text-align : center;
    line-height: 1.2;
    white-space: nowrap;
}
.pcc2-bar-label {
    font-size  : 11px;
    color      : var(--pcc2-gray);
    text-align : center;
    line-height: 1.2;
    white-space: nowrap;
}

/* ── Reset button ────────────────────────────────────────────────────────── */
.pcc2-reset {
    display    : block;
    margin     : 20px auto 0;
    background : transparent;
    color      : var(--pcc2-blue);
    border     : 2px solid var(--pcc2-blue);
}
.pcc2-reset:hover,
.pcc2-reset:focus-visible {
    background : var(--pcc2-blue);
    color      : #fff;
}

/* ── Chart popover ───────────────────────────────────────────────────────── */
.pcc2-chart-popover {
    position       : fixed;
    z-index        : 9999;
    min-width      : 200px;
    background     : #ffffff !important;
    border-radius  : 8px;
    box-shadow     : 0 4px 24px rgba(0,48,100,0.18);
    padding        : 12px 14px;
    pointer-events : none;
    opacity        : 0;
    transform      : translateY(6px) scale(0.97);
    transition     : opacity 0.12s ease, transform 0.12s ease;
}
.pcc2-chart-popover.is-visible {
    opacity   : 1;
    transform : translateY(0) scale(1);
}
.pcc2-popover-title {
    font-size   : 12px;
    font-weight : 700;
    color       : var(--pcc2-blue);
    margin      : 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pcc2-popover-row {
    display         : flex;
    justify-content : space-between;
    gap             : 12px;
    font-size       : 13px;
    line-height     : 1.3;
    color           : var(--pcc2-gray);
    margin          : 3px 0;
}
.pcc2-popover-row strong {
    color       : var(--pcc2-blue);
    font-weight : 600;
    white-space : nowrap;
}

/* ── Contact section ─────────────────────────────────────────────────────── */
.pcc2-wrap [hidden] { display: none !important; }

.pcc2-contact-wrap {
    margin-top : 24px;
    display    : grid;
    gap        : 16px;
    grid-template-columns: 1fr 1fr;
    animation  : pcc2-fade-up 500ms 200ms ease both;
}
.pcc2-contact-card {
    background    : var(--pcc2-white);
    border-radius : var(--pcc2-radius);
    box-shadow    : var(--pcc2-shadow);
    padding       : 22px;
}
.pcc2-contact-title {
    font-size   : 20px;
    font-weight : 400;
    color       : var(--pcc2-orange);
    margin      : 0 0 8px;
    line-height : 1.2;
}
.pcc2-contact-card p {
    font-size   : 14px;
    color       : var(--pcc2-gray);
    line-height : 1.5;
    margin      : 0 0 14px;
}
.pcc2-contact-list {
    list-style : none;
    margin     : 0;
    padding    : 0;
    display    : grid;
    gap        : 8px;
    font-size  : 14px;
}
.pcc2-contact-list li {
    padding     : 9px 12px;
    background  : var(--pcc2-light);
    border-radius: 5px;
    color       : var(--pcc2-blue);
    line-height : 1.4;
}
.pcc2-wrap .pcc2-contact-list a,
.pcc2-wrap .pcc2-link {
    color                    : var(--pcc2-blue) !important;
    text-decoration          : underline !important;
    text-decoration-thickness: 1px !important;
    background               : none !important;
    padding                  : 0 !important;
    border                   : none !important;
    font-weight              : inherit !important;
    box-shadow               : none !important;
    font-size: 14px;
}
.pcc2-wrap .pcc2-contact-list a:hover,
.pcc2-wrap .pcc2-link:hover { color: var(--pcc2-orange) !important; }

.pcc2-request-form {
    display : grid;
    gap     : 10px;
}
.pcc2-request-form label {
    font-size : 13px;
    color     : var(--pcc2-gray);
}
.pcc2-btn-link {
    display        : block;
    text-align     : center;
    background     : var(--pcc2-orange);
    color          : #fff;
    padding        : 12px 24px;
    font-family    : inherit;
    font-size      : 15px;
    font-weight    : 600;
    letter-spacing : 0.04em;
    text-transform : uppercase;
    text-decoration: none;
    border-radius  : 0;   /* PCC CI: sharp */
    transition     : background 0.18s ease;
}
.pcc2-btn-link:hover,
.pcc2-btn-link:focus-visible {
    background : var(--pcc2-blue);
    color      : #fff;
    outline    : none;
}

/* ── Date display (maturity read-only) ───────────────────────────────────── */
.pcc2-date-display {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    padding      : 13px 16px;
    background   : var(--pcc2-light);
    border       : 1px solid var(--pcc2-border);
    border-radius: 6px;
    font-size    : 16px;
    color        : var(--pcc2-gray);
}
.pcc2-date-display strong {
    color       : var(--pcc2-blue);
    font-weight : 600;
}

/* ── Animation ───────────────────────────────────────────────────────────── */
@keyframes pcc2-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive – Mobile first ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .pcc2-wrap {
        padding: 20px 14px 40px;
    }
    .pcc2-card {
        padding: 18px;
    }
    /* Bond cards: 2-column grid retained even on mobile for rate cards */
    .pcc2-bond-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Only stack if 3+ bonds */
    .pcc2-bond-grid:has(.pcc2-bond-card:nth-child(3)) {
        grid-template-columns: 1fr;
    }
    .pcc2-btn {
        padding: 15px 24px;
        font-size: 16px;
    }
    .pcc2-result-hero { padding: 22px 18px; }
    .pcc2-result-hero-value { font-size: clamp(32px, 9vw, 44px); }
    .pcc2-contact-wrap { grid-template-columns: 1fr; }
    .pcc2-result-row { flex-direction: column; gap: 2px; }
    .pcc2-result-row strong { text-align: left; }
    .pcc2-chart-bars {
        grid-auto-columns: minmax(64px, 1fr);
        min-height: 220px;
    }
}

@media (max-width: 380px) {
    .pcc2-bond-grid { grid-template-columns: 1fr; }
    .pcc2-bond-card-rate { font-size: 28px; }
}

/* ── High-contrast / reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pcc2-card,
    .pcc2-header,
    .pcc2-result,
    .pcc2-chart-card,
    .pcc2-contact-wrap { animation: none; }
    .pcc2-btn,
    .pcc2-bond-card,
    .pcc2-wrap input,
    .pcc2-chart-popover { transition: none; }
}