/* Bildbearbeitung: before/after comparison, calculator and page sections. */
.picline-lead { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.2; }
.picline-edit-intro { align-items: start; }

/* ---------- Before/after ---------- */
.picline-compare { position: relative; display: grid; max-width: 1100px; margin-inline: 0; border-radius: 16px; overflow: hidden; background: #02084a; }
.picline-compare > .picline-compare-before,
.picline-compare > .picline-compare-after { grid-area: 1 / 1; position: relative; margin: 0; min-width: 0; }
.picline-compare .wp-block-image { margin: 0; }
.picline-compare img { display: block; width: 100%; height: auto; border-radius: 0; }
/* Placeholder surface until the real image pair is inserted. */
.picline-compare .picline-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; margin: 0; border-radius: 0; text-align: center; }
.picline-compare-after .picline-placeholder { background: #fff; }
/* Each placeholder label sits on its own half so both stay readable around the handle. */
.picline-compare-before .picline-placeholder { justify-content: flex-start; padding-left: 1.5rem; text-align: left; }
.picline-compare-after .picline-placeholder { justify-content: flex-end; padding-right: 1.5rem; text-align: right; }
.picline-compare-before::before, .picline-compare-after::before {
    position: absolute; z-index: 2; top: 1rem; padding: .25rem .75rem; border-radius: 999px;
    background: #02084a; color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: .03em;
}
.picline-compare-before::before { content: "Vorher"; left: 1rem; }
.picline-compare-after::before { content: "Nachher"; right: 1rem; background: #F7E229; color: #02084a; }
.picline-compare.is-ready > .picline-compare-after { clip-path: inset(0 0 0 var(--picline-compare, 50%)); }
.picline-compare-handle {
    position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--picline-compare, 50%);
    width: 3px; margin-left: -1.5px; background: #F7E229; pointer-events: none;
}
.picline-compare-handle::after {
    content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: #F7E229; color: #02084a; font-weight: 800; font-size: 1.25rem; letter-spacing: .1em;
    box-shadow: 0 4px 14px rgb(2 8 74 / 35%);
}
.picline-compare-range {
    position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.picline-compare:has(.picline-compare-range:focus-visible) .picline-compare-handle::after { outline: 3px solid #fff; outline-offset: 3px; }
/* Without JavaScript both images stay visible one below the other. */
.picline-compare:not(.is-ready) { grid-template-rows: auto auto; gap: .5rem; background: none; }
.picline-compare:not(.is-ready) > .picline-compare-after { grid-area: auto; }

/* ---------- Checklist of edits ---------- */
.picline-edit-list { columns: 2 280px; column-gap: 3rem; padding-left: 0; list-style: none; }
.picline-edit-list li { break-inside: avoid; position: relative; padding: .5rem 0 .5rem 2rem; }
.picline-edit-list li::before { content: ""; position: absolute; left: 0; top: .95em; width: 1rem; height: .5rem; border-left: 3px solid #F7E229; border-bottom: 3px solid #F7E229; transform: translateY(-50%) rotate(-45deg); }

/* ---------- Calculator and order form (Picline CI: navy #02084a, yellow #F7E229) ---------- */
.picline-bb { --bb-line: #dde0ea; --bb-soft: #f4f5f9; --bb-muted: #5d6177; --bb-err: #b3261e; --bb-ok: #1f6e41; color: #02084a; }
.picline-bb *, .picline-bb *::before, .picline-bb *::after { box-sizing: border-box; }
.picline-bb h3, .picline-bb h4 { margin: 0 0 .75rem; line-height: 1.25; color: #02084a; }
.picline-bb h3 { font-size: clamp(1.375rem, 1rem + .6vw, 1.75rem); }
.picline-bb h4, .picline-bb legend { font-size: 1.125rem; font-weight: 700; }
.picline-bb-hinweis { margin: 0 0 1.25rem; padding: .75rem 1rem; border: 2px dashed #02084a; border-radius: 8px; background: #F7E229; font-weight: 700; }
.picline-bb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 2rem; align-items: start; }
.picline-bb-box { margin: 0 0 1.25rem; padding: 1.5rem; border: 1px solid var(--bb-line); border-radius: 14px; background: #fff; }
.picline-bb-intro { margin: 0 0 1rem; color: var(--bb-muted); }
/* Category tabs */
.picline-bb-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1.25rem; }
.picline-bb-tab {
    padding: .75rem .5rem; border: 2px solid #02084a; border-radius: 10px; background: #fff; color: #02084a;
    font: inherit; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer;
}
.picline-bb-tab:hover { background: var(--bb-soft); }
.picline-bb-tab[aria-selected="true"] { background: #02084a; color: #fff; }
/* Quantity */
.picline-bb-qty { display: flex; align-items: center; gap: .5rem; }
.picline-bb-qty button {
    width: 48px; height: 48px; border: 1px solid var(--bb-line); border-radius: 10px; background: var(--bb-soft);
    color: #02084a; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.picline-bb-qty button:hover { background: #F7E229; }
.picline-bb-qty input { width: 120px; height: 48px; border: 1px solid var(--bb-line); border-radius: 10px; text-align: center; font: inherit; font-size: 1.2rem; font-weight: 700; color: #02084a; -moz-appearance: textfield; }
.picline-bb-qty input::-webkit-outer-spin-button, .picline-bb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.picline-bb-vol { margin: .5rem 0 0; }
/* Options */
.picline-bb-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--bb-line); }
.picline-bb-row:first-child, .picline-bb-sub + .picline-bb-row { border-top: 0; }
.picline-bb-row > input { flex: 0 0 auto; width: 20px; height: 20px; margin: .2em 0 0; accent-color: #02084a; }
.picline-bb-row > label { flex: 1 1 0; min-width: 0; cursor: pointer; }
.picline-bb-row small { display: block; color: var(--bb-muted); font-size: .9rem; }
.picline-bb-price { font-weight: 700; white-space: nowrap; }
.picline-bb-incl { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; background: #F7E229; font-size: .8rem; font-weight: 700; vertical-align: .1em; }
.picline-bb-sub { margin: 1.25rem 0 .25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--bb-line); font-weight: 700; }
.picline-bb-extraqty { display: none; flex-basis: 100%; align-items: center; gap: .5rem; margin-left: 2rem; }
.picline-bb-extraqty.on { display: flex; }
.picline-bb-extraqty input { width: 80px; height: 40px; border: 1px solid var(--bb-line); border-radius: 8px; text-align: center; font: inherit; }
/* Per-option image count: "Für wie viele Bilder? [−][5][+] von 50" */
.picline-bb-optqty { flex-wrap: wrap; gap: .5rem .75rem; padding: .5rem .75rem; border-radius: 10px; background: var(--bb-soft); font-size: .95rem; }
.picline-bb-optqty > label { font-weight: 700; }
.picline-bb-stepper { display: inline-flex; align-items: center; gap: .25rem; }
.picline-bb-stepper button {
    width: 36px; height: 36px; border: 1px solid var(--bb-line); border-radius: 8px; background: #fff;
    color: #02084a; font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.picline-bb-stepper button:hover { background: #F7E229; }
.picline-bb-stepper input { width: 72px; height: 36px; -moz-appearance: textfield; }
.picline-bb-stepper input::-webkit-outer-spin-button, .picline-bb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.picline-bb-von { color: var(--bb-muted); }
.picline-bb-note { margin-top: 1rem; padding: .75rem 1rem; border-left: 4px solid #F7E229; border-radius: 6px; background: var(--bb-soft); color: var(--bb-muted); }
/* Delivery */
.picline-bb-lieferung { min-width: 0; }
.picline-bb-lieferung legend { float: left; width: 100%; margin: 0 0 .75rem; padding: 0; }
.picline-bb-lieferung-hinweis { clear: both; margin: 1rem 0 0; }
.picline-rechner-lieferzeiten { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
@media (min-width: 1700px) { .picline-rechner-lieferzeiten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .picline-rechner-lieferzeiten { grid-template-columns: minmax(0, 1fr); } }
.picline-rechner-lieferzeit { display: flex; align-items: flex-start; gap: .875rem; line-height: 1.45; cursor: pointer; }
.picline-rechner-lieferzeit input {
    flex: 0 0 auto; width: 34px; height: 34px; margin: 0; border: 1px solid #c5c8d6; border-radius: 50%;
    background: #fff; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.picline-rechner-lieferzeit input:checked { border: 10px solid #02084a; }
.picline-rechner-lieferzeit:has(input:focus-visible) { outline: 3px solid #F7E229; outline-offset: 4px; border-radius: 4px; }
/* Summary */
.picline-bb-sum { position: sticky; top: 1.5rem; padding: 1.5rem; border-radius: 16px; background: #02084a; color: #fff; }
.picline-bb-sum h4 { color: #fff; }
.picline-bb-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: 1rem; }
.picline-bb-kpi div { padding: .625rem .75rem; border-radius: 10px; background: rgb(255 255 255 / 8%); }
.picline-bb-kpi small { display: block; font-size: .8rem; opacity: .75; }
.picline-bb-kpi b { font-size: 1.25rem; }
.picline-bb-lines { width: 100%; border-collapse: collapse; font-size: .95rem; }
.picline-bb-lines td { padding: .3rem 0; vertical-align: top; border: 0; }
.picline-bb-lines td:last-child { padding-left: .75rem; text-align: right; white-space: nowrap; }
.picline-bb-lines tr.sep td { padding-top: .6rem; border-top: 1px solid rgb(255 255 255 / 25%); }
.picline-bb-total { margin-top: .875rem; padding-top: .875rem; border-top: 2px solid #F7E229; }
.picline-bb-total small { opacity: .85; }
.picline-bb-total div { font-size: clamp(1.875rem, 1.4rem + 1vw, 2.5rem); font-weight: 700; line-height: 1.1; color: #F7E229; }
.picline-bb-pay { margin: .875rem 0 0; font-size: .9rem; opacity: .9; }
.picline-bb-cta { display: block; width: 100%; margin-top: 1rem; padding: .875rem; border: 0; border-radius: 4px; background: #F7E229; color: #02084a; font: inherit; font-weight: 700; cursor: pointer; }
.picline-bb-cta:hover { filter: brightness(.95); }
/* Form */
.picline-bb-form { scroll-margin-top: 1.5rem; }
.picline-bb-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.picline-bb-f { display: block; margin-bottom: 1rem; font-weight: 700; }
.picline-bb-f span, .picline-bb-req { color: var(--bb-err); }
.picline-bb-f input, .picline-bb-f textarea {
    display: block; width: 100%; margin-top: .375rem; padding: .7rem .75rem; border: 1px solid #b9bdcc; border-radius: 10px;
    background: #fff; color: #02084a; font: inherit; font-weight: 400;
}
.picline-bb-f textarea { min-height: 96px; resize: vertical; }
.picline-bb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.picline-bb-check { display: flex; align-items: flex-start; gap: .625rem; margin: .5rem 0 1rem; }
.picline-bb-check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .2em; accent-color: #02084a; }
.picline-bb-send { padding: .875rem 1.75rem; border: 0; border-radius: 4px; background: #02084a; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.picline-bb-send:hover { background: #F7E229; color: #02084a; }
.picline-bb-send[disabled] { opacity: .6; cursor: wait; }
.picline-bb-msg { display: none; margin-top: 1rem; padding: .75rem 1rem; border-radius: 8px; font-weight: 700; }
.picline-bb-msg.ok { display: block; background: #e7f5ec; color: var(--bb-ok); }
.picline-bb-msg.err { display: block; background: #fbeaea; color: var(--bb-err); }
.picline-bb button:focus-visible, .picline-bb input:focus-visible, .picline-bb textarea:focus-visible, .picline-bb a:focus-visible { outline: 3px solid #F7E229; outline-offset: 2px; }
.picline-bb-row:has(input:focus-visible) { outline: 3px solid #F7E229; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 900px) {
    .picline-bb-grid { grid-template-columns: minmax(0, 1fr); }
    .picline-bb-sum { position: static; margin-bottom: 1.25rem; }
}
@media (max-width: 600px) {
    .picline-bb-tabs { grid-template-columns: 1fr 1fr; }
    .picline-bb-f2 { grid-template-columns: minmax(0, 1fr); }
    .picline-bb-box { padding: 1.125rem; }
    .picline-bb-row > .picline-bb-price { flex-basis: 100%; margin-left: 2rem; }
}

/* ---------- Vorher und nachher, Galerie (Seite 85, 29.09.2026, Andreas Auftrag) ----------
   Section #vorher-nachher: four comparisons, 2 × 2 on wide screens, 1 column below 900 px. Each item =
   .picline-compare (slider from bildbearbeitung.js) + caption with yellow line. The images keep their own ratio
   (never cropped); vorher and nachher of one pair must have the same size. Until they come, grey placeholders
   [BILD FOLGT: …] at 3:2 with the text in the lower corners, so the handle and the labels never cover it. */
.picline-bb-vergleiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: calc(24px + .8em); }
/* WordPress adds a block gap margin to every item except the first; the grid gap does the spacing (29.09.2026). */
.picline-bb-vergleiche > .picline-bb-vergleich { margin-block-start: 0; }
.picline-bb-vergleich { display: flex; flex-direction: column; min-width: 0; }
.picline-bb-vergleiche .picline-compare { width: 100%; max-width: none; box-shadow: 0 10px 30px rgb(2 8 74 / 10%); }
.picline-compare .picline-bb-vergleich-bild { aspect-ratio: 3 / 2; align-items: flex-end; margin: 0; padding: 1.25rem; border-radius: 0; font-size: .95rem; }
.picline-compare-before .picline-bb-vergleich-bild { justify-content: flex-start; padding-right: 54%; background: #c9cedb; text-align: left !important; }
.picline-compare-after .picline-bb-vergleich-bild { justify-content: flex-end; padding-left: 54%; background: #fff; text-align: right !important; }
.picline-bb-vergleich-text { margin: 1rem 0 0; padding-top: .75rem; border-top: 3px solid #F7E229; line-height: 1.5; }
.picline-bb-vergleich-text strong { font-size: 1.125rem; }
#vorher-nachher .picline-inner > .section-intro { max-width: 70ch; }
@media (max-width: 900px) { .picline-bb-vergleiche { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .picline-compare .picline-bb-vergleich-bild { padding-top: .9rem; padding-bottom: .9rem; font-size: .8rem; } .picline-compare-before .picline-bb-vergleich-bild { padding-left: .9rem; } .picline-compare-after .picline-bb-vergleich-bild { padding-right: .9rem; } }

/* ---------- «i» explanations and field help (30.09.2026, Andrea's brief) ----------
   Technical terms in the calculator (HDR, Objekte entfernen, Tag zu Dämmerung, Virtuelles Staging, 2D-Grundriss) get
   an «i» next to the label (same look as the «i» in the other configurators); the explanation opens as a box right
   under the row, so it never covers other rows or the fixed parts on phones. */
.picline-bb-info {
    position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -.1em; padding: 0;
    border: 2px solid #02084a; border-radius: 50%; background: #fff; color: #02084a;
    font: inherit; font-size: .85rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s;
}
.picline-bb-info::before { content: ""; position: absolute; inset: -8px; }
.picline-bb-info:hover, .picline-bb-info[aria-expanded="true"] { background: #02084a; color: #F7E229; }
.picline-bb-pop {
    position: relative; flex-basis: 100%; margin: .25rem 0 .25rem 2rem; padding: .8rem 2.6rem .85rem 1rem;
    border: 1px solid #E3E6F2; border-left: 4px solid #F7E229; border-radius: 10px; background: #fff; color: #02084a;
    box-shadow: 0 10px 26px rgb(2 8 74 / 10%); font-size: .95rem; line-height: 1.5;
}
.picline-bb-pop[hidden] { display: none; }
.picline-bb-pop p { margin: 0; }
.picline-bb-pop-x { position: absolute; top: .3rem; right: .3rem; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: #02084a; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.picline-bb-pop-x:hover { background: #eef1fa; }
@media (min-width: 1024px) { .picline-bb-pop { font-size: calc(15px / .9); } }
@media (max-width: 600px) { .picline-bb-pop { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .picline-bb-info { transition: none; } }
/* Help under the link field: normal weight, muted, not red like the star. */
.picline-bb-f .picline-bb-f-hilfe { display: block; margin-top: .4rem; color: var(--bb-muted); font-size: .9rem; font-weight: 400; line-height: 1.45; }
/* The second hero button «Vorher & Nachher ansehen» only shows while the comparison section is on the page (it is
   switched off until Andrea's own before/after pairs exist). functions.php does not send buttons to switched-off
   sections at all; this rule is only a fallback. */
body:not(:has(#vorher-nachher)) .picline-nur-mit-vergleich { display: none; }

/* ---------- 03.10.2026 (check before going live) ----------
   Payment note in the dark blue summary: webdesign.css colours paragraphs in .picline-lp dark blue, the note was
   dark blue on dark blue. */
.picline-bb .picline-bb-sum .picline-bb-pay { color: #fff !important; }
/* Tabs: no word breaks in the middle («Veranstaltung/en»). Every column is at least as wide as the longest word
   («Veranstaltungen», about 9em with the padding); if four do not fit, the grid takes three, two or one column. */
.picline-bb .picline-bb-tabs { grid-template-columns: repeat(auto-fit, minmax(min(9.75em, 100%), 1fr)); }
.picline-bb-tab { overflow-wrap: normal; word-break: normal; hyphens: manual; }