/*
BY's price list (resources/views/by/article/pricelist.blade.php), after the price list of yachtino.com
(public/css/landing.css there, part "Pricing page"): the same tiles, tables and calculator in BY's colour
(--brand-primary) and fonts. Every class starts with pl- so nothing collides with Bootstrap (.card, .table ...).
The teal of the top hit tiles is yachtino.com's second colour, kept on purpose to set them apart from the prices.
*/

.pl-page {
    --pl-ink: var(--by-dark);
    --pl-muted: var(--by-muted);
    --pl-line: #e3e8ee;
    --pl-alt: var(--by-surface);
    --pl-accent: var(--brand-primary);
    --pl-accent-dark: var(--brand-primary-hover);
    --pl-tint: var(--by-tint);
    --pl-teal: #0f8a8a;
    --pl-radius: 14px;
    --pl-shadow: 0 8px 30px rgba(25, 31, 51, .10);
    --pl-shadow-hover: 0 16px 44px rgba(25, 31, 51, .18);
    --pl-tile-bg: linear-gradient(180deg, #fafcfe 0%, #eef2f7 100%);
    color: var(--pl-ink);
}

/* The bold figures and labels in BY's heading font: Nunito (the text) is loaded in 400 and 600 only, Nunito Sans up
to 700, which comes closest to the heavy figures of yachtino.com. */
.pl-opt,
.pl-save,
.pl-card-range,
.pl-card-badge,
.pl-card-amount,
.pl-tile-label,
.pl-tile-badge,
.pl-tile-amount,
.pl-tophit-area,
.pl-tophit-price,
.pl-price,
.pl-option-price,
.pl-total,
.pl-private-subtitle,
.pl-info-title {
    font-family: 'Nunito Sans', sans-serif;
}

/* Anchors of the subtitle's links: the html's scroll-padding of site.css already keeps them clear of the fixed header,
so the dealer and charter blocks need nothing of their own (a margin here came on top of it). The private customers'
anchor is the whole section: the negative margin takes back its top padding, so its heading lands as high as the
other two (Carsten, 2026-11-02). */
#privatkunden {
    scroll-margin-top: -64px;
}

/* ---------- Hero ---------- */
.pl-hero {
    padding: 56px 0;
    background: linear-gradient(160deg, var(--pl-accent) 0%, #145f87 100%);
    color: #fff;
}

.pl-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
}

.pl-hero-sub {
    font-size: 1.2rem;
    margin: 0;
    color: #e6f4fb;
}

.pl-hero-sub a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pl-hero-sub a:hover {
    text-decoration: none;
}

/* ---------- Sections ---------- */
.pl-section {
    padding: 64px 0;
}

.pl-section--alt {
    background: var(--pl-alt);
}

.pl-head {
    margin-bottom: 34px;
}

.pl-title {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--pl-ink);
}

.pl-lead {
    margin: 0;
    color: var(--pl-muted);
    font-size: 1.05rem;
}

/* A lead in several paragraphs (the private sellers' intro). */
.pl-lead + .pl-lead {
    margin-top: .6rem;
}

.pl-note {
    color: var(--pl-muted);
    font-size: .9rem;
    margin: 12px 0 0;
}

.pl-note--muted {
    font-style: italic;
    margin-top: 24px;
}

.pl-link {
    color: var(--pl-accent);
    font-weight: 600;
    text-decoration: none;
}

.pl-link:hover {
    text-decoration: underline;
}

/* ---------- Billing switch ---------- */
.pl-pricing + .pl-pricing {
    margin-top: 48px;
}

.pl-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    margin-bottom: 30px;
    background: var(--pl-alt);
    border: 1px solid var(--pl-line);
    border-radius: 999px;
}

.pl-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: .98rem;
    color: var(--pl-ink);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.pl-opt.is-active {
    background: var(--pl-accent);
    color: #fff;
    box-shadow: var(--pl-shadow);
}

.pl-save {
    font-size: .76rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pl-tint);
    color: var(--pl-accent-dark);
    white-space: nowrap;
}

/* ---------- Tiles of dealers and charter ---------- */
/* A fixed number of tiles per row, as on yachtino.com: five on a desktop (Bootstrap's container is wider than
yachtino.com's page from 1400px on, where "as many as fit" made it six), over the whole width like the four top hits
below. Fewer on narrower screens, where five would squeeze "1.458,00 €". */
.pl-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 18px;
}

@media (min-width: 576px) {
    .pl-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .pl-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .pl-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .pl-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.pl-card,
.pl-tile,
.pl-tophit {
    display: block;
    border: 1px solid var(--pl-line);
    border-top: 3px solid var(--pl-accent);
    border-radius: var(--pl-radius);
    padding: 22px 20px;
    background: var(--pl-tile-bg);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

a.pl-card:hover,
a.pl-tile:hover,
.pl-tophit:hover {
    transform: translateY(-3px);
    box-shadow: var(--pl-shadow);
    background: #fff;
    color: inherit;
}

.pl-card--request {
    border-top-color: #9bb3c9;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pl-card-range {
    font-size: 1.15rem;
    font-weight: 700;
}

.pl-card-boats {
    font-size: .78rem;
    color: var(--pl-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}

.pl-card-badge,
.pl-tile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    margin: 0 0 12px;
    padding: 0 10px;
    font-size: .78rem;
    font-weight: 700;
    border-radius: 999px;
    background: var(--pl-tint);
    color: var(--pl-accent-dark);
}

.pl-card-was,
.pl-tile-was {
    font-size: .85rem;
    line-height: 1.5;
    min-height: 1.5em;
    color: var(--pl-muted);
    text-decoration: line-through;
}

.pl-card-was--note {
    text-decoration: none;
}

.pl-card-amount {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pl-accent);
}

.pl-card-amount--request {
    font-size: 1.15rem;
    color: var(--pl-ink);
    padding: 10px 0;
}

.pl-card-unit,
.pl-tophit-unit {
    font-size: .9rem;
    color: var(--pl-muted);
}

.pl-card-permonth,
.pl-tile-permonth {
    font-size: .85rem;
    line-height: 1.5;
    min-height: 1.5em;
    margin-top: 4px;
    color: var(--pl-muted);
}

/* "zur Anmeldung": shown under the mouse; always on a touch screen, which has no mouse over a tile. */
.pl-card-cta,
.pl-tile-cta {
    display: block;
    margin-top: 14px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--pl-accent);
    opacity: 0;
    transition: opacity .15s ease;
}

.pl-card:hover .pl-card-cta,
.pl-card:focus-visible .pl-card-cta,
.pl-tile:hover .pl-tile-cta,
.pl-tile:focus-visible .pl-tile-cta {
    opacity: 1;
}

@media (hover: none) {
    .pl-card-cta,
    .pl-tile-cta {
        opacity: 1;
    }
}

/* ---------- Top hits of a charter boat ---------- */
.pl-tophits {
    margin-top: 40px;
}

.pl-tophits-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.pl-tophits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.pl-tophit {
    border-top-color: var(--pl-teal);
}

.pl-tophit-area {
    font-size: 1.2rem;
    font-weight: 700;
}

.pl-tophit-examples {
    font-size: .85rem;
    line-height: 1.5;
    min-height: 3em;
    margin: 4px 0 14px;
    color: var(--pl-muted);
}

.pl-tophit-price {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pl-teal);
}

/* ---------- Included in the price ---------- */
.pl-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px 28px;
}

.pl-features li {
    position: relative;
    padding-left: 26px;
}

/* A tick drawn with two borders, in the accent colour. */
.pl-features li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid var(--pl-accent);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* ---------- Tables of the extras: Boote-Yachten.de's price beside each line ---------- */
.pl-block-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 14px;
}

.pl-block-intro {
    font-size: 1.05rem;
    margin: 0 0 12px;
}

/* No head row (one price column, the page is BY's): the line on top stands where the head's line was. */
.pl-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--pl-line);
    font-size: .98rem;
}

.pl-table td,
.pl-table th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--pl-line);
    vertical-align: top;
    overflow-wrap: break-word;
}

.pl-table tr:last-child td,
.pl-table tr:last-child th {
    border-bottom: 0;
}

.pl-table tr:hover td,
.pl-table tr:hover th {
    background: var(--pl-alt);
}

.pl-section--alt .pl-table tr:hover td,
.pl-section--alt .pl-table tr:hover th {
    background: #fff;
}

.pl-feature {
    position: relative;
    text-align: left;
}

/* The row header (th, for screen readers) must look like the plain cell it was: the browser makes a th bold. */
th.pl-feature {
    font-weight: inherit;
}

.pl-price {
    width: 172px;
    text-align: right;
    font-weight: 700;
    color: var(--pl-accent);
    white-space: nowrap;
}

/* Rows with figures (followers, newsletter recipients) instead of prices. */
.pl-row-info td,
.pl-row-info th,
.pl-row-info:hover td,
.pl-row-info:hover th {
    background: var(--pl-alt);
    border-top: 2px solid var(--pl-line);
}

.pl-section--alt .pl-row-info td,
.pl-section--alt .pl-row-info th,
.pl-section--alt .pl-row-info:hover td,
.pl-section--alt .pl-row-info:hover th {
    background: #fff;
}

.pl-row-info .pl-feature {
    font-weight: 700;
}

.pl-row-info .pl-price,
.pl-row-info .pl-price a {
    color: var(--pl-ink);
    font-weight: 400;
}

/* A phone: the price column only as wide as its price, so the text keeps most of the line. */
@media (max-width: 575.98px) {
    .pl-table td,
    .pl-table th {
        padding: 10px 6px;
    }

    .pl-price {
        width: auto;
    }
}

/* ---------- Private sellers ---------- */
.pl-private-subtitle {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.pl-options {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    max-width: 560px;
}

.pl-option {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pl-line);
}

.pl-option-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pl-option-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.pl-option-label input {
    flex: none;
    width: 18px;
    height: 18px;
    accent-color: var(--pl-accent);
    cursor: pointer;
}

.pl-option-label input:disabled {
    cursor: default;
}

.pl-option-price {
    font-weight: 700;
    color: var(--pl-accent);
    white-space: nowrap;
}

.pl-total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    max-width: 560px;
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
}

.pl-total-value {
    color: var(--pl-accent);
}

.pl-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    grid-auto-rows: 1fr;
    gap: 18px;
    max-width: 760px;
    margin-top: 24px;
}

.pl-tile-label {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.pl-tile-badge {
    margin-bottom: 10px;
}

.pl-tile-amount {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pl-accent);
}

/* ---------- Info button and its window ---------- */
.pl-info-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    padding: 0;
    vertical-align: middle;
    border: 1.5px solid var(--pl-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--pl-accent);
    font: 700 12px/1 Georgia, "Times New Roman", serif;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.pl-info-btn:hover,
.pl-info-btn[aria-expanded="true"] {
    background: var(--pl-accent);
    color: #fff;
}

.pl-info-btn:focus-visible {
    outline: 2px solid var(--pl-ink);
    outline-offset: 2px;
}

.pl-info-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 300px;
    max-width: calc(100vw - 48px);
    max-height: min(70vh, 460px);
    overflow-y: auto;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 12px;
    box-shadow: var(--pl-shadow-hover);
    font-weight: 400;
    text-align: left;
}

.pl-info-pop[hidden] {
    display: none;
}

.pl-info-pop--wide {
    width: min(600px, calc(100vw - 48px));
    max-height: min(80vh, 520px);
}

.pl-info-title {
    font-weight: 700;
    font-size: .98rem;
}

.pl-info-shot {
    display: block;
    margin: 0 0 10px;
    border: 1px solid var(--pl-line);
    border-radius: 8px;
    overflow: hidden;
}

.pl-info-shot img,
.pl-info-cover img {
    display: block;
    width: 100%;
    height: auto;
}

.pl-info-cover {
    display: block;
    width: 150px;
    margin: 0 auto 10px;
    border: 1px solid var(--pl-line);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--pl-shadow);
}

.pl-info-text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
}

.pl-info-text + .pl-info-text {
    margin-top: 9px;
}

.pl-info-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--pl-line);
    font-size: .82rem;
}

.pl-info-list li {
    margin: 0 0 5px;
}

@media (max-width: 575.98px) {
    .pl-toggle {
        display: flex;
        border-radius: 24px;
    }

    .pl-opt {
        flex: 1;
        justify-content: center;
    }
}