/* ==========================================================================
   Lokale Testfassung P10 (27.09.2026) – nur Mittelteil der Startseite.
   Ebenen: Übersicht (Dunkelgrün) → Ausgangslagen (hell getönt) → vier Leistungen (weiß)
   → Einzelne Leistungen im Detail (hell getönt) → Einordnung (weiß, Zertifizierung als grüne Karte).
   Nur vorhandene Farbwerte aus stil.css.
   ========================================================================== */

/* ---------- Übersicht ---------- */
.p10-uebersicht{background:var(--petrol);color:var(--auf-dunkel-1);padding-block:var(--a-9)}
.p10-ue-kopf{grid-column:2/12}
.p10-ue-kopf h2{color:#fff}
.p10-ue-text{margin-top:var(--a-4);font-size:1.1875rem;line-height:1.6;color:var(--auf-dunkel-3);max-width:60ch}
.p10-ue-liste{grid-column:2/14;list-style:none;margin:var(--a-7) 0 0;padding:0;border-top:1px solid var(--petrol-linie)}
.p10-ue-liste li{border-bottom:1px solid var(--petrol-linie)}
.p10-ue-liste a{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,auto) 32px;align-items:baseline;column-gap:var(--a-5);
  padding:var(--a-5) 0;text-decoration:none;color:#fff}
.p10-nr{font-family:var(--mono);font-size:.9375rem;letter-spacing:.06em;color:var(--bronze-hell)}
.p10-ue-titel{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.3125rem,2vw,1.75rem);line-height:1.2;hyphens:none;-webkit-hyphens:none}
.p10-ue-themen{font-size:1rem;line-height:1.4;color:var(--auf-dunkel-3);text-align:right;white-space:nowrap}
.p10-pfeil::after{content:"\2192";font-size:1.375rem;color:var(--bronze-hell);display:inline-block;transition:transform .2s var(--verlauf)}
.p10-ue-liste a:hover .p10-ue-titel,.p10-ue-liste a:focus-visible .p10-ue-titel{text-decoration:underline;text-decoration-color:var(--bronze-hell);text-underline-offset:6px;text-decoration-thickness:1px}
.p10-ue-liste a:hover .p10-pfeil::after{transform:translateX(4px)}
.p10-ue-kontakt{grid-column:2/14;margin-top:var(--a-7);display:flex;flex-wrap:wrap;align-items:center;gap:var(--a-4) var(--a-6)}
.p10-tel{color:#fff;font-size:1.0625rem;text-decoration:underline;text-decoration-color:var(--bronze-hell);text-underline-offset:4px}

/* ---------- Brücke: zwei Ausgangslagen ---------- */
.p10-bruecke{background:var(--flaeche-1);padding-block:var(--a-8)}
.p10-wege{grid-column:2/14;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--a-8)}
.p10-etikett{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.p10-weg-titel{margin-top:var(--a-2);font-size:1.3125rem;line-height:1.3;letter-spacing:-.012em;color:var(--text-1)}
.p10-weg p:not(.p10-etikett){margin-top:var(--a-3);font-size:1.0625rem;line-height:1.62;color:var(--text-2);max-width:56ch}
.p10-weg .p10-bezug{font-size:.9375rem;color:var(--text-3)}
.p10-bezug a{color:var(--petrol);font-weight:600;text-decoration:underline;text-decoration-color:var(--bronze-hell);text-underline-offset:3px}
.p10-weg .klein{margin-top:var(--a-3)}

/* ---------- Die vier Leistungen ---------- */
.p10-details{background:#fff;padding-block:var(--a-9) var(--a-8)}
.p10-details-kopf{grid-column:2/12;margin-bottom:var(--a-7)}
.p10-leistung{grid-column:2/14;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--a-9);
  padding-block:var(--a-7) var(--a-8);border-top:1px solid var(--linie)}
.p10-l-kopf{grid-column:1/-1;margin-bottom:var(--a-6)}
.p10-kennung{font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;color:var(--bronze)}
.p10-l-kopf h3{margin-top:var(--a-2);font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.15;color:var(--text-1);hyphens:none;-webkit-hyphens:none}
.p10-zw{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--a-4)}
.p10-sit{list-style:none;margin:0;padding:0;display:grid;gap:var(--a-4)}
.p10-sit li{position:relative;padding-left:26px}
.p10-sit li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:2px;background:var(--signal)}
.p10-sit a{font-size:1.125rem;line-height:1.45;font-weight:500;color:var(--text-1);text-decoration:underline;text-decoration-color:var(--bronze-hell);
  text-decoration-thickness:1px;text-underline-offset:5px;hyphens:none;-webkit-hyphens:none}
.p10-sit a::after{content:"\2009\2192";color:var(--bronze);text-decoration:none;display:inline-block;margin-left:2px}
.p10-sit a:hover,.p10-sit a:focus-visible{color:var(--petrol);text-decoration-color:var(--petrol)}
.p10-l-text{font-size:1.125rem;line-height:1.62;color:var(--text-1);max-width:58ch}
.p10-l-leistung .punkte{margin-top:var(--a-4)}
.p10-l-leistung .punkte li{font-size:1.0625rem;line-height:1.5;color:var(--text-2)}
.p10-l-weiter{margin-top:var(--a-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--a-4) var(--a-6)}
.p10-sprung{font-size:1rem;font-weight:600;color:var(--petrol);text-decoration:underline;text-decoration-color:var(--bronze-hell);text-underline-offset:4px}
.p10-sprung::after{content:"\2009\2193";color:var(--bronze)}

/* ---------- Einzelne Leistungen im Detail ---------- */
.p10-fachthemen{background:var(--flaeche-1);padding-block:var(--a-9)}
.p10-ft-kopf{grid-column:2/12;margin-bottom:var(--a-7)}
.p10-ft-spalten{grid-column:2/14;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--a-9)}
.p10-ft-rechts{display:grid;gap:var(--a-7);align-content:start}
.p10-ft-gruppe h3{font-size:1.1875rem;line-height:1.3;color:var(--text-1);padding-bottom:var(--a-3);border-bottom:2px solid var(--petrol);display:flex;gap:var(--a-3);align-items:baseline}
.p10-ft-gruppe h3 .p10-nr{color:var(--bronze)}
.p10-ft-gruppe ul{list-style:none;margin:var(--a-5) 0 0;padding:0;display:grid;gap:var(--a-5)}
.p10-ft-gruppe li a{font-size:1.0625rem;line-height:1.4;font-weight:600;color:var(--petrol);text-decoration:underline;text-decoration-color:var(--bronze-hell);text-underline-offset:4px}
.p10-ft-gruppe li a:hover{color:var(--bronze)}
.p10-ft-gruppe li span{display:block;margin-top:4px;font-size:1rem;line-height:1.5;color:var(--text-2)}

/* ---------- Einordnung und Qualifikation ---------- */
.p10-einordnung{background:#fff;padding-block:var(--a-9)}
.p10-ein-text{grid-column:2/8}
.p10-ein-text>p{margin-top:var(--a-5);font-size:1.125rem;line-height:1.64;color:var(--text-2);max-width:60ch}
.p10-ein-text h3{margin-top:var(--a-7);font-size:1.1875rem;color:var(--text-1)}
.p10-ein-text .punkte{margin-top:var(--a-3)}
.p10-ein-text .punkte li{font-size:1.0625rem}
.p10-zert{grid-column:9/14;align-self:start;background:var(--petrol);color:var(--auf-dunkel-1);padding:var(--a-7) var(--a-6)}
.p10-zert h3{font-size:1.3125rem;color:#fff}
.p10-zert ul{list-style:none;margin:var(--a-4) 0 0;padding:0}
.p10-zert li{padding:8px 0;border-bottom:1px solid var(--petrol-linie);font-size:1.0625rem;line-height:1.45;color:#fff}
.p10-zert p{margin-top:var(--a-5);font-size:1rem;line-height:1.64;color:var(--auf-dunkel-3)}
.p10-zert-kontakt{margin-top:var(--a-6)}

/* Nur Testfassung: Textvorschläge sichtbar markieren */
.p10-vorschlag{background:rgba(217,160,90,.18);outline:1px dashed var(--bronze);outline-offset:2px}
.p10-vorschlag::after{content:" [Textvorschlag]";font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--bronze);font-weight:400}

/* ---------- mittlere Breite ---------- */
@media (max-width:1179px){
  .p10-ue-liste a{grid-template-columns:48px minmax(0,1fr) 28px;row-gap:6px}
  .p10-ue-themen{grid-column:2;grid-row:2;text-align:left;white-space:normal}
  .p10-pfeil{grid-column:3;grid-row:1}
  .p10-leistung{column-gap:var(--a-7)}
  .p10-ft-spalten{column-gap:var(--a-7)}
}
@media (max-width:1023px){
  .p10-ue-kopf,.p10-details-kopf,.p10-ft-kopf{grid-column:2/14}
  .p10-ein-text,.p10-zert{grid-column:2/14}
  .p10-zert{margin-top:var(--a-7)}
}
/* ---------- Handy ---------- */
@media (max-width:839px){
  .p10-uebersicht{padding-block:var(--a-8)}
  .p10-ue-text{font-size:1.0625rem}
  .p10-ue-liste{margin-top:var(--a-6)}
  .p10-ue-liste a{grid-template-columns:36px minmax(0,1fr) 22px;column-gap:var(--a-3);padding:18px 0}
  .p10-ue-titel{font-size:1.25rem;line-height:1.25}
  .p10-ue-themen{font-size:.9375rem}
  .p10-ue-kontakt{margin-top:var(--a-6)}
  .p10-wege{grid-template-columns:minmax(0,1fr);row-gap:var(--a-7)}
  .p10-leistung{grid-template-columns:minmax(0,1fr);padding-block:var(--a-6) var(--a-7)}
  .p10-l-kopf{margin-bottom:var(--a-5)}
  .p10-l-leistung{margin-top:var(--a-6)}
  .p10-sit{gap:0}
  .p10-sit li{padding:10px 0 10px 24px}
  .p10-sit li::before{top:calc(10px + .8em)}
  .p10-sit a{font-size:1.0625rem}
  .p10-l-text{font-size:1.0625rem}
  .p10-l-weiter .btn{flex:1 1 100%}
  .p10-ft-spalten{grid-template-columns:minmax(0,1fr)}
  .p10-ft-rechts{margin-top:var(--a-7)}
  .p10-zert{padding:var(--a-6) var(--a-5)}
}
.p10-ein-text .umfang-lead{margin-top:var(--a-4);font-size:1.1875rem;line-height:1.5;color:var(--text-1)}
.p10-bezug a{white-space:nowrap}
/* Tippfläche ~44 px für Textlinks (Schriftgröße unverändert) */
.p10-bezug a,.p10-sprung,.p10-tel,.p10-ft-gruppe li a,.p10-weg .txtlink{display:inline-block;padding-block:10px;margin-block:-10px}