/* ===== Entgeltunterlagen ab 2027 (Prefix: eu27-) =====
   Hero: Navy flat (#1e3a5f) nach CI-Regel fuer Pflicht- und Fristthemen.
   Akzent: #2563eb Blau. Leseseite: die Zitate tragen sie, das Layout haelt sich zurueck. */

/* ---------- Hero ---------- */
.eu27-hero {
    background: #1e3a5f;
    color: #fff;
    padding: 72px 0 64px;
}
/* 820px wie alle anderen Sektionen: eine durchgehende linke Kante vom Hero bis
   zum Sources-Block. 20px Versatz haetten nach Fehler ausgesehen, nicht nach Absicht. */
.eu27-hero .container { max-width: 820px; }
.eu27-eyebrow {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #93c5fd;
}
.eu27-hero h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}
.eu27-hero-sub {
    margin: 0 0 2rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #dbeafe;
}
.eu27-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ---------- Sektionen ---------- */
.eu27-sec {
    padding: 56px 0;
    border-bottom: 1px solid #f1f5f9;
}
.eu27-sec:nth-of-type(even) { background: #f8fafc; }
.eu27-sec .container { max-width: 820px; }
.eu27-sec h2 {
    margin: 0 0 1.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
    color: #1f2937;
}

/* ---------- Fliesstext ---------- */
.eu27-prose p {
    margin: 0 0 1.15rem;
    font-size: 1.02rem;
    line-height: 1.8;
    color: #4b5563;
}
.eu27-prose h3 {
    margin: 2.25rem 0 0.9rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
}
.eu27-prose ul {
    margin: 0 0 1.4rem;
    padding-left: 1.35rem;
}
.eu27-prose li {
    margin-bottom: 0.65rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #4b5563;
}
.eu27-prose strong { color: #1f2937; font-weight: 700; }
.eu27-prose a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.eu27-prose a:hover { color: #1e40af; }

/* ---------- Blockzitat: die Quelle ist das Argument, nicht wir ---------- */
.eu27-zitat {
    margin: 1.9rem 0;
    padding: 1.4rem 1.65rem;
    background: #fff;
    border-left: 4px solid #2563eb;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.eu27-zitat p {
    margin: 0 0 0.85rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #1f2937;
}
.eu27-zitat cite {
    display: block;
    font-size: 0.8rem;
    font-style: normal;
    color: #6b7280;
}
.eu27-zitat cite a { color: #2563eb; }

/* ---------- Wortlaut-Tabelle ---------- */
.eu27-prose table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 0.93rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.eu27-prose th {
    padding: 0.75rem 0.9rem;
    background: #f1f5f9;
    font-weight: 700;
    text-align: left;
    color: #1f2937;
    border-bottom: 1px solid #e5e7eb;
}
.eu27-prose td {
    padding: 0.75rem 0.9rem;
    line-height: 1.6;
    color: #4b5563;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.eu27-prose td:first-child {
    white-space: nowrap;
    font-weight: 700;
    color: #1f2937;
}
.eu27-prose tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.eu27-faq { padding: 56px 0; background: #f0f9ff; }
.eu27-faq .container { max-width: 820px; }
.eu27-faq h2 {
    margin: 0 0 1.75rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #1f2937;
}
.eu27-faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.eu27-faq-item {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    overflow: hidden;
}
.eu27-faq-item summary {
    padding: 1.1rem 1.35rem;
    min-height: 44px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #1f2937;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.eu27-faq-item summary::-webkit-details-marker { display: none; }
.eu27-faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.35rem;
    font-weight: 400;
    color: #2563eb;
}
.eu27-faq-item[open] summary::after { content: "\2212"; }
.eu27-faq-item[open] summary { border-bottom: 1px solid #eff6ff; }
.eu27-faq-a { padding: 1.1rem 1.35rem 1.35rem; }
.eu27-faq-a,
.eu27-faq-a p {
    font-size: 0.98rem;
    line-height: 1.8;
    color: #4b5563;
}
.eu27-faq-a strong { color: #1f2937; }
.eu27-faq-a a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- CTA ---------- */
.eu27-cta {
    padding: 64px 0;
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    color: #fff;
    text-align: center;
}
.eu27-cta .container { max-width: 720px; }
.eu27-cta h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff;
}
.eu27-cta p {
    margin: 0 0 1.75rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #dbeafe;
}

/* Sources-Block an die Lesespalte angleichen.
   Diese Seite verengt ihre Sektionen auf 820px, der globale .lk-sources-Container
   liegt bei 1200px und wuerde sonst breiter rauslaufen als alles darueber.
   Scope: page-eu27.css laedt nur auf dieser Seite, die anderen 28 lk-sources-Nutzer
   bleiben bei 1200px (dort ist der Seiten-Container auch 1200px). */
.lk-sources .container { max-width: 820px; }

/* ---------- Hinweisbaustein ---------- */
/* Sitzt in einem eigenen .container direkt in <main>. Der wird hier auf die
   Lesespalte verengt, damit der Kasten exakt auf der Kante der Sektionen steht
   (eigene max-width + margin:auto waeren 48px breiter als die Spalte). */
main > .container { max-width: 820px; }
.eu27-hinweis {
    margin: 3rem 0 4rem;
    padding: 1.25rem 1.5rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
}
.eu27-hinweis-label {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #92400e;
}
.eu27-hinweis p:last-child {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #4b5563;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .eu27-hero { padding: 52px 0 44px; }
    .eu27-sec, .eu27-faq { padding: 40px 0; }
    .eu27-cta { padding: 48px 0; }
    .eu27-hero-cta { flex-direction: column; align-items: stretch; }
    .eu27-hero-cta .btn,
    .eu27-hero-cta a,
    .eu27-hero-cta button { text-align: center; }
    .eu27-zitat { padding: 1.15rem 1.25rem; }
    /* Die Wortlaut-Tabelle darf scrollen, die Seite nicht */
    .eu27-prose table { display: block; overflow-x: auto; }
    .eu27-prose td:first-child { white-space: normal; min-width: 64px; }
}