:root {
            --bg: #f7faf7;
            --card: #ffffff;
            --primary: #1a4e1a;
            --primary-2: #2e7d32;
            --primary-light: #4caf50;
            --muted: #4a5c4a;
            --muted-2: #2f3d2f;
            --accent: #4caf50;
            --accent-dark: #388e3c;
            --border: #d9ead7;
            --radius: 16px;
            --shadow: 0 8px 28px rgba(30,80,30,.10);
            --shadow-2: 0 10px 32px rgba(46,125,50,.15);
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --info: #2196f3;
        }
        
        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #0d1510;
                --card: #121a14;
                --primary: #b9f6ca;
                --primary-2: #8be58c;
                --primary-light: #66bb6a;
                --muted: #b6c4b6;
                --muted-2: #d3e2d3;
                --accent: #7ee18a;
                --accent-dark: #4caf50;
                --border: #27402a;
                --shadow: 0 8px 28px rgba(0,0,0,.45);
                --shadow-2: 0 10px 32px rgba(0,0,0,.55);
            }
            body { color-scheme: dark; }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            height: 100%;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background:
                radial-gradient(1200px 600px at 10% -10%, rgba(76,175,80,.08), transparent),
                radial-gradient(1200px 600px at 110% -20%, rgba(76,175,80,.06), transparent),
                var(--bg);
            color: var(--muted-2);
            line-height: 1.6;
            min-height: 100vh;
        }

        /* ==== HEADER ==== */
        .header { 
            background: linear-gradient(135deg, #1b5e20, #2e7d32, #43a047);
            text-align: center; 
            width: 100%; 
            padding: 15px 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .header img { 
            height: 70px; 
            margin: 5px 0 10px 0;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }
        .header h1 { 
            color: #fff; 
            margin: 0; 
            font-size: 28px; 
            font-weight: 700; 
            letter-spacing: 0.5px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .header-sub {
            color: rgba(255,255,255,0.9);
            font-size: 0.95rem;
            margin-top: 5px;
            font-weight: 400;
        }

        /* ==== Layout ==== */
        .wrap {
            max-width: 1200px;
            margin: clamp(16px, 3vw, 30px) auto;
            padding: clamp(12px, 2vw, 24px);
        }

        .hero {
            position: relative;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: clamp(20px, 4vw, 32px);
            background: linear-gradient(145deg, rgba(76,175,80,.08), rgba(76,175,80,.02));
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 28px;
            border-left: 5px solid var(--accent);
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(600px 300px at 95% -5%, rgba(76,175,80,.12), transparent 70%);
            pointer-events: none;
        }

        .hero h2 {
            margin: 0;
            color: var(--primary);
            font-size: clamp(1.4rem, 1rem + 1.2vw, 1.8rem);
            font-weight: 700;
        }

        .hero-sub {
            margin-top: 8px;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.5;
        }

        /* Loading Overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            color: white;
            font-family: 'Inter', sans-serif;
        }
        
        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #4caf50;
            animation: spin 1s ease-in-out infinite;
            margin-bottom: 25px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .loading-message {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 15px;
            text-align: center;
            max-width: 400px;
            line-height: 1.5;
        }
        
        .loading-details {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
            max-width: 400px;
            line-height: 1.5;
            margin-top: 10px;
        }
        
        .loading-steps {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 20px;
            margin-top: 25px;
            max-width: 500px;
            width: 90%;
        }
        
        .loading-step {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .loading-step:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .step-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(76, 175, 80, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4caf50;
            font-weight: bold;
            flex-shrink: 0;
        }
        
        .step-text {
            flex: 1;
        }
        
        .step-title {
            font-weight: 600;
            margin-bottom: 4px;
            color: white;
        }
        
        .step-description {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.6);
        }
        
        .step-active .step-icon {
            background: #4caf50;
            color: white;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
            100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
        }

        /* Status Badges */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 15px;
            border: 2px solid transparent;
        }
        
        .status-gpt-5 {
            background: #e8f5e9;
            color: #1b5e20;
            border-color: #a5d6a7;
        }
        
        .status-fallback {
            background: #fff4e5;
            color: #8a5000;
            border-color: #e91e63;
        }

        /* ==== Score Display ==== */
        .score-display {
            text-align: center;
            padding: 35px;
            background: linear-gradient(135deg, var(--primary-2), var(--primary));
            color: white;
            border-radius: var(--radius);
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-2);
        }

        .score-display::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: rgba(255,255,255,.35);
        }

        .score-circle {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            border: 5px solid rgba(255,255,255,0.3);
            font-size: 3rem;
            font-weight: 800;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }

        .score-grade {
            font-size: 1.4rem;
            font-weight: 600;
            margin-top: 10px;
            opacity: 0.9;
        }

        /* Score Breakdown */
        .score-breakdown {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 25px;
        }

        .score-category {
            background: rgba(255,255,255,0.18);
            padding: 14px 16px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.35);
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            text-align: left;
        }

        .score-category h5 {
            margin: 0;
            font-size: 0.92rem;
            font-weight: 600;
            opacity: 1;
            flex: 1 1 auto;
        }

        .score-zahl {
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .category-score {
            font-size: 1.7rem;
            font-weight: 700;
            line-height: 1;
        }
        .category-max {
            font-size: 0.8rem;
            opacity: 0.85;
            margin-left: 3px;
        }

        /* Cards */
        .card {
            background: var(--card);
            border-radius: var(--radius);
            padding: clamp(18px, 3vw, 26px);
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            margin-bottom: 24px;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        /* Formularkarten bleiben ruhig - Anheben beim Hovern lenkt beim Ausfuellen ab */
        .card:focus-within {
            border-color: var(--accent);
            box-shadow: var(--shadow-2);
        }

        .ablauf {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 10px 26px;
            margin: 20px 0 0;
            padding: 0;
            position: relative;
            z-index: 1;
        }
        .ablauf li {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--muted-2);
        }
        .ablauf span {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 0.82rem;
            font-weight: 700;
            flex: 0 0 auto;
        }
        .step-no {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            display: inline-grid;
            place-items: center;
            font-size: 0.95rem;
            font-weight: 700;
            flex: 0 0 auto;
        }
        .card-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border);
        }

        /* Feedback Grid */
        .feedback-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 25px;
        }

        .feedback-section {
            background: var(--card);
            border-radius: var(--radius);
            padding: 20px;
            border-top: 4px solid var(--accent);
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .feedback-section h4 {
            color: var(--primary);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.1rem;
        }

        .feedback-list {
            list-style: none;
            padding: 0;
        }

        .feedback-list li {
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            line-height: 1.5;
        }

        .feedback-list li:last-child {
            border-bottom: none;
        }

        .feedback-list li:before {
            content: "✓";
            color: var(--success);
            font-weight: bold;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .feedback-list.warnings li:before {
            content: "⚠";
            color: var(--warning);
        }

        .feedback-list.improvements li:before {
            content: "↪";
            color: var(--info);
        }

        /* Wissenschaftliche Grundlagen */
        .wissenschaft-box {
            background: #e8f5e9;
            border-left: 5px solid var(--success);
            padding: 20px;
            border-radius: var(--radius);
            margin: 20px 0;
        }

        .wissenschaft-box h4 {
            color: var(--primary-dark);
            margin-bottom: 15px;
        }

        .wissenschaft-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .wissenschaft-tag {
            background: var(--success);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        /* Form Styles */
        .form-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: 1fr 1fr;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        label {
            font-weight: 700;
            color: var(--primary);
            font-size: 1rem;
        }

        select, textarea {
            width: 100%;
            border: 2px solid var(--border);
            background: var(--card);
            border-radius: 12px;
            padding: 14px 16px;
            font: inherit;
            color: inherit;
            transition: all 0.2s;
        }

        select:focus, textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(76,175,80,0.1);
        }

        .card-vt {
            border-left-color: #2196f3 !important;
            background: #eef6fd;
            margin-top: 28px;
        }
        .card-vt .card-title { color: #1565c0; }
        .fall-text {
            background: #fff;
            border: 1px solid var(--border, #ddd);
            border-left: 4px solid #4caf50;
            border-radius: 8px;
            padding: 14px 16px;
            line-height: 1.65;
            font-size: 1rem;
            min-height: 60px;
        }
        .hilfe-box {
            background: #f4f9f5;
            border: 1px solid #cfe3d4;
            border-radius: 10px;
            padding: 14px 18px;
            margin-bottom: 14px;
            font-size: 0.94rem;
        }
        .hilfe-box strong { display: block; color: #2e7d32; margin-bottom: 8px; }
        .hilfe-box ol { margin: 0 0 10px 18px; padding: 0; }
        .hilfe-box li { margin-bottom: 4px; }
        .hilfe-hinweis {
            font-size: 0.88rem;
            color: #5a6b5e;
            border-top: 1px solid #cfe3d4;
            padding-top: 9px;
        }
        textarea {
            min-height: 220px;
            resize: vertical;
            grid-column: 1 / -1;
            line-height: 1.6;
        }

        /* Buttons */
        .actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 25px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 24px;
            border-radius: 12px;
            border: 2px solid transparent;
            background: var(--card);
            color: var(--primary-2);
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s;
            min-width: 200px;
            font-size: 1rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }

        .btn.primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: white;
            border-color: var(--accent);
        }

        .btn.secondary {
            background: var(--card);
            border-color: var(--border);
            color: var(--primary);
        }

        /* Responsive */
        @media (max-width: 900px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .feedback-grid {
                grid-template-columns: 1fr;
            }
            
            .score-breakdown {
                grid-template-columns: 1fr;
            }
            
            .actions {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                min-width: unset;
            }
            
            .header h1 {
                font-size: 1.4rem;
            }
            
            .header img {
                height: 60px;
            }
            
            .loading-message {
                font-size: 1.1rem;
                padding: 0 20px;
            }
            
            .loading-steps {
                width: 95%;
                padding: 15px;
            }
        }

        @media (max-width: 600px) {
            .score-circle {
                width: 120px;
                height: 120px;
                font-size: 2.5rem;
            }
            
            .card {
                padding: 16px;
            }
            
            .loading-spinner {
                width: 50px;
                height: 50px;
            }
            
            .loading-step {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }
        }
    

/* ===========================================================================
   Ergaenzungen fuer die eigenstaendige Fassung
   Konten, Navigation, Verlauf, Verwaltung. Nutzt dieselben Variablen wie
   oben, damit nichts aus dem Rahmen faellt.
   =========================================================================== */

/* --- Navigation im Kopf --------------------------------------------------- */

.kopf-nav {
  background: var(--primary);
  padding: 9px 14px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center; justify-content: center;
  font-size: .93rem;
}
.kopf-nav a {
  color: #fff; text-decoration: none;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  font-weight: 600; line-height: 1.2;
  transition: background .12s ease;
}
.kopf-nav a:hover { background: rgba(255,255,255,.26); }
.kopf-nav .stand { color: rgba(255,255,255,.92); font-weight: 600; }
.kopf-nav .stand.knapp { color: #ffe08a; }
.kopf-nav .stand.leer  { color: #ffc9c2; }

/* --- Meldungen ------------------------------------------------------------ */

.hinweis {
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(76,175,80,.08), rgba(76,175,80,.02));
  padding: 16px 20px; margin-bottom: 22px;
}
.hinweis.warnung { border-left-color: var(--warning); background: #fff8ec; }
.hinweis p:last-child { margin-bottom: 0; }

.fehler {
  border: 1px solid #f2c2be; border-left: 5px solid var(--danger);
  border-radius: var(--radius); background: #ffebee;
  padding: 16px 20px; margin-bottom: 22px; color: #c62828;
}
.fehler p { margin: 0 0 10px; }

/* --- Kontoseiten ---------------------------------------------------------- */

.karte {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 30px);
  margin-bottom: 20px;
}
.karte h1 { font-size: 1.5rem; color: var(--primary); margin-bottom: 8px; }
.karte .subline { color: var(--muted); margin-bottom: 18px; }

.karte form label {
  display: block; margin: 14px 0 5px; font-weight: 600; font-size: .93rem; color: var(--muted-2);
}
.karte form label .klein { font-weight: 400; color: var(--muted); }

.karte form input[type="email"],
.karte form input[type="text"],
.karte form input[type="password"] {
  width: 100%; font-family: inherit; font-size: 1rem;
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); color: var(--muted-2);
}
.karte form input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(76,175,80,.18);
}
.karte form label.kasten {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; font-weight: 400; font-size: .93rem; line-height: 1.55;
}
.karte form label.kasten input { margin-top: 3px; flex: 0 0 auto; }

.btn.breit { display: block; width: 100%; margin-top: 22px; text-align: center; }

.konto-links { margin-top: 18px; text-align: center; color: var(--muted); font-size: .93rem; }
.konto-hinweis {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .88rem; text-align: center;
}

/* --- Auswahl gesperrter Faelle -------------------------------------------- */

.form-group select option:disabled { color: #a8b5a8; }
.gesperrt-hinweis { color: var(--warning); font-size: .92rem; margin-top: 10px; font-weight: 600; }

.zaehler { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.zaehler.knapp { color: var(--warning); font-weight: 700; }

.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- Musterloesung -------------------------------------------------------- */

.musterloesung { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.musterloesung summary { cursor: pointer; font-weight: 700; color: var(--primary-2); }
.musterloesung-text { margin-top: 14px; line-height: 1.7; }
.musterloesung-text p { margin: 0 0 12px; }
.musterloesung-text.eigene {
  background: rgba(0,0,0,.03); border-left: 3px solid var(--border);
  padding: 14px 16px; border-radius: 0 10px 10px 0; white-space: pre-wrap;
}
.musterloesung-fuss { color: var(--muted); font-size: .88rem; margin-top: 8px; }

/* --- Verlauf -------------------------------------------------------------- */

.verlauf-liste { display: grid; gap: 10px; margin-top: 18px; }
.verlauf-zeile {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
.verlauf-zeile:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.verlauf-punkte {
  flex: 0 0 auto; min-width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; color: #fff; font-weight: 700; font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.verlauf-punkte.gut     { background: linear-gradient(135deg, var(--primary-light), var(--accent-dark)); }
.verlauf-punkte.mittel  { background: linear-gradient(135deg, #ffb74d, var(--warning)); }
.verlauf-punkte.schwach { background: linear-gradient(135deg, #ef9a9a, var(--danger)); }
.verlauf-mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.verlauf-titel { font-weight: 700; line-height: 1.35; }
.verlauf-klein { color: var(--muted); font-size: .86rem; }
.verlauf-deckel { color: var(--warning); font-weight: 700; }
.verlauf-pfeil { flex: 0 0 auto; color: var(--muted); font-size: 1.6rem; line-height: 1; }

.brotkrume { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.brotkrume a { color: var(--primary-2); }
.fortschritt-text { color: var(--muted); margin: 14px 0; }

/* --- Verwaltung ----------------------------------------------------------- */

.admin-reiter {
  display: flex; gap: 5px; flex-wrap: wrap;
  border-bottom: 2px solid var(--border); margin: 20px 0 24px;
}
.admin-reiter a {
  padding: 10px 18px; border-radius: 12px 12px 0 0;
  color: var(--muted); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.admin-reiter a:hover { background: rgba(76,175,80,.08); }
.admin-reiter a.aktiv { background: var(--primary-2); color: #fff; }

.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 28px;
}
.kennzahl {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow);
}
.kennzahl .wert {
  font-size: 1.7rem; font-weight: 700; line-height: 1.1;
  color: var(--primary-2); font-variant-numeric: tabular-nums;
}
.kennzahl .was { color: var(--muted); font-size: .86rem; }

.pruefliste { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.pruefliste li {
  background: var(--card); border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: 14px 16px; line-height: 1.6;
}
.pruefliste li.warn { border-left-color: var(--warning); background: #fff8ec; }

.tabelle { width: 100%; border-collapse: collapse; margin-bottom: 28px; font-size: .93rem; }
.tabelle th {
  text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--border);
  color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
}
.tabelle td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }

.klein { font-size: .85rem; color: var(--muted); }

form.inline { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; margin: 0 6px 5px 0; }
form.inline input, form.inline select {
  font-family: inherit; font-size: .9rem; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted-2);
}
.btn.klein { padding: 7px 14px; font-size: .86rem; }

.suche { display: flex; gap: 8px; margin-bottom: 18px; }
.suche input {
  font-family: inherit; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 10px; min-width: 240px; background: var(--card); color: var(--muted-2);
}

.freitest-liste {
  max-height: 460px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); margin-bottom: 16px;
}
.freitest-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  font-size: .92rem; cursor: pointer;
}
.freitest-zeile:last-child { border-bottom: 0; }
.freitest-zeile:hover { background: rgba(76,175,80,.06); }
.freitest-zeile .nr  { color: var(--muted); min-width: 2.4em; font-variant-numeric: tabular-nums; }
.freitest-zeile .tit { flex: 1 1 auto; }
.freitest-zeile .kat { color: var(--muted); font-size: .86rem; white-space: nowrap; }

.langtext {
  white-space: pre-wrap; font-size: .82rem; background: rgba(0,0,0,.04);
  padding: 10px; border-radius: 8px; max-height: 260px; overflow: auto;
}

/* --- Fuss ----------------------------------------------------------------- */

.uh-fuss {
  border-top: 1px solid var(--border); margin-top: 40px;
  padding: 24px 16px 32px; text-align: center;
}
.uh-fuss-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.uh-fuss-links a { color: var(--primary-2); font-size: .92rem; }
.uh-fuss-text { color: var(--muted); font-size: .86rem; line-height: 1.7; }


/* --- Verlauf, Einzelansicht -----------------------------------------------
   Nutzt dieselben Bausteine wie die Auswertung auf der Startseite.
-------------------------------------------------------------------------- */

.fall {
  background: var(--card); border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 26px); margin-bottom: 20px;
}
.fall-kopf {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--muted); margin-bottom: 8px;
}
.fall-kopf .nummer { font-weight: 700; letter-spacing: .02em; }
.fall h1 { font-size: 1.4rem; color: var(--primary); margin-bottom: 12px; }
.fallbeschreibung { font-size: 1.05rem; line-height: 1.7; }

.ergebnis {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 26px); margin-bottom: 20px;
}
.gesamt { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.gesamt-zahl { font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--primary-2); }
.gesamt-von { color: var(--muted); }

.deckel-hinweis {
  background: #fff8ec; border: 1px solid #f0d3a8; border-radius: 10px;
  padding: 12px 14px; margin: 14px 0 0; font-size: .93rem;
}

.kriterien { margin: 22px 0 6px; display: grid; gap: 18px; }
.kriterium { }
.kriterium-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px; font-size: .96rem; font-weight: 600;
}
.kriterium-wert { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kriterium-balken { height: 9px; border-radius: 999px; background: rgba(0,0,0,.07); overflow: hidden; }
.kriterium-balken > span { display: block; height: 100%; border-radius: 999px; }
.kriterium-balken .gut     { background: linear-gradient(90deg, var(--primary-light), var(--accent-dark)); }
.kriterium-balken .mittel  { background: linear-gradient(90deg, #ffb74d, var(--warning)); }
.kriterium-balken .schwach { background: linear-gradient(90deg, #ef9a9a, var(--danger)); }
.kriterium-hinweis { margin: 7px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.6; }

.feedback { margin: 26px 0 10px; line-height: 1.75; }
.feedback p { margin: 0 0 14px; }

.nachher { margin-top: 22px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

a.link { color: var(--primary-2); text-decoration: underline; }


/* --- Ergebnis --------------------------------------------------------------
   Vorher war der ganze Ergebnisblock gruen, unabhaengig vom Ergebnis. Eine
   18 von 100 in Feiergruen sagt das Gegenteil dessen, was gemeint ist.
   Jetzt: helle Karte, und Rahmen, Kreis und Balken tragen die Farbe der
   erreichten Stufe.
-------------------------------------------------------------------------- */

.score-display {
  background: var(--card);
  color: var(--muted-2);
  border: 1px solid var(--border);
  border-top: 5px solid var(--stufe, var(--accent));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 34px);
  margin-bottom: 24px;
  text-align: center;
}
.score-display::before { display: none; }

.score-display.stufe-gut     { --stufe: #2e7d32; }
.score-display.stufe-mittel  { --stufe: #ef8f1c; }
.score-display.stufe-schwach { --stufe: #d84a3c; }

.score-circle {
  width: 120px; height: 120px;
  background: var(--stufe, var(--accent));
  border: 0;
  color: #fff;
  font-size: 2.6rem; font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  margin: 0 auto 16px;
}

.score-grade {
  font-size: 1.25rem; font-weight: 700;
  color: var(--stufe, var(--primary));
  opacity: 1; margin-top: 4px;
}

/* --- Aufschluesselung: eine Zeile je Kriterium ---------------------------- */

.score-breakdown {
  display: block;
  margin-top: 26px;
  text-align: left;
  border-top: 1px solid var(--border);
}

.score-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name  punkte"
    "balken balken"
    "text  text";
  align-items: baseline;
  column-gap: 20px;
  background: none; border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 2px;
}
.score-category:last-child { border-bottom: 0; }
.score-category .kopfzeile { display: contents; }

.score-category h5 {
  grid-area: name; margin: 0;
  font-size: 1rem; font-weight: 600; line-height: 1.4;
  color: var(--muted-2);
  hyphens: manual; overflow-wrap: break-word;
}

.score-category .score-zahl { grid-area: punkte; white-space: nowrap; line-height: 1; }
.score-category .category-score { font-size: 1.3rem; font-weight: 800; color: var(--muted-2); }
.score-category .category-max   { font-size: .86rem; color: var(--muted); margin-left: 3px; }

.score-category .balken {
  grid-area: balken; height: 6px; border-radius: 999px;
  background: rgba(0,0,0,.08); overflow: hidden; margin: 10px 0 11px;
}
.score-category .balken > span { display: block; height: 100%; border-radius: 999px; background: #2e7d32; }
.score-category .balken > span.mittel  { background: #ef8f1c; }
.score-category .balken > span.schwach { background: #d84a3c; }

.score-category .hinweis-text {
  grid-area: text; margin: 0;
  font-size: .9rem; line-height: 1.6; color: var(--muted);
  max-width: 80ch;
}

/* Die Rueckmeldung darunter bekommt denselben farbigen Rand */
.card.rueckmeldung { border-top: 5px solid var(--stufe-karte, var(--accent)); }
.card.rueckmeldung.stufe-gut     { --stufe-karte: #2e7d32; }
.card.rueckmeldung.stufe-mittel  { --stufe-karte: #ef8f1c; }
.card.rueckmeldung.stufe-schwach { --stufe-karte: #d84a3c; }

@media (max-width: 560px) {
  .score-circle { width: 96px; height: 96px; font-size: 2.1rem; }
  .score-display { padding: 22px 16px; }
  .score-category { column-gap: 12px; }
  .score-category h5 { font-size: .95rem; }
}


/* --- Kaufseite -------------------------------------------------------------
   Die Laufzeiten stehen nebeneinander, damit der Vergleich ohne Rechnen
   funktioniert. Die mittlere Stufe ist hervorgehoben - sie soll die
   naheliegende Wahl sein.
-------------------------------------------------------------------------- */

.pakete {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-bottom: 22px;
}

.paket {
  position: relative; display: block; cursor: pointer;
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 22px 20px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.paket:hover { border-color: var(--primary-light); box-shadow: var(--shadow); }
.paket.hervor { border-color: var(--accent); box-shadow: var(--shadow-2); }
.paket:has(input:checked) { border-color: var(--primary-2); box-shadow: var(--shadow-2); }

/* Der Radiopunkt selbst wird nicht gebraucht, die Karte ist die Auswahl.
   Er bleibt für die Tastaturbedienung erreichbar. */
.paket input {
  position: absolute; top: 18px; right: 18px; accent-color: var(--primary-2);
}

.paket-inhalt { display: flex; flex-direction: column; gap: 6px; }

.paket-marke {
  align-self: flex-start;
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 3px 11px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 4px;
}
.paket-name  { font-weight: 700; font-size: 1.05rem; padding-right: 28px; }
.paket-preis { font-size: 2rem; font-weight: 800; color: var(--primary-2); line-height: 1.1; }
.paket-klein { color: var(--muted); font-size: .86rem; }
.paket-text  { color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: 4px; }

@media (max-width: 600px) {
  .pakete { grid-template-columns: 1fr; }
  .paket-preis { font-size: 1.7rem; }
}


/* --- Passwort ein- und ausblenden ------------------------------------------
   Der Schalter sitzt im Feld. "Anzeigen" im Klartext statt eines Symbols:
   funktioniert ohne Symbolschrift und ist zugleich die Beschriftung fuer
   Vorleseprogramme.
-------------------------------------------------------------------------- */

.pw-feld { position: relative; }

.pw-feld input[type="password"],
.pw-feld input[type="text"] {
  padding-right: 6.5em;   /* Platz fuer den Schalter */
}

.pw-schalter {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: 0; padding: 6px 8px;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--primary-2); cursor: pointer;
  border-radius: 6px;
}
.pw-schalter:hover  { background: rgba(76,175,80,.12); }
.pw-schalter:focus  { outline: 2px solid var(--accent); outline-offset: 1px; }


/* --- Überschrift im Hero ---------------------------------------------------
   Der grüne Balken trägt den Produktnamen, die Seite selbst braucht
   trotzdem eine Überschrift. Sonst beginnt das Werkzeug ohne Ansage.
-------------------------------------------------------------------------- */

.hero h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: var(--primary);
  margin: 0 0 8px;
  line-height: 1.25;
}

/* --- Angebotsstreifen ------------------------------------------------------
   Text und Schaltfläche nebeneinander. Ein Hinweis, in dem der Kaufweg nur
   als Link im Fließtext steht, wird überlesen.
-------------------------------------------------------------------------- */

.angebot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: linear-gradient(145deg, rgba(76,175,80,.10), rgba(76,175,80,.03));
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 22px;
}
.angebot.warnung { border-left-color: var(--warning); background: #fff8ec; }
.angebot-text { flex: 1 1 320px; line-height: 1.6; }
.angebot .btn { flex: 0 0 auto; }

.gesperrt-hinweis { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }


/* --- Pakettabelle im Adminbereich ------------------------------------------
   Jede Zeile ist ein eigenes Formular. Damit die Zellen trotzdem im Raster
   der Tabelle bleiben, wird das form-Element als table-row dargestellt -
   sonst reisst es die Spalten auseinander.
-------------------------------------------------------------------------- */

.tabelle form.paket-zeile { display: contents; }

.tabelle input[type="text"],
.tabelle input[type="number"] {
  font-family: inherit; font-size: .92rem; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--muted-2);
}

.tabelle h3, h3 { color: var(--primary); font-size: 1.1rem; margin: 26px 0 10px; }
.subline { color: var(--muted); margin-bottom: 16px; line-height: 1.6; }


/* --- Nutzertabelle ---------------------------------------------------------
   Vier Spalten mit Formularen. Ohne feste Breiten quetscht der Browser die
   Eingabefelder zusammen, bis sie unlesbar sind.
-------------------------------------------------------------------------- */

.tabelle.nutzer { table-layout: fixed; }
.tabelle.nutzer th:nth-child(1), .tabelle.nutzer td:nth-child(1) { width: 22%; }
.tabelle.nutzer th:nth-child(2), .tabelle.nutzer td:nth-child(2) { width: 22%; }
.tabelle.nutzer th:nth-child(3), .tabelle.nutzer td:nth-child(3) { width: 26%; }
.tabelle.nutzer th:nth-child(4), .tabelle.nutzer td:nth-child(4) { width: 18%; }
.tabelle.nutzer th:nth-child(5), .tabelle.nutzer td:nth-child(5) { width: 12%; }
.tabelle.nutzer td { word-break: break-word; }

/* Formulare in Tabellenzellen: untereinander statt nebeneinander */
form.stapel { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
form.stapel .feldzeile { display: flex; gap: 6px; }
form.stapel .btn { align-self: flex-start; }

.zugang-zeile {
  padding: 6px 0; border-bottom: 1px dashed var(--border); line-height: 1.5;
}
.zugang-zeile:last-child { border-bottom: 0; }

.warnwort { color: var(--danger); font-weight: 700; }
.gut-wort  { color: var(--primary-2); font-weight: 700; }

@media (max-width: 900px) {
  .tabelle.nutzer { table-layout: auto; }
  .tabelle.nutzer th, .tabelle.nutzer td { display: block; width: auto; }
  .tabelle.nutzer thead { display: none; }
  .tabelle.nutzer tr { display: block; border-bottom: 2px solid var(--border); padding: 10px 0; }
}




/* Der Kreis mit der Schrittnummer heisst im Originalstylesheet .step-no.
   Auf der Infoseite steht .schritt-nr, damit die Vorlage deutschsprachig
   bleibt. Beide sollen gleich aussehen. */
.schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 34px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 700; font-size: .95rem;
}

/* --- Infoseite -------------------------------------------------------------
   Oeffentlich erreichbar, erklaert das Werkzeug. Nutzt dieselben Karten wie
   der Rest, ergaenzt um Ablauf, Bilder und Preisuebersicht.
-------------------------------------------------------------------------- */

.hero-knoepfe { margin: 18px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }

.ablauf { display: grid; gap: 18px; margin: 18px 0 8px; }
.ablauf-schritt { display: flex; gap: 14px; align-items: flex-start; }
.ablauf-schritt > div { flex: 1 1 auto; }
.ablauf-schritt strong { display: block; margin-bottom: 3px; color: var(--primary); }
.ablauf-schritt p { margin: 0; color: var(--muted); line-height: 1.6; }

figure.bild { margin: 22px 0 0; }
figure.bild img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
}

.kriterienliste, .kategorienliste { list-style: none; padding: 0; margin: 18px 0; }
.kriterienliste li {
  padding: 10px 0 10px 30px; border-bottom: 1px solid var(--border);
  position: relative; line-height: 1.5;
}
.kriterienliste li:last-child { border-bottom: 0; }
.kriterienliste li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}

.kategorienliste li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.kategorienliste li:last-child { border-bottom: 0; }
.kat-name { flex: 1 1 auto; }
.kat-zahl { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.preisliste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin: 20px 0;
}
.preis {
  position: relative; text-align: center;
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 20px 16px; background: var(--card);
  display: flex; flex-direction: column; gap: 4px;
}
.preis.hervor { border-color: var(--accent); box-shadow: var(--shadow); }
.preis .paket-marke { position: static; align-self: center; margin-bottom: 6px; }
.preis-dauer { color: var(--muted); font-size: .92rem; }
.preis-zahl  { font-size: 2rem; font-weight: 800; color: var(--primary-2); line-height: 1.1; }
.preis-klein { color: var(--muted); font-size: .84rem; }


/* --- Weiterlesen -----------------------------------------------------------
   Verweise auf die Blogbeitraege. Bewusst mit Beschreibung: Ein nackter
   Titel sagt nicht, ob sich das Lesen lohnt.
-------------------------------------------------------------------------- */

.lesen { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 16px; }
.lesen li {
  padding: 14px 16px; border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--card);
}
.lesen a {
  display: block; font-weight: 700; color: var(--primary-2);
  margin-bottom: 5px; line-height: 1.4;
}
.lesen span { display: block; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Das hidden-Attribut muss gewinnen.

   Der Browser setzt fuer [hidden] nur display:none in seinem eigenen
   Stylesheet. Jede Klasse mit eigenem display sticht das aus - deshalb blieb
   der Hinweis "Dieser Fall gehoert zum Vollzugang" sichtbar, obwohl das
   Skript ihn versteckt hatte. Diese Regel gilt fuer alle Elemente auf einmal,
   damit derselbe Fehler nicht beim naechsten Baustein wieder auftritt.
--------------------------------------------------------------------------- */

[hidden] { display: none !important; }