/* Branchen-Landingpage Gebäudereinigung */

.branche-page {
    --branch-grid: rgba(103, 232, 249, .075);
    --branch-panel: #0b1931;
    --branch-panel-2: #10213f;
}

/* Kompaktere Dramaturgie mit sichtbaren Flächenwechseln */
.branche-page .branch-section { padding: 70px 0; }
.branche-page .branch-section .section-heading { margin-bottom: 30px; }
.branche-page .branch-section .section-heading h2 { font-size: clamp(2.15rem, 4vw, 3.8rem); }
.branche-page .branch-problem { border-bottom: 1px solid var(--line); background: #f7f9fc; }
.branche-page .branch-morning { position: relative; overflow: hidden; color: var(--white); background: var(--navy-950); }
.branche-page .branch-morning::before { position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: linear-gradient(var(--branch-grid) 1px, transparent 1px), linear-gradient(90deg, var(--branch-grid) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, #000, transparent 90%); content: ""; }
.branche-page .branch-morning .container { position: relative; }
.branche-page .branch-morning .section-heading h2 { color: var(--white); }
.branche-page .branch-morning .section-heading > p { color: #aebdd2; }
.branche-page .branch-division { background: var(--white); }
.branche-page .branch-pricing { border-block: 1px solid var(--line); background: #eef3f8; }
.branche-page .branch-start { color: var(--white); background: linear-gradient(135deg, #071127, #102446); }
.branche-page .branch-start .section-heading h2 { color: var(--white); }
.branche-page .branch-faq-section { background: var(--white); }

/* Hero: Aussage links, laufendes Produkt rechts */
.branche-page .hero { padding: 48px 0 56px; }
.branche-hero-layout { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 58px; }
.branche-page .hero-copy h1 { max-width: 780px; margin-top: 10px; font-size: clamp(2.75rem, 5vw, 4.8rem); line-height: .96; }
.branche-page .hero-lead { max-width: 690px; }
.branche-page .hero-actions { margin: 24px 0 18px; }
.branche-page .hero-proof { max-width: 720px; margin: 0; color: #9fb0c9; font-size: .79rem; line-height: 1.55; }

.night-run { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; color: #dce7f3; background: rgba(5, 15, 32, .86); box-shadow: 0 34px 80px rgba(0,0,0,.32); }
.night-run-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.1); padding: 0 18px; font-family: "SFMono-Regular", Consolas, monospace; font-size: .68rem; text-transform: uppercase; }
.night-run-head p { display: flex; align-items: center; gap: 9px; margin: 0; }
.night-run-head p > span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 0 5px rgba(6,182,212,.13); }
.night-run-head small { color: #7187a2; }
.night-run-head em { color: #7890ab; font-style: normal; letter-spacing: .08em; }
.night-inbox { display: grid; gap: 3px; margin: 16px 18px 10px; border: 1px solid rgba(103,232,249,.14); border-radius: 11px; padding: 13px 15px; background: rgba(6,182,212,.055); }
.night-inbox span { color: var(--cyan-300); font-family: "SFMono-Regular", Consolas, monospace; font-size: .59rem; font-weight: 800; letter-spacing: .12em; }
.night-inbox strong { font-size: .9rem; }
.night-inbox small { color: #8498b2; }
.night-run-steps { display: grid; gap: 2px; margin: 0; padding: 0 18px; list-style: none; }
.night-run-steps li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; border-left: 2px solid #243650; padding: 8px 10px; background: rgba(255,255,255,.025); transition: border-color .2s ease, background .2s ease; }
.night-run-steps li > span { color: #667b96; font-family: "SFMono-Regular", Consolas, monospace; font-size: .66rem; }
.night-run-steps li p { display: grid; margin: 0; line-height: 1.28; }
.night-run-steps li b { font-size: .79rem; }
.night-run-steps li small { color: #788ba3; font-size: .67rem; }
.night-run-steps li i { color: #667b96; font-family: "SFMono-Regular", Consolas, monospace; font-size: .6rem; font-style: normal; }
.night-run-steps li.is-running { border-left-color: var(--cyan-500); background: rgba(6,182,212,.08); }
.night-run-steps li.is-running i { color: var(--cyan-300); }
.night-run-steps li.is-done { border-left-color: var(--success); }
.night-run-steps li.is-done i { color: #58d7a7; }
.night-run-result { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin: 12px 18px; border: 1px dashed #30435e; border-radius: 10px; padding: 11px 13px; }
.night-run-result > span { color: #6f849f; font-family: "SFMono-Regular", Consolas, monospace; font-size: .56rem; font-weight: 800; letter-spacing: .1em; }
.night-run-result p { display: grid; margin: 0; line-height: 1.3; }
.night-run-result b { font-size: .77rem; }
.night-run-result small { color: #71869f; font-size: .65rem; }
.night-run-result.is-ready { border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.07); }
.night-run-result.is-ready > span { color: #58d7a7; }
.night-run-button { width: calc(100% - 36px); margin: 0 18px 18px; border: 0; border-radius: 10px; padding: 12px 16px; color: #061427; background: var(--cyan-300); font-weight: 850; }
.night-run-button span { margin-left: 8px; }
.night-run-button:disabled { cursor: wait; }

/* Vorher/nachher */
.split-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.split-card { padding: 24px 27px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.split-card.dark { border: 0; color: #e7edf8; background: var(--navy-900); box-shadow: 0 22px 55px rgba(7,17,39,.18); }
.split-card h3 { margin: 0 0 13px; font-size: 1.05rem; }
.split-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.split-card li { position: relative; padding-left: 25px; font-size: .9rem; }
.split-card li::before { position: absolute; top: 0; left: 0; color: var(--success); font-weight: 800; content: "✓"; }
.split-card.dark li::before { color: var(--cyan-300); }

/* Interaktives Morgenbriefing */
.morning-workbench { display: grid; overflow: hidden; grid-template-columns: 350px 1fr; border: 1px solid #263b59; border-radius: 18px; background: #fff; box-shadow: 0 34px 80px rgba(0,0,0,.28); }
.morning-inbox { padding: 18px; background: var(--branch-panel); }
.morning-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #263b59; padding: 0 3px 13px; font-family: "SFMono-Regular", Consolas, monospace; font-size: .64rem; }
.morning-inbox-head span { color: #7288a3; }
.morning-inbox-head b { color: var(--cyan-300); }
.morning-tabs { display: grid; gap: 7px; margin-top: 12px; }
.morning-tabs button { position: relative; display: grid; gap: 2px; border: 1px solid transparent; border-radius: 11px; padding: 13px 38px 13px 14px; color: #dbe7f3; background: transparent; text-align: left; }
.morning-tabs button:hover { background: rgba(255,255,255,.045); }
.morning-tabs button[aria-selected="true"] { border-color: #355071; background: var(--branch-panel-2); }
.morning-tabs small { color: #7086a0; font-family: "SFMono-Regular", Consolas, monospace; font-size: .61rem; }
.morning-tabs strong { font-size: .82rem; }
.morning-tabs em { color: #8ea2bb; font-size: .66rem; font-style: normal; }
.case-dot { position: absolute; top: 17px; right: 14px; width: 8px; height: 8px; border-radius: 50%; }
.case-dot.high { background: var(--cyan-500); box-shadow: 0 0 0 4px rgba(6,182,212,.12); }
.case-dot.medium { background: #e1a546; box-shadow: 0 0 0 4px rgba(225,165,70,.12); }
.case-dot.low { background: #8295ae; box-shadow: 0 0 0 4px rgba(130,149,174,.12); }
.morning-inbox > p { margin: 15px 2px 0; color: #71869f; font-family: "SFMono-Regular", Consolas, monospace; font-size: .61rem; }
.morning-inbox > p span { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--success); }
.morning-stage { min-height: 420px; padding: 32px 34px; color: var(--ink); background: var(--white); }
.morning-stage article { height: 100%; }
.case-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.case-stage-head small { color: #8190a3; font-family: "SFMono-Regular", Consolas, monospace; font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.morning-stage h3 { margin: 7px 0 10px; color: var(--navy-900); font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.08; letter-spacing: -.035em; }
.morning-stage article > p { max-width: 720px; margin: 0; color: var(--muted); }
.case-route { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.case-route span { position: relative; padding: 13px 12px 13px 28px; color: #657286; font-size: .68rem; font-weight: 700; }
.case-route span + span { border-left: 1px solid var(--line); }
.case-route span::before { position: absolute; top: 17px; left: 12px; width: 7px; height: 7px; border-radius: 50%; background: #aab6c5; content: ""; }
.case-route span.done::before { background: var(--success); }
.case-output { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; border: 1px solid #cfdae7; border-radius: 12px; padding: 15px 17px; background: linear-gradient(135deg, #f8fbff, #eef5fb); }
.case-output > span { color: var(--blue-600); font-family: "SFMono-Regular", Consolas, monospace; font-size: .58rem; font-weight: 800; letter-spacing: .1em; }
.case-output p { display: grid; min-width: 0; margin: 0; line-height: 1.35; }
.case-output b { overflow: hidden; color: var(--navy-900); font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.case-output small { color: var(--muted); font-size: .66rem; }
.case-output em { border-radius: 7px; padding: 6px 8px; color: var(--white); background: var(--blue-600); font-size: .66rem; font-style: normal; font-weight: 800; }
.morning-action { display: inline-block; margin-top: 18px; border-radius: 9px; padding: 8px 12px; color: var(--navy-800); background: #edf2f7; font-size: .75rem; font-weight: 700; }
.prio-badge { display: inline-block; margin: 0; border-radius: 999px; padding: 5px 11px; font-size: .69rem; font-weight: 750; }
.prio-badge.hoch { color: #fff; background: var(--blue-600); }
.prio-badge.mittel { border: 1px solid #ecd9b5; color: var(--warning); background: #fdf3e2; }
.prio-badge.gering { border: 1px solid var(--line); color: var(--muted); background: var(--soft); }
.prio-note { max-width: 820px; margin: 22px auto 0; border: 1px solid #2b405e; border-radius: 12px; padding: 14px 19px; color: #91a4bd; background: rgba(255,255,255,.035); text-align: center; }
.prio-note strong { color: #e2ebf4; }
.branch-morning .centered-actions { margin: 18px 0 0; }
.branch-morning .button.secondary { border-color: #3d5778; background: rgba(255,255,255,.06); }

/* Investition */
.price-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.price-box { min-height: 195px; border: 1px solid var(--line); border-radius: 16px; padding: 24px 25px; background: var(--white); text-align: left; }
.price-box:first-child { border-color: #1b3457; color: var(--white); background: var(--navy-900); box-shadow: 0 20px 45px rgba(7,17,39,.18); }
.price-box:last-child { border-color: #b9dded; background: #effafd; }
.price-box strong { display: block; color: var(--navy-900); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.08; }
.price-box:first-child strong { color: var(--white); }
.price-box span { display: block; margin-top: 10px; color: var(--muted); font-size: .82rem; }
.price-box:first-child span { color: #aebdd2; }

/* Start und FAQ */
.step-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: schritt; }
.step-box { position: relative; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; padding: 23px; background: rgba(255,255,255,.05); counter-increment: schritt; }
.step-box::before { display: block; margin-bottom: 9px; color: var(--cyan-300); font-family: "SFMono-Regular", Consolas, monospace; font-size: .68rem; font-weight: 800; letter-spacing: .12em; content: counter(schritt, decimal-leading-zero); }
.step-box h3 { margin: 0 0 7px; color: var(--white); font-size: .95rem; }
.step-box p { margin: 0; color: #9fb0c9; font-size: .84rem; }
.branche-faq { display: grid; max-width: 860px; gap: 9px; margin: 0 auto; }
.branche-faq details { border: 1px solid var(--line); border-radius: 12px; padding: 3px 17px; background: #f9fbfd; }
.branche-faq summary { padding: 12px 0; color: var(--navy-900); cursor: pointer; font-weight: 700; }
.branche-faq p { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }

@media (max-width: 1000px) {
    .branche-hero-layout { grid-template-columns: 1fr; gap: 34px; }
    .branche-page .hero-copy { max-width: 780px; }
    .night-run { width: min(100%, 720px); }
    .morning-workbench { grid-template-columns: 300px 1fr; }
    .case-route { grid-template-columns: repeat(2, 1fr); }
    .case-route span:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
    .case-route span:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 780px) {
    .branche-page .branch-section { padding: 52px 0; }
    .branche-page .branch-section .section-heading { margin-bottom: 24px; }
    .branche-page .hero { padding: 38px 0 44px; }
    .branche-page .hero-copy h1 { font-size: clamp(2.6rem, 12vw, 4.2rem); }
    .split-two, .price-strip, .step-row { grid-template-columns: 1fr; }
    .morning-workbench { grid-template-columns: 1fr; }
    .morning-inbox { padding: 14px; }
    .morning-tabs { grid-template-columns: repeat(3, minmax(210px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
    .morning-inbox > p { display: none; }
    .morning-stage { min-height: 0; padding: 25px 20px; }
    .case-stage-head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .price-box { min-height: 0; }
}

@media (max-width: 520px) {
    .night-run-head em { display: none; }
    .night-run-steps li { grid-template-columns: 26px 1fr; }
    .night-run-steps li i { grid-column: 2; }
    .case-route { grid-template-columns: 1fr; }
    .case-route span + span { border-top: 1px solid var(--line); border-left: 0; }
    .case-output { grid-template-columns: auto 1fr; }
    .case-output em { grid-column: 2; width: fit-content; }
}

@media (prefers-reduced-motion: reduce) {
    .night-run-steps li { transition: none; }
}