/* site.css - vom Bau erzeugt fuer prototypen-fraesen.de (Hero-Buehne, CTA-Motiv). Nicht von Hand aendern. */

/* Domaineigene Stile aus inhalt/prototypen-fraesen.de/stil.css */
:root, [data-theme="dark"] {
    --zp-m1: #e3e7ec; --zp-m2: #b6bdc7; --zp-m3: #8a929d; --zp-m4: #5c636d;
    --zp-kante: #1c1f24; --zp-loch: #0b0c0e; --zp-schnitt: #4a5059; --zp-schnitt-rand: #c3cad3;
    --zp-schicht-a: #3a3f47; --zp-schicht-b: #2f343b;
    --pf-buehne-grund: #181818;
}
[data-theme="light"] {
    --zp-m1: #f6f8fa; --zp-m2: #d6dbe1; --zp-m3: #abb3bd; --zp-m4: #7e8793;
    --zp-kante: #56606a; --zp-loch: #3b414a; --zp-schnitt: #c9d0d8; --zp-schnitt-rand: #56606a;
    --zp-schicht-a: #d3d8de; --zp-schicht-b: #c3c9d1;
    --pf-buehne-grund: #d1d1cf;
}
.zp .s1 { stop-color: var(--zp-m1); }
.zp .s2 { stop-color: var(--zp-m2); }
.zp .s3 { stop-color: var(--zp-m3); }
.zp .s4 { stop-color: var(--zp-m4); }
.zp { overflow: visible; }
.zp .zp-kante { stroke: var(--zp-kante); stroke-width: 1.1; stroke-linejoin: round; }
.zp .zp-kante-fein { stroke: var(--zp-kante); stroke-width: 0.7; stroke-linejoin: round; }
.zp .zp-loch { fill: var(--zp-loch); stroke: var(--zp-kante); stroke-width: 0.7; }
.zp .zp-biegelinie { fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 5 4; }
.zp .zp-silhouette { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-dasharray: 7 5; stroke-linejoin: round; stroke-linecap: round; }
.zp .zp-text { fill: var(--text-secondary); font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; }
.zp .zp-text-klein { fill: var(--text-muted); font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; }
.zp .zp-text-stark { fill: var(--text-primary); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 14px; }
.zp .zp-text-mass { fill: var(--orange-text); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 14px; font-style: italic; }
.zp .zp-text-klammer { fill: var(--text-muted); font-family: 'DM Sans', system-ui, sans-serif; font-size: 12.5px; }
.zp .zp-pfeil { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; fill: none; }
.zp .zp-pfeil-spitze { fill: var(--orange); }
.zp .zp-pfeil-fein { stroke: var(--text-secondary); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.zp .zp-pfeil-fein-spitze { fill: var(--text-secondary); }
.zp .zp-achse { stroke: var(--text-secondary); stroke-width: 1.4; fill: none; }
.zp .zp-achse-spitze { fill: var(--text-secondary); }
.zp .zp-mass { stroke: var(--orange); stroke-width: 1.2; fill: none; }
.zp .zp-mass-spitze { fill: var(--orange); }
.zp .zp-hilfslinie { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.zp .zp-mittellinie { stroke: var(--orange); stroke-width: 1; stroke-dasharray: 10 3 2 3; fill: none; }
.zp .zp-schnitt { fill: var(--zp-schnitt); stroke: var(--zp-schnitt-rand); stroke-width: 1.4; stroke-linejoin: round; }
.zp .zp-bohrung { fill: var(--bg-card); stroke: none; }
.zp .zp-warn-kreis { fill: none; stroke: var(--fehler); stroke-width: 2; }
.zp .zp-gerade-fraes { stroke: var(--text-primary); stroke-width: 2.6; stroke-linecap: round; }
.zp .zp-gerade-stanz { stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; }
.zp .zp-punkt-orange { fill: var(--orange); stroke: var(--bg-card); stroke-width: 2; }
.zp .zp-rohteil-umriss { fill: none; stroke: var(--text-muted); stroke-width: 1.3; stroke-dasharray: 6 5; }
.zp .zp-werkzeug { fill: var(--zp-m3); stroke: var(--zp-kante); stroke-width: 1; }
.zp .zp-wendel { stroke: var(--zp-kante); stroke-width: 1; opacity: 0.6; }
.zp .zp-span { fill: var(--orange); opacity: 0.9; }
.zp .zp-schicht { fill: var(--zp-schicht-a); stroke: var(--zp-schicht-b); stroke-width: 1; }
.zp .zp-schicht-neu { fill: var(--orange-glow); stroke: var(--orange); }
.zp .zp-kanal { fill: none; stroke: var(--bg-card); stroke-width: 12; stroke-linecap: round; }
.zp .zp-nut { fill: none; stroke: var(--bg-card); stroke-width: 12; }
.zp .zp-schraube-achse { stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 10 3 2 3; }
.zp .zp-funktion { stroke: var(--orange); stroke-width: 4; stroke-linecap: round; }
.zp .zp-funktion-fein { stroke: var(--orange); stroke-width: 1.6; }
.zp .zp-bohrung-fl { fill: var(--bg-card); stroke: none; }
.zp .zp-akzent-flaeche { fill: var(--orange); opacity: 0.35; stroke: var(--orange); stroke-width: 1; }
.zp .zp-seg { stroke: none; }
.zp .zp-seg-1 { fill: var(--zp-m4); }
.zp .zp-seg-2 { fill: var(--zp-m3); }
.zp .zp-seg-3 { fill: var(--orange); opacity: 0.85; }
.zp .zp-seg-4 { fill: var(--zp-m3); }
.zp .zp-seg-5 { fill: var(--zp-m4); }
.zp .zp-marke-linie { stroke: var(--text-secondary); stroke-width: 2; }
.zp .zp-marke-linie-orange { stroke: var(--orange); stroke-width: 3; }
.zp .zp-zeitachse { stroke: var(--border-hover); stroke-width: 3; stroke-linecap: round; }
.zp .zp-zeitachse-teil { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.zp .zp-zeitpunkt { fill: var(--bg-card); stroke: var(--text-secondary); stroke-width: 3; }
.zp .zp-zeitpunkt-teil { stroke: var(--orange); }
.zp .zp-klammer { fill: none; stroke: var(--text-muted); stroke-width: 1.2; }

.zp-symbol .zp-sy-oben { fill: var(--zp-m1); stroke: var(--zp-kante); stroke-width: 0.9; stroke-linejoin: round; }
.zp-symbol .zp-sy-vorne { fill: var(--zp-m2); stroke: var(--zp-kante); stroke-width: 0.9; stroke-linejoin: round; }
.zp-symbol .zp-sy-rechts { fill: var(--zp-m3); stroke: var(--zp-kante); stroke-width: 0.9; stroke-linejoin: round; }
.zp-symbol .zp-sy-boden { fill: var(--zp-m3); stroke: var(--zp-kante); stroke-width: 0.6; }
.zp-symbol .zp-sy-loch { fill: var(--zp-loch); stroke: var(--zp-kante); stroke-width: 0.6; }
.zp-symbol .zp-sy-schraube { fill: var(--zp-m4); stroke: var(--zp-kante); stroke-width: 0.6; }
.zp-symbol .zp-sy-akzent { fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; }
.zp-symbol .zp-sy-akzent-rand { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linejoin: round; }
.zp-symbol .zp-sy-akzent-flaeche { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linejoin: round; }
.zp-symbol .zp-sy-naht { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 3; }
.zp-icon .zp-icon-strich { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.zp-icon .zp-icon-akzent { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zp-icon .zp-icon-akzent-flaeche { fill: var(--orange); opacity: 0.9; }


figure.pf-rahmen { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; background: var(--bg-card); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); }
figure.pf-rahmen .svg-einbettung { padding: 22px 22px 14px; }
figure.pf-rahmen .svg-einbettung > svg { display: block; width: 100%; height: auto; max-height: 440px; margin: 0 auto; }
figure.pf-rahmen figcaption { margin: 0; padding: 11px 16px; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); border-top: 1px solid var(--border); background: var(--bg-card); }
figure.pf-rahmen.klein .svg-einbettung > svg { max-height: 300px; }
.pf-nur-quer { display: block; }
.pf-nur-hoch { display: none; }
@media (max-width: 640px) {
    .pf-nur-quer { display: none; }
    .pf-nur-hoch { display: block; }
    figure.pf-rahmen .svg-einbettung { padding: 16px 14px 10px; }
}


.pf-nurjs { display: none; }
.js .pf-nurjs { display: block; }
.js .pf-ohnejs { display: none; }


@media (min-width: 1025px) {
    .hero .hero-raster { grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); gap: 56px; }
}
.pf-stufen { position: relative; }
.pf-stufen-buehne {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
    border-radius: var(--radius-l); border: 1px solid var(--border); background: var(--pf-buehne-grund);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 60px rgba(232, 114, 12, 0.08);
}
[data-theme="light"] .pf-stufen-buehne { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14), 0 0 50px rgba(232, 114, 12, 0.08); }
.pf-ebene { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pf-ebene picture, .pf-ebene img { display: block; width: 100%; height: 100%; }
.pf-ebene img { object-fit: cover; }
.pf-stufen[data-zustand="quer"] .pf-ebene-quer,
.pf-stufen[data-zustand="1"] .pf-ebene-1,
.pf-stufen[data-zustand="2"] .pf-ebene-2,
.pf-stufen[data-zustand="3"] .pf-ebene-3,
.pf-stufen[data-zustand="serie"] .pf-ebene-3 { opacity: 1; }
.pf-stufen[data-zustand="serie"] .pf-ebene-3 { transform: translateX(-19%) scale(0.94); }
@media (prefers-reduced-motion: no-preference) {
    
    .js .pf-stufen[data-zustand="quer"] .pf-ebene-quer { opacity: 0; }
    .js .pf-stufen[data-zustand="quer"] .pf-ebene-1 { opacity: 1; }
}
.pf-serie-karte {
    position: absolute; right: 4%; top: 50%; width: 40%; z-index: 2; opacity: 0; transform: translate(14px, -50%);
    transition: opacity 0.9s ease 0.35s, transform 0.9s ease 0.35s; pointer-events: none; text-align: center;
}
.pf-serie-karte .svg-einbettung > svg { width: 100%; height: auto; display: block; }
.pf-serie-karte p {
    margin: 10px auto 0; display: inline-block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600;
    font-size: clamp(0.72rem, 1.1vw, 0.86rem); line-height: 1.3; color: var(--orange-text);
    background: var(--glass-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px dashed var(--orange); border-radius: 999px; padding: 5px 12px;
}
.pf-stufen[data-zustand="serie"] .pf-serie-karte { opacity: 1; transform: translate(0, -50%); }
.pf-stufen-leiste {
    list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 10px;
    font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.86rem; font-weight: 600; color: var(--text-muted); text-align: center;
}
.pf-stufen-leiste li { flex: 1 1 0; min-width: 0; padding: 8px 4px 0; border-top: 2px solid var(--border); transition: color 0.4s, border-color 0.4s; }
.pf-stufen-leiste .pf-nr { display: inline-block; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--orange-text); margin-right: 6px; }
.pf-stufen[data-zustand="quer"] .pf-stufen-leiste li, .pf-stufen-leiste li[aria-current] { color: var(--text-primary); border-top-color: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
    .js .pf-stufen[data-zustand="quer"] .pf-stufen-leiste li { color: var(--text-muted); border-top-color: var(--border); }
    .js .pf-stufen[data-zustand="quer"] .pf-stufen-leiste li:first-child { color: var(--text-primary); border-top-color: var(--orange); }
}
.pf-stufen[data-zustand="serie"] .pf-stufen-leiste li:last-child { color: var(--text-primary); border-top-color: var(--orange); }
.hero-figur figcaption { font-size: 0.8rem; color: var(--text-secondary); margin-top: 12px; }


@media (max-width: 1024px) {
    .hero .hero-raster { gap: 0; }
    .hero .hero-text { display: contents; }
    .hero .hero-titel, .hero .hero-unterzeile, .hero .hero-buttons { order: 1; }
    .hero .hero-figur { order: 2; margin: 28px 0 0; max-width: 720px; }
    .hero .hero-text > .blick { order: 3; }
}
@media (max-width: 560px) {
    .pf-stufen-leiste { font-size: 0.78rem; }
    .pf-stufen-leiste .pf-nr { display: block; margin: 0 0 1px; }
    .pf-serie-karte p { font-size: 0.7rem; padding: 4px 9px; }
}


.pf-marke {
    display: inline-block; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-text); border-left: 3px solid var(--orange);
    padding-left: 10px; margin-bottom: 14px;
}
.pf-serienweg-inhalt { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.pf-serienweg-inhalt h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 16px; }
.pf-serienweg-inhalt p { color: var(--text-secondary); margin-bottom: 14px; }
.pf-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pf-karte {
    position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l);
    padding: 30px 30px 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14); overflow: hidden;
}
.pf-karte::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange), transparent 70%); }
.pf-karte-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pf-karte-kopf .svg-einbettung { width: 44px; height: 44px; flex-shrink: 0; color: var(--text-primary); }
.pf-karte-kopf .svg-einbettung > svg { width: 44px; height: 44px; }
.pf-karte h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin: 0; }
.pf-karte p { color: var(--text-secondary); margin-bottom: 12px; }
.pf-karte p:last-child { margin-bottom: 0; }
.pf-absender { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
.pf-absender h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 16px; }
.pf-absender p { color: var(--text-secondary); margin-bottom: 14px; }
.pf-absender .absender-karte p:last-child { margin-bottom: 0; }
.pf-haus { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pf-haus li { display: flex; gap: 12px; align-items: baseline; color: var(--text-secondary); font-size: 0.95rem; }
.pf-haus li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); flex-shrink: 0; transform: translateY(-1px); }
.pf-haus strong { color: var(--text-primary); font-weight: 600; }


.pf-buehne { padding: 34px; background: var(--bg-card); box-shadow: var(--schatten-karte); }
.pf-buehne-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 44px; align-items: start; }
.pf-buehne-text h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 14px; }
.pf-buehne-text .einleitung { font-size: 1.02rem; margin-bottom: 14px; }
.pf-klein { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 14px; }
.pf-buehne-knopf { margin-top: 20px; }
.pf-teilformen { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.pf-teilformen legend { margin-bottom: 10px; }
.pf-teilform-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-teilform {
    position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 4px 12px;
    min-height: 76px; padding: 10px 14px 10px 10px; cursor: pointer; border-radius: var(--radius-m);
}

.pf-teilform-rahmen {
    position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-m); border: 1.5px solid var(--border-hover);
    background: var(--bg-primary); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.pf-teilform:hover .pf-teilform-rahmen { border-color: var(--orange); }
.pf-teilform input { position: absolute; left: 12px; top: 12px; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pf-teilform input:checked ~ .pf-teilform-rahmen { border-color: var(--orange); background: var(--orange-glow); box-shadow: 0 0 0 1px var(--orange) inset; }
.pf-teilform input:focus-visible ~ .pf-teilform-rahmen { outline: 2px solid var(--orange); outline-offset: 3px; }
.pf-teilform-bild { grid-row: span 2; width: 64px; height: 52px; display: flex; align-items: center; justify-content: center; }
.pf-teilform-bild .svg-einbettung, .pf-teilform-bild .svg-einbettung > svg { width: 64px; height: 52px; }
.pf-teilform-name { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--text-primary); line-height: 1.25; align-self: end; }
.pf-teilform-zusatz { font-size: 0.8rem; color: var(--text-muted); line-height: 1.3; align-self: start; }
.pf-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pf-reihe .form-group { min-width: 0; }
.pf-feld-einheit { font-weight: 400; color: var(--text-muted); }
.pf-b-ergebnis {
    margin-top: 6px; min-height: 124px; border: 1px solid var(--border); border-radius: var(--radius-m);
    background: var(--bg-secondary); padding: 16px 18px;
}
.pf-b-leer { color: var(--text-muted); font-size: 0.92rem; margin: 0; }
.pf-b-zeilen { display: grid; gap: 8px; margin-bottom: 10px; }
.pf-b-zeile { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.pf-b-name { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pf-b-weg { font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.pf-b-zeile .ampel { grid-column: 2; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }


.pf.werkzeug { padding: 32px; }
.pf-kopfzeile { color: var(--text-secondary); margin: 0; max-width: 620px; }
.pf-vorlagen { margin-bottom: 18px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
    min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-hover); background: var(--bg-primary);
    color: var(--text-primary); font-size: 0.9rem; transition: border-color 0.2s, background 0.2s;
}
.pf-chip:hover { border-color: var(--orange); background: var(--orange-glow); }
.pf-merkmale { border: 0; padding: 0; margin: 4px 0 14px; min-width: 0; }
.pf-merkmale legend { margin-bottom: 8px; }
.pf-merkmal-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.pf-merkmal-raster .form-check { min-height: 44px; align-items: center; }
.pf-feldfehler { color: var(--fehler); font-size: 0.86rem; margin: 8px 0 0; }
.pf-kosten { margin: 6px 0 4px; }
.pf-kosten .pf-reihe { margin-top: 8px; }
.pf-ergebnis h3 { font-size: 1.15rem; margin-bottom: 12px; }
.pf-leer { color: var(--text-muted); }
.pf-spuren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.pf-spur { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 14px 16px; min-width: 0; }
.pf-spur-serie { border-color: var(--border-hover); }
.pf-spur-titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 4px; }
.pf-spur-weg { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--text-primary); margin: 0 0 8px; }
.pf-spur .ampel { font-size: 0.82rem; margin-bottom: 8px; }
.pf-spur-text, .pf-spur-zusatz { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 8px; }
.pf-spur-zusatz { border-left: 2px solid var(--warnung); padding-left: 10px; }
.pf-quelle { font-size: 0.76rem; color: var(--text-muted); margin: 6px 0 0; line-height: 1.45; }
.pf-stufe { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.pf-stufe-symbol { flex-shrink: 0; }
.pf-sy-voll { fill: var(--text-secondary); stroke: var(--text-secondary); stroke-width: 1.2; }
.pf-sy-leer { fill: none; stroke: var(--text-secondary); stroke-width: 1.4; }
.pf-sy-halb { fill: var(--text-secondary); }
.pf-sy-orange { fill: var(--orange); }
.ampel-hinweis::before, .ampel-offen::before { background: var(--text-muted); }
.ampel-offen::before { background: transparent; border: 2px dashed var(--text-muted); width: 8px; height: 8px; }
.pf-wegkarte { margin: 4px 0 14px; }
.pf-wegkarte-flaeche { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 12px; }
.pf-wegkarte-flaeche svg { display: block; width: 100%; height: auto; }
.pf-wegkarte figcaption { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.pf-karte-svg .pf-phase { fill: var(--text-secondary); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
.pf-karte-svg .pf-achse { stroke: var(--border-hover); stroke-width: 3; stroke-linecap: round; }
.pf-karte-svg .pf-punkt { fill: var(--bg-card); stroke: var(--text-secondary); stroke-width: 2.5; }
.pf-karte-svg .pf-punkt-wechsel { stroke: var(--orange); }
.pf-karte-svg .pf-balken { stroke-width: 1.6; }
.pf-karte-svg .pf-balken-gruen { fill: rgba(16, 185, 129, 0.12); stroke: var(--erfolg); }
.pf-karte-svg .pf-balken-gelb { fill: rgba(245, 158, 11, 0.12); stroke: var(--warnung); }
.pf-karte-svg .pf-balken-hinweis { fill: var(--bg-secondary); stroke: var(--text-muted); }
.pf-karte-svg .pf-balken-offen { fill: var(--bg-secondary); stroke: var(--text-muted); stroke-dasharray: 6 4; }
.pf-karte-svg .pf-balken-titel { fill: var(--text-muted); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-karte-svg .pf-balken-text { fill: var(--text-primary); font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; }
.pf-b-ergebnis .pf-wegkarte { margin: 6px 0 0; }
.pf-b-ergebnis .pf-wegkarte-flaeche { padding: 8px; }
.pf-rechnung { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: var(--radius-m); padding: 14px 16px; margin-bottom: 14px; }
.pf-rechnung h4 { font-size: 0.95rem; margin-bottom: 8px; }
.pf-rechnung-zeile { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 6px; }
.pf-rechnung-haupt { color: var(--text-primary); font-weight: 600; }
.pf-hinweise-titel { font-size: 0.95rem; margin: 6px 0 8px; }
.pf-hinweise { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.pf-hinweise li { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 10px 14px; }
.pf-hinweise li > p { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }
.pf-weitere { margin: 0 0 12px; }
.pf-weitere summary { cursor: pointer; color: var(--orange-text); font-size: 0.9rem; min-height: 44px; display: flex; align-items: center; }
.pf-offen { font-size: 0.88rem; color: var(--text-secondary); border-top: 1px dashed var(--border-hover); padding-top: 10px; margin: 6px 0 12px; }
.pf-quer { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 12px; }
.pf-ergebnis .anfrage-baustein { margin-top: 4px; }
.pf-stufen-legende { list-style: none; padding: 0; display: grid; gap: 10px; }
.pf-stufen-legende li { color: var(--text-secondary); font-size: 0.93rem; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); }
.pf-stufen-legende .pf-stufe { color: var(--text-primary); margin-right: 6px; }
.pf-regeltabelle summary { cursor: pointer; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; color: var(--orange-text); min-height: 44px; display: flex; align-items: center; }
.pf-regeltabelle .tabelle td, .pf-regeltabelle .tabelle th { font-size: 0.84rem; vertical-align: top; }
.pf-regeltabelle .tabelle td:first-child { white-space: nowrap; }
@media (max-width: 1180px) {
    .pf .werkzeug-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .pf.werkzeug { padding: 20px 16px; }
    .pf-spuren { grid-template-columns: minmax(0, 1fr); }
    .pf-merkmal-raster { grid-template-columns: minmax(0, 1fr); }
    .pf-buehne { padding: 22px 18px; }
}
@media (max-width: 420px) {
    .pf-teilform-raster { grid-template-columns: minmax(0, 1fr); }
    .pf-reihe { grid-template-columns: minmax(0, 1fr); }
}


.pf-beispiele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pf-beispiel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 24px; min-width: 0; }
.pf-beispiel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pf-beispiel-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.pf-beispiel-kopf .svg-einbettung, .pf-beispiel-kopf .svg-einbettung > svg { width: 72px; height: 58px; flex-shrink: 0; }
.pf-beispiel h3 { font-size: 1.12rem; margin: 0; }
.pf-beispiel-angaben { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; }
.pf-beispiel-angaben li { margin-bottom: 3px; }
.pf-beispiel-weg { display: grid; gap: 8px; margin: 12px 0; }
.pf-beispiel-weg p { margin: 0; font-size: 0.93rem; color: var(--text-secondary); }
.pf-beispiel-weg strong { color: var(--text-primary); }
.pf-beispiel .pf-rechenweg { font-size: 0.86rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 10px; margin: 0; }
.pf-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pf-weg { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 22px; }
.pf-weg .svg-einbettung, .pf-weg .svg-einbettung > svg { width: 76px; height: 62px; }
.pf-weg h3 { font-size: 1.08rem; margin-bottom: 6px; }
.pf-weg p { font-size: 0.93rem; color: var(--text-secondary); margin: 0; }
.pf-formel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: var(--radius-m); padding: 12px 16px; display: inline-block; margin: 4px 0 14px; }
blockquote.pf-zitat { margin: 16px 0; padding: 16px 20px; border-left: 3px solid var(--orange); background: var(--bg-card); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
blockquote.pf-zitat p { font-size: 1.02rem; color: var(--text-primary); margin: 0 0 6px; font-style: italic; }
blockquote.pf-zitat footer { font-size: 0.8rem; color: var(--text-muted); }
.pf-begriffe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pf-begriff { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 26px; min-width: 0; }
.pf-begriff h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin-bottom: 10px; }
.pf-begriff p { color: var(--text-secondary); margin-bottom: 12px; }
.pf-begriff p:last-child { margin-bottom: 0; }
.pf-vergleich th[scope="row"] { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.pf-zweier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; align-items: start; }
@media (max-width: 1024px) {
    .pf-serienweg-inhalt, .pf-absender, .pf-buehne-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
    .pf-karten, .pf-beispiele, .pf-wege, .pf-begriffe, .pf-zweier { grid-template-columns: minmax(0, 1fr); }
    .pf-beispiel:last-child:nth-child(odd) { grid-column: auto; }
    .pf-weg { grid-template-columns: 60px minmax(0, 1fr); padding: 18px; }
    .pf-weg .svg-einbettung, .pf-weg .svg-einbettung > svg { width: 60px; height: 50px; }
    .pf-karte { padding: 24px 20px 22px; }
}

@media (min-width: 640px) and (max-width: 1000px) and (min-height: 560px) and (orientation: landscape) {
    .pf-karten, .pf-beispiele, .pf-wege, .pf-begriffe, .pf-zweier, .pf-serienweg-inhalt, .pf-absender { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
}


@media print {
    body.druck-ergebnis .anfrage-baustein, body.druck-ergebnis .pf-ohnejs, body.druck-ergebnis .pf-vorlagen { display: none; }
    body.druck-ergebnis .werkzeug { border: none; padding: 0; box-shadow: none; }
    body.druck-ergebnis .pf-spur, body.druck-ergebnis .pf-hinweise li, body.druck-ergebnis .pf-wegkarte { break-inside: avoid; }
    .pf-stufen-buehne { box-shadow: none; }
}


.pf-stufen-titel { font-size: 1.1rem; margin-bottom: 14px; }
.pf-regeltabelle .pf-regel-gruppe th { background: var(--bg-secondary); color: var(--orange-text); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pf-regel-ampel { display: inline-block; margin-top: 4px; font-size: 0.76rem; color: var(--text-muted); }
.pf-regeltabelle > p { margin: 10px 0 0; }
figure.pf-spannen { margin-top: 36px; }
figure.pf-spannen .svg-einbettung > svg { max-height: 360px; }