/* Webdesign page: sections (picline-wd-*) and price calculator (picline-wr-*). Only theme colours:
   navy #02084a, yellow #F7E229, white, light blue #eef1fa. Loaded only where used (inc/webdesign.php). */

/* ---------- Page sections ---------- */
.picline-eyebrow.picline-eyebrow-dark { color: #02084a; opacity: .6; }
.picline-wd .picline-eyebrow { margin: 0 0 1rem; text-transform: uppercase; }
.picline-wd .picline-inner > .picline-eyebrow + h2 { margin-top: 0; }

/* Hero: one full-width column (eyebrow, H1, promise, text, buttons); spotlight dot grid behind it on the webdesign
   page (assets/hero-dots.js, canvas .picline-hero-dots styled in picline.css). */
.picline-section.picline-wd-hero { position: relative; isolation: isolate; overflow: hidden; }
.picline-wd-hero-copy > * { margin-block: 0; }
.picline-wd-hero-copy > * + * { margin-top: 1.25rem; }
.picline-section .picline-wd-hero-copy > h1 { max-width: none; font-size: clamp(2.2rem, 3.6vw, 4.25rem); line-height: 1.1; letter-spacing: -.025em; text-wrap: pretty; }
.picline-wd-promise { font-size: clamp(1.25rem, .9rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.3; }
.picline-wd-hero-copy > .picline-wd-promise { margin-top: 1.5rem; }
.picline-wd-hero-copy > p:not(.picline-eyebrow):not(.picline-wd-promise) { max-width: none; opacity: .9; }
/* Small line below the intro, e.g. «Für KMU in Zug, der Zentralschweiz und der Region Zürich.» (53 since 30.09.2026). */
.picline-wd-hero-copy > p.picline-wd-hero-klein { margin-top: .6rem; font-size: .95rem; opacity: .75; }
/* Second line right under the sub line, normal weight, e.g. «Vor Ort oder online, auf Deutsch oder Englisch.» (56 since 30.09.2026). */
.picline-wd-hero-copy > .picline-wd-promise + p.picline-wd-hero-format { margin-top: .5rem; font-size: clamp(1.0625rem, .95rem + .3vw, 1.25rem); font-weight: 400; line-height: 1.4; }
.picline-wd-hero-copy > .wp-block-buttons { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
/* «Was ist bei jeder Website dabei?» (#dabei, below the hero, white background, since 28.09.2026): H2, intro, 6 white cards
   (3 / 2 / 1 columns) with the same navy icon tile as the service cards; icons from inc/webdesign.php */
.picline-wd-included .picline-inner > h2 { margin-top: 0; }
.picline-wd-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
@media (max-width: 1100px) { .picline-wd-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .picline-wd-features { grid-template-columns: minmax(0, 1fr); } }
.picline-wd-features > .picline-wd-card {
    min-width: 0; margin: 0; padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border: 1px solid #E3E6F2; border-radius: 16px; background: #fff;
    box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 16px 36px -16px rgb(2 8 74 / 28%);
    transition: box-shadow .2s ease, transform .2s ease;
}
.picline-wd-features > .picline-wd-card:hover { box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 22px 44px -16px rgb(2 8 74 / 36%); }
@media (prefers-reduced-motion: no-preference) { .picline-wd-features > .picline-wd-card:hover { transform: translateY(-3px); } }
.picline-section .picline-wd-feature > h3 { font-size: clamp(1.125rem, .95rem + .4vw, 1.375rem); }
.picline-wd .wp-block-button.is-style-outline > .wp-block-button__link,
.picline-wd .wp-block-button.picline-wd-ghost > .wp-block-button__link { border: 2px solid rgb(255 255 255 / 45%); background: transparent; color: #fff; }
.picline-wd-panel { margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 2px solid #F7E229; border-radius: 18px; }
.picline-wd-panel > * { margin-block: 0; }
.picline-wd-panel-title { margin-bottom: 1rem !important; color: #F7E229; font-size: 1.125rem; font-weight: 700; }

/* Check lists: yellow circle with a navy tick */
ul.picline-wd-check, .picline-wr-checklist { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.picline-wd-check li, .picline-wr-checklist li { position: relative; margin: 0; padding-left: 2rem; font-size: 1.0625rem; line-height: 1.5; }
.picline-wd-check li::before, .picline-wr-checklist li::before {
    content: ""; position: absolute; left: 0; top: .2em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: #F7E229 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2302084a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Service cards: icon and price badge on top, pills with what is included, link to the calculator */
.picline-wd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.picline-wd-cards > .picline-wd-card, .picline-wd-care > .picline-wd-card {
    position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0;
    padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid rgb(2 8 74 / 14%); border-radius: 16px; background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.picline-wd-card > * { margin-block: 0; }
.picline-wd-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.5rem; border-radius: 14px; background: #02084a; color: #F7E229; }
.picline-wd-icon svg { width: 30px; height: 30px; overflow: visible; }

/* Service card icons: motion. Loops only while the section is on screen (motion.js sets .is-in-view),
   each icon with its own delay; faster on card hover; off with prefers-reduced-motion. */
.picline-wd-icon { transition: transform .25s ease; }
.picline-wd-icon svg * { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .picline-wd-services.is-in-view .wd-a-meridian { animation: wd-globe 3.2s linear infinite; }
    .picline-wd-services.is-in-view .wd-a-star { animation: wd-star 2.8s ease-in-out .3s infinite; }
    .picline-wd-services.is-in-view .wd-a-spark { animation: wd-spark 2.8s ease-in-out .3s infinite; }
    .picline-wd-services.is-in-view .wd-a-bag { transform-origin: 50% 100%; animation: wd-bag 2.6s ease-in-out .6s infinite; }
    .picline-wd-services.is-in-view .wd-a-handle { transform-origin: 50% 100%; animation: wd-handle 2.6s ease-in-out .6s infinite; }
    .picline-wd-services.is-in-view .wd-a-refresh { animation: wd-refresh 3s cubic-bezier(.6, 0, .3, 1) .9s infinite; }
    .picline-wd-card:hover .picline-wd-icon { transform: translateY(-3px) rotate(-4deg); }
    .picline-wd-card:hover svg * { animation-duration: 1.4s !important; }
}
@keyframes wd-globe { 0% { transform: scaleX(1); } 25% { transform: scaleX(.15); } 50% { transform: scaleX(1); } 75% { transform: scaleX(2.1); } 100% { transform: scaleX(1); } }
@keyframes wd-star { 0%, 60%, 100% { transform: scale(1) rotate(0); } 72% { transform: scale(1.18) rotate(-12deg); } 84% { transform: scale(.94) rotate(6deg); } }
@keyframes wd-spark { 0%, 62%, 100% { opacity: 0; transform: scale(.3); } 76% { opacity: 1; transform: scale(1.2); } 90% { opacity: 0; transform: scale(.6); } }
@keyframes wd-bag { 0%, 55%, 100% { transform: translateY(0) scale(1); } 65% { transform: translateY(-3px) scale(1.04, .96); } 75% { transform: translateY(0) scale(.98, 1.03); } 85% { transform: translateY(0) scale(1); } }
@keyframes wd-handle { 0%, 55%, 100% { transform: translateY(0); } 65% { transform: translateY(-2px); } 75% { transform: translateY(0); } }
@keyframes wd-refresh { 0%, 45% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ---------- Card icons: motion on all service pages (30.09.2026, Andrea: «Icons bewegen wie auf Webdesign bei
   Welche Website passt zu Deinem Ziel?») ----------
   Same idea as the service cards above: every icon has its own small movement (parts classed wd-a-* in
   picline_webdesign_icons(), inc/webdesign.php), loops with a pause, only while its section is on screen
   (webdesign.js sets .is-in-view on every section with card icons), faster and tilted on card hover (rules above),
   still with prefers-reduced-motion. Cards start one after the other (--wd-d). The service cards of Webdesign
   (.picline-wd-services) keep their own rules above. The menu icons (.picline-nav-icon) are not affected. */
.picline-wd-card:nth-child(2) { --wd-d: .3s; }
.picline-wd-card:nth-child(3) { --wd-d: .6s; }
.picline-wd-card:nth-child(4) { --wd-d: .9s; }
.picline-wd-card:nth-child(5) { --wd-d: 1.2s; }
.picline-wd-card:nth-child(6) { --wd-d: 1.5s; }
.picline-wd-card:nth-child(n + 7) { --wd-d: 1.8s; }
@media (prefers-reduced-motion: no-preference) {
    .is-in-view:not(.picline-wd-services) .picline-wd-icon .wd-a-meridian { animation: wd-globe 3.2s linear var(--wd-d, 0s) infinite; }
    .is-in-view:not(.picline-wd-services) .picline-wd-icon .wd-a-star { animation: wd-star 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view:not(.picline-wd-services) .picline-wd-icon .wd-a-spark { animation: wd-spark 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view:not(.picline-wd-services) .picline-wd-icon .wd-a-bag { transform-origin: 50% 100%; animation: wd-bag 2.6s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view:not(.picline-wd-services) .picline-wd-icon .wd-a-handle { transform-origin: 50% 100%; animation: wd-handle 2.6s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view:not(.picline-wd-services) .picline-wd-icon .wd-a-refresh { animation: wd-refresh 3s cubic-bezier(.6, 0, .3, 1) var(--wd-d, 0s) infinite; }
    /* Lines draw themselves one after the other (text, calendar, ruler, check marks, growth line). */
    .is-in-view .picline-wd-icon .wd-a-draw { stroke-dasharray: 1; animation: wd-draw 3.2s ease-in-out var(--wd-d, 0s) infinite both; }
    .is-in-view .picline-wd-icon .wd-a-draw.wd-a-d2 { animation-delay: calc(var(--wd-d, 0s) + .2s); }
    .is-in-view .picline-wd-icon .wd-a-draw.wd-a-d3 { animation-delay: calc(var(--wd-d, 0s) + .4s); }
    .is-in-view .picline-wd-icon .wd-a-arrow { animation: wd-pop 3.2s ease-in-out calc(var(--wd-d, 0s) + .5s) infinite; }
    /* Whole shapes that hop, tilt or swing. */
    .is-in-view .picline-wd-icon .wd-a-pen { animation: wd-wiggle 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-write { animation: wd-write 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-flip { animation: wd-flip 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-pop { transform-origin: 0% 100%; animation: wd-pop 2.6s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-drop { transform-origin: 50% 100%; animation: wd-drop 2.6s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-send { animation: wd-send 3s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-scan { animation: wd-scan 3.2s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-swing { transform-box: view-box; transform-origin: 7.5px 8.5px; animation: wd-swing 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-shout { animation: wd-shout 2.6s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-wave { animation: wd-wave 2.6s ease-in-out var(--wd-d, 0s) infinite both; }
    .is-in-view .picline-wd-icon .wd-a-hover { animation: wd-hover 2.4s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-rotor { animation: wd-rotor .3s linear infinite alternate; }
    .picline-wd-card:hover .picline-wd-icon svg .wd-a-rotor { animation-duration: .3s !important; }
    .is-in-view .picline-wd-icon .wd-a-blinkeye { animation: wd-blinkeye 3.4s ease-in-out var(--wd-d, 0s) infinite; }
    /* Parts that move inside the icon. */
    .is-in-view .picline-wd-icon .wd-a-head { animation: wd-nod 2.6s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-head.wd-a-d2 { animation-delay: calc(var(--wd-d, 0s) + .25s); }
    .is-in-view .picline-wd-icon .wd-a-phone { transform-origin: 50% 100%; animation: wd-drop 2.6s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-lens { animation: wd-shutter 3s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-zoom { transform-origin: 0% 50%; animation: wd-zoom 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-ring { animation: wd-ring 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-bull { animation: wd-bull 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-glow { animation: wd-glow 3s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-rays { animation: wd-rays 3.2s cubic-bezier(.6, 0, .3, 1) var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-core { animation: wd-pop 3.2s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-crop1 { animation: wd-crop1 3s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-crop2 { animation: wd-crop2 3s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-sunrise { animation: wd-sunrise 3s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-blink { animation: wd-blink 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-blink.wd-a-d2 { animation-delay: calc(var(--wd-d, 0s) + .4s); }
    .is-in-view .picline-wd-icon .wd-a-paper { animation: wd-paper 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-bar { transform-origin: 50% 100%; animation: wd-bar 3s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-bar.wd-a-d2 { animation-delay: calc(var(--wd-d, 0s) + .15s); }
    .is-in-view .picline-wd-icon .wd-a-bar.wd-a-d3 { animation-delay: calc(var(--wd-d, 0s) + .3s); }
    .is-in-view .picline-wd-icon .wd-a-hand { transform-box: view-box; transform-origin: 12px 12px; animation: wd-refresh 3.2s cubic-bezier(.6, 0, .3, 1) var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-shackle { animation: wd-shackle 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-lift { animation: wd-lift 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-lift2 { animation: wd-lift2 2.8s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-guard { animation: wd-pop 3.2s ease-in-out var(--wd-d, 0s) infinite; }
    .is-in-view .picline-wd-icon .wd-a-bolt { animation: wd-bolt 2.8s ease-in-out var(--wd-d, 0s) infinite; }
}
@keyframes wd-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 40%, 82% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wd-pop { 0%, 55%, 100% { transform: scale(1); } 68% { transform: scale(1.16); } 80% { transform: scale(.95); } 90% { transform: scale(1); } }
@keyframes wd-wiggle { 0%, 55%, 100% { transform: rotate(0); } 66% { transform: rotate(-12deg); } 78% { transform: rotate(9deg); } 90% { transform: rotate(-3deg); } }
@keyframes wd-write { 0%, 50%, 100% { transform: translate(0, 0); } 60% { transform: translate(-1.5px, 1.5px); } 70% { transform: translate(1px, -1px); } 80% { transform: translate(-1.5px, 1.5px); } 90% { transform: translate(0, 0); } }
@keyframes wd-flip { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 68% { transform: translateY(-2.5px) rotate(-10deg); } 80% { transform: translateY(0) rotate(5deg); } 90% { transform: rotate(0); } }
@keyframes wd-drop { 0%, 55%, 100% { transform: translateY(0) scale(1); } 66% { transform: translateY(-3.5px) scale(1); } 76% { transform: translateY(0) scale(1.06, .92); } 86% { transform: translateY(0) scale(1); } }
@keyframes wd-send { 0%, 45%, 100% { transform: translate(0, 0); opacity: 1; } 62% { transform: translate(5px, -5px); opacity: 0; } 63% { transform: translate(-5px, 5px); opacity: 0; } 80% { transform: translate(0, 0); opacity: 1; } }
@keyframes wd-scan { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.8px, 1px); } 50% { transform: translate(1.2px, -1.6px); } 75% { transform: translate(1.6px, 1.2px); } }
@keyframes wd-swing { 0%, 50%, 100% { transform: rotate(0); } 62% { transform: rotate(-16deg); } 76% { transform: rotate(10deg); } 88% { transform: rotate(-4deg); } }
@keyframes wd-shout { 0%, 55%, 100% { transform: rotate(0) scale(1); } 66% { transform: rotate(-8deg) scale(1.06); } 80% { transform: rotate(3deg) scale(1); } 90% { transform: rotate(0); } }
@keyframes wd-wave { 0%, 58% { opacity: 1; transform: translateX(0); } 70% { opacity: 0; transform: translateX(3px); } 71% { opacity: 0; transform: translateX(-2px); } 84%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes wd-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes wd-rotor { 0% { transform: scaleX(1); } 100% { transform: scaleX(.35); } }
@keyframes wd-blinkeye { 0%, 62%, 74%, 100% { transform: scaleY(1); } 68% { transform: scaleY(.1); } }
@keyframes wd-nod { 0%, 55%, 100% { transform: translateY(0); } 66% { transform: translateY(-2.5px); } 78% { transform: translateY(.5px); } 88% { transform: translateY(0); } }
@keyframes wd-shutter { 0%, 55%, 85%, 100% { transform: scale(1); } 68% { transform: scale(.4); } }
@keyframes wd-zoom { 0%, 50%, 100% { transform: scaleX(1); } 66% { transform: scaleX(.5); } 80% { transform: scaleX(1.12); } 90% { transform: scaleX(1); } }
@keyframes wd-ring { 0%, 50%, 100% { transform: scale(1); } 65% { transform: scale(1.35); } 80% { transform: scale(.9); } 90% { transform: scale(1); } }
@keyframes wd-bull { 0%, 58%, 100% { transform: scale(1); } 72% { transform: scale(2.6); } 86% { transform: scale(1); } }
@keyframes wd-glow { 0%, 50%, 100% { opacity: 1; transform: scale(1); } 60% { opacity: .35; } 66% { opacity: 1; transform: scale(1.1); } 72% { opacity: .5; } 80% { opacity: 1; transform: scale(1); } }
@keyframes wd-rays { 0%, 45% { transform: rotate(0); } 100% { transform: rotate(90deg); } }
@keyframes wd-crop1 { 0%, 50%, 100% { transform: translate(0, 0); } 66%, 76% { transform: translate(-2px, 2px); } 90% { transform: translate(0, 0); } }
@keyframes wd-crop2 { 0%, 50%, 100% { transform: translate(0, 0); } 66%, 76% { transform: translate(2px, -2px); } 90% { transform: translate(0, 0); } }
@keyframes wd-sunrise { 0%, 50%, 100% { transform: translateY(0) scale(1); } 66% { transform: translateY(-1.5px) scale(1.4); } 82% { transform: translateY(0) scale(1); } }
@keyframes wd-blink { 0%, 55%, 100% { opacity: 1; } 65%, 80% { opacity: .15; } }
@keyframes wd-paper { 0%, 50%, 100% { transform: translateY(0); } 66%, 76% { transform: translateY(2.5px); } 90% { transform: translateY(0); } }
@keyframes wd-bar { 0%, 50%, 100% { transform: scaleY(1); } 64% { transform: scaleY(.35); } 80% { transform: scaleY(1.12); } 90% { transform: scaleY(1); } }
@keyframes wd-shackle { 0%, 50%, 100% { transform: translateY(0); } 64%, 76% { transform: translateY(-2.5px); } 90% { transform: translateY(0); } }
@keyframes wd-lift { 0%, 55%, 100% { transform: translateY(0); } 70% { transform: translateY(-3px); } 85% { transform: translateY(0); } }
@keyframes wd-lift2 { 0%, 58%, 100% { transform: translateY(0); } 73% { transform: translateY(-1.5px); } 88% { transform: translateY(0); } }
@keyframes wd-bolt { 0%, 55%, 100% { opacity: 1; transform: scale(1); } 62% { opacity: .25; } 68% { opacity: 1; transform: scale(1.14); } 74% { opacity: .35; } 82% { opacity: 1; transform: scale(1); } }
.picline-wd-price { font-size: .95rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.picline-wd-card > .picline-wd-price { position: absolute; top: clamp(1.5rem, 3vw, 2.75rem); right: clamp(1.5rem, 3vw, 2.75rem); padding: .35rem .8rem; border-radius: 999px; background: #F7E229; }
.picline-section .picline-wd-card > h3 { font-size: clamp(1.25rem, 1rem + .5vw, 1.625rem); line-height: 1.25; }
/* Plain text paragraphs (WordPress adds the class wp-block-paragraph, so no :not([class])). */
.picline-wd-card > p:not(.picline-wd-price):not(.picline-wd-pills-label):not(.picline-wd-more):not(.picline-wd-care-note) { margin-top: .75rem; font-size: 1.0625rem; opacity: .85; }
.picline-wd-pills-label { margin-top: 1.5rem !important; font-size: .85rem; font-weight: 700; opacity: .65; }
ul.picline-wd-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.picline-wd-pills li { margin: 0; padding: .3rem .85rem; border: 1px solid rgb(2 8 74 / 14%); border-radius: 999px; background: #eef1fa; font-size: .9rem; line-height: 1.4; }
.picline-wd-card > .picline-wd-more { margin-top: auto; padding-top: 1.5rem; font-size: 1rem; font-weight: 700; }
.picline-wd-more a { color: #02084a; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.picline-wd-more a::after { content: "\00a0\2192"; }
@media (hover: hover) { .picline-wd-cards > .picline-wd-card:hover { border-color: #02084a; box-shadow: 0 14px 34px rgb(2 8 74 / 10%); } }

/* Benefits */
.picline-wd-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.picline-wd-benefits > .picline-wd-benefit { min-width: 0; margin: 0; padding-top: 1.5rem; border-top: 3px solid #F7E229; }
.picline-wd-benefit > * { margin-block: 0; }
.picline-section .picline-wd-benefit > h3 { font-size: clamp(1.25rem, 1rem + .5vw, 1.625rem); line-height: 1.25; }
.picline-wd-benefit > p { margin-top: .75rem; font-size: 1.0625rem; opacity: .85; }

/* Care plans */
.picline-wd-care { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.picline-wd-care > .picline-wd-card > h3 + .picline-wd-price { position: static; align-self: flex-start; margin-top: .5rem; padding: .2rem .7rem; border-radius: 999px; background: #F7E229; font-size: 1.125rem; }
.picline-wd-care-note { margin-top: .5rem !important; font-size: .9rem; opacity: .7; }
.picline-wd-care .picline-wd-check { margin-top: 1.25rem; }
.picline-wd-care .picline-wd-check li { font-size: 1rem; }
.picline-wd-care-foot { margin-top: 1.5rem !important; font-size: 1rem; opacity: .8; }

/* Contact */
.picline-wd-contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.picline-wd-contact-grid > .wp-block-group { min-width: 0; margin-block: 0; }
.picline-wd-contact-grid .picline-contact-copy > * { margin-block: 0; }
.picline-wd-contact-grid .picline-contact-copy > * + * { margin-top: 1rem; }
.picline-wd-contact-grid .picline-contact-copy > .wp-block-buttons { margin-top: 2rem; }
ul.picline-wd-facts { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; font-size: 1.0625rem; }
.picline-wd-facts li { margin: 0; }
.picline-wd-facts a { text-decoration: none; }
.picline-wd-facts a:hover, .picline-wd-facts a:focus-visible { color: #F7E229; text-decoration: underline; }
.picline-wd + .picline-updated, .picline-wd ~ .picline-updated { margin-inline: auto; }

/* ---------- Price calculator ---------- */
.picline-wr { --wr-line: rgb(2 8 74 / 14%); --wr-err: #b3261e; --wr-ok: #1f6e41; color: #02084a; }
.picline-wr *, .picline-wr *::before, .picline-wr *::after { box-sizing: border-box; }
.picline-wr-hint { margin: 0; padding: .875rem 1rem; border-left: 4px solid #F7E229; border-radius: 0 8px 8px 0; background: #fff; font-weight: 700; }
.picline-wr-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 32px; align-items: start; }
.picline-wr-grid[hidden] { display: none; }
.picline-wr-steps { display: grid; gap: 20px; min-width: 0; }
.picline-wr-step { margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--wr-line); border-radius: 16px; background: #fff; }
.picline-wr-head { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.25rem; }
.picline-wr-no { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #02084a; color: #F7E229; font-size: 1rem; font-weight: 800; }
.picline-wr h3 { margin: 0; color: inherit; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
.picline-wr-head small, .picline-wr-subtitle small, .picline-wr-row label small { display: block; font-size: .9rem; font-weight: 400; opacity: .72; letter-spacing: 0; }
/* Pages */
.picline-wr-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.picline-wr-row label { font-size: 1.0625rem; font-weight: 700; }
.picline-wr-stepper { display: flex; flex-shrink: 0; align-items: center; overflow: hidden; border: 2px solid #02084a; border-radius: 8px; }
.picline-wr-stepper button { width: 44px; height: 44px; border: 0; background: #fff; color: #02084a; font: inherit; font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer; }
.picline-wr-stepper button:hover { background: #eef1fa; }
.picline-wr-stepper input { width: 3.5rem; height: 44px; border: 0; background: #fff; color: #02084a; font: inherit; font-size: 1.125rem; font-weight: 800; text-align: center; -moz-appearance: textfield; }
.picline-wr-stepper input::-webkit-outer-spin-button, .picline-wr-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.picline-wr-included { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 12px; background: #eef1fa; }
.picline-wr-included > p { margin: 0 0 .5rem; font-size: .95rem; font-weight: 700; }
.picline-wr-included .picline-wr-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.5rem; }
.picline-wr-included .picline-wr-checklist li { font-size: .95rem; }
.picline-wr-included > .picline-wr-inkl-note { margin: .75rem 0 0; font-weight: 400; }
.picline-wr-gratis { margin: 0 0 16px; }
/* Options */
.picline-wr-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.picline-wr-opts + .picline-wr-opts { margin-top: 12px; }
.picline-wr-opts[data-el="art"] { margin-bottom: 1.5rem; }
.picline-wr-row[hidden] { display: none; }
/* Hint right under «Offerte anfragen» (04.10.2026): fully visible, the note below stays quieter. */
.picline-wr-sumnote.picline-wr-anruf { opacity: 1; font-size: .9rem; }
.picline-wr-foot small { flex: 1 1 16rem; line-height: 1.45; }
.picline-wr-opts[data-el="art"] .picline-wr-opt b { padding-right: 2rem; }
.picline-wr-opt { position: relative; display: block; cursor: pointer; }
.picline-wr-opt > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.picline-wr-opt > span { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1rem 1.125rem; border: 2px solid var(--wr-line); border-radius: 12px; font-size: 1rem; line-height: 1.4; transition: border-color .15s, background .15s; }
.picline-wr-opt b { font-size: 1.0625rem; }
.picline-wr-opt em { font-size: .95rem; font-style: normal; font-weight: 700; }
.picline-wr-opt small { font-size: .9rem; opacity: .72; }
.picline-wr-opt:hover > span { border-color: rgb(2 8 74 / 45%); }
.picline-wr-opt > input:checked + span { border-color: #02084a; background: #eef1fa; box-shadow: inset 0 0 0 1px #02084a; }
.picline-wr-opt > input:checked + span em { align-self: flex-start; padding: 0 .4rem; border-radius: 4px; background: #F7E229; }
/* «inklusive» in step 2 is never highlighted in yellow. */
[data-el="bestand"] .picline-wr-opt > input:checked + span em { padding: 0; background: none; }
.picline-wr-opt > input:focus-visible + span { outline: 3px solid #02084a; outline-offset: 3px; }
/* Step 6 «Hosting und Wartung»: the three plans side by side (price badge, for whom, check list),
   «Selbst übernehmen» as a slim tile below them. One column on tablets and phones. */
.picline-wr-opts[data-el="betreuung"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.picline-wr-plan > span { gap: .5rem; }
.picline-wr-plan b { font-size: 1.25rem; }
.picline-wr-plan em { align-self: flex-start; padding: .15rem .6rem; border-radius: 999px; background: #F7E229; }
.picline-wr-plan > input:checked + span em { padding: .15rem .6rem; border-radius: 999px; }
.picline-wr-plan small { margin-bottom: .25rem; }
.picline-wr-plan-from { margin-top: .25rem; font-size: .85rem; font-weight: 700; opacity: .65; }
.picline-wr-plan .picline-wr-checklist { gap: .45rem; margin-top: .25rem; }
.picline-wr-plan .picline-wr-checklist li { padding-left: 1.6rem; font-size: .9rem; line-height: 1.4; }
.picline-wr-plan .picline-wr-checklist li::before { top: .1em; width: 1.05rem; height: 1.05rem; }
.picline-wr-plan-none { grid-column: 1 / -1; order: 1; }
.picline-wr-plan-none > span { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; }
.picline-wr-plan-none b { font-size: 1.0625rem; }
.picline-wr-plan-none em { order: 3; margin-left: auto; padding: 0; background: none; }
.picline-wr-plan-none > input:checked + span em { background: none; }
@media (max-width: 1100px) { .picline-wr-opts[data-el="betreuung"] { grid-template-columns: minmax(0, 1fr); } }
/* Since 30.09.2026 late evening (Andrea): only «Hosting und Wartung durch Picline» (full width, calculated monthly price
   large, yearly amount below, services in two columns from 700 px, small note) and «Selbst übernehmen» below it. */
.picline-wr-opts[data-el="betreuung"] { grid-template-columns: minmax(0, 1fr); }
.picline-wr-radiotile.picline-wr-plan:not(.picline-wr-plan-none) > span > b { padding-right: 2.25rem; } /* long title, room for the round selector */
.picline-wr-plan em.picline-wr-plan-preis { margin-top: .15rem; padding: .3rem .85rem; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.picline-wr-plan > input:checked + span em.picline-wr-plan-preis { padding: .3rem .85rem; }
.picline-wr-plan small.picline-wr-plan-jahr { margin: 0 0 .5rem; font-size: .9375rem; opacity: .8; }
.picline-wr-plan small.picline-wr-plan-hinweis { margin: .5rem 0 0; font-size: .875rem; line-height: 1.5; opacity: .8; }
/* Since 30.09.2026 night (Andrea): box «So setzt sich Dein Preis zusammen» right below the yearly line (white, fine
   line; base, pages, one line per chosen function, total per month in bold after a line), a small note below; both
   hidden while «Selbst übernehmen» is chosen. In step 3 each function with a surcharge shows «+ CHF … / Monat Wartung»
   small below its one-off price. */
.picline-wr-plan-aufbau { display: flex; flex-direction: column; gap: .3rem; box-sizing: border-box; width: 100%; max-width: 30rem; margin: 0 0 .15rem; padding: .75rem .9rem; border: 1px solid rgb(2 8 74 / 16%); border-radius: 10px; background: #fff; font-size: .9rem; line-height: 1.35; }
.picline-wr-plan-aufbau[hidden], .picline-wr-plan small.picline-wr-plan-aufbau-hinweis[hidden] { display: none; }
.picline-wr-plan-aufbau-titel { margin-bottom: .15rem; font-weight: 800; }
.picline-wr-plan-aufbau-zeile { display: flex; justify-content: space-between; gap: 1rem; }
.picline-wr-plan-aufbau-zeile > span:last-child { white-space: nowrap; }
.picline-wr-plan-aufbau-zeile.is-total { margin-top: .2rem; padding-top: .45rem; border-top: 1px solid rgb(2 8 74 / 22%); font-weight: 800; }
.picline-wr-plan small.picline-wr-plan-aufbau-hinweis { max-width: 30rem; margin: 0 0 .5rem; font-size: .85rem; line-height: 1.45; opacity: .8; }
.picline-wr-fkarte small.picline-wr-fwartung { margin: .3rem 0 0; font-size: .8125rem; font-weight: 700; line-height: 1.35; opacity: .75; }
@media (min-width: 1024px) {
    .picline-wr-plan-aufbau { font-size: calc(15px / .9); }
    .picline-wr-plan small.picline-wr-plan-aufbau-hinweis { font-size: calc(14px / .9); }
    .picline-wr-fkarte small.picline-wr-fwartung { font-size: calc(13px / .9); }
}
@media (min-width: 700px) { .picline-wr-plan .picline-wr-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
@media (min-width: 1024px) { .picline-wr-plan small.picline-wr-plan-jahr, .picline-wr-plan small.picline-wr-plan-hinweis { font-size: calc(15px / .9); } }

/* Step 4 «Woher kommen Deine Bilder?»: tiles like the radio tiles above, freely combinable (box top right). */
.picline-wr-tile > span { position: relative; padding-right: 3.25rem; }
.picline-wr-tile .picline-wr-box { position: absolute; top: 1rem; right: 1.125rem; }
.picline-wr-check-opt > span { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
.picline-wr-opt-text { display: flex; flex-direction: column; min-width: 0; }
.picline-wr-box { display: grid; flex-shrink: 0; place-items: center; width: 22px; height: 22px; border: 2px solid #02084a; border-radius: 5px; }
.picline-wr-opt > input:checked + span .picline-wr-box { background: #02084a; }
.picline-wr-opt > input:checked + span .picline-wr-box::after { content: ""; width: 6px; height: 11px; border: solid #F7E229; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.picline-wr-sub { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--wr-line); }
.picline-wr-sub[hidden] { display: none; }
.picline-wr-subtitle { margin: 0 0 .75rem; font-size: 1.0625rem; font-weight: 700; }
.picline-wr-note { margin: 1rem 0 0; font-size: .9rem; opacity: .75; }
/* Summary: sticky on desktop, below the steps on phones */
.picline-wr-sum { position: sticky; top: 20px; padding: clamp(1.5rem, 2.5vw, 2rem); border-top: 6px solid #F7E229; border-radius: 16px; background: #02084a; color: #fff; }
.picline-wr-sum h3 { color: #fff; }
.picline-wr-type { margin: .25rem 0 0; font-size: .95rem; opacity: .75; }
.picline-wr-lines { margin: 1.25rem 0 0; padding: 0; font-size: .975rem; list-style: none; }
.picline-wr-lines li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .5rem 0; border-bottom: 1px solid rgb(255 255 255 / 14%); line-height: 1.4; }
.picline-wr-lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.picline-wr-lines li.open span:last-child { font-style: italic; opacity: .8; }
/* Total since 29.09.2026 evening (Andrea): three clear lines, total excl. VAT, VAT 8.1 % and the final amount incl.
   VAT, which is the big yellow number. */
.picline-wr-totalblock { margin: 1.25rem 0 0; padding: 1rem 1.1rem; border-radius: 12px; background: rgb(255 255 255 / 7%); font-variant-numeric: tabular-nums; }
.picline-wr-totalblock > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.picline-wr-totalblock dt, .picline-wr-totalblock dd { margin: 0; }
.picline-wr-totalblock dd { font-weight: 700; white-space: nowrap; }
.picline-wr-totalblock > div:not(.is-end) { font-size: 1rem; }
.picline-wr-totalblock > div:not(.is-end) dt { opacity: .85; }
.picline-wr-totalblock > .is-end { margin-top: .5rem; padding-top: .75rem; border-top: 2px solid #F7E229; font-size: 1.25rem; font-weight: 800; }
.picline-wr-totalblock > .is-end dt { white-space: nowrap; }
.picline-wr-totalblock > .is-end dd { color: #F7E229; font-size: 1.5rem; font-weight: 800; }
@media (min-width: 1024px) { .picline-wr-totalblock > div:not(.is-end) { font-size: calc(16px / .9); } }
.picline-wr-monthly { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .875rem 1rem; border-radius: 10px; background: rgb(255 255 255 / 8%); font-size: 1rem; font-weight: 700; }
.picline-wr-monthly small { display: block; font-weight: 400; opacity: .75; }
.picline-wr-monthly span:last-child { flex-shrink: 0; text-align: right; white-space: nowrap; }
.picline-wr-cta { display: block; margin-top: 1.25rem; padding: 1rem 1.5rem; border-radius: 4px; background: #F7E229; color: #02084a; font-size: 1.0625rem; font-weight: 700; text-align: center; text-decoration: none; }
.picline-wr-cta:hover { filter: brightness(.95); }
.picline-wr-sumnote { margin: 1rem 0 0; font-size: .85rem; line-height: 1.5; opacity: .75; }
.picline-wr-monthly[hidden] { display: none; }
/* Phones and tablets (29.09.2026): bar at the bottom with the total excl. VAT while the steps are on screen
   (shown by assets/webdesign.js only up to 1100 px and only while the summary itself is not visible). */
.picline-wr-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem max(1rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    border-top: 4px solid #F7E229; background: #02084a; color: #fff; box-shadow: 0 -8px 24px rgb(2 8 74 / 25%);
}
.picline-wr-bar[hidden] { display: none; }
.picline-wr-bar > span { display: flex; flex-direction: column; line-height: 1.2; }
.picline-wr-bar small { font-size: .8rem; opacity: .8; }
.picline-wr-bar b { color: #F7E229; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.picline-wr-bar a { flex-shrink: 0; padding: .6rem 1rem; border-radius: 4px; background: #F7E229; color: #02084a; font-size: .95rem; font-weight: 700; text-decoration: none; }
.picline-wr-bar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 1101px) { .picline-wr-bar { display: none !important; } }
/* Phones: label of the big total a little smaller (stays on one line), hosting block stacked. */
@media (max-width: 599px) {
    .picline-wr-totalblock > .is-end { font-size: 1.05rem; }
    .picline-wr-totalblock > .is-end dd { font-size: 1.3rem; }
    .picline-wr-monthly { flex-direction: column; gap: .35rem; }
    .picline-wr-monthly span:last-child { text-align: left; }
}
/* Form */
.picline-wr-form { scroll-margin-top: 1.5rem; }
.picline-wr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Block layout keeps the required star on the label line. */
.picline-wr-field { display: block; font-size: .95rem; font-weight: 700; }
.picline-wr-field input, .picline-wr-field textarea { display: block; width: 100%; margin-top: .35rem; }
.picline-wr-field > span, .picline-wr-req { color: var(--wr-err); }
.picline-wr-full { grid-column: 1 / -1; }
.picline-wr-field input, .picline-wr-field textarea { padding: .8rem .9rem; border: 2px solid var(--wr-line); border-radius: 8px; background: #fff; color: #02084a; font: inherit; font-size: 1rem; font-weight: 400; }
.picline-wr-field input:focus, .picline-wr-field textarea:focus { border-color: #02084a; outline: none; }
.picline-wr-field textarea { min-height: 120px; resize: vertical; }
.picline-wr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.picline-wr-check { display: flex; align-items: flex-start; gap: .625rem; margin: 1.25rem 0 0; font-size: .95rem; }
.picline-wr-check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .15em; accent-color: #02084a; }
.picline-wr-check + .picline-wr-check { margin-top: .6rem; }
.picline-wr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.picline-wr-foot small { opacity: .72; }
.picline-wr-send { padding: 1rem 1.5rem; border: 0; border-radius: 4px; background: #02084a; color: #fff; font: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer; }
.picline-wr-send:hover { background: #F7E229; color: #02084a; }
.picline-wr-send[disabled] { cursor: wait; opacity: .6; }
.picline-wr-msg { display: none; margin-top: 1rem; padding: .875rem 1rem; border-radius: 8px; font-weight: 700; }
.picline-wr-msg:focus { outline: none; }
.picline-wr-msg.ok { display: block; background: #eef1fa; color: var(--wr-ok); }
.picline-wr-msg.err { display: block; background: #fbeaea; color: var(--wr-err); }
.picline-wr button:focus-visible, .picline-wr input:focus-visible, .picline-wr textarea:focus-visible, .picline-wr a:focus-visible { outline: 3px solid #02084a; outline-offset: 3px; }
.picline-wr-sum a:focus-visible { outline-color: #F7E229; }
/* Summary on computers (29.09.2026 evening, Andrea: it was cut off at the bottom of his screen): a little more compact,
   below the WordPress admin bar, and never higher than the window (it scrolls inside only if it still does not fit).
   Divided by .9 because of the 90 % view from 1024 px. */
@media (min-width: 1101px) {
    .picline-wr-sum {
        top: calc(16px + var(--wp-admin--admin-bar--height, 0px));
        max-height: calc((100vh - 32px - var(--wp-admin--admin-bar--height, 0px)) / .9);
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 30%) transparent;
        padding: 1.25rem 1.5rem 1.35rem; border-top-width: 5px;
    }
    .picline-wr-sum h3 { font-size: 1.25rem; }
    .picline-wr-lines { margin-top: .85rem; }
    .picline-wr-lines li { padding: .35rem 0; }
    .picline-wr-totalblock { margin-top: .9rem; padding: .7rem .9rem; }
    .picline-wr-totalblock > div { padding: .2rem 0; }
    .picline-wr-totalblock > .is-end { margin-top: .35rem; padding-top: .55rem; font-size: 1.125rem; }
    .picline-wr-totalblock > .is-end dd { font-size: 1.35rem; }
    .picline-wr-monthly { margin-top: .75rem; padding: .6rem .85rem; }
    .picline-wr-cta { margin-top: .9rem; padding: .8rem 1.25rem; }
    .picline-wr-sumnote { margin-top: .7rem; font-size: .8rem; line-height: 1.45; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .picline-wr-grid { grid-template-columns: minmax(0, 1fr); }
    .picline-wr-sum { position: static; }
    .picline-wd-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
    .picline-wd-cards, .picline-wd-care, .picline-wd-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .picline-wr-opts, .picline-wr-included .picline-wr-checklist, .picline-wr-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
    .picline-wd-benefits { grid-template-columns: minmax(0, 1fr); }
    .picline-wd-cards > .picline-wd-card > .picline-wd-price { position: static; align-self: flex-start; margin-bottom: 1rem; }
    .picline-wr-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .picline-wd-cards > .picline-wd-card, .picline-wr-opt > span { transition: none; }
}

/* ---------- Page «WordPress Website für KMU» (/leistungen/wordpress-website-kmu/, since 28.09.2026) ---------- */
/* Same design system as the webdesign page; only the parts it does not have yet. */
.picline-wd-hero-copy > .picline-wd-byline { margin-top: .75rem; font-size: .95rem; opacity: .75; }
.picline-wp-text .picline-inner > h2, .picline-wp-vergleich .picline-inner > h2, .picline-wp-share h2 { margin-top: 0; }
.picline-wp-text .picline-inner > p { max-width: 75ch; }
/* Text left, ring chart right; on phones the chart (with the legend below the ring) follows the text. */
.picline-wp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.picline-wp-split > * { min-width: 0; margin-block: 0; }
.picline-wp-split-copy > * + * { margin-top: 1rem; }
.picline-wp-chart { margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid #E3E6F2; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 16px 36px -16px rgb(2 8 74 / 28%); }
.picline-wp-chart-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.picline-wp-chart svg { display: block; width: 100%; max-width: 260px; height: auto; margin-inline: auto; }
/* Fine navy separators between the segments and outline inside and outside the ring. */
.picline-wp-ring-lines { fill: none; stroke: #02084a; stroke-width: .3; }
.picline-wp-ring-value { fill: #02084a; font-size: 5.2px; font-weight: 800; }
.picline-wp-ring-label { fill: #02084a; font-size: 3.2px; opacity: .7; }
ul.picline-wp-legend { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.picline-wp-legend li { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.picline-wp-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.picline-wp-swatch { flex-shrink: 0; width: .9rem; height: .9rem; border-radius: 3px; box-shadow: inset 0 0 0 1px #02084a; }
.picline-wp-chart figcaption { margin-top: 1.25rem; font-size: .875rem; opacity: .75; }
.picline-wp-chart figcaption a { color: inherit; }
/* Comparison table: WordPress column lightly highlighted in yellow; scrolls sideways on narrow screens. */
.picline-wp-compare { margin: clamp(1.5rem, 3vw, 2.25rem) 0 1.5rem; overflow-x: auto; }
.picline-wp-compare table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #E3E6F2; border-radius: 16px; background: #fff; }
.picline-wp-compare th, .picline-wp-compare td { padding: .9rem 1.25rem; border: 0; border-bottom: 1px solid #E3E6F2; text-align: left; vertical-align: top; }
.picline-wp-compare tbody tr:last-child > * { border-bottom: 0; }
.picline-wp-compare thead th { background: #02084a; color: #fff; font-weight: 700; }
.picline-wp-compare thead th:nth-child(2) { background: #F7E229; color: #02084a; }
.picline-wp-compare tbody th { font-weight: 700; }
.picline-wp-compare tbody td:nth-child(2) { background: rgb(247 226 41 / 16%); font-weight: 600; }
.picline-wp-vergleich .picline-inner > p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) { .picline-wp-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .picline-wp-chart-body { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Service pages from entwuerfe/leistungsseiten (Social Media, Fotograf, KI, … since 28.09.2026) ---------- */
/* Built by the script in backups/leistungsseiten-…; same building blocks as the webdesign page, without calculator. */
.picline-wd-hero-copy > .picline-wd-updated { margin-top: .75rem; font-size: .95rem; opacity: .75; }
/* «Kurz erklärt»: narrow white box with a yellow line on the left, directly below the hero. */
/* Same space above and below (29.09.2026, Andrea): since the sections alternate white / light blue, the box needs
   its own space at the bottom (before: 0, when all sections below the hero were white). */
.picline-section.picline-wd-kurz { padding-block: clamp(2rem, 4vw, 3rem) !important; }
.picline-wd-kurz-box { margin: 0; padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem); border: 1px solid #E3E6F2; border-left: 4px solid #F7E229; border-radius: 12px; background: #fff; box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 16px 36px -16px rgb(2 8 74 / 22%); }
.picline-wd-kurz-box > p { max-width: 80ch; margin: 0; font-weight: 700; line-height: 1.6; }
/* Box as wide as its text and centred, text centred (29.09.2026, Andrea). */
.picline-wd-kurz-box { width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; }
.picline-section .picline-wd-kurz-box > p { margin-inline: auto; text-align: center; }
.picline-section.picline-wd-fuerwen .picline-inner > h2 { margin-top: 0; }
/* Before 29.09.2026 «Für wen» had padding-bottom 0 (white sections in a row, one gap between them). Since the
   sections alternate white / light blue it keeps the normal section padding at the bottom, like at the top. */
.picline-section.picline-wd-fuerwen .picline-inner > p { max-width: 80ch; }
/* Offers: cards like the webdesign services, badge «nach Offerte» or price. */
.picline-wd-angebote .picline-inner > h2 { margin-top: 0; }
.picline-wd-angebote .picline-wd-cards { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.picline-wd-angebote .picline-wd-card > p.picline-wd-price ~ p { margin-top: .75rem; font-size: 1.0625rem; opacity: .85; }
.picline-wd-angebote .picline-inner > .picline-wd-note { margin-top: 1.5rem; }
.picline-wd-beispiel .picline-inner > h2, .picline-wd-ablauf .picline-inner > h2 { margin-top: 0; }
/* Placeholders stay visible for Andrea: yellow dashed box, also inline inside a sentence. */
.picline-placeholder-inline { display: inline; padding: .1rem .4rem; border: 2px dashed #02084a; border-radius: 6px; background: #F7E229; color: #02084a; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.picline-section .picline-placeholder { margin-top: 1.25rem; }
/* FAQ with H3 questions (accordion by assets/webdesign.js; without JS all answers stay open). Since 30.09.2026 the
   questions may also be H4, below H3 topic groups (rule book: from 8 questions in groups; Karriereseite 381). */
.picline-faq-list > .picline-faq-item { margin: 0; padding-block: 1.25rem; border-bottom: 1px solid rgb(2 8 74 / 20%); }
.picline-faq-item > :is(h3, h4) { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.picline-faq-item > :is(h3, h4) > button { display: flex; align-items: baseline; gap: .6rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.picline-faq-item > :is(h3, h4) > button::before { content: ""; flex-shrink: 0; width: 0; height: 0; border-block: .32em solid transparent; border-left: .5em solid currentColor; transform: translateY(-.05em); transition: transform .15s; }
.picline-faq-item > :is(h3, h4) > button[aria-expanded="true"]::before { transform: translateY(-.05em) rotate(90deg); }
.picline-faq-item > :is(h3, h4) > button:focus-visible { outline: 3px solid #02084a; outline-offset: 4px; }
.picline-faq-item p { max-width: 65ch; margin: .75rem 0 0; }
.picline-faq-answer[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .picline-faq-item > :is(h3, h4) > button::before { transition: none; } }
/* Service pages (sections .picline-lp): body text, card texts, steps and FAQ questions at least 16 px, full navy
   #02084a instead of the lighter 85 % opacity, line height 1.6 (Andrea's request 28.09.2026). */
.picline-lp.has-navy-color :is(p, li):not(.picline-eyebrow):not(.picline-wd-price):not(.picline-step-number),
.picline-lp .picline-faq-item > :is(h3, h4) { color: #02084a; opacity: 1; line-height: 1.6; }
/* Card texts at least 16 px as seen on screen: from 1024 px the site is shown at 90 % (zoom .9 in picline.css), so the
   value there is 16 / 0.9 px. */
.picline-section.picline-lp .picline-wd-card > p:not(.picline-wd-price):not(.picline-wd-pills-label):not(.picline-wd-more):not(.picline-wd-care-note) { font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 1024px) {
    .picline-section.picline-lp .picline-wd-card > p:not(.picline-wd-price):not(.picline-wd-pills-label):not(.picline-wd-more):not(.picline-wd-care-note),
    .picline-lp .picline-faq-item > :is(h3, h4) { font-size: calc(1rem / .9); }
}
/* KI page: waiting list bar (yellow, text left, form right; on phones below each other). */
.picline-wd-bar-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.picline-wd-bar-layout > * { min-width: 0; margin-block: 0; }
.picline-wd-bar-copy > * { margin-block: 0; }
.picline-wd-bar-copy > * + * { margin-top: 1rem; }
.picline-section .picline-wd-bar-copy > h2 { margin-top: .75rem; }
.picline-wd-bar-badge { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: #02084a; color: #F7E229 !important; font-size: .8125rem !important; font-weight: 800; letter-spacing: .08em; line-height: 1.2 !important; }
.picline-wd-bar-form { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: 16px; background: #fff; box-shadow: 0 16px 36px -16px rgb(2 8 74 / 35%); }
.picline-wl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.picline-wl label { display: grid; gap: .35rem; font-size: 1rem; font-weight: 700; color: #02084a; }
.picline-wl label small { font-weight: 400; opacity: .7; }
.picline-wl-wide { grid-column: 1 / -1; }
.picline-wl input[type="text"], .picline-wl input[type="email"], .picline-wl input[type="tel"], .picline-wl select { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 2px solid #E3E6F2; border-radius: 10px; background: #fff; color: #02084a; font: inherit; font-weight: 400; }
.picline-wl :is(input, select):focus-visible { outline: 3px solid #02084a; outline-offset: 2px; border-color: #02084a; }
.picline-wl-fax { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.picline-wl .picline-wl-check { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; font-weight: 400; line-height: 1.5; }
.picline-wl-check input { width: 20px; height: 20px; margin-top: .15rem; flex-shrink: 0; accent-color: #02084a; }
.picline-wl-check a { color: inherit; }
.picline-wl-send { margin-top: 1.25rem; padding: 1rem 1.5rem; border: 0; border-radius: 8px; background: #02084a; color: #fff; font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.picline-wl-send:hover { background: #1a2270; }
.picline-wl-send:focus-visible { outline: 3px solid #02084a; outline-offset: 3px; }
.picline-wl-send[disabled] { opacity: .6; cursor: wait; }
.picline-wl-msg { display: none; margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 8px; font-weight: 700; }
.picline-wl-msg.ok { display: block; background: #eef1fa; }
.picline-wl-msg.err { display: block; background: #fbeaea; color: #8a1c1c; }
/* One badge for a whole group of cards (KI workshop «nach Offerte»). */
.picline-wd-angebote .picline-inner > .picline-wd-section-price { display: inline-block; margin-top: 1.5rem; padding: .35rem .8rem; border-radius: 999px; background: #F7E229; font-size: .95rem; font-weight: 700; }
@media (max-width: 781px) {
    .picline-wd-bar-layout, .picline-wl-fields { grid-template-columns: minmax(0, 1fr); }
}
.picline-wl input[type="text"], .picline-wl input[type="email"], .picline-wl input[type="tel"], .picline-wl select { box-sizing: border-box; }
/* Placeholders on the yellow waiting list bar: white box so they stand out. */
.picline-wd-bar .picline-placeholder { background: #fff; }

/* ---------- Service page hero with image (Social Media, since 28.09.2026) ---------- */
/* Text left, image right; on phones the image comes after the buttons. Image loaded eagerly (functions.php). */
.picline-wd-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.picline-wd-hero-grid > .wp-block-group { min-width: 0; margin-block: 0; }
.picline-wd-hero-media { max-width: 520px; justify-self: end; width: 100%; }
/* The photo is a cut-out (transparent background): soft yellow light behind the person, lower edge faded out by CSS
   (the file itself stays unchanged). */
.picline-section .picline-wd-hero-media figure { margin: 0; background: radial-gradient(closest-side at 55% 42%, rgb(247 226 41 / 22%), rgb(247 226 41 / 0%)); }
.picline-section .picline-wd-hero-media img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
@media (max-width: 1000px) {
    .picline-wd-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .picline-wd-hero-media { justify-self: start; max-width: 460px; }
}
/* Rotating word line under the H1: one word after the other in yellow; all four words are in the HTML.
   Reduced motion: still, all words side by side. */
.picline-wd-hero-copy > .picline-wd-rotator { display: grid; margin-top: .75rem; color: #F7E229; font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); font-weight: 800; line-height: 1.2; }
.picline-wd-rotator > span { grid-area: 1 / 1; opacity: 0; animation: picline-rotator 10s ease-in-out infinite; }
.picline-wd-rotator > span:nth-child(2) { animation-delay: 2.5s; }
.picline-wd-rotator > span:nth-child(3) { animation-delay: 5s; }
.picline-wd-rotator > span:nth-child(4) { animation-delay: 7.5s; }
@keyframes picline-rotator {
    0% { opacity: 0; transform: translateY(.35em); }
    4%, 22% { opacity: 1; transform: none; }
    26%, 100% { opacity: 0; transform: translateY(-.35em); }
}
/* Five words (Bildbearbeitung, 29.09.2026): same 2.5 s per word, cycle 12.5 s; lines with four words stay unchanged. */
@media (prefers-reduced-motion: no-preference) {
    .picline-wd-rotator > span:first-child:nth-last-child(5),
    .picline-wd-rotator > span:first-child:nth-last-child(5) ~ span { animation-name: picline-rotator-5; animation-duration: 12.5s; }
    .picline-wd-rotator > span:nth-child(5) { animation-delay: 10s; }
}
@keyframes picline-rotator-5 {
    0% { opacity: 0; transform: translateY(.35em); }
    3.2%, 17.6% { opacity: 1; transform: none; }
    20.8%, 100% { opacity: 0; transform: translateY(-.35em); }
}
/* Eight words (Webdesign page 50, 29.09.2026, Andrea's list): same 2.5 s per word, cycle 20 s; lines with four or five
   words stay unchanged. */
@media (prefers-reduced-motion: no-preference) {
    .picline-wd-rotator > span:first-child:nth-last-child(8),
    .picline-wd-rotator > span:first-child:nth-last-child(8) ~ span { animation-name: picline-rotator-8; animation-duration: 20s; }
    .picline-wd-rotator > span:nth-child(6) { animation-delay: 12.5s; }
    .picline-wd-rotator > span:nth-child(7) { animation-delay: 15s; }
    .picline-wd-rotator > span:nth-child(8) { animation-delay: 17.5s; }
}
/* Very narrow phones (below 360 px): slightly smaller word line, so long words like «Social Media Kurs für KMU»
   (Workshops, 29.09.2026) stay on one line. */
@media (max-width: 359px) { .picline-wd-hero-copy > .picline-wd-rotator { font-size: 1.25rem; } }
@keyframes picline-rotator-8 {
    0% { opacity: 0; transform: translateY(.35em); }
    2%, 11% { opacity: 1; transform: none; }
    13%, 100% { opacity: 0; transform: translateY(-.35em); }
}
@media (prefers-reduced-motion: reduce) {
    .picline-wd-hero-copy > .picline-wd-rotator { display: flex; flex-wrap: wrap; gap: 0 .6em; }
    .picline-wd-rotator > span { grid-area: auto; opacity: 1; animation: none; transform: none; }
    .picline-wd-rotator > span:not(:last-child)::after { content: "·"; margin-left: .6em; }
}

/* Social Media «Warum bleiben wir im Hintergrund?» (#hintergrund): two intro paragraphs; the second looks like the first
   (introduction under the H2) and both stay together above the three cards. */
.picline-section.picline-wd-hintergrund .picline-inner > h2 + p { margin-bottom: 0; }
.picline-section.picline-wd-hintergrund .picline-inner > h2 + p + p { max-width: 80ch; margin-top: 1em; margin-bottom: 48px; font-size: 1.25rem; line-height: 1.6; }
@media (max-width: 768px) {
    .picline-section.picline-wd-hintergrund .picline-inner > h2 + p + p { margin-bottom: 32px; font-size: 1.0625rem; }
}
/* ---------- Fotograf Zug, Fassung 3 (28.09.2026, page 52): Vorteile-Leiste, list with yellow dashes, offer cards in
   3 columns with a text link, image grid #bilder, link cards «Aus einer Hand», update date in the contact section.
   Text sizes: at least 16 px visible, i.e. 16 / .9 px from 1024 px because of the 90 % view. ---------- */
.picline-wd-vorteile { padding-block: clamp(1.75rem, 3vw, 2.5rem) !important; border-bottom: 1px solid #E3E6F2; }
.picline-wd-vorteile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
@media (max-width: 1100px) { .picline-wd-vorteile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } }
@media (max-width: 599px) { .picline-wd-vorteile-grid { grid-template-columns: minmax(0, 1fr); } }
.picline-wd-vorteil { min-width: 0; margin: 0; padding: .25rem clamp(1rem, 2vw, 1.75rem); border-left: 1px solid #E3E6F2; }
.picline-wd-vorteil:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 1100px) { .picline-wd-vorteil:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 599px) { .picline-wd-vorteil { padding: 0 0 1.25rem; border-left: 0; border-bottom: 1px solid #E3E6F2; } .picline-wd-vorteil:last-child { padding-bottom: 0; border-bottom: 0; } }
.picline-wd-vorteil > p { margin: 0; }
.picline-wd-vorteil > .picline-wd-vorteil-title { font-size: 1.25rem; line-height: 1.3; }
.picline-wd-vorteil > .picline-wd-vorteil-title::after { content: ""; display: block; width: 32px; height: 3px; margin: .6rem 0 .7rem; border-radius: 2px; background: #F7E229; }
.picline-section.picline-lp .picline-wd-vorteil > p:not(.picline-wd-vorteil-title) { font-size: 1rem; line-height: 1.55; }

ul.picline-wd-dash { display: grid; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.picline-wd-dash li { position: relative; margin: 0; padding-left: 1.75rem; font-size: 1.0625rem; line-height: 1.55; }
.picline-wd-dash li::before { content: ""; position: absolute; left: 0; top: .78em; width: 1rem; height: 3px; border-radius: 2px; background: #F7E229; }

.picline-wd-cards.picline-wd-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .picline-wd-cards.picline-wd-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .picline-wd-cards.picline-wd-cards-3 { grid-template-columns: minmax(0, 1fr); } }
.picline-wd-cards-3 .picline-wd-price { font-size: 1rem; }
.picline-wd-card > .picline-wd-cardlink { margin-top: auto !important; padding-top: 1rem; font-size: 1rem; font-weight: 700; opacity: 1 !important; }
.picline-wd-cardlink a { color: #02084a; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-wd-cardlink a::after { content: " \2192"; }

.picline-wd-bilder .picline-inner > p { max-width: 80ch; }
.picline-wd-bilder .picline-work-cards { margin-top: calc(24px + .8em); }
.picline-wd-bilder .picline-work-cards + .wp-block-buttons { margin-top: calc(24px + .8em - 16px); }

.picline-wd-vorbereitung .picline-inner > h2 { margin-top: 0; }
.picline-wd-linkcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: calc(24px + .8em); }
@media (max-width: 899px) { .picline-wd-linkcards { grid-template-columns: minmax(0, 1fr); } }
.picline-wd-linkcard { min-width: 0; margin: 0; padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px solid #E3E6F2; border-left: 4px solid #F7E229; border-radius: 12px; background: #fff; }
.picline-wd-linkcard > * { margin: 0; }
.picline-section .picline-wd-linkcard > h3 { font-size: clamp(1.125rem, .95rem + .4vw, 1.375rem); }
.picline-wd-linkcard > h3 a { color: #02084a; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-wd-linkcard > h3 a::after { content: " \2192"; }
.picline-wd-linkcard > p { margin-top: .6rem; font-size: 1.0625rem; line-height: 1.55; }
.picline-contact .picline-contact-copy > .picline-wd-updated { margin-top: 1.25rem; font-size: 1rem; opacity: .75; }
/* Kicker of the Fotograf Zug hero at 16 px (only this page; the shared kicker style stays as it is). */
body.page-id-52 .picline-wd-hero .picline-eyebrow { font-size: 1rem; }
/* Placeholder boxes: width 100 % includes padding and border (on phones they stood 16 px over the edge). */
body.page-id-52 .picline-inner > p.picline-placeholder { box-sizing: border-box; }

@media (min-width: 1024px) {
    .picline-section.picline-lp .picline-wd-vorteil > p:not(.picline-wd-vorteil-title), .picline-wd-cards-3 .picline-wd-price,
    .picline-wd-card > .picline-wd-cardlink, .picline-contact .picline-contact-copy > .picline-wd-updated,
    .picline-wd-dash li, .picline-wd-linkcard > p, body.page-id-52 .picline-wd-hero .picline-eyebrow { font-size: calc(16px / .9); }
}
/* Fotograf Zug: «Was ist dabei?» has 4 cards, so one row of 4 on wide screens instead of 3 + 1. */
@media (min-width: 1101px) { body.page-id-52 #dabei .picline-wd-features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---------- Fachkräfte gewinnen (page 53, /fachkraefte-gewinnen/, 28.09.2026): built like the Social Media page
   (picline-wd / picline-lp components) plus image placeholders, the terms table and five steps. ---------- */
/* Grey image placeholders in the real aspect ratio until the photos come ([BILD: Motiv]). */
.picline-wd-bild {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0;
    padding: 1rem; border-radius: 16px; background: #d9dde6; color: #02084a !important; font-weight: 700; text-align: center !important; opacity: 1 !important;
}
.picline-wd-bild-hoch { aspect-ratio: 4 / 5; }
.picline-wd-bild-quer { aspect-ratio: 3 / 2; }
.picline-wd-hero-media > .picline-wd-bild { max-width: 460px; margin-inline: auto; }
body.page-id-53 .picline-lp .picline-inner > p.picline-placeholder { box-sizing: border-box; }
/* Four problem cards: one row on wide screens. */
@media (min-width: 1101px) { .picline-wd-warum .picline-wd-features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.picline-wd-warum .picline-wd-features + p, .picline-wd-included .picline-wd-features + p { max-width: 80ch; margin-top: calc(24px + .8em); font-weight: 700; }
/* Summary under the three terms on Fachkräfte gewinnen (53, since 30.09.2026), like the line under the problem cards. */
.picline-wd-begriffe .picline-wd-features + .picline-wd-begriffe-fazit { max-width: 80ch; margin-top: calc(24px + .8em); font-weight: 700; }
/* Process directly under the H2 without an intro (53 since 30.09.2026): the yellow step lines touched the heading (0 px).
   Same space as on the subpages of Webdesign (.picline-sf-seite in spezialfunktionen.css). */
.picline-wd .picline-inner > h2 + .picline-step-grid { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
/* Person section whose portrait is switched off (picline-ausgeblendet, e.g. Sandra Jauslin on Workshops 56 until a
   released portrait exists): the text takes the whole row instead of the narrow image column. */
.picline-person-layout:not(:has(> .picline-portrait)) { grid-template-columns: minmax(0, 1fr); }
.picline-person-layout:not(:has(> .picline-portrait)) > .picline-person-copy { max-width: 80ch; }
/* Place for a photo that is switched off until the real image exists (Workshops 56: team photo after the hero). */
.picline-wd-bildplatz { margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Text link with arrow directly in a section (not in a card), e.g. «Weitere Workshops anfragen» on 56. */
.picline-wd .picline-inner > p.picline-wd-cardlink { font-weight: 700; }
/* Small line in a section or card, e.g. «Picline begleitet KMU in Zug, …» and «Daraus entsteht ein klares
   Arbeitgeberversprechen.» on 53 (30.09.2026): quieter by opacity; never under 16 px as seen on screen (Andrea's
   minimum for service pages), so in a section 16 px instead of the larger body text, in a card the card size. The
   selectors beat the navy/opacity rule for .picline-lp above. */
.picline-wd .picline-inner > p.picline-wd-klein { font-size: 1rem; }
@media (min-width: 1024px) { .picline-wd .picline-inner > p.picline-wd-klein { font-size: calc(16px / .9); } }
.picline-lp.has-navy-color .picline-inner > p.picline-wd-klein:not(.picline-eyebrow):not(.picline-wd-price):not(.picline-step-number),
.picline-lp.has-navy-color .picline-wd-card > p.picline-wd-klein:not(.picline-eyebrow):not(.picline-wd-price):not(.picline-step-number) { opacity: .75; }
.picline-wd .picline-wd-card > p + p.picline-wd-klein { margin-top: .5rem; }
/* KI (54, 30.09.2026): the app for construction companies is only a compact teaser now (white card with yellow line,
   text left, unchanged waiting list form right; below 900 px one column, see .picline-wd-bar-layout). */
.picline-wd-app-teaser { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid #E3E6F2; border-left: 4px solid #F7E229; border-radius: 16px; background: #fff; box-shadow: 0 16px 36px -24px rgb(2 8 74 / 30%); }
.picline-wd-app-teaser .picline-wd-bar-copy > h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); }
.picline-wd-app-teaser .picline-wd-bar-form { padding: 0; border-radius: 0; box-shadow: none; }
.picline-wd-app-teaser .picline-wd-bar-form > h3 { margin: 0 0 1rem; font-size: 1.125rem; }
/* Short list in two columns from 700 px (KI 54, «Wo kann KI Deinem KMU heute helfen?»). */
@media (min-width: 700px) { .picline-wd ul.picline-wd-dash-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); max-width: 1000px; } }
/* Terms table: real table on wide screens, stacked cards on phones. */
.picline-wd-begriffe .wp-block-table { margin: calc(24px + .8em) 0 0; overflow-x: visible; }
.picline-wd-begriffe table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #E3E6F2; border-radius: 12px; background: #fff; overflow: hidden; }
.picline-wd-begriffe th, .picline-wd-begriffe td { padding: .9rem 1.1rem; border: 0; border-bottom: 1px solid #E3E6F2; text-align: left; vertical-align: top; line-height: 1.55; }
.picline-wd-begriffe thead th { background: #02084a; color: #fff; font-weight: 700; }
.picline-wd-begriffe tbody tr:last-child td { border-bottom: 0; }
.picline-wd-begriffe td:first-child { width: 22%; font-weight: 700; }
.picline-wd-begriffe td:last-child { width: 16%; white-space: nowrap; }
.picline-wd-begriffe h3 { margin-top: clamp(2rem, 4vw, 3rem); }
.picline-wd-begriffe .picline-inner > h3 + p { max-width: 80ch; }
@media (max-width: 767px) {
    .picline-wd-begriffe table, .picline-wd-begriffe tbody, .picline-wd-begriffe tr, .picline-wd-begriffe td { display: block; width: auto !important; }
    .picline-wd-begriffe table { border: 0; background: none; overflow: visible; }
    .picline-wd-begriffe thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .picline-wd-begriffe tr { margin-bottom: 12px; border: 1px solid #E3E6F2; border-left: 4px solid #F7E229; border-radius: 12px; background: #fff; }
    .picline-wd-begriffe td { padding: .35rem 1rem; border: 0; white-space: normal !important; }
    .picline-wd-begriffe td:first-child { padding-top: .9rem; font-size: 1.125rem; }
    .picline-wd-begriffe td:last-child { padding-bottom: .9rem; }
    .picline-wd-begriffe td:nth-child(2)::before { content: "Was es bedeutet: "; font-weight: 700; }
    .picline-wd-begriffe td:nth-child(3)::before { content: "Wirkung: "; font-weight: 700; }
}
/* Five steps on wide screens. */
@media (min-width: 1100px) { .picline-wd-ablauf .picline-step-grid.picline-wd-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.5rem, 2.2vw, 2.5rem); } }
/* Update date under the FAQ. */
.picline-faq .picline-inner > .picline-wd-updated { margin-top: 1.5rem; font-size: 1rem; opacity: .75; }
@media (min-width: 1024px) {
    .picline-faq .picline-inner > .picline-wd-updated, .picline-wd-begriffe th, .picline-wd-begriffe td { font-size: calc(16px / .9); }
}
/* ---------- Grafikdesign Zug (page 55, 29.09.2026): projects #projekte (logo wall and campaigns) ---------- */
.picline-wd-projekte-section { scroll-margin-top: 1.5rem; }
/* Yellow brush stroke under «Logo Design» / «Kampagnen Design»: CSS background, slightly slanted. */
.picline-wd-projekte-section .picline-inner > h3 {
    display: inline-block; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0 .15em .25em;
    background: linear-gradient(-3deg, transparent 0 10%, #F7E229 10% 38%, transparent 38%) left bottom / 100% .9em no-repeat;
    font-size: clamp(1.375rem, 1.1rem + .7vw, 1.875rem); line-height: 1.2;
}
.picline-wd-projekte-section .picline-inner > h3 + .picline-wd-projekte { margin-top: 1.5rem; }
.picline-wd-projekte { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.picline-wd-projekt {
    display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; margin: 0; padding: 1.5rem;
    background: #fff; border: 1px solid #E3E6F2; border-bottom: 3px solid transparent; border-radius: 8px;
    box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 12px 28px -14px rgb(2 8 74 / 22%);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.picline-wd-projekt:hover { transform: translateY(-4px); border-bottom-color: #F7E229; box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 20px 40px -16px rgb(2 8 74 / 30%); }
@media (prefers-reduced-motion: reduce) { .picline-wd-projekt, .picline-wd-projekt:hover { transition: none; transform: none; } }
.picline-wd-projekt > * { margin: 0; }
.picline-wd-projekt-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.picline-wd-projekt-media .wp-block-image { margin: 0; max-width: 100%; }
.picline-wd-projekt-media img { display: block; max-width: 100% !important; height: auto !important; object-fit: contain; border-radius: 4px; }
.picline-wd-projekt > .picline-wd-projekt-name { margin-top: 1.25rem; font-size: 1.0625rem; }
.picline-wd-projekt > .picline-wd-projekt-leistung { margin-top: .25rem; font-size: 1rem; opacity: .8 !important; }
/* Logo wall: 3 / 2 / 1 per row, same height, logo centred with generous space, never cropped or stretched. */
.picline-wd-projekte-logos > .picline-wd-projekt { flex: 0 0 calc((100% - 48px) / 3); }
.picline-wd-projekte-logos .picline-wd-projekt-media { height: 200px; padding: 1rem 1.5rem; }
.picline-wd-projekte-logos .picline-wd-projekt-media img { max-height: 168px; width: auto !important; }
@media (max-width: 1099px) { .picline-wd-projekte-logos > .picline-wd-projekt { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 599px) { .picline-wd-projekte-logos > .picline-wd-projekt { flex-basis: 100%; } .picline-wd-projekte-logos .picline-wd-projekt-media { height: 160px; } .picline-wd-projekte-logos .picline-wd-projekt-media img { max-height: 128px; } }
/* Campaigns: two large cards side by side, stacked on phones; images at most in their original size. */
.picline-wd-projekte-kampagnen { align-items: stretch; }
.picline-wd-projekte-kampagnen > .picline-wd-projekt { flex: 0 0 calc((100% - 24px) / 2); }
.picline-wd-projekte-kampagnen .picline-wd-projekt-media { flex: 1; justify-content: flex-start; }
@media (max-width: 799px) { .picline-wd-projekte-kampagnen > .picline-wd-projekt { flex-basis: 100%; } }
.picline-wd-projekte-section .picline-inner > .picline-wd-projekte + p, .picline-wd-projekte-section .picline-inner > .picline-wd-projekte + p + p { margin-top: calc(24px + .8em); max-width: 80ch; }
.picline-wd-projekte-section .wp-block-buttons { margin-top: calc(24px + .8em); }
@media (min-width: 1024px) {
    .picline-wd-projekt > .picline-wd-projekt-leistung { font-size: calc(16px / .9); }
    .picline-wd-projekt > .picline-wd-projekt-name { font-size: calc(17px / .9); }
}/* Grafikdesign (55): placeholder boxes within the width; date, badge and kicker at least 16 px visible. */
body.page-id-55 .picline-lp .picline-inner > p.picline-placeholder { box-sizing: border-box; }
body.page-id-55 .picline-wd-hero-copy > .picline-wd-updated, body.page-id-55 .picline-wd-price, body.page-id-55 .picline-wd-hero .picline-eyebrow { font-size: 1rem; }
@media (min-width: 1024px) {
    body.page-id-55 .picline-wd-hero-copy > .picline-wd-updated, body.page-id-55 .picline-wd-price, body.page-id-55 .picline-wd-hero .picline-eyebrow { font-size: calc(16px / .9); }
}
/* All service pages (29.09.2026): yellow check boxes and the section badge stay within the width on phones. */
.picline-lp .picline-inner > p.picline-placeholder, .picline-lp p.picline-placeholder { box-sizing: border-box; max-width: 100%; }
.picline-lp .picline-wd-section-price { box-sizing: border-box; max-width: 100%; white-space: normal; }

/* Workshops (page 56, 29.09.2026): platform cards with H4 titles (under the H3), photo placeholder under the hero,
   portrait placeholder of Sandra Jauslin in the «Persönlich» layout. */
.picline-section .picline-wd-feature > h4 { margin: 0; font-size: clamp(1.125rem, .95rem + .4vw, 1.375rem); line-height: 1.25; }
.picline-wd-included .picline-inner > h3 { margin-top: clamp(2rem, 4vw, 3rem); }
.picline-wd-workshopbild .picline-inner > .picline-wd-bild:first-child { margin-bottom: clamp(2rem, 4vw, 3rem); }
.picline-portrait > .picline-wd-bild { width: 100%; }
.picline-section.picline-wd-included .picline-inner > h3 { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.875rem); line-height: 1.2; }

/* Webdesign (page 50): «Referenzen Websites» (#referenzen, 29.09.2026), cards from picline.css like on the start page;
   same space between title and cards as there. */
.picline-wd-referenzen .picline-inner > h2 + .picline-web-refs { margin-top: calc(24px + .8em); }
/* On a light blue section the light blue image area of the cards would merge with the background: white there,
   with a fine line to the text part (start page, white section: unchanged). */
.picline-section[style*="#eef1fa"] .picline-web-ref > .picline-web-ref-media { background: #fff; border-bottom: 1px solid #E3E6F2; }

/* ---------- Webdesign (page 50), new order of 29.09.2026 (Andrea's brief) ----------
   Hero with the Google badge of the front page (styles in picline.css), «Alles aus einer Hand» (#aus-einer-hand, cards
   like #dabei before), line «Immer inklusive» under the packages, five steps 01 to 05, Kosten-FAQ under the calculator.
   Build script and backup: backups/webdesign-neubau-20260929-214609/. */
.picline-section .picline-wd-hero-copy > p.picline-hero-rating { opacity: 1; }
.picline-wd-services .picline-inner > .picline-wd-immer { max-width: none; margin-top: calc(24px + .8em); font-size: 1.0625rem; line-height: 1.6; }
.picline-wd-ablauf-5 .picline-step-number { padding-left: 0; text-align: center; }
.picline-wd-calc .picline-inner > .picline-wd-kosten-titel { margin-top: clamp(3rem, 6vw, 5rem); }
.picline-wd-calc .picline-inner > .picline-wd-kosten-titel + .picline-faq-list { margin-top: 1.5rem; }
@media (min-width: 1024px) { .picline-wd-services .picline-inner > .picline-wd-immer { font-size: calc(17px / .9); } }/* Closing block: «Wer begleitet Dein Website-Projekt?» breaks between words, not after «Website-». */
.picline-wd.picline-contact .picline-contact-ich-text > h2 { text-wrap: balance; }

/* Three words (Fachkräfte gewinnen 53, 30.09.2026: Fachkräftemangel, Employer Branding, Social Recruiting): same 2.5 s
   per word, cycle 7.5 s; lines with four, five or eight words stay unchanged. */
@media (prefers-reduced-motion: no-preference) {
    .picline-wd-rotator > span:first-child:nth-last-child(3),
    .picline-wd-rotator > span:first-child:nth-last-child(3) ~ span { animation-name: picline-rotator-3; animation-duration: 7.5s; }
}
@keyframes picline-rotator-3 {
    0% { opacity: 0; transform: translateY(.35em); }
    5.33%, 29.33% { opacity: 1; transform: none; }
    34.67%, 100% { opacity: 0; transform: translateY(-.35em); }
}
/* Team photo (ID 316, transparent background) in «Persönlich begleitet» (53 since 30.09.2026): white behind it and the
   yellow frame of the contact page. */
.picline-portrait .picline-person-team img { box-sizing: border-box; border: 3px solid #F7E229; background: #fff; }
/* Calculator step 3 since 30.09.2026 (Andrea): group «Spezialfunktionen» with the three special functions of the page
   as tiles like step 4 (title, text, price, yellow when chosen), then «Weitere Funktionen» (details below). */
.picline-wr-step > .picline-wr-subtitle-gruppe { margin-top: 1.25rem; }
.picline-wr-step > .picline-wr-opts + .picline-wr-subtitle-gruppe { margin-top: 1.5rem; }

/* Calculator step 3 since 30.09.2026 afternoon (Andrea's brief «verständlich für KMU ohne technische Kenntnisse»):
   the three special solutions as larger tiles one below the other with a yellow edge on the left; then the button
   «Weitere Funktionen anzeigen +» and, when opened, four groups of compact cards (title, short benefit, price, box,
   «i» bottom right), each extra field right below its group; the free extras at the end of the step. */
.picline-wr-spezial { grid-template-columns: minmax(0, 1fr); }
.picline-wr-fkarte.is-spezial > span { padding: 1.1rem 3.5rem 1.1rem 1.25rem; border-left: 6px solid #F7E229; }
.picline-wr-fkarte.is-spezial > input:checked + span { border-left-color: #F7E229; }
.picline-wr-fkarte.is-spezial b { font-size: 1.125rem; line-height: 1.3; }
.picline-wr-fkarte.is-spezial small { font-size: .95rem; line-height: 1.45; }
.picline-wr-fkarte small { margin-bottom: .3rem; }
.picline-wr-fkarte em { margin-top: auto; }
.picline-wr-mehr {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 1rem 0 0;
    padding: .9rem 1rem .9rem 1.25rem; border: 2px solid #02084a; border-radius: 12px; background: #fff; color: #02084a;
    font: inherit; text-align: left; cursor: pointer; transition: background-color .15s;
}
.picline-wr-mehr:hover, .picline-wr-mehr[aria-expanded="true"] { background: #eef1fa; }
.picline-wr-mehr-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.picline-wr-mehr-text b { font-size: 1.0625rem; line-height: 1.3; }
.picline-wr-mehr-text small { font-size: .9rem; line-height: 1.4; opacity: .72; }
.picline-wr-mehr-text .picline-wr-mehr-gewaehlt { margin-top: .2rem; font-weight: 700; opacity: 1; }
.picline-wr-mehr-gewaehlt[hidden], .picline-wr-weitere[hidden] { display: none; }
.picline-wr-mehr-zeichen { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #02084a; color: #F7E229; font-size: 1.5rem; font-weight: 700; line-height: 1; }
/* Overview of the groups right below the button (30.09.2026, Andrea: after opening you did not see that more groups
   follow): light blue box, one pill per group with its number and an arrow down, a click jumps to the group; a group
   with a chosen function shows its number in yellow. */
.picline-wr-fnav { margin: .75rem 0 0; padding: .85rem 1rem 1rem; border-radius: 12px; background: #eef1fa; }
.picline-wr-fnav-titel { margin: 0 0 .6rem; font-size: .9rem; font-weight: 700; }
.picline-wr-fnav-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.picline-wr-fnav-knopf {
    display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem .45rem 1rem;
    border: 2px solid rgb(2 8 74 / 18%); border-radius: 999px; background: #fff; color: #02084a;
    font: inherit; font-size: .9rem; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .15s;
}
.picline-wr-fnav-knopf:hover { border-color: #02084a; }
.picline-wr-fnav-zahl { display: grid; place-items: center; flex: none; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: #02084a; color: #fff; font-size: .75rem; font-weight: 800; }
.picline-wr-fnav-knopf.has-wahl .picline-wr-fnav-zahl { background: #F7E229; color: #02084a; }
.picline-wr-fnav-pfeil { display: block; flex: none; }
/* «+» / «−» of the button drawn as two bars (the minus sign of the font sat too low in the circle); the character stays
   in the markup for the script, only invisible. */
.picline-wr-mehr-zeichen { position: relative; font-size: 0; }
.picline-wr-mehr-zeichen::before, .picline-wr-mehr-zeichen::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: #F7E229; transform: translate(-50%, -50%); }
.picline-wr-mehr-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.picline-wr-mehr[aria-expanded="true"] .picline-wr-mehr-zeichen::after { display: none; }
.picline-wr-fgruppe-titel { scroll-margin-top: calc(1rem + var(--wp-admin--admin-bar--height, 0px)); }
.picline-wr-fgruppe-titel:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .picline-wr-fnav-knopf { transition: none; } }
.picline-wr-fgruppe-titel { display: flex; align-items: center; gap: .6rem; margin: 1.5rem 0 .7rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.picline-wr-fgruppe-titel::before { content: ""; flex: none; width: 22px; height: 3px; border-radius: 2px; background: #F7E229; }
.picline-wr-fkarten { gap: 10px; }
.picline-wr-fkarten .picline-wr-fkarte > span { gap: .2rem; padding: .8rem 3rem .8rem 1rem; }
.picline-wr-fkarten .picline-wr-fkarte b { font-size: 1rem; line-height: 1.3; }
.picline-wr-fkarten .picline-wr-fkarte .picline-wr-box { top: .8rem; right: .95rem; }
/* «i» of the compact cards in line with the box above it; the bubble of a card in the right column may reach over the
   left one. */
.picline-wr-fkarten .picline-wr-optwrap.has-info > .picline-wr-info { bottom: .7rem; right: calc(.95rem - 3px); }
.picline-wr-fkarten .picline-wr-pop::before { right: calc(.95rem + 2px); }
@media (min-width: 782px) { .picline-wr-fkarten > .picline-wr-optwrap:nth-child(even) > .picline-wr-pop { width: min(440px, calc(200% + 10px)); } }
.picline-wr-step > .picline-wr-gratis { margin: 1.5rem 0 0; }
/* Phones: a little larger boxes. */
@media (max-width: 599px) { .picline-wr-fkarte .picline-wr-box { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .picline-wr-mehr { transition: none; } }

/* Calculator step 4 «Wer erstellt die Texte für Deine Website?» (30.09.2026, Andrea's brief): three exclusive tiles
   one below the other, compact (title, short text, price). The «i» button sits top right next to the tile (outside the
   label, assets/webdesign.js), the speech bubble opens below it over the following content, so the page keeps its
   height; closes on a second click, the X, a click outside or Escape. */
.picline-wr-opts[data-el="texte"] { grid-template-columns: minmax(0, 1fr); }
.picline-wr-optwrap { position: relative; min-width: 0; }
.picline-wr-optwrap > .picline-wr-opt { height: 100%; }
.picline-wr-optwrap.has-info > .picline-wr-opt > span { padding-right: 3.5rem; }
/* Single choice tiles (30.09.2026, Andrea: show that they can be clicked): round selector top right, white with a navy
   ring, navy with a yellow dot when chosen (the check boxes of the multiple choice tiles stay square). On tiles with
   an «i» the button sits bottom right. */
.picline-wr-radiotile > span { position: relative; padding-right: 3.25rem; }
.picline-wr-radio { position: absolute; top: 1rem; right: 1.125rem; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid #02084a; border-radius: 50%; background: #fff; }
.picline-wr-opt > input:checked + span .picline-wr-radio { background: #02084a; }
.picline-wr-opt > input:checked + span .picline-wr-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F7E229; }
/* The «i» bottom right of the tile (Andrea 30.09.2026), the bubble opens right below it. */
.picline-wr-optwrap.has-info > .picline-wr-info { top: auto; bottom: .9rem; right: calc(1.125rem - 3px); }
/* Care plans: short titles, the list keeps its width; «Selbst übernehmen» (price on the right) leaves room. */
.picline-wr-radiotile.picline-wr-plan > span { padding-right: 1.125rem; }
.picline-wr-radiotile.picline-wr-plan-none > span { padding-right: 3.25rem; }
.picline-wr-info {
    position: absolute; top: .85rem; right: .9rem; z-index: 2;
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    border: 2px solid #02084a; border-radius: 50%; background: #fff; color: #02084a;
    font: inherit; font-size: .95rem; font-weight: 800; line-height: 1; cursor: pointer;
    transition: background-color .15s, color .15s;
}
/* Larger touch area than the visible circle. */
.picline-wr-info::before { content: ""; position: absolute; inset: -8px; }
.picline-wr-info:hover, .picline-wr-info[aria-expanded="true"] { background: #02084a; color: #F7E229; }
/* Below the tile (the tile stays readable), right edge in line with the «i». */
.picline-wr-pop {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 20;
    width: min(440px, 100%); padding: .9rem 2.75rem 1rem 1.1rem;
    border: 1px solid #E3E6F2; border-top: 4px solid #F7E229; border-radius: 12px; background: #fff; color: #02084a;
    box-shadow: 0 18px 40px rgb(2 8 74 / 18%); font-size: .9rem; line-height: 1.5;
}
.picline-wr-pop[hidden] { display: none; }
/* Small arrow below the «i» (its centre is .9rem + 14px from the right edge). */
.picline-wr-pop::before { content: ""; position: absolute; bottom: calc(100% + 4px); right: calc(.9rem + 5px); border: 9px solid transparent; border-top: 0; border-bottom-color: #F7E229; }
.picline-wr-pop p { margin: 0 0 .55rem; }
.picline-wr-pop p:last-child { margin-bottom: 0; }
.picline-wr-pop .picline-wr-pop-note { font-size: .8rem; opacity: .75; }
/* Example inside an info box (30.09.2026, the carpenter from Meilen): light blue block with a small title. */
.picline-wr-pop .picline-wr-pop-beispiel { padding: .6rem .75rem; border-radius: 8px; background: #eef1fa; }
.picline-wr-pop-beispiel > b { display: block; margin-bottom: .15rem; }
/* Phones: an info box at the bottom of the screen above the total bar, scrolls inside if needed. */
@media (max-width: 599px) {
    .picline-wr-pop {
        position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
        width: auto; max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain;
        box-shadow: 0 -6px 40px rgb(2 8 74 / 32%);
    }
    .picline-wr-pop::before { display: none; }
}
.picline-wr-pop-x {
    position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 8px; background: none; color: #02084a; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.picline-wr-pop-x:hover { background: #eef1fa; }
@media (min-width: 1024px) {
    .picline-wr-pop { font-size: calc(14.5px / .9); }
    .picline-wr-pop .picline-wr-pop-note { font-size: calc(13px / .9); }
}
@media (prefers-reduced-motion: reduce) { .picline-wr-info { transition: none; } }

/* Webdesign FAQ since 30.09.2026 (Andrea): one section «Häufige Fragen zu Webdesign, Kosten und Wartung» with 12
   questions in three topic groups (H3, rule book: from 8 questions in groups); link line under an answer. */
.picline-faq .picline-inner > .picline-wd-faq-gruppe { margin: clamp(2rem, 4vw, 2.75rem) 0 .25rem; font-size: clamp(1.1875rem, 1rem + .4vw, 1.375rem); }
.picline-faq .picline-inner > .section-intro + .picline-wd-faq-gruppe { margin-top: 0; }
.picline-faq-list p.picline-faq-link { margin-top: .6rem; }
.picline-faq-link a { color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-faq-link a::after { content: "\00a0\2192"; }

/* ---------- Calculator step 5 «SEO und regionale Sichtbarkeit» (30.09.2026 afternoon, Andrea's second brief) ----------
   Basic SEO as a fixed tile (no input, always included), the SEO concept as a checkbox tile that is greyed out with
   own texts (hint below), the regional landing pages as a row with a counter, only while the concept is chosen. */
.picline-wr-fix { cursor: default; }
.picline-wr-fix > span { border-color: rgb(2 8 74 / 30%); background: #eef1fa; }
.picline-wr-fix:hover > span { border-color: rgb(2 8 74 / 30%); }
.picline-wr-opt.is-disabled { cursor: not-allowed; }
.picline-wr-opt.is-disabled > span { opacity: .5; }
.picline-wr-opt.is-disabled:hover > span { border-color: var(--wr-line); }
.picline-wr-seohinweis { margin: .85rem 0 0; padding: .7rem 1rem; border-left: 4px solid #F7E229; border-radius: 0 8px 8px 0; background: #eef1fa; font-size: .95rem; line-height: 1.45; }
.picline-wr-seohinweis[hidden] { display: none; }
.picline-wr-region { position: relative; }
.picline-wr-rowlabel { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; }
.picline-wr-rowlabel .picline-wr-info { position: relative; top: auto; right: auto; flex: none; margin-top: .05rem; }
.picline-wr-region .picline-wr-pop::before { display: none; }
.picline-wr-pop ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; }
.picline-wr-pop li { margin: .1rem 0; }
.picline-wr-seo > .picline-wr-note { margin-top: 1rem; }

/* Step 5 since 30.09.2026 (Andrea's third brief): three clearly separate rows, a table Leistung | Was ist enthalten? |
   Preis on computers and tablets, cards on phones. Each row: title with «i», label (yellow only for «Immer inklusive»),
   short text, price and the control (fixed tick, «Hinzufügen», counter). Chosen rows light blue. */
.picline-wr-seotab { border: 1px solid var(--wr-line); border-radius: 12px; }
.picline-wr-seotab-kopf, .picline-wr-seorow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 1.25rem; padding: .95rem 1.1rem; }
.picline-wr-seotab-kopf { padding-block: .6rem; border-bottom: 1px solid var(--wr-line); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
.picline-wr-seorow { position: relative; align-items: start; row-gap: .6rem; transition: background-color .15s; }
.picline-wr-seorow + .picline-wr-seorow { border-top: 1px solid var(--wr-line); }
.picline-wr-seorow:last-child { border-radius: 0 0 12px 12px; }
.picline-wr-seorow.is-aktiv { background: #eef1fa; }
.picline-wr-seorow > * { min-width: 0; margin: 0; }
.picline-wr-seorow-name { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.picline-wr-seorow-titel { display: flex; align-items: flex-start; gap: .45rem; }
.picline-wr-seorow-titel b { font-size: 1.0625rem; line-height: 1.3; }
.picline-wr-seorow .picline-wr-info { position: relative; top: auto; right: auto; flex: none; width: 24px; height: 24px; margin-top: .05rem; font-size: .8rem; }
.picline-wr-seorow .picline-wr-pop { top: calc(100% + 6px); left: .75rem; right: auto; width: min(440px, calc(100% - 1.5rem)); }
.picline-wr-seorow .picline-wr-pop::before { display: none; }
.picline-wr-badge { display: inline-block; padding: .1rem .55rem; border: 1px solid rgb(2 8 74 / 20%); border-radius: 999px; background: #fff; font-size: .78rem; font-weight: 700; line-height: 1.45; }
.picline-wr-badge.is-gelb { border-color: #F7E229; background: #F7E229; }
.picline-wr-seorow-text { font-size: .95rem; line-height: 1.5; opacity: .8; }
.picline-wr-seorow-preis { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.picline-wr-seorow-preis > strong { font-size: .95rem; line-height: 1.4; }
.picline-wr-seofix { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; }
.picline-wr-box.is-on, .picline-wr-seowahl > input:checked + .picline-wr-box { background: #02084a; }
.picline-wr-box.is-on::after, .picline-wr-seowahl > input:checked + .picline-wr-box::after { content: ""; width: 6px; height: 11px; border: solid #F7E229; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.picline-wr-seowahl { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .85rem .45rem .6rem; border: 2px solid #02084a; border-radius: 8px; background: #fff; font-size: .95rem; font-weight: 700; cursor: pointer; }
.picline-wr-seowahl > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.picline-wr-seowahl:has(> input:checked) { background: #F7E229; }
.picline-wr-seowahl:has(> input:focus-visible) { outline: 3px solid #02084a; outline-offset: 3px; }
.picline-wr-seorow .picline-wr-stepper button { width: 40px; height: 40px; }
.picline-wr-seorow .picline-wr-stepper input { width: 3rem; height: 40px; }
/* Basic SEO framed in yellow on a light yellow ground (Andrea 30.09.2026: you see at once that it is included and
   always there). */
.picline-wr-seotab .picline-wr-seorow[data-seo="basic"] { margin: .5rem; border: 2px solid #F7E229; border-radius: 10px; background: #fffbe0; }
.picline-wr-seorow-hinweis { grid-column: 1 / -1; padding: .6rem .85rem; border-left: 4px solid #F7E229; border-radius: 0 8px 8px 0; background: #eef1fa; font-size: .9rem; font-weight: 700; line-height: 1.45; }
.picline-wr-seorow-hinweis[hidden], .picline-wr-seosumme[hidden] { display: none; }
.picline-wr-seosumme { display: flex; justify-content: space-between; gap: 1rem; margin: .75rem 0 0; padding: .7rem 1.1rem; border-radius: 10px; background: #02084a; color: #fff; font-size: .95rem; font-weight: 700; }
.picline-wr-seosumme strong { color: #F7E229; white-space: nowrap; }
/* Example box below the choice. */
.picline-wr-seobeispiel { margin-top: 1rem; padding: 1rem 1.1rem; border-left: 4px solid #F7E229; border-radius: 0 12px 12px 0; background: #eef1fa; }
.picline-wr-seobeispiel-titel { margin: 0 0 .6rem; font-weight: 800; }
.picline-wr-seobeispiel-faelle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.picline-wr-seobeispiel-faelle p { margin: 0 0 .45rem; font-size: .95rem; line-height: 1.45; }
.picline-wr-seobeispiel-faelle ul { margin: 0; padding: 0; font-size: .9rem; line-height: 1.45; list-style: none; }
.picline-wr-seobeispiel-faelle li { margin: .2rem 0; }
.picline-wr-seobeispiel-faelle li > span { opacity: .8; }
.picline-wr-seobeispiel-faelle li ul { margin: .15rem 0 0 1.1rem; list-style: disc; }
.picline-wr-seobeispiel-faelle li ul li { margin: .05rem 0; }
/* Since 30.09.2026 late evening (Andrea): «Zusätzliche Ortsseiten» with a live line below the counter
   («3 zusätzliche Ortsseiten × CHF 490 = CHF 1’470»), and the example box «So könnte es aussehen» with a small subtitle,
   a heading per example and its costs. */
.picline-wr-seorow-preis > .picline-wr-ortsrechnung { margin: 0; font-size: .9rem; font-weight: 700; line-height: 1.4; }
.picline-wr-seobeispiel > .picline-wr-seobeispiel-titel { margin-bottom: .15rem; }
.picline-wr-seobeispiel-unter { margin: 0 0 .75rem; font-size: .85rem; line-height: 1.45; opacity: .8; }
.picline-wr-seobeispiel-faelle p.picline-wr-seobeispiel-fall { margin-bottom: .3rem; font-size: 1rem; font-weight: 800; }
.picline-wr-seobeispiel-faelle p.picline-wr-seobeispiel-kosten { margin: .55rem 0 0; padding-top: .5rem; border-top: 1px solid rgb(2 8 74 / 15%); font-size: .9rem; }
.picline-wr-seobeispiel-kosten > span { opacity: .8; }
@media (max-width: 700px) {
    .picline-wr-seotab { display: grid; gap: .75rem; border: 0; }
    .picline-wr-seotab-kopf { display: none; }
    .picline-wr-seotab .picline-wr-seorow { grid-template-columns: minmax(0, 1fr); border: 1px solid var(--wr-line); border-radius: 12px; }
    .picline-wr-seotab .picline-wr-seorow[data-seo="basic"] { margin: 0; }
    .picline-wr-seobeispiel-faelle { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the info box at the bottom of the screen like everywhere in the calculator. */
@media (max-width: 599px) { .picline-wr-seorow .picline-wr-pop { top: auto; left: 12px; right: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .picline-wr-seorow { transition: none; } }

/* ---------- Webdesign #seo «Wie wird Deine Website bei Google und in KI-Suchen gefunden?» (30.09.2026) ----------
   Three cards like «Was bekommst Du …» (icon, title, text), the price or label as a yellow pill at the bottom with a
   small line below. A group .picline-wd-infobox in a card becomes a speech bubble behind an «i» button (webdesign.js);
   without JavaScript its text stays visible in the card. White with a fine line above (the section before is white). */
.picline-section.has-white-background-color + .picline-section.picline-wd-seo.has-white-background-color { border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-wd-seo .picline-inner > h2 { margin-top: 0; }
.picline-wd-seo .picline-wd-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .picline-wd-seo .picline-wd-features { grid-template-columns: minmax(0, 1fr); } }
.picline-wd-seo .picline-wd-features > .picline-wd-seo-karte { position: relative; display: flex; flex-direction: column; }
.picline-wd-seo-karte > .picline-wd-seo-preis {
    align-self: flex-start; margin-top: auto !important; padding: .3rem .8rem; border-radius: 999px; background: #F7E229;
    font-size: .95rem !important; font-weight: 700; line-height: 1.4; opacity: 1 !important;
}
/* Space between text and pill also when the text is short (margin-top: auto only pushes it down). */
.picline-wd-seo-karte > p:not(.picline-wd-seo-preis):not(.picline-wd-seo-detail) { margin-bottom: 1.25rem !important; }
.picline-wd-seo-karte > .picline-wd-seo-detail { margin-top: .5rem !important; font-size: .95rem !important; line-height: 1.5; opacity: .75 !important; }
/* Three cards side by side: the small line always takes two lines, so the yellow labels stand on one line. */
@media (min-width: 900px) { .picline-wd-seo-karte > .picline-wd-seo-detail { min-height: 3em; } }
.picline-wd-seo-karte.has-open-info { z-index: 5; }
/* A card with an open info box does not lift on hover: a transform would make the fixed box on phones (tap = hover)
   position itself inside the card instead of at the bottom of the screen (30.09.2026). */
.picline-wd-features > .picline-wd-card.has-open-info { transform: none !important; }
.picline-wd-info {
    position: absolute; top: clamp(1.5rem, 2.5vw, 2.25rem); right: clamp(1.5rem, 2.5vw, 2.25rem); z-index: 2;
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 2px solid #02084a; border-radius: 50%; background: #fff; color: #02084a;
    font: inherit; font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s;
}
.picline-wd-info::before { content: ""; position: absolute; inset: -8px; }
.picline-wd-info:hover, .picline-wd-info[aria-expanded="true"] { background: #02084a; color: #F7E229; }
.picline-wd-info:focus-visible, .picline-wd-info-x:focus-visible { outline: 3px solid #02084a; outline-offset: 3px; }
/* Without JavaScript: the explanation as a normal part of the card. */
.picline-wd-infobox { margin-top: 1rem !important; padding-top: .9rem; border-top: 1px solid #E3E6F2; }
.picline-wd-infobox > p { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.5; }
.picline-wd-infobox > p:last-child { margin-bottom: 0; }
.picline-wd-infobox > .picline-wd-infobox-note { font-size: .85rem; opacity: .75; }
/* With JavaScript: a bubble below the card, right edge in line with the «i». */
.picline-wd-infobox.is-pop {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 20; width: min(420px, 100%); margin: 0 !important;
    padding: .95rem 2.75rem 1rem 1.1rem; border: 1px solid #E3E6F2; border-top: 4px solid #F7E229; border-radius: 12px;
    background: #fff; color: #02084a; box-shadow: 0 18px 40px rgb(2 8 74 / 18%); text-align: left;
}
.picline-wd-infobox.is-pop[hidden] { display: none; }
.picline-wd-infobox.is-pop::before { content: ""; position: absolute; bottom: calc(100% + 4px); right: calc(clamp(1.5rem, 2.5vw, 2.25rem) + 15px - 9px); border: 9px solid transparent; border-top: 0; border-bottom-color: #F7E229; }
.picline-wd-info-x {
    position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 8px; background: none; color: #02084a; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.picline-wd-info-x:hover { background: #eef1fa; }
@media (min-width: 1024px) {
    .picline-wd-seo-karte > .picline-wd-seo-preis, .picline-wd-seo-karte > .picline-wd-seo-detail { font-size: calc(16px / .9) !important; }
    .picline-wd-infobox > p { font-size: calc(14.5px / .9); }
    .picline-wd-infobox > .picline-wd-infobox-note { font-size: calc(13px / .9); }
}
/* Phones: an info box at the bottom of the screen (like the calculator). */
@media (max-width: 599px) {
    .picline-wd-infobox.is-pop {
        position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
        width: auto; max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -6px 40px rgb(2 8 74 / 32%);
    }
    .picline-wd-infobox.is-pop::before { display: none; }
    /* The open card is its own layer; above the calculator's total bar (z-index 50), so the box is not covered. */
    .picline-wd-seo-karte.has-open-info { z-index: 61; }
}
@media (prefers-reduced-motion: reduce) { .picline-wd-info { transition: none; } }

/* ---------- Über uns (13), 30.09.2026 evening (Andrea's brief): building blocks of the service pages plus: yellow sub line
   in the hero, cards and points 2 x 2, signature under Andrea's text, partner section with the picture on the right
   (phones: picture on top), line under the service cards, closing box like the former «Du erkennst Dich wieder?» box
   of the front page (CSS of .picline-kd-abschluss in picline.css, here for .picline-ueber-kontakt). */
.picline-wd-hero-copy > .picline-wd-promise.picline-wd-promise-gelb { color: #F7E229; }
.picline-wd-features.picline-wd-features-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.picline-wd-benefits.picline-wd-benefits-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
@media (max-width: 700px) {
    .picline-wd-features.picline-wd-features-2, .picline-wd-benefits.picline-wd-benefits-2 { grid-template-columns: minmax(0, 1fr); }
}
/* Text of the points at least 16 px visible and full colour, like the card texts of the service pages. */
.picline-wd-benefits-2 > .picline-wd-benefit > p { font-size: 1.0625rem; opacity: 1; }
@media (min-width: 1024px) { .picline-wd-benefits-2 > .picline-wd-benefit > p { font-size: calc(17px / .9); } }
.picline-wd .picline-person-copy > p.picline-person-signatur { margin-top: 1.5rem; font-weight: 700; }
.picline-person-signatur::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: .75rem; background: #F7E229; }
@media (min-width: 782px) {
    .picline-person-layout.picline-person-rechts { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .picline-person-layout.picline-person-rechts > .picline-portrait { order: 2; }
}
.picline-wd .picline-inner > p.picline-ueber-ergaenzung { max-width: 80ch; margin-top: calc(24px + .8em); font-weight: 700; }
.picline-ueber-ergaenzung a, .picline-wd-benefit a { color: inherit; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-ueber-kontakt .picline-inner > .picline-kd-abschluss {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; align-items: center;
    padding: 36px; border-radius: 18px; background: #02084a; color: #fff;
}
.picline-ueber-kontakt .picline-kd-abschluss-text > h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); font-weight: 800; line-height: 1.2; }
.picline-ueber-kontakt .picline-kd-abschluss-text > p { color: #d4d6ea; font-size: 1.0625rem; line-height: 1.6; }
.picline-ueber-kontakt .picline-kd-abschluss-text > p + p { margin-top: 10px; }
.picline-ueber-kontakt .picline-kd-abschluss-text > p strong { color: #fff; }
.picline-ueber-kontakt .picline-kd-abschluss-rechts .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
.picline-kd-abschluss .picline-kd-ghost > .wp-block-button__link { border: 2px solid rgb(255 255 255 / 55%); background: transparent; color: #fff; }
.picline-kd-abschluss .picline-kd-ghost > .wp-block-button__link:is(:hover, :focus-visible) { border-color: #F7E229; color: #F7E229; }
@media (min-width: 1024px) { .picline-ueber-kontakt .picline-kd-abschluss-text > p { font-size: calc(17px / .9); } }
@media (max-width: 899px) {
    .picline-ueber-kontakt .picline-inner > .picline-kd-abschluss { grid-template-columns: minmax(0, 1fr); padding: 28px; }
    .picline-ueber-kontakt .picline-kd-abschluss-rechts { align-items: flex-start; }
}
@media (max-width: 599px) { .picline-ueber-kontakt .picline-kd-abschluss-rechts, .picline-ueber-kontakt .picline-kd-abschluss-rechts .wp-block-buttons { align-items: stretch; width: 100%; } }
/* Page ends with the box: no extra bottom padding of <main> (like pages ending with .picline-contact, picline.css). */
main:has(> .wp-block-post-content > .picline-ueber-kontakt:last-child) { padding-bottom: 0 !important; }
/* FAQ group titles (h3.picline-wd-faq-gruppe) since 01.10.2026 (Andrea: «unterstreichen, damit man draus kommt, das ist
   der Titel, gelb»): yellow underline like the links, only under the words. Applies on every page with FAQ groups. */
.picline-wd-faq-gruppe { text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-skip-ink: none; }
/* Über uns (13) since 01.10.2026 (Andrea: «baue die Seite anders auf», then «du hast den ganzen Platz, nutze ihn»):
   «Wer steht hinter Picline?» uses the full width in two columns, left Andrea's text with his card below it, right
   the text about Sandra Jauslin with her card. The cards (portrait, name, role, phone, e-mail, LinkedIn) start on the
   same line (subgrid). Up to 1099 px one column: Andrea's text, his card, Sandra's text, her card; on phones the
   portrait stands above the contact lines. */
.picline-wd .picline-inner > .picline-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem); margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.picline-team > .picline-team-spalte { display: grid; grid-template-rows: subgrid; grid-row: span 2; min-width: 0; margin: 0; }
.picline-team-spalte > * { min-width: 0; margin-block: 0; }
/* Since 04.10.2026 (Andrea alone, Sandra Jauslin as external partner): left his text, right his card and below it the
   short paragraph about partners. No shared rows, each column starts at the top. */
.picline-team.picline-team-allein > .picline-team-spalte { grid-template-rows: none; grid-row: auto; align-content: start; row-gap: clamp(1.25rem, 2.2vw, 1.75rem); }
/* Über uns (13) #wer since 05.10.2026 (Andrea): intro over the full width, a line of proofs (Google rating as in the
   section #bewertungen of the front page, Street View Trusted), the two cards with a short text below each (cards in
   the first shared row, texts in the second, so both columns are equally high), closing sentence over the full width. */
.picline-wd .picline-inner > p.picline-ueber-einstieg { max-width: none; margin: clamp(.75rem, 1.4vw, 1.1rem) 0 0; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; }
.picline-ueber-einstieg a { color: inherit; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-wd .picline-inner > ul.picline-ueber-beweise { display: flex; flex-wrap: wrap; gap: .75rem; max-width: none; margin: clamp(1.1rem, 2vw, 1.5rem) 0 0; padding: 0; list-style: none; }
.picline-wd .picline-ueber-beweise > li { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .55rem 1rem; border: 1px solid #E3E6F2; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgb(2 8 74 / 6%); font-size: calc(16px / .9); line-height: 1.3; }
.picline-wd .picline-ueber-beweise > li::before { content: none; }
.picline-ueber-sterne { color: #F5C400; letter-spacing: .08em; }
.picline-wd .picline-ueber-beweise > li.picline-ueber-beweis-trusted::before { content: ""; flex: none; width: 1.25em; height: 1.25em; border-radius: 50%; background: #02084a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; }
.picline-wd .picline-inner > .picline-team.picline-team-karte-oben { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.picline-team-karte-oben .picline-team-wort > p { margin: 0; }
.picline-wd .picline-inner > p.picline-ueber-fachpersonen { max-width: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding-top: clamp(1.1rem, 2vw, 1.5rem); border-top: 1px solid #E3E6F2; }
@media (max-width: 1023px) { .picline-wd .picline-ueber-beweise > li { font-size: 1rem; } }
.picline-team .picline-team-karte {
    display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr); align-items: center; gap: clamp(1.1rem, 2.2vw, 1.9rem);
    min-width: 0; margin: 0; padding: clamp(1rem, 1.8vw, 1.5rem); border: 1px solid #E3E6F2; border-radius: 16px; background: #fff;
    box-shadow: 0 2px 4px rgb(2 8 74 / 4%), 0 14px 30px -14px rgb(2 8 74 / 22%);
}
.picline-team-karte > *, .picline-team-text > * { margin: 0; }
.picline-team-karte > .picline-team-foto img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Since 02.10.2026 evening (Andrea: «das Bild soll grösser sein, der Kopf soll bei beiden bis zum roten Strich gehen»):
   the two portraits are enlarged inside their frame from the lower edge, so both heads end shortly below the upper
   edge and stand at the same height. Only the display is enlarged, the files stay as they are. Values per picture
   (660 Andrea, 661 Sandra); another picture is shown whole until it gets its own value. */
.picline-team-karte > .picline-team-foto { overflow: hidden; border-radius: 12px; }
.picline-team-karte > .picline-team-foto img:is(.wp-image-660, .wp-image-661) { transform-origin: 50% 100%; }
.picline-team-karte > .picline-team-foto img.wp-image-660 { transform: scale(1.15); }
.picline-team-karte > .picline-team-foto img.wp-image-661 { transform: scale(1.13); }
.picline-team-text { min-width: 0; }
.picline-wd .picline-team-text > h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; }
.picline-wd .picline-team-text > p.picline-team-rolle { margin: .3rem 0 0; font-weight: 600; opacity: .8; }
.picline-wd .picline-team-text > p.picline-team-zeile { display: flex; align-items: baseline; gap: .75rem; margin: .55rem 0 0; line-height: 1.4; overflow-wrap: anywhere; }
.picline-wd .picline-team-text > p.picline-team-rolle + p.picline-team-zeile { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #E3E6F2; }
.picline-team-label { flex: none; width: 7.2em; white-space: nowrap; overflow-wrap: normal; font-size: .75em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.picline-team-zeile a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-team-zeile a:focus-visible { outline: 2px solid #02084a; outline-offset: 3px; }
.picline-team-wort a { color: inherit; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 1099px) {
    .picline-wd .picline-inner > .picline-team { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.25rem, 6vw, 3rem); }
    .picline-team > .picline-team-spalte { grid-template-rows: none; grid-row: auto; row-gap: 1.5rem; }
}
@media (max-width: 519px) {
    .picline-team .picline-team-karte { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 18px; }
    .picline-team-karte > .picline-team-foto { max-width: 240px; }
}
/* Website-Wartung (578, /leistungen/website-wartung-zug/) since 01.10.2026 (Andrea's brief): price label in the hero,
   box «Auf einen Blick», eight cards in 4 x 2, two tables in the CI colours (navy head, white rows, fine lines, rounded
   like the cards), three support steps with two info lines. The classes are general (picline-wd-etikett,
   picline-wd-blick, picline-wd-features-4, picline-wd-tabelle, picline-wd-steps-3, picline-wd-infozeile) and can be
   used on other service pages. */
.picline-section .picline-wd-hero-copy > p.picline-wd-etikett { width: fit-content; margin-top: 1.5rem; padding: .4rem 1.1rem; border-radius: 999px; background: #F7E229; color: #02084a; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; opacity: 1; }
.picline-wd-hero-copy > p.picline-wd-etikett + .wp-block-buttons { margin-top: 1.5rem; }

/* «Auf einen Blick»: compact white box, one line per fact with a symbol tile and the keyword in bold. */
.picline-wd-blick-sektion .picline-inner > h2, .picline-wd-wartung-vergleich .picline-inner > h2, .picline-wd-wartung-kosten .picline-inner > h2 { margin-top: 0; }
.picline-wd ul.picline-wd-blick { max-width: 980px; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: .25rem clamp(1.1rem, 2.5vw, 1.75rem); border: 1px solid #E3E6F2; border-left: 4px solid #F7E229; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 16px 36px -16px rgb(2 8 74 / 22%); list-style: none; }
.picline-wd-blick > li { position: relative; display: block; min-height: 40px; margin: 0; padding: 1.05rem 0 1.05rem 58px; border-bottom: 1px solid #E3E6F2; font-size: 1.0625rem; line-height: 1.5; }
.picline-wd-blick > li:last-child { border-bottom: 0; }
.picline-wd-blick > li::before, .picline-wd-infozeile::before { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 11px; background: #02084a center / 22px 22px no-repeat; }
.picline-wd-blick > li::before { left: 0; top: .85rem; }
.picline-wd-blick-preis::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5V4h7.5L21 14.5 14.5 21 3 11.5Z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.3'/%3E%3C/svg%3E") !important; }
.picline-wd-blick-inhalt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 12.5 9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E") !important; }
.picline-wd-blick-support::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='m5.6 5.6 3.9 3.9M14.5 14.5l3.9 3.9M18.4 5.6l-3.9 3.9M9.5 14.5l-3.9 3.9'/%3E%3C/svg%3E") !important; }
.picline-wd-blick-region::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") !important; }
.picline-wd-blick-person::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.5-7 8-7s8 3 8 7'/%3E%3C/svg%3E") !important; }

/* Eight cards: 4 x 2 on computers, 2 columns on tablets, 1 on phones (from .picline-wd-features). */
@media (min-width: 1101px) {
    .picline-wd-features.picline-wd-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .picline-wd-features-4 > .picline-wd-card { padding: clamp(1.25rem, 1.8vw, 1.75rem); }
}

/* Tables: real <table> (block core/table). */
.picline-wd figure.picline-wd-tabelle { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; overflow: visible; }
.picline-wd .picline-wd-tabelle table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #E3E6F2; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 16px 36px -16px rgb(2 8 74 / 22%); }
.picline-wd .picline-wd-tabelle :is(th, td) { padding: .95rem 1.25rem; border: 0; border-bottom: 1px solid #E3E6F2; color: #02084a; font-size: 1.0625rem; line-height: 1.5; text-align: left; vertical-align: top; }
.picline-wd .picline-wd-tabelle thead { border: 0; }
.picline-wd .picline-wd-tabelle thead th { border-bottom: 0; background: #02084a; color: #fff; font-weight: 700; }
.picline-wd .picline-wd-tabelle tbody tr:last-child td { border-bottom: 0; }
.picline-wd .picline-wd-tabelle-zwei td + td { border-left: 1px solid #E3E6F2; }
.picline-wd .picline-wd-tabelle-zwei th + th { border-left: 1px solid rgb(255 255 255 / 25%); }
.picline-wd figure.picline-wd-tabelle-preise { max-width: 640px; }
.picline-wd .picline-wd-tabelle-preise td:first-child { font-weight: 700; }
.picline-wd .picline-inner > p.picline-wd-tabelle-hinweis { max-width: 80ch; margin-top: 1.25rem; }
/* Phones: the two columns become two lists below each other, same content (head, then its six lines). */
@media (max-width: 700px) {
    .picline-wd .picline-wd-tabelle-zwei table { display: grid; grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
    .picline-wd-tabelle-zwei :is(thead, tbody, tr) { display: contents; }
    .picline-wd .picline-wd-tabelle-zwei :is(th, td) { display: block; border: 1px solid #E3E6F2; border-top: 0; background: #fff; }
    .picline-wd .picline-wd-tabelle-zwei thead th { border-color: #02084a; border-radius: 16px 16px 0 0; background: #02084a; }
    .picline-wd .picline-wd-tabelle-zwei :is(th, td):first-child { order: 1; }
    .picline-wd .picline-wd-tabelle-zwei :is(th, td):last-child { order: 2; }
    .picline-wd .picline-wd-tabelle-zwei th:last-child { margin-top: 16px; }
    .picline-wd .picline-wd-tabelle-zwei tbody tr td { border-bottom: 1px solid #E3E6F2; }
    .picline-wd .picline-wd-tabelle-zwei tbody tr:last-child td { border-radius: 0 0 16px 16px; }
}

/* Support: three steps side by side from 900 px, numbers 01 to 03 centred in their circle. */
.picline-wd-ablauf .picline-step-grid.picline-wd-steps-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .picline-wd-ablauf .picline-step-grid.picline-wd-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } }
.picline-wd-steps-3 .picline-step-number { padding-left: 0; text-align: center; }
/* Info lines with a symbol tile (support hours, response time). */
.picline-wd .picline-inner > .picline-wd-infozeilen { display: grid; gap: .75rem; max-width: 980px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.picline-wd-infozeilen > p.picline-wd-infozeile { position: relative; min-height: 40px; margin: 0; padding: .95rem 1.1rem .95rem 70px; border: 1px solid #E3E6F2; border-radius: 14px; background: #fff; font-size: 1.0625rem; line-height: 1.5; }
.picline-wd-infozeile::before { left: 15px; top: .8rem; }
.picline-wd-infozeile-zeit::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.picline-wd-infozeile-reaktion::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E"); }
.picline-wd .picline-inner > .picline-wd-support-knopf { margin-top: clamp(1.5rem, 3vw, 2rem); }
/* The button «Support-Anfrage stellen» is only output once the page /kunden-support/ exists; until then no empty gap. */
.picline-wd-support-knopf:empty { display: none; }
@media (min-width: 1024px) {
    .picline-wd-blick > li, .picline-wd .picline-wd-tabelle :is(th, td), .picline-wd-infozeilen > p.picline-wd-infozeile,
    .picline-section .picline-wd-hero-copy > p.picline-wd-etikett { font-size: calc(16px / .9); }
}

/* Calculator step 5 since 01.10.2026 (Andrea's brief SEO, Local SEO, GEO): text link to the sub page below the short
   text of a row and the bold line "Was ist das?" at the top of the info box. */
.picline-wr-seorow-text > .picline-wr-seolink { display: block; width: fit-content; margin-top: .4rem; color: #02084a; font-weight: 700; opacity: 1; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.picline-wr-seorow-text:has(> .picline-wr-seolink) { opacity: 1; color: rgb(2 8 74 / 80%); }
.picline-wr-pop > .picline-wr-pop-titel { margin: 0 1.75rem .35rem 0; }

/* SEO (583), Local SEO (584), KI-Sichtbarkeit GEO (585) since 01.10.2026 (Andrea's brief): panels for "Was bekommst
   Du ...?" (white cards with H3 and list or text, 2 or 3 side by side), the note "Was wir bewusst nicht machen" with the
   yellow line on the left, the price sentence, and three more symbols for the box "auf einen Blick". */
.picline-wd-pakete-sektion .picline-inner > h2, .picline-wd-faktoren .picline-inner > h2 { margin-top: 0; }
.picline-wd-faktoren .picline-inner > p { max-width: 80ch; }
.picline-wd-faktoren .picline-inner > ul.picline-wd-dash + p { margin-top: 1.5rem; }
.picline-wd .picline-inner > .picline-wd-pakete { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .picline-wd .picline-inner > .picline-wd-pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .picline-wd .picline-inner > .picline-wd-pakete.picline-wd-pakete-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.picline-wd .picline-wd-paket { min-width: 0; margin: 0; padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid #E3E6F2; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 16px 36px -16px rgb(2 8 74 / 28%); }
.picline-wd .picline-wd-paket > * { margin-block: 0; }
.picline-section .picline-wd-paket > h3 { font-size: clamp(1.1875rem, 1rem + .45vw, 1.4375rem); line-height: 1.3; text-wrap: balance; }
.picline-wd .picline-wd-paket > h3 + * { margin-top: 1rem; }
.picline-wd .picline-wd-paket > ul.picline-wd-dash { gap: .7rem; }
.picline-wd .picline-wd-paket > p { font-size: 1.0625rem; line-height: 1.6; }
.picline-wd .picline-inner > p.picline-wd-paket-preis { max-width: 80ch; margin-top: calc(24px + .4em); font-weight: 700; }
.picline-wd .picline-inner > .picline-wd-paket-nicht { max-width: 980px; margin-top: 24px; border-left: 4px solid #F7E229; }
.picline-wd-blick > li.picline-wd-blick-leistung::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.picline-wd-blick > li.picline-wd-blick-check::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E"); }
.picline-wd-blick > li.picline-wd-blick-wichtig::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { .picline-wd .picline-wd-paket > p { font-size: calc(16px / .9); } }

/* Five steps side by side (from 1100 px): the titles are a little smaller, so that long words such as
   "Unternehmensprofil" or "Bestandsaufnahme" stand on one line of their narrow column (01.10.2026, Andrea). Visible
   17 px at 1101 px, 19.4 px from about 1250 px (before: 19.4 to 23.4 px). Applies to every page with five steps. */
@media (min-width: 1100px) { .picline-wd .picline-step-grid.picline-wd-steps-5 > .picline-step > h3 { font-size: min(1.72vw, 21.5px); } }

/* Phones (02.10.2026, Andrea): fixed button «Preis berechnen» at the bottom edge of Webdesign, jumps to the calculator
   and disappears while the calculator (or the footer) is on screen (.is-weg from webdesign.js) and while the ME/NU
   menu is open. Below the info boxes (z-index 60) and on the level of the total bar of the calculator. */
.picline-wd-fixknopf { display: none; }
@media (max-width: 767px) {
    .picline-wd-fixknopf {
        position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
        display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 52px; padding: .6rem 1rem; border-radius: 6px;
        background: #F7E229; color: #02084a; font-size: 1.0625rem; font-weight: 800; line-height: 1.2; text-decoration: none;
        box-shadow: 0 0 0 2px #02084a, 0 10px 28px rgb(2 8 74 / 35%);
        transition: transform .25s ease, opacity .25s ease, visibility 0s linear 0s;
    }
    .picline-wd-fixknopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
    .picline-wd-fixknopf.is-weg, html.has-modal-open .picline-wd-fixknopf { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
}
@media (prefers-reduced-motion: reduce) { .picline-wd-fixknopf { transition: none !important; } }

/* Price calculator, one step at a time (02.10.2026, Andrea): only the current step is open (.is-offen). Steps that were
   reached (.is-erledigt) are a compact row with the choice in one line and open again on a click; steps not reached
   yet (.is-spaeter) show the title only. «Weiter» / «Zurück» at the bottom of the open step. The bodies of the closed
   steps are only hidden, they stay in the HTML. */
.picline-wr-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.picline-wr-step { min-width: 0; scroll-margin-top: calc(16px + var(--wp-admin--admin-bar--height, 0px)); }
.picline-wr-head-text { flex: 1; min-width: 0; }
.picline-wr-head h3:focus { outline: none; }
.picline-wr-head h3:focus-visible { outline: 3px solid #F7E229; outline-offset: 4px; }
.picline-wr-body[hidden], .picline-wr-kurz[hidden], .picline-wr-auf[hidden] { display: none; }
.picline-wr-step:not(.is-offen) { padding-block: .9rem; }
.picline-wr-step:not(.is-offen) .picline-wr-head { margin-bottom: 0; }
.picline-wr-step:not(.is-offen) .picline-wr-head h3 { font-size: 1.0625rem; }
.picline-wr-step:not(.is-offen) .picline-wr-head h3 small { display: none; }
.picline-wr-step.is-offen { border-color: #02084a; box-shadow: 0 14px 34px rgb(2 8 74 / 9%); }
.picline-wr-step.is-erledigt .picline-wr-head { cursor: pointer; }
.picline-wr-step.is-erledigt { transition: border-color .2s ease, box-shadow .2s ease; }
.picline-wr-step.is-erledigt:hover { border-color: #02084a; box-shadow: 0 8px 22px rgb(2 8 74 / 8%); }
.picline-wr-step.is-erledigt .picline-wr-no { background: #F7E229; color: #02084a; }
.picline-wr-step.is-spaeter { background: rgb(255 255 255 / 55%); }
.picline-wr-step.is-spaeter .picline-wr-no { background: #fff; color: #02084a; box-shadow: inset 0 0 0 2px rgb(2 8 74 / 35%); }
.picline-wr-step.is-spaeter .picline-wr-head h3 { opacity: .7; }
.picline-wr .picline-wr-kurz { margin: .15rem 0 0; overflow: hidden; color: #02084a; font-size: 1rem; line-height: 1.4; opacity: .85; text-overflow: ellipsis; white-space: nowrap; }
.picline-wr-auf { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--wr-line); border-radius: 50%; background: #fff; color: #02084a; cursor: pointer; }
.picline-wr-step.is-erledigt:hover .picline-wr-auf, .picline-wr-auf:hover { border-color: #02084a; background: #F7E229; }
.picline-wr-auf:focus-visible { outline: 3px solid #F7E229; outline-offset: 2px; }
.picline-wr-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--wr-line); }
.picline-wr-nav:empty { display: none; }
.picline-wr-nav button { min-height: 48px; padding: .7rem 1.6rem; border: 2px solid #02084a; border-radius: 6px; background: #fff; color: #02084a; font: inherit; font-size: 1.0625rem; font-weight: 800; line-height: 1.2; cursor: pointer; transition: background .2s ease, color .2s ease; }
.picline-wr-nav .picline-wr-weiter { margin-left: auto; border-color: #F7E229; background: #F7E229; }
.picline-wr-nav .picline-wr-weiter:hover { border-color: #02084a; background: #02084a; color: #F7E229; }
.picline-wr-nav .picline-wr-zurueck:hover { background: #eef1fa; }
.picline-wr-nav button:focus-visible { outline: 3px solid #02084a; outline-offset: 3px; }
@media (min-width: 1024px) { .picline-wr .picline-wr-kurz { font-size: calc(16px / .9); } }
@media (max-width: 600px) {
    .picline-wr-step:not(.is-offen) { padding-inline: 1rem; }
    .picline-wr-nav button { flex: 1 1 0; padding-inline: 1rem; }
    .picline-wr-nav .picline-wr-weiter:only-child { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .picline-wr-step, .picline-wr-nav button { transition: none; } }

/* ---------- Fachkräfte gewinnen (53) #karriereseite, 02.10.2026 (Andrea's brief): «Brauchst Du eine eigene
   Karriereseite?» between #dabei and #ablauf. Two columns from 900 px: text on the left (kicker, H2, two paragraphs,
   yellow button and text link), on the right the live preview of the career page ([picline_sf_vorschau typ="stellen"])
   as a white card; below 900 px the text first, the preview under it. The preview comes from the server with a fixed
   height (nothing jumps), its script starts when it comes near the screen (assets/spezialfunktionen.js). It is shown
   larger here than in a card (texts at least 16 px visible). ---------- */
.picline-wd-karriere .picline-wd-karriere-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.picline-wd-karriere .picline-wd-karriere-grid > * { min-width: 0; margin: 0; }
@media (min-width: 900px) { .picline-wd-karriere .picline-wd-karriere-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.picline-wd-karriere .picline-wd-karriere-text > .picline-eyebrow {
    display: block; width: fit-content; max-width: 100%; margin: 0 0 18px; padding-bottom: 4px; border-bottom: 3px solid #F7E229;
    color: #02084a; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; opacity: 1;
}
.picline-wd-karriere .picline-wd-karriere-text > h2 { margin: 0 0 1rem; }
.picline-wd-karriere .picline-wd-karriere-text > p:not(.picline-eyebrow) { margin: 0 0 1rem; }
.picline-wd-karriere .picline-wd-karriere-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 1.75rem 0 0; }
.picline-wd-karriere .picline-wd-karriere-aktionen > * { margin: 0; }
.picline-wd-karriere .picline-wd-karriere-aktionen .picline-sf-more a { opacity: 1; }
.picline-wd-karriere .picline-wd-karriere-vorschau { overflow: hidden; border: 1px solid #d9ddec; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(2 8 74 / 7%); }
.picline-wd-karriere .picline-sf-preview { height: 360px; padding: 64px 20px 28px; border-bottom: 0; }
.picline-wd-karriere .picline-sf-tag { top: 18px; left: 18px; padding: 6px 12px; font-size: 1rem; }
.picline-wd-karriere .picline-sf-live { top: 22px; right: 18px; font-size: 1rem; opacity: .75; }
.picline-wd-karriere .picline-sf-jobs { gap: 12px; max-width: 420px; }
.picline-wd-karriere .picline-sf-job { gap: 12px; padding: 14px 16px; border-radius: 12px; }
.picline-wd-karriere .picline-sf-job b { font-size: 1.0625rem; line-height: 1.3; }
.picline-wd-karriere .picline-sf-job small { font-size: 1rem; color: #5b6083; }
.picline-wd-karriere .picline-sf-go { padding: 7px 11px; font-size: 1rem; }
.picline-wd-karriere .picline-sf-new { padding: 2px 7px; font-size: .8125rem; }
@media (min-width: 1024px) {
    .picline-wd-karriere .picline-sf-preview { height: 400px; }
    .picline-wd-karriere :is(.picline-sf-tag, .picline-sf-live, .picline-sf-go, .picline-sf-job small) { font-size: calc(16px / .9); }
    .picline-wd-karriere .picline-sf-job b { font-size: calc(18px / .9); }
}
@media (max-width: 420px) {
    .picline-wd-karriere .picline-sf-preview { height: 380px; padding-inline: 14px; }
    .picline-wd-karriere .picline-sf-go { padding-inline: 8px; }
}
/* Links in the hero text of the service pages (first on 53, 02.10.2026): white with a yellow line, like the blog hero. */
.picline-wd-hero-copy > p a:not(.wp-block-button__link) { color: #fff; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-wd-hero-copy > p a:not(.wp-block-button__link):is(:hover, :focus-visible) { color: #F7E229; }
/* ---------- Place pages (Luzern, Zürich) since 04.10.2026: six service cards below the hero (section class
   picline-ort-leistungen). In every row of cards symbol, title, text and links start at the same height and the links
   stand on one line at the bottom (Andrea): the cards share the four rows of the grid (subgrid). A card may have two
   links, they stand in one paragraph. ---------- */
.picline-ort-leistungen .picline-wd-features > .picline-wd-card {
    display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start;
}
.picline-ort-leistungen .picline-wd-features > .picline-wd-card > * { margin-block: 0; }
.picline-ort-leistungen .picline-wd-features > .picline-wd-card > h3 { margin-top: 1.1rem; align-self: start; }
.picline-ort-leistungen .picline-wd-features > .picline-wd-card > p:not(.picline-wd-cardlink) { margin-top: .6rem; align-self: start; }
.picline-ort-leistungen .picline-wd-features > .picline-wd-card > .picline-wd-cardlink {
    display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-self: end; margin-top: 0 !important; padding-top: 1.1rem;
}
.picline-ort-leistungen .picline-wd-cardlink a { white-space: nowrap; }
/* Step 5 of the calculator since 05.10.2026: a row may show points and a small note instead of the short text
   (Google-Unternehmensprofil), and the row «Zusätzliche Ortsseiten» a fixed note after its short text. */
.picline-wr-seorow-inhalt { opacity: 1; color: rgb(2 8 74 / 80%); }
.picline-wr-seorow-info { margin: 0 0 .5rem; }
.picline-wr-seorow-liste { margin: 0; padding: 0; list-style: none; }
.picline-wr-seorow-liste > li { position: relative; margin: 0; padding-left: 1.1rem; }
.picline-wr-seorow-liste > li + li { margin-top: .2rem; }
.picline-wr-seorow-liste > li::before { content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: 2px; background: #F7E229; }
.picline-wr-seorow-klein { margin: .6rem 0 0; font-size: .875rem; line-height: 1.45; }
.picline-wr-seorow-fest { display: block; margin-top: .4rem; font-weight: 700; }/* Service cards of the SEO pages (.picline-wd-paket) since 05.10.2026: paragraphs after the list keep a distance
   (Local SEO, Google-Unternehmensprofil: sentence and small note below the points). */
.picline-wd .picline-wd-paket > ul + p, .picline-wd .picline-wd-paket > p + p { margin-top: 1rem; }
.picline-wd .picline-wd-paket > p.picline-wd-klein { opacity: .75; }
.picline-wd .picline-wd-paket > p a { color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Step 5 of the calculator since 05.10.2026 (Andrea): the points of a row with check marks instead of dashes, the note
   below small and grey; the link «Mehr zu …» follows the note. */
.picline-wr-seorow-liste > li { padding-left: 1.5rem; }
.picline-wr-seorow-liste > li::before { top: .32em; left: .1rem; width: .42rem; height: .78rem; border: solid #02084a; border-width: 0 2px 2px 0; background: none; transform: rotate(45deg); }
.picline-wr-seorow-klein { color: #5a5f85; font-size: .875rem; }
.picline-wr-seorow-inhalt > .picline-wr-seolink { display: block; width: fit-content; margin-top: .6rem; color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Webdesign (50) #seo since 05.10.2026: cards with points and a small note instead of running text; four cards 2 x 2. */
.picline-wd-seo-karte > ul.picline-wd-dash { margin: 0 0 .9rem; }
.picline-wd-seo-karte > p.picline-wd-klein { margin-bottom: 1.25rem !important; color: #5a5f85; font-size: .9375rem !important; line-height: 1.5; opacity: 1 !important; }
.picline-wd-seo-karte > p.picline-wd-cardlink { margin-top: .9rem !important; margin-bottom: 0 !important; }
/* Comparison table of the SEO page (583): row label on its own line in each cell, points one per line. */
.picline-wd .picline-wd-tabelle-vergleich td > strong:first-child { display: block; margin-bottom: .3rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.picline-wd .picline-wd-tabelle-vergleich td { line-height: 1.75; }/* Webdesign (50) #seo: the yellow price fields of a row stand on one line, whatever the length of the text above. */
.picline-wd-seo-karte { display: flex; flex-direction: column; }
.picline-wd-seo-karte > .picline-wd-seo-preis { margin-top: auto !important; align-self: flex-start; }
/* Step 5, Basic SEO on phones (since 06.10.2026, Andrea): the price cell («inklusive», «Immer dabei») is left out there,
   the badge «Immer inklusive» says it already. On computers the price column stays. */
@media (max-width: 700px) { .picline-wr-seorow[data-seo="basic"] > .picline-wr-seorow-preis { display: none; } }

/* Bar at the bottom since 06.10.2026 (Andrea): label, total excl. VAT large, «inkl. MwSt. CHF …» small below. Three
   lines, so tighter lines and less padding: the bar is not higher than before (72 px at 390 and 360 px). */
.picline-wr-bar { padding-top: .5rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); gap: .75rem; }
.picline-wr-bar > span { min-width: 0; line-height: 1.15; }
.picline-wr-bar small { font-size: .75rem; white-space: nowrap; }
.picline-wr-bar b { font-size: 1.1875rem; white-space: nowrap; }
.picline-wr-bar small.picline-wr-bar-inkl { font-variant-numeric: tabular-nums; }
@media (max-width: 379px) { .picline-wr-bar a { padding-left: .75rem; padding-right: .75rem; font-size: .9rem; } }