/* Öffentliche Seiten von fallpraesentationen.de (Startseite, Kontakt, Rechtliches).
   Farbsystem nach Befund-/Planungsnotation: Blau = Befund, Rot = Planung. */

@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/fira/FiraSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/fira/FiraSans-Italic.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fira/FiraSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fira/FiraSans-SemiBold.woff2") format("woff2"); }

:root {
    --ink: #17222d;
    --ink-hover: #2c3a48;
    --on-ink: #ffffff;
    --muted: #55626f;
    --paper: #ffffff;
    --surface: #f1f4f7;
    --line: #d3dae1;
    --control-line: #7d8996;
    --blue: #1c64c8;
    --red: #c8102e;
    --focus-glow: rgba(28, 100, 200, .2);
    --wrap: 1120px;
    --gutter: 24px;
    --radius: 6px;
    color-scheme: light;
}

/* Dunkles Design: folgt der Systemeinstellung, außer es wurde über den Umschalter
   ausdrücklich „hell“ gewählt (data-theme="light"); data-theme="dark" erzwingt es. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #e6ecf2;
        --ink-hover: #c3ced9;
        --on-ink: #0f161d;
        --muted: #a4b1be;
        --paper: #0f161d;
        --surface: #17212b;
        --line: #2f3c49;
        --control-line: #66768a;
        --blue: #7cb0ff;
        --red: #ff7d8d;
        --focus-glow: rgba(124, 176, 255, .28);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --ink: #e6ecf2;
    --ink-hover: #c3ced9;
    --on-ink: #0f161d;
    --muted: #a4b1be;
    --paper: #0f161d;
    --surface: #17212b;
    --line: #2f3c49;
    --control-line: #66768a;
    --blue: #7cb0ff;
    --red: #ff7d8d;
    --focus-glow: rgba(124, 176, 255, .28);
    color-scheme: dark;
}

/* Bootstrap 3 setzt html auf 10px – für diese Seiten zurück auf Browser-Standard */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body.fp {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    font-feature-settings: "kern", "liga";
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.fp > main { flex: 1 0 auto; }

.fp h1, .fp h2, .fp h3 { font-family: inherit; color: var(--ink); font-weight: 600; margin: 0; }
.fp h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.015em; }
.fp h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); line-height: 1.2; letter-spacing: -0.01em; }
.fp h3 { font-size: 1.1875rem; line-height: 1.3; }
.fp p { margin: 0 0 1em; }
.fp a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fp a:hover { color: var(--ink); }
.fp :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.fp-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.fp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fp-skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--ink); color: var(--on-ink) !important; padding: 8px 14px; border-radius: var(--radius); }
.fp-skip:focus { left: 8px; }
.fp-blue { color: var(--blue); font-weight: 500; }
.fp-red { color: var(--red); font-weight: 500; }

/* Buttons */
.fp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 10px 20px;
    border: 1px solid var(--ink); border-radius: var(--radius);
    background: var(--ink); color: var(--on-ink) !important;
    font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.fp-btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); text-decoration: none; }
.fp-btn--quiet { background: transparent; color: var(--ink) !important; border-color: var(--line); }
.fp-btn--quiet:hover { background: var(--surface); border-color: var(--ink); }
.fp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* Kopfzeile */
.fp-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.fp-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.fp-logo { font-weight: 600; font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; }
.fp-logo__fall { color: var(--blue); }
.fp-logo__rest { color: var(--red); }
.fp-nav ul { display: flex; align-items: center; gap: 8px 24px; margin: 0; padding: 0; list-style: none; float: none; }
.fp-nav li { float: none; }
.fp-nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.fp-nav a:not(.fp-btn):hover { color: var(--blue); }
.fp-nav .fp-btn { min-height: 40px; padding: 8px 16px; }

/* Kopfbereich mit Zahnschema */
.fp-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); }
.fp-hero__text { max-width: 40rem; }
.fp-hero h1 { margin-bottom: 20px; }
.fp-lead { font-size: 1.1875rem; color: var(--muted); max-width: 36em; margin-bottom: 28px !important; }

.fp-chart { margin: clamp(40px, 5vw, 56px) 0 0; }
.fp-chart__grid {
    --label: 76px;
    display: grid;
    grid-template-columns: var(--label) repeat(16, minmax(0, 1fr));
    font-variant-numeric: tabular-nums lining-nums;
}
.fp-chart__label {
    display: flex; align-items: center;
    font-size: .8125rem; color: var(--muted);
}
.fp-chart__label--plan { color: var(--red); }
.fp-chart__label--befund { color: var(--blue); }
.fp-short { display: none; }

.fp-chart__cell {
    position: relative; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.0625rem;
}
.fp-chart__cell abbr { border: 0; text-decoration: none; cursor: help; }
.fp-chart__cell--befund { color: var(--blue); font-weight: 500; }
.fp-chart__cell--plan { color: var(--red); font-weight: 600; }

.fp-chart__tooth {
    height: 52px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); margin-left: -1px;
    font-size: 1rem; font-weight: 500; background: var(--paper);
}
.fp-chart__tooth--oben { border-radius: 0 0 12px 12px; border-bottom-color: var(--ink); }
.fp-chart__tooth--unten { border-radius: 12px 12px 0 0; border-top-color: var(--ink); margin-top: 6px; }
.fp-chart__tooth.is-missing {
    color: var(--muted); font-weight: 400;
    background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--paper) 6px 12px);
}
/* Mittellinie zwischen den Quadranten */
.fp-chart__cell--mid { box-shadow: inset 2px 0 0 var(--ink); }
.fp-chart__cell--befund.fp-chart__cell--mid, .fp-chart__cell--plan.fp-chart__cell--mid { box-shadow: inset 2px 0 0 var(--line); }

/* Brücke 25–27: rote Spange unter den Planungskürzeln */
.fp-chart__cell--bridge::before {
    content: ""; position: absolute; left: -1px; right: -1px; bottom: 3px; height: 3px;
    background: var(--red); transform-origin: left center;
}
.fp-chart__cell--bridge.is-start::before { left: 50%; }
.fp-chart__cell--bridge.is-end::before { right: 50%; }

.fp-chart figcaption { margin-top: 18px; font-size: .9375rem; color: var(--muted); max-width: 46em; }

/* Ein einziger Moment Bewegung: die Planung wird nach dem Laden eingezeichnet */
@media (prefers-reduced-motion: no-preference) {
    .fp-chart__cell--plan abbr { animation: fp-ink .4s ease-out both; animation-delay: .9s; }
    .fp-chart__cell--bridge::before { animation: fp-draw .25s linear both; animation-delay: .45s; }
    .fp-chart__cell--bridge:not(.is-start)::before { animation-delay: .6s; }
    .fp-chart__cell--bridge.is-end::before { animation-delay: .75s; }
}
@keyframes fp-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fp-ink { from { opacity: 0; } to { opacity: 1; } }

/* Abschnitte */
.fp-section { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.fp-section--surface { background: var(--surface); border-top: 0; }

.fp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; align-items: start; }
.fp-split__head { position: sticky; top: 32px; }
.fp-split__head h2 { margin-bottom: 16px; }
.fp-split__head p { color: var(--muted); max-width: 30em; }

.fp-steps { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.fp-steps li {
    counter-increment: schritt;
    display: grid; grid-template-columns: 44px 1fr; column-gap: 8px;
    padding: 20px 0; border-top: 1px solid var(--line);
}
.fp-steps li:first-child { border-top: 0; padding-top: 4px; }
.fp-steps li::before {
    content: counter(schritt);
    grid-row: span 2;
    font-weight: 600; font-size: 1.1875rem; line-height: 1.3; color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.fp-steps h3 { margin-bottom: 6px; }
.fp-steps p { margin: 0; color: var(--muted); max-width: 38em; }

.fp-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.fp-group { border-top: 2px solid var(--ink); padding-top: 20px; }
.fp-group h3 { margin-bottom: 10px; }
.fp-group p { margin: 0; color: var(--muted); }

.fp-cta__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 64px; flex-wrap: wrap; }
.fp-cta__inner > div { max-width: 36rem; }
.fp-cta h2 { margin-bottom: 12px; }
.fp-cta p { color: var(--muted); }
.fp-cta .fp-actions { margin-bottom: 1em; }

/* Unterseiten (Kontakt, Impressum, Datenschutz, Nutzungsbedingungen) */
.fp-page { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); min-height: 50vh; }
.fp-page__title { margin-bottom: 32px !important; }
.fp-page .container { width: auto; max-width: none; padding: 0; }
.fp-page .section-big, .fp-page .about-area { padding: 0; }
.fp-page h2 { margin: 1.6em 0 .5em; font-size: 1.375rem; }
.fp-page h2:first-child, .fp-page .row > :first-child > h2:first-child { margin-top: 0; }
/* leere Einrückungsspalten der alten Vorlagen ausblenden */
.fp-page .col-md-2:empty { display: none; }
.fp-page .col-md-2:empty + .col-md-10 { width: 100%; }
.fp-page h3, .fp-page h4 { margin: 1.4em 0 .4em; font-weight: 600; }
.fp-page p, .fp-page li { max-width: 46em; }
.fp-page .form-control { height: auto; min-height: 44px; font-size: 1rem; border-color: var(--line); border-radius: var(--radius); box-shadow: none; }
.fp-page .form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus-glow); }
.fp-page .btn, .fp-page button[type=submit] { min-height: 44px; padding: 10px 20px; border-radius: var(--radius); background: var(--ink); border: 1px solid var(--ink); color: var(--on-ink); font-weight: 500; }
.fp-page .btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }

/* Fußzeile */
.fp-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 40px 0; font-size: .9375rem; color: var(--muted); }
.fp-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 8px 48px; align-items: start; }
.fp-footer__contact { display: flex; flex-wrap: wrap; gap: 0 48px; }
.fp-footer__contact strong { color: var(--ink); font-weight: 500; }
.fp-footer a { color: var(--ink); }
.fp-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fp-footer__copy { grid-column: 1 / -1; margin: 0 !important; }

/* Tablet */
@media (max-width: 900px) {
    .fp-split { grid-template-columns: 1fr; }
    .fp-split__head { position: static; }
    .fp-groups { grid-template-columns: 1fr 1fr; }
    .fp-footer__inner { grid-template-columns: 1fr; }
}

/* Smartphone */
@media (max-width: 600px) {
    :root { --gutter: 16px; }
    body.fp { font-size: 1rem; }
    .fp-header__inner { min-height: 60px; }
    .fp-logo { font-size: .9375rem; letter-spacing: .04em; }
    .fp-nav ul { gap: 14px; }
    .fp-nav__wide { display: none !important; }
    .fp-nav .fp-btn { min-height: 38px; padding: 6px 12px; font-size: .9375rem; }
    .fp-lead { font-size: 1.0625rem; }
    .fp-actions .fp-btn { width: 100%; }

    .fp-chart__grid { --label: 24px; }
    .fp-long { display: none; }
    .fp-short { display: inline; }
    .fp-chart__label { font-size: .75rem; }
    .fp-chart__cell { height: 28px; font-size: .875rem; }
    .fp-chart__tooth { height: 40px; font-size: .75rem; font-weight: 400; letter-spacing: -0.02em; }
    .fp-chart__tooth--oben { border-radius: 0 0 7px 7px; }
    .fp-chart__tooth--unten { border-radius: 7px 7px 0 0; }
    .fp-chart__cell--bridge::before { height: 2px; bottom: 2px; }

    .fp-groups { grid-template-columns: 1fr; gap: 32px; }
    .fp-steps li { grid-template-columns: 32px 1fr; }
    .fp-footer__contact { flex-direction: column; gap: 0; }
}

/* Sprachwahl: natives Auswahlfeld, kompakt als „DE ▾“ dargestellt;
   das unsichtbare <select> liegt darüber und öffnet die Liste mit allen Sprachnamen */
.fp-langselect form { position: relative; margin: 0; }
.fp-langselect__code {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink); font-weight: 500; font-size: .9375rem; pointer-events: none;
}
.fp-langselect__code::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.fp-langselect select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 16px;
}
.fp-langselect form:hover .fp-langselect__code { border-color: var(--ink); }
.fp-langselect select:focus-visible + noscript, .fp-langselect form:focus-within .fp-langselect__code { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 600px) {
    .fp-nav li:has(> a[href*="kontakt"]) { display: none; }
    .fp-langselect__code { height: 38px; padding: 0 10px; }
}
.fp-nav .fp-btn { white-space: nowrap; }

/* Sprachwahl in der Fußzeile */
.fp-lang { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
.fp-lang ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fp-lang a { color: var(--muted); text-decoration: none; }
.fp-lang a:hover { color: var(--ink); text-decoration: underline; }
.fp-lang a[aria-current] { color: var(--ink); font-weight: 600; }

/* sehr schmale Smartphones */
@media (max-width: 380px) {
    .fp-header__inner { gap: 8px; }
    .fp-nav ul { gap: 8px; }
    .fp-logo { font-size: .8125rem; letter-spacing: .02em; }
    .fp-nav .fp-btn { padding: 6px 10px; }
}

/* Formulare und Tabellen der Unterseiten (Bootstrap-Grundfarben auf die Farbwerte umstellen) */
.fp-page .form-control { background: var(--paper); color: var(--ink); }
.fp-page .form-control::placeholder { color: var(--muted); opacity: 1; }
.fp-page label, .fp-page .control-label { color: var(--ink); }
.fp-page .help-block, .fp-page .text-muted { color: var(--muted); }
.fp-page .table { color: var(--ink); background: transparent; }
.fp-page .table > thead > tr > th, .fp-page .table > tbody > tr > td { border-color: var(--line); }
.fp-page .table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface); }
.fp-page .alert-success { background: var(--surface); border-color: var(--line); color: var(--ink); }
.fp-page .alert-danger { background: var(--surface); border-color: var(--red); color: var(--ink); }
.fp-page hr { border-top-color: var(--line); }
.fp-page .has-error .form-control { border-color: var(--red); }
.fp-page .has-error .help-block, .fp-page .has-error .control-label { color: var(--red); }

/* Umschalter hell/dunkel */
.fp-theme {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: transparent; color: var(--ink); cursor: pointer;
}
.fp-theme:hover { border-color: var(--ink); }
.fp-theme svg { width: 18px; height: 18px; }
.fp-theme .fp-theme__sun { display: none; }
.fp-theme[aria-pressed="true"] .fp-theme__sun { display: block; }
.fp-theme[aria-pressed="true"] .fp-theme__moon { display: none; }
@media (max-width: 600px) { .fp-theme { width: 38px; height: 38px; } }
@media (max-width: 380px) { .fp-theme { width: 34px; } }

/* schmale Smartphones: Platz für Sprachwahl, Hell/Dunkel und Anmelden in einer Zeile */
@media (max-width: 440px) {
    .fp-header__inner { gap: 8px; }
    .fp-nav ul { gap: 8px; }
    .fp-logo { font-size: .8125rem; letter-spacing: .02em; }
    .fp-nav .fp-btn { padding: 6px 10px; }
    .fp-theme { width: 36px; }
}
@media (max-width: 359px) {
    .fp-header__inner { gap: 6px; }
    .fp-nav ul { gap: 6px; }
    .fp-logo { font-size: .75rem; letter-spacing: .01em; }
    .fp-langselect__code { padding: 0 7px; gap: 4px; }
    .fp-theme { width: 32px; }
    .fp-nav .fp-btn { padding: 6px 8px; font-size: .875rem; }
}

/* Rahmen von Bedienelementen mit ausreichendem Kontrast (WCAG 1.4.11) */
.fp-page .form-control, .fp-langselect__code, .fp-theme, .fp-btn--quiet { border-color: var(--control-line); }