:root {
    /* 🎨 Farben */
    --pp-color-primary: #6A00AF;
    --pp-color-secondary: #FF8615;
    --pp-color-text: #1C1C1C;
    --pp-color-accent: #6A00AF;

    /* 🎨 Light Varianten */
    --pp-color-light-primary: #FFF6EE;
    --pp-color-light-secondary: #F8EDFF;
    --pp-color-off-white: #FBFBFB;

    /* 🔤 Typography */
    --pp-font-main: 'Nunito Sans', sans-serif;
    --pp-font-size: 16px;
    --pp-font-weight: 500;
}

/* ============================= */
/* 🔥 THEME RESETS */
/* ============================= */

.pp-fullwidth .site-main {
    max-width: 100% !important;
    padding: 0 !important;
}

.pp-fullwidth .content-area,
.pp-fullwidth .site {
    max-width: 100% !important;
}

/* 🔥 NEU: FULLWIDTH FIX */
.pp-fullwidth .site,
.pp-fullwidth .site-main,
.pp-fullwidth .content-area,
.pp-fullwidth .entry-content,
.pp-fullwidth .container,
.pp-fullwidth .wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 🔥 Wrapper wirklich full width */
.pp-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* ============================= */
/* 🔤 BASE */
/* ============================= */

body {
    font-family: var(--pp-font-main);
    font-size: var(--pp-font-size);
    font-weight: var(--pp-font-weight);
    color: var(--pp-color-text);
}

a {
    text-decoration: none !important;
}

/* ============================= */
/* 🧱 LAYOUT */
/* ============================= */

.pp-wrapper {
    min-height: 300px;
    padding: 40px 20px;

    background: radial-gradient(
        circle at top left,
        var(--pp-color-secondary),
        var(--pp-color-light-primary)
    );
}

.pp-container {
    max-width: 1140px;
    margin: 0 auto;

    padding: 30px;
    border-radius: 20px;

    background: linear-gradient(
        135deg,
        var(--pp-color-off-white),
        var(--pp-color-light-secondary)
    );

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================= */
/* 🧩 COMPONENTS */
/* ============================= */

/* Card */
.pp-card {
    padding: 20px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Buttons */
.pp-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;

    line-height: 1 !important;
    height: auto !important;

    margin: 0 !important;
    vertical-align: top !important;

    padding: 12px 20px !important;
    border-radius: 20px !important;

    color: var(--pp-color-off-white) !important;
    background: var(--pp-color-primary);

    font-weight: 600;
    text-align: center;

    transition: background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pp-btn:hover {
    background: var(--pp-color-secondary);
    color: var(--pp-color-off-white);
}

.pp-btn-secondary {
    background: var(--pp-color-light-secondary);
    color: var(--pp-color-off-white);
}

/* Forms */
.pp-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    
    margin-bottom: 30px;
}

.pp-form input {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 16px;
    margin: 0;
}

.pp-form input:focus {
    outline: none;
    border-color: var(--pp-color-primary);
}

.pp-form .pp-btn {
    width: 100%;
}

/* Grid */
.pp-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

/* ============================= */
/* 🔐 LOGIN PAGE */
/* ============================= */

.pp-login .pp-container {
    align-items: center; /* 🔥 verhindert stretch */
}

.pp-login .pp-card {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.pp-login .pp-form {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.pp-login .pp-auth-links {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Login Überschrift sauber */
.pp-login .pp-card h2 {
    margin: 0 0 15px 0;
    text-align: left;
}

/* Login Zusatzlinks */
.pp-auth-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-auth-row p {
    margin: 0;
}

.pp-auth-links a {
    font-size: 14px;
    opacity: 0.7;
}

.pp-auth-links a:hover {
    opacity: 1;
}

/* ============================= */
/* 🔐 REGISTER PAGE */
/* ============================= */

.pp-register-card {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 10px; /* 🔥 Hauptspacing */
}

/* ❌ Default Abstände killen */
.pp-register-card h2,
.pp-register-card h3,
.pp-register-card p {
    margin: 0;
}

/* 🔥 Überschriften enger */
.pp-register-card h2 {
    margin-bottom: 5px;
}

.pp-register-card h3 {
    margin-top: 8px;
    font-size: 15px;
}

/* 🔥 FORM → kein eigenes spacing mehr */
.pp-register-card .pp-form {
    gap: 8px;
    margin-bottom: 15px;
}

/* 🔥 FIELD → minimal */
.pp-register-card .pp-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

/* 🔥 INPUT → kompakter */
.pp-register-card input {
    padding: 10px;
}

/* 🔥 GRID → wichtigster Fix */
.pp-register-card .pp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px; /* 👈 vorher wahrscheinlich zu groß */
}

/* 🔥 Auth Links enger */
.pp-register-card .pp-auth-links {
    margin-top: 5px;
}

/* ============================= */
/* 📊 DASHBOARD */
/* ============================= */

.pp-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Optional: Buttons schöner umbrechen */
.pp-dashboard .pp-grid {
    gap: 12px;
}

/* ============================= */
/* 🔧 UTILITIES */
/* ============================= */

/* Abstand zwischen Cards (falls nötig) */
.pp-card + .pp-card {
    margin-top: 10px;
}

/* ============================= */
/* 🔧 CLASS-ERROR */
/* ============================= */

.pp-notice-error {
    background: #ffecec;
    border: 1px solid #ffb3b3;
}

.pp-notice-success {
    background: #ecfff1;
    border: 1px solid #8fd19e;
}

.pp-error {
    background: #ffecec;
    border: 1px solid #ffb3b3;
    color: #cc0000;
    padding: 10px 15px;
    border-radius: 6px;
    margin: 0 auto 15px auto; /* 👈 zentriert */
    max-width: 400px;         /* 👈 begrenzt Breite */
    text-align: center;       /* 👈 Text mittig */
}

.pp-success {
    background: #eef8f1;
    border: 1px solid #b7e2c4;
    color: #1f7a3a;
    padding: 10px 15px;
    border-radius: 6px;
    margin: 0 auto 15px auto; /* 👈 zentriert */
    max-width: 400px;         /* 👈 gleiche Breite wie Error */
    text-align: center;       /* 👈 gleiche Ausrichtung */
}