/* ── GUT NaturForum — Mein Profil (Nutzer) ──────────────────────────────── */

.gut-np-wrap {
    max-width: var(--gut-w-form);
    margin: 40px auto;
    padding: 0 16px 60px;
    font-family: 'DM Sans', sans-serif;
}

.gut-np-card {
    background: #fff;
    border: 1px solid #c0d4a0;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.gut-np-center {
    text-align: center;
    padding: 40px;
}

.gut-np-center a {
    color: #5c7a3e;
    font-weight: 500;
}

.gut-np-title {
    font-family: 'Lora', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: #2d3d1e;
    margin: 0 0 6px;
}

.gut-np-sub {
    font-size: 14px;
    color: #6a7060;
    margin: 0;
}

/* Vertrieb-Konto: Badge neben dem Titel + Link zum CRM (nur CRM-berechtigte Konten) */
.gut-np-vertrieb-badge {
    display: inline-block;
    vertical-align: middle;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    background: #eef5e4;
    border: 1px solid #d5e3c0;
    color: #2d4a1e;
    padding: 3px 11px;
    border-radius: 999px;
    margin-left: 10px;
}
.gut-np-crm-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #5c7a3e !important;
}
.gut-np-crm-link:hover { color: #2d4a1e !important; }

/* Deep-Link aus der Suche (#gut-np-benachrichtigungen): sauberer Scroll-Abstand
   unter der fixierten Kopfzeile + kurzes Hervorheben, damit der Nutzer den
   richtigen Abschnitt sofort erkennt. */
#gut-np-benachrichtigungen {
    scroll-margin-top: 96px;
}
#gut-np-benachrichtigungen:target {
    border-color: #5c7a3e;
    box-shadow: 0 0 0 2px rgba(92,122,62,0.35), 0 2px 16px rgba(0,0,0,0.06);
    animation: gut-np-target-flash 1.8s ease 1;
}
@keyframes gut-np-target-flash {
    0%   { box-shadow: 0 0 0 3px rgba(92,122,62,0.55), 0 2px 16px rgba(0,0,0,0.08); }
    100% { box-shadow: 0 0 0 2px rgba(92,122,62,0.35), 0 2px 16px rgba(0,0,0,0.06); }
}

.gut-np-card-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8aac5a;
    margin: 0 0 18px;
}

.gut-np-field {
    margin-bottom: 14px;
}

.gut-np-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #4a5040;
    margin-bottom: 5px;
}

.gut-np-field input[type="text"],
.gut-np-field input[type="email"],
.gut-np-field input[type="password"] {
    width: 100%;
    height: 44px;                             /* Feld-Standardhöhe = Button-Höhe */
    padding: 0 14px;
    border: 1px solid #c0d4a0;               /* helles Grün wie die Suchleiste */
    border-radius: 8px;
    font: normal 14px/1.4 'DM Sans', sans-serif !important;
    color: #2a2a2a !important;
    box-sizing: border-box;
    background: #f6f8f0;                       /* Feld-Hintergrund wie die Suchleiste */
}

.gut-np-field input:disabled {
    background: #f3f4ef;
    color: #9aa090 !important;
}

.gut-np-field input:focus {
    outline: none;
    border-color: #5c7a3e;
    background: #fff;
}

/* Browser-Autofill nicht mehr blau — gleicher heller Grünton */
.gut-np-field input:-webkit-autofill,
.gut-np-field input:-webkit-autofill:hover,
.gut-np-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f6f8f0 inset !important;
    box-shadow: 0 0 0 1000px #f6f8f0 inset !important;
    -webkit-text-fill-color: #2a2a2a !important;
    transition: background-color 9999s ease-out 0s;
}

.gut-np-hint {
    font-size: 11px;
    color: #9aa090;
    margin: 6px 0 0;
}

.gut-np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;                             /* exakt so hoch wie die Eingabefelder */
    box-sizing: border-box;
    padding: 0 24px;
    background: #5c7a3e;
    color: #f6f8f0 !important;
    border: none;
    border-radius: 8px;
    font: 500 14px/1 'DM Sans', sans-serif !important;
    cursor: pointer;
    transition: background 0.18s;
}

.gut-np-btn:hover {
    background: #2d4a1e;
}

.gut-np-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gut-np-msg {
    font-size: 13px;
    margin-top: 12px;
    display: none;
}

.gut-np-footer {
    text-align: center;
}

.gut-np-footer a {
    font-size: 13px;
    color: #9aa090;               /* neutrales Abmelden (kein Rot) — wie im Dashboard */
}

/* ── Info- / Lead-Texte ─────────────────────────────────────────────────── */
.gut-np-info {
    border-color: #c0d4a0;
    background: #f6f8f0;
    color: #3d4a2e;
    font-size: 14px;
    padding: 16px 20px;
}

.gut-np-lead {
    font-size: 13px;
    line-height: 1.55;
    color: #6a7060;
    margin: 0 0 16px;
}

.gut-np-hint-warn {
    color: #b06a1e;
}

/* ── Newsletter: Toggle-Zeile ───────────────────────────────────────────── */
.gut-np-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    margin-bottom: 14px;
}

.gut-np-toggle-row input[type="checkbox"] {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: #5c7a3e;
    flex-shrink: 0;
}

.gut-np-toggle-row strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2d3d1e;
}

.gut-np-toggle-sub {
    display: block;
    font-size: 12px;
    color: #8a907e;
    margin-top: 2px;
    line-height: 1.45;
}

/* ── Umkreis-Radius (Pills) ─────────────────────────────────────────────── */
.gut-np-radius {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 28px;
}

.gut-np-radius-label {
    font-size: 12px;
    color: #6a7060;
    margin-right: 2px;
}

.gut-np-pill {
    cursor: pointer;
}

.gut-np-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gut-np-pill span {
    display: inline-block;
    padding: 6px 13px;
    border: 1px solid #c0d4a0;
    border-radius: 999px;
    font-size: 12.5px;
    color: #4a5040;
    background: #fff;
    transition: all .15s;
}

.gut-np-pill input:checked + span {
    background: #5c7a3e;
    border-color: #5c7a3e;
    color: #fff;
}

.gut-np-pill span:hover {
    border-color: #5c7a3e;
}

/* ── Interessen (Kategorien) ────────────────────────────────────────────── */
.gut-np-interessen {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eef1e7;
}

.gut-np-interessen-title {
    font-size: 13px;
    line-height: 1.5;
    color: #6a7060;
    margin: 0 0 14px;
}

.gut-np-kat-group {
    margin-bottom: 16px;
}

.gut-np-kat-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8aac5a;
    margin-bottom: 8px;
}

.gut-np-kat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gut-np-chip {
    cursor: pointer;
}

.gut-np-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gut-np-chip span {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #c0d4a0;
    border-radius: 999px;
    font-size: 13px;
    color: #4a5040;
    background: #fff;
    transition: all .15s;
}

.gut-np-chip input:checked + span {
    background: #5c7a3e;
    border-color: #5c7a3e;
    color: #fff;
}

.gut-np-chip span:hover {
    border-color: #5c7a3e;
}

/* ── Gespeicherte Anbieter (Merkliste) ──────────────────────────────────── */
.gut-np-saved-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gut-np-saved-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dfe6d2;
    border-radius: 10px;
    padding: 4px 6px 4px 4px;
    transition: border-color .15s, box-shadow .15s;
}

.gut-np-saved-item:hover {
    border-color: #c0d4a0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.gut-np-saved-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
}

.gut-np-saved-name {
    font-size: 15px;
    font-weight: 600;
    color: #2d3d1e;
}

.gut-np-saved-kat {
    font-size: 12px;
    color: #8aac5a;
}

/* Entfernen-Knopf.
   Das „x" sass 5px rechts und 9px unter der Mitte seiner Flaeche. Ursache war
   nicht die Schriftart, sondern Astra: Das Theme legt `padding: 15px 30px` auf
   JEDE Schaltflaeche. Aus dem 30x30-Kreis wurde dadurch ein 60x30-Oval, und
   das Zeichen stand dort, wo der Innenabstand es hingeschoben hat.

   Deshalb hier: Innenabstand auf null, und das Zeichen ueber Flexbox in beide
   Richtungen zentriert — das haelt auch dann, wenn Astra seine Werte einmal
   aendert, weil die Mitte dann relativ zur tatsaechlichen Groesse bestimmt wird
   und nicht ueber eine geraten passende Zeilenhoehe. */
.gut-np-wrap .gut-np-saved-remove {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-right: 6px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f4ef !important;
    color: #9aa090 !important;
    border-radius: 999px !important;
    font: 400 18px/1 'DM Sans', sans-serif !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.gut-np-wrap .gut-np-saved-remove:hover,
.gut-np-wrap .gut-np-saved-remove:focus {
    background: #5c7a3e !important;
    color: #fff !important;
}

.gut-np-empty {
    font-size: 13.5px;
    line-height: 1.6;
    color: #8a907e;
    margin: 0;
}

.gut-np-empty strong {
    color: #5c7a3e;
}

/* ── Reiter ─────────────────────────────────────────────────────────────────
   Aufbau und Bedienung bewusst identisch zum Anbieter-Dashboard
   (.gut-dash-tabs). Wer beides nutzt, soll nicht zwei Bedienkonzepte lernen.

   Die `!important` sind hier noetig und nicht nachlaessig: Reiter sind
   <button>, und Astra faerbt jede Schaltflaeche mit eigener Flaeche, eigener
   Schriftfarbe und einem Schatten. Ohne Kennzeichnung saehen die Reiter aus
   wie zwei Knoepfe statt wie Reiter.                                         */
.gut-np-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #dfe6d2;
    margin: 0 0 22px;
}
.gut-np-wrap .gut-np-tab {
    -webkit-appearance: none;
    appearance: none;
    background: none !important;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 11px 18px;
    font: 500 14px/1 'DM Sans', sans-serif;
    color: #8a907e !important;
    cursor: pointer;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color .15s, border-color .15s;
}
.gut-np-wrap .gut-np-tab:hover,
.gut-np-wrap .gut-np-tab:focus {
    color: #5c7a3e !important;
    background: none !important;
    box-shadow: none !important;
}
.gut-np-wrap .gut-np-tab.is-active {
    color: #2d4a1e !important;
    border-bottom-color: #5c7a3e !important;
}
.gut-np-tabpanel[hidden] { display: none; }

/* Anzahl am Reiter — dezent, keine Warnung. */
.gut-np-tab-zahl {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: #eef3e6;
    color: #5c7a3e;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 1px;
}

@media (max-width: 560px) {
    .gut-np-tabs { gap: 0; }
    .gut-np-wrap .gut-np-tab { flex: 1; padding: 11px 8px; text-align: center; }
}