body {
    font-family: "Segoe UI Variable", Arial, sans-serif;
    margin: 0px;
}

.content {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-logo {
    width: 180px;
}

.profile-logo {
    width: 30px;
}

.login-headline {
    color: var(--color-primary);
    text-align: center;
}

.login-form {
    border-radius: 20px;
    padding: 20px;
    margin: 20vh auto;
    width: 400px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
    vertical-align: middle;
}

.login-form input {
    padding: 10px;
    margin: 10px;
    width: 300px;
    border-radius: 10px;
    border: 1px solid #222222;
}

.form-button {
    display:block;
    padding: 12px;
    margin: 10px auto;
    background-color: var(--color-primary)!important;
    color: white;
    border: 0;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
    transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}

.button {
    padding: 12px;
    background-color: var(--color-primary)!important;
    color: white;
    border: 0;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
    transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
    margin-left: 0;
}

.form-button:hover {
    padding: 14px;
    margin: 8px auto;
}

.login-form a {
    color: #666666;
}

.form-subtext {
    font-size: 0.7em;
}

.reset-error-message {
    text-align: center;
    margin: 300px 0 0 0; 
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: var(--color-primary);
    height: 40px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hamburger {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    margin-right: 10px;
}

.profile-link {
    color: white;
    font-size: 24px;
    text-decoration: none;
}

.language-toggle {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #1f1f1f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
    padding: 0;
    margin-left: 10px;
    margin-top: -5px;
    background-color: #fff;
    vertical-align: middle;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    transition: background 0.2s, border 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.language-toggle:hover {
    border-color: #c9d5ef;
}

footer {
    text-align: center;
    margin-top: auto;
    height: 60px;
    width: 100%;
    line-height: 0.7em;
    padding-bottom: 10px;
}

footer a {
    color: #000000;

}

footer .form-subtext strong {
    font-weight: 600;
}

.errorMessage {
    text-align: center;
    padding: 50px;
}

.center-content {
    text-align: center;
    margin:10vh 20px 10vh 20px;
}

.sidebar {
    height: calc(100vh - 80px);
    width: 250px;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    flex-shrink: 0;
}

.sidebar-links {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 8px 0;
}

.sidebar-company {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-company-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    background-color: #ffffff;
    cursor: pointer;
    text-align: left;
}

.sidebar-company-toggle:hover {
    border-color: #c8c8c8;
}

.company-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
}

.company-avatar.fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.company-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.company-name {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1d;
}

.company-subtitle {
    font-size: 11px;
    color: #666666;
}

.company-caret {
    font-size: 14px;
    color: #666666;
}

.sidebar-company-menu {
    margin-top: 10px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 8px;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-company-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-company-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
}

.sidebar-company-item:hover {
    background-color: #f2f2f2;
}

.sidebar-company-item.active {
    background-color: #e7f3ff;
}

.sidebar-company-empty {
    font-size: 12px;
    color: #666666;
    padding: 6px 8px;
}

.sidebar-link {
    display: block;
    padding: 15px;
    color: #666666;
    text-decoration: none;
    margin-bottom: 5px;
    border-radius: 5px;
}   

.sidebar-link.active {
    background-color: #e0e0e0;
    color: #333333;
}

.sidebar-link-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -4px;
    display: inline-block;
    background-color: #666666;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.sidebar-link-icon--reputation  { -webkit-mask-image: url("/Icon-Reputation.svg");  mask-image: url("/Icon-Reputation.svg"); }
.sidebar-link-icon--locations   { -webkit-mask-image: url("/Icon-Standorte.svg");   mask-image: url("/Icon-Standorte.svg"); }
.sidebar-link-icon--wikipedia   { -webkit-mask-image: url("/Icon-Wikipedia.svg");   mask-image: url("/Icon-Wikipedia.svg"); }
.sidebar-link-icon--competition { -webkit-mask-image: url("/Icon-Competition.svg"); mask-image: url("/Icon-Competition.svg"); }

.sidebar-link-icon-svg {
    background-color: transparent;
    color: #666666;
}

.sidebar-release-link {
    display: block;
    margin: auto 12px 6px;
    padding: 4px 8px;
    font-size: 11px;
    color: #888;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sidebar-release-link:hover {
    color: #333;
    background-color: #f0f0f0;
}

.sidebar-release-link.active {
    color: #333;
    background-color: #e8e8e8;
}

.sidebar-link-label {
    display: inline;
}

.logout-button {
    display: block;
    width: calc(100% - 24px);
    padding: 15px;
    background-color: #ffffff;
    color: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 12px 14px;
    box-sizing: border-box;
}

.logout-button-icon {
    display: none;
    vertical-align: -3px;
}

.sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 6px;
    background-color: transparent;
    color: #666;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-collapse-toggle:hover {
    background-color: #e8e8e8;
    color: #333;
}

/* ============================================================
   Collapsed sidebar (desktop only) - shows only icons + logo
   ============================================================ */
@media (min-width: 769px) {
    .sidebar.collapsed {
        width: 64px;
    }

    .sidebar.collapsed .sidebar-company {
        padding: 12px 8px;
    }

    .sidebar.collapsed .sidebar-company-toggle {
        padding: 8px;
        justify-content: center;
        gap: 0;
    }

    .sidebar.collapsed .sidebar-company-toggle .company-label,
    .sidebar.collapsed .sidebar-company-toggle .company-caret {
        display: none;
    }

    .sidebar.collapsed .sidebar-company-menu {
        position: absolute;
        left: calc(100% + 6px);
        top: 12px;
        width: 240px;
        z-index: 1050;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    }

    .sidebar.collapsed .sidebar-company {
        position: relative;
    }

    .sidebar.collapsed .sidebar-links {
        padding: 8px 6px 0;
    }

    .sidebar.collapsed .sidebar-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 6px;
    }

    .sidebar.collapsed .sidebar-link-label {
        display: none;
    }

    .sidebar.collapsed .sidebar-link-icon {
        margin-right: 0;
        vertical-align: middle;
    }

    .sidebar.collapsed .sidebar-release-link {
        display: none;
    }

    .sidebar.collapsed .logout-button {
        width: calc(100% - 16px);
        margin: 0 8px 10px;
        padding: 10px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar.collapsed .logout-button-icon {
        display: inline-block;
        vertical-align: middle;
    }

    .sidebar.collapsed .logout-button-label {
        display: none;
    }

    .sidebar.collapsed .sidebar-collapse-toggle {
        width: calc(100% - 16px);
        margin: 0 8px 12px;
    }
}

/* Auf Touch-/Mobile-Geraeten ist der Collapse-Toggle nicht sichtbar -
   dort wird die komplette Sidebar via Hamburger ein-/ausgeblendet. */
@media (max-width: 768px) {
    .sidebar-collapse-toggle {
        display: none;
    }
}

.main {
    display: flex;
    flex: 1;
}

.main-content-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-content {
    flex: 1;
    padding: 20px;
}

.dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0 30px;
}

.info-box {
    border: 1px solid #b7e2c4;
    background: #eefaf2;
    color: #1e5a34;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: rgba(30, 90, 52, 0.08) 0px 6px 16px;
    font-size: 14px;
    line-height: 1.5;
    margin: 12px 0 18px;
}

.dashboard-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    color: #1d1d1d;
    text-align: center;
    text-decoration: none;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-tile-icon {
    width: 96px;
    height: 96px;
    display: inline-block;
    background-color: var(--color-primary);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.dashboard-tile-icon--reputation {
    -webkit-mask-image: url("/Icon-Reputation.svg");
            mask-image: url("/Icon-Reputation.svg");
}

.dashboard-tile-icon--locations {
    -webkit-mask-image: url("/Icon-Standorte.svg");
            mask-image: url("/Icon-Standorte.svg");
}

.dashboard-tile-icon--wikipedia {
    -webkit-mask-image: url("/Icon-Wikipedia.svg");
            mask-image: url("/Icon-Wikipedia.svg");
}

.dashboard-tile-icon--competition {
    -webkit-mask-image: url("/Icon-Competition.svg");
            mask-image: url("/Icon-Competition.svg");
}

.dashboard-tile:hover {
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
}

.dashboard-tile-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.dashboard-tile-desc {
    font-size: 13px;
    color: #666666;
}

.keyword-form {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #ffffff;
}

.keyword-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.keyword-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #333333;
}

.keyword-form input,
.keyword-form textarea,
.keyword-form select,
.keyword-table input,
.keyword-table select {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
}

.keyword-form textarea {
    resize: vertical;
    min-height: 96px;
}

.keyword-input-hint {
    margin-top: 4px;
    font-size: 12px;
    color: #666666;
}

.keyword-message {
    color: #1d7a3a;
    font-weight: 600;
}

.keyword-error {
    color: #b00020;
    font-weight: 600;
}

.keyword-info {
    color: #4a5568;
    font-size: 12px;
}

.section-subtitle {
    margin: 6px 0 12px;
    font-size: 13px;
    color: #4a5568;
}

.section-title {
    font-size: 18px;
    margin: 0 0 12px 0;
}

/* ── Info-Tooltip ─────────────────────────────────── */
.info-tooltip-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 6px;
    top: -1px;
}

.info-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background-color 0.15s, color 0.15s;
}

.info-tooltip-trigger:hover,
.info-tooltip-trigger:focus-visible {
    background-color: var(--color-primary);
    color: #fff;
    outline: none;
}

.info-tooltip-bubble {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: 400px;
    padding: 10px 14px;
    background: #1a1a2e;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    white-space: normal;
    text-align: left;
}

.info-tooltip-bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1a1a2e;
}

@media print {
    .info-tooltip-wrapper {
        display: none;
    }
}
/* ── /Info-Tooltip ────────────────────────────────── */

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.section-title-row .section-title {
    margin: 0;
}

.map-recenter-button {
    width: 30px;
    height: 30px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.map-recenter-button:hover {
    border-color: var(--color-primary);
    background-color: #f7f7ff;
}

.press-section {
    margin: 24px 0;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #ffffff;
}

.reputation-intro {
    margin-top: 32px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: none;
}

.reputation-intro-subtitle {
    margin-top: 10px;
    margin-bottom: 14px;
}

.reputation-jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.reputation-jump-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    background-color: #f4f3ff;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
}

.reputation-jump-link:hover {
    background-color: #eae8ff;
}

.reputation-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 4px 4px 4px 12px;
    border-radius: 999px;
    background-color: #f4f3ff;
    border: 1px solid #d4d0ff;
}

.reputation-diff-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.2;
}

.reputation-diff-toggle-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    line-height: 1.2;
}

.reputation-diff-toggle-btn:hover:not(:disabled) {
    background-color: #eae8ff;
}

.reputation-diff-toggle-btn.is-active {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.reputation-diff-toggle-btn:disabled {
    color: #9b97c7;
    cursor: not-allowed;
}

.reputation-jump-target {
    scroll-margin-top: 96px;
}

.places-map-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.places-map {
    width: 100%;
    height: 380px;
}

.locations-healthcheck-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas:
        "gauge latest"
        "meta  latest";
    column-gap: 32px;
    row-gap: 4px;
    align-items: start;
}

.locations-healthcheck-content > .locations-health-gauge {
    grid-area: gauge;
    justify-self: center;
    padding: 40px 40px 0 40px;
    box-sizing: content-box;
}

.locations-healthcheck-content > .locations-health-meta {
    grid-area: meta;
}

.locations-healthcheck-content > .locations-health-latest {
    grid-area: latest;
    align-self: stretch;
    max-width: none;
    width: 100%;
}

.locations-health-gauge {
    position: relative;
    width: 240px;
    height: 140px;
    flex: 0 0 auto;
}

.locations-health-gauge-arc {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 120px;
    border-radius: 120px 120px 0 0;
    background: linear-gradient(to right, #b00020 0%, #f2c94c 50%, #1d7a3a 100%);
}

.locations-health-gauge-cover {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 22px;
    height: 98px;
    border-radius: 98px 98px 0 0;
    background-color: #ffffff;
}

.locations-health-gauge-marker {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 108px;
    transform-origin: bottom center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.locations-health-gauge-point {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px;
}

.locations-health-gauge-point-bad {
    background-color: #b00020;
}

.locations-health-gauge-point-ok {
    background-color: #f2c94c;
}

.locations-health-gauge-point-veryGood {
    background-color: #1d7a3a;
}

.locations-health-gauge-center {
    position: absolute;
    left: 50%;
    top: 70px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.locations-health-gauge-score {
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: #1d1d1d;
}

.locations-health-gauge-scale {
    font-size: 11px;
    line-height: 1;
    font-weight: 400;
    color: #666666;
}

.locations-health-gauge-status {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.locations-health-gauge-status-bad {
    color: #ffffff;
    background-color: #b00020;
    border-color: #b00020;
}

.locations-health-gauge-status-ok {
    color: #333333;
    background-color: #f2c94c;
    border-color: #f2c94c;
}

.locations-health-gauge-status-veryGood {
    color: #ffffff;
    background-color: #1d7a3a;
    border-color: #1d7a3a;
}

.locations-health-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.locations-health-meta .keyword-info {
    margin: 0;
    line-height: 1.3;
}

.locations-health-legend {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: #4a5568;
}

.locations-health-legend-title {
    font-weight: 600;
    color: #333333;
}

.locations-health-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.locations-health-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.locations-health-legend-swatch-bad {
    background-color: #b00020;
}

.locations-health-legend-swatch-ok {
    background-color: #f2c94c;
}

.locations-health-legend-swatch-veryGood {
    background-color: #1d7a3a;
}

.locations-health-latest {
    flex: 1 1 280px;
    min-width: 240px;
    max-width: 420px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    background-color: #fafafa;
    align-self: stretch;
}

.locations-health-latest-title {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.locations-health-latest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.locations-health-latest-item {
    border-bottom: 1px solid #eceef2;
    padding-bottom: 5px;
    font-size: 12px;
    line-height: 1.35;
}

.locations-health-latest-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.locations-health-latest-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
}

.locations-health-latest-author {
    font-weight: 600;
    color: #111827;
}

.locations-health-latest-rating {
    color: #b45309;
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
}

.locations-health-latest-place {
    color: #4b5563;
    font-style: italic;
}

.locations-health-latest-date {
    color: #6b7280;
    font-size: 11px;
}

.locations-health-latest-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 11px;
}

.locations-health-latest-link:hover {
    text-decoration: underline;
}

.locations-health-latest-snippet {
    color: #374151;
    margin-top: 2px;
}

.locations-health-latest-meta {
    margin-top: 3px;
    color: #6b7280;
    font-size: 11px;
}

.locations-health-latest-meta a {
    color: #2563eb;
    text-decoration: none;
}

.locations-health-latest-meta a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .locations-healthcheck-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "gauge"
            "meta"
            "latest";
    }

    .locations-healthcheck-content > .locations-health-gauge {
        padding: 0;
    }

    .locations-health-latest {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.press-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) auto;
    gap: 10px;
    margin-bottom: 12px;
}

.press-form input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
}

.press-toolbar {
    margin-bottom: 10px;
}

.press-toolbar input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    width: min(360px, 100%);
}

.press-table-wrapper {
    overflow-x: auto;
}

.press-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.press-table th,
.press-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.press-table th {
    background-color: #f7f7f7;
    font-weight: 600;
    cursor: pointer;
}

.favicon-cell {
    width: 36px;
    text-align: center;
}

.favicon-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 3px;
}

.favicon-placeholder {
    color: #9aa0a6;
    font-size: 12px;
}


.press-url {
    max-width: 320px;
    word-break: break-all;
}

.press-snippet {
    max-width: 320px;
    word-break: break-word;
}

.press-snippet summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: 12px;
}

.press-snippet details {
    display: inline-block;
}

.press-missing-metrics {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #8a8a8a;
}

.press-delete {
    background-color: #6c757d;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}

.press-refresh {
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 6px;
}

.cron-section {
    margin: 24px 0 12px;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #ffffff;
}

.cron-toolbar {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.cron-toolbar input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    width: min(360px, 100%);
}

.cron-toolbar select {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
}

.cron-table-wrapper {
    overflow-x: auto;
}

.cron-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cron-table th,
.cron-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
}

.cron-table th {
    background-color: #f7f7f7;
    font-weight: 600;
    cursor: pointer;
}

.cron-details pre {
    white-space: pre-wrap;
    margin: 6px 0 0;
    font-size: 11px;
    color: #333333;
    background: #f7f7f7;
    border-radius: 6px;
    padding: 8px;
}

.keyword-table-wrapper {
    overflow-x: auto;
}

.keyword-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}

.keyword-table th,
.keyword-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-size: 13px;
}

.keyword-metric {
    width: 110px;
    white-space: nowrap;
}

.keyword-metric.wide {
    width: 200px;
    white-space: normal;
}

.keyword-toggle {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid #d0d0d0;
    background: #f7f7f7;
    cursor: pointer;
    font-size: 11px;
    color: #555555;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.keyword-toggle:hover {
    background: #efefef;
    border-color: #c6c6c6;
}

.sort-indicator {
    margin-left: 4px;
    font-size: 11px;
    color: #9aa0a6;
}

.sort-indicator.active {
    color: var(--color-primary);
    font-weight: 700;
}

.keyword-table th {
    cursor: pointer;
    background-color: #f7f7f7;
    font-weight: 600;
}

.serp-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 16px;
    flex-wrap: wrap;
}

.serp-toolbar input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    width: min(260px, 100%);
}

.serp-toolbar select {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
}

.serp-toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333333;
}

.serp-loading {
    font-size: 12px;
    color: #666666;
}

.keyword-filter {
    position: relative;
}

.keyword-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    color: #333333;
}

.keyword-filter-toggle:hover {
    border-color: #c6c6c6;
}

.keyword-filter-caret {
    font-size: 11px;
    color: #666666;
}

.keyword-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 10px;
    min-width: 200px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
    z-index: 10;
    text-align: left;
}

.keyword-filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    align-items: flex-start;
}

.keyword-filter-option {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    column-gap: 10px;
    font-size: 13px;
    color: #333333;
    justify-items: start;
    white-space: nowrap;
}

.keyword-filter-option input {
    margin: 0;
    justify-self: start;
}

.keyword-filter-empty {
    font-size: 12px;
    color: #666666;
}

.serp-row td {
    background-color: #fafafa;
    padding: 0;
}

.serp-wrapper {
    padding: 12px;
    border-top: 1px solid #e0e0e0;
}

.serp-meta {
    font-size: 12px;
    color: #555555;
    margin-bottom: 8px;
}

.serp-table-wrapper {
    overflow-x: auto;
}

.serp-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    font-size: 12px;
}

.serp-table th,
.serp-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #ededed;
    text-align: left;
    vertical-align: top;
}

.serp-table th {
    background-color: #f3f3f3;
    font-weight: 600;
}

.serp-summary {
    margin-top: 24px;
}

.serp-summary h2 {
    font-size: 18px;
    margin: 0 0 12px 0;
}

.serp-summary-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.serp-summary-controls input,
.serp-summary-controls select {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
}

.serp-summary-controls label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333333;
}

.serp-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333333;
}

.serp-pagination button {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 12px;
}

.table-sort-button {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    font-weight: 600;
}

.wiki-chart-wrapper {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #ffffff;
}

.wiki-chart-wrapper .section-title {
    margin-bottom: 8px;
}

.wiki-chart {
    height: 260px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 4px 4px;
    border-bottom: 1px solid #d0d0d0;
}

.wiki-chart-column {
    min-width: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
    position: relative;
}

.wiki-chart-value {
    font-size: 11px;
    color: #4a5568;
    white-space: nowrap;
}

.wiki-chart-bar-stack {
    width: 14px;
    overflow: visible;
    background-color: #f2f2f2;
    position: relative;
    outline: none;
}

.wiki-chart-bar-inner {
    width: 14px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}

.wiki-chart-tooltip {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(320px, 85vw);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 6px 16px;
    font-size: 12px;
    color: #1d1d1d;
    z-index: 40;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}

.wiki-chart-column:hover .wiki-chart-tooltip,
.wiki-chart-column:focus-within .wiki-chart-tooltip,
.wiki-chart-bar-stack.is-tooltip-open .wiki-chart-tooltip {
    opacity: 1;
    visibility: visible;
}

.wiki-chart-tooltip-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.wiki-chart-tooltip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.wiki-chart-tooltip-row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    column-gap: 6px;
}

.wiki-chart-tooltip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wiki-chart-tooltip-value {
    margin-left: 6px;
    white-space: nowrap;
}

.wiki-chart-segment {
    width: 100%;
}

.wiki-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
}

.wiki-chart-legend-title {
    margin: 10px 0 4px;
    font-size: 12px;
    color: #4a5568;
}

.wiki-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #333333;
}

.wiki-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.wiki-color-1 {
    background-color: #0f0b78;
}

.wiki-color-2 {
    background-color: #1b1292;
}

.wiki-color-3 {
    background-color: #2a1ead;
}

.wiki-color-4 {
    background-color: #3a30c6;
}

.wiki-color-5 {
    background-color: #5248dd;
}

.wiki-color-6 {
    background-color: #6c63ea;
}

.wiki-color-7 {
    background-color: #8b83f2;
}

.wiki-color-8 {
    background-color: #a9a1f7;
}

.wiki-chart-day {
    font-size: 10px;
    color: #333333;
    white-space: nowrap;
}

.wiki-pie-layout {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.wiki-pie-chart {
    width: 220px;
    height: 220px;
    border-radius: 999px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px;
    flex-shrink: 0;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.wiki-pie-chart > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wiki-pie-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.wiki-top-editors-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.wiki-top-editors-layout > .wiki-chart-wrapper {
    flex: 0 0 auto;
    min-width: 260px;
}

.wiki-top-editors-layout > .wikipedia-top-editors-table-wrapper {
    flex: 1 1 0%;
    min-width: 0;
}

.wikipedia-pageviews-collapsible {
    margin-top: 16px;
}

.wikipedia-collapsible-toggle {
    background: none;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 12px;
    color: #333333;
}

.wikipedia-collapsible-toggle:hover {
    background-color: #f5f5f5;
}

.wikipedia-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wikipedia-page-title-row h1 {
    margin: 0;
}

.wikipedia-print-link {
    font-size: 10px;
    color: #666666;
    font-style: italic;
    cursor: pointer;
    white-space: nowrap;
}

.wikipedia-print-report-header,
.wikipedia-print-footer-note,
.wikipedia-print-page-number {
    display: none;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 14mm 12mm 16mm;
    }

    header,
    .sidebar,
    .imprintSection,
    footer,
    .wikipedia-print-link,
    .wikipedia-screen-header-row,
    .wikipedia-entry-filter-toolbar,
    .wikipedia-pageviews-table-wrapper,
    .wikipedia-pageviews-collapsible,
    .wikipedia-top-editors-subtitle,
    .wikipedia-top-editors-toolbar,
    .wikipedia-pageviews-subtitle,
    .wikipedia-pageviews-toolbar,
    .wikipedia-print-page-number {
        display: none !important;
    }

    .main,
    .main-content-area,
    .dashboard-content,
    .wikipedia-dashboard-page {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wikipedia-dashboard-page {
        padding-bottom: 22mm !important;
    }

    .wikipedia-dashboard-page .press-section,
    .wikipedia-dashboard-page .wiki-chart-wrapper,
    .wikipedia-dashboard-page .wiki-pie-layout {
        page-break-inside: avoid;
        break-inside: avoid-page;
    }

    .wiki-top-editors-layout {
        display: block;
    }

    .wikipedia-top-editors-table-wrapper {
        page-break-before: always;
        break-before: page;
        page-break-inside: auto;
        break-inside: auto;
    }

    .wikipedia-top-editors-table-wrapper table {
        page-break-inside: auto;
        break-inside: auto;
    }

    .wikipedia-top-editors-table-wrapper thead {
        display: table-header-group;
    }

    .wikipedia-top-editors-table-wrapper tr {
        page-break-inside: avoid;
        break-inside: avoid-page;
    }

    .wikipedia-print-report-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        page-break-inside: avoid;
    }

    .wikipedia-print-logo {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        object-fit: cover;
        border: 1px solid #d0d0d0;
    }

    .wikipedia-print-logo-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #ffffff;
        background-color: var(--color-primary);
    }

    .wikipedia-print-report-title {
        margin: 0;
        font-size: 22px;
    }

    .wikipedia-print-footer-note {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 6mm;
        text-align: center;
        font-size: 10px;
        color: #333333;
    }

}

.serp-pagination button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.serp-url {
    max-width: 260px;
    word-break: break-all;
}

.serp-empty {
    padding: 12px;
    font-size: 12px;
    color: #666666;
}

.keyword-actions {
    display: flex;
    gap: 8px;
}

.keyword-actions button {
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}

.keyword-actions button:last-child {
    background-color: #6c757d;
}

.imprintSection {
    text-align: center;
    padding: 12px 20px;
    background-color: #ffffff;
}

.inline-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
        position: static;
        height: calc(100dvh - 80px);
    }

    .sidebar.open {
        display: flex;
        position: fixed;
        left: 0;
        top: 80px;
        height: calc(100dvh - 80px);
        width: 250px;
        background-color: #f2f2f2;
        z-index: 1001;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .login-form {
        width: 90%;
        max-width: 400px;
    }

    .login-form input {
        width: calc(100% - 20px);
    }

    .company-context {
        gap: 4px;
    }

    .company-status {
        display: none;
    }

    .hide-mobile {
        display: none;
    }

    /* ── Reputation Card Layout ───────────────────── */
    .keyword-table-wrapper,
    .press-table-wrapper,
    .serp-table-wrapper {
        overflow-x: visible;
    }

    .keyword-table,
    .press-table,
    .serp-table {
        min-width: 0;
    }

    .keyword-table thead,
    .press-table thead,
    .serp-table thead {
        display: none;
    }

    .keyword-table tbody tr:not(.serp-row),
    .press-table tbody tr,
    .serp-table tbody tr:not(.serp-row) {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 10px 12px;
        background: #fff;
    }

    .keyword-table tbody tr.serp-row,
    .serp-table tbody tr.serp-row {
        display: block;
        margin-bottom: 12px;
        border: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }

    .keyword-table td,
    .press-table td,
    .serp-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 4px 0;
        border-bottom: 1px solid #f0f0f0;
        text-align: right;
        width: auto !important;
        white-space: normal;
    }

    .keyword-table td:last-child,
    .press-table td:last-child,
    .serp-table td:last-child {
        border-bottom: none;
    }

    .keyword-table td[data-label]::before,
    .press-table td[data-label]::before,
    .serp-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        margin-right: 12px;
        flex-shrink: 0;
        color: #333;
        font-size: 12px;
    }

    .keyword-table td[data-label=""]::before,
    .press-table td[data-label=""]::before,
    .serp-table td[data-label=""]::before {
        content: none;
    }

    tr.serp-row > td {
        display: block !important;
        text-align: left;
        padding: 0 !important;
        border-bottom: none !important;
    }

    tr.serp-row > td::before {
        content: none !important;
    }

    .keyword-metric,
    .keyword-metric.wide {
        width: auto !important;
        white-space: normal;
    }

    .keyword-table td.favicon-cell,
    .press-table td.favicon-cell,
    .serp-table td.favicon-cell {
        width: auto !important;
    }

    .keyword-actions {
        justify-content: flex-end;
        gap: 8px;
    }

    /* ── Toolbars: Selects & Inputs voll auf Mobile ───────── */
    .serp-toolbar {
        width: 100%;
        gap: 10px;
    }

    .serp-toolbar label {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        min-width: 0;
    }

    .serp-toolbar select,
    .serp-toolbar input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .serp-toolbar input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
    }

    /* ── Wikipedia "Top 10 nach Bearbeitungen" (Pie-Chart) ── */
    .wiki-top-editors-layout > .wiki-chart-wrapper {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .wiki-chart-wrapper {
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .wiki-pie-layout {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .wiki-pie-chart {
        width: 180px;
        height: 180px;
    }

    .wiki-pie-legend {
        width: 100%;
    }

    .wiki-chart-legend-item {
        display: flex;
        align-items: flex-start;
        word-break: break-word;
    }

    .wiki-chart-wrapper .section-title,
    .wikipedia-top-editors-table-wrapper .section-title {
        font-size: 15px;
    }

    /* Top-Editors-Tabelle: Daten links ausrichten (Labels bleiben links/fett) */
    .wikipedia-top-editors-table-wrapper .press-table td {
        justify-content: flex-start;
        gap: 8px;
        text-align: left;
    }

    .wikipedia-top-editors-table-wrapper .press-table td[data-label]::before {
        flex-shrink: 0;
    }
}

@media (min-width: 769px) {
    .hamburger {
        display: none;
    }

    .places-map {
        height: 760px;
    }
}

/* ── Profil-Übersicht ───────────────────────────── */
.profile-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 20px 0 30px;
}

.profile-summary-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e6ef;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: rgba(19, 14, 146, 0.06) 0px 4px 12px;
    transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.profile-summary-card:hover {
    border-color: #cdd2e5;
    box-shadow: rgba(19, 14, 146, 0.12) 0px 6px 18px;
}

.profile-summary-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7290;
    margin-bottom: 6px;
}

.profile-summary-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--color-accent);
    word-break: break-word;
    min-height: 24px;
}

.profile-summary-value.is-empty {
    color: #9aa0b8;
    font-style: italic;
}

.profile-summary-flag {
    font-size: 20px;
    line-height: 1;
}

.profile-summary-edit {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-primary);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease-out;
}

.profile-summary-edit:hover,
.profile-summary-edit:focus-visible {
    background-color: rgba(19, 14, 146, 0.08);
    outline: none;
}

.profile-summary-card.is-editing {
    border-color: var(--color-primary);
    box-shadow: rgba(19, 14, 146, 0.18) 0px 6px 18px;
}

.profile-summary-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.profile-summary-editor input,
.profile-summary-editor select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c9cee0;
    border-radius: 8px;
    font-size: 14px;
    background: #fafbff;
    color: var(--color-accent);
    box-sizing: border-box;
}

.profile-summary-editor input:focus,
.profile-summary-editor select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(19, 14, 146, 0.15);
}

.profile-summary-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.profile-summary-actions .button {
    padding: 8px 14px;
    font-size: 14px;
    box-shadow: none;
}

.profile-summary-cancel {
    background: none;
    border: none;
    color: #6b7290;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 6px;
}

.profile-summary-cancel:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

}
.release-notes-page h1 {
    font-size: 22px;
    margin-bottom: 16px;
}

.release-notes-section {
    margin-bottom: 24px;
}

.release-notes-section h2 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.release-notes-section p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 6px;
}

.release-notes-section ul {
    font-size: 13px;
    line-height: 1.5;
    padding-left: 20px;
    margin: 0;
}

.release-notes-section li {
    margin-bottom: 2px;
}

/* Wikipedia Status Section */
.wikipedia-status-section {
    width: 100%;
    box-sizing: border-box;
}

.wikipedia-status-section .wikipedia-status-text {
    white-space: normal;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0 0 0;
    word-wrap: break-word;
}

.wikipedia-status-section .wikipedia-status-text p {
    margin: 0 0 8px 0;
}

.wikipedia-status-section .wikipedia-status-text ul,
.wikipedia-status-section .wikipedia-status-text ol {
    margin: 0 0 8px 0;
    padding-left: 22px;
}

.wikipedia-status-section .wikipedia-status-empty {
    margin: 8px 0 0 0;
    font-style: italic;
}

.wikipedia-status-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid #cccccc;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: #f7f7f7;
}

.wikipedia-status-tool {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 1;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 3px;
    cursor: pointer;
    color: #333333;
}

.wikipedia-status-tool:hover {
    background: #ececec;
}

.wikipedia-status-tool[aria-pressed="true"] {
    background: #5248dd;
    border-color: #4036c4;
    color: #ffffff;
}

.wikipedia-status-tool[aria-pressed="true"]:hover {
    background: #4036c4;
}

.wikipedia-status-tool:focus {
    outline: 2px solid #5248dd;
    outline-offset: 1px;
}

.wikipedia-status-editor {
    width: 100%;
    min-height: 240px;
    max-height: 60vh;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    border: 1px solid #cccccc;
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
    background: #ffffff;
    overflow-y: auto;
    word-wrap: break-word;
}

.wikipedia-status-editor:focus {
    outline: 2px solid #5248dd;
    outline-offset: -1px;
    border-color: #5248dd;
}

.wikipedia-status-editor:empty::before {
    content: attr(data-placeholder);
    color: #999999;
    pointer-events: none;
}

.wikipedia-status-editor p {
    margin: 0 0 8px 0;
}

.wikipedia-status-editor ul,
.wikipedia-status-editor ol {
    margin: 0 0 8px 0;
    padding-left: 22px;
}

.wikipedia-status-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.wikipedia-status-counter {
    font-size: 12px;
    color: #666666;
}

.wikipedia-status-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}


/* Wikipedia sticky range bar */
.wikipedia-sticky-rangebar {
    position: sticky;
    top: 80px;
    z-index: 50;
    margin: 8px 0 16px 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.wikipedia-sticky-rangebar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px 14px;
}

.wikipedia-rangebar-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #555555;
    min-width: 130px;
}

.wikipedia-rangebar-field input,
.wikipedia-rangebar-field select {
    height: 32px;
    box-sizing: border-box;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 1.2;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: #ffffff;
    font-family: inherit;
    color: inherit;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.wikipedia-rangebar-field select {
    /* Pfeil-Icon manuell hinzufügen, da appearance: none den nativen Pfeil entfernt */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%23555' d='M6 8 0 0h12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
    padding-right: 24px;
}

@media (max-width: 720px) {
    .wikipedia-sticky-rangebar {
        top: 70px;
        margin: 6px -4px 12px -4px;
        border-radius: 4px;
    }
    .wikipedia-sticky-rangebar-inner {
        gap: 8px;
        padding: 8px 10px;
        justify-content: stretch;
    }
    .wikipedia-rangebar-field {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        font-size: 11px;
    }
    .wikipedia-rangebar-field:nth-child(3) {
        flex-basis: 100%;
    }
}

@media print {
    .wikipedia-sticky-rangebar {
        display: none !important;
    }
}

/* Release notes page: klare H1 > H2 > H3 Hierarchie */
.release-notes-page h1 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 24px;
}

.release-notes-section {
    margin-bottom: 32px;
}

.release-notes-page .release-notes-section h2 {
    font-size: 20px;
    line-height: 1.3;
    margin: 24px 0 12px;
    font-weight: 700;
}

.release-notes-page .release-notes-section h2 strong {
    font-weight: 700;
}

.release-notes-page .release-notes-group {
    margin: 12px 0 16px;
}

.release-notes-page .release-notes-group h3 {
    font-size: 16px;
    line-height: 1.4;
    margin: 12px 0 6px;
    font-weight: 600;
}

.release-notes-page .release-notes-section ul,
.release-notes-page .release-notes-group ul {
    margin: 4px 0 8px 20px;
    padding: 0;
}

/* ---------- Branding Admin Section (Administration) ---------- */
.branding-toolbar {
    margin: 8px 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.branding-toolbar .branding-field {
    flex: 1 1 320px;
    max-width: 480px;
}

.branding-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #333;
}

.branding-field > span {
    font-weight: 600;
    color: #2c2f36;
    font-size: 12px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.branding-field input[type="text"],
.branding-field select {
    padding: 9px 12px;
    border: 1px solid #d0d4dc;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.branding-field input[type="text"]:focus,
.branding-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(19, 14, 146, 0.12);
}

.branding-field input[type="text"]::placeholder {
    color: #9aa0a6;
}

.branding-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.branding-color-row input[type="color"] {
    flex: 0 0 44px;
    width: 44px;
    height: 38px;
    padding: 2px;
    border: 1px solid #d0d4dc;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.branding-color-row input[type="text"] {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
}

.branding-error {
    color: #b00020;
    font-size: 12px;
    margin-top: 2px;
}

.branding-success {
    color: #1d7a3a;
    font-weight: 600;
    font-size: 13px;
}

.branding-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.branding-fieldset {
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: 16px 18px 18px;
    background: #fbfbfd;
}

.branding-fieldset-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.branding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 18px;
}

.branding-preview {
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: 18px;
    background: #fbfbfd;
}

.branding-preview h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.branding-preview-header {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 8px;
    min-height: 56px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.branding-preview-swatches {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.branding-swatch {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.branding-swatch-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.branding-preview-favicon {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12px;
    color: #6b7280;
}

.branding-preview-favicon img {
    width: 16px;
    height: 16px;
}

.branding-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.branding-actions .button {
    min-width: 140px;
}

.button-secondary {
    background: #ffffff !important;
    color: var(--color-primary) !important;
    border: 1.5px solid var(--color-primary) !important;
}

.button-secondary:hover:not(:disabled) {
    background: rgba(19, 14, 146, 0.06) !important;
}

.button:disabled,
.button-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.branding-hint {
    color: #5a6470;
    font-size: 12px;
    margin: 4px 0 0;
    line-height: 1.5;
    padding: 10px 12px;
    background: #f4f5f8;
    border-left: 3px solid var(--color-primary);
    border-radius: 4px;
}

/* ---------- Legal pages (AGB, Datenschutz, Impressum) ---------- */
.legal-page {
    max-width: 820px;
    margin: 24px auto 32px;
    padding: 0 16px;
    color: #1f2933;
    line-height: 1.6;
    font-size: 15px;
}

.legal-page h1 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 20px;
    font-weight: 700;
}

.legal-page h2 {
    font-size: 20px;
    line-height: 1.3;
    margin: 28px 0 10px;
    font-weight: 700;
}

.legal-page h3 {
    font-size: 17px;
    line-height: 1.35;
    margin: 20px 0 8px;
    font-weight: 600;
}

.legal-page h4 {
    font-size: 15px;
    line-height: 1.4;
    margin: 14px 0 6px;
    font-weight: 600;
}

.legal-page p {
    margin: 0 0 12px;
}

.legal-page ul {
    margin: 4px 0 14px 22px;
    padding: 0;
}

.legal-page li {
    margin: 4px 0;
}

.legal-page a {
    color: var(--color-primary, #0b66c2);
    word-break: break-word;
}

.legal-page .legal-meta {
    color: #5a6470;
    font-size: 13px;
    font-style: italic;
    margin: 8px 0 20px;
}