/* HYLLA Pfahlkreis */
/* Tool-spezifische Ergänzungen zur allgemeinen HYLLA styles.css.
       Die Hauptgestaltung kommt weiterhin aus /styles.css; diese Regeln begrenzen
       nur die sehr langen Tool-Überschriften und ordnen Formular, Grafik und Tabelle. */
    .pf-tool { background: var(--color-surface, #f5f7fa); }
    .pf-container { width: min(1480px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; }
    .pf-hero { background: var(--color-card, #fff); border: 1px solid rgba(0, 52, 102, .12); border-radius: 22px; padding: clamp(22px, 4vw, 48px); box-shadow: 0 18px 45px rgba(0, 52, 102, .08); margin-bottom: 22px; overflow: hidden; }
    .pf-hero h1 { max-width: 980px; margin: .25em 0 .35em; font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: .98; letter-spacing: -0.045em; overflow-wrap: anywhere; }
    .pf-hero .lead { max-width: 980px; }
    .pf-hero .muted { max-width: 1080px; color: var(--color-muted, #5b6777); }
    .pf-version { display:inline-flex; margin:.2rem 0 .9rem; padding:.3rem .65rem; border:1px solid rgba(0,52,102,.18); border-radius:999px; color:var(--color-primary,#003466); background:#f4f8fb; font-size:.82rem; font-weight:750; }
    .pf-grid-form { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 18px; align-items: start; }
    .pf-card { background: var(--color-card, #fff); border: 1px solid rgba(0, 52, 102, .12); border-radius: 18px; padding: 18px; box-shadow: 0 10px 28px rgba(0, 52, 102, .06); margin: 18px 0; }
    .pf-card h2 { margin-top: 0; font-size: 1.2rem; }
    .field, .check { display: grid; gap: 6px; margin: 0 0 12px; font-size: .95rem; }
    .check { grid-template-columns: auto 1fr; align-items: center; }
    .field input, .field select { width: 100%; min-height: 42px; border: 1px solid rgba(0, 52, 102, .22); border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; color: inherit; }
    .pf-actions, .button-row, .zoom-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .pf-actions { grid-column: 1 / -1; margin: 2px 0 10px; }
    .pf-actions button, .button-row button, .zoom-toolbar button { border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 700; cursor: pointer; background: var(--color-primary, #003466); color: #fff; }
    .button-row button:nth-last-child(-n+2), .pf-actions button[type=button], .zoom-toolbar button { background: #e8eef5; color: var(--color-primary, #003466); }
    .result-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 12px; }
    .result-item { background: #fff; border: 1px solid rgba(0, 52, 102, .12); border-radius: 14px; padding: 12px; }
    .result-item span { display: block; color: var(--color-muted, #5b6777); font-size: .85rem; }
    .result-item strong { display: block; margin-top: 4px; font-size: 1.05rem; }
    .svg-zoom-wrap { overflow: auto; border-radius: 14px; border: 1px solid rgba(0, 52, 102, .10); background: white; max-height: 88vh; }
    .plot svg { display: block; width: 100%; min-width: 760px; height: auto; transform-origin: 0 0; }
    .table-wrap { overflow-x: auto; }
    .table-wrap table { width: 100%; border-collapse: collapse; min-width: 900px; }
    .table-wrap th, .table-wrap td { padding: 8px 10px; border-bottom: 1px solid rgba(0, 52, 102, .12); text-align: right; white-space: nowrap; }
    .table-wrap th:first-child, .table-wrap td:first-child { text-align: left; }
    .error { border-color: #b91c1c; color: #7f1d1d; background: #fff5f5; }
    @media (max-width: 1100px) { .pf-grid-form { grid-template-columns: repeat(2, minmax(230px, 1fr)); } .result-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); } }
    @media (max-width: 720px) { .pf-container { width: min(100% - 20px, 1480px); padding-top: 16px; } .pf-grid-form, .result-grid { grid-template-columns: 1fr; } .pf-hero h1 { font-size: clamp(2rem, 13vw, 3.6rem); } .pf-actions, .button-row { flex-direction: column; align-items: stretch; } .pf-actions button, .button-row button { width: 100%; } }