/**
 * lotse-tools-style.css
 * 
 * Inhalts-Stylesheet für die Lotse-Wrapper-Pages (eigenanteil, pflegegeld,
 * pflegegrad-test, verhinderungspflege). Übernimmt das Design-System von
 * tools.pflegepur.com, damit der Inhaltsbereich zwischen nav.php/footer.php
 * dieselbe Stilsprache spricht wie das eingebettete Tool selbst.
 *
 * Pfad-Vorschlag: /assets/css/lotse-tools-style.css
 *
 * Stand: 26.04.2026
 */

/* ==========================================================
   Design-Tokens — 1:1 aus tools.pflegepur.com
   ========================================================== */
.lotse-tool-page {
    /* Color palette */
    --lt-ink:    #0b2540;
    --lt-ink2:   #3a4a5c;
    --lt-ink3:   #6b7c93;
    --lt-s:      #fff;
    --lt-s2:     #f8fafc;
    --lt-bg:     #f0f4f8;
    --lt-b:      #dde3ed;
    --lt-bs:     #e8edf5;

    --lt-navy:   #0b2540;
    --lt-mint:   #5eead4;

    --lt-purple:    #6d28d9;
    --lt-purple-l:  #f5f3ff;
    --lt-teal:      #0c8a7e;
    --lt-teal-l:    #e6f7f6;
    --lt-blue:      #1d5fd1;
    --lt-blue-l:    #eff6ff;
    --lt-amber:     #d97706;
    --lt-amber-l:   #fef3c7;
    --lt-green:     #10b981;
    --lt-green-l:   #d1fae5;
    --lt-red:       #dc2626;
    --lt-red-l:     #fef2f2;

    /* Geometry */
    --lt-r:      14px;
    --lt-r-sm:   8px;
    --lt-r-pill: 99px;
    --lt-shadow: 0 2px 16px rgba(11,37,64,.08);
    --lt-shadow-h: 0 4px 24px rgba(11,37,64,.12);
}

/* ==========================================================
   Page-Reset (nur innerhalb .lotse-tool-page)
   ========================================================== */
.lotse-tool-page,
.lotse-tool-page * {
    box-sizing: border-box;
}

.lotse-tool-page {
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
    color: var(--lt-ink);
    background: var(--lt-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding: 24px 24px 60px;
}

@media (max-width: 768px) {
    .lotse-tool-page { padding: 16px 16px 40px; }
}

.lotse-tool-page .lotse-shell {
    max-width: 1024px;
    margin: 0 auto;
}

/* ==========================================================
   Breadcrumbs — schlank, oberhalb des Hero
   ========================================================== */
.lotse-tool-page .lotse-bc {
    font-size: 12px;
    color: var(--lt-ink3);
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.lotse-tool-page .lotse-bc a {
    color: var(--lt-blue);
    text-decoration: none;
    transition: color .15s;
}
.lotse-tool-page .lotse-bc a:hover { color: var(--lt-navy); }
.lotse-tool-page .lotse-bc-sep {
    color: var(--lt-b);
    font-weight: 400;
}

/* ==========================================================
   Hero (Navy-Gradient-Intro mit Teal-em-Akzent)
   ========================================================== */
.lotse-tool-page .lotse-hero {
    background: linear-gradient(135deg,#0b2540 0%,#0d3354 60%,#0c4a44 100%);
    border-radius: var(--lt-r);
    padding: 28px 32px;
    margin-bottom: 20px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    box-shadow: var(--lt-shadow);
}

.lotse-tool-page .lotse-hero-l { flex: 1; min-width: 280px; }

.lotse-tool-page .lotse-hero h1 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: clamp(24px, 3.4vw, 34px);
    line-height: 1.15;
    color: white;
    margin: 0 0 8px;
}
.lotse-tool-page .lotse-hero h1 em {
    color: var(--lt-mint);
    font-style: normal;
}

.lotse-tool-page .lotse-hero p {
    font-size: 13px;
    color: rgba(255,255,255,.75);
    line-height: 1.6;
    max-width: 640px;
    margin: 0;
}

.lotse-tool-page .lotse-hero-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.lotse-tool-page .lotse-hero-stat {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    min-width: 100px;
}
.lotse-tool-page .lotse-hero-stat-v {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 22px;
    color: var(--lt-mint);
    line-height: 1;
}
.lotse-tool-page .lotse-hero-stat-l {
    font-size: 9px;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 4px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .lotse-tool-page .lotse-hero { padding: 22px; }
}

/* ==========================================================
   Iframe-Card (Tool wird hier eingebettet)
   ========================================================== */
.lotse-tool-page .lotse-frame-wrap {
    background: var(--lt-s);
    border: 1px solid var(--lt-bs);
    border-radius: var(--lt-r);
    overflow: hidden;
    box-shadow: var(--lt-shadow);
    margin-bottom: 20px;
}

.lotse-tool-page .lotse-frame {
    width: 100%;
    border: 0;
    display: block;
    min-height: 920px;
    transition: height .25s ease;
}

.lotse-tool-page .lotse-frame-fallback {
    padding: 48px 24px;
    text-align: center;
    color: var(--lt-ink3);
    font-size: 13px;
}
.lotse-tool-page .lotse-frame-fallback a {
    color: var(--lt-blue);
    font-weight: 700;
}

/* ==========================================================
   Notice-Cards (info-box / tip-box-Pattern, color-coded)
   ========================================================== */
.lotse-tool-page .lotse-notice {
    background: var(--lt-s);
    border: 1px solid var(--lt-bs);
    border-left-width: 4px;
    border-radius: var(--lt-r);
    padding: 18px 22px;
    margin-bottom: 14px;
    box-shadow: var(--lt-shadow);
}
.lotse-tool-page .lotse-notice h4 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.25;
    color: var(--lt-ink);
    margin: 0 0 8px;
}
.lotse-tool-page .lotse-notice p {
    font-size: 13.5px;
    color: var(--lt-ink2);
    line-height: 1.65;
    margin: 0 0 8px;
}
.lotse-tool-page .lotse-notice p:last-child { margin-bottom: 0; }
.lotse-tool-page .lotse-notice strong { color: var(--lt-ink); font-weight: 700; }
.lotse-tool-page .lotse-notice a { color: var(--lt-blue); font-weight: 600; text-decoration: none; }
.lotse-tool-page .lotse-notice a:hover { text-decoration: underline; }

.lotse-tool-page .lotse-notice.is-info  { border-left-color: var(--lt-blue);  }
.lotse-tool-page .lotse-notice.is-tip   { border-left-color: var(--lt-teal);  }
.lotse-tool-page .lotse-notice.is-warn  { border-left-color: var(--lt-amber); }
.lotse-tool-page .lotse-notice.is-success { border-left-color: var(--lt-green); }

/* Inline-Tabelle innerhalb einer Notice (für Pflegegeld-Übersicht) */
.lotse-tool-page .lotse-notice table {
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    border-collapse: collapse;
}
.lotse-tool-page .lotse-notice td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--lt-bs);
}
.lotse-tool-page .lotse-notice tr:last-child td { border-bottom: 0; }
.lotse-tool-page .lotse-notice td:first-child {
    font-weight: 700;
    color: var(--lt-ink);
}
.lotse-tool-page .lotse-notice td:last-child {
    text-align: right;
    color: var(--lt-ink2);
    font-variant-numeric: tabular-nums;
}

.lotse-tool-page .lotse-notice ul {
    margin: 8px 0 0;
    padding-left: 22px;
    font-size: 13.5px;
    color: var(--lt-ink2);
    line-height: 1.7;
}
.lotse-tool-page .lotse-notice li { margin-bottom: 4px; }

/* ==========================================================
   Datentabelle (Bundesland-Vergleich)
   ========================================================== */
.lotse-tool-page .lotse-section {
    background: var(--lt-s);
    border: 1px solid var(--lt-bs);
    border-radius: var(--lt-r);
    padding: 22px;
    margin: 28px 0;
    box-shadow: var(--lt-shadow);
}
.lotse-tool-page .lotse-section h2 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--lt-ink);
    margin: 0 0 14px;
}
.lotse-tool-page .lotse-section h2 em {
    color: var(--lt-teal);
    font-style: normal;
}

.lotse-tool-page .lotse-table-wrap { overflow-x: auto; }
.lotse-tool-page .lotse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.lotse-tool-page .lotse-table thead th {
    background: var(--lt-s2);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lt-ink3);
    border-bottom: 1px solid var(--lt-bs);
    white-space: nowrap;
}
.lotse-tool-page .lotse-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--lt-bs);
    color: var(--lt-ink2);
    font-variant-numeric: tabular-nums;
}
.lotse-tool-page .lotse-table tbody td:last-child {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 14px;
    color: var(--lt-ink);
    text-align: right;
}
.lotse-tool-page .lotse-table tbody tr:hover { background: var(--lt-s2); }
.lotse-tool-page .lotse-table tbody tr:last-child td {
    border-bottom: 0;
    background: var(--lt-blue-l);
    font-weight: 700;
}
.lotse-tool-page .lotse-table-source {
    font-size: 11px;
    color: var(--lt-ink3);
    margin-top: 10px;
}

/* ==========================================================
   FAQ-Akkordeon
   ========================================================== */
.lotse-tool-page .lotse-faq { margin: 28px 0; }
.lotse-tool-page .lotse-faq-head {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--lt-ink);
    margin: 0 0 14px;
}
.lotse-tool-page .lotse-faq-item {
    background: var(--lt-s);
    border: 1px solid var(--lt-bs);
    border-radius: var(--lt-r);
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: var(--lt-shadow);
    transition: border-color .15s;
}
.lotse-tool-page .lotse-faq-item:hover { border-color: var(--lt-b); }
.lotse-tool-page .lotse-faq-item.open { border-color: var(--lt-teal); }

.lotse-tool-page .lotse-faq-q {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 700;
    color: var(--lt-ink);
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    user-select: none;
}
.lotse-tool-page .lotse-faq-q:hover { background: var(--lt-s2); }

.lotse-tool-page .lotse-faq-arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lt-bg);
    color: var(--lt-ink3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: transform .25s, background .15s;
}
.lotse-tool-page .lotse-faq-item.open .lotse-faq-arrow {
    transform: rotate(180deg);
    background: var(--lt-teal-l);
    color: var(--lt-teal);
}

.lotse-tool-page .lotse-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease;
    padding: 0 20px;
    font-size: 13.5px;
    color: var(--lt-ink2);
    line-height: 1.7;
}
.lotse-tool-page .lotse-faq-item.open .lotse-faq-a {
    max-height: 800px;
    padding: 0 20px 18px;
}
.lotse-tool-page .lotse-faq-a a {
    color: var(--lt-blue);
    font-weight: 600;
    text-decoration: none;
}
.lotse-tool-page .lotse-faq-a a:hover { text-decoration: underline; }

/* ==========================================================
   Cross-Links — als k-card-ähnliche Tiles
   ========================================================== */
.lotse-tool-page .lotse-xlinks-head {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: 19px;
    color: var(--lt-ink);
    margin: 32px 0 14px;
}
.lotse-tool-page .lotse-xlinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.lotse-tool-page .lotse-xlink {
    background: var(--lt-s);
    border: 1px solid var(--lt-bs);
    border-radius: var(--lt-r);
    padding: 16px 18px;
    text-decoration: none;
    color: var(--lt-ink);
    transition: all .18s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--lt-shadow);
}
.lotse-tool-page .lotse-xlink:hover {
    border-color: var(--lt-blue);
    box-shadow: var(--lt-shadow-h);
    transform: translateY(-1px);
}
.lotse-tool-page .lotse-xlink-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--lt-blue-l);
    color: var(--lt-blue);
    flex-shrink: 0;
}
.lotse-tool-page .lotse-xlink-body { min-width: 0; flex: 1; }
.lotse-tool-page .lotse-xlink-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--lt-ink);
    line-height: 1.25;
    margin-bottom: 2px;
}
.lotse-tool-page .lotse-xlink-sub {
    font-size: 12px;
    color: var(--lt-ink3);
    line-height: 1.4;
}

/* Color-Varianten für Cross-Link-Icons (zur visuellen Diversifikation) */
.lotse-tool-page .lotse-xlink.is-teal   .lotse-xlink-icon { background: var(--lt-teal-l);   color: var(--lt-teal); }
.lotse-tool-page .lotse-xlink.is-amber  .lotse-xlink-icon { background: var(--lt-amber-l);  color: var(--lt-amber); }
.lotse-tool-page .lotse-xlink.is-purple .lotse-xlink-icon { background: var(--lt-purple-l); color: var(--lt-purple); }
.lotse-tool-page .lotse-xlink.is-green  .lotse-xlink-icon { background: var(--lt-green-l);  color: var(--lt-green); }

/* ==========================================================
   Body-Background-Fallback (nur wenn .lotse-tool-page in der Page)
   — vermeidet weißes Aufblitzen zwischen .header und .lotse-tool-page.
   :has()-Support: alle modernen Browser ab Q1 2024 (Chrome/Edge 105+,
   Safari 15.4+, Firefox 121+). Bei älteren greift .lotse-tool-page-eigener
   Background, dann sieht man nur den Header-untergrund — kein Crash.
   ========================================================== */
body:has(.lotse-tool-page) {
    background: #f0f4f8;
}