/* =========================================================
   PS19 Consulting · Unterseiten 2026
   Ergänzt start.css (wird davor geladen). Schrift bleibt Palatino.
   Illustrationen: Andrea Fischer, Fränkisch-Crumbach
   ========================================================= */

/* ---------- Kopf der Unterseiten ---------- */
.nav a.active { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }

.page-hero { padding: clamp(48px, 7vw, 100px) 0 clamp(40px, 6vw, 80px); }
.page-hero .hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
.page-hero h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.06; letter-spacing: -.4px; margin-bottom: 26px; }
.page-hero h1 em { color: var(--green); }
.page-hero .lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6; color: #3c423e; max-width: 34em; margin-bottom: 18px; }
.page-hero .intro { color: #3c423e; max-width: 36em; }
.page-hero .art { margin-right: var(--offset); }
.page-hero.plain .hero-grid { grid-template-columns: 1fr; }

/* Unternavigation der drei Leistungsseiten */
.subnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.subnav a {
    font-size: 14px; letter-spacing: .3px; color: var(--muted);
    border: 1px solid var(--line); padding: 7px 14px; background: #fff;
}
.subnav a:hover { border-color: var(--green); color: var(--green); }
.subnav a.active { border-color: var(--green); background: var(--green); color: #fff; }

/* ---------- Inhaltsflächen ---------- */
.page-section { padding: clamp(56px, 7vw, 100px) 0; border-top: 1px solid var(--line); }
.page-section.stone { border-top: 0; }
.page-section h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.2px; margin: 0 0 26px; }
.page-section h2 em { color: var(--green); }
.prose { max-width: 760px; }
.prose p { color: #3c423e; }
.prose .lead { font-size: 21px; line-height: 1.6; color: var(--ink); }

/* Text plus Bild daneben */
.split { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.split.flip { grid-template-columns: 4fr 7fr; }
.split.flip > .aside { order: -1; }
.split .aside { position: sticky; top: 120px; }
.split .aside .art { margin-right: var(--offset); }
.split.flip .aside .art { margin-right: 0; margin-left: var(--offset); }

/* ---------- Bausteine aus den bisherigen Seiten ---------- */
.formats { margin: 8px 0 0; border-top: 1px solid var(--line); }
.formats dt { font-size: 23px; line-height: 1.25; color: var(--ink); margin: 0; padding-top: 26px; }
.formats dd { margin: 10px 0 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); color: #3c423e; }
.formats dd .meta { display: block; font-size: 15px; font-style: italic; color: var(--green); margin-top: 10px; }

.case { border-left: 2px solid var(--green); padding: 4px 0 4px 26px; margin: 0 0 48px; }
.case:last-child { margin-bottom: 0; }
.case .case-org { font-size: 12.5px; text-transform: uppercase; letter-spacing: 2.2px; color: var(--brass); margin: 0 0 8px; }
.case h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; margin: 0 0 18px; }
.case p { color: #3c423e; }
.case-facts { display: grid; grid-template-columns: 130px 1fr; gap: 10px 22px; margin: 0 0 16px; font-size: 16.5px; }
.case-facts dt { font-style: italic; color: var(--green); margin: 0; }
.case-facts dd { margin: 0; color: #3c423e; }

.action-link { font-style: italic; font-size: 16.5px; color: var(--green); }
.action-link:hover { color: var(--ink); }
.ref-links { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.inline-link { text-decoration: underline; text-underline-offset: 3px; }
.note { font-size: 15px; font-style: italic; color: var(--muted); }

.motivation-list { list-style: none; padding: 0; margin: 10px 0 24px; border-top: 1px solid var(--line); }
.motivation-list li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); color: #2f3531; }
.motivation-list li::before { content: ""; position: absolute; left: 0; top: 27px; width: 14px; height: 1px; background: var(--brass); }

.micro-title { font-weight: normal; font-size: 12.5px; text-transform: uppercase; letter-spacing: 2.2px; color: var(--brass); margin: 34px 0 10px; }
.micro-title:first-of-type { margin-top: 0; }

.testimonial { margin: 0 0 40px; padding: 0 0 0 26px; border-left: 2px solid var(--green); }
.testimonial p { font-style: italic; font-size: 19px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; }
.testimonial-name, .testimonial cite { display: block; font-style: normal; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 56px; }

.intro-box { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--green); }
.intro-box summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative; font-size: 18px; }
.intro-box summary::-webkit-details-marker { display: none; }
.intro-box summary::after { content: "\25B8"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--green); transition: transform .2s; }
.intro-box[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.intro-box .intro-text { padding: 4px 20px 8px; border-top: 1px solid var(--line); }
.intro-box .intro-text p { color: #3c423e; font-size: 16.5px; margin-top: 14px; }

.field-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 2.2px; color: var(--green); margin: 30px 0 8px; }
.field-label:first-child { margin-top: 0; }

/* Kontaktkarten */
.cta-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 10px 0 24px; border-top: 1px solid var(--line); }
.cta-item { display: block; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
a.cta-item:hover .cta-value { color: var(--green); }
.cta-label { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: 2.2px; color: var(--brass); margin-bottom: 6px; }
.cta-value { display: block; font-size: 18px; line-height: 1.5; transition: color .2s; }

/* Badges (Mitgliedschaften) */
.tl-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-badge { border: 1px solid var(--green); color: var(--green); padding: 6px 16px; font-size: 15px; }
.tl-badge small { font-size: 15px; color: var(--muted); }

/* ---------- Zeitstrahl (Vita) ---------- */
.timeline { display: grid; grid-template-columns: 1fr 56px 1fr; row-gap: 14px; position: relative; margin: 8px 0; }
.tl-head { font-size: 12.5px; text-transform: uppercase; letter-spacing: 2.2px; margin: 0 0 6px; }
.tl-head.left { grid-column: 1; grid-row: 1; text-align: right; color: var(--green); }
.tl-head.right { grid-column: 3; grid-row: 1; color: #8a6a3b; }
.tl-spine { position: absolute; top: 34px; bottom: 0; left: calc(50% - 1px); width: 2px; background: var(--line); }
.tl-item { position: relative; background: #fff; border: 1px solid var(--line); padding: 11px 16px; font-size: 15.5px; line-height: 1.5; color: var(--muted); grid-row: calc(var(--row) + 1) / span var(--span, 1); }
.tl-item .tl-date { display: block; font-style: italic; color: var(--green); font-size: 14px; }
.tl-item .tl-title { display: block; color: var(--ink); font-size: 17px; }
.tl-item .tl-org { display: block; font-size: 14px; }
.tl-item.beruf { grid-column: 1; border-right: 3px solid var(--green); text-align: right; }
.tl-item.fort { grid-column: 3; border-left: 3px solid #8a6a3b; background: #fbf7f0; border-color: #eadfcb; border-left-color: #8a6a3b; }
.tl-item.fort .tl-date { color: #8a6a3b; }
.tl-item::after { content: ""; position: absolute; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--green); }
.tl-item.beruf::after { right: -35px; }
.tl-item.fort::after { left: -35px; border-color: #8a6a3b; }
.tl-item.now { border-color: var(--green); }
.tl-item.now::after { background: var(--green); animation: tl-pulse 2.4s ease-out infinite; }
@keyframes tl-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,93,78,.45); } 70% { box-shadow: 0 0 0 9px rgba(74,93,78,0); } 100% { box-shadow: 0 0 0 0 rgba(74,93,78,0); } }
.tl-item.copa { background: #eef1ee; border-top-color: transparent; border-bottom-color: transparent; }
.tl-item.copa.first { border-top-color: var(--line); }
.tl-item.copa.last { border-bottom-color: var(--line); }
.tl-tag { display: none; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: #8a6a3b; }
.tl-item.fort.minor { background: transparent; border-color: #efe7d8; border-left-color: #cdb894; padding: 7px 14px; font-size: 14px; line-height: 1.4; }
.tl-item.fort.minor .tl-title { color: var(--muted); font-size: 15px; }
.tl-item.fort.minor .tl-date { color: #a58b63; font-size: 13px; }
.tl-item.fort.minor::after { display: none; }
.tl-focus { display: block; font-size: 14px; font-style: italic; color: var(--green); margin-top: 3px; }
.tl-more { margin-top: 4px; }
.tl-more summary { cursor: pointer; list-style: none; color: var(--green); font-style: italic; font-size: 13.5px; }
.tl-more summary::-webkit-details-marker { display: none; }
.tl-more summary::before { content: "+ "; }
.tl-more[open] summary::before { content: "\2013  "; }
.tl-more p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tl-item.now::after { animation: none; } }

/* ---------- Fehlerseite ---------- */
.notfound { min-height: calc(100vh - 84px - 120px); display: flex; align-items: center; }
.notfound h1 { font-size: clamp(48px, 7vw, 96px); }
.notfound .code { font-size: 14px; letter-spacing: 3px; color: var(--brass); margin-bottom: 18px; display: block; }
.notfound .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .page-hero .hero-grid, .split, .split.flip { grid-template-columns: 1fr; }
    .page-hero .art, .split .aside .art { max-width: 460px; }
    .split .aside { position: static; }
    .split.flip > .aside { order: 0; }
    .split.flip .aside .art { margin: 0 var(--offset) 0 0; }
    .voices { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .case { padding-left: 18px; }
    .case-facts { grid-template-columns: 1fr; gap: 2px; }
    .case-facts dd { margin-bottom: 10px; }
    .cta-list { grid-template-columns: 1fr; }
    .timeline { grid-template-columns: 22px 1fr; column-gap: 12px; }
    .tl-head { display: none; }
    .tl-spine { left: 10px; top: 0; }
    .tl-item, .tl-item.beruf, .tl-item.fort { grid-column: 2; grid-row: auto; text-align: left; border-right: 1px solid var(--line); }
    .tl-item.beruf { border-left: 3px solid var(--green); }
    .tl-item.fort { border-right-color: #eadfcb; }
    .tl-item.beruf::after, .tl-item.fort::after { left: -30px; right: auto; }
    .tl-item.fort .tl-tag { display: block; }
    .tl-item.fort.minor::after { display: block; width: 8px; height: 8px; top: 13px; left: -29px; border-color: #cdb894; }
}

/* Leise Töne (29.10.2026) */
.page-hero { padding: clamp(56px, 9vw, 130px) 0 clamp(56px, 7vw, 100px); }
.page-hero h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.25; letter-spacing: .2px; }
.page-hero .lead { font-size: 19px; line-height: 1.7; }
.page-section { padding: clamp(80px, 10vw, 140px) 0; }
.page-section h2 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; letter-spacing: .2px; margin-bottom: 28px; }
.prose .lead { font-size: 19px; }
.formats dt { font-size: 20px; }
.case h3 { font-size: clamp(19px, 1.7vw, 23px); }
.testimonial p { font-size: 17.5px; }
.notfound h1 { font-size: clamp(32px, 3.8vw, 52px); }
.nav a.active { text-underline-offset: 6px; }

/* Rahmen für helle Bilder auf hellem Grund */
.art.framed img { box-shadow: 0 0 0 1px #cfcbc1; }