.perceptron-page { --p-ink:#12324a; --p-blue:#126e9c; --p-red:#af3f47; --p-mint:#e7f6ef; --p-gold:#fff3cf; }
/* Anleitung und Materiallinks aus Aufgabe 4 mit den Farben dieses Moduls. */
.perceptron-page #simulator { --dt-ink:var(--p-ink); --dt-blue:var(--p-blue); --dt-violet:#7048cf; }
.perceptron-page .perceptron-hero { padding:2rem; border-radius:1.25rem; background:linear-gradient(135deg,#e7f5fb,#f8fbfd); margin:1.5rem 0; }
.perceptron-page .perceptron-eyebrow,.perceptron-page .kicker { color:#126e9c; font-weight:700; margin:0 0 .35rem; }
.perceptron-page .tab-list { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:.5rem; padding:.3rem 0; border-bottom:2px solid #c9dae4; }
.perceptron-page .tab-list button { min-width:0; min-height:64px; border:1px solid #9db4c2; border-radius:.65rem; padding:.55rem .45rem; background:#fff; color:#12324a; font:inherit; font-size:.85rem; line-height:1.3; font-weight:700; white-space:normal; overflow-wrap:anywhere; hyphens:auto; cursor:pointer; }
@media (max-width:1000px) { .perceptron-page .tab-list { grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:600px) { .perceptron-page .tab-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.perceptron-page .tab-list button[aria-selected=true] { background:#126e9c; color:#fff; border-color:#126e9c; }
.perceptron-page .step-panel { margin:1.2rem 0; padding:1.25rem; border:1px solid #c9dae4; border-radius:1rem; background:#fff; }
.perceptron-page h2:focus { outline:3px solid #f0a202; outline-offset:4px; }
.perceptron-page button:focus-visible,.perceptron-page a:focus-visible,.perceptron-page input:focus-visible,.perceptron-page select:focus-visible,.perceptron-page textarea:focus-visible { outline:3px solid #f0a202; outline-offset:3px; }
.perceptron-page .formula-grid,.perceptron-page .two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.perceptron-page .card,.perceptron-page .formula-card,.perceptron-page .remember { border:1px solid #b9d1df; border-radius:.85rem; padding:1rem; background:#f9fcfe; }
.perceptron-page .geometry-figure { margin:1rem 0; padding:1rem; border:1px solid #b9d1df; border-radius:.85rem; background:#f9fcfe; }
.perceptron-page .geometry-plot { display:block; width:100%; height:auto; max-height:34rem; font-family:inherit; color:#12324a; }
.perceptron-page .geometry-grid line { stroke:#c9dae4; stroke-width:1; }
.perceptron-page .geometry-axes line { stroke:#12324a; stroke-width:3; }
.perceptron-page .geometry-axes line:last-child { marker-end:url(#axis-arrow); }
.perceptron-page .geometry-ticks,.perceptron-page .geometry-plot text { fill:#12324a; font-size:15px; font-weight:600; }
.perceptron-page .geometry-area { opacity:.28; }
.perceptron-page .safe-area { fill:url(#safe-pattern); stroke:#287b61; }
.perceptron-page .danger-area { fill:url(#danger-pattern); stroke:#af3f47; }
.perceptron-page .area-label { font-size:20px!important; font-weight:800!important; }
.perceptron-page .axis-label { font-size:18px!important; font-weight:800!important; }
.perceptron-page .boundary-line { stroke:#12324a; stroke-width:4; stroke-dasharray:10 7; }
.perceptron-page .line-label { fill:#12324a; paint-order:stroke; stroke:#fff; stroke-width:4; }
.perceptron-page .safe-point { fill:#e7f6ef; stroke:#287b61; stroke-width:4; }
.perceptron-page .danger-point { fill:#fff1f1; stroke:#af3f47; stroke-width:4; }
.perceptron-page .hare-point { fill:#fff3cf; stroke:#bd8900; stroke-width:4; }
.perceptron-page .hare-ring { fill:none; stroke:#bd8900; stroke-width:3; stroke-dasharray:5 3; }
.perceptron-page .geometry-plot [data-geometry],.perceptron-page .signal-node { transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease; }
.perceptron-page .geometry-plot [data-geometry].is-dimmed,.perceptron-page .signal-node.is-dimmed { opacity:.32; }
.perceptron-page .geometry-plot [data-geometry].is-active { opacity:1; filter:drop-shadow(0 0 4px #f0a202); }
.perceptron-page .geometry-plot [data-geometry].is-complete,.perceptron-page .signal-node.is-complete { opacity:1; }
.perceptron-page .explanation-stepper { margin:1rem 0; padding:1rem; border-left:5px solid #126e9c; background:#edf6fb; }
.perceptron-page .step-buttons { display:flex; flex-wrap:wrap; gap:.5rem; }
.perceptron-page .step-buttons .secondary-button { margin:0; }
.perceptron-page .step-buttons button[aria-current=step] { background:#126e9c; color:#fff; border-color:#126e9c; }
.perceptron-page .step-buttons button.is-complete::before { content:"✓ "; }
.perceptron-page .step-status { margin:.8rem 0 0; font-weight:700; }
.perceptron-page .signal-flow-region { margin:1rem 0; padding:.85rem; border:1px solid #b9d1df; border-radius:.85rem; background:#f9fcfe; overflow:hidden; }
.perceptron-page .signal-flow { position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1.3%; align-items:stretch; min-height:13rem; }
.perceptron-page .signal-arrows { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.perceptron-page .signal-arrows line { stroke:#5d7889; stroke-width:7; marker-end:url(#signal-arrowhead); transition:stroke .18s ease,opacity .18s ease; }
.perceptron-page .signal-arrows line.is-active { stroke:#bd8900; stroke-width:9; }
.perceptron-page .signal-arrows line.is-dimmed { opacity:.32; }
.perceptron-page .signal-arrows path { fill:#5d7889; }
.perceptron-page .signal-node { position:relative; z-index:1; display:grid; align-content:center; min-height:11rem; padding:.7rem; border:2px solid #126e9c; border-radius:.65rem; background:#fff; color:#12324a; text-align:center; overflow-wrap:anywhere; }
.perceptron-page .signal-node h3 { margin:.1rem 0 .5rem; font-size:1rem; }
.perceptron-page .signal-node p { margin:0; }
.perceptron-page .signal-node.is-active { border-color:#bd8900; background:#fff8e5; box-shadow:0 0 0 4px #f0a202; transform:translateY(-.2rem); }
.perceptron-page .signal-node[data-signal=output] { border-color:#287b61; }
.perceptron-page .math { font-size:1.15rem; font-weight:700; padding:.65rem; border-radius:.5rem; background:#edf6fb; overflow-wrap:anywhere; }
.perceptron-page label { display:block; font-weight:700; }.perceptron-page label > input:not([type="checkbox"]),.perceptron-page label > select,.perceptron-page label > textarea { margin-top:.3rem; }.perceptron-page input:not([type="checkbox"]),.perceptron-page select,.perceptron-page textarea { min-height:42px; box-sizing:border-box; width:100%; border:1px solid #7897a8; border-radius:.45rem; padding:.5rem; font:inherit; color:#12324a; background:#fff; }
.perceptron-page fieldset label { display:flex; align-items:flex-start; gap:.55rem; margin:.55rem 0; font-weight:400; }.perceptron-page input[type="checkbox"] { flex:0 0 1.2rem; width:1.2rem; min-height:1.2rem; margin:.1rem 0 0; }
.perceptron-page .input-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }.perceptron-page .is-correct { border-color:#287b61; background:#effaf4; }.perceptron-page .is-wrong { border-color:#af3f47; background:#fff5f5; }
.perceptron-page .primary-button,.perceptron-page .secondary-button { min-height:44px; margin-top:1rem; padding:.65rem 1rem; border-radius:.55rem; font:inherit; font-weight:700; cursor:pointer; }.perceptron-page .primary-button { border:1px solid #126e9c; background:#126e9c; color:#fff; }.perceptron-page .secondary-button { border:1px solid #126e9c; background:#fff; color:#12324a; }
.perceptron-page .feedback { margin-top:.8rem; padding:.75rem; border-left:5px solid #5d7889; background:#f1f7fa; }.perceptron-page .feedback.success { border-color:#287b61; background:#e7f6ef; }.perceptron-page .feedback.partial { border-color:#bd8900; background:#fff8e5; }.perceptron-page .feedback.error { border-color:#af3f47; background:#fff1f1; }
.perceptron-page .table-scroll { overflow:auto; margin:.75rem 0; border:1px solid #c9dae4; }.perceptron-page table { width:100%; border-collapse:collapse; min-width:850px; }.perceptron-page th,.perceptron-page td { padding:.45rem; border:1px solid #c9dae4; text-align:center; }.perceptron-page td input,.perceptron-page td select { min-width:4.4rem; }
.perceptron-page details { margin:.65rem 0; padding:.6rem; border:1px solid #c9dae4; border-radius:.5rem; }.perceptron-page summary { cursor:pointer; font-weight:700; }
.perceptron-page .flow-navigation { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }.perceptron-page .quiz-question { margin:1rem 0; padding:1rem; border:1px solid #c9dae4; border-radius:.7rem; }.perceptron-page .quiz-question label { display:flex; align-items:flex-start; gap:.55rem; margin:.55rem 0; font-weight:400; }.perceptron-page .quiz-question input { width:1.2rem; min-height:1.2rem; margin-top:.1rem; }
.perceptron-page .xor-board { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; padding:1rem; background:linear-gradient(90deg,transparent 49.5%,#7897a8 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,#7897a8 50%,transparent 50.5%); }.perceptron-page .xor-point { padding:.6rem; border-radius:.5rem; font-weight:700; }.perceptron-page .xor-point.one { background:#e7f6ef; border:2px solid #287b61; }.perceptron-page .xor-point.zero { background:#edf6fb; border:2px dashed #126e9c; }
.perceptron-page .privacy { font-size:.92rem; background:#fff8e5; padding:.75rem; border-left:4px solid #bd8900; }.perceptron-page .counter { font-size:.9rem; }
.perceptron-page .data-boundary { background:#edf6fb; border-left:4px solid #126e9c; padding:.75rem; }
.perceptron-page .geometry-axes path { fill:#12324a; }
.perceptron-page .fox-task { margin:1rem 0; }
.perceptron-page .fox-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.perceptron-page .fox-point { fill:#fff1f1; stroke:#af3f47; stroke-width:4; }
.perceptron-page .fox-ring { fill:none; stroke:#af3f47; stroke-width:3; stroke-dasharray:5 3; }
.perceptron-page .fox-label { fill:#12324a; paint-order:stroke; stroke:#fff; stroke-width:4; }
.perceptron-page #fox-marker { pointer-events:none; }
.perceptron-page #hare-marker[hidden],.perceptron-page #fox-marker[hidden] { display:none; }
.perceptron-page .signal-flow { display:block; min-height:23.75rem; }
.perceptron-page .signal-node { position:absolute; min-height:0; height:36%; }
.perceptron-page .signal-node[data-signal=inputs] { left:0; top:18%; width:16%; }
.perceptron-page .signal-node[data-signal=weights] { left:18%; top:18%; width:12%; }
.perceptron-page .signal-node[data-signal=products] { left:32%; top:18%; width:14%; }
.perceptron-page .signal-node[data-signal=sum] { left:48%; top:18%; width:12%; }
.perceptron-page .signal-node[data-signal=activation] { left:62%; top:18%; width:16%; }
.perceptron-page .signal-node[data-signal=output] { left:83%; top:18%; width:17%; }
.perceptron-page .signal-node[data-signal=comparison] { left:64%; top:66%; width:14%; height:22%; }
.perceptron-page .decision-svg { display:block; width:100%; height:auto; margin:1rem 0; border:1px solid #b9d1df; border-radius:.85rem; background:#f9fcfe; font-family:inherit; }
.perceptron-page .decision-svg-mobile { display:none; }
.perceptron-page .decision-svg line { stroke:#5d7889; stroke-width:5; marker-end:url(#decision-arrowhead); }
.perceptron-page .decision-svg-mobile line { stroke:#5d7889; stroke-width:4; stroke-linecap:round; marker-end:url(#decision-mobile-arrowhead); }
.perceptron-page .decision-svg line { stroke-linecap:round; }
.perceptron-page .decision-input circle,.perceptron-page .decision-core circle { fill:#fff; stroke:#126e9c; stroke-width:4; }
.perceptron-page .decision-core line { marker-end:none; stroke:#b9d1df; stroke-width:2; }
.perceptron-page .decision-input text,.perceptron-page .decision-core text,.perceptron-page .decision-output text,.perceptron-page .decision-weight,.perceptron-page .decision-threshold { fill:#12324a; font-weight:700; text-anchor:middle; font-size:16px; }
.perceptron-page .decision-input text:nth-of-type(2) { font-size:12px; }
.perceptron-page .decision-output rect { fill:#fff3cf; stroke:#bd8900; stroke-width:4; }
.perceptron-page [data-decision=output] { font-size:24px; }
.perceptron-page [data-decision=class] { font-size:13px; }
.perceptron-page .table-scroll thead tr:first-child th { background:#126e9c; color:#fff; border-color:#0c587d; }
.perceptron-page .table-scroll thead tr:nth-child(2) th { background:#fff3cf; color:#12324a; }
.perceptron-page .table-scroll tbody tr:nth-child(even) { background:#edf6fb; }
.perceptron-page .table-scroll tbody tr:nth-child(odd) { background:#f9fcfe; }
.perceptron-page .table-scroll th:nth-child(4),.perceptron-page .table-scroll td:nth-child(4),.perceptron-page .table-scroll th:nth-child(7),.perceptron-page .table-scroll td:nth-child(7),.perceptron-page .table-scroll th:nth-child(10),.perceptron-page .table-scroll td:nth-child(10),.perceptron-page .table-scroll th:nth-child(13),.perceptron-page .table-scroll td:nth-child(13) { border-right:3px solid #126e9c; }
@media (max-width:700px){.perceptron-page .topbar,.perceptron-page .perceptron-hero,.perceptron-page .tab-list,.perceptron-page .step-panel{box-sizing:border-box;min-width:0}.perceptron-page .topbar{flex-wrap:wrap;justify-content:center}.perceptron-page .formula-grid,.perceptron-page .two-column,.perceptron-page .input-grid{grid-template-columns:1fr}.perceptron-page .geometry-figure{padding:.45rem}.perceptron-page .geometry-plot text{font-size:30px}.perceptron-page .geometry-plot .area-label{font-size:34px!important}.perceptron-page .geometry-plot .axis-label{font-size:34px!important}.perceptron-page .signal-flow{grid-template-columns:1fr;gap:.7rem;padding-left:2.5rem}.perceptron-page .signal-arrows{display:none}.perceptron-page .signal-node{min-height:0;text-align:left}.perceptron-page .signal-node:not(:last-child)::after{content:"↓";position:absolute;left:calc(50% + 2px);top:calc(100% - .05rem);transform:translateX(-50%);display:grid;place-items:center;width:1.35rem;height:calc(.7rem + .55rem);border-radius:.675rem;background:#5d7889;color:#fff;font-weight:900}.perceptron-page .step-panel,.perceptron-page .perceptron-hero{padding:1rem}}
@media (max-width:700px){.perceptron-page .fox-controls{grid-template-columns:1fr}.perceptron-page .signal-flow{position:static;display:grid;grid-template-columns:1fr;gap:.7rem;padding-left:2.5rem;min-height:0}.perceptron-page .signal-node{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:0}.perceptron-page .decision-svg{display:none}.perceptron-page .decision-svg-mobile{display:block;width:100%;height:auto;margin:1rem 0;border:1px solid #b9d1df;border-radius:.85rem;background:#f9fcfe;font-family:inherit}.perceptron-page .decision-svg-mobile .decision-input text,.perceptron-page .decision-svg-mobile .decision-core text,.perceptron-page .decision-svg-mobile .decision-output text,.perceptron-page .decision-svg-mobile .decision-weight,.perceptron-page .decision-svg-mobile .decision-threshold{font-size:13px}.perceptron-page .decision-svg-mobile .decision-input text:nth-of-type(2),.perceptron-page .decision-svg-mobile [data-decision=class]{font-size:10px}.perceptron-page .decision-svg-mobile [data-decision=output]{font-size:20px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.perceptron-page .geometry-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(15rem,1fr); gap:1rem; align-items:start; margin:1rem 0; }
.perceptron-page .geometry-layout .geometry-figure { margin:0; }
.perceptron-page .geometry-side { text-align:left; }
.perceptron-page .geometry-side > p:first-child { margin-top:0; }
.perceptron-page .geometry-side .explanation-stepper { margin:.75rem 0; }
.perceptron-page .geometry-side .step-status { margin:0; min-height:4.5em; }
.perceptron-page .stepper-actions .primary-button,.perceptron-page .stepper-actions .secondary-button { margin-top:.75rem; }
.perceptron-page .geometry-side .fox-task { margin:0; }
.perceptron-page .geometry-side .fox-task[hidden],.perceptron-page .geometry-side [hidden] { display:none; }
.perceptron-page .geometry-side #fox-class { margin:.75rem 0 0; }
.perceptron-page .geometry-side #check-fox { margin-top:.75rem; }
.perceptron-page .geometry-plot.accepts-fox { cursor:crosshair; }
@media (max-width:900px){.perceptron-page .geometry-layout{grid-template-columns:1fr}.perceptron-page .geometry-side .step-status{min-height:0}}
.perceptron-page .perceptron-diagram { margin:1rem auto; max-width:40rem; padding:.75rem; border:1px solid #b9d1df; border-radius:.85rem; background:#f9fcfe; }
.perceptron-page .perceptron-diagram svg { display:block; width:100%; height:auto; font-family:inherit; }
.perceptron-page .perceptron-diagram line { stroke:#5d7889; stroke-width:4; stroke-linecap:round; marker-end:url(#perceptron-diagram-arrowhead); }
.perceptron-page .perceptron-diagram marker path { fill:#5d7889; }
.perceptron-page .perceptron-diagram text { fill:#12324a; font-size:20px; font-weight:700; text-anchor:middle; }
.perceptron-page .perceptron-diagram .diagram-symbol { font-size:28px; }
.perceptron-page .diagram-input rect,.perceptron-page .diagram-core circle { fill:#fff; stroke:#126e9c; stroke-width:4; }
.perceptron-page .diagram-output rect { fill:#fff3cf; stroke:#bd8900; stroke-width:4; }
.perceptron-page .signal-layout { grid-template-columns:minmax(0,3fr) minmax(12.5rem,1fr); }
.perceptron-page .signal-layout .signal-flow-region { margin:0; padding:.6rem; }
.perceptron-page .signal-layout .signal-node { padding:.4rem; font-size:.92rem; overflow-wrap:normal; hyphens:auto; }
.perceptron-page .signal-layout .signal-node h3 { font-size:.95rem; }
.perceptron-page .calc-steps { list-style:none; max-width:46rem; margin:1rem auto; padding:0; text-align:left; }
.perceptron-page .calc-steps li { position:relative; display:grid; grid-template-columns:2.4rem minmax(0,1fr) minmax(9rem,13rem); gap:.75rem; align-items:center; padding:.45rem 0; }
.perceptron-page .calc-steps li:not(:last-child)::after { content:""; position:absolute; left:calc(1.2rem - 2px); top:calc(50% + 1.2rem); height:calc(100% - 2.4rem); width:4px; border-radius:2px; background:#b9d1df; }
.perceptron-page .calc-step-number { display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:#126e9c; color:#fff; font-weight:800; }
.perceptron-page .calc-steps label { margin:0; }
.perceptron-page .calc-steps input,.perceptron-page .calc-steps select { margin:0; }
.perceptron-page .calc-term { white-space:nowrap; }
@media (max-width:900px){.perceptron-page .signal-layout{grid-template-columns:1fr}}
@media (max-width:700px){.perceptron-page .perceptron-diagram{padding:.45rem}.perceptron-page .perceptron-diagram text{font-size:26px}.perceptron-page .perceptron-diagram .diagram-symbol{font-size:32px}.perceptron-page .calc-steps li{grid-template-columns:2.4rem minmax(0,1fr);row-gap:.35rem}.perceptron-page .calc-step-number{grid-row:span 2}.perceptron-page .calc-steps li > input,.perceptron-page .calc-steps li > select{grid-column:2}}
/* Sicherungsblatt-Download (Aufbau wie entscheidungbaeume/styles.css, Farben dieses Moduls) */
.perceptron-page .solution-download { margin:1.5rem 0 0; padding:1.1rem 1.25rem; border:1px solid #b9d1df; border-left:5px solid #126e9c; border-radius:.85rem; background:#f9fcfe; }
.perceptron-page .solution-download h2 { margin:0; color:#12324a; font-size:1.25rem; }
.perceptron-page .solution-reveal { margin-top:.75rem; }
.perceptron-page .solution-reveal summary { width:fit-content; color:#126e9c; font-weight:800; cursor:pointer; }
.perceptron-page .solution-reveal[open] summary { margin-bottom:.9rem; }
.perceptron-page .solution-code-form { display:grid; gap:.7rem; max-width:31rem; }
.perceptron-page .solution-code-form label { font-weight:800; }
.perceptron-page .solution-code-controls { display:flex; gap:.6rem; }
.perceptron-page .solution-code-controls input { min-width:0; flex:1 1 12rem; padding:.65rem .8rem; border:1px solid #9db4c2; border-radius:.55rem; font:inherit; letter-spacing:.08em; text-transform:uppercase; }
.perceptron-page .solution-code-controls button,.perceptron-page .download-button { min-height:44px; padding:.65rem 1rem; border:1px solid #126e9c; border-radius:.55rem; color:#fff; background:#126e9c; font:inherit; font-weight:700; }
.perceptron-page .solution-code-controls button { cursor:pointer; }
.perceptron-page .solution-code-message { min-height:1.4rem; margin:0; color:#4f6878; }
.perceptron-page .solution-code-message.error { color:#9c252c; }
.perceptron-page .download-button { display:inline-flex; width:fit-content; align-items:center; text-decoration:none; }
.perceptron-page .download-button[hidden] { display:none; }
@media (max-width:700px){.perceptron-page .solution-code-controls{flex-direction:column;align-items:stretch}.perceptron-page .download-button{width:100%;justify-content:center;box-sizing:border-box}}