/* Shared presentation for native blocks in the website and editor. */
.picline-section { overflow-wrap: break-word; scroll-margin-top: 1rem; }
.picline-section h1, .picline-section h2, .picline-section h3,
.picline-section p, .picline-section summary { text-align: left; }
.picline-inner > h2 { max-width: none; letter-spacing: -.025em; text-wrap: balance; }
.picline-inner > p { max-width: none; width: 100%; margin-inline: 0; }
/* Every paragraph directly under a section title is its introduction. */
.picline-inner > .section-intro, .picline-inner > h2 + p, .picline-split-copy > h2 + p {
    font-size: 1.25rem;
    line-height: 1.55;
    font-weight: 400;
    color: #02084a;
    opacity: .85;
    max-width: 80ch;
    margin-top: 16px;
    margin-bottom: 48px;
}
/* Navy text would disappear on the dark sections. */
.has-navy-background-color .picline-inner > .section-intro,
.has-navy-background-color .picline-inner > h2 + p,
.has-navy-background-color .picline-split-copy > h2 + p { color: #fff; }
@media (max-width: 768px) {
    .picline-inner > .section-intro, .picline-inner > h2 + p, .picline-split-copy > h2 + p { font-size: 1.0625rem; margin-bottom: 32px; }
}
/* Text left, photo right; stacked on mobile. */
.picline-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(2rem,5vw,4.5rem); }
.picline-split > .wp-block-group { min-width: 0; margin-block: 0; }
.picline-split-copy > :first-child { margin-top: 0; }
.picline-split-copy > :last-child { margin-bottom: 0; }
.picline-split-media .wp-block-image { margin: 0; }
.picline-section .picline-split-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Images marked picline-photo-full keep their own format (no 3:2 crop), e.g. the cut-out team photo. */
.picline-section .picline-split-media .picline-photo-full img {
    aspect-ratio: auto; object-fit: contain; border-radius: 0; width: 100%; max-width: 640px; height: auto; margin-inline: auto;
    /* WordPress sizes="auto" images get contain: size with a 3000x1500 placeholder; use the real image format instead. */
    contain: none;
}
.picline-person-copy > p, .picline-contact-copy > p { max-width: 78ch; margin-inline: 0; }
.picline-inner > *, .picline-contact-copy > * { margin-inline-start: 0; }
.picline-inner > .wp-block-group { max-width: none; }
.picline-service-detail { scroll-margin-top: 2rem; padding-block: 2rem; border-top: 1px solid rgb(2 8 74 / 20%); }
.picline-eyebrow { color: #F7E229; font-size: 1rem; font-weight: 700; letter-spacing: .035em; }
.picline-section img { display: block; max-width: 100%; height: auto; object-fit: contain; border-radius: 16px; }
/* Eight services: 4 × 2 on desktop, 2 columns on tablets, 1 on phones. */
.picline-service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.picline-service-grid > .picline-card {
    display: flex; flex-direction: column; min-width: 0; margin: 0;
    padding: clamp(1.5rem,3vw,2.25rem); border-top: 4px solid #F7E229; border-radius: 12px;
    background: #02084a; color: #fff;
}
.picline-card h3 { font-size: clamp(1.375rem,1rem + 0.6vw,1.875rem); line-height: 1.25; margin-block: 0; }
.picline-card p { font-size: clamp(1.0625rem, 0.95rem + 0.25vw, 1.25rem); line-height: 1.65; }
.picline-card > .picline-card-link { margin-top: auto; padding-top: 1.5rem; margin-bottom: 0; }
.picline-card-link a { font-weight: 700; }
.picline-card-link a { color: #F7E229; }
.picline-card-link a:hover, .picline-card-link a:focus-visible,
.picline-card:hover h3, .picline-card:focus-within h3 { color: #F7E229; }
.picline-step-number { color: #F7E229; }
.picline-benefit-grid, .picline-step-grid { display: grid; gap: clamp(2rem,3vw,3.5rem); }
.picline-benefit-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.picline-step-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
/* Since 29.09.2026 (Andrea): steps with the same 3 px yellow line as the points of «Warum Picline» on the Webdesign
   page (.picline-wd-benefit); before: 1 px line in the text colour. */
.picline-benefit, .picline-step { padding-block-start: 1.5rem; border-top: 3px solid #F7E229; }
/* Share heading and description rows only while benefits sit side by side. */
@media (min-width: 1101px) {
    .picline-benefit-grid { row-gap: 1.5rem; }
    .picline-benefit-grid > .picline-benefit {
        display: grid; grid-row: span 2; grid-template-rows: subgrid;
    }
    .picline-benefit > h3, .picline-benefit > p { margin-block: 0; }
}
/* The two adjacent paddings together leave 112px between content and title. */
@media (min-width: 782px) {
    .picline-person { padding-bottom: 56px !important; }
    .picline-process { padding-top: 56px !important; }
}
.picline-benefit-grid > .picline-benefit, .picline-step-grid > .picline-step { margin-block: 0; min-width: 0; }
.picline-benefit h3, .picline-step h3 { font-size: clamp(1.25rem, 1rem + .5vw, 1.625rem); line-height: 1.25; } /* like .picline-wd-benefit */
.picline-step-number { background: #02084a; width: 2.5rem; line-height: 2.5rem; padding-left: .875rem; box-sizing: border-box; border-radius: 50%; font-weight: 700; }
.picline-work-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.5rem,2vw,2.5rem); align-items: start; }
.picline-work-grid > .wp-block-image { margin: 0; }
.picline-work-grid img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.picline-work-grid .wp-image-25 { object-position: 50% 10%; }
.picline-work-grid .wp-image-26 { object-position: 60% 50%; }
.picline-work-grid figcaption { position: static; margin-block-start: 1rem; font-size: 1rem; font-weight: 600; text-align: left; }
/* The gallery shows the selected photographs at their original proportions. */
.picline-gallery .picline-work-grid img { aspect-ratio: auto; object-fit: contain; border-radius: 16px; }
.picline-person { border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-person-layout { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); align-items: center; gap: clamp(2rem,6vw,5rem); }
.picline-person-layout > .wp-block-group { margin-block: 0; }
.picline-portrait .wp-block-image { margin: 0; }
.picline-person-layout > .picline-portrait { max-width: 620px; }
.picline-portrait img { width: 100%; height: auto; }
.picline-region { padding-block: clamp(2rem,4vw,3rem) !important; border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-faq { padding-top: clamp(2rem,4vw,3rem) !important; }
.picline-faq-list { max-width: 1100px !important; }
.picline-faq-list > .wp-block-details { margin-block: 0; padding-block: 1.25rem; border-bottom: 1px solid rgb(2 8 74 / 20%); }
.picline-faq-list summary { font-weight: 700; cursor: pointer; }
.picline-faq-list p { max-width: 65ch; }
.picline-contact { border-top: 6px solid #F7E229; }
.picline-contact-copy h2 { max-width: 28ch; }
.picline-contact-copy { max-width: 1100px; }
/* Closing section: small round portrait of Andrea left of the text; on phones above it. */
.picline-contact-person { display: flex; align-items: flex-start; gap: 1.5rem; }
.picline-section .picline-contact-person > .picline-contact-portrait { flex-shrink: 0; margin: .25rem 0 0; }
.picline-section .picline-contact-portrait img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.picline-contact-person-copy > * { margin-block: 0; }
.picline-contact-person-copy > * + * { margin-top: .75rem; }
.picline-contact-line { font-weight: 700; }
.picline-contact-line a { color: inherit; }
@media (max-width: 600px) { .picline-contact-person { flex-direction: column; gap: 1rem; } }
.picline-section .wp-block-button__link, .picline-header .wp-block-button__link { padding: 1rem 1.5rem; font-size: 1.125rem; line-height: 1.65; }
.picline-section a:focus-visible, .picline-section summary:focus-visible,
.picline-header a:focus-visible, .picline-header button:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.picline-header { padding-block: 1rem; }
.picline-header-row, .picline-header-actions { display: flex; align-items: center; gap: 1.5rem; }
.picline-header-row { justify-content: space-between; }
.picline-header-row > .wp-block-group, .picline-header-actions > .wp-block-group, .picline-header-actions > nav { margin-block: 0; }
.picline-header nav { font-size: 1rem; }
.picline-header .wp-block-navigation__responsive-container-open,
.picline-header .wp-block-navigation__responsive-container-close {
    min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.picline-header .wp-block-navigation__responsive-container-close { display: flex; }
.picline-header .wp-block-navigation__responsive-container-open svg,
.picline-header .wp-block-navigation__responsive-container-close svg {
    width: 32px; height: 32px; flex-shrink: 0;
}
.picline-header .wp-block-navigation__responsive-container-open svg { width: 36px; height: 36px; }
.picline-header-cta .wp-block-buttons { flex-wrap: nowrap; }
.picline-header-cta a { white-space: nowrap; }
.picline-logo { width: 150px; max-width: 100%; margin: 0; flex-shrink: 0; }
.picline-logo img { display: block; width: 100%; height: auto; }
/* No white space above the footer since 29.09.2026: the contact section is light blue / white now (was navy, and the
   gap of clamp(2.5rem, 5vw, 4.5rem) kept it apart from the navy footer, 28.09.2026). */
.wp-site-blocks > footer { margin-block-start: 0; }
/* Template «Seite mit eigenem Einstieg» gives <main> padding-bottom (64 px, inline style) for pages that end with
   ordinary content; when the page ends with the contact section, it sits directly on the footer line. */
main:has(> .wp-block-post-content > .picline-contact:last-child) { padding-bottom: 0 !important; }
.picline-header .is-menu-open .wp-block-navigation__responsive-container-content,
.picline-header .is-menu-open .wp-block-navigation__container { align-items: flex-start; text-align: left; }
@media (min-width: 782px) and (max-width: 1100px) {
    .picline-service-grid, .picline-step-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .picline-benefit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
    .picline-header .picline-main-navigation button.picline-menu-toggle {
        /* Since 03.10.2026 (Andrea): «MENU» on one line (before «ME» over «NU» in a square of 56 px); the close button
           shows a cross and «Schliessen». */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        padding: 0 16px;
        white-space: nowrap;
        border: 0;
        border-radius: 4px;
        box-sizing: border-box;
        background: #FFFFFF;
        color: #02084a;
        font-family: inherit;
        font-weight: 800;
        font-size: 15px;
        line-height: 1;
        letter-spacing: .08em;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
    }
    .picline-header .picline-main-navigation button.picline-menu-toggle svg { flex: none; width: 18px; height: 18px; }
    .picline-header .picline-main-navigation button.picline-menu-toggle:hover,
    .picline-header .picline-main-navigation button.picline-menu-toggle:focus-visible {
        outline: 2px solid #F7E229;
        outline-offset: 2px;
    }
    .picline-header .picline-main-navigation button.picline-menu-toggle:active,
    .picline-header .picline-main-navigation button.picline-menu-toggle[aria-expanded="true"] {
        background: #F7E229;
        color: #02084a;
    }
    .picline-header .picline-menu-toggle.wp-block-navigation__responsive-container-close {
        position: fixed;
        top: calc(16px + var(--wp-admin--admin-bar--height, 0px));
        right: var(--wp--style--root--padding-right);
    }
    .picline-header .picline-main-navigation .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 80px; }
    /* Override the right-aligned desktop flex layout only in the open overlay. */
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content,
    .picline-header .is-menu-open .wp-block-navigation__container,
    .picline-header .is-menu-open .wp-block-navigation-item {
        align-items: flex-start !important;
        justify-content: flex-start;
        text-align: left;
    }
    .picline-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
    .picline-header .wp-block-navigation__responsive-container-open { display: flex; }
}
@media (max-width: 781px) {
    .picline-step { padding-block-start: 1rem; }
    .picline-step > h3, .picline-step > p:not(.picline-step-number) { margin-block-start: .75rem; }
    .picline-section { font-size: 1rem; }
    .picline-card p { font-size: 1rem; }
    .picline-person-layout { grid-template-columns: minmax(0,1fr); gap: 3rem; }
    .picline-split { grid-template-columns: minmax(0,1fr); gap: 2rem; }
    .picline-service-grid, .picline-benefit-grid, .picline-step-grid, .picline-work-grid { grid-template-columns: minmax(0,1fr); }
    .picline-work-grid > .wp-block-image { width: 100%; max-width: 600px; }
    .picline-portrait { max-width: 620px; }
}
@media (max-width: 600px) { .picline-header-cta { display: none; } }
/* Missing content stays conspicuous until it is supplied. */
.picline-placeholder {
    padding: .75rem 1rem; border: 2px dashed #02084a; border-radius: 8px;
    background: #F7E229; color: #02084a; font-weight: 700;
}
.picline-card .picline-placeholder { border-color: #02084a; }
.picline-card { overflow-wrap: break-word; }
.picline-service-grid.picline-grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
/* Service cards: 4 columns from 1100 px, 2 columns below, 1 column below 600 px. */
@media (min-width: 1100px) { .picline-service-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 1099px) { .picline-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 599px) { .picline-service-grid { grid-template-columns: minmax(0,1fr); } }
.picline-portrait img { border-radius: 16px; }
.picline-person-layout + .picline-service-detail { margin-top: 3rem; }
.picline-more-link a { font-weight: 700; }
/* Submenus: navy panel on desktop, collapsible rows in the ME/NU overlay. */
.picline-header .wp-block-navigation .wp-block-navigation__submenu-container {
    border: 0 solid rgb(255 255 255 / 20%); border-radius: 8px; background: #02084a; color: #fff;
}
/* Size, padding and frame only while open (same states WordPress uses to show the submenu). Before, a closed
   submenu stayed a hidden 260 x 18 px box with a grey frame that flashed as a bar over «Blog» and «Kontakt». */
.picline-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.picline-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.picline-header .wp-block-navigation .has-child [aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    min-width: 260px; padding: .5rem 0; border-width: 1px;
}
.picline-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem 1.25rem; white-space: nowrap; }
/* Menu icons (inc/navigation-toggle.php, class picline-nav-icon-<name> on the menu entry). ME/NU overlay: yellow line
   icon in front of the label. */
.picline-nav-icon { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: .6rem; color: #F7E229; vertical-align: -5px; }
.picline-nav-icon svg { display: block; width: 20px; height: 20px; }
/* Desktop submenus since 29.09.2026 (Andrea: «übersichtlicher und schön vom Design passend zur Website»): white card
   like the cards of the website, every entry with its icon (yellow on a navy tile), light blue on hover, the current
   page with a yellow line. The three Webdesign subpages (third level) stand indented under «Webdesign» in the same
   card instead of a second panel opening to the side. */
@media (min-width: 1024px) {
    .picline-header .wp-block-navigation .wp-block-navigation__submenu-container {
        border-color: #E3E6F2 !important; border-radius: 16px; background: #fff !important; color: #02084a !important;
        box-shadow: 0 2px 4px rgb(2 8 74 / 6%), 0 24px 48px -12px rgb(2 8 74 / 40%);
    }
    /* A little below the header; the transparent strip keeps the menu open on the way down. */
    .picline-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container { top: calc(100% + 12px) !important; }
    .picline-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; top: -14px; right: 0; left: 0; height: 14px; }
    .picline-header .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container,
    .picline-header .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container { min-width: 300px; padding: 8px; }
    .picline-header .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
    .picline-header .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child { flex-direction: column; align-items: stretch !important; }
    .picline-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 7px 14px 7px 7px; border-radius: 10px;
        color: #02084a !important; font-weight: 600; line-height: 1.3; white-space: nowrap; text-decoration: none !important;
    }
    .picline-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: #eef1fa; }
    .picline-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { outline: 2px solid #02084a; outline-offset: -2px; }
    .picline-header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { background: #eef1fa; box-shadow: inset 3px 0 0 #F7E229; }
    .picline-header .wp-block-navigation__submenu-container .picline-nav-icon { width: 34px; height: 34px; margin: 0; border-radius: 9px; background: #02084a; color: #F7E229; vertical-align: 0; }
    .picline-header .wp-block-navigation__submenu-container .picline-nav-icon svg { width: 18px; height: 18px; }
    /* Third level: always shown with its parent, indented under «Webdesign» with a yellow guide line. */
    .picline-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        position: static !important; visibility: inherit !important; opacity: 1 !important; overflow: visible !important;
        width: auto !important; min-width: 0 !important; height: auto !important;
        margin: 0 0 6px 47px !important; padding: 0 0 0 10px !important;
        border: 0 !important; border-left: 3px solid #F7E229 !important; border-radius: 0; background: transparent !important; box-shadow: none;
    }
    .picline-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 5px 10px; color: #3a3f63 !important; font-size: .9375em; font-weight: 500; }
    .picline-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { display: none; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .picline-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { transition: background-color .15s ease; }
}
.picline-header .wp-block-navigation-item__content:hover,
.picline-header .current-menu-item > .wp-block-navigation-item__content { color: #F7E229; }
.picline-submenu-toggle { display: none; }
@media (max-width: 1023px) {
    .picline-header .is-menu-open .wp-block-navigation-item.has-child { flex-direction: row; flex-wrap: wrap; align-items: center !important; }
    .picline-header .is-menu-open .picline-submenu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin: 0 0 0 .5rem; padding: 0;
        border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer;
    }
    .picline-header .is-menu-open .picline-submenu-toggle:focus-visible { outline: 2px solid #F7E229; outline-offset: 2px; }
    .picline-header .is-menu-open .picline-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .picline-header .is-menu-open .has-child > .wp-block-navigation__submenu-container {
        flex-basis: 100%; min-width: 0; padding: .25rem 0 .5rem 1.25rem !important; border: 0 !important; border-left: 2px solid #F7E229 !important; border-radius: 0;
    }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .25rem 0; white-space: normal; }
    .picline-header .is-menu-open .has-child:not(.picline-submenu-open) > .wp-block-navigation__submenu-container { display: none !important; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    .picline-header .picline-submenu-toggle svg { transition: transform .2s ease; }
}
/* ME/NU overlay since 29.09.2026 night (Andrea: «Handy-Ansicht gleich wie Webansicht»): the opened submenu is the same
   white card as on computers, every entry with its icon on a navy tile, light blue when touched, the current page
   with a yellow line; the three Webdesign subpages always shown under «Webdesign», indented with a yellow guide line
   (their own toggle is hidden). */
@media (max-width: 1023px) {
    .picline-header .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
        box-sizing: border-box; width: 100%; max-width: 440px; margin: 10px 0 6px !important; padding: 8px !important;
        border: 1px solid #E3E6F2 !important; border-radius: 16px !important; background: #fff !important; color: #02084a !important;
        box-shadow: 0 2px 4px rgb(2 8 74 / 6%), 0 24px 48px -12px rgb(0 0 0 / 45%);
    }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; margin: 0; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 7px 14px 7px 7px !important; border-radius: 10px;
        color: #02084a !important; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; text-decoration: none !important;
    }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible, :active) { background: #eef1fa; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { outline: 2px solid #02084a; outline-offset: -2px; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { background: #eef1fa; box-shadow: inset 3px 0 0 #F7E229; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .picline-nav-icon { width: 34px; height: 34px; margin: 0; border-radius: 9px; background: #02084a; color: #F7E229; vertical-align: 0; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .picline-nav-icon svg { width: 18px; height: 18px; }
    /* Third level (Webdesign › Erstvermietung, Karriereseite, Preisrechner) */
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child { flex-direction: column; flex-wrap: nowrap; align-items: stretch !important; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .picline-submenu-toggle,
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { display: none; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
        display: flex !important; flex-direction: column; width: auto; margin: 0 0 6px 47px !important; padding: 0 0 0 10px !important;
        border: 0 !important; border-left: 3px solid #F7E229 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none;
    }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 6px 10px !important; color: #3a3f63 !important; font-size: 1rem; font-weight: 500; }
    /* Right-aligned and larger (Andrea 29.09.2026 night): the entries, the «Leistungen» card and the button stand at the
       right edge under the ME/NU button; inside the card the entries stay left-aligned behind their icons. */
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content,
    .picline-header .is-menu-open .wp-block-navigation__container,
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
        align-items: flex-end !important; justify-content: flex-end; text-align: right;
    }
    .picline-header .is-menu-open .wp-block-navigation__container { gap: .35rem 0; }
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding: .45rem 0 !important; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); font-weight: 600; line-height: 1.2;
    }
    .picline-header .is-menu-open .wp-block-navigation__container > .has-child > .picline-submenu-toggle { width: 48px; height: 48px; }
    .picline-header .is-menu-open .wp-block-navigation__container > .has-child > .picline-submenu-toggle svg { width: 22px; height: 22px; }
    .picline-header .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
        max-width: 540px; margin: 12px 0 10px auto !important; padding: 10px !important; text-align: left;
    }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { align-items: stretch !important; justify-content: flex-start; text-align: left; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { gap: 14px; padding: 8px 16px 8px 8px !important; font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.375rem); }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .picline-nav-icon { width: 44px; height: 44px; border-radius: 11px; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .picline-nav-icon svg { width: 22px; height: 22px; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { margin: 0 0 8px 60px !important; padding-left: 12px !important; }
    .picline-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 7px 10px !important; font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); }
    .picline-header .is-menu-open .wp-block-buttons { justify-content: flex-end; margin-top: .75rem; }
    .picline-header .is-menu-open .wp-block-button__link { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); }
}
/* Mega menu «Leistungen» since 30.09.2026 (Andrea: «so ein Menü wie im Bild, aber auf Picline angepasst»; markup from
   inc/mega-menue.php, groups and card in inc/mega-menue-einstellungen.php). Computer: white panel as wide as the header
   row under the header, the services in four groups (2 × 2, name and short line), on the right a navy card with Andrea's
   photo on the yellow disc (as in the front page hero), «Projekt besprechen», «Kontaktiere uns», phone, e-mail and the
   Google rating. Closes with a short delay, so the way from «Leistungen» to the card does not close it. ME/NU overlay:
   the same groups in the white card, below a compact navy card (no photo, no button, no rating). */
.picline-mega-panel ul { margin: 0; padding: 0; list-style: none; }
.picline-mega-panel li { margin: 0; list-style: none; }
.picline-mega-panel p { margin: 0; }
.picline-mega-gruppen { display: grid; }
.picline-mega-titel { display: flex; align-items: center; gap: 10px; color: #02084a; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.picline-mega-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #02084a; color: #F7E229; }
.picline-mega-icon svg { display: block; width: 17px; height: 17px; }
.picline-header .picline-mega-link { display: flex; flex-direction: column; gap: 2px; border-radius: 10px; color: #02084a; text-align: left; text-decoration: none; }
.picline-mega-name { font-weight: 700; line-height: 1.3; }
/* The hover arrow hangs on the last word (non-breaking space), so a long name never gets an empty line for it alone. */
.picline-mega-name::after { content: "\00a0\2192"; position: relative; left: -4px; opacity: 0; }
.picline-header .is-menu-open .picline-mega-name::after { display: none; }
/* Symbol before and label after a title ('extras' in inc/mega-menue-einstellungen.php; since 30.09.2026 night the
   calculator and «1 Min.» at «Preis für Deine Website berechnen»). No background of the entry itself, hover like the
   other entries. */
.picline-mega-name-icon { display: inline-block; width: 1.15em; height: 1.15em; margin-right: .35em; color: #02084a; vertical-align: -.2em; }
.picline-mega-name-icon svg { display: block; width: 100%; height: 100%; }
.picline-mega-etikett { display: inline-block; margin-left: .5em; padding: .12em .5em; border-radius: 999px; background: #F7E229; color: #02084a; font-size: .72em; font-weight: 800; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; vertical-align: .1em; }
.picline-mega-text { color: #474d77; font-weight: 400; line-height: 1.4; }
.picline-header .picline-mega-link:is(:hover, :focus-visible) { background: #eef1fa; }
.picline-header .picline-mega-link:is(:hover, :focus-visible) .picline-mega-name::after { opacity: 1; left: 0; }
.picline-header .picline-mega-link:focus-visible { outline: 2px solid #02084a; outline-offset: -2px; }
.picline-header .picline-mega-link[aria-current="page"] { background: #eef1fa; box-shadow: inset 3px 0 0 #F7E229; }
.picline-mega-karte { display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background: #02084a; color: #fff; text-align: left; }
.picline-mega-foto { position: relative; display: flex; justify-content: center; margin-bottom: 14px; border-bottom: 1px solid rgb(255 255 255 / 18%); overflow: hidden; }
.picline-mega-foto::before { content: ""; position: absolute; left: 50%; bottom: -30px; width: 136px; height: 136px; border-radius: 50%; background: #F7E229; transform: translateX(-50%); }
.picline-mega-bild { position: relative; display: block; width: 166px; max-width: 100%; height: auto; }
.picline-header .picline-mega-karte-titel { color: #fff; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.picline-header .picline-mega-karte-text { margin-top: 6px; color: rgb(255 255 255 / 82%); line-height: 1.45; }
.picline-header .picline-mega-knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
.picline-header .picline-mega-knopf { display: inline-flex; align-items: center; gap: .5em; padding: .75rem 1.25rem; border-radius: 4px; background: #F7E229; color: #02084a; font-weight: 700; line-height: 1.2; text-decoration: none; }
.picline-mega-knopf::after { content: "\2192"; }
.picline-header .picline-mega-kontakt { padding: 0; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.picline-header .picline-mega-kontakt:hover { color: #F7E229; }
/* «Erstgespräch buchen» (01.10.2026): calendar symbol in yellow before, yellow label «30 Min.» after; only the words are
   underlined (symbol and label are inline blocks, the underline does not run through them). */
.picline-header .picline-mega-kontakt.has-extra .picline-mega-name-icon { color: #F7E229; }
.picline-header .picline-mega-kontakt.has-extra .picline-mega-etikett { text-decoration: none; }
.picline-header .picline-mega-knopf:focus-visible, .picline-header .picline-mega-kontakt:focus-visible, .picline-header .picline-mega-direkt a:focus-visible, .picline-header .picline-mega-bewertung a:focus-visible { outline: 2px solid #F7E229; outline-offset: 3px; }
.picline-mega-panel .picline-mega-direkt { display: grid; gap: 2px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 18%); }
.picline-header .picline-mega-direkt a { display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 4px 8px; border-radius: 10px; color: #fff; font-weight: 700; line-height: 1.2; text-decoration: none; }
.picline-header .picline-mega-direkt a:hover { background: rgb(255 255 255 / 8%); }
.picline-mega-direkt small { display: block; color: rgb(255 255 255 / 72%); font-size: .8125em; font-weight: 500; }
.picline-mega-direkt-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgb(247 226 41 / 14%); color: #F7E229; }
.picline-mega-direkt-icon svg { display: block; width: 16px; height: 16px; }
.picline-header .picline-mega-bewertung { margin-top: 12px; color: rgb(255 255 255 / 85%); line-height: 1.3; white-space: nowrap; }
.picline-header .picline-mega-bewertung a { padding: 0; color: inherit; text-decoration: none; }
.picline-header .picline-mega-bewertung a:hover { color: #fff; text-decoration: underline; text-decoration-color: #F7E229; text-underline-offset: 4px; }
.picline-mega-bewertung strong { color: #fff; font-weight: 800; }
.picline-mega-sterne { color: #F7E229; letter-spacing: .02em; }
.picline-mega-bewertung-text { white-space: nowrap; }
@media (min-width: 1024px) {
    /* The panel hangs from the header row (not from «Leistungen»), so it spans the width of the content. */
    .picline-header .picline-header-row { position: relative; }
    .picline-header nav.picline-main-navigation,
    .picline-header .picline-main-navigation .wp-block-navigation__responsive-container,
    .picline-header .picline-main-navigation .wp-block-navigation__responsive-dialog,
    .picline-header .picline-main-navigation .wp-block-navigation__container,
    .picline-header .picline-main-navigation li.picline-mega { position: static !important; }
    .picline-header .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel {
        top: calc(100% + 26px) !important; right: 0 !important; left: 0 !important; z-index: 30;
        display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26%, 340px); gap: 28px; box-sizing: border-box;
        width: auto !important; min-width: 0 !important; height: auto !important; padding: 22px !important; overflow: visible !important;
        border-width: 1px; border-style: solid; border-radius: 18px;
        transition: opacity .16s ease .22s, visibility 0s linear .38s;
    }
    .picline-header .wp-block-navigation__container > li.picline-mega:hover > ul.picline-mega-panel,
    .picline-header .wp-block-navigation__container > li.picline-mega > [aria-expanded="true"] ~ ul.picline-mega-panel { transition: opacity .16s ease, visibility 0s; }
    /* Transparent strip from «Leistungen» down to the panel keeps it open on the way down. */
    .picline-header .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel::before { top: -38px; height: 38px; }
    .picline-mega-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 26px 28px; padding: 4px 2px 0 6px; }
    /* Since 01.10.2026 (Andrea): «Websites» fills the left column, the other three groups stand below each other on the
       right («Social Media und Recruiting» in the gap under «Fotografie und Design», then «Workshops und Schulungen»). */
    .picline-mega-gruppen > .picline-mega-gruppe:first-child { grid-column: 1; grid-row: 1 / span 3; }
    .picline-mega-gruppen > .picline-mega-gruppe:not(:first-child) { grid-column: 2; }
    /* Since 01.10.2026 late evening five groups: left «Websites» and below it «Gefunden werden» (SEO, Local SEO, GEO),
       right the other three. Two real columns (CSS columns) so that the groups of one side do not depend on the heights
       of the other side; the third group starts the right column. */
    .picline-mega-gruppen { display: block; column-count: 2; column-gap: 28px; }
    .picline-mega-gruppen > .picline-mega-gruppe { break-inside: avoid; margin-bottom: 26px; }
    /* Since 04.10.2026 six groups: left Websites, Lösungen, Gefunden werden; the fourth group starts the right column. */
    .picline-mega-gruppen > .picline-mega-gruppe:nth-child(4) { break-before: column; }
    .picline-mega-gruppen > .picline-mega-gruppe:nth-child(3), .picline-mega-gruppen > .picline-mega-gruppe:last-child { margin-bottom: 0; }
    .picline-mega-titel { margin-bottom: 8px !important; padding-bottom: 10px; border-bottom: 1px solid #E3E6F2; font-size: calc(13px / .9); }
    .picline-mega-liste { display: grid; gap: 2px; }
    .picline-header .picline-mega-link { margin: 0 -12px; padding: 9px 12px; }
    .picline-mega-name { font-size: calc(16px / .9); }
    .picline-mega-text { font-size: calc(14px / .9); }
    .picline-mega-karte { padding: 20px 22px; }
    .picline-header .picline-mega-karte-titel { font-size: calc(19px / .9); }
    .picline-header .picline-mega-karte-text { font-size: calc(14.5px / .9); }
    .picline-mega-knopf, .picline-mega-kontakt { font-size: calc(16px / .9); }
    .picline-header .picline-mega-direkt a { font-size: calc(16px / .9); }
    .picline-header .picline-mega-bewertung { font-size: calc(13px / .9); }
}
/* Laptops with low windows (1366 x 657): less space between the entries, so the panel with the «Websites» entries
   still fits under the header.
   Since 01.10.2026 six entries («Website-Wartung»): tighter (before 720 px, row gap 20, padding 7) and up to 780 px. */
@media (min-width: 1024px) and (max-height: 780px) {
    .picline-mega-gruppen { row-gap: 14px; }
    .picline-mega-gruppen > .picline-mega-gruppe:not(:nth-child(3)):not(:last-child) { margin-bottom: 14px; }
    .picline-header .picline-mega-link { padding-block: 4px; }
}
/* Up to 715 px window height (1366 x 657, 1280 x 600, 1101 x 700): since 02.10.2026 evening the short lines under the
   names stay (Andrea: at 90 and 100 % browser view they had disappeared, at 80 % they were there; before they were
   hidden here so the panel fits). Instead everything is set tighter: less padding, smaller title tiles, tighter lines. */
@media (min-width: 1024px) and (max-height: 715px) {
    .picline-header .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { padding: 16px 22px !important; }
    .picline-mega-gruppen > .picline-mega-gruppe:not(:nth-child(3)):not(:last-child) { margin-bottom: 10px; }
    .picline-mega-titel { margin-bottom: 4px !important; padding-bottom: 6px; }
    .picline-mega-icon { width: 28px; height: 28px; }
    .picline-mega-liste { gap: 0; }
    .picline-header .picline-mega-link { gap: 0; padding-block: 2px; }
    .picline-mega-name { line-height: 1.22; }
    .picline-mega-text { line-height: 1.3; }
}
/* Safety net for every window height: the groups never reach below the window, they scroll inside the panel instead
   (the 90 % view scales the box, so the height is divided by .9). The links stand out 12 px to the left and right
   (hover ground), so the box gets that much room. */
@media (min-width: 1024px) {
    .picline-mega-panel > .picline-mega-bereich { max-height: calc((100vh - 145px) / .9); margin-inline: -12px; padding-inline: 12px; overflow-y: auto; overscroll-behavior: contain; }
}
/* Low windows: without the photo and tighter still, the panel fits under the header (1280 x 600). */
@media (min-width: 1024px) and (max-height: 620px) {
    .picline-mega-foto { display: none; }
    .picline-header .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { padding: 14px 22px !important; }
    .picline-mega-gruppen { row-gap: 10px; }
    .picline-mega-gruppen > .picline-mega-gruppe:not(:nth-child(3)):not(:last-child) { margin-bottom: 10px; }
    .picline-mega-titel { margin-bottom: 3px !important; padding-bottom: 4px; }
    .picline-mega-icon { width: 26px; height: 26px; }
    .picline-header .picline-mega-link { padding-block: 1px; }
    .picline-mega-name { line-height: 1.18; }
    .picline-mega-text { line-height: 1.22; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .picline-header .picline-mega-link { transition: background-color .15s ease; }
    .picline-mega-name::after { transition: opacity .15s ease, left .15s ease; }
    .picline-header .picline-mega-knopf { transition: transform .18s ease, box-shadow .18s ease; }
    .picline-header .picline-mega-knopf:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgb(247 226 41 / 25%); }
}
/* ME/NU overlay since 30.09.2026 night (Andrea: «das Menü auch für die Mobile-Variante, so gut wie möglich»; before a
   narrow card and a small navy box without photo, button and rating): the same panel as on computers over the full
   width: white, radius 18, group titles with icon tile and fine line, name and short line, below the navy card with
   Andrea's photo on the yellow disc, «Projekt besprechen», «Kontaktiere uns», phone, e-mail and rating. Phones: one
   column, the button over the full width. From 600 px the groups stand 2 × 2 like on computers and the card shows the
   photo on the left, the text on the right. */
@media (max-width: 1023px) {
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega { align-self: stretch; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel {
        box-sizing: border-box; width: 100%; max-width: none; margin: 14px 0 12px !important; padding: 16px !important;
        border-radius: 18px !important; text-align: left;
    }
    .picline-header .is-menu-open .picline-mega-gruppen { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .picline-header .is-menu-open .picline-mega-titel { margin: 0 0 6px !important; padding-bottom: 10px; border-bottom: 1px solid #E3E6F2; font-size: .8125rem; }
    .picline-header .is-menu-open .picline-mega-icon { width: 32px; height: 32px; }
    .picline-header .is-menu-open .picline-mega-liste { display: grid; gap: 2px; }
    .picline-header .is-menu-open .picline-mega-link { margin: 0 -10px; padding: 8px 10px; }
    .picline-header .is-menu-open .picline-mega-link:active { background: #eef1fa; }
    .picline-header .is-menu-open .picline-mega-name { font-size: 1.125rem; }
    .picline-header .is-menu-open .picline-mega-text { font-size: .9375rem; }
    .picline-header .is-menu-open .picline-mega-karte { margin-top: 22px; padding: 20px; border-radius: 16px; }
    .picline-header .is-menu-open .picline-mega-karte-titel { font-size: 1.25rem; }
    .picline-header .is-menu-open .picline-mega-karte-text { font-size: 1rem; }
    .picline-header .is-menu-open .picline-mega-knoepfe { margin-top: 16px; }
    .picline-header .is-menu-open .picline-mega-knopf { box-sizing: border-box; min-height: 48px; font-size: 1.0625rem; }
    .picline-header .is-menu-open .picline-mega-kontakt { display: inline-block; padding: .25rem 0; font-size: 1.0625rem; }
    .picline-header .is-menu-open .picline-mega-direkt a { min-height: 44px; font-size: 1.0625rem; }
    .picline-header .is-menu-open .picline-mega-bewertung { font-size: .9375rem; white-space: normal; }
}
@media (max-width: 599px) {
    .picline-header .is-menu-open .picline-mega-knoepfe { align-items: stretch; }
    .picline-header .is-menu-open .picline-mega-knopf { justify-content: center; }
    .picline-header .is-menu-open .picline-mega-kontakt { align-self: flex-start; }
    .picline-header .is-menu-open .picline-mega-bewertung { font-size: .875rem; }
}
/* Very narrow phones (320 px): less padding, so «Projekt besprechen →» stays on one line. */
@media (max-width: 359px) {
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { padding: 12px !important; }
    .picline-header .is-menu-open .picline-mega-karte { padding: 18px 16px; }
    .picline-header .is-menu-open .picline-mega-knopf { padding-inline: 1rem; font-size: 1rem; }
}
@media (min-width: 600px) and (max-width: 1023px) {
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { padding: 22px !important; }
    .picline-header .is-menu-open .picline-mega-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; }
    .picline-header .is-menu-open .picline-mega-karte { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 22px 24px; }
    .picline-header .is-menu-open .picline-mega-karte > * { grid-column: 2; }
    /* The photo stands on the lower edge of the card (like in the front page hero), no line below it. */
    .picline-header .is-menu-open .picline-mega-karte > .picline-mega-foto { grid-column: 1; grid-row: 1 / span 6; align-self: end; margin: 0 0 -22px; border-bottom: 0; }
    .picline-header .is-menu-open .picline-mega-karte > .picline-mega-foto::before { width: 170px; height: 170px; bottom: -40px; }
    .picline-header .is-menu-open .picline-mega-bild { width: 190px; }
}
/* 1024 to 1100 px (90 % view): button and contact rows keep a visible tap height of 48 / 44 px. */
@media (min-width: 1024px) and (max-width: 1023px) {
    .picline-header .is-menu-open .picline-mega-knopf { min-height: calc(48px / .9); }
    .picline-header .is-menu-open .picline-mega-direkt a { min-height: calc(44px / .9); }
}
/* ME/NU overlay like the computer version since 30.09.2026 night (Andrea: «die Menüseite an die Desktop-Variante
   anpassen»; before: large right-aligned entries and «Leistungen» folded, geht dem Punkt «rechtsbündig und grösser»
   vom 29.09.2026 vor): logo top left (inc/navigation-toggle.php) and ME/NU right like the header, the entries in one
   row like the desktop navigation (Leistungen, Unsere Arbeiten, Über uns, Kontakt; wraps on phones), below them the
   mega panel of «Leistungen», already open when the overlay opens (assets/navigation-toggle.js), its arrow folds it.
   The menu button «Projekt besprechen» shows only while «Leistungen» is folded (the card in the panel has it). */
.picline-menu-logo { display: none; }
@media (max-width: 1023px) {
    /* The dialog around it already starts at the page gutter and 16 px from the top, level with ME/NU. */
    .picline-header .is-menu-open .picline-menu-logo { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; height: 56px; }
    .picline-header .is-menu-open .picline-menu-logo img { display: block; width: 130px; height: auto; }
    .picline-header .is-menu-open .picline-menu-logo:focus-visible { outline: 2px solid #F7E229; outline-offset: 4px; }
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; text-align: left; }
    .picline-header .is-menu-open .wp-block-navigation__container {
        flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important;
        gap: 2px 22px !important; width: 100%; text-align: left;
    }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega { display: contents; }
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { align-items: center !important; justify-content: flex-start; text-align: left; }
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding: .45rem 0 !important; font-size: 1.125rem; font-weight: 600; line-height: 1.3;
    }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > .picline-submenu-toggle { width: 34px; height: 40px; margin: 0 0 0 -18px; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > .picline-submenu-toggle svg { width: 16px; height: 16px; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega.picline-submenu-open > .wp-block-navigation-item__content {
        color: #F7E229; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
    }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { order: 10; flex-basis: 100%; margin: 12px 0 8px !important; }
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content:has(li.picline-mega.picline-submenu-open) > .wp-block-buttons { display: none; }
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-buttons { justify-content: flex-start; margin-top: 1.25rem; }
}
@media (min-width: 600px) and (max-width: 1023px) {
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 1.25rem; }
    .picline-header .is-menu-open .picline-menu-logo img { width: 150px; }
}
.picline-menu-direkt { display: none; }
/* ME/NU overlay since 01.10.2026 (Andrea: «nutze die ganze Fläche, Buttons untereinander, rechtsbündig, attraktiv und
   nutzerfreundlich»; geht dem Block «like the computer version» oben vor, was die Anordnung der Einträge betrifft): the
   entries one below the other, right-aligned and large, each a full-width row with a fine line; «Leistungen» opens its
   panel directly below it (not at the end any more, not open at once); the yellow button right-aligned under the
   entries; phone and e-mail at the foot of the screen. Logo and ME/NU at the top stay. */
@media (max-width: 1023px) {
    .picline-header .is-menu-open .wp-block-navigation__responsive-dialog { display: flex; flex-direction: column; min-height: calc(100dvh - 32px); }
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content { flex: 1 0 auto; align-items: stretch !important; justify-content: flex-start !important; padding-top: clamp(4.75rem, 11vh, 6rem) !important; }
    .picline-header .is-menu-open .wp-block-navigation__container {
        flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; text-align: right;
    }
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
        display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-end !important;
        width: 100%; border-bottom: 1px solid rgb(255 255 255 / 14%); text-align: right;
    }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega { display: flex !important; }
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding: clamp(.8rem, 2.2vh, 1.1rem) 0 !important; font-size: clamp(1.625rem, 6.4vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
    }
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] { color: #F7E229; }
    /* Arrow of «Leistungen» after the word, turns when open. */
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > .picline-submenu-toggle { order: 2; width: 44px; height: 44px; margin: 0 -8px 0 4px; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > .picline-submenu-toggle svg { width: 20px; height: 20px; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > .wp-block-navigation-item__content { order: 1; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega.picline-submenu-open > .wp-block-navigation-item__content { text-decoration: none; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { order: 3; flex-basis: 100%; margin: 4px 0 18px !important; }
    /* Yellow button right-aligned under the entries, always visible (the card in the panel has no button any more). */
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content:has(li.picline-mega.picline-submenu-open) > .wp-block-buttons { display: flex; }
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-buttons { justify-content: flex-end !important; width: 100%; margin-top: clamp(1.75rem, 4vh, 2.5rem); }
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-buttons .wp-block-button__link { min-height: 54px; padding: .95rem 1.6rem; font-size: 1.125rem; }
    /* Phone and e-mail at the foot. */
    .picline-header .is-menu-open .picline-menu-direkt {
        order: 5; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; margin: 2rem 0 0; padding: 1.25rem 0 .5rem;
        border-top: 1px solid rgb(255 255 255 / 14%); text-align: right;
    }
    .picline-header .is-menu-open .picline-menu-direkt a { color: #fff; font-size: 1.0625rem; font-weight: 600; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 5px; }
    .picline-header .is-menu-open .picline-menu-direkt a:focus-visible { outline: 2px solid #F7E229; outline-offset: 3px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 2.25rem; }
}
/* ME/NU overlay since 01.10.2026 midday (Andrea: «sobald man auf Menü drückt, kommt das Weisse mit allen Infos drin;
   baue hier Unsere Arbeiten, Über uns und Kontakt rein», only phone and tablet; geht dem Block darüber vor): under logo
   and ME/NU stands only the white panel, open at once (assets/navigation-toggle.js). The other menu entries are one more
   group «Picline» inside it (inc/mega-menue.php, hidden on computers), so the large rows, the title «Leistungen», the
   yellow button and the phone/e-mail line at the foot are not shown: «Erstgespräch buchen», phone and e-mail are in the
   navy card of the panel. */
.picline-mega-gruppe-seiten { display: none; }
@media (max-width: 1023px) {
    .picline-header .is-menu-open .picline-mega-gruppe-seiten { display: block; }
    .picline-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.picline-mega),
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > :not(ul.picline-mega-panel),
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-buttons,
    .picline-header .is-menu-open .picline-menu-direkt { display: none !important; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega { border-bottom: 0; }
    .picline-header .is-menu-open .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { margin: 0 0 16px !important; }
    .picline-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 76px !important; }
}
/* Tablet (two columns): «Websites» has the most entries, the group «Picline» fills the space under «Fotografie und
   Design» next to it. */
@media (min-width: 600px) and (max-width: 1023px) {
    .picline-header .is-menu-open .picline-mega-gruppen > .picline-mega-gruppe:first-child { grid-column: 1; grid-row: 1 / span 2; }
    .picline-header .is-menu-open .picline-mega-gruppen > .picline-mega-gruppe-seiten { grid-column: 2; grid-row: 2; }
}

/* Mega menu card since 02.10.2026 (Andrea: «wir sind zu zweit»): landscape photo of Sandra and Andrea
   (.picline-mega-foto-breit, set by 'bild_form' in inc/mega-menue-einstellungen.php), as wide as the card, the yellow
   disc behind both, the photo is never cropped. Two classes so that these rules win over the ones around them. */
.picline-mega-foto.picline-mega-foto-breit .picline-mega-bild { width: 100%; max-width: 300px; }
.picline-mega-foto.picline-mega-foto-breit::before { top: 20%; bottom: auto; width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; }
@media (min-width: 600px) and (max-width: 1023px) {
    .picline-header .is-menu-open .picline-mega-karte:has(.picline-mega-foto-breit) { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
    .picline-header .is-menu-open .picline-mega-karte > .picline-mega-foto.picline-mega-foto-breit::before { top: 20%; bottom: auto; width: 100%; max-width: 300px; height: auto; }
}
/* Mega menu card on computers since 01.10.2026 (Andrea: «verteile es, du hast Platz bis unten, mach es lockerer»): larger
   photo, more space between the parts, phone, e-mail and rating at the foot of the card. */
@media (min-width: 1024px) {
    .picline-mega-karte { padding: 24px 26px 26px; }
    .picline-mega-foto { margin-bottom: 20px; }
    .picline-mega-foto::before { width: 164px; height: 164px; bottom: -36px; }
    .picline-mega-bild { width: 200px; }
    .picline-header .picline-mega-karte-text { margin-top: 10px; }
    .picline-header .picline-mega-knoepfe { margin-top: 22px; }
    .picline-mega-panel .picline-mega-direkt { gap: 8px; margin-top: auto; padding-top: 18px; }
    .picline-header .picline-mega-bewertung { margin-top: 18px; }
}
@media (max-width: 781px) {
    .picline-service-grid.picline-grid-two { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: no-preference) {
    .picline-card { transition: transform .18s ease, box-shadow .18s ease; }
    .picline-section .wp-block-button__link, .picline-header .wp-block-button__link { transition: transform .18s ease, box-shadow .18s ease; }
    @media (hover: hover) {
        .picline-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgb(2 8 74 / 12%); }
        .picline-section .wp-block-button__link:hover, .picline-header .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgb(247 226 41 / 25%); }
    }
}

/* ---------- Hero (front page, since 28.09.2026): like the webdesign page, navy without photo, dot grid on a canvas ---------- */
/* Same type, spacing, eyebrow and buttons as .picline-wd-hero in assets/webdesign.css. The former title photo (ID 109)
   stays in the media library. The dot grid is drawn by assets/hero-dots.js. */
.picline-section.picline-hero { position: relative; isolation: isolate; overflow: hidden; background: #02084a; color: #fff; }
/* Front page only (29.09.2026, Andrea: better design): depth in the navy, a soft lighter glow top right, a hint of
   yellow bottom right and a slightly darker bottom edge. CI colours only, no image. The photography pages share the
   hero markup (class picline-fz-hero) and keep the flat navy. */
.picline-section.picline-hero:not(.picline-fz-hero), .picline-section.picline-hero-start {
    background-image:
        radial-gradient(48% 70% at 82% 48%, rgb(35 48 150 / 48%) 0%, rgb(35 48 150 / 0%) 70%),
        radial-gradient(40% 55% at 100% 100%, rgb(247 226 41 / 7%) 0%, rgb(247 226 41 / 0%) 70%),
        linear-gradient(180deg, rgb(2 8 74 / 0%) 60%, rgb(1 4 40 / 45%) 100%);
}
.picline-hero-dots { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none !important; margin: 0 !important; pointer-events: none; }
/* Since 06.10.2026 (Andrea): the yellow dots only with a mouse and from 1100 px width. Phones and tablets never get the
   canvas (functions.php, assets/hero-dots.js); this hides it when a computer window is made narrower afterwards. */
@media (max-width: 1099px), (hover: none), (pointer: coarse) { .picline-hero-dots { display: none; } }
.picline-hero .picline-eyebrow { margin: 0 0 1rem; text-transform: uppercase; line-height: 1.2; }
.picline-hero-copy > * { margin-block: 0; }
.picline-hero-copy > * + * { margin-top: 1.25rem; }
/* The block preset class .has-hero-font-size uses !important, so this needs it too. */
.picline-section .picline-hero-copy > h1, .picline-hero h1.has-hero-font-size {
    max-width: none; font-size: clamp(2.2rem, 3.6vw, 4.25rem) !important; line-height: 1.1; letter-spacing: -.025em; text-wrap: pretty;
}
.picline-hero-promise { font-size: clamp(1.25rem, .9rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.3; }
.picline-hero-copy > .picline-hero-promise { margin-top: 1.5rem; }
.picline-hero-copy > p:not(.picline-eyebrow):not(.picline-hero-promise) { max-width: none; opacity: .9; }
/* Rotating word line under the H1 (28.09.2026, looks like .picline-wd-rotator in webdesign.css, own class so the
   front page does not load webdesign.css). Any number of words, one <span> each; motion.js shows one after the other
   (class is-active) while the hero is on screen. Without JS: first word only. Reduced motion: all words, side by side. */
.picline-hero-copy > .picline-hero-rotator { display: grid; margin-top: .75rem; color: #F7E229; opacity: 1; font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); font-weight: 800; line-height: 1.2; }
.picline-hero-rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.35em); transition: opacity .45s ease, transform .45s ease; }
/* Since 02.10.2026 (Andrea: the words overlapped visibly, e.g. «Teamfotos» over «Firmenfotografie»): the leaving word
   is gone after .2 s, the next one only starts to appear then (before: both faded for .45 s on the same spot). */
.picline-hero-rotator > span.is-leaving { opacity: 0; transform: translateY(-.35em); transition-duration: .2s; }
.picline-hero-rotator:not(.is-running) > span:first-child, .picline-hero-rotator > span.is-active { opacity: 1; transform: none; }
.picline-hero-rotator.is-running > span.is-active { transition: opacity .35s ease .22s, transform .35s ease .22s; }
@media (prefers-reduced-motion: reduce) {
    .picline-hero-copy > .picline-hero-rotator { display: flex; flex-wrap: wrap; gap: 0 .6em; }
    .picline-hero-rotator > span { grid-area: auto; opacity: 1; transform: none; transition: none; }
    .picline-hero-rotator > span:not(:last-child)::after { content: "·"; margin-left: .6em; }
}
.picline-hero-copy > .wp-block-buttons { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.picline-hero .wp-block-button.picline-hero-ghost > .wp-block-button__link { border: 2px solid rgb(255 255 255 / 45%); background: transparent; color: #fff; }
/* ---------- Problem tiles «Kennst Du das?» (front page) ---------- */
/* Light blue between the navy hero and the navy «Warum Picline»; icons come from inc/problem-icons.php. */
.picline-section.picline-problems { background-color: #eef1fa; }
/* Compact: the whole section (title, 8 tiles, closing line) fits one desktop screen. */
.picline-section.picline-problems { padding-block: clamp(2rem,4.5vh,4rem) !important; }
.picline-problems .picline-inner > .section-intro { margin-top: 8px; margin-bottom: 24px; }
.picline-problem-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1099px) { .picline-problem-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 599px) { .picline-problem-grid { grid-template-columns: minmax(0,1fr); } }
.picline-problem-grid > .picline-problem {
    position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0;
    padding: clamp(.875rem,1vw,1.25rem) clamp(.875rem,1.2vw,1.25rem); border-top: 4px solid #F7E229; border-radius: 16px;
    background: #fff; color: #02084a; box-shadow: 0 1px 3px rgb(2 8 74 / 6%);
}
.picline-problem-icon { display: block; width: clamp(40px,2.4vw,46px); height: clamp(40px,2.4vw,46px); margin: 0 auto 1rem; color: #02084a; }
/* Tiles are centered on Andrea's request (exception to the left-aligned rule). */
.picline-problem-grid > .picline-problem > .picline-problem-icon { margin: 0 auto .625rem; }
.picline-section .picline-problem, .picline-section .picline-problem h3, .picline-section .picline-problem p { text-align: center; }
.picline-problem-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.picline-problem h3 { margin-block: 0; font-size: clamp(1rem,.85rem + .25vw,1.1875rem); font-weight: 800; line-height: 1.25; color: #02084a; text-wrap: balance; }
.picline-problem p { font-size: clamp(.875rem,.8rem + .12vw,.96875rem); line-height: 1.5; text-wrap: pretty; }
.picline-problem > p:not(.picline-problem-link) { margin-block: .5rem 0; opacity: .85; }
.picline-problem > .picline-problem-link { margin-top: auto; padding-top: .75rem; margin-bottom: 0; }
.picline-problem-link a {
    color: #02084a; font-weight: 700; text-decoration: underline;
    text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.picline-problem-link a::after { content: "\00a0\2192"; }
/* The whole tile is clickable: the solution link covers the tile. */
.picline-problem-link a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.picline-section .picline-problem-link a:focus-visible { outline: none; }
.picline-problem:focus-within { outline: 3px solid #02084a; outline-offset: 4px; }
.picline-problem-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 24px; }
.picline-section .picline-problem-cta > * { margin: 0; }
.picline-section .picline-problem-cta > p { font-size: clamp(1.0625rem,.95rem + .35vw,1.375rem); font-weight: 700; }
.picline-problem .pi-dot { fill: currentColor; stroke: none; }
/* Side by side, icon, title, text and link share rows, so titles and texts start at the same height. */
@media (min-width: 600px) {
    .picline-problem-grid > .picline-problem { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .picline-problem > .picline-problem-link { align-self: end; }
}
@media (max-width: 781px) { .picline-problem p { font-size: 1rem; } }

@media (prefers-reduced-motion: no-preference) {
    .picline-problem-grid > .picline-problem { transition: transform .2s ease, box-shadow .2s ease; }
    .picline-problem-icon { transition: transform .25s ease; }
    @media (hover: hover) {
        .picline-problem-grid > .picline-problem:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgb(2 8 74 / 12%); }
        .picline-problem:hover .picline-problem-icon { transform: scale(1.08); }
    }
    /* Icons loop only while the section is visible (class set by motion.js). */
    .picline-problems.is-in-view .picline-problem-icon * { transform-box: fill-box; transform-origin: center; }
    .picline-problems.is-in-view .pi-draw { stroke-dasharray: 1; animation: pi-draw 3.6s ease-in-out infinite both; }
    .picline-problems.is-in-view .pi-draw.pi-d2 { animation-delay: .25s; }
    .picline-problems.is-in-view .pi-draw.pi-d3 { animation-delay: .5s; }
    .picline-problems.is-in-view .pi-dot { animation: pi-bounce 1.4s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-dot.pi-d2 { animation-delay: .16s; }
    .picline-problems.is-in-view .pi-dot.pi-d3 { animation-delay: .32s; }
    .picline-problems.is-in-view .pi-lens { animation: pi-shutter 3s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-flash { animation: pi-flash 3s ease-out infinite; }
    .picline-problems.is-in-view .pi-plus { animation: pi-plus 3s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-star { animation: pi-star 3s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-twinkle { animation: pi-twinkle 2.4s ease-in-out infinite both; }
    .picline-problems.is-in-view .pi-twinkle.pi-d2 { animation-delay: .6s; }
    .picline-problems.is-in-view .pi-twinkle.pi-d3 { animation-delay: 1.2s; }
    .picline-problems.is-in-view .pi-brush { transform-box: view-box; transform-origin: 55px 9px; animation: pi-sway 3.6s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-heart { animation: pi-heart 2.4s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-float { animation: pi-float 2.4s ease-out infinite both; }
    .picline-problems.is-in-view .pi-nib { transform-box: view-box; transform-origin: 32px 50px; animation: pi-nib 3.6s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-knob { animation: pi-slide 3s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-knob.pi-d2 { animation-direction: reverse; }
    .picline-problems.is-in-view .pi-sun { animation: pi-star 3s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-wand { transform-box: view-box; transform-origin: 10px 54px; animation: pi-wave 2.4s ease-in-out infinite; }
    /* Fotograf Zug icons since 30.09.2026 (Andrea: move like the icons on Webdesign): the main shape moves visibly. */
    .picline-problems.is-in-view .pi-snap { animation: pi-snap 3s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-roof { animation: pi-roof 3.6s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-zoom { transform-origin: 0% 50%; animation: pi-zoom 2.8s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-hover { animation: pi-hover 2.4s ease-in-out infinite; }
    .picline-problems.is-in-view .pi-rotor { animation: pi-rotor .3s linear infinite alternate; }
    .picline-problems.is-in-view .pi-orbit { animation: pi-orbit 3.6s linear infinite; }
}
@keyframes pi-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 40%, 82% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pi-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes pi-shutter { 0%, 8%, 30%, 100% { transform: scale(1); } 16% { transform: scale(.35); } }
@keyframes pi-flash { 0%, 12% { opacity: 0; } 18% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes pi-plus { 0%, 55%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(90deg) scale(1.25); } 35% { transform: rotate(90deg) scale(1); } }
@keyframes pi-star { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(8deg); } }
@keyframes pi-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 40%, 60% { opacity: 1; transform: scale(1); } }
@keyframes pi-sway { 0%, 100% { transform: rotate(-4deg); } 20% { transform: rotate(-12deg); } 45% { transform: rotate(6deg); } }
@keyframes pi-heart { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 25% { transform: scale(.95); } }
@keyframes pi-float { 0%, 20% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes pi-nib { 0%, 100% { transform: translate(-6px,0) rotate(-6deg); } 50% { transform: translate(6px,0) rotate(6deg); } }
@keyframes pi-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes pi-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 55% { transform: rotate(6deg); } }
@keyframes pi-snap { 0%, 8%, 30%, 100% { transform: scale(1); } 16% { transform: scale(.9); } 22% { transform: scale(1.03); } }
@keyframes pi-roof { 0%, 55%, 100% { transform: translateY(0); } 66% { transform: translateY(-5px); } 76% { transform: translateY(1px); } 84% { transform: translateY(0); } }
@keyframes pi-zoom { 0%, 50%, 100% { transform: scaleX(1); } 66% { transform: scaleX(.5); } 80% { transform: scaleX(1.12); } 90% { transform: scaleX(1); } }
@keyframes pi-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pi-rotor { 0% { transform: scaleX(1); } 100% { transform: scaleX(.35); } }
@keyframes pi-orbit { 0% { transform: scaleY(1); } 25% { transform: scaleY(.15); } 50% { transform: scaleY(1); } 75% { transform: scaleY(2.1); } 100% { transform: scaleY(1); } }

/* ---------- Service pages: lead, contact card, update date ---------- */
.picline-lead { font-size: clamp(1.1875rem,1rem + .5vw,1.5rem); line-height: 1.5; font-weight: 600; }
.picline-service-intro { border-top: 0; padding-top: 0; }
.picline-service-intro .wp-block-image { margin-block: 2rem 0; }
.picline-service-intro .wp-block-image img, .picline-service-detail .picline-portrait img { width: 100%; height: auto; border-radius: 16px; }
.picline-service-detail .wp-element-caption, .picline-work-grid .wp-element-caption { text-align: left; font-size: 1rem; font-weight: 600; }
.picline-service-detail h3 { margin-block: 1.75rem .5rem; font-size: clamp(1.25rem,1rem + .5vw,1.5rem); }
.picline-service-detail .wp-block-list li + li { margin-top: .5rem; }
.picline-service-detail .picline-person-layout { margin-block: 1rem; }
.picline-signature { margin-top: 1.5rem; }
.picline-service-detail.picline-contact-card {
    margin-top: 3rem; padding: clamp(1.75rem,4vw,3rem); border-top: 6px solid #F7E229; border-radius: 16px;
}
.picline-contact-card h2 { margin-top: 0; color: #F7E229; }
.picline-contact-card a:not(.wp-block-button__link) { color: #fff; }
.picline-updated { margin-top: 2.5rem; font-size: .9375rem; opacity: .7; }

/* ---------- «Warum Picline» (front page): statement left, three numbered points right ---------- */
.picline-why-layout { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); align-items: start; gap: clamp(2.5rem,6vw,7rem); }
.picline-why-layout > .wp-block-group { min-width: 0; margin-block: 0; }
.picline-section .picline-why-copy > * { margin-block: 0; }
.picline-section .picline-why-copy > .picline-eyebrow { text-transform: uppercase; letter-spacing: .14em; line-height: 1; }
.picline-section .picline-why-copy > h2 {
    margin-top: clamp(1.25rem,2vw,1.75rem); color: #fff;
    font-size: clamp(2.25rem,1.4rem + 2.6vw,4.25rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance;
}
.picline-why-copy h2 mark { background: none; color: #F7E229; }
.picline-section .picline-why-copy > p:not(.picline-eyebrow) { margin-top: clamp(1.5rem,2.5vw,2.25rem); max-width: 34em; color: #fff; font-size: clamp(1.0625rem,.95rem + .35vw,1.3125rem); line-height: 1.65; }
.picline-section .picline-why-copy > .wp-block-buttons { margin-top: clamp(1.75rem,3vw,2.5rem); }
/* Number and title share a baseline; the text sits under the title. */
.picline-why-list > .picline-why-item {
    display: grid; grid-template-columns: 3.5rem minmax(0,1fr); align-items: baseline;
    margin: 0; padding-block: clamp(1.5rem,2.5vw,2.25rem); border-top: 1px solid rgb(255 255 255 / 18%);
}
.picline-why-list > .picline-why-item:first-child { padding-top: 0; border-top: 0; }
.picline-why-list > .picline-why-item:last-child { padding-bottom: 0; }
.picline-section .picline-why-item > * { margin: 0; }
.picline-section .picline-why-item > .picline-why-number { grid-column: 1; color: #F7E229; font-weight: 700; font-size: clamp(1.125rem,1rem + .3vw,1.375rem); font-variant-numeric: tabular-nums; }
.picline-section .picline-why-item > h3 { grid-column: 2; color: #fff; font-size: clamp(1.375rem,1rem + .6vw,1.875rem); line-height: 1.25; }
.picline-section .picline-why-item > p:not(.picline-why-number) { grid-column: 2; margin-top: .75rem; color: #fff; line-height: 1.65; }
/* Desktop: the left column (label, title, buttons) stays in view while the three points scroll past. */
@media (min-width: 1001px) {
    .picline-why-copy { position: sticky; top: 2.5rem; }
}
@media (max-width: 1000px) {
    .picline-why-layout { grid-template-columns: minmax(0,1fr); gap: 3rem; }
}
@media (max-width: 599px) {
    .picline-why-list > .picline-why-item { grid-template-columns: 2.5rem minmax(0,1fr); }
}
/* Since 29.09.2026 (Andrea): portrait ID 22 between title and buttons (rounded corners, yellow frame; on phones and
   tablets above the kicker), second button outlined white, intro above the points, point texts at least 16 px
   visible (18 px × 0.9 zoom). Script: backups/warum-picline-20260929-113124/. */
/* Update 29.09.2026 later: instead of the portrait, photo ID 316 of Sandra Jauslin and Andrea (transparent background,
   file unchanged) below the buttons, navy like the section, yellow frame, rounded corners; the same on phones. */
/* Frame on the image, so the caption sits below it: 14 px visible (15.56 × 0.9 from 1024 px), light on navy. */
.picline-section .picline-why-copy > .picline-why-team { margin-top: clamp(2rem,3.5vw,3rem); max-width: 440px; }
.picline-why-team img {
    display: block; width: 100%; height: auto; box-sizing: border-box;
    background: #02084a; border: 3px solid #F7E229; border-radius: 16px;
}
.picline-why-team > figcaption { margin: .75rem 0 0; color: rgb(255 255 255 / 85%); font-size: 14px; line-height: 1.45; text-align: left; }
@media (min-width: 1024px) { .picline-why-team > figcaption { font-size: calc(14px / .9); } }
.picline-why .wp-block-button.picline-why-ghost > .wp-block-button__link { border: 2px solid #fff; background: transparent; color: #fff; }
.picline-why .wp-block-button.picline-why-ghost > .wp-block-button__link:is(:hover, :focus-visible) { background: #fff; color: #02084a; }
.picline-section .picline-why-list > .picline-why-intro {
    margin: 0 0 clamp(1.5rem,2.5vw,2.25rem); color: #fff; font-size: clamp(1.125rem,1rem + .35vw,1.3125rem); line-height: 1.6;
}
.picline-why-list > .picline-why-intro + .picline-why-item { border-top: 1px solid rgb(255 255 255 / 18%); }
.picline-section .picline-why-item > p:not(.picline-why-number) { font-size: clamp(1.125rem,1rem + .3vw,1.25rem); }

/* ---------- Regional section «Deine Marketingagentur in Zug» (front page): «Warum Picline» layout on white ---------- */
.picline-region-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: clamp(2.5rem,6vw,7rem); }
.picline-region-layout > .wp-block-group { min-width: 0; margin-block: 0; }
.picline-section .picline-region-copy > * { margin-block: 0; }
/* The title sits above both columns in the normal section size; words never break inside. */
.picline-region .picline-inner > h2 { margin: 0 0 clamp(1.75rem,3vw,2.5rem); overflow-wrap: normal; hyphens: manual; }
/* Fine line between the regional section and the FAQ, like above the regional section. */
.picline-section.picline-region + .picline-section.picline-faq { border-top: 1px solid rgb(2 8 74 / 14%); }
/* Since 29.09.2026 the front page has no region section any more: the fine line sits between #ablauf and the FAQ. */
.picline-section.picline-process + .picline-section.picline-faq { border-top: 1px solid rgb(2 8 74 / 14%); }
/* Left: lead sentence a little larger, then places and address, then the button. */
.picline-section .picline-region-copy > p { max-width: 36em; line-height: 1.65; }
.picline-section .picline-region-copy > .picline-region-lead { font-size: clamp(1.0625rem,.95rem + .35vw,1.3125rem); }
.picline-section .picline-region-copy > .wp-block-buttons { margin-top: clamp(1.75rem,3vw,2.5rem); }
.picline-section .picline-region-details > * { margin-block: 0; }
.picline-section .picline-region-copy > h3,
.picline-section .picline-region-details > h3 { font-size: clamp(1.375rem,1rem + .6vw,1.875rem); line-height: 1.25; }
.picline-section .picline-region-copy > h3 + *,
.picline-section .picline-region-details > h3 + * { margin-top: clamp(1rem,1.5vw,1.25rem); }
.picline-section .picline-region-copy > * + h3 { margin-top: clamp(2rem,3.5vw,3rem); }
/* Numbered list 01 to 04 like the «Warum Picline» points; lines between the points. */
.picline-section ul.picline-region-list { list-style: none; padding: 0; counter-reset: picline-region; }
.picline-region-list > li {
    position: relative; margin: 0; padding: clamp(1rem,1.8vw,1.5rem) 0 clamp(1rem,1.8vw,1.5rem) 3.5rem;
    border-top: 1px solid rgb(2 8 74 / 14%); line-height: 1.65; counter-increment: picline-region;
}
.picline-region-list > li:first-child { border-top: 0; padding-top: 0; }
.picline-region-list > li:last-child { padding-bottom: 0; }
.picline-region-list > li::before {
    content: counter(picline-region, decimal-leading-zero); position: absolute; left: 0; top: clamp(1rem,1.8vw,1.5rem);
    color: #02084a; font-weight: 700; font-variant-numeric: tabular-nums;
}
.picline-region-list > li:first-child::before { top: 0; }
/* Service title (link) on its own line, description below. */
.picline-region-list a {
    display: inline-block; margin-bottom: .35rem;
    color: #02084a; font-size: 1.1em; font-weight: 700; line-height: 1.35; text-decoration: underline;
    text-decoration-color: #F7E229; text-decoration-thickness: 3px; text-underline-offset: 4px;
}
.picline-region-list a:hover, .picline-region-list a:focus-visible { text-decoration-color: #02084a; }
@media (max-width: 1000px) { .picline-region-layout { grid-template-columns: minmax(0,1fr); gap: 3rem; } }
@media (max-width: 599px) { .picline-region-list > li { padding-left: 2.5rem; } }
/* ---------- «Kennst Du das?»: white cards like the webdesign page (since 28.09.2026, Andrea's request) ---------- */
/* White section (overrides the light blue set in the editor). */
.picline-section.picline-problems { background-color: #fff !important; }
/* Same card as «Was ist bei jeder Website dabei?» (assets/webdesign.css): fine blue-grey frame, soft shadow, 16px radius. */
.picline-problem-grid > .picline-problem {
    padding: clamp(1.25rem, 1.6vw, 1.75rem);
    background: #fff; color: #02084a;
    border: 1px solid #E3E6F2; border-radius: 16px;
    box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 16px 36px -16px rgb(2 8 74 / 28%);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Icon: yellow line drawing in a navy square, like the webdesign cards. */
.picline-problem-grid > .picline-problem > .picline-problem-icon {
    display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 1.25rem;
    border-radius: 14px; background: #02084a; color: #F7E229;
}
.picline-problem-icon svg { width: 34px; height: 34px; }
.picline-problem h3 { color: #02084a; font-weight: 700; }
.picline-problem > p:not(.picline-problem-link) { color: #02084a; opacity: .85; }
/* Link: navy text with yellow underline and arrow, like «Preis berechnen →». */
.picline-problem-link a {
    display: inline-flex; align-items: center; gap: .4rem;
    width: auto; height: auto; padding: 0; border-radius: 0; background: none;
    color: #02084a; font-size: .9375rem; font-weight: 700;
    text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.picline-problem-link a::after {
    content: "\2192"; color: #02084a; font-size: 1.125rem; font-weight: 700;
    transition: transform .2s ease;
}
/* The whole tile stays clickable. */
.picline-problem-link a::before { border-radius: 16px; }
/* Hover: stronger shadow; tile lift and arrow movement only without reduced motion. */
@media (hover: hover) {
    .picline-problem-grid > .picline-problem:hover { box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 22px 44px -16px rgb(2 8 74 / 36%); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .picline-problem-grid > .picline-problem:hover { transform: translateY(-3px); }
    .picline-problem:hover .picline-problem-icon { transform: none; }
    .picline-problem:hover .picline-problem-link a::after { transform: translateX(5px); }
}
.picline-problem:focus-within { outline: 3px solid #02084a; outline-offset: 4px; }
/* Tiles left-aligned again (Andrea's request), like the rest of the site. */
.picline-section .picline-problem,
.picline-section .picline-problem h3,
.picline-section .picline-problem p { text-align: left; }
.picline-problem-link { justify-content: flex-start; }
/* A little extra space above and below the eight tiles (Andrea's request). */
.picline-problems .picline-inner > .section-intro { margin-bottom: calc(24px + .8em); }
.picline-problems .picline-problem-cta { margin-top: calc(24px + .8em); }

/* ---------- «Einblicke in unsere Arbeit»: photos in their own format, never cropped (front page: photos only; gallery page 11: photo + title + text) ---------- */
/* Three columns; the content order puts one landscape and one portrait photo in each column, so the columns end level. */
.picline-work .picline-inner > .section-intro, .picline-work-part > .section-intro { margin-bottom: calc(24px + .8em); }
/* Front page since 28.09.2026: one main title «Einblicke in unsere Arbeit», two parts with H3 (Portfolio #portfolio,
   Referenzen Websites #referenzen), fine line and clear space between them. */
.picline-work .picline-inner > h2 + .picline-work-part { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.picline-work-part > h3 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); line-height: 1.2; }
.picline-work-part + .picline-work-part {
    margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgb(2 8 74 / 14%);
}
.picline-web-refs-part > h3 { margin-bottom: calc(24px + .8em); }
.picline-work-cards { columns: 3; column-gap: 16px; }
@media (max-width: 599px) { .picline-work-cards { columns: 1; } }
.picline-work-cards > .picline-work-card {
    display: block; width: 100%; margin: 0 0 16px; overflow: hidden; break-inside: avoid;
    background: #02084a; color: #fff;
    border-top: 3px solid #F7E229; border-radius: 8px;
}
.picline-work-cards > .picline-work-card > * { margin: 0; }
/* Real aspect ratio comes from functions.php (class picline-photo-full). */
.picline-work-cards .picline-work-card img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; contain: none; }
/* Gallery: title and short description. */
.picline-work-cards > .picline-work-card > h3 {
    padding: clamp(1rem,1.2vw,1.25rem) clamp(1rem,1.4vw,1.5rem) 0;
    color: #fff; font-size: clamp(1rem,.85rem + .25vw,1.1875rem); font-weight: 700; line-height: 1.25;
}
.picline-work-cards > .picline-work-card > p {
    padding: .5rem clamp(1rem,1.4vw,1.5rem) clamp(1.1rem,1.4vw,1.5rem);
    color: rgb(255 255 255 / 78%); font-size: clamp(.875rem,.8rem + .12vw,.96875rem); line-height: 1.5;
}
.picline-work .picline-work-cards + .wp-block-buttons { margin-top: calc(24px + .8em - 16px); }
.picline-gallery-shootings { margin-block: clamp(2.5rem,5vw,4rem); }
.picline-gallery-shootings > h2 + p { margin-bottom: calc(24px + .8em); }
/* Front page order since 28.09.2026: Kennst Du das?, Einblicke, Warum Picline, Ansprechpartner. Fine line between the two
   white sections; no line on the Ansprechpartner section directly after the navy «Warum Picline». */
.picline-section.picline-problems + .picline-section.picline-work { border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-section.picline-why + .picline-section.picline-person { border-top: 0; }
/* ---------- Website-Referenzen (front page #referenzen, second part of #arbeiten, 28.09.2026): 3 cards like the
   Webdesign cards, mockup on light blue, name, sector and services, link to the client website; button to Webdesign. ---------- */
.picline-web-refs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
@media (max-width: 1099px) { .picline-web-refs { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 599px) { .picline-web-refs { grid-template-columns: minmax(0,1fr); } }
.picline-web-refs > .picline-web-ref {
    display: flex; flex-direction: column; margin: 0; overflow: hidden;
    background: #fff; border: 1px solid #E3E6F2; border-radius: 16px; box-shadow: 0 8px 24px rgb(2 8 74 / 6%);
    transition: transform .2s ease, box-shadow .2s ease;
}
.picline-web-refs > .picline-web-ref:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgb(2 8 74 / 11%); }
@media (prefers-reduced-motion: reduce) { .picline-web-refs > .picline-web-ref, .picline-web-refs > .picline-web-ref:hover { transition: none; transform: none; } }
.picline-web-ref > * { margin: 0; }
.picline-web-ref > .picline-web-ref-media {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
    padding: 1.25rem; background: #eef1fa;
}
.picline-web-ref-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.picline-web-ref-media .picline-placeholder { margin: 0; }
.picline-web-ref > h3 { padding: 1.25rem 1.5rem 0; font-size: clamp(1.125rem,1rem + .3vw,1.3125rem); line-height: 1.25; }
.picline-web-ref > .picline-web-ref-meta { padding: .5rem 1.5rem 0; font-size: .95rem; line-height: 1.6; }
.picline-web-ref > .picline-web-ref-link { margin-top: auto; padding: 1rem 1.5rem 1.4rem; font-size: .95rem; font-weight: 600; }
.picline-web-ref-link a { color: #02084a; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-web-ref-link a::after { content: " \2197"; }
.picline-web-refs + .wp-block-buttons { margin-top: calc(24px + .8em); }
/* ---------- Blog (28.09.2026): list /blog/ (templates/home.html) and post (templates/single.html) ---------- */
/* Blog overview hero since 29.09.2026 like the front page (classes picline-hero, picline-hero-copy): the topic links
   in the intro in white with a yellow underline on navy. */
.picline-blog-hero .picline-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-blog-hero .picline-hero-copy p a:not(.wp-block-button__link):is(:hover, :focus-visible) { color: #F7E229; }
.picline-blog-hero .picline-inner > h1 { margin: .5rem 0 0; font-size: clamp(2.2rem, 3.6vw, 4.25rem); line-height: 1.1; letter-spacing: -.025em; }
.picline-blog-hero .picline-inner > .picline-placeholder { box-sizing: border-box; margin-top: 1.25rem; }
/* Cards: like the website references, 3 / 2 / 1 columns, same height, image 3:2. */
.picline-blog-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1099px) { .picline-blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .picline-blog-cards { grid-template-columns: minmax(0, 1fr); } }
.picline-blog-cards > li { display: flex; margin: 0; }
.picline-blog-card {
    display: flex; flex-direction: column; width: 100%; margin: 0; overflow: hidden;
    background: #fff; border: 1px solid #E3E6F2; border-radius: 16px; box-shadow: 0 8px 24px rgb(2 8 74 / 6%);
    transition: transform .2s ease, box-shadow .2s ease;
}
.picline-blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgb(2 8 74 / 11%); }
@media (prefers-reduced-motion: reduce) { .picline-blog-card, .picline-blog-card:hover { transition: none; transform: none; } }
.picline-blog-card > * { margin: 0; }
.picline-blog-card-image { aspect-ratio: 3 / 2; background: #eef1fa; }
.picline-blog-card-image a, .picline-blog-card-image img { display: block; width: 100%; height: 100%; }
.picline-blog-card-image img { object-fit: cover; border-radius: 0; }
.picline-blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
.picline-blog-card-body > * { margin: 0; }
.picline-post-meta { display: flex; flex-wrap: wrap; gap: 0 .35em; margin: 0; font-size: .875rem; line-height: 1.5; color: rgb(2 8 74 / 75%); }
.picline-post-author { font-weight: 700; color: #02084a; }
.picline-blog-card-title { margin-top: .6rem !important; font-size: clamp(1.125rem, 1rem + .3vw, 1.3125rem); line-height: 1.3; letter-spacing: 0; }
.picline-blog-card-title a { color: #02084a; text-decoration: none; }
.picline-blog-card-title a:hover, .picline-blog-card-title a:focus-visible { text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-blog-card-excerpt { display: flex; flex-direction: column; flex: 1; margin-top: .6rem !important; font-size: .95rem; line-height: 1.6; }
.picline-blog-card-excerpt .wp-block-post-excerpt__excerpt { margin: 0; }
.picline-blog-card-excerpt .wp-block-post-excerpt__more-text { margin: auto 0 0; padding-top: 1rem; font-weight: 700; }
.picline-blog-card-excerpt .wp-block-post-excerpt__more-link { color: #02084a; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-blog-card-excerpt .wp-block-post-excerpt__more-link::after { content: " \2192"; }
.picline-blog-pagination { margin-top: calc(24px + .8em); font-weight: 700; }
/* Post: head and text at the common left edge, readable width. */
.picline-blog-head { max-width: 900px; }
.picline-blog-head > * { margin: 0; }
.picline-blog-back { margin-bottom: 1.25rem !important; font-size: .95rem; font-weight: 700; }
.picline-blog-back a { color: #02084a; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.picline-blog-back a::before { content: "\2190  "; }
.picline-blog-head > .wp-block-post-title { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: pretty; }
.picline-blog-head > .picline-post-meta { margin-top: 1rem; font-size: 1rem; }
.picline-blog-hero-image { max-width: 1100px; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0 !important; }
.picline-blog-hero-image img { display: block; width: 100%; height: auto; border-radius: 16px; }
.picline-blog-content { margin-top: clamp(2rem, 4vw, 3rem) !important; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.7; }
.picline-blog-content > * { margin-block: 0 1.1em; }
.picline-blog-content > h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); line-height: 1.2; }
.picline-blog-content > h3 { margin-top: 1.75em; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.25; }
.picline-blog-content > h4 { margin-top: 1.5em; font-size: 1.125rem; line-height: 1.3; }
.picline-blog-content a { color: #02084a; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.picline-blog-content a:hover { text-decoration-thickness: 3px; }
.picline-blog-content .wp-block-quote { margin-block: 1.75em; padding: .25em 0 .25em 1.25em; border-left: 4px solid #F7E229; font-size: 1.08em; font-style: italic; }
.picline-blog-content .wp-block-quote p { margin: 0; }
.picline-blog-content ul, .picline-blog-content ol { padding-left: 1.25em; }
.picline-blog-content li + li { margin-top: .35em; }
.picline-blog-more { border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-blog-more .picline-inner > h2 { margin-bottom: calc(24px + .8em); }
.picline-blog-more .wp-block-buttons { margin-top: calc(24px + .8em); }
/* Blog topics (29.09.2026): bar above the cards with «Alle Themen», one pill per tag with its number of posts and a
   search field ([picline_blog_themen] in inc/blog.php, filtering by assets/blog-themen.js); tags on every card and
   under every post, each links to the overview with that topic (#thema-<slug>). */
.picline-blog-list .picline-inner > .picline-blog-themen { margin: 0 0 calc(24px + .8em); }
.picline-blog-themen[hidden], .picline-blog-cards > li[hidden] { display: none; }
.picline-blog-themen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.picline-blog-themen-kopf > * { margin: 0; }
.picline-blog-themen-titel { color: #02084a; font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); font-weight: 800; line-height: 1.2; }
.picline-blog-suche { position: relative; flex: 0 1 340px; }
.picline-blog-suche .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.picline-blog-suche input {
    box-sizing: border-box; width: 100%; min-height: 46px; padding: .6rem 1rem .6rem 2.7rem; border: 1px solid rgb(2 8 74 / 22%); border-radius: 999px; color: #02084a; font: inherit; font-size: 1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302084a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") 1rem center / 18px no-repeat;
}
.picline-blog-suche input:focus-visible { outline: 3px solid #F7E229; outline-offset: 2px; border-color: #02084a; }
ul.picline-blog-themen-liste { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.picline-blog-themen-liste li { margin: 0; }
.picline-blog-thema { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: .45rem .95rem; border: 1px solid #E3E6F2; border-radius: 999px; background: #fff; color: #02084a; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.picline-blog-thema:hover { border-color: #02084a; }
.picline-blog-thema[aria-pressed="true"] { border-color: #02084a; background: #02084a; color: #fff; }
.picline-blog-thema:focus-visible { outline: 3px solid #F7E229; outline-offset: 2px; }
.picline-blog-thema-zahl { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; box-sizing: border-box; border-radius: 999px; background: #eef1fa; color: #02084a; font-size: .8em; font-weight: 800; }
.picline-blog-thema[aria-pressed="true"] .picline-blog-thema-zahl { background: #F7E229; }
.picline-blog-treffer { margin: 14px 0 0; color: #5b6070; font-size: .95rem; }
.picline-blog-leer { margin: 24px 0 0; padding: 1rem 1.25rem; border-left: 4px solid #F7E229; border-radius: 0 8px 8px 0; background: #eef1fa; color: #02084a; font-weight: 700; }
.picline-blog-zuruecksetzen { margin-left: .4rem; padding: 0; border: 0; background: none; color: #02084a; font: inherit; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.picline-blog-card-body > .picline-blog-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .7rem; }
.picline-blog-card-tags .wp-block-post-terms__separator, .picline-blog-tags .wp-block-post-terms__separator { display: none; }
.picline-blog-card-tags a, .picline-blog-tags a { display: inline-block; padding: .18rem .6rem; border-radius: 999px; background: #eef1fa; color: #02084a; font-size: .8125rem; font-weight: 700; line-height: 1.4; text-decoration: none; transition: background-color .15s ease; }
.picline-blog-card-tags a:hover, .picline-blog-card-tags a:focus-visible, .picline-blog-tags a:hover, .picline-blog-tags a:focus-visible { background: #F7E229; }
.picline-blog-article .picline-inner > .picline-blog-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 760px; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-blog-tags .wp-block-post-terms__prefix { margin-right: .35rem; color: #02084a; font-weight: 800; }
.picline-blog-tags a { padding: .3rem .8rem; font-size: .9375rem; }
@media (min-width: 1024px) {
    .picline-blog-thema, .picline-blog-treffer, .picline-blog-suche input, .picline-blog-tags a, .picline-blog-tags .wp-block-post-terms__prefix { font-size: calc(16px / .9); }
    .picline-blog-card-tags a { font-size: calc(14px / .9); }
}
/* Text-only sections centred (29.09.2026, Andrea: the narrow text left an empty area on the right). Applies to
   sections whose content has only headings and paragraphs; sections with cards, lists, steps, images or forms stay
   left-aligned. Heading and every line centred, the text block keeps its reading width. */
/* (.picline-section h2/p set text-align: left, so the children need it directly.) */
.picline-section > .picline-inner:not(:has(> :not(h2, h3, p))) > * { margin-inline: auto; text-align: center; }
/* Contact section at the end of every page (29.09.2026, Andrea: navy looked odd right above the navy footer).
   Light blue section with a white card (yellow line on the left, like «Kurz erklärt»), navy text, yellow button.
   After a light blue section (alternating service pages) the section stays white so both do not merge; the card
   stands out by its border and shadow. The blocks keep backgroundColor navy in the editor; this block restyles them. */
.picline-section.picline-contact.has-navy-background-color { border-top: 0; background-color: #eef1fa !important; color: #02084a !important; }
.picline-section[style*="#eef1fa"] + .picline-section.picline-contact.has-navy-background-color { background-color: #fff !important; }
.picline-contact.has-navy-background-color > .picline-inner > :first-child {
    max-width: none; padding: clamp(1.5rem, 4vw, 3rem); 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-contact.has-navy-background-color :is(h2, h3, p, li, strong, a:not(.wp-block-button__link)) { color: #02084a !important; }
.picline-contact.has-navy-background-color :is(.picline-wd-ghost, .picline-hero-ghost) > .wp-block-button__link { border-color: #02084a !important; color: #02084a !important; background: transparent !important; }
.picline-contact.has-navy-background-color :is(.picline-wd-ghost, .picline-hero-ghost) > .wp-block-button__link:is(:hover, :focus-visible) { background: #02084a !important; color: #fff !important; }
.picline-contact.has-navy-background-color .picline-wd-facts a:is(:hover, :focus-visible) { color: #02084a !important; text-decoration-color: #F7E229; }
/* ---------- Front page «Kennst Du das?» (#kennst-du-das, since 29.09.2026 after Andrea's draft picline-kennst-du-das.html,
   replaces the 8 icon tiles .picline-problems, which stay in use on Fotograf Zug): kicker, H2, intro, 4 photo cards
   (4 / 2 / 1 columns, photo 4:3 with yellow label, H3, text, link at the bottom, whole card clickable),
   «Weitere Leistungen» as pills, navy closing block with round portrait, contact line, button and Google ratings.
   Placeholder photo: platzhalter-kennst-du-das.webp; its hint (.picline-kd-hinweis) shows only while that file is in the
   card, so replacing the photo in the editor is enough. Build script: backups/kennst-du-das-neu-20260929-110147/. ---------- */
.picline-section.picline-kd { background-color: #fff; }
.picline-section.picline-kd + .picline-section.picline-work { border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-kd .picline-inner > .picline-kd-kicker {
    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;
}
.picline-kd .picline-inner > h2 { margin-top: 0; }
.picline-kd .picline-inner > .section-intro { max-width: 40em; margin-bottom: 48px; }
.picline-kd-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1099px) { .picline-kd-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .picline-kd-karten { grid-template-columns: minmax(0, 1fr); } }
.picline-kd-karten > .picline-kd-karte {
    position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden;
    background: #fff; border: 1px solid #e4e6ef; border-radius: 14px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.picline-kd-karte > * { margin-block: 0; }
.picline-kd-karte > .picline-kd-bild { position: relative; }
.picline-kd-bild > * { margin: 0; }
.picline-kd-bild .picline-kd-foto img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; contain: none;
}
.picline-kd-bild > .picline-kd-tag {
    position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 6px;
    background: #F7E229; color: #02084a; font-size: .75rem; font-weight: 800; line-height: 1.3;
}
.picline-kd-bild > .picline-kd-hinweis {
    display: none; position: absolute; left: 14px; right: 14px; bottom: 14px; width: fit-content; padding: 5px 9px; border-radius: 6px;
    background: rgb(255 255 255 / 85%); color: #02084a; font-size: .75rem; font-weight: 600; line-height: 1.35;
}
.picline-kd-bild:has(img[src*="platzhalter-kennst-du-das"]) > .picline-kd-hinweis { display: block; }
.picline-kd-karte > h3 { padding: 22px 22px 0; color: #02084a; font-size: 1.1875rem; font-weight: 800; line-height: 1.25; }
.picline-kd-karte > p:not(.picline-kd-mehr) { flex: 1; padding: 10px 22px 18px; color: #3a3f63; font-size: .9375rem; line-height: 1.55; }
/* Link at the bottom of every card (same height in a row), text on one line, arrow after it. */
.picline-kd-karte > .picline-kd-mehr { margin-top: auto; padding: 0 22px 24px; }
.picline-kd-mehr a {
    white-space: nowrap;
    color: #02084a; font-size: .875rem; font-weight: 700;
    text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
/* Arrow as inline-block: the underline is not passed on to it, so it stays under the text only. */
.picline-kd-mehr a::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .2s ease; }
/* Whole card clickable (never transform the link itself). */
.picline-kd-mehr a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.picline-kd-karte:focus-within { outline: 3px solid #02084a; outline-offset: 4px; }
.picline-kd-mehr a:focus-visible { outline: none; }
@media (hover: hover) {
    .picline-kd-karten > .picline-kd-karte:hover { box-shadow: 0 18px 40px rgb(2 8 74 / 12%); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .picline-kd-karten > .picline-kd-karte:hover { transform: translateY(-4px); }
    .picline-kd-karte:hover .picline-kd-mehr a::after { transform: translateX(4px); }
}
/* «Weitere Leistungen»: pills. */
.picline-kd .picline-inner > .picline-kd-weitere { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 34px 0 0; }
.picline-kd-weitere strong { margin-right: 6px; color: #02084a; font-size: .9375rem; }
.picline-kd-weitere a {
    padding: 8px 14px; border: 1px solid #e4e6ef; border-radius: 999px; background: #f5f6fa;
    color: #02084a; font-size: .875rem; font-weight: 600; line-height: 1.3; text-decoration: none;
}
.picline-kd-weitere a:is(:hover, :focus-visible) { border-color: #02084a; }
/* Notice next to the send button of the forms instead of required boxes (since 05.10.2026 night, Andrea;
   picline_formular_hinweis() in inc/anfragen.php): well readable, 16 px visible, link underlined in yellow. */
p.picline-form-hinweis { margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; font-weight: 400; color: #02084a !important; opacity: 1; text-align: left; }
p.picline-form-hinweis + p.picline-form-hinweis { margin-top: .3rem; }
p.picline-form-hinweis + button, p.picline-form-hinweis + .picline-wr-foot, p.picline-form-hinweis + .picline-sk-nav { margin-top: 1rem; }
p.picline-form-hinweis a { color: #02084a !important; font-weight: 600; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.picline-kf > p.picline-form-hinweis { grid-column: 1 / -1; margin: 0; }
@media (min-width: 1024px) { p.picline-form-hinweis { font-size: calc(16px / .9); } }
/* Phones and tablets (up to 1023 px, since 05.10.2026, Andrea): «Weitere Leistungen» as a small heading on its own
   line, the pills below it two by two, equally wide. From 1024 px everything stays on one line as before. */
@media (max-width: 1023px) {
    .picline-kd .picline-inner > .picline-kd-weitere { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; max-width: 560px; }
    .picline-kd-weitere strong { grid-column: 1 / -1; margin: 0 0 2px; }
    .picline-kd-weitere a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 8px 10px; text-align: center; }
}
/* The colon after «Weitere Leistungen» only where the pills follow on the same line (from 1024 px); the text in the
   page has no colon (since 05.10.2026 night, Andrea). */
@media (min-width: 1024px) {
    .picline-kd-weitere strong::after { content: ":"; }
}
/* Yellow button «Projekt besprechen» below «Weitere Leistungen» (30.09.2026, instead of the navy closing box). */
.picline-kd .picline-inner > .picline-kd-knopf { margin-top: 34px; }
/* Closing block: portrait, text, button and ratings. */
.picline-kd .picline-inner > .picline-kd-abschluss {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; align-items: center;
    margin-top: 64px; padding: 36px; border-radius: 18px; background: #02084a; color: #fff;
}
.picline-kd-abschluss > * { margin: 0; }
.picline-kd-abschluss .picline-kd-portrait img {
    display: block; width: 104px !important; height: 104px !important; object-fit: cover; border: 3px solid #F7E229; border-radius: 50%;
}
.picline-kd-abschluss-text > * { margin: 0; }
.picline-kd-abschluss-text > h4 { margin-bottom: 6px; color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.picline-kd-abschluss-text > p { color: #d4d6ea; font-size: 1rem; }
.picline-kd-abschluss-text > .picline-kd-kontakt { margin-top: 10px; font-size: .9375rem; }
.picline-kd-kontakt a { color: #fff; text-decoration: none; border-bottom: 1px solid #F7E229; }
.picline-kd-kontakt a:is(:hover, :focus-visible) { color: #F7E229; }
.picline-kd-abschluss-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.picline-kd-abschluss-rechts > * { margin: 0; }
.picline-kd-abschluss-rechts .wp-block-button__link { white-space: nowrap; }
.picline-kd-abschluss-rechts > .picline-kd-sterne { color: #d4d6ea; font-size: .875rem; text-align: right; }
.picline-kd-sterne-icons { color: #F7E229; font-weight: 700; letter-spacing: 2px; }
.picline-kd-sterne a { color: #d4d6ea; text-decoration: underline; text-decoration-color: #F7E229; text-underline-offset: 3px; }
.picline-kd-link-fehlt { display: block; margin-top: 6px; padding: 2px 8px; border: 2px dashed #02084a; border-radius: 6px; background: #F7E229; color: #02084a; font-weight: 700; }
@media (max-width: 899px) {
    .picline-kd .picline-inner > .picline-kd-abschluss { grid-template-columns: minmax(0, 1fr); padding: 28px; }
    .picline-kd-abschluss-rechts { align-items: flex-start; }
    .picline-kd-abschluss-rechts > .picline-kd-sterne { text-align: left; }
}
/* ---------- Front page «Einblicke in unsere Arbeit» (#arbeiten), revised 29.09.2026 on Andrea's request: no yellow top line
   on the photos, caption «Art des Bildes, Ort» on hover (phones and touch: small below the photo), reference cards with
   name as H4, one sentence per project and text of at least 15 px visible (17 px × 0.9 zoom). Only the front page;
   gallery page 11 and the webdesign page 50 keep their styles. Script: backups/einblicke-ueberarbeiten-20260929-111309/. */
#arbeiten .picline-work-cards > .picline-work-card { position: relative; border-top: 0; }
#arbeiten .picline-work-card > figcaption {
    margin: 0; padding: .5rem .75rem; background: #02084a; color: #fff;
    font-size: .8125rem; font-weight: 600; line-height: 1.35; text-align: left;
}
@media (hover: hover) and (pointer: fine) {
    #arbeiten .picline-work-card > figcaption {
        position: absolute; left: 0; right: 0; bottom: 0; padding: .65rem .9rem;
        background: rgb(2 8 74 / 88%); font-size: .875rem; opacity: 0; transition: opacity .2s ease;
    }
    #arbeiten .picline-work-card:hover > figcaption { opacity: 1; }
}
#arbeiten .picline-web-ref > h4 { padding: 1.25rem 1.5rem 0; color: #02084a; font-size: clamp(1.125rem,1rem + .3vw,1.3125rem); font-weight: 700; line-height: 1.25; }
#arbeiten .picline-web-ref > :is(.picline-web-ref-meta, .picline-web-ref-link) { font-size: 1.0625rem; }
#arbeiten .picline-web-ref > .picline-web-ref-text { margin: .75rem 1.5rem 0; font-size: 1.0625rem; line-height: 1.5; }
/* ---------- Front page since 29.09.2026 (Andrea's brief): closing section #kontakt merged with the Ich-Abschnitt: large
   portrait left, text right (phones: photo on top). Script: backups/startseite-umbau-20260929-123917/. The section
   «Wie sieht unsere Arbeit in der Praxis aus?» (#praxis) built the same day was removed again on Andrea's request
   (markup and CSS: backups/praxis-entfernen-20260929-124726/). ---------- */
/* «Wie läuft die Zusammenarbeit mit Picline ab?» (#ablauf, 29.09.2026): steps as <ol>/<li> (functions.php), full width,
   intro under the H2, placeholder in step 1, CTA below. Columns 4 / 2 / 1 as before (.picline-step-grid). */
ol.picline-step-ol { width: 100%; margin: 0; padding: 0; list-style: none; }
ol.picline-step-ol > li.picline-step { margin: 0; }
#ablauf .picline-inner > h2 + .section-intro { margin-top: 8px; margin-bottom: calc(24px + .8em); }
/* Intro with small round portrait (ID 22, 56 px, yellow frame) and name line (29.09.2026). Name and phone line at
   least 16 px visible (calc(16px / .9) from 1024 px because of the 90 % view). */
#ablauf .picline-inner > .picline-step-intro { display: flex; align-items: center; gap: 1rem; margin: 8px 0 calc(24px + .8em); }
#ablauf .picline-step-intro > * { margin: 0; }
#ablauf .picline-step-intro-portrait { flex-shrink: 0; }
#ablauf .picline-step-intro-portrait img { display: block; width: 56px !important; height: 56px !important; object-fit: cover; border: 2px solid #F7E229; border-radius: 50%; box-sizing: border-box; }
#ablauf .picline-step-intro-text > * { margin: 0; }
#ablauf .picline-step-intro-text > .section-intro { margin: 0; }
#ablauf .picline-step-intro-name { margin-top: .25rem !important; font-size: 16px; font-weight: 700; opacity: .8; }
/* Four columns (from 1101 px): every step title gets room for two lines, so all texts start at the same height. */
@media (min-width: 1101px) { #ablauf .picline-step > h3 { min-height: calc(2em * 1.25); } }
#ablauf .picline-step-cta > .picline-step-cta-frage { font-size: 1.125rem; font-weight: 700; }
#ablauf .picline-step-cta > .picline-step-cta-tel { font-size: 16px; }
#ablauf .picline-step-cta-tel a { color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 1024px) {
    #ablauf :is(.picline-step-intro-name, .picline-step-cta > .picline-step-cta-tel) { font-size: calc(16px / .9); }
    #ablauf .picline-step-intro-portrait img { width: calc(56px / .9) !important; height: calc(56px / .9) !important; }
}
#ablauf .picline-placeholder-inline { display: inline; padding: 1px 6px; border: 2px dashed #02084a; border-radius: 6px; background: #F7E229; color: #02084a; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
#ablauf .picline-step-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: calc(24px + .8em); }
#ablauf .picline-step-cta > * { margin: 0; }
#ablauf .picline-step-cta > p { font-size: 1.125rem; font-weight: 700; }
/* Contact with Ich-Abschnitt (inside the white card of the contact section). */
.picline-contact-copy.picline-contact-ich { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; max-width: none; }
.picline-contact-ich > * { margin: 0; }
.picline-contact-ich-foto img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Team photo ID 316 (transparent background, Leistungen since 29.09.2026): yellow frame; no navy behind it
   (removed the same day on Andrea's request, the white card shows through). */
.picline-contact-team img { box-sizing: border-box; border: 3px solid #F7E229; }
/* Label and number stay together, the line breaks only between the parts. */
.picline-contact-line .picline-contact-nr, .picline-contact-line a[href^="mailto:"],
.picline-kd-kontakt .picline-contact-nr, .picline-kd-kontakt a[href^="mailto:"] { white-space: nowrap; }
.picline-contact-ich-text > * { margin-block: 0; }
.picline-contact-ich-text > * + * { margin-top: 1rem; }
.picline-contact-ich-text > .wp-block-buttons { margin-top: 1.75rem; }
.picline-contact-ich .wp-block-button.picline-hero-ghost > .wp-block-button__link { border: 2px solid #02084a; }
@media (max-width: 780px) { .picline-contact-copy.picline-contact-ich { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Leistungen (page 9) since 29.09.2026, like the front page (Andrea) ---------- */
/* Hero = front page hero (.picline-hero, word line via motion.js, dots via hero-dots.js). Cards = the white icon tiles
   (.picline-problems, icons from inc/problem-icons.php), here with normal section spacing and readable text
   (at least 16 px visible). Contact = the front page block. */
.picline-section.picline-problems.picline-leistungen-karten { padding-block: var(--wp--preset--spacing--section) !important; }
.picline-leistungen-karten .picline-problem h3 { font-size: clamp(1.125rem, 1rem + .3vw, 1.3125rem); }
.picline-leistungen-karten .picline-problem > p:not(.picline-problem-link), .picline-leistungen-karten .picline-problem-link a { font-size: 1rem; }
.picline-leistungen-karten .picline-problem > p:not(.picline-problem-link) { margin-top: .75rem; line-height: 1.6; opacity: 1; }
/* Longer link texts wrap: the arrow stays right after the last word. */
.picline-leistungen-karten .picline-problem-link a { display: inline; line-height: 1.6; }
.picline-leistungen-karten .picline-problem-link a::after { display: inline-block; margin-left: .4rem; }
@media (min-width: 1024px) {
    .picline-leistungen-karten .picline-problem > p:not(.picline-problem-link), .picline-leistungen-karten .picline-problem-link a { font-size: calc(16px / .9); }
}
/* ---------- Front page, Andrea's text brief of 29.09.2026 ---------- */
/* Hero with a portrait on the right (only where the layout holds .picline-hero-portrait); on phones below the buttons.
   Until the photo exists a yellow placeholder in 4:5. Photo later: image block in .picline-hero-portrait before the
   caption, class picline-hero-eager (loaded at once, functions.php), placeholder paragraph removed. */
.picline-hero-layout:has(> .picline-hero-portrait) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.picline-hero-layout:has(> .picline-hero-portrait) > * { min-width: 0; margin-block: 0; }
@media (max-width: 899px) { .picline-hero-layout:has(> .picline-hero-portrait) { grid-template-columns: minmax(0, 1fr); } }
/* H1 next to the photo in at most 3 lines on computers (Andrea 29.09.2026): the first line «Marketingagentur in Zug für»
   is about 12.9 × the font size wide, the text column at least 13.7 ×; capped at 3.25rem (4.25rem gave 4 lines). */
.picline-hero-layout:has(> .picline-hero-portrait) .picline-hero-copy > h1 { font-size: clamp(2rem, 3.6vw, 3.25rem) !important; }
.picline-hero-portrait { justify-self: end; width: 100%; max-width: 500px; }
/* Photo a little larger (Andrea 29.09.2026): it reaches into the right page margin (2.5vw, from 1440 px 4vw, where the
   margin is wider), the text column keeps its width (H1 3 lines, checks 1 line). */
@media (min-width: 900px) { .picline-hero-portrait { width: calc(100% + 2.5vw); max-width: 600px; margin-right: -2.5vw; } }
@media (min-width: 1440px) { .picline-hero-portrait { width: calc(100% + 4vw); margin-right: -4vw; } }
/* Promise line «Wir machen KMU digital sichtbar.» in yellow on the front page (Andrea 29.09.2026). */
.home .picline-hero-copy > .picline-hero-promise { color: #F7E229; }
@media (max-width: 899px) { .picline-hero-portrait { justify-self: start; max-width: 440px; } }
.picline-hero-portrait > * { margin: 0; }
.picline-hero-portrait .wp-block-image { margin: 0; }
.picline-hero-portrait img { display: block; width: 100%; height: auto; border-radius: 16px; }
.picline-hero-portrait > .picline-hero-portrait-platzhalter { display: grid; place-items: center; box-sizing: border-box; aspect-ratio: 4 / 5; padding: 1.5rem; border-radius: 16px; text-align: center; }
.picline-hero-portrait > .picline-hero-portrait-caption { margin-top: .75rem; color: rgb(255 255 255 / 85%); font-size: 1rem; line-height: 1.45; }
@media (min-width: 1024px) { .picline-hero-portrait > .picline-hero-portrait-caption { font-size: calc(16px / .9); } }
.picline-hero-portrait-caption strong { color: #fff; }
/* Team photo in the hero (ID 316, transparent background, 29.09.2026): soft yellow glow and a thin yellow ring behind
   the two people, the cut edge at the bottom fades into the navy. */
.picline-hero-portrait > .picline-hero-team { position: relative; isolation: isolate; }
.picline-hero-team::before, .picline-hero-team::after { content: ""; position: absolute; z-index: -1; left: 50%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); pointer-events: none; }
.picline-hero-team::before { top: 2%; width: 96%; background: radial-gradient(closest-side, rgb(247 226 41 / 26%), rgb(247 226 41 / 9%) 55%, rgb(247 226 41 / 0%) 100%); }
.picline-hero-team::after { top: 9%; width: 76%; border: 2px solid rgb(247 226 41 / 55%); }
/* Google rating badge above the eyebrow and check points under the buttons (29.09.2026, Andrea's example).
   Google «G» as a CSS image, so the content stays a plain paragraph. Numbers by hand, same as in «Kennst Du das?». */
/* Also in the hero of Webdesign (50, .picline-wd-hero-copy) since 29.09.2026. */
.picline-section :is(.picline-hero-copy, .picline-wd-hero-copy) > p.picline-hero-rating {
    display: grid; grid-template-columns: auto auto; align-items: center; gap: .15rem .75rem; width: fit-content; max-width: 100%; box-sizing: border-box;
    padding: .65rem 1.15rem .65rem .85rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 14px;
    background: rgb(255 255 255 / 6%); color: #fff; opacity: 1; font-size: 1rem; line-height: 1.3;
}
.picline-hero-rating::before {
    content: ""; grid-row: 1 / span 2; width: 2em; height: 2em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Stars on top, «5.0 aus 21 Google-Bewertungen» below, the G next to both (same on phones). */
.picline-hero-rating-sterne { color: #F7E229; font-size: 1.15em; line-height: 1.1; letter-spacing: .08em; }
.picline-hero-rating-text strong { font-weight: 800; }
:is(.picline-hero-copy, .picline-wd-hero-copy) > .picline-hero-rating + .picline-eyebrow { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
/* Three short points in one line on computers (Andrea 29.09.2026); below 1280 px the text column gets a little more room. */
@media (min-width: 900px) and (max-width: 1279px) { .picline-hero-layout:has(> .picline-hero-portrait) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.picline-hero-checks > li { white-space: nowrap; }
.picline-section .picline-hero-copy > .picline-hero-checks { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: clamp(1.5rem, 2.5vw, 2rem); padding: 0; list-style: none; }
.picline-hero-checks > li { display: flex; align-items: center; gap: .55rem; margin: 0; color: rgb(255 255 255 / 90%); font-size: 1rem; line-height: 1.4; }
.picline-hero-checks > li::before {
    content: ""; flex: none; width: 1.2em; height: 1.2em;
    background: 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='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 1024px) {
    .picline-section :is(.picline-hero-copy, .picline-wd-hero-copy) > p.picline-hero-rating, .picline-hero-checks > li { font-size: calc(16px / .9); }
}
.picline-hero-portrait .picline-hero-team img { border-radius: 0; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
/* ---------- Front page hero since 30.09.2026 (Andrea: new photo on the right, «coolen Effekt», placed cleanly):
   his cut-out portrait with camera and laptop stands on the lower edge of the hero (no fade), in front of a yellow
   disc his head rises above and a slowly turning dashed ring; three service chips float around him. The layers move
   a little with the mouse (assets/hero-portrait.js writes --px/--py). The portrait ends at the right edge of the
   content (before: it reached 2.5 to 4vw into the page margin). Build script and backup:
   backups/start-einstieg-andrea-20260930-012409/. ---------- */
.picline-hero-portrait.picline-hero-portrait-andrea {
    --px: 0; --py: 0;
    position: relative; isolation: isolate; align-self: end; justify-self: end;
    width: 100%; max-width: 640px; margin: 0 0 calc(-1 * var(--wp--preset--spacing--section)) !important;
}
/* Computers: the photo also uses the gap to the text column (its left part is transparent), the right edge stays in
   line with the content and the header button. */
/* 30.09.2026 night (Andrea: «mein Bild darf ruhig ein wenig grösser sein»): 4vw more into the free space on the left. */
@media (min-width: 900px) {
    .picline-hero-portrait.picline-hero-portrait-andrea { width: calc(100% + clamp(2rem, 5vw, 5rem)); max-width: 720px; margin-left: calc(-1 * clamp(2rem, 5vw, 5rem)) !important; }
}
@media (min-width: 1280px) {
    .picline-hero-portrait.picline-hero-portrait-andrea { width: calc(100% + clamp(2rem, 5vw, 5rem) + 4vw); max-width: 800px; margin-left: calc(-1 * (clamp(2rem, 5vw, 5rem) + 4vw)) !important; }
}
/* 30.09.2026 night (Andrea: «Bild leicht nach rechts, damit es luftiger aussieht»): photo, disc and chips move by
   --rechts into the right page margin, same size as before, so there is more space between the text and the chips.
   Below 1440 px the page margin is narrow, so the shift is smaller and the Fotografie chip ends at the photo edge.
   Measured with messen.ps1 in backups/start-einstieg-rechts-20260930-014912/. */
@media (min-width: 900px) {
    .picline-hero-portrait.picline-hero-portrait-andrea { --rechts: 2vw; margin-right: calc(-1 * var(--rechts)) !important; margin-left: calc(var(--rechts) - clamp(2rem, 5vw, 5rem)) !important; }
    .picline-hero-portrait-andrea .picline-hero-chips > .is-foto { right: 0; }
}
@media (min-width: 1280px) {
    .picline-hero-portrait.picline-hero-portrait-andrea { --rechts: 2.5vw; margin-left: calc(var(--rechts) - clamp(2rem, 5vw, 5rem) - 4vw) !important; }
}
@media (min-width: 1440px) {
    .picline-hero-portrait.picline-hero-portrait-andrea { --rechts: 4vw; }
    .picline-hero-portrait-andrea .picline-hero-chips > .is-foto { right: -3%; }
}
/* The dashed ring around the disc was removed the same night (Andrea: «wirkt unruhig»). */
.picline-hero-portrait-andrea::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%); pointer-events: none;
}
/* Hero of the front page higher up (Andrea: «Kopfzeile wirkt zu gross, das Ganze ein wenig nach oben»): less space
   between the header and the rating badge; the photo still stands on the lower edge. */
.home .picline-section.picline-hero#start { padding-top: clamp(2rem, 5vw, 4.5rem) !important; }
/* Computers: the whole hero fits into the first screen, also on laptops with 125 % scaling (Andrea 30.09.2026: «sieht
   ein wenig geschnitten aus»). Spacing above and below and the H1 follow the window height; the photo keeps standing
   on the lower edge (same value as the bottom padding). Measured with messen.ps1 in
   backups/start-einstieg-hoehe-20260930-014306/. */
@media (min-width: 900px) {
    .home .picline-section.picline-hero#start {
        --start-unten: clamp(1.5rem, 6vh, 5rem);
        padding-top: clamp(1rem, 4.5vh, 4.5rem) !important; padding-bottom: var(--start-unten) !important;
    }
    .home #start .picline-hero-portrait.picline-hero-portrait-andrea { margin-bottom: calc(-1 * var(--start-unten)) !important; }
    .home #start .picline-hero-layout:has(> .picline-hero-portrait) .picline-hero-copy > h1 { font-size: min(clamp(2rem, 3.6vw, 3.25rem), 6.4vh) !important; }
    /* Since the longer hero text of 30.09.2026 (one line more at 1280 and 1366 px): the space above the buttons and
       above the check points also follows the window height, on tall screens it stays as before. */
    .home #start .picline-hero-copy > .wp-block-buttons { margin-top: min(clamp(1.75rem, 3vw, 2.5rem), 4.6vh); }
    .home #start .picline-hero-copy > .picline-hero-checks { margin-top: min(clamp(1.5rem, 2.5vw, 2rem), 3.8vh); }
}
/* Disc: radius 33 % of the width = 38 % of the height, so its top edge lies at about 20 % and the head rises above it. */
.picline-hero-portrait-andrea::before {
    width: 68%;
    background: radial-gradient(circle at 34% 28%, #fff389 0%, #F7E229 42%, #dcc412 100%);
    box-shadow: 0 0 0 14px rgb(247 226 41 / 10%), 0 40px 90px -20px rgb(247 226 41 / 45%);
    translate: calc(var(--px) * -12px) calc(var(--py) * -9px);
}
.picline-hero-portrait-andrea > .picline-hero-andrea { position: relative; margin: 0; translate: calc(var(--px) * 7px) calc(var(--py) * 5px); }
.picline-hero-portrait .picline-hero-andrea img { display: block; width: 100%; height: auto; border-radius: 0; filter: drop-shadow(0 18px 36px rgb(0 0 0 / 35%)); }
ul.picline-hero-chips { position: absolute; inset: 0; z-index: 1; margin: 0 !important; padding: 0; list-style: none; pointer-events: none; }
.picline-hero-chips > li {
    position: absolute; display: flex; align-items: center; gap: .55rem; margin: 0; padding: .45rem 1rem .45rem .45rem;
    border-radius: 999px; background: #fff; color: #02084a; font-size: .95rem; font-weight: 800; line-height: 1; white-space: nowrap;
    box-shadow: 0 14px 32px rgb(0 0 0 / 32%); translate: calc(var(--px) * 18px) calc(var(--py) * 13px);
}
.picline-hero-chips > li::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #02084a center / 16px no-repeat; }
.picline-hero-chips > .is-foto::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='2' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.picline-hero-chips > .is-web::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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='14' height='10' rx='1.5'/%3E%3Cpath d='M6 18h6'/%3E%3Crect x='17' y='8' width='5' height='12' rx='1'/%3E%3C/svg%3E"); }
.picline-hero-chips > .is-social::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='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
/* Places: Webdesign in the free space top left, Fotografie next to the camera arm, Social Media bottom left. */
.picline-hero-chips > .is-web { left: 7%; top: 17%; }
.picline-hero-chips > .is-foto { right: -3%; top: 44%; }
.picline-hero-chips > .is-social { left: 5%; bottom: 16%; }
@media (prefers-reduced-motion: no-preference) {
    .picline-hero-portrait-andrea > .picline-hero-andrea { animation: picline-andrea-rein .9s cubic-bezier(.2, .8, .2, 1) both; }
    .picline-hero-portrait-andrea::before { animation: picline-scheibe-rein 1s cubic-bezier(.2, .8, .2, 1) both; }
    .picline-hero-chips > li { animation: picline-chip-rein .6s cubic-bezier(.2, .8, .2, 1) both, picline-chip-schweben 6s ease-in-out infinite; }
    .picline-hero-chips > .is-web { animation-delay: .5s, -2s; }
    .picline-hero-chips > .is-foto { animation-delay: .7s, -4s; }
    .picline-hero-chips > .is-social { animation-delay: .9s, 0s; }
}
@keyframes picline-andrea-rein { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes picline-scheibe-rein { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }
@keyframes picline-chip-rein { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes picline-chip-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 899px) {
    .picline-hero-portrait.picline-hero-portrait-andrea { justify-self: center; max-width: 460px; margin-top: 2rem !important; }
    .picline-hero-chips > li { padding: .38rem .8rem .38rem .38rem; font-size: .8125rem; }
    .picline-hero-chips > li::before { width: 24px; height: 24px; background-size: 13px; }
    .picline-hero-chips > .is-web { left: 0; }
    .picline-hero-chips > .is-foto { right: 0; }
}
@media (min-width: 1024px) { .picline-hero-chips > li { font-size: calc(16px / .9); } }
/* «Was Kund:innen über die Zusammenarbeit sagen» (#bewertungen): light blue, three cards like the website references.
   Since 30.09.2026 with Andrea's three Google reviews word for word: white cards with stars, a yellow quotation mark,
   the text (long reviews folded after 8 lines with a soft fade by assets/bewertungen.js, button «Ganze Bewertung
   lesen»; without JavaScript everything is visible), name with a navy initial and the Google «G». Above: average in a
   white pill (numbers by hand, same as «Kennst Du das?»), below: button to his Google profile.
   Build script and backup: backups/bewertungen-20260930-025339/. */
.picline-bewertungen {
    --picline-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E");
}
.picline-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.picline-bewertungen .picline-inner > h2 { margin-top: 0; }
.picline-bewertungen .picline-inner > .section-intro { margin-bottom: 0; }
.picline-bewertungen .picline-inner > p.picline-bewertungen-schnitt {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; width: fit-content; max-width: 100%; box-sizing: border-box;
    margin: 1.1rem 0 calc(24px + .8em); padding: .5rem 1rem .5rem .6rem; border: 1px solid #E3E6F2; border-radius: 999px;
    background: #fff; font-size: 1rem; line-height: 1.2; box-shadow: 0 4px 14px rgb(2 8 74 / 5%);
}
.picline-bewertungen-schnitt::before { content: ""; flex: none; width: 1.5em; height: 1.5em; background: var(--picline-g) center / contain no-repeat; }
.picline-bewertungen-schnitt strong { font-weight: 800; }
/* Phones: the G next to two lines (stars, then the text), like the badge in the hero. */
@media (max-width: 599px) {
    .picline-bewertungen .picline-inner > p.picline-bewertungen-schnitt { display: grid; grid-template-columns: auto auto; gap: .2rem .7rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: 14px; }
    .picline-bewertungen-schnitt::before { grid-row: 1 / span 2; width: 1.9em; height: 1.9em; }
}
/* Stars in a slightly deeper yellow than the CI yellow, which is too pale on white. */
.picline-bewertungen-schnitt-sterne, .picline-bewertung-sterne > span[aria-hidden] { color: #F5C400; letter-spacing: .08em; }
.picline-bewertungen-schnitt-sterne { font-size: 1.15em; }
.picline-bewertungen-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px; }
@media (max-width: 899px) { .picline-bewertungen-karten { grid-template-columns: minmax(0, 1fr); } }
.picline-bewertungen-karten > .picline-bewertung {
    position: relative; display: flex; flex-direction: column; margin: 0; padding: clamp(1.5rem, 2vw, 2rem);
    background: #fff; border: 1px solid #E3E6F2; border-radius: 16px; box-shadow: 0 8px 24px rgb(2 8 74 / 6%);
}
/* Yellow quotation mark top right (drawn, so screen readers do not read it). */
.picline-bewertungen-karten > .picline-bewertung::before {
    content: ""; position: absolute; top: clamp(1.1rem, 1.6vw, 1.5rem); right: clamp(1.1rem, 1.6vw, 1.5rem); width: 46px; height: 46px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F7E229' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.picline-bewertung > * { margin: 0; }
.picline-bewertung > p.picline-bewertung-sterne { margin-bottom: 1.1rem; padding-right: 56px; font-size: 1.45rem; line-height: 1.2; }
.picline-bewertungen .picline-bewertung .wp-block-quote.picline-bewertung-zitat {
    margin: 0; padding: 0; border: 0; background: none; color: #02084a; font-size: 1rem; font-style: normal; line-height: 1.65; quotes: none;
}
.picline-bewertung .picline-bewertung-zitat > p { margin: 0 0 .85em; font-size: inherit; font-style: normal; line-height: inherit; }
.picline-bewertung .picline-bewertung-zitat > p:last-child { margin-bottom: 0; }
.picline-bewertung .picline-bewertung-zitat.is-gefaltet {
    max-height: calc(1.65em * 8); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3.5em), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 3.5em), transparent);
}
.picline-bewertung > button.picline-bewertung-mehr {
    display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin: .9rem 0 0; padding: .2rem 0;
    border: 0; background: none; color: #02084a; font: inherit; font-size: .95rem; font-weight: 800;
    text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.picline-bewertung-mehr::after { content: ""; width: .5em; height: .5em; margin-top: -.25em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease, margin .25s ease; }
.picline-bewertung-mehr[aria-expanded="true"]::after { margin-top: .25em; transform: rotate(-135deg); }
.picline-bewertung-mehr:focus-visible { outline: 2px solid #02084a; outline-offset: 3px; border-radius: 4px; }
/* Name with initial on the left and the Google «G» on the right, pinned to the bottom of the card. */
.picline-bewertung > p.picline-bewertung-autor {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .8rem;
    margin-top: auto; padding-top: 1.5rem; line-height: 1.3;
}
.picline-bewertung-autor::before { content: ""; grid-column: 1 / -1; grid-row: 1; height: 1px; margin-bottom: 1.25rem; background: #E3E6F2; }
.picline-bewertung-initiale { grid-column: 1; grid-row: 2 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #02084a; color: #F7E229; font-size: 1.15rem; font-weight: 800; }
.picline-bewertung-autor strong { grid-column: 2; grid-row: 2; font-weight: 800; }
.picline-bewertung-zusatz { grid-column: 2; grid-row: 3; font-size: .875rem; opacity: .75; }
.picline-bewertung-autor::after { content: ""; grid-column: 3; grid-row: 2 / span 2; width: 24px; height: 24px; background: var(--picline-g) center / contain no-repeat; }
@media (min-width: 1024px) {
    .picline-bewertungen .picline-bewertung .wp-block-quote.picline-bewertung-zitat, .picline-bewertungen .picline-inner > p.picline-bewertungen-schnitt { font-size: calc(16.5px / .9); }
    .picline-bewertung > button.picline-bewertung-mehr { font-size: calc(15.5px / .9); }
    .picline-bewertung-zusatz { font-size: calc(14px / .9); }
}
/* Button to the Google profile, with the «G» in a white circle. */
.picline-bewertungen .picline-inner > .picline-bewertungen-link { margin-top: calc(24px + .8em); }
.picline-bewertungen-google .wp-block-button__link { display: inline-flex; align-items: center; gap: .65rem; }
.picline-bewertungen-google .wp-block-button__link::before { content: ""; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: #fff var(--picline-g) center / 62% no-repeat; }
.picline-bewertungen .picline-placeholder-inline { display: inline; padding: 1px 6px; border: 2px dashed #02084a; border-radius: 6px; background: #F7E229; color: #02084a; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* «Warum Picline?» 01: signature «Andrea» in italics under the text. */
.picline-section .picline-why-item > p.picline-why-signatur { margin-top: .5rem; color: #F7E229; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); }
/* Links in the FAQ answers (Webdesign, Fotografie, Social Media Workshop, Preisrechner). */
.home .picline-faq-list p a { color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* ---------- Front page «Social Media für KMU» (#social-media, 30.09.2026, Andrea's brief): after #webdesign, before
   #bewertungen. White with a fine line above like #webdesign, small kicker in capitals with a yellow line (like «Kennst
   Du das?»), H2, intro (first paragraph as a bold lead), three white cards LinkedIn, Instagram, Facebook (platform icon
   in a navy square, H3, text, link at the bottom, whole card clickable; hover since 30.09.2026 like the other cards
   (Andrea: «animiere die wie die restliche Webseite»): lifts 4 px, stronger shadow, arrow slides), below a yellow
   button and a text link. From 900 px three cards in a row with a subgrid, so titles, texts and links start at the
   same height; below one card per row (like #bewertungen). Own prefix picline-sm-, independent of other stylesheets.
   Build script and backup: backups/start-social-media-20260930-102510/. ---------- */
.picline-section.has-white-background-color + .picline-section.picline-sm-start.has-white-background-color { border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-sm-start .picline-inner > .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;
}
.picline-sm-start .picline-inner > h2 { margin-top: 0; }
.picline-sm-start .picline-inner > .section-intro { max-width: 44em; margin-bottom: 40px; }
/* Lead without the 44em limit, so it stays on one line on computers (Andrea 30.09.2026). */
.picline-sm-start .picline-inner > .section-intro.picline-sm-lead { max-width: none; margin-bottom: .6em; font-weight: 700; opacity: 1; }
.picline-sm-start .picline-inner > .picline-sm-lead + .section-intro { margin-top: 0; }
@media (max-width: 768px) { .picline-sm-start .picline-inner > .section-intro:not(.picline-sm-lead) { margin-bottom: 32px; } }
.picline-sm-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.picline-sm-karten > .picline-sm-karte {
    position: relative; display: flex; flex-direction: column; min-width: 0; box-sizing: border-box; margin: 0;
    padding: clamp(1.5rem, 2vw, 1.75rem); border: 1px solid #d9ddec; border-radius: 16px; background: #fff;
    box-shadow: 0 8px 24px rgb(2 8 74 / 7%); transition: transform .2s ease, box-shadow .2s ease;
}
.picline-sm-karte > * { margin: 0; }
/* WordPress gives every child of a group 24 px above (flow layout); stronger selector than its rule. */
.picline-sm-karten > .picline-sm-karte > * { margin-block-start: 0; }
.picline-sm-karte > .picline-sm-label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: #02084a; font-size: 1rem; font-weight: 800; line-height: 1.2; }
/* Channel icon on a navy tile: inline SVG from picline_social_icons() (render filter in inc/social.php, since
   30.09.2026 instead of a CSS background, so its parts can move). Motion like the card icons of the service pages
   (Andrea 30.09.2026): loops with a pause while the cards are on screen (motion.js sets .is-in-view on
   .picline-sm-karten), one card after the other, faster and tilted on card hover, still with reduced motion. */
.picline-sm-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #02084a; color: #F7E229; transition: transform .25s ease; }
.picline-sm-icon svg { display: block; width: 24px; height: 24px; overflow: visible; }
.picline-sm-icon svg * { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .picline-sm-karten.is-in-view .sm-a-in { transform-origin: 50% 100%; animation: sm-in 2.8s ease-in-out infinite; }
    .picline-sm-karten.is-in-view .sm-a-dot { animation: sm-dot 2.8s ease-in-out infinite; }
    .picline-sm-karten.is-in-view .sm-a-lens { animation: sm-lens 3s ease-in-out .3s infinite; }
    .picline-sm-karten.is-in-view .sm-a-flash { animation: sm-flash 3s ease-in-out .3s infinite; }
    .picline-sm-karten.is-in-view .sm-a-f { transform-origin: 50% 100%; animation: sm-f 2.8s ease-in-out .6s infinite; }
    @media (hover: hover) {
        .picline-sm-karte:hover .picline-sm-icon { transform: translateY(-3px) rotate(-4deg); }
        .picline-sm-karte:hover .picline-sm-icon svg * { animation-duration: 1.4s !important; }
    }
}
@keyframes sm-in { 0%, 55%, 100% { transform: translateY(0) scale(1); } 66% { transform: translateY(-1.5px) scale(1.04, .96); } 76% { transform: translateY(0) scale(.98, 1.03); } 86% { transform: translateY(0) scale(1); } }
@keyframes sm-dot { 0%, 48%, 100% { transform: translateY(0); } 60% { transform: translateY(-4px); } 72% { transform: translateY(0); } }
@keyframes sm-lens { 0%, 55%, 85%, 100% { transform: scale(1); } 68% { transform: scale(.45); } }
@keyframes sm-flash { 0%, 55%, 100% { transform: scale(1); } 66% { transform: scale(3); } 80% { transform: scale(1); } }
@keyframes sm-f { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 66% { transform: translateY(-2.5px) rotate(-8deg); } 78% { transform: translateY(0) rotate(4deg); } 88% { transform: rotate(0); } }
.picline-sm-karte > h3 { margin-bottom: 10px; color: #02084a; font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.picline-sm-karte > p:not(.picline-sm-label, .picline-sm-mehr) { flex: 1; margin-bottom: 20px; color: #3a3f63; font-size: 1rem; line-height: 1.55; }
/* Links: navy, yellow line under the text, arrow after it (like «Mehr zu Webdesign»). */
.picline-sm-mehr a {
    display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; color: #02084a; font-weight: 700; text-decoration: none;
    background: linear-gradient(#F7E229, #F7E229) left bottom / calc(100% - 1.5em) 2px no-repeat;
}
.picline-sm-mehr a::after { content: "\2192"; transition: transform .2s ease; }
/* Whole card clickable (never transform the link itself). */
.picline-sm-karte .picline-sm-mehr a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.picline-sm-karte:has(a:focus-visible) { outline: 3px solid #02084a; outline-offset: 4px; }
.picline-sm-karte .picline-sm-mehr a:focus-visible { outline: none; }
@media (hover: hover) {
    .picline-sm-karten > .picline-sm-karte:hover { box-shadow: 0 18px 40px rgb(2 8 74 / 12%); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .picline-sm-karten > .picline-sm-karte:hover { transform: translateY(-4px); }
    .picline-sm-karte:hover .picline-sm-mehr a::after, .picline-sm-aktionen .picline-sm-mehr a:hover::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .picline-sm-karten > .picline-sm-karte, .picline-sm-mehr a::after { transition: none; } }
@media (min-width: 900px) {
    .picline-sm-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @supports (grid-template-rows: subgrid) {
        .picline-sm-karten { row-gap: 0; }
        .picline-sm-karten > .picline-sm-karte { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
        .picline-sm-karte > .picline-sm-mehr { align-self: end; }
    }
}
.picline-sm-start .picline-inner > .picline-sm-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 36px; }
.picline-sm-start .picline-sm-aktionen > * { margin: 0; }
@media (min-width: 1024px) {
    .picline-sm-karte > p:not(.picline-sm-label, .picline-sm-mehr), .picline-sm-karte > .picline-sm-label, .picline-sm-mehr a { font-size: calc(16px / .9); }
}
/* Front page since 02.10.2026 (Andrea): the sections follow the cards of «Kennst Du das?»: #webdesign, #arbeiten
   (Fotografie), #social-media, #fachkraefte. #arbeiten gets the same kicker and the same row «yellow button + text link»
   as the others; #fachkraefte uses the classes of #social-media (picline-sm-start). Fine line between the white
   sections in the new order. */
.picline-section.picline-kd + .picline-section.picline-sf-start,
.picline-section.picline-sf-start + .picline-section.picline-work { border-top: 1px solid rgb(2 8 74 / 14%); }
.picline-work .picline-inner > .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-work .picline-inner > .picline-eyebrow + h2 { margin-top: 0; }
.picline-work .picline-work-part > .picline-sm-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: calc(24px + .8em - 16px); }
.picline-work .picline-sm-aktionen > * { margin: 0; }
/* AGB (60), since 30.09.2026 (Andrea's text): sections as H2, points numbered «section.point» (1.1, 1.2 …), so the
   references in the text («Ziffer 9.4») can be found; the numbers come from CSS counters, the list stays a real <ol>. */
.picline-agb { counter-reset: agb-ziffer; }
.picline-agb > h2 { counter-increment: agb-ziffer; margin: 2.5rem 0 .75rem; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.3; scroll-margin-top: 1.5rem; }
.picline-agb > h2:first-child { margin-top: 0; }
.picline-agb > ol { margin: 0; padding: 0; list-style: none; counter-reset: agb-punkt; }
.picline-agb > ol > li { position: relative; margin: 0; padding-left: 3.25rem; line-height: 1.6; counter-increment: agb-punkt; }
.picline-agb > ol > li + li { margin-top: .6rem; }
.picline-agb > ol > li::before { content: counter(agb-ziffer) "." counter(agb-punkt); position: absolute; left: 0; top: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.picline-agb a { color: inherit; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.picline-agb > .picline-agb-stand { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(2 8 74 / 14%); font-weight: 700; }
@media (max-width: 599px) { .picline-agb > ol > li { padding-left: 2.75rem; } }
/* AGB since 05.10.2026 (Andrea): box «Das Wichtigste in Kürze» above the text, every section folds behind its title
   (assets/agb.js adds the buttons and the class is-klappbar; without JavaScript everything stays open), toolbar
   «Alle aufklappen» / «Drucken». When printing all sections are open, header, footer and toolbar are left out. */
.picline-agb-kurz { margin: 0 0 2.25rem; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); border: 1px solid #E3E6F2; border-left: 6px solid #F7E229; border-radius: 16px; background: #eef1fa; }
.picline-agb-kurz > h2 { margin: 0 0 1rem; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.3; }
.picline-agb-kurz > ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.picline-agb-kurz > ul > li { position: relative; margin: 0; padding-left: 1.75rem; line-height: 1.55; }
.picline-agb-kurz > ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 1rem; height: 3px; border-radius: 2px; background: #02084a; }
.picline-agb-kurz > p { margin: 1.1rem 0 0; font-weight: 700; }
.picline-agb-kurz a { color: inherit; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.picline-agb-werkzeug { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.25rem; }
.picline-agb-werkzeug button { min-height: 48px; padding: .6rem 1.25rem; border: 2px solid #02084a; border-radius: 999px; background: #fff; color: #02084a; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.picline-agb-werkzeug button:hover, .picline-agb-werkzeug button:focus-visible { background: #02084a; color: #fff; }
.picline-agb.is-klappbar > h2 { margin: 0; border-top: 1px solid rgb(2 8 74 / 16%); }
.picline-agb.is-klappbar > h2:first-of-type { margin-top: 0; }
.picline-agb.is-klappbar > .picline-agb-stand { margin-top: 0; }
.picline-agb-knopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 56px; margin: 0; padding: .85rem 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.picline-agb-knopf::after { content: ""; flex: 0 0 auto; width: .7rem; height: .7rem; margin-right: .35rem; border-right: 3px solid #02084a; border-bottom: 3px solid #02084a; transform: translateY(-25%) rotate(45deg); transition: transform .2s; }
.picline-agb > h2.is-offen > .picline-agb-knopf::after { transform: translateY(15%) rotate(-135deg); }
.picline-agb-knopf:hover { text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.picline-agb-knopf:focus-visible, .picline-agb-werkzeug button:focus-visible { outline: 3px solid #02084a; outline-offset: 3px; }
.picline-agb.is-klappbar > ol { padding-bottom: 1.5rem; }
.picline-agb.is-klappbar > ol[hidden]:not([hidden="until-found"]) { display: none; }
@media (prefers-reduced-motion: reduce) { .picline-agb-knopf::after { transition: none; } }
@media print {
    body:has(.picline-agb) header, body:has(.picline-agb) footer, body:has(.picline-agb) .picline-footer, .picline-agb-werkzeug, .picline-agb-knopf::after { display: none !important; }
    .picline-agb > ol[hidden] { display: block !important; content-visibility: visible !important; }
    .picline-agb > h2 { break-after: avoid; }
    .picline-agb > ol > li { break-inside: avoid; }
    .picline-agb-kurz { background: none; break-inside: avoid; }
}
/* Impressum (59) and Datenschutz (3), since 30.09.2026 (Andrea's texts): same headings and spacing as the AGB, list in
   section 2 of the privacy policy with yellow dashes, closing line («© 2026 …», «Stand: …») under a thin line. */
.picline-rechtlich > * { margin-block: 0; }
.picline-rechtlich > * + * { margin-top: 1rem; }
.picline-rechtlich > h2 { margin: 2.5rem 0 .75rem; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.3; }
.picline-rechtlich > h2 + * { margin-top: 0; }
.picline-rechtlich p, .picline-rechtlich li { line-height: 1.6; }
.picline-rechtlich > .picline-rechtlich-intro { font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); }
.picline-rechtlich > .picline-rechtlich-block { margin-top: 2rem; }
.picline-rechtlich > ul { padding: 0; list-style: none; }
.picline-rechtlich > ul > li { position: relative; padding-left: 1.5rem; }
.picline-rechtlich > ul > li + li { margin-top: .6rem; }
.picline-rechtlich > ul > li::before { content: ""; position: absolute; left: 0; top: .8em; width: .85rem; height: 3px; background: #F7E229; }
.picline-rechtlich a { color: inherit; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.picline-rechtlich > .picline-rechtlich-stand { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(2 8 74 / 14%); font-weight: 700; }
/* Partner (61), since 30.09.2026: intro, then one white card per partner like the cards of the website (logo left, text
   right; phones logo on top). */
.picline-partner > * { margin-block: 0; }
.picline-partner > * + * { margin-top: 1rem; }
.picline-partner > h2 { margin: 2.5rem 0 .75rem; font-size: clamp(1.375rem, 1.1rem + .7vw, 1.875rem); line-height: 1.25; }
.picline-partner > h2:first-child { margin-top: 0; }
.picline-partner > .picline-partner-intro { font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); }
.picline-partner p, .picline-partner li { line-height: 1.6; }
.picline-partner > .picline-partner-karte {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start;
    padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #E3E6F2; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(2 8 74 / 6%);
}
.picline-partner-karte > * { min-width: 0; margin: 0; }
.picline-partner-karte .picline-partner-logo img { display: block; width: 100%; height: auto; }
.picline-partner-text > * { margin-block: 0; }
.picline-partner-text > * + * { margin-top: .75rem; }
.picline-partner-text > h3 { font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem); line-height: 1.25; }
.picline-partner-text > .picline-partner-zusatz { margin-top: .25rem; font-weight: 700; opacity: .8; }
.picline-partner-text > ul { padding: 0; list-style: none; }
.picline-partner-text > ul > li { position: relative; padding-left: 1.5rem; }
.picline-partner-text > ul > li + li { margin-top: .4rem; }
.picline-partner-text > ul > li::before { content: ""; position: absolute; left: 0; top: .8em; width: .85rem; height: 3px; background: #F7E229; }
.picline-partner a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 599px) { .picline-partner > .picline-partner-karte { grid-template-columns: minmax(0, 1fr); } .picline-partner-karte .picline-partner-logo { max-width: 150px; } }
/* Whole website shown at 90 % from 1024 px (Andrea's request 28.09.2026: at 100 % the text looked too big; the
   browser view at 90 % was right). Scales text, spacing and images like the browser zoom. Only the page wrapper, so
   the editor and the mouse trail (cursor.js) are not affected. Phones and small tablets stay at 100 %. To undo:
   delete this block. */
@media (min-width: 1024px) {
    .wp-site-blocks { zoom: .9; }
}
/* Text closer to the header on every page except the front page (01.10.2026, Andrea: «der Text fängt zu weit unten an»).
   Before at 1440 px 122 px (dark heroes: section padding plus 24 px block gap) or 101 px (Kontakt, pages with the default
   template), at 390 px 72 / 48 px; now about 60 px at 1440 (like the front page) and 44 px on phones. The front page keeps
   its own rule (.home … #start above). Measured with backups/einstieg-hoeher-20261001-005513/messen.ps1. */
body:not(.home) main > .picline-section:first-child,
body:not(.home) main .wp-block-post-content > .picline-section:first-child { padding-top: clamp(2.75rem, 4.6vw, 4.25rem) !important; }
body:not(.home) main > .picline-section:first-child > .picline-inner,
body:not(.home) main .wp-block-post-content > .picline-section:first-child > .picline-inner { margin-top: 0 !important; }
body:not(.home) main.wp-block-group[style*="padding-top:var(--wp--preset--spacing--section)"] { padding-top: clamp(2.75rem, 4.6vw, 4.25rem) !important; }

/* Step titles (01.10.2026, Andrea: "das Wort muss auf einer Zeile sein"): a word is never broken in the middle
   (sections allow that with overflow-wrap: break-word); it only breaks at a real hyphen such as "Google-". */
.picline-step > h3 { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* ---------- Menu on tablets: since 03.10.2026 night (Andrea: «das mobile Menü unter 1024 px») tablets up to 1023 px
   have the ME/NU menu like phones; all media queries of the navigation moved from 767/768 to 1023/1024 and the
   tablet layout of the bar and the panel (768 to 1023 px, 02.10.2026 evening) is removed. Stand davor:
   backups/menue-mobil-loesungen-20261003-234141/theme-vorher/picline.css. ---------- */
/* 1024 to 1100 px: the card is 270 px wide, the rating line may break before «aus». */
@media (min-width: 1024px) and (max-width: 1100px) { .picline-header .picline-mega-bewertung { white-space: normal; } }
/* 1024 to 1100 px wide and up to 860 px high (1024 x 768, 1100 x 800): some names take two lines there, so the tight
   setting of the low windows applies earlier and the groups fit without scrolling inside the panel. */
@media (min-width: 1024px) and (max-width: 1100px) and (min-height: 621px) and (max-height: 860px) {
    .picline-header .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { padding: 16px 22px !important; }
    .picline-mega-gruppen > .picline-mega-gruppe:not(:nth-child(3)):not(:last-child) { margin-bottom: 10px; }
    .picline-mega-titel { margin-bottom: 4px !important; padding-bottom: 6px; }
    .picline-mega-icon { width: 28px; height: 28px; }
    .picline-mega-liste { gap: 0; }
    .picline-header .picline-mega-link { gap: 0; padding-block: 2px; }
    .picline-mega-name { line-height: 1.22; }
    .picline-mega-text { line-height: 1.3; }
}

/* ---------- Menu «Leistungen»: air between the entries follows the window height (02.10.2026 evening, Andrea: «der Text
   ist zu verquetscht, pro Thema eine Zeilenschaltung, luftiger»; replaces the fixed tight steps for low windows above,
   from 1024 px width). Up to 860 px window height every entry gets as much space above and below as the window allows
   (--mega-luft: about 5 px at 657 px height, 9 px from about 740 px; the dark card on the right is higher than the
   groups in low windows, so the groups may use that room). Names and short lines keep their size. In windows up to
   1100 px wide some names take two lines, so the air starts smaller there. ---------- */
@media (min-width: 1024px) and (max-height: 960px) {
    /* Since 04.10.2026 six groups (new «Lösungen»): the left column has three titles, so the air starts at 1 px at
       657 px window height, reaches 9 px at about 920 px and the block applies up to 960 px (before up to 860 px). */
    .picline-header .picline-mega-panel { --mega-luft: clamp(1px, calc(1px + (100vh - 657px) / 33), 9px); }
    .picline-header .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { padding: 16px 22px !important; }
    .picline-mega-gruppen > .picline-mega-gruppe:not(:nth-child(3)):not(:last-child) { margin-bottom: calc(var(--mega-luft) * 2 + 4px); }
    .picline-mega-titel { margin-bottom: 4px !important; padding-bottom: 6px; }
    .picline-mega-icon { width: 28px; height: 28px; }
    .picline-mega-liste { gap: 0; }
    .picline-header .picline-mega-link { gap: 0; padding-block: var(--mega-luft); }
    .picline-mega-name { line-height: 1.22; }
    .picline-mega-text { line-height: 1.3; }
}
/* Very low windows (1280 x 600): the card has no photo there, the groups set the height. */
@media (min-width: 1024px) and (max-height: 620px) {
    .picline-header .picline-mega-panel { --mega-luft: clamp(0px, calc((100vh - 600px) / 10), 2px); }
    /* Since 04.10.2026 (three titles in the left column): smaller title tiles and tighter lines. */
    .picline-mega-icon { width: 22px; height: 22px; }
    .picline-mega-name { line-height: 1.14; }
    .picline-mega-text { line-height: 1.18; }
    /* Since 03.10.2026 (one entry more under «Websites»): less room around the panel and under the group titles. */
    .picline-header .wp-block-navigation__container > li.picline-mega > ul.picline-mega-panel { padding: 8px 22px !important; }
    .picline-mega-titel { margin-bottom: 2px !important; padding-bottom: 3px; }
    .picline-mega-gruppen > .picline-mega-gruppe:not(:nth-child(3)):not(:last-child) { margin-bottom: 4px; }
}
/* Up to 1180 px wide (1024 x 768, 1101 x 700): two or three names take two lines. */
@media (min-width: 1024px) and (max-width: 1180px) and (max-height: 860px) {
    /* Since 03.10.2026 (one entry more): no extra air up to 780 px window height, then growing. */
    .picline-header .picline-mega-panel { --mega-luft: clamp(0px, calc((100vh - 780px) / 8), 9px); }
}

/* ---------- Phone menu since 02.10.2026 night (Andrea: one column, categories that fold open, only one open at a time,
   only link titles; Bildergalerie, Über uns and Kontakt directly visible, below them the yellow button «Projekt
   besprechen»; no contact card with photo; rows at least 44 px high; the close button always visible; the closed
   overview fits a usual phone screen without scrolling). Geht allen älteren Blöcken «ME/NU overlay» vor: up to 767 px
   the open overlay shows only the list .picline-mm (inc/mega-menue.php, folding in assets/navigation-toggle.js); the
   menu bar with the white panel and the card (computer and tablet menu, unchanged) is hidden there. Logo and ME/NU
   stand in a fixed bar at the top, the list scrolls below it. ---------- */
.picline-mm { display: none; }
@keyframes picline-mm-ein { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) {
    /* WordPress fades the overlay in with a transform; a transform makes fixed children scroll with the content, so
       the close button used to scroll away. Here only the opacity is animated. */
    .picline-header .picline-main-navigation .wp-block-navigation__responsive-container.is-menu-open {
        display: block; padding-top: 0; padding-bottom: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
        transform: none; animation: picline-mm-ein .12s ease-out;
    }
    .picline-header .picline-main-navigation .wp-block-navigation__responsive-container.is-menu-open::before {
        content: ""; position: fixed; z-index: 2; top: 0; left: 0; right: 0;
        height: calc(84px + var(--wp-admin--admin-bar--height, 0px));
        background: #02084a; border-bottom: 1px solid rgb(255 255 255 / 14%);
    }
    .picline-header .picline-main-navigation .is-menu-open .wp-block-navigation__responsive-dialog { display: block; min-height: 0; margin-top: 0; }
    .picline-header .picline-main-navigation .is-menu-open .picline-menu-logo {
        position: fixed; z-index: 3; top: calc(14px + var(--wp-admin--admin-bar--height, 0px)); left: var(--wp--style--root--padding-left); height: 56px;
    }
    .picline-header .picline-main-navigation .is-menu-open .picline-menu-toggle.wp-block-navigation__responsive-container-close {
        z-index: 3; top: calc(18px + var(--wp-admin--admin-bar--height, 0px));
    }
    .picline-header .picline-main-navigation .wp-block-navigation__responsive-container-content,
    .picline-header .picline-main-navigation .is-menu-open .picline-menu-direkt { display: none !important; }

    .picline-header .picline-mm {
        display: block; max-width: 560px; padding: calc(92px + var(--wp-admin--admin-bar--height, 0px)) 0 20px;
        color: #fff; text-align: left;
    }
    .picline-header .picline-mm ul { margin: 0; padding: 0; list-style: none; }
    .picline-header .picline-mm li { margin: 0; }
    .picline-header .picline-mm-knopf,
    .picline-header .picline-mm-direkt > a {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box;
        width: 100%; min-height: 48px; margin: 0; padding: 8px 4px; border: 0; border-bottom: 1px solid rgb(255 255 255 / 14%);
        border-radius: 0; background: none; color: #fff; font: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.25;
        text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .picline-header .picline-mm-pfeil { flex: none; color: #F7E229; }
    .picline-header .picline-mm-kat.is-offen > .picline-mm-knopf { color: #F7E229; border-bottom-color: transparent; }
    .picline-header .picline-mm-kat.is-offen > .picline-mm-knopf .picline-mm-pfeil { transform: rotate(180deg); }
    /* The category of the page that is open: small yellow mark before its name. */
    .picline-header .picline-mm-kat.is-aktuell > .picline-mm-knopf > span::before,
    .picline-header .picline-mm-direkt > a[aria-current="page"]::before {
        content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 3px 0; border-radius: 50%; background: #F7E229;
    }
    .picline-header .picline-mm-direkt > a { justify-content: flex-start; gap: 0; }
    .picline-header .picline-mm-unter { margin: 0 0 8px 6px !important; padding: 0 0 0 12px !important; border-left: 2px solid #F7E229; }
    .picline-header .picline-mm-unter[hidden] { display: none; }
    .picline-header .picline-mm-kat.is-offen { border-bottom: 1px solid rgb(255 255 255 / 14%); }
    .picline-header .picline-mm-unter a {
        display: flex; align-items: center; box-sizing: border-box; min-height: 48px; padding: 6px 10px; border-radius: 8px;
        color: #fff; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; text-decoration: none;
    }
    .picline-header .picline-mm-unter a[aria-current="page"] { background: rgb(255 255 255 / 10%); color: #F7E229; font-weight: 700; }
    .picline-header .picline-mm-knopf:active,
    .picline-header .picline-mm-direkt > a:active,
    .picline-header .picline-mm-unter a:active { background: rgb(255 255 255 / 10%); }
    .picline-header .picline-mm :is(a, button):focus-visible { outline: 2px solid #F7E229; outline-offset: -2px; }
    /* Since 03.10.2026 night (Andrea): the group titles in capitals like on computers; at the bottom a fixed bar with
       «Erstgespräch buchen», phone and e-mail (always visible, the list scrolls between the two bars). */
    .picline-header .picline-mm-knopf { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
    .picline-header .picline-mm { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
    .picline-header .picline-mm-fuss {
        position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; box-sizing: border-box;
        padding: 12px var(--wp--style--root--padding-right) calc(8px + env(safe-area-inset-bottom, 0px)) var(--wp--style--root--padding-left);
        border-top: 1px solid rgb(255 255 255 / 14%); background: #02084a;
    }
    .picline-header .picline-mm-fuss > * { max-width: 560px; }
    .picline-header .picline-mm-termin {
        display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 52px; padding: 10px 20px;
        border-radius: 4px; background: #F7E229; color: #02084a; font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-decoration: none;
    }
    .picline-header .picline-mm-termin:active { background: #fff; }
    .picline-header .picline-mm .picline-mm-termin:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
    .picline-header .picline-mm-direktkontakt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin: 4px 0 0; }
    .picline-header .picline-mm-direktkontakt a {
        display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 2px; color: #fff; font-size: 1rem; font-weight: 600;
        text-decoration: none; white-space: nowrap;
    }
    .picline-header .picline-mm-direktkontakt svg { flex: none; color: #F7E229; }
    .picline-header .picline-mm-direktkontakt a:active { color: #F7E229; }
    /* Since 06.10.2026 (Andrea): the labels of the computer menu also here. «1 Min.» after «Preis für Deine Website
       berechnen»: the name never breaks, the label stands next to it or, if there is no room, directly below it.
       «30 Min.» on the button like on the footer button. */
    .picline-header .picline-mm-unter a.has-etikett { flex-wrap: wrap; gap: 4px 5px; padding: 8px 0 8px 10px; }
    .picline-header .picline-mm-unter a.has-etikett .picline-mm-name { white-space: nowrap; }
    .picline-header .picline-mm-unter a.has-etikett .picline-mega-etikett { margin-left: 0; padding: 2px 6px; font-size: 12px; letter-spacing: 0; vertical-align: 0; }
    .picline-header .picline-mm-termin-min { flex: none; padding: 4px 11px; border-radius: 20px; background: #02084a; color: #F7E229; font-size: 12px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
}
/* Up to 430 px (all usual phones) the label «1 Min.» always stands directly below the name (Andrea, 06.10.2026: next to
   it only 1 px was left at 390 px; at least 12 px must stay free, so the phones all look the same). */
@media (max-width: 430px) {
    .picline-header .picline-mm-unter a.has-etikett .picline-mm-name { flex-basis: 100%; }
}
/* Low phone screens: a little less space, so more is visible without scrolling. The rows stay 48 px high (since
   03.10.2026 every row that can be tapped is at least 48 px; the menu scrolls, it is longer than the screen anyway). */
@media (max-width: 1023px) and (max-height: 620px) {
    .picline-header .picline-mm { padding-top: calc(86px + var(--wp-admin--admin-bar--height, 0px)); padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
    .picline-header .picline-mm-fuss { padding-top: 8px; }
    .picline-header .picline-mm-termin { min-height: 48px; }
    .picline-header .picline-mm-direktkontakt { margin-top: 0; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    .picline-header .picline-mm-pfeil { transition: transform .15s ease; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .picline-header .picline-main-navigation .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}

/* ---------- Footer (template fusszeile-vorlage.html, Andrea, 03.10.2026; the only footer CSS, all older footer rules
   are removed). Markup: block picline/fusszeile in inc/fusszeile.php, script assets/fusszeile.js. The rules are
   the ones of the template. Adapted to the theme: the logo is the picture, the social icons are the WordPress ones in
   the circles, the arrow is the character →, the font is inherited from the theme, the side edges follow the page
   content, a visible keyboard focus. The template is drawn in real pixels, so from 1024 px the 90 % view of the
   website is taken back for the footer (zoom 1 / .9), otherwise every size would be 10 % smaller than drawn. ---------- */
.pf { background:#02084a; color:#fff; font-size:16px; line-height:1.4; text-align:left; }
.pf *, .pf *::before, .pf *::after { box-sizing:border-box; }
.pf a { color:#fff; text-decoration:none; }
.pf a:hover, .pf a:focus-visible { color:#F7E229; }
.pf a:focus-visible, .pf summary:focus-visible { outline:2px solid #F7E229; outline-offset:3px; }
.pf p { margin:0; }
.pf ul { list-style:none; margin:0; padding:0; }
.pf-in { max-width:1440px; margin:0 auto; padding:56px var(--wp--style--root--padding-right, 40px) 28px var(--wp--style--root--padding-left, 40px); display:flex; flex-direction:column; }

.pf-top { display:flex; align-items:center; gap:28px; margin-bottom:36px; }
.pf-logo { display:block; line-height:0; }
.pf-logo img { display:block; width:auto; height:46px; }
.pf-slogan { font-size:18px; }

.pf-btn { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#F7E229; border-radius:12px; padding:15px 18px; font-size:17px; font-weight:700; white-space:nowrap; }
.pf a.pf-btn, .pf a.pf-btn:hover, .pf a.pf-btn:focus-visible { color:#02084a; }
.pf-btn:hover { filter:brightness(1.06); }
.pf-btn-l { display:flex; align-items:center; gap:10px; }
.pf-btn-l svg { flex:none; }
.pf-btn-min { background:#02084a; color:#F7E229; font-size:12px; font-weight:800; border-radius:20px; padding:4px 11px; }
.pf-btn--mobil { display:none; }

.pf-band { background:#0d1568; border-radius:22px; padding:30px 34px; display:grid; grid-template-columns:1.25fr 1fr 1.15fr; gap:44px; align-items:center; }
.pf .pf-titel { font-size:26px; line-height:1.25; font-weight:700; margin-bottom:8px; }
.pf-lead { font-size:15px; line-height:1.5; }
.pf-band-kontakt { display:grid; gap:16px; }
.pf-band-aktion { display:grid; gap:18px; }
.pf-row { display:flex; align-items:center; gap:14px; }
.pf-ic { width:44px; height:44px; border-radius:50%; background:#1c2685; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; }
.pf-row small { display:block; font-size:13px; }
.pf-row b { font-size:18px; font-weight:700; white-space:nowrap; }
.pf-rate { display:flex; align-items:center; gap:14px; }
.pf-rate-kachel { width:54px; height:54px; border-radius:12px; background:#F7E229; color:#02084a; font-weight:800; font-size:21px; display:flex; align-items:center; justify-content:center; flex:none; }
.pf-rate-txt { flex:1; font-size:15px; white-space:nowrap; }
.pf-sterne { display:block; color:#F7E229; font-size:17px; letter-spacing:3px; line-height:1.1; }
.pf-pfeil { flex:none; font-size:22px; line-height:1; }

.pf-cols { display:grid; grid-template-columns:1.4fr 1.1fr 1.1fr 1fr; gap:40px; margin-top:44px; align-items:start; }
.pf-t, .pf-grp summary { color:#F7E229; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.pf-grp summary { list-style:none; margin-bottom:14px; pointer-events:none; cursor:default; }
.pf-grp summary::-webkit-details-marker { display:none; }
.pf-grp + .pf-grp, .pf-grp + .pf-adr { margin-top:34px; }
.pf-grp li { margin:0; }
.pf-grp li a { display:block; padding:7px 0; line-height:1.35; }
.pf-pill { display:inline-block; background:#F7E229; color:#02084a; font-size:12px; font-weight:800; border-radius:20px; padding:2px 9px; margin-left:8px; vertical-align:2px; white-space:nowrap; }
.pf-adr .pf-t { margin-bottom:14px; }
.pf-adr address { font-style:normal; line-height:1.5; white-space:nowrap; }
/* Place pages (03.10.2026): «Auch für KMU in Luzern und Zürich» under the address, the two names are links. */
.pf-orte { margin:10px 0 0; font-size:14px; line-height:1.5; color:rgb(255 255 255 / 78%); }
.pf-orte a { display:inline-block; padding-block:6px; color:#fff; text-decoration:underline; text-decoration-color:#F7E229; text-decoration-thickness:2px; text-underline-offset:4px; }
.pf-orte a:hover { color:#F7E229; }
.pf-soc { display:flex; gap:10px; margin-top:16px; }
/* The three circles of the template with the WordPress social icons inside. */
.pf-soc .wp-block-social-links { display:flex; flex-wrap:nowrap; gap:10px; }
.pf-soc .wp-social-link { width:40px; height:40px; margin:0; padding:0; border:1.5px solid currentColor; border-radius:50%; background:none; color:#fff; }
.pf-soc .wp-social-link a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0; border-radius:50%; }
.pf-soc .wp-social-link svg { width:18px; height:18px; fill:currentColor; }
.pf-soc .wp-social-link:hover { color:#F7E229 !important; transform:none; }

.pf-bottom { border-top:1px solid #2a3396; margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; font-size:15px; }
.pf-bottom ul { display:flex; flex-wrap:wrap; gap:8px 26px; }

/* From 1024 px the website is shown at 90 %: taken back here, and the side edges follow the page content (1188 px). */
@media (min-width:1024px) {
  .pf { zoom:1.1111; }
  .pf-in { max-width:calc(1188px + 2 * min(4.5vw, 108px)); padding-left:min(4.5vw, 108px); padding-right:min(4.5vw, 108px); }
}
/* Narrow computer screens: the band and the columns a little tighter, so nothing is pressed. */
@media (min-width:861px) and (max-width:1180px) {
  .pf-band { gap:28px; padding:26px 26px; }
  .pf .pf-titel { font-size:22px; }
  .pf-cols { gap:28px; }
}

/* Handy und kleines Tablet */
@media (max-width:860px) {
  .pf-in { padding-top:28px; padding-bottom:22px; }
  .pf-top { order:1; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:18px; }
  .pf-logo img { height:40px; }
  .pf-slogan { font-size:15px; }

  .pf-btn--mobil { display:flex; order:2; font-size:16px; padding:14px; margin-bottom:22px; }

  .pf-cols, .pf-col { display:contents; }
  .pf-grp { order:3; border-bottom:1px solid #2a3396; }
  /* Reihenfolge wie im Hauptmenue */
  .pf-col:nth-child(2) .pf-grp:nth-child(1) { order:4; }
  .pf-col:nth-child(3) .pf-grp:nth-child(1) { order:5; }
  .pf-col:nth-child(2) .pf-grp:nth-child(2) { order:6; }
  .pf-col:nth-child(3) .pf-grp:nth-child(2) { order:7; }
  .pf-col:nth-child(4) .pf-grp { order:8; }
  .pf-grp + .pf-grp { margin-top:0; }
  .pf-col:first-child .pf-grp:first-child { border-top:1px solid #2a3396; }
  .pf-grp summary { display:flex; justify-content:space-between; align-items:center; min-height:54px; margin:0; padding:0 2px; pointer-events:auto; cursor:pointer; }
  .pf-grp summary::after { content:"+"; font-size:22px; font-weight:400; letter-spacing:0; color:#fff; }
  .pf-grp[open] summary::after { content:"\2212"; }
  .pf-grp ul { padding:0 2px 14px; }
  .pf-grp li a { display:flex; align-items:center; min-height:48px; padding:4px 0; font-size:17px; }

  .pf-band { order:9; display:block; margin-top:24px; padding:22px 20px; border-radius:18px; }
  .pf-band .pf-btn { display:none; }
  .pf .pf-titel { font-size:20px; }
  .pf-band-kontakt { margin-top:18px; }
  .pf-row { min-height:48px; }
  .pf-band-aktion { display:block; border-top:1px solid #2a3396; margin-top:22px; padding-top:22px; }

  .pf-adr { order:10; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .pf-grp + .pf-adr { margin-top:22px; }
  .pf-adr .pf-t { display:none; }
  .pf-adr address { font-size:14px; }
  .pf-soc { margin-top:0; }

  .pf-bottom { order:11; border-top:0; margin-top:20px; padding-top:0; flex-direction:column; gap:8px; font-size:14px; }
  .pf-bottom ul { gap:8px 20px; }
  .pf-bottom a { display:inline-flex; align-items:center; min-height:40px; }
}
/* Error page 404 / 410 (templates/404.html, since 03.10.2026): hero like the blog, three service cards, contact line. */
.picline-fehler-hero .picline-hero-copy { max-width: 46rem; }
.picline-fehler-leistungen .picline-problem-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .picline-fehler-leistungen .picline-problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.picline-fehler-leistungen .picline-inner > h2 { margin-block: 0 clamp(1.25rem, 3vw, 2rem); }
.picline-fehler-kontakt { margin-block: clamp(2rem, 4vw, 3rem) 0; font-size: 1.0625rem; line-height: 1.6; }
.picline-fehler-kontakt a { color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
/* Front page #arbeiten since 03.10.2026 (Andrea: woman right, Pilates and kitchen in the middle, all columns flush at the
   bottom): three column groups .picline-work-spalte. Every photo keeps its own format (nothing cropped). The middle column
   holds three landscape photos (3:2), the outer ones a landscape (3:2) and a portrait (4:5); for equal heights the outer
   columns are a = 24/71 x (width - 1.5 gaps), the middle column takes the rest (about 4 % narrower). Change the photo
   formats per column and these widths no longer fit. Phones: one column. */
.picline-work-cards.picline-work-spalten { columns: auto; display: grid; grid-template-columns: calc((100% - 24px) * 24 / 71) 1fr calc((100% - 24px) * 24 / 71); column-gap: 16px; align-items: start; }
.picline-work-spalten > .picline-work-spalte { display: flex; flex-direction: column; gap: 16px; margin: 0 !important; }
.picline-work-spalten .picline-work-card { position: relative; display: block; width: 100%; margin: 0 !important; overflow: hidden; border-radius: 8px; background: #02084a; color: #fff; }
.picline-work-spalten .picline-work-card > * { margin: 0; }
/* Touch screens from 600 px: caption on the photo instead of below it, otherwise the middle column (three captions) would be longer. */
@media (min-width: 600px) and (hover: none), (min-width: 600px) and (pointer: coarse) {
    #arbeiten .picline-work-spalten .picline-work-card > figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .45rem .7rem; background: rgb(2 8 74 / 82%); font-size: .75rem; }
}
@media (max-width: 599px) {
    .picline-work-cards.picline-work-spalten { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}
/* Phones up to 700 px since 06.10.2026 (Andrea): portrait photos (.picline-work-hoch, set in functions.php from the size
   of the file) stand two in a row, landscape photos stay alone at full width; same gap and same corners everywhere.
   The three column groups dissolve (display: contents); order: the photos of the first column, then the portraits as
   pairs, then the other landscape photos. Both portraits of a row are equally high (4:5; a file in another format is
   shown as 4:5 from the upper part, so no face is cut). Computers and tablets from 701 px unchanged. */
@media (max-width: 700px) {
    .picline-work-cards.picline-work-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .picline-work-spalten > .picline-work-spalte { display: contents; }
    .picline-work-spalten .picline-work-card { order: 3; grid-column: 1 / -1; }
    .picline-work-spalten > .picline-work-spalte:first-child > .picline-work-card { order: 1; }
    .picline-work-spalten > .picline-work-spalte > .picline-work-card.picline-work-hoch { order: 2; grid-column: auto; }
    .picline-work-spalten .picline-work-card.picline-work-hoch img { aspect-ratio: 4 / 5 !important; object-fit: cover; object-position: 50% 20%; }
}
/* Same rule since 06.10.2026 for the picture areas without column groups (Fotograf Zug #arbeiten, CSS columns on
   computers): up to 700 px a grid, landscape photos alone at full width, portrait photos two in a row and equally high.
   The photos keep their order; a later portrait moves up next to a single one (dense). If the number of portraits is
   odd, the last one stays alone at full width in its own format, as before. */
@media (max-width: 700px) {
    .picline-work-cards:not(.picline-work-spalten) { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; align-items: start; }
    .picline-work-cards:not(.picline-work-spalten) > .picline-work-card { margin: 0; grid-column: 1 / -1; }
    .picline-work-cards:not(.picline-work-spalten) > .picline-work-card.picline-work-hoch { grid-column: auto; }
    .picline-work-cards:not(.picline-work-spalten) > .picline-work-hoch img { aspect-ratio: 4 / 5 !important; object-fit: cover; object-position: 50% 20%; }
    .picline-work-cards:not(.picline-work-spalten) > .picline-work-hoch:nth-last-child(1 of .picline-work-hoch):nth-child(odd of .picline-work-hoch) { grid-column: 1 / -1; }
    .picline-work-cards:not(.picline-work-spalten) > .picline-work-hoch:nth-last-child(1 of .picline-work-hoch):nth-child(odd of .picline-work-hoch) img { aspect-ratio: auto !important; }
    .picline-fz-galerie .picline-work-cards + .wp-block-buttons { margin-top: calc(24px + .8em); }
}
/* ---------- Offerte anfragen (/offerte-anfragen/, since 05.10.2026) ----------
   Eight tiles in the style of the service cards (.picline-problem): symbol, title (h2, the page has no other h2 above),
   text and a yellow button; the buttons of a row stand on one line (subgrid of the cards). 4 columns from 1024 px,
   2 from 600 px, 1 below. */
.picline-offerte-karten .picline-problem-grid { gap: 20px; }
/* Since 05.10.2026 (Andrea): 4 columns only from 1200 px, 2 columns from 768 px, 1 below; no button text may wrap. */
.picline-offerte-karten .picline-problem-grid { grid-template-columns: minmax(0, 1fr); }
/* 760 and 1195 instead of 768 and 1200: on screens with a fractional pixel ratio a width of 768 can count as 767.9. */
@media (min-width: 760px) { .picline-offerte-karten .picline-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1195px) { .picline-offerte-karten .picline-problem-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Four columns: a little less gap and card padding, so the longest button text («Offerte zusammenstellen») keeps room
   on one line; below 360 px the arrow is left out for the same reason. */
@media (min-width: 1195px) {
    .picline-offerte-karten .picline-problem-grid > .picline-problem { padding: 1.25rem; }
}
@media (min-width: 1195px) and (max-width: 1439px) {
    .picline-offerte-karten .picline-problem-grid { gap: 16px; }
    .picline-offerte-karten .picline-problem-grid > .picline-problem { padding: 1rem; }
    .picline-offerte-karten .picline-problem .picline-problem-link a { padding-inline: .25rem; gap: .3rem; }
}
@media (max-width: 359px) { .picline-offerte-karten .picline-problem-link a::after { content: none; } }
.picline-section.picline-offerte-karten .picline-problem,
.picline-section.picline-offerte-karten .picline-problem h2,
.picline-section.picline-offerte-karten .picline-problem p { text-align: left; }
.picline-offerte-karten .picline-problem h2 { margin-block: 0; font-size: clamp(1.125rem, 1rem + .3vw, 1.3125rem); font-weight: 700; line-height: 1.25; color: #02084a; text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
.picline-offerte-karten .picline-problem > .picline-problem-link { padding-top: 1.25rem; }
.picline-offerte-karten .picline-problem-link a {
    display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .7rem .5rem; white-space: nowrap;
    border-radius: 4px; background: #F7E229; color: #02084a; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.picline-offerte-karten .picline-problem-link a::after { margin-left: 0; color: inherit; }
/* From 1024 px the page is shown at 90 %: the button stays at least 48 px high on the screen. */
@media (min-width: 1024px) { .picline-offerte-karten .picline-problem-link a { min-height: calc(48px / .9); } }
@media (hover: hover) {
    .picline-offerte-karten .picline-problem:hover .picline-problem-link a { background: #02084a; color: #fff; }
}
.picline-offerte-karten .picline-problem-link a:focus-visible { background: #02084a; color: #fff; }
/* «Lieber direkt reden?»: name and title under the heading, three ways as buttons. */
.picline-offerte-reden .picline-offerte-name { font-size: 1.0625rem; line-height: 1.45; }
.picline-offerte-reden .picline-offerte-name strong { display: block; font-size: 1.1875rem; }
.picline-offerte-reden .wp-block-buttons { gap: .75rem; }
@media (max-width: 599px) {
    .picline-offerte-reden .wp-block-buttons { flex-direction: column; align-items: stretch; }
    .picline-offerte-reden .wp-block-button, .picline-offerte-reden .wp-block-button__link { width: 100%; text-align: center; box-sizing: border-box; }
}