/* Erstgespräch buchen (/erstgespraech/, 01.10.2026, Andrea's brief). Loaded only on the page with [picline_calcom]
   (inc/erstgespraech.php). Hero, list with yellow dashes and steps are the existing components (picline-wd, picline-step).
   Text sizes at least 16 px visible (16 / .9 px from 1024 px because of the 90 % view). */

/* Booking: from 900 px two columns (left Andrea and the topics, right the calendar), below one after the other. */
.picline-eg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .picline-eg-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.picline-eg-grid > * { min-width: 0; margin: 0; }
.picline-eg-person > * { margin-block: 0; }

/* Portrait on the yellow disc like in the menu card (ID 391, transparent background, shown whole). */
.picline-eg-person > .picline-eg-foto { position: relative; display: flex; justify-content: center; width: 240px; max-width: 100%; margin: 0 0 1rem; overflow: hidden; border-bottom: 1px solid rgb(2 8 74 / 14%); }
.picline-eg-person > .picline-eg-foto::before { content: ""; position: absolute; left: 50%; bottom: -44px; width: 196px; height: 196px; border-radius: 50%; background: #F7E229; transform: translateX(-50%); }
.picline-eg-person > .picline-eg-foto img { position: relative; display: block; width: 100%; height: auto; }
.picline-eg-person > .picline-eg-name { font-size: 1.0625rem; line-height: 1.5; }
.picline-eg-person > .picline-eg-name strong { display: block; font-size: 1.1875rem; }
/* Since 01.10.2026 only the name under the photo (Andrea); the gap to «Worüber sprechen wir?» is the same as between the
   other parts of the column (list, sentence, info lines). */
.picline-eg-person > h2 { margin-top: clamp(1.5rem, 3vw, 2rem); font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); line-height: 1.2; }
.picline-eg-person > ul.picline-wd-dash { margin-top: 1rem; }
/* No single word alone on the last line of a list point or of the sentence (phones). */
.picline-eg-person > ul.picline-wd-dash li, .picline-eg-person > .picline-eg-frage { text-wrap: pretty; }
/* Sentence under the list (01.10.2026): normal text size, some space to the list. */
.picline-eg-person > .picline-eg-frage { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 1024px) { .picline-eg-person > .picline-eg-frage { font-size: calc(17px / .9); } }

/* Info lines with a yellow symbol in a small navy square. */
.picline-eg-person > ul.picline-eg-infos { display: grid; gap: .75rem; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 1.1rem 1.25rem; border: 1px solid #E3E6F2; border-radius: 16px; background: #fff; list-style: none; }
.picline-eg-infos li { position: relative; display: flex; align-items: center; min-height: 36px; margin: 0; padding-left: 50px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.picline-eg-infos li::before { content: ""; position: absolute; left: 0; top: 50%; width: 36px; height: 36px; border-radius: 10px; background: #02084a center / 20px 20px no-repeat; transform: translateY(-50%); }
.picline-eg-infos li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.picline-eg-infos li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m16 10 6-3v10l-6-3Z'/%3E%3C/svg%3E"); }
.picline-eg-infos li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7E229' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8.5 7 10 4-1.5 7-5.5 7-10V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }

/* Calendar card: white like the form card on the contact page; Cal.com sets the height of its frame itself. */
.picline-eg-kalender { box-sizing: border-box; min-height: 420px; padding: clamp(.75rem, 2vw, 1.5rem); border: 1px solid #E3E6F2; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgb(2 8 74 / 5%), 0 16px 36px -16px rgb(2 8 74 / 22%); }
.picline-eg-kalender > * { margin-block: 0; }
/* No own scrolling: the Cal.com frame sets its height itself (no double scrollbars). */
.picline-eg-cal { width: 100%; min-height: 400px; overflow: visible; }
.picline-eg-cal.is-bereit { min-height: 0; }
.picline-eg-cal.is-fehler { min-height: 0; }
/* Fallback when the calendar does not load (01.10.2026): yellow button like the other buttons, opens Cal.com. */
.picline-eg-fallback { display: flex; justify-content: center; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); }
/* Calendar failed: the card shrinks to the button. */
.picline-eg-kalender:has(.picline-eg-cal.is-fehler) { min-height: 0; }
.picline-eg-cal.is-fehler { display: none; }
.picline-eg-fallback[hidden] { display: none; }
.picline-eg-fallback-knopf {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1.75rem; border: 2px solid #F7E229;
    border-radius: 6px; background: #F7E229; color: #02084a; font-weight: 700; text-decoration: none;
}
.picline-eg-fallback-knopf:hover, .picline-eg-fallback-knopf:focus-visible { border-color: #02084a; background: #02084a; color: #F7E229; }
.picline-eg-fallback-knopf:focus-visible { outline: 3px solid #F7E229; outline-offset: 3px; }
/* With the calendar (01.10.2026): it fills the white card completely, no inner padding, corners follow the card. The
   private Cal.com link is a plain iframe (assets/erstgespraech.js) whose height does not adapt by itself, so it gets a
   fixed height per screen width. */
.picline-eg-kalender:has(.picline-eg-cal) { padding: 0; overflow: hidden; }
.picline-eg-cal.is-direkt { overflow: hidden; }
/* Heights measured on 01.10.2026 with the Cal.com page on its own (event details, month, below it the free times of the
   chosen day; at this width Cal.com stacks everything): 1554 px at 300, 1575 at 348, 1777 at 653, 1848 at 736 px width.
   A little reserve so nothing is cut off and the page inside does not scroll. */
.picline-eg-frame { display: block; width: 100%; height: 1620px; border: 0; background: #fff; }
@media (min-width: 600px) { .picline-eg-frame { height: 1900px; } }
@media (min-width: 900px) { .picline-eg-frame { height: 1820px; } }
/* From 900 px the left column stays in view while the tall calendar scrolls past. */
@media (min-width: 900px) { .picline-eg-grid > .picline-eg-person { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem); } }
.picline-eg-kalender .picline-eg-platzhalter { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 380px; text-align: center; }
.picline-eg-ohne-js { font-size: 1rem; line-height: 1.55; }
.picline-eg-ohne-js a { color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Three steps side by side from 782 px, below one after the other. */
.picline-eg .picline-step-grid.picline-eg-steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 782px) { .picline-eg .picline-step-grid.picline-eg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } }
.picline-eg-ablauf .picline-inner > h2 + .picline-eg-steps { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
/* The front page keeps room for two title lines (#ablauf in picline.css); here every title fits on one line. */
#ablauf.picline-eg-ablauf .picline-step > h3 { min-height: 0; }

/* Closing line: phone and e-mail linked. */
.picline-eg-ablauf .picline-inner > .picline-eg-schluss { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid rgb(2 8 74 / 14%); font-size: 1.0625rem; line-height: 1.6; }
.picline-eg-schluss a { color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }

@media (min-width: 1024px) {
    .picline-eg-person > .picline-eg-name, .picline-eg-infos li, .picline-eg-ablauf .picline-inner > .picline-eg-schluss { font-size: calc(17px / .9); }
    .picline-eg-person > .picline-eg-name strong { font-size: calc(19px / .9); }
    .picline-eg-ohne-js { font-size: calc(16px / .9); }
}

/* Since 03.10.2026 (privacy): no embedded calendar, the card holds one large button that opens Cal.com in a new tab. */
.picline-eg-kalender:has(.picline-eg-buchen) { display: flex; align-items: center; justify-content: center; min-height: 0; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem); }
.picline-eg-buchen { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; text-align: center; }
.picline-eg-buchen > p { margin: 0; }
.picline-eg-buchen .picline-eg-fallback-knopf { box-sizing: border-box; min-height: 60px; padding: 1rem 2.25rem; font-size: 1.125rem; }
.picline-eg-buchen-hinweis { font-size: 1rem; line-height: 1.5; color: #02084a; opacity: .8; }
@media (max-width: 480px) { .picline-eg-buchen-knopf, .picline-eg-buchen .picline-eg-fallback-knopf { width: 100%; box-sizing: border-box; } }
/* Since 03.10.2026 midday (mode «klick»): box with a short text and the yellow button «Kalender anzeigen»; the click
   loads the Cal.com calendar into the card. Below it, small, the link that opens Cal.com in a new tab. */
.picline-eg-kalender:has(.picline-eg-klick) { min-height: 0; padding: 0; overflow: hidden; }
.picline-eg-start { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem); text-align: center; }
.picline-eg-start[hidden], .picline-eg-cal[hidden] { display: none; }
.picline-eg-start > p { margin: 0; }
.picline-eg-kalender .picline-eg-start-text { max-width: 30em; font-size: 1.125rem; line-height: 1.5; color: #02084a !important; }
.picline-eg-start-knopf { box-sizing: border-box; min-height: 60px; padding: 1rem 2.25rem; font: inherit; font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.picline-eg-cal:focus { outline: none; }
.picline-eg-kalender .picline-eg-ausweich { margin: 0; padding: .875rem clamp(1rem, 3vw, 1.5rem); border-top: 1px solid #E3E6F2; background: #f6f7fc; font-size: .9375rem; line-height: 1.5; text-align: center; color: #02084a !important; }
.picline-eg-ausweich a { color: #02084a; font-weight: 700; text-decoration: underline; text-decoration-color: #F7E229; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.picline-eg-ausweich a:focus-visible { outline: 3px solid #F7E229; outline-offset: 3px; }
@media (min-width: 1024px) { .picline-eg-kalender .picline-eg-ausweich { font-size: calc(15px / .9); } }
@media (max-width: 480px) { .picline-eg-start-aktion, .picline-eg-start-knopf { width: 100%; } }

/* Info lines (03.10.2026 night): «Telefon, Video oder bei Dir vor Ort» takes two lines on phones; balanced, so no
   single word stands alone on the second line. */
.picline-eg-infos li { text-wrap: balance; }