/* Spezialfunktionen (29.09.2026, Andrea's brief). Loaded only on pages with [picline_sf_vorschau],
   [picline_wohnungsfinder] or [picline_breadcrumb] (inc/spezialfunktionen.php): Webdesign (50) and its three
   subpages. Colours exactly #02084a and #F7E229, font of the website. Texts at least 16 px visible
   (16 / .9 px from 1024 px because of the 90 % view). */
.picline-wd-spezial, .picline-sf-start, .picline-wf, .picline-sf-preview { --sf-blau: #02084a; --sf-gelb: #F7E229; --sf-text: #3a3f63; --sf-linie: #dfe2ef; --sf-frei: #5f9b6c; }

/* ---------- Breadcrumb in the hero of the subpages ---------- */
.picline-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.4; }
.picline-breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: rgb(255 255 255 / 85%); }
.picline-breadcrumb li + li::before { content: "›"; color: #F7E229; font-weight: 700; }
.picline-breadcrumb a { color: #fff; text-decoration: underline; text-decoration-color: rgb(247 226 41 / 70%); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-breadcrumb a:is(:hover, :focus-visible) { color: #F7E229; }
.picline-wd-hero-copy > .picline-breadcrumb + h1 { margin-top: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 1024px) { .picline-breadcrumb ol { font-size: calc(16px / .9); } }

/* ---------- Section «Was kann Deine Website zusätzlich?» on Webdesign ---------- */
.picline-wd-spezial .picline-inner > .picline-eyebrow { display: block; width: fit-content; margin: 0 0 1rem; padding-bottom: 4px; border-bottom: 3px solid var(--sf-gelb); color: var(--sf-blau); opacity: 1; letter-spacing: .08em; }
.picline-wd-spezial .picline-inner > h2 { margin-top: 0; }
.picline-wd-spezial .picline-inner > .section-intro { max-width: 44em; margin-bottom: 40px; }
/* Fine line only when the next section is white as well (since 29.09.2026 the sections alternate). */
.picline-section.picline-wd-spezial.has-white-background-color + .picline-section.has-white-background-color { border-top: 1px solid rgb(2 8 74 / 14%); }

/* ---------- Front page #webdesign «Was kann Deine Website für Dich erledigen?» (30.09.2026, Andrea's brief) ----------
   Same cards and SVG previews as Webdesign #zusatzfunktionen, own class picline-sf-start (a class starting with
   «picline-wd-» would load webdesign.css and webdesign.js on the front page). White with a fine line above, the
   cards with a visible border and a soft shadow on white, no idea box; below the cards a yellow button and a text
   link. Build script and backup: backups/start-webdesign-20260930-030341/. */
/* Kicker since 02.10.2026 exactly like the other front page sections (small capitals, before 1rem in mixed case). */
.picline-sf-start .picline-inner > .picline-eyebrow { display: block; width: fit-content; max-width: 100%; margin: 0 0 18px; padding-bottom: 4px; border-bottom: 3px solid var(--sf-gelb); color: var(--sf-blau); opacity: 1; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.picline-sf-start .picline-inner > h2 { margin-top: 0; }
.picline-sf-start .picline-inner > .section-intro { max-width: 44em; margin-bottom: 40px; }
.picline-section.has-white-background-color + .picline-section.picline-sf-start.has-white-background-color { border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-sf-start .picline-sf-grid > .picline-sf-card { border-color: #d9ddec; box-shadow: 0 8px 24px rgb(2 8 74 / 7%); }
.picline-sf-start .picline-sf-grid > .picline-sf-card:hover { box-shadow: 0 18px 40px rgb(2 8 74 / 12%); }
.picline-sf-start .picline-inner > .picline-sf-start-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 36px; }
.picline-sf-start-aktionen > * { margin: 0; }
/* Previews as SVG images (Webdesign 50 since 29.09.2026, assets/vorschau/*.svg, built by
   backups/webdesign-neubau-20260929-214609/svg-bauen.php): the example texts are not page content. */
.picline-sf-card > .picline-sf-vorschau-bild { margin: 0; border-bottom: 1px solid var(--sf-linie); background: #f6f7fc; }
.picline-sf-vorschau-bild img { display: block; width: 100%; height: auto; aspect-ratio: 380 / 250; }
/* Four cards since 03.10.2026 (Garagen added): 2 × 2 on computer and tablet, one column on the phone. */
.picline-sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 680px) { .picline-sf-grid { grid-template-columns: minmax(0, 1fr); } }
.picline-sf-grid > .picline-sf-card {
    display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden;
    border: 1px solid var(--sf-linie); border-radius: 16px; background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.picline-sf-card:hover { box-shadow: 0 18px 40px rgb(2 8 74 / 10%); }
@media (prefers-reduced-motion: no-preference) { .picline-sf-card:hover { transform: translateY(-4px); } }
.picline-sf-card > * { margin-block: 0; }
.picline-sf-body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.picline-sf-body > * { margin-block: 0; }
.picline-sf-body > h3 { margin-bottom: 10px; color: var(--sf-blau); font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.picline-sf-body > p:not(.picline-sf-more) { flex: 1; margin-bottom: 18px; color: var(--sf-text); font-size: 1rem; line-height: 1.55; }
.picline-sf-more a { display: inline-flex; align-items: center; gap: 8px; color: var(--sf-blau); font-weight: 700; text-decoration: none; }
.picline-sf-more a { background: linear-gradient(var(--sf-gelb), var(--sf-gelb)) left bottom / calc(100% - 1.5em) 2px no-repeat; padding-bottom: 3px; }
.picline-sf-more a::after { content: "\2192"; transition: transform .2s ease; }
.picline-sf-more a:hover::after { transform: translateX(4px); }
@media (min-width: 1024px) { .picline-sf-body > p:not(.picline-sf-more), .picline-sf-more a { font-size: calc(16px / .9); } }

/* Idea block */
.picline-wd-spezial .picline-inner > .picline-sf-idea {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
    margin-top: 34px; padding: 26px 30px; border-radius: 16px; background: var(--sf-blau); color: #fff;
}
.picline-sf-idea > * { margin: 0; }
.picline-sf-idea-text > * { margin: 0; }
.picline-sf-idea-text > h3 { margin-bottom: 4px; color: #fff; font-size: 1.25rem; font-weight: 800; }
.picline-sf-idea-text > p { color: #cfd2ea; font-size: 1rem; }
.picline-sf-idea .wp-block-button__link { white-space: nowrap; }
@media (min-width: 1024px) { .picline-sf-idea-text > p { font-size: calc(16px / .9); } }
@media (max-width: 680px) { .picline-wd-spezial .picline-inner > .picline-sf-idea { padding: 22px; } }

/* ---------- Mini previews ---------- */
.picline-sf-preview {
    position: relative; display: flex; align-items: center; justify-content: center; height: 270px; box-sizing: border-box;
    padding: 52px 16px 16px; border-bottom: 1px solid var(--sf-linie); background: #f6f7fc; color: var(--sf-text); font-size: 13px; line-height: 1.4;
}
.picline-sf-preview > * { margin: 0; }
.picline-sf-tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 10px; border-radius: 6px; background: var(--sf-gelb); color: var(--sf-blau); font-size: 12px; font-weight: 800; }
.picline-sf-live { position: absolute; top: 16px; right: 14px; display: flex; align-items: center; gap: 6px; color: var(--sf-blau); font-size: 11px; font-weight: 700; opacity: .6; }
.picline-sf-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-frei); animation: picline-sf-pulse 1.6s infinite; }
@keyframes picline-sf-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .picline-sf-live::before { animation: none; } .picline-sf-card, .picline-sf-more a::after { transition: none; } }

/* Building */
.picline-sf-iso { width: 200px; height: auto; }
.picline-sf-iso .u { cursor: pointer; }
.picline-sf-iso .u polygon { stroke: #9aa0bd; stroke-width: .5; transition: fill .2s; }
.picline-sf-iso .t { fill: #fbfbfe; } .picline-sf-iso .f { fill: #e6e8f3; } .picline-sf-iso .s { fill: #cfd3e6; }
.picline-sf-iso .u.v .t { fill: #f1f1f1; } .picline-sf-iso .u.v .f { fill: #dcdcdc; } .picline-sf-iso .u.v .s { fill: #c6c6c6; }
.picline-sf-iso .u.on .t { fill: #fff6a8; } .picline-sf-iso .u.on .f { fill: var(--sf-gelb); } .picline-sf-iso .u.on .s { fill: #d9c61c; }
.picline-sf-iso .w { fill: rgb(2 8 74 / 22%); pointer-events: none; }
.picline-sf-isoinfo { position: absolute; right: 14px; bottom: 14px; min-width: 118px; padding: 8px 11px; border: 1px solid var(--sf-linie); border-radius: 10px; background: #fff; font-size: 12px; line-height: 1.35; box-shadow: 0 6px 18px rgb(2 8 74 / 8%); }
.picline-sf-isoinfo b { color: var(--sf-blau); font-size: 14px; }
.picline-sf-dot, .picline-wf-dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: #F7E229; box-shadow: inset 0 0 0 1px rgb(2 8 74 / 30%); }
.picline-sf-dot.is-vermietet, .picline-wf-dot.is-vermietet { background: #fff; box-shadow: inset 0 0 0 1px rgb(2 8 74 / 40%); }
.picline-wf-dot.is-reserviert { background: #f08a8a; box-shadow: none; }
.picline-wf-dot.is-auswahl { background: #ff8a1f; box-shadow: none; }

/* Jobs */
.picline-sf-jobs { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
.picline-sf-job { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--sf-linie); border-radius: 10px; background: #fff; font-size: 13px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.picline-sf-job b { display: block; color: var(--sf-blau); font-size: 13.5px; }
.picline-sf-job small { color: #7a7f9c; font-size: 12px; }
.picline-sf-go { padding: 5px 8px; border-radius: 6px; background: var(--sf-blau); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: .2s; }
.picline-sf-job.is-on { border-color: var(--sf-blau); box-shadow: 0 6px 16px rgb(2 8 74 / 10%); }
.picline-sf-job.is-on .picline-sf-go { opacity: 1; transform: none; }
.picline-sf-new { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: var(--sf-gelb); color: var(--sf-blau); font-size: 10px; font-weight: 800; vertical-align: 1px; }

/* Calculator */
.picline-sf-calc { width: 100%; max-width: 270px; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--sf-linie); border-radius: 12px; background: #fff; font-size: 13px; }
.picline-sf-calc label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--sf-blau); font-weight: 600; }
.picline-sf-calc input[type=range] { width: 100%; margin: 0; accent-color: var(--sf-blau); }
.picline-sf-seg { display: flex; gap: 6px; margin: 10px 0 12px; }
.picline-sf-seg button { flex: 1; padding: 6px 4px; border: 1px solid var(--sf-linie); border-radius: 7px; background: #fff; color: var(--sf-text); font: inherit; font-size: 12px; cursor: pointer; }
.picline-sf-seg button.is-on { border-color: var(--sf-blau); background: var(--sf-blau); color: #fff; }
.picline-sf-seg button:focus-visible, .picline-sf-calc input:focus-visible { outline: 3px solid var(--sf-gelb); outline-offset: 2px; }
.picline-sf-res { display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--sf-linie); }
.picline-sf-res b { color: var(--sf-blau); font-size: 20px; }
.picline-sf-res small { color: #7a7f9c; }

/* Larger example calculator on the page Preisrechner */
.picline-sf-preview.is-gross { flex-direction: column; gap: 14px; height: auto; max-width: 560px; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--sf-linie); border-radius: 16px; background: #f6f7fc; }
.picline-sf-preview.is-gross .picline-sf-calc { max-width: none; padding: 22px 24px; font-size: 1rem; }
.picline-sf-preview.is-gross .picline-sf-seg button { padding: 10px 8px; font-size: 1rem; }
.picline-sf-preview.is-gross .picline-sf-res b { font-size: 1.75rem; }
.picline-sf-caption { color: var(--sf-blau); font-size: 1rem; font-weight: 700; text-align: center; }
/* Inquiry step of the large example calculator (382, 30.09.2026): yellow button like the site, the note below it. */
.picline-sf-anfrage { display: block; width: 100%; margin-top: 14px; padding: .8rem 1rem; border: 0; border-radius: 4px; background: var(--sf-gelb); color: var(--sf-blau); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s; }
.picline-sf-anfrage:hover { background: var(--sf-blau); color: var(--sf-gelb); }
.picline-sf-anfrage:focus-visible { outline: 3px solid var(--sf-blau); outline-offset: 3px; }
.picline-sf-anfrage-info { margin: 12px 0 0; padding: .7rem .9rem; border-left: 4px solid var(--sf-gelb); border-radius: 0 8px 8px 0; background: #eef1fa; color: var(--sf-blau); font-size: .95rem; line-height: 1.5; }
.picline-sf-anfrage-info[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .picline-sf-anfrage { transition: none; } }
@media (min-width: 1024px) { .picline-sf-anfrage { font-size: calc(16px / .9); } .picline-sf-anfrage-info { font-size: calc(15px / .9); } }
@media (min-width: 1024px) {
    .picline-sf-preview.is-gross .picline-sf-calc, .picline-sf-preview.is-gross .picline-sf-seg button, .picline-sf-caption { font-size: calc(16px / .9); }
}

/* ---------- Subpages: feature cards, a single last card spans the whole row ---------- */
.picline-sf-seite .picline-wd-features > .picline-wd-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (max-width: 1100px) { .picline-sf-seite .picline-wd-features > .picline-wd-card:last-child:nth-child(3n + 1) { grid-column: auto; } .picline-sf-seite .picline-wd-features > .picline-wd-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; } }
@media (max-width: 600px) { .picline-sf-seite .picline-wd-features > .picline-wd-card:last-child { grid-column: auto; } }
.picline-sf-seite .picline-wd-features + p { max-width: 80ch; margin-top: calc(24px + .8em); }
.picline-sf-seite .picline-sf-bild { margin: 0; }
.picline-sf-seite .picline-sf-bild .picline-placeholder { display: grid; place-items: center; box-sizing: border-box; aspect-ratio: 16 / 7; margin: 0; padding: 1.5rem; border-radius: 16px; text-align: center; }
@media (max-width: 600px) { .picline-sf-seite .picline-sf-bild .picline-placeholder { aspect-ratio: 4 / 3; } }
/* Erstvermietung (380) since 30.09.2026 (Andrea's SEO brief): short definition at the top of «Für wen» (quiet, yellow
   line on the left, no box), «Immer inklusive» as a line below the cards like on Webdesign, the photography link,
   the demo note below the apartment finder and a short call to action after it (white card, yellow edge). */
.picline-sf-seite .picline-sf-definition { max-width: 62ch; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); padding-left: 1rem; border-left: 4px solid var(--sf-gelb, #F7E229); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 600; line-height: 1.55; }
.picline-sf-seite .picline-wd-immer { font-size: 1.0625rem; line-height: 1.6; }
/* Karriereseite (381) since 30.09.2026: a card with an info box (Google Jobs) works like the #seo cards on Webdesign:
   «i» top right, the bubble below the card, the open card above its neighbours (on phones above the fixed bars). */
.picline-sf-seite .picline-wd-features > .picline-wd-card:has(> .picline-wd-infobox) { position: relative; }
.picline-sf-seite .picline-wd-features > .picline-wd-card.has-open-info { z-index: 5; }
@media (max-width: 599px) { .picline-sf-seite .picline-wd-features > .picline-wd-card.has-open-info { z-index: 61; } }
/* Only «Immer inklusive:» bold (webdesign.css sets the whole paragraph after the cards in bold). */
.picline-sf-seite .picline-wd-features + p.picline-wd-immer { font-weight: 400; }
/* Ablauf on the three subpages: the steps (yellow line on top) sat right on the H2 without any space (0 px), visible
   with the longer heading «Wie entsteht Deine Website für Erstvermietung?» (30.09.2026). */
.picline-sf-seite .picline-inner > h2 + .picline-step-grid { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.picline-sf-seite .picline-wd-immer + p { max-width: 80ch; }
.picline-sf-seite .picline-inner > .picline-wd-cardlink { font-weight: 700; }
.picline-sf-demo-hinweis { max-width: 80ch; margin-top: 1rem; font-size: .9375rem; line-height: 1.5; opacity: .8; }
.picline-sf-demo-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 1.25rem 1.5rem; border: 1px solid #E3E6F2; border-left: 6px solid var(--sf-gelb, #F7E229);
    border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgb(2 8 74 / 8%);
}
.picline-sf-demo-cta > * { margin: 0 !important; }
.picline-sf-demo-cta-titel { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 800; line-height: 1.3; }
@media (min-width: 1024px) {
    .picline-sf-seite .picline-wd-immer { font-size: calc(17px / .9); }
    .picline-sf-demo-hinweis { font-size: calc(15px / .9); }
}

/* ---------- Demo apartment finder ---------- */
.picline-wf { margin-top: clamp(1.5rem, 3vw, 2.5rem); color: var(--sf-text); }
.picline-wf > * { margin: 0; }
.picline-wf-hinweis { display: inline-block; margin-bottom: 1rem !important; padding: .35rem .8rem; border-radius: 6px; background: var(--sf-gelb); color: var(--sf-blau); font-size: .9375rem; font-weight: 800; }
.picline-wf-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px; }
@media (max-width: 900px) { .picline-wf-layout { grid-template-columns: minmax(0, 1fr); } }
.picline-wf-gebaeude, .picline-wf-detail { box-sizing: border-box; min-width: 0; padding: clamp(1rem, 2.5vw, 1.75rem); border: 1px solid var(--sf-linie); border-radius: 16px; background: #fff; }
.picline-wf-svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; shape-rendering: geometricPrecision; }
/* Building in the CI colours (29.09.2026 evening, assets/wohnungsfinder.js): let units white, available units yellow,
   reserved units light blue, the unit under the mouse or selected navy with yellow lit windows. Surroundings (plot,
   trees, cars) take their colours from FARBE in the script and ignore the mouse. */
.picline-wf-umgebung { pointer-events: none; }
.picline-wf-unit { cursor: pointer; transition: opacity .2s ease; }
.picline-wf-unit polygon { stroke: rgb(2 8 74 / 24%); stroke-width: .45; stroke-linejoin: round; transition: fill .2s ease; }
/* Roofs and terraces (tops) stay light for every status, the facades show it. */
.picline-wf-unit .t { fill: #f4f6fc; } .picline-wf-unit .f { fill: #fff; } .picline-wf-unit .s { fill: #e3e7f5; }
.picline-wf-unit.is-frei .f { fill: #F7E229; } .picline-wf-unit.is-frei .s { fill: #dcc716; }
/* Reserved in light red (Andrea 29.09.2026: stands out better). */
.picline-wf-unit.is-reserviert .f { fill: #f5a3a3; } .picline-wf-unit.is-reserviert .s { fill: #e68383; }
.picline-wf-unit .w { fill: rgb(2 8 74 / 24%); stroke: none; pointer-events: none; }
.picline-wf-unit.is-frei .w { fill: #d3d8f1; }
.picline-wf-unit.is-reserviert .w { fill: #fde6e6; }
/* Marking in orange (Andrea 29.09.2026: you have to see what is marked): under the mouse light orange, selected
   strong orange with a darker outline and light windows. */
.picline-wf-unit.is-hover .t { fill: #ffd9ad; } .picline-wf-unit.is-hover .f { fill: #ffb466; } .picline-wf-unit.is-hover .s { fill: #f59a45; }
.picline-wf-unit.is-hover .w { fill: #fff4e6; }
.picline-wf-unit.is-aktiv .t { fill: #ffbf7a; } .picline-wf-unit.is-aktiv .f { fill: #ff8a1f; } .picline-wf-unit.is-aktiv .s { fill: #e6700b; }
.picline-wf-unit.is-aktiv .w { fill: #fff1de; }
.picline-wf-unit.is-aktiv :is(.t, .f, .s) { stroke: #b55300; stroke-width: .9; }
.picline-wf-unit .tuer { stroke: none; }
/* Balconies and railings: white slab, glass in light blue, navy handrail (also the terrace in front of the attic). */
.picline-wf-unit .b { fill: #fff; } .picline-wf-unit .bs { fill: #e3e7f5; }
.picline-wf-svg .g { fill: rgb(238 241 250 / 38%); stroke: rgb(2 8 74 / 35%); stroke-width: .35; }
.picline-wf-svg .rail { fill: none; stroke: #02084a; stroke-width: .6; stroke-linejoin: round; opacity: .6; }
.picline-wf-svg .solar { fill: #2b3380; fill-opacity: .55; stroke: #fff; stroke-width: .35; }
.picline-wf-unit.is-gedimmt { opacity: .25; }
.picline-wf-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.picline-wf-legende li { margin: 0; }
/* Detail panel */
.picline-wf-detail > * { margin: 0; }
.picline-wf-detail-leer { color: #7a7f9c; }
.picline-wf-detail-kicker { color: #7a7f9c; font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.picline-wf-detail-nr { margin-top: .25rem !important; color: var(--sf-blau); font-size: 1.75rem; font-weight: 800; line-height: 1.15; }
.picline-wf-detail-zimmer { margin-top: .25rem !important; color: var(--sf-blau); font-size: 1.125rem; font-weight: 700; }
.picline-wf-detail dl { display: grid; gap: .5rem; margin: 1.25rem 0 0; }
.picline-wf-detail dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--sf-linie); }
.picline-wf-detail dt { color: #7a7f9c; }
.picline-wf-detail dd { margin: 0; color: var(--sf-blau); font-weight: 700; text-align: right; }
.picline-wf-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem !important; }
.picline-wf-aktionen button { padding: .7rem 1rem; border: 2px solid var(--sf-blau); border-radius: 6px; background: #fff; color: var(--sf-blau); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.picline-wf-aktionen button[data-demo="anfrage"] { border-color: var(--sf-gelb); background: var(--sf-gelb); }
.picline-wf-aktionen button:disabled { opacity: .45; cursor: not-allowed; }
.picline-wf-aktionen button:focus-visible { outline: 3px solid var(--sf-gelb); outline-offset: 2px; }
.picline-wf-demo-info { margin-top: .9rem !important; padding: .75rem 1rem; border-left: 4px solid var(--sf-gelb); border-radius: 0 8px 8px 0; background: #eef1fa; color: var(--sf-blau); font-size: .9375rem; }
/* Status badges */
.picline-wf-status { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.picline-wf-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.picline-wf-status.is-frei { background: #fdf6bf; color: #02084a; }
.picline-wf-status.is-frei::before { background: #F7E229; box-shadow: inset 0 0 0 1px rgb(2 8 74 / 30%); }
.picline-wf-status.is-reserviert { background: #fde4e4; color: #a01c1c; }
.picline-wf-status.is-reserviert::before { background: #f08a8a; }
.picline-wf-status.is-vermietet { background: #f1f2f7; color: #5b6070; }
.picline-wf-status.is-vermietet::before { background: #fff; box-shadow: inset 0 0 0 1px rgb(2 8 74 / 40%); }
/* Filters */
.picline-wf-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 22px !important; }
.picline-wf-filter-feld { display: grid; gap: .3rem; min-width: 150px; color: var(--sf-blau); font-size: .9375rem; font-weight: 700; }
.picline-wf-filter-feld select { min-height: 44px; padding: .5rem .75rem; border: 1px solid rgb(2 8 74 / 35%); border-radius: 8px; background: #fff; color: var(--sf-blau); font: inherit; font-weight: 400; }
.picline-wf-filter-feld select:focus-visible { outline: 3px solid var(--sf-gelb); outline-offset: 1px; }
.picline-wf-anzahl { margin: 0 0 .6rem auto !important; color: #7a7f9c; font-size: .9375rem; }
@media (max-width: 600px) { .picline-wf-filter-feld { flex: 1 1 100%; } .picline-wf-anzahl { margin-left: 0 !important; } }
/* Table (scrolls inside its frame on small screens, never the page) */
.picline-wf-tabelle-wrap { margin-top: 14px !important; overflow-x: auto; border: 1px solid var(--sf-linie); border-radius: 16px; background: #fff; }
.picline-wf-tabelle-wrap:focus-visible { outline: 3px solid var(--sf-gelb); outline-offset: 2px; }
.picline-wf-tabelle { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9375rem; }
.picline-wf-tabelle th, .picline-wf-tabelle td { padding: .7rem .9rem; border-bottom: 1px solid var(--sf-linie); text-align: left; white-space: nowrap; }
.picline-wf-tabelle thead th { color: #7a7f9c; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.picline-wf-tabelle tbody th { color: var(--sf-blau); font-weight: 800; }
.picline-wf-tabelle tbody tr:last-child > * { border-bottom: 0; }
.picline-wf.is-bereit .picline-wf-tabelle tbody tr { cursor: pointer; }
/* Rows marked like the building: light orange under the mouse, selected with an orange bar (29.09.2026). */
.picline-wf-tabelle tbody tr.is-hover { background: #fff6ec; }
.picline-wf-tabelle tbody tr.is-aktiv { background: #ffecd9; box-shadow: inset 4px 0 0 #ff8a1f; }
.picline-wf-tabelle tbody tr:focus-visible { outline: 3px solid var(--sf-gelb); outline-offset: -3px; }
@media (min-width: 1024px) {
    .picline-wf-tabelle, .picline-wf-legende, .picline-wf-filter-feld, .picline-wf-anzahl, .picline-wf-aktionen button, .picline-wf-demo-info, .picline-wf-hinweis { font-size: calc(16px / .9); }
    .picline-wf-detail dl, .picline-wf-detail-leer { font-size: calc(16px / .9); }
}
@media (prefers-reduced-motion: reduce) { .picline-wf-unit, .picline-wf-unit polygon { transition: none; } }

/* Pages with interactive demo (380, 381, 382) since 02.10.2026: the demo stands directly under the hero. Less space
   under the hero text and above the demo title; on computers the spacings (and on low windows the H1) follow the
   window height, so that the top of the demo is on the first screen. Phones and tablets keep the hero as it was. */
.picline-section.picline-sf-hero-kurz { padding-bottom: clamp(1.75rem, 3vw, 2.75rem) !important; }
.picline-section.picline-sf-demo-oben { padding-top: clamp(1.75rem, 3vw, 2.75rem) !important; }
@media (min-width: 1024px) {
    body:not(.home) main .wp-block-post-content > .picline-section.picline-sf-hero-kurz:first-child { padding-top: clamp(1.5rem, 4.5vh, 3.5rem) !important; }
    .picline-section.picline-sf-hero-kurz { padding-bottom: clamp(1.25rem, 3vh, 2.25rem) !important; }
    .picline-section.picline-sf-hero-kurz .picline-wd-hero-copy > h1 { margin-top: 1.1rem; font-size: min(clamp(2.2rem, 3.6vw, 4.25rem), 6.6vh); }
    .picline-sf-hero-kurz .picline-wd-hero-copy > .picline-wd-promise { margin-top: 1rem; }
    .picline-sf-hero-kurz .picline-wd-hero-copy > .wp-block-buttons { margin-top: 1.5rem; }
    .picline-section.picline-sf-demo-oben { padding-top: clamp(1.25rem, 3vh, 2.25rem) !important; }
    .picline-sf-demo-oben .picline-inner > :is(.picline-wn, .picline-ks, .picline-sf-preview, .picline-rd) { margin-top: 1.25rem !important; }
}
@media (min-width: 1024px) and (max-height: 720px) {
    body:not(.home) main .wp-block-post-content > .picline-section.picline-sf-hero-kurz:first-child { padding-top: 1rem !important; }
    .picline-section.picline-sf-hero-kurz { padding-bottom: 1.1rem !important; }
    .picline-section.picline-sf-hero-kurz .picline-wd-hero-copy > h1 { margin-top: .85rem; font-size: min(clamp(2.2rem, 3.6vw, 4.25rem), 5.8vh); }
    .picline-sf-hero-kurz .picline-wd-hero-copy > .wp-block-buttons { margin-top: 1.1rem; }
    .picline-section.picline-sf-demo-oben { padding-top: 1.4rem !important; }
    .picline-sf-demo-oben .picline-inner > :is(.picline-wn, .picline-ks, .picline-sf-preview, .picline-rd) { margin-top: .9rem !important; }
}

/* Preview cards (front page, Webdesign, place pages) since 04.10.2026 (Andrea: in every row of cards title, text and
   link at the same height): from two columns on, the cards share the rows of the grid (preview, title, text, link).
   A title that takes two lines in one card no longer pushes its text below the text of its neighbour. */
@media (min-width: 681px) {
    .picline-sf-grid > .picline-sf-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
    .picline-sf-card > .picline-sf-body { display: contents; }
    .picline-sf-card > .picline-sf-body > * { margin-inline: 22px; }
    .picline-sf-card > .picline-sf-body > h3 { margin-top: 22px; }
    .picline-sf-card > .picline-sf-body > p:not(.picline-sf-more) { flex: none; }
    .picline-sf-card > .picline-sf-body > .picline-sf-more { align-self: end; margin-bottom: 24px; }
}