/*
   TenderToGo Design System v4.0
   Figma-driven Design Tokens
*/

/* Verborgen heißt verborgen — wie Bootstrap, aber ohne Abhängigkeit vom CDN (in der CI ohne Netz fehlte die Regel,
   und display: flex/inline-flex einer Komponente gewann gegen das Attribut hidden). */
[hidden] { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

:root {
    /* Figma Design Tokens */
    --tg-dark-petrol: #1a2f33;   /* Header, dunkle Flaechen */
    --tg-petrol: #4c7878;        /* Primaere Akzente */
    --tg-green-light: #8ebbaa;   /* Helle gruene Akzente (Tags, Badges) */
    --tg-green-progress: #76ac64;/* Fortschrittsbalken, Erfolg */
    --tg-teal-medium: #548585;   /* Mittleres Petrol */
    --tg-text-primary: #505050;  /* Standard-Textfarbe */
    --tg-bg-page: #f8f8f8;      /* Seiten-Hintergrund */
    --tg-bg-card: #ffffff;       /* Karten-Hintergrund */
    --tg-border-light: #e4e4e4;  /* Helle Rahmen, inaktive Elemente */
    --tg-gray-track: #d9d9d9;    /* Scrollbar-Tracks, Trennlinien */
    --tg-footer-bg: #505050;     /* Footer-Hintergrund */

    /* Funktionale Farben (UI-States) */
    --tg-warning: #F59E0B;       /* Amber */
    --tg-error: #E53935;         /* Red */
    --tg-success: #76ac64;       /* Erfolg = green-progress */
    --tg-info: #4c7878;          /* Info = petrol */

    /* Legacy-Token-Aliase — historische Variablen aus Templates */
    --tg-primary: #4c7878;            /* Alias auf --tg-petrol */
    --tg-primary-dark: #1a2f33;       /* Alias auf --tg-dark-petrol */
    --tg-accent: #8ebbaa;             /* Alias auf --tg-green-light */
    --tg-dark: #1a2f33;               /* Alias auf --tg-dark-petrol */
    --tg-bg-body: #f8f8f8;            /* Alias auf --tg-bg-page */
    --tg-muted: #6b7280;              /* Sekundaere Textfarbe */
    --tg-text-muted: #6b7280;         /* dito */
    --tg-light-gray: #e4e4e4;         /* Alias auf --tg-border-light */
    --tg-bg-insight: #f0f4f3;         /* Hellgruener Hintergrund fuer Insight-Panels */

    /* Hero-Gradient (Figma-Standard, ueberall identisch) */
    --tg-hero-gradient: linear-gradient(160deg, #1a2f33 16%, #133a41 47%, #1a2f33 88%);

    /* Inhaltsbreite: eine Linie fuer Navigation, Hero und Karten. Massgeblich
       sind die Karten der Suche -- die stehen in einer 1320px breiten Spalte. */
    --tg-content-max: 1320px;
    --tg-content-pad: 24px;

    /* Layout Variables */
    --ticket-radius: 8px;
    --spine-width: 50px;
    --tg-card-radius: 20px;
    --tg-card-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.08);

    /* Bootstrap Overrides */
    --bs-font-sans-serif: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    --bs-body-bg: var(--tg-bg-page);
}

/* === Reset & Typography === */

/* Grundschriftgrad der App. Auf einem normal grossen Desktop wirkten die
   Standardtexte mit den 16px des Browsers zu wuchtig. Alle rem-/em-Angaben
   (auch die von Bootstrap) haengen an diesem Wert und werden dadurch
   mitskaliert; Ueberschriften behalten ihre eigenen Groessen. */
html {
    font-size: 15px;
}

body {
    font-family: var(--bs-font-sans-serif);
    color: var(--tg-dark-petrol);
    background-color: var(--bs-body-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--tg-dark-petrol);
    letter-spacing: -0.5px;
}

/* Hero section headings should be white */
.bg-dark.text-white h1.display-4,
.bg-dark.text-white h1.display-5,
.bg-dark.text-white h1.display-6 {
    color: white;
}

a { text-decoration: none; color: var(--tg-petrol); transition: color 0.2s; }
a:hover { color: var(--tg-dark-petrol); }

/* === Component: The Ticket Card (Core UI Element) === */
.ticket-card {
    background: white;
    border-radius: var(--ticket-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
    border: 1px solid rgba(0,0,0,0.02); /* Subtle border for definition */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ticket-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Auth Card Specialization (Centered, no spine usually) */
.auth-card {
    background: white;
    border-radius: var(--ticket-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 2.5rem;
    border-top: 4px solid var(--tg-petrol);
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* The Spine (Left side with holes) */
.ticket-spine {
    width: var(--spine-width);
    background-color: #fff;
    border-right: 3px dashed rgba(76, 120, 120, 0.3); 
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 3rem 0;
}

.ticket-hole {
    width: 20px;
    height: 20px;
    background-color: var(--bs-body-bg); 
    border-radius: 50%;
    box-shadow: inset 1px 2px 4px rgba(0,0,0,0.15); 
    position: relative;
}

.ticket-content {
    flex-grow: 1;
    padding: 1rem 1.5rem;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* === Ticket Internal Elements === */
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 10px !important;
}

.badge-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ticket-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    color: white;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-score { background-color: var(--tg-green-progress); }
.badge-info { background-color: var(--tg-petrol); }
.badge-date { background-color: var(--tg-petrol); font-family: monospace; letter-spacing: 0.5px; }
.badge-urgency-high { background-color: var(--tg-error); }
.badge-urgency-medium { background-color: var(--tg-warning); }
.badge-urgency-low { background-color: var(--tg-text-primary); }

.ticket-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 0.5rem !important;
}

.ticket-title-section { flex: 1; }

.ticket-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    color: var(--tg-dark-petrol);
}

.ticket-description {
    font-size: 0.65rem;
    color: var(--tg-text-primary);
    line-height: 1.15;
}

.ticket-description p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 0.3em 0;
}

.ticket-description p:last-child {
    margin-bottom: 0;
}

/* Authority Box */
.authority-box-ticket {
    background-color: var(--tg-green-light);
    color: white;
    border-radius: 8px;
    padding: 1rem;
    min-width: 240px;
    max-width: 260px;
    box-shadow: 0 4px 12px rgba(142, 187, 170, 0.2);
    position: relative;
    flex-shrink: 0;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.authority-name {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.authority-meta {
    font-size: 0.75rem;
    opacity: 0.95;
    line-height: 1.4;
}
.authority-meta i { width: 16px; text-align: center; margin-right: 2px; opacity: 0.8; }

/* Criteria Grid */
.criteria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0 !important;
}

.criteria-frame {
    border: 1px solid #D0D7DE;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    background: #FAFBFC;
}

.criteria-legend {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-ticket {
    display: inline-block;
    border: 1px solid var(--tg-green-light);
    color: var(--tg-green-light);
    background: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin: 0.15rem 0.15rem 0 0;
    transition: all 0.2s;
}
.tag-ticket:hover { background: var(--tg-green-light); color: white; }

/* Lot Scroller */
.lot-scroller {
    display: flex;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E0 transparent;
}
.lot-scroller::-webkit-scrollbar { height: 4px; }
.lot-scroller::-webkit-scrollbar-thumb { background-color: #CBD5E0; border-radius: 4px; }
.lot-card {
    min-width: 200px;
    border: 1px solid #E1E4E8;
    background: white;
    border-radius: 6px;
    padding: 0.6rem;
}
.lot-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tg-text-primary);
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.25rem;
}

/* Insight Panel */
.insight-panel {
    background-color: var(--tg-border-light);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border-left: 3px solid var(--tg-petrol);
    margin-top: 10px;
}

.insight-icon {
    background: var(--tg-petrol);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    margin-top: 2px;
}

.insight-content h6 { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.15rem; }
.insight-content p { font-size: 0.8rem; color: var(--tg-text-primary); margin-bottom: 0; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   MODERN NAVBAR
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   FIGMA TOPBAR — Dashboard/Menu_erweitert (1440x84px)
   ═══════════════════════════════════════════════════════════════ */

.navbar-modern {
    background: var(--tg-dark-petrol);
    padding: 0;
    height: 84px;
    border: none;
    position: relative;
    z-index: 1100;
}

.navbar-modern > .container {
    height: 100%;
    display: flex;
    align-items: center;
    /* Bootstrap staffelt die Breite und polstert 12px -- dadurch endete der
       Nutzer-Knopf nicht auf der Linie der Karten. */
    max-width: var(--tg-content-max);
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1400px) {
    .navbar-modern > .container {
        padding-left: var(--tg-content-pad);
        padding-right: var(--tg-content-pad);
    }
}

/* Ab 992 px steht die Navigation in einer Zeile -- hier festgelegt statt nur
   ueber Bootstrap vom CDN. Blockiert ein Firmen-Proxy oder Werbeblocker das CDN,
   stapelte sich die Liste sonst senkrecht und ragte, im 84px hohen Balken
   zentriert, ueber den Seitenanfang (Ergebnisse und Zaehler unerreichbar). Die
   Werte entsprechen Bootstraps navbar-expand-lg; mit geladenem Bootstrap aendert
   sich nichts. */
@media (min-width: 992px) {
    .navbar-modern .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 1;
        align-items: center;
    }

    .navbar-modern .navbar-nav {
        display: flex;
        flex-direction: row;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    .navbar-modern .dropdown-menu:not(.show) {
        display: none;
    }
}

/* Brand/Logo — 197x36px Figma frame */
.navbar-brand-modern {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.3px;
    flex-shrink: 0;
    height: 36px;
}

.navbar-brand-modern:hover {
    color: white;
}

/* Figma: Becher-Icon in abgerundetem, mintfarbenem Quadrat */
.navbar-brand-modern .brand-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--tg-green-light);
    border-radius: 10px;
}

.navbar-brand-modern .brand-icon {
    color: var(--tg-dark-petrol);
}

.navbar-brand-modern .brand-icon svg {
    width: 24px;
    height: 24px;
}

/* Figma: Wortmarke deutlich groesser als bisher — gemessene Versalhoehe 17px
   entspricht 25px Schriftgrad. Ohne negative Laufweite, der Entwurf steht luftig. */
.navbar-brand-modern .brand-text {
    color: white;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0;
}

.navbar-brand-modern .brand-badge {
    display: none;
}

/* Nav Links — Figma: horizontal layout, 8px gap, 18px font, white text */
/* Die drei Punkte stehen mittig zwischen Suchfeld und Nutzer-Knopf: der
   Container nimmt den freien Platz und zentriert seinen Inhalt. */
.nav-pills-mitte {
    flex: 1;
    justify-content: center;
}

.nav-pills-modern {
    display: flex;
    gap: 8px;
    background: none;
    padding: 0;
    border-radius: 0;
    align-items: center;
    margin: 0;
    list-style: none;
}

.nav-link-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: white;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.408px;
    line-height: 1.26;
    border-radius: 8px;
    /* Rahmen auch ohne Markierung, damit die Punkte beim Wechsel nicht springen */
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 36px;
}

/* Figma: Strich-Icons, 20-22px, in hellem Gruen */
.nav-link-modern svg {
    color: var(--tg-green-light);
    flex-shrink: 0;
}

.nav-link-modern:hover {
    color: white;
    background: rgba(142, 187, 170, 0.1);
}



/* Aktiver Punkt: gleiche Form wie beim Ueberfahren -- nur staerker abgesetzt.
   Mit 15px Radius wirkte er als einziger rund. */
.nav-link-modern.active,
.nav-link-modern:focus {
    color: white;
    background: rgba(142, 187, 170, 0.30);
    border-color: rgba(142, 187, 170, 0.5);
}

/* CTA Button in Nav (unauthenticated) */
.btn-cta-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(142, 187, 170, 0.1);
    border: 1px solid rgba(142, 187, 170, 0.5);
    color: white;
    font-weight: 400;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: -0.408px;
}

.btn-cta-nav:hover {
    background: rgba(142, 187, 170, 0.2);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════
   USER DROPDOWN — Figma: 154x36px trigger, 241x343px panel
   ═══════════════════════════════════════════════════════════════ */

/* User button trigger — pill with green-light 10% bg, 15px radius */
.navbar-modern .user-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(142, 187, 170, 0.20);
    border-radius: 15px;
    color: white;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.408px;
    line-height: 1.26;
    height: 36px;
    white-space: nowrap;
    transition: background 0.2s ease;
    border: none;
    cursor: pointer;
}

.navbar-modern .user-dropdown-trigger:hover {
    background: rgba(142, 187, 170, 0.30);
    color: white;
}

.navbar-modern .user-dropdown-trigger .user-trigger-icon {
    display: flex;
    align-items: center;
    color: var(--tg-green-light);
}

.navbar-modern .user-dropdown-trigger .user-trigger-chevron {
    display: flex;
    align-items: center;
    color: var(--tg-green-light);
    margin-left: -2px;
}

.navbar-modern .dropdown-toggle::after {
    display: none;
}

/* Dropdown panel — 241px wide, 10px radius, gray bg, shadow */
.navbar-modern .dropdown-menu {
    background: #e4e4e4;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-top: 8px;
    min-width: 241px;
    width: 241px;
}

/* Company button — petrol bg, 10px radius, 200x30 */
.navbar-modern .dropdown-company-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 5px 12px;
    background: var(--tg-dark-petrol);
    background-image: linear-gradient(rgba(142, 187, 170, 0.3), rgba(142, 187, 170, 0.3));
    border: 1px solid var(--tg-dark-petrol);
    border-radius: 10px;
    color: white;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.408px;
    text-decoration: none;
    height: 30px;
    transition: background 0.15s ease;
}

.navbar-modern .dropdown-company-btn:hover {
    opacity: 0.9;
    color: white;
}

.navbar-modern .dropdown-company-btn .company-chevron {
    font-size: 10px;
    color: white;
}

/* User info section */
.navbar-modern .dropdown-user-info {
    padding: 12px 0 8px 0;
}

.navbar-modern .dropdown-user-name {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--tg-dark-petrol);
    letter-spacing: -0.408px;
    line-height: 1.26;
    margin: 0;
}

.navbar-modern .dropdown-user-email {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--tg-dark-petrol);
    letter-spacing: -0.408px;
    line-height: 1.26;
    margin: 0;
}

/* Divider — 0.5px, dark-petrol at 30% */
.navbar-modern .dropdown-divider {
    margin: 8px 0;
    border: none;
    border-top: 0.5px solid rgba(26, 47, 51, 0.3);
    opacity: 1;
}

/* Menu items — 200x30px, 10px radius */
.navbar-modern .dropdown-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 5px 10px;
    border-radius: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--tg-dark-petrol);
    letter-spacing: -0.408px;
    line-height: 1.26;
    height: 30px;
    text-decoration: none;
    transition: background 0.15s ease;
    background: transparent;
}

.navbar-modern .dropdown-item i {
    font-size: 13px;
    width: 18px;
    text-align: center;
    color: var(--tg-dark-petrol);
}

.navbar-modern .dropdown-item:hover {
    background: rgba(26, 47, 51, 0.08);
}

.navbar-modern .dropdown-item.active {
    background: rgba(76, 120, 120, 0.1);
    color: var(--tg-dark-petrol);
}

/* Profile item — gray bg from Figma (#d4d8d9) */
.navbar-modern .dropdown-item-profile {
    background: #d4d8d9;
}

.navbar-modern .dropdown-item-profile:hover {
    background: #c8ccce;
}

/* Dropdown menu item spacing — 4px gap between items */
.navbar-modern .dropdown-menu > li {
    margin-top: 4px;
}
.navbar-modern .dropdown-menu > li:first-child {
    margin-top: 0;
}

/* Logout item — reddish bg, red text */
.navbar-modern .dropdown-item-logout {
    background: #edc5c5;
    color: #ba0000;
    height: 35px;
}

.navbar-modern .dropdown-item-logout i {
    color: #ba0000;
}

.navbar-modern .dropdown-item-logout:hover {
    background: #e4b5b5;
    color: #ba0000;
}

.navbar-modern .dropdown-header {
    font-size: 0.7rem;
    color: #999;
    padding: 0.5rem 1rem;
}

/* User avatar style */
.user-avatar-nav {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--tg-petrol) 0%, var(--tg-teal-medium) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
    .navbar-modern {
        height: auto;
        padding: 0.75rem 0;
    }

    .nav-pills-modern {
        flex-direction: column;
        background: transparent;
        padding: 1rem 0;
        gap: 4px;
    }

    .nav-link-modern {
        padding: 0.75rem 1rem;
        border-radius: 10px;
        font-size: 15px;
    }

    .btn-cta-nav {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
        padding: 0.75rem 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR SEARCH WITH AUTOCOMPLETE
   ═══════════════════════════════════════════════════════════════ */

/* Search bar — Figma: 300px wide, 36px tall, 15px radius */
.nav-search-container {
    flex: 0 0 300px;
    max-width: 300px;
    position: relative;
    margin: 0 auto 0 83px;
}

.nav-search-form {
    position: relative;
}

.nav-search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(142, 187, 170, 0.1);
    border: 1px solid rgba(142, 187, 170, 0.5);
    border-radius: 15px;
    padding: 0 14px;
    height: 36px;
    transition: all 0.2s ease;
}

.nav-search-wrapper:focus-within {
    background: rgba(142, 187, 170, 0.15);
    border-color: var(--tg-green-light);
    box-shadow: 0 0 0 3px rgba(142, 187, 170, 0.15);
}

.nav-search-icon {
    display: flex;
    align-items: center;
    color: var(--tg-green-light);
    margin-right: 12px;
    transition: color 0.2s;
}

.nav-search-wrapper:focus-within .nav-search-icon {
    color: var(--tg-green-light);
}

.nav-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--tg-green-light);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.408px;
    padding: 0;
    min-width: 150px;
    line-height: 36px;
    height: 36px;
}

.nav-search-input::placeholder {
    color: var(--tg-green-light);
    opacity: 1;
}

.nav-search-input:focus::placeholder {
    opacity: 0.6;
}

.nav-search-kbd {
    display: none;
}

/* Autocomplete Dropdown */
.nav-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    overflow: hidden;
}

.nav-search-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-dropdown-content {
    max-height: 400px;
    overflow-y: auto;
}

/* Search Result Item */
.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f0f0;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
    background: #f8faf9;
}

.search-result-item.selected {
    background: rgba(76, 120, 120, 0.1);
}

.search-result-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--tg-petrol) 0%, var(--tg-teal-medium) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tg-dark-petrol);
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background: rgba(163, 196, 188, 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.search-result-meta {
    font-size: 0.75rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-result-meta i {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Loading State */
.search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #666;
}

.search-loading i {
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* No Results */
.search-no-results {
    padding: 2rem 1rem;
    text-align: center;
    color: #666;
}

.search-no-results i {
    font-size: 2rem;
    color: #ccc;
    margin-bottom: 0.75rem;
}

.search-no-results p {
    margin: 0;
    font-size: 0.9rem;
}

/* View All Results Link */
.search-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8faf9;
    color: var(--tg-petrol);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    border-top: 1px solid #eee;
    transition: background 0.15s;
}

.search-view-all:hover,
.search-view-all.selected {
    background: #f0f4f3;
    color: var(--tg-petrol);
}

/* Tastaturauswahl deutlicher als der reine Hover-Zustand */
.search-view-all.selected {
    box-shadow: inset 3px 0 0 var(--tg-petrol);
}

/* Dropdown Footer */
.search-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem 1rem;
    background: #f8faf9;
    border-top: 1px solid #eee;
    font-size: 0.7rem;
    color: #999;
}

.search-dropdown-footer kbd {
    background: white;
    border: 1px solid #ddd;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.65rem;
}

/* Mobile Responsive — Search */
@media (max-width: 991.98px) {
    .nav-search-container {
        flex: 1 1 100%;
        max-width: none;
        margin: 1rem 0;
        order: -1;
    }

    .nav-search-dropdown {
        position: fixed;
        top: 70px;
        left: 1rem;
        right: 1rem;
    }
}

/* === Legacy Layout Elements === */
.navbar-custom {
    background-color: var(--tg-dark-petrol) !important;
    padding: 0.75rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.5px;
    font-size: 1.25rem;
}

.nav-link {
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--tg-petrol) !important;
}

.nav-link.active {
    color: var(--tg-petrol) !important;
}

.page-header {
    background: var(--tg-dark-petrol);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* Modern Inputs (Flat & Solid) */
.modern-input, .form-control, .form-select {
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    background-color: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modern-input:focus, .form-control:focus, .form-select:focus {
    border-color: var(--tg-petrol);
    box-shadow: 0 0 0 3px rgba(76, 120, 120, 0.1);
    outline: none;
}

/* Buttons (Flat & Solid) */
.btn-primary-custom, .btn-primary {
    background-color: var(--tg-petrol) !important;
    border-color: var(--tg-petrol) !important;
    color: white;
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.btn-primary-custom:hover, .btn-primary:hover {
    background-color: var(--tg-dark-petrol) !important;
    border-color: var(--tg-dark-petrol) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-accent-custom {
    background-color: var(--tg-green-light) !important;
    border-color: var(--tg-green-light) !important;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s;
}
.btn-accent-custom:hover { 
    background-color: var(--tg-teal-medium) !important; 
    border-color: var(--tg-teal-medium) !important;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--tg-petrol);
    border-color: var(--tg-petrol);
    border-radius: 6px;
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--tg-petrol);
    color: white;
}

/* === Page Header (Universal) === */
.page-header-section {
    background: var(--tg-petrol);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.page-header-section::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    pointer-events: none;
}

.page-header-section h1,
.page-header-section h2 {
    color: white;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.page-header-section .lead {
    opacity: 0.85;
    margin-bottom: 0;
}

.page-header-section .btn-light {
    background: white;
    color: var(--tg-petrol);
    font-weight: 600;
}

.page-header-section .btn-outline-light {
    border-color: rgba(255,255,255,0.5);
    color: white;
}

.page-header-section .btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
}

/* === Section Card (Content Blocks) === */
.section-card {
    background: white;
    border-radius: var(--ticket-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.section-card-header {
    background: var(--tg-border-light);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.section-card-header h5,
.section-card-header h6 {
    margin: 0;
    font-weight: 700;
    color: var(--tg-dark-petrol);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-card-header i {
    color: var(--tg-petrol);
}

.section-card-body {
    padding: 1.5rem;
}

.section-card-accent {
    border-left: 4px solid var(--tg-petrol);
}

/* === Stat Cards === */
.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card-item {
    background: white;
    border-radius: var(--ticket-radius);
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid var(--tg-petrol);
}

.stat-card-item.accent { border-left-color: var(--tg-green-light); }
.stat-card-item.success { border-left-color: var(--tg-green-progress); }
.stat-card-item.warning { border-left-color: var(--tg-warning); }

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tg-dark-petrol);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tg-text-primary);
    font-weight: 600;
    margin-top: 0.25rem;
}

/* === Form Styles (Enhanced) === */
.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tg-text-primary);
    margin-bottom: 0.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-text {
    font-size: 0.8rem;
    color: var(--tg-text-primary);
}

/* Form Section */
.form-section {
    background: white;
    border-radius: var(--ticket-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tg-dark-petrol);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--tg-border-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section-title i {
    color: var(--tg-petrol);
}

/* === Table Styles === */
.table-modern {
    background: white;
    border-radius: var(--ticket-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.table-modern thead {
    background: var(--tg-border-light);
}

.table-modern thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--tg-text-primary);
    border: none;
    padding: 1rem;
}

.table-modern tbody td {
    padding: 1rem;
    border-bottom: 1px solid var(--tg-border-light);
    vertical-align: middle;
}

.table-modern tbody tr:last-child td {
    border-bottom: none;
}

.table-modern tbody tr:hover {
    background: rgba(76, 120, 120, 0.03);
}

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tg-text-primary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h5 {
    color: var(--tg-text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p {
    margin-bottom: 1.5rem;
}

/* === Badge Variants === */
.badge-primary {
    background: var(--tg-petrol);
    color: white;
}

.badge-accent {
    background: var(--tg-green-light);
    color: white;
}

.badge-success {
    background: var(--tg-green-progress);
    color: white;
}

.badge-warning {
    background: var(--tg-warning);
    color: #1a1a1a;
}

.badge-muted {
    background: var(--tg-border-light);
    color: var(--tg-text-primary);
}

.badge-outline {
    background: transparent;
    border: 1px solid var(--tg-petrol);
    color: var(--tg-petrol);
}

/* === List Items === */
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--tg-border-light);
}

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

.list-item-label {
    font-size: 0.85rem;
    color: var(--tg-text-primary);
}

.list-item-value {
    font-weight: 600;
    color: var(--tg-dark-petrol);
}

/* === Progress Bars === */
.progress-modern {
    height: 6px;
    background: var(--tg-border-light);
    border-radius: 3px;
    overflow: hidden;
}

.progress-modern .progress-bar {
    background: var(--tg-petrol);
    border-radius: 3px;
}

/* === Modal Enhancements === */
.modal-content {
    border: none;
    border-radius: var(--ticket-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.modal-header {
    background: var(--tg-border-light);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
    font-weight: 700;
    color: var(--tg-dark-petrol);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--tg-border-light);
    padding: 1rem 1.5rem;
}

/* === Alert Styles === */
.alert {
    border: none;
    border-radius: var(--ticket-radius);
    padding: 1rem 1.25rem;
}

.alert-info {
    background: rgba(76, 120, 120, 0.1);
    color: var(--tg-dark-petrol);
    border-left: 4px solid var(--tg-petrol);
}

.alert-success {
    background: rgba(124, 179, 66, 0.1);
    color: #558B2F;
    border-left: 4px solid var(--tg-green-progress);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
    border-left: 4px solid var(--tg-warning);
}

.alert-danger {
    background: rgba(229, 57, 53, 0.1);
    color: #C62828;
    border-left: 4px solid var(--tg-error);
}

/* === Dropdown Enhancements === */
.dropdown-menu {
    border: none;
    border-radius: var(--ticket-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.dropdown-item:hover {
    background: var(--tg-border-light);
}

.dropdown-item.text-danger:hover {
    background: rgba(229, 57, 53, 0.1);
}

/* === Footer === */
.footer-custom {
    background: var(--tg-dark-petrol);
    color: rgba(255,255,255,0.7);
    padding: 2rem 0;
}

.footer-custom a {
    color: rgba(255,255,255,0.7);
}

.footer-custom a:hover {
    color: white;
}

/* === Utility Classes === */
.text-primary { color: var(--tg-petrol) !important; }
.text-accent { color: var(--tg-green-light) !important; }
.text-muted { color: var(--tg-text-primary) !important; }
.bg-primary { background-color: var(--tg-petrol) !important; }
.bg-accent { background-color: var(--tg-green-light) !important; }
.bg-light-gray { background-color: var(--tg-border-light) !important; }

.border-primary { border-color: var(--tg-petrol) !important; }
.border-accent { border-color: var(--tg-green-light) !important; }

/* Responsive - Keep ticket design on all screens */
@media (max-width: 992px) {
    .ticket-body { flex-direction: column; gap: 1rem; }
    .authority-box-ticket { width: 100%; max-width: none; min-width: 0; }
    /* Keep criteria side by side on mobile */
    .criteria-grid { grid-template-columns: 1fr 1fr; }
    /* Keep spine visible on mobile - it's our brand! */
    .ticket-spine {
        min-width: 28px;
        padding: 1rem 0;
    }
    .ticket-hole {
        width: 14px;
        height: 14px;
    }

    .page-header-section { padding: 1.5rem 0; }
    .stat-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .stat-card-grid { grid-template-columns: 1fr; }
}

/* === Compact Ticket Cards (Frontpage) === */
.ticket-card-compact {
    padding: 0;
}

.ticket-card-compact .ticket-content {
    padding: 1.25rem;
}

.ticket-card-compact .ticket-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.5rem;
    max-width: 150px;
}

.ticket-card-compact .ticket-title {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.ticket-card-compact .ticket-description {
    font-size: 0.58rem;
    margin-bottom: 0;
    line-height: 1.1;
}

.ticket-card-compact .ticket-description p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 0.2em 0;
}

.ticket-card-compact .ticket-description p:last-child {
    margin-bottom: 0;
}

.ticket-body-compact {
    gap: 1rem;
}

.authority-box-compact {
    min-width: 140px;
    max-width: 160px;
    padding: 0.75rem;
}

.authority-box-compact .authority-name {
    font-size: 0.8rem;
}

.authority-box-compact .authority-meta {
    font-size: 0.7rem;
}

.criteria-grid-compact {
    gap: 0.75rem;
}

.criteria-grid-compact .criteria-frame {
    padding: 0.5rem 0.75rem;
}

.criteria-grid-compact .criteria-legend {
    font-size: 0.6rem;
    margin-bottom: 0.35rem;
}

.criteria-grid-compact .tag-ticket {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
}

.insight-panel-compact {
    padding: 0.6rem 0.75rem;
    margin-top: 0.75rem;
}

.insight-panel-compact .insight-icon {
    width: 20px;
    height: 20px;
}

.insight-panel-compact .insight-icon i {
    font-size: 0.6rem;
}

.insight-panel-compact .insight-content h6 {
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
}

.insight-panel-compact .insight-content p {
    font-size: 0.7rem;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 768px) {
    .ticket-card-compact .ticket-body {
        flex-direction: column;
    }
    .authority-box-compact {
        max-width: none;
        width: 100%;
    }
    /* Keep criteria side by side */
    .criteria-grid-compact {
        grid-template-columns: 1fr 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIGMA HERO COMPONENT (reusable across all logged-in pages)
   Visual: gradient banner, 48px white title, 32px mint subtitle,
   decorative ellipse top-right, optional action buttons right.
   Usage:
     <section class="tg-hero">
       <div class="tg-hero-inner">
         <div class="tg-hero-text">
           <h1 class="tg-hero-title">Titel</h1>
           <p class="tg-hero-subtitle">Subtitle</p>
         </div>
         <div class="tg-hero-actions">
           <a class="tg-btn tg-btn-mint">Primaer</a>
           <a class="tg-btn tg-btn-outline-mint">Sekundaer</a>
         </div>
       </div>
     </section>
   ═══════════════════════════════════════════════════════════════ */

.tg-hero {
    background: var(--tg-hero-gradient);
    position: relative;
    overflow: hidden;
    /* 202px wie im Entwurf und wie die Hero-Baender der uebrigen Seiten --
       mit reiner Polsterung kam das Band je nach Inhalt nur auf ~155px. */
    min-height: 202px;
    padding: 40px 0;
    display: flex;
    align-items: center;
    color: #ffffff;
}

/* Decorative ellipse (top-right) */
.tg-hero::after {
    content: '';
    position: absolute;
    top: -160px;
    right: -80px;
    width: 485px;
    height: 486px;
    border-radius: 50%;
    border: 1.5px solid rgba(142, 187, 170, 0.15);
    pointer-events: none;
}

/* Optional second ellipse — opt-in with .tg-hero--double-decor */
.tg-hero--double-decor::before {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(142, 187, 170, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.tg-hero-inner {
    /* Buendig mit Navigation und Karten -- vorher 1280 mit 80px Polsterung,
       also eine dritte, abweichende Linie. */
    max-width: var(--tg-content-max);
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

/* Kompakte Variante (z.B. fuer Formularseiten) */
.tg-hero--compact {
    padding: 32px 0 32px;
}
.tg-hero--compact .tg-hero-title { font-size: 36px; }
.tg-hero--compact .tg-hero-subtitle { font-size: 22px; }

.tg-hero-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1;
}

.tg-hero-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.tg-hero-subtitle {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.4px;
    color: var(--tg-green-light);
    margin: 0;
}

.tg-hero-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: var(--tg-green-light);
    font-size: 15px;
}

.tg-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tg-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Optional Trust-Badge (Pulse-Dot Pill im Hero) */
.tg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(142, 187, 170, 0.3);
    border-radius: 100px;
    padding: 5px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.tg-hero-badge-dot {
    width: 10px;
    height: 10px;
    background: var(--tg-green-light);
    border-radius: 50%;
    animation: tg-hero-pulse 2s ease-in-out infinite;
}

@keyframes tg-hero-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.3); }
}

/* === Standardisierte Buttons (Figma-Look) === */
.tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    border-radius: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.3px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.tg-btn:hover { transform: translateY(-1px); text-decoration: none; }
.tg-btn:active { transform: translateY(0); }
.tg-btn:disabled, .tg-btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Mint primary (im Hero auf dunklem BG) */
.tg-btn-mint {
    background: var(--tg-green-light);
    color: var(--tg-dark-petrol);
}
.tg-btn-mint:hover { background: #a3cabd; color: var(--tg-dark-petrol); }

/* Outline-Mint (im Hero auf dunklem BG) */
.tg-btn-outline-mint {
    background: rgba(142, 187, 170, 0.3);
    border: 1px solid var(--tg-green-light);
    color: #ffffff;
}
.tg-btn-outline-mint:hover { background: rgba(142, 187, 170, 0.45); color: #ffffff; }

/* Petrol primary (auf hellem BG, im Content) */
.tg-btn-petrol {
    background: var(--tg-dark-petrol);
    color: #ffffff;
}
.tg-btn-petrol:hover { background: #0f2024; color: #ffffff; }

/* Outline-Petrol (auf hellem BG) */
.tg-btn-outline-petrol {
    background: transparent;
    border: 1px solid var(--tg-dark-petrol);
    color: var(--tg-dark-petrol);
}
.tg-btn-outline-petrol:hover { background: rgba(26, 47, 51, 0.08); color: var(--tg-dark-petrol); }

/* Ghost (dezent, fuer sekundaere Aktionen) */
.tg-btn-ghost {
    background: transparent;
    color: var(--tg-text-primary);
    border: 1px solid var(--tg-border-light);
}
.tg-btn-ghost:hover { background: var(--tg-bg-page); color: var(--tg-dark-petrol); }

/* Kleinere Variante */
.tg-btn-sm {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 8px;
    gap: 6px;
}

/* === Card-Standard (Figma: weiss, radius 20px, soft shadow) === */
.tg-card {
    background: var(--tg-bg-card);
    border-radius: var(--tg-card-radius);
    box-shadow: var(--tg-card-shadow);
    padding: 24px;
}

.tg-card--flat {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--tg-border-light);
}

/* === Section/Content-Wrapper === */
/* Inhaltsspalte -- dieselbe Linie wie Navigation, Hero und Karten */
.tg-section {
    max-width: var(--tg-content-max);
    margin: 0 auto;
    padding: 32px 0 60px;
}

@media (max-width: 1400px) {
    .tg-section {
        padding-left: var(--tg-content-pad);
        padding-right: var(--tg-content-pad);
    }
}

.tg-section--narrow {
    max-width: 900px;
}

.tg-section--overlap {
    margin-top: -25px;
    position: relative;
    z-index: 3;
}

/* Empty-State im Brand-Look */
.tg-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--tg-text-primary);
}

.tg-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(142, 187, 170, 0.15);
    color: var(--tg-petrol);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 1rem;
}

.tg-empty-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--tg-dark-petrol);
    margin: 0 0 0.5rem;
}

.tg-empty-text {
    font-size: 15px;
    color: var(--tg-text-primary);
    margin: 0 auto 1.25rem;
    max-width: 480px;
    line-height: 1.5;
}

/* Legacy .admin-header override (per-File-Styles aller alten Admin-Seiten haben
   denselben Block — diese hoehere Specificity zwingt sie alle in den Figma-Look) */
html body .admin-header {
    background: var(--tg-hero-gradient);
    color: #ffffff;
    padding: 48px 0 48px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

html body .admin-header::after {
    content: '';
    position: absolute;
    top: -160px;
    right: -80px;
    width: 485px;
    height: 486px;
    border-radius: 50%;
    border: 1.5px solid rgba(142, 187, 170, 0.15);
    pointer-events: none;
}

html body .admin-header > .container {
    position: relative;
    z-index: 1;
}

html body .admin-header h1,
html body .admin-header h2,
html body .admin-header .display-5,
html body .admin-header .display-6 {
    color: #ffffff;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 4px;
}

html body .admin-header .lead,
html body .admin-header p {
    color: var(--tg-green-light);
    font-size: 24px;
    font-weight: 400;
    margin: 0;
}

/* === Admin Navigation (Pill-Stil im Brand-Look) === */
.tg-admin-nav {
    background: #ffffff;
    border: 1px solid var(--tg-border-light);
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
}

.tg-admin-nav-list {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
}

.tg-admin-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-dark-petrol);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.tg-admin-nav-link i { font-size: 11px; color: var(--tg-petrol); }

.tg-admin-nav-link:hover {
    background: rgba(142, 187, 170, 0.12);
    color: var(--tg-dark-petrol);
}

.tg-admin-nav-link.is-active {
    background: var(--tg-dark-petrol);
    color: #ffffff;
}

.tg-admin-nav-link.is-active i { color: var(--tg-green-light); }

/* === Admin-Stat-Cards === */
.tg-stat-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--tg-border-light);
    border-left: 4px solid var(--tg-petrol);
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    height: 100%;
}

.tg-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-left-color: var(--tg-dark-petrol);
}

.tg-stat-card-value {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: var(--tg-dark-petrol);
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.tg-stat-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tg-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.tg-stat-card-hint {
    font-size: 11px;
    color: var(--tg-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tg-stat-card-hint i { color: var(--tg-petrol); opacity: 0.7; }

/* === Generic Content-Panel === */
.tg-panel {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid var(--tg-border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.tg-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--tg-border-light);
    background: var(--tg-bg-page);
}

.tg-panel-header h2,
.tg-panel-header h3,
.tg-panel-header h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--tg-dark-petrol);
    margin: 0;
}

.tg-panel-header i { color: var(--tg-petrol); }

.tg-panel-body { padding: 18px 20px; }

/* === Status-Pills (Health-States) === */
.tg-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.tg-status-pill--ok {
    background: rgba(118, 172, 100, 0.15);
    color: var(--tg-green-progress);
}

.tg-status-pill--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #c47000;
}

.tg-status-pill--error {
    background: rgba(229, 57, 53, 0.12);
    color: var(--tg-error);
}

/* === Responsive (Hero/Section) === */
@media (max-width: 992px) {
    .tg-hero { min-height: 0; padding: 32px 0; }
    .tg-hero-inner {
        padding: 0 var(--tg-content-pad);
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .tg-hero-title { font-size: 36px; }
    .tg-hero-subtitle { font-size: 22px; }
    .tg-hero::after { width: 320px; height: 320px; top: -180px; right: -120px; }
    .tg-section { padding: 24px 32px 48px; }
}

@media (max-width: 576px) {
    .tg-hero { padding: 24px 0 24px; }
    .tg-hero-inner { padding: 0 16px; }
    .tg-hero-title { font-size: 28px; }
    .tg-hero-subtitle { font-size: 16px; }
    .tg-hero-actions { width: 100%; }
    .tg-hero-actions .tg-btn { flex: 1; }
    .tg-section { padding: 16px 16px 32px; }
    .tg-btn { font-size: 15px; height: 44px; padding: 0 16px; }
}


/* ═══════════════════════════════════════════════════════════════
   SLIDE-OVER PANEL (gemeinsame Komponente)
   Genutzt von der Suche (notices/card_list.html) und den Ergebnissen
   (chancen/feed.html). Beide Seiten sollen sich identisch verhalten,
   deshalb liegt das hier und nicht je Template.
   ═══════════════════════════════════════════════════════════════ */
.tg-slideover-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s;
}

.tg-slideover-overlay.active { opacity: 1; visibility: visible; }

.tg-slideover {
    position: fixed;
    top: 0; right: 0;
    width: 70vw;
    max-width: 900px;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 30px rgba(0,0,0,0.15);
}

.tg-slideover.active { transform: translateX(0); }

.tg-slideover-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--tg-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* Entwurf: dunkler, quadratischer Knopf mit dem Aufzieh-Symbol */
.tg-slideover-header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 14px;
    color: #ffffff;
    background: var(--tg-dark-petrol);
    text-decoration: none;
    transition: opacity 0.15s;
    flex: none;
}

.tg-slideover-header a:hover {
    opacity: 0.85;
    color: #ffffff;
}

.tg-slideover-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--tg-text-primary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}

.tg-slideover-close:hover {
    background: var(--tg-bg-page);
    color: var(--tg-dark-petrol);
}

.tg-slideover-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Panel-Styles im Slide-over zuruecksetzen, damit es eingebettet wirkt */
.tg-slideover-body .tg-panel {
    max-width: 100%;
    margin: 0;
    padding: 32px 24px;
    border-radius: 0;
    box-shadow: none;
}

.tg-slideover-body .tg-panel-close {
    display: none;
}

/* Fussleiste fuer seitenspezifische Aktionen. Ohne Inhalt ist sie per
   hidden-Attribut weg, dann sieht das Panel aus wie in der Suche. */
.tg-slideover-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--tg-border-light);
    background: #ffffff;
    padding: 1rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tg-slideover-footer[hidden] {
    display: none;
}

.tg-slideover-footer .btn {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .tg-slideover {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TREFFERKARTE (.tg-treffer) -- Standardelement fuer jede von uns
   bewertete Ausschreibung. Markup: components/_treffer_karte.html.
   Genutzt von der Ergebnisliste und der Suchauftrags-Detailseite.
   ═══════════════════════════════════════════════════════════════ */
/* Am Entwurf ausgemessen ---------------------------------------------------
   Am Entwurf ausgemessen (Kartenbreite 1320): Farbstreifen 12, Perforations-
   spalte 69 (Trennlinie also bei 81), Inhalt ab 119. Die Loecher sitzen 90 von
   oben und 48 von unten -- deshalb feste Abstaende statt space-around.
   -------------------------------------------------------------------------- */
.tg-treffer {
    background: var(--tg-bg-card);
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
    display: flex;
    overflow: hidden;
    margin-bottom: 16px;
    min-height: 230px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.tg-treffer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Farbstreifen an der linken Kante, durchgehend ueber die volle Hoehe */
.tg-treffer-spine {
    /* Filigran statt Block -- der Streifen soll akzentuieren, nicht dominieren */
    width: 6px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.tg-treffer-spine-bar {
    position: absolute;
    inset: 0;
}

.tg-treffer-spine-bar--green { background: var(--tg-green-progress); }
.tg-treffer-spine-bar--amber { background: var(--tg-warning); }
.tg-treffer-spine-bar--red { background: var(--tg-error); }

/* Perforationsspalte: zwei Loecher, dazwischen der gedrehte Wert */
.tg-treffer-holes {
    width: 75px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Gleicher Abstand oben wie unten -- vorher sass das obere Loch sichtbar
       zu tief. */
    padding: 52px 0;
    border-right: 2px dashed var(--tg-border-light);
    position: relative;
}

.tg-treffer-hole {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    background: var(--tg-border-light);
    border-radius: 50%;
}

/* Wert und "FIT" gedreht, von unten nach oben zu lesen. Absolut gesetzt, damit
   die gedrehte Breite die schmale Spalte nicht auseinanderzieht; row-reverse,
   weil nach der Drehung das erste Element unten landet. */
.tg-treffer-score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}

.tg-treffer-score-value {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -1px;
}

.tg-treffer-score-value--green { color: var(--tg-green-progress); }
.tg-treffer-score-value--amber { color: var(--tg-warning); }
.tg-treffer-score-value--red { color: var(--tg-error); }

.tg-treffer-score-label {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--tg-text-primary);
    letter-spacing: 1px;
}

/* Inhalt */
.tg-treffer-body {
    flex: 1;
    padding: 28px 34px 22px 38px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Zeile 1: Suchauftrag und Status links, Restlaufzeit rechts */
.tg-treffer-chips {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.tg-treffer-chips-left {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.tg-treffer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Suchauftrag und Status: weiss mit petrolfarbenem Rand */
.tg-treffer-badge--query,
.tg-treffer-badge--status {
    border: 1px solid var(--tg-petrol);
    color: var(--tg-petrol);
    background: #ffffff;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 28px;
}

/* Gefuellter Chip (z.B. "Gemerkt" in der Merkliste) */
.tg-treffer-badge--filled {
    background: rgba(118, 172, 100, 0.3);
    color: var(--tg-green-progress);
    border: none;
}

/* Restlaufzeit: gruen hinterlegt */
.tg-treffer-badge--deadline {
    background: rgba(118, 172, 100, 0.3);
    color: var(--tg-green-progress);
    border: none;
}

.tg-treffer-badge--deadline-warn {
    background: rgba(245, 158, 11, 0.25);
    color: var(--tg-warning);
    border: none;
}

.tg-treffer-badge--deadline-urgent {
    background: rgba(229, 57, 53, 0.20);
    color: var(--tg-error);
    border: none;
}

.tg-treffer-badge-icon {
    font-size: 14px;
}

/* Zeile 2: Titel und Vergabestelle */
.tg-treffer-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: var(--tg-text-primary);
    margin: 0;
    /* Vollstaendiger Titel -- lange Titel brechen um statt gekuerzt zu werden */
    overflow-wrap: anywhere;
}

.tg-treffer-authority {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    color: var(--tg-text-primary);
}

.tg-treffer-authority i {
    font-size: 15px;
    opacity: 0.75;
}

/* Zeile 3: KI-Analyse */
.tg-treffer-analysis {
    background: rgba(76, 119, 119, 0.09);
    border-radius: 12px;
    padding: 14px 22px 16px 20px;
    margin-top: 14px;
    position: relative;
    overflow: hidden;
}

/* Farbiger Balken an der linken Kante des Kastens */
.tg-treffer-analysis::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--tg-teal-medium);
}

.tg-treffer-analysis-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tg-treffer-analysis-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-treffer-analysis-icon i {
    font-size: 16px;
    color: var(--tg-teal-medium);
}

.tg-treffer-analysis-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--tg-teal-medium);
}

.tg-treffer-analysis-text {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tg-text-primary);
    margin: 0;
}

/* Der Text kann gerendertes Markdown sein -- Absaetze und Listen sollen sich
   in den Kasten einfuegen statt eigene Abstaende mitzubringen. */
.tg-treffer-analysis-text > *:first-child { margin-top: 0; }
.tg-treffer-analysis-text > *:last-child { margin-bottom: 0; }

.tg-treffer-analysis-text p {
    margin: 0 0 0.5em;
    font-size: inherit;
    line-height: inherit;
}

.tg-treffer-analysis-text ul,
.tg-treffer-analysis-text ol {
    margin: 0 0 0.5em;
    padding-left: 1.2em;
}

.tg-treffer-analysis-text strong { font-weight: 700; }

/* Empfehlung: Gluehbirne, hervorgehoben */
.tg-treffer-analysis-match {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tg-teal-medium);
}

.tg-treffer-analysis-match i {
    margin-top: 4px;
    font-size: 14px;
    flex-shrink: 0;
}

.tg-treffer-analysis-match span,
.tg-treffer-analysis-match-text {
    font-weight: 700;
}

.tg-treffer-analysis-match-text > *:first-child { margin-top: 0; }
.tg-treffer-analysis-match-text > *:last-child { margin-bottom: 0; }

.tg-treffer-analysis-match-text p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* Ersatz fuer die KI-Analyse, wenn es keine gibt */
.tg-treffer-description {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tg-border-light);
}

.tg-treffer-description-label {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--tg-text-primary);
    margin-bottom: 4px;
}

.tg-treffer-description-text {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tg-text-primary);
    margin: 0;
}

/* Zeile 4: Aktionen unten rechts */
.tg-treffer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding-top: 0;
}

.tg-treffer-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--tg-petrol);
    background: #ffffff;
    color: var(--tg-petrol);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 16px;
    text-decoration: none;
}

.tg-treffer-action-btn:hover {
    background: var(--tg-petrol);
    color: #ffffff;
}

.tg-treffer-action-btn--active {
    background: var(--tg-petrol);
    color: #ffffff;
    border-color: var(--tg-petrol);
}

/* Gemerkt: gruen gefuellt wie im Entwurf */
[data-treffer-aktion="merken"].tg-treffer-action-btn--active {
    background: var(--tg-green-progress);
    border-color: var(--tg-green-progress);
    color: #ffffff;
}

[data-treffer-aktion="merken"].tg-treffer-action-btn--active:hover {
    background: #689a58;
    border-color: #689a58;
}

/* Letzter Knopf (Unterlagen oeffnen) ist gefuellt */
.tg-treffer-action-btn--filled {
    background: var(--tg-petrol);
    color: #ffffff;
}

.tg-treffer-action-btn--filled:hover {
    background: var(--tg-dark-petrol);
    color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════
   Bewertungsring (KI-Match)
   Markup in templates/components/_ki_donut.html. Die Regeln stehen hier
   und nicht in einer der Vorlagen, damit Vollansicht und Panel dieselbe
   Darstellung benutzen und nicht auseinanderlaufen koennen.
   ═══════════════════════════════════════════════════════════════════ */
.tg-ki-donut {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex: none;
}

.tg-ki-donut svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Der Ring beginnt oben statt rechts */
    transform: rotate(-90deg);
}

.tg-ki-donut svg circle.tg-ki-donut-fill {
    fill: #ffffff;
    stroke: none;
}

.tg-ki-donut svg circle.tg-ki-donut-track {
    fill: none;
    stroke: #d9d9d9;
    stroke-width: 13;
}

.tg-ki-donut svg circle.tg-ki-donut-progress {
    fill: none;
    stroke: var(--tg-green-progress);
    stroke-width: 13;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.tg-ki-donut-value {
    position: relative;
    z-index: 1;
    font-weight: 800;
    line-height: 1;
    color: var(--tg-green-progress);
}


/* ═══════════════════════════════════════════════════════════════════
   Symbolknoepfe in der Metazeile einer Ausschreibung
   Entwurf: gruen gefuelltes Lesezeichen, daneben der Papierkorb im Umriss.
   Markup in notices/detail.html und notices/detail_v2.html.
   ═══════════════════════════════════════════════════════════════════ */
.tg-notice-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1.5px solid var(--tg-border-light);
    background: #ffffff;
    color: var(--tg-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex: none;
}

.tg-notice-icon-btn:hover {
    background: var(--tg-bg-page);
}

.tg-notice-icon-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* Merken: gruen gefuellt, sobald die Ausschreibung gemerkt ist */
.tg-notice-icon-btn--merken {
    border-color: var(--tg-green-progress);
    color: var(--tg-green-progress);
}

.tg-notice-icon-btn--merken.active {
    background: var(--tg-green-progress);
    border-color: var(--tg-green-progress);
    color: #ffffff;
}

.tg-notice-icon-btn--merken.active:hover {
    background: #689a58;
}

/* Verwerfen bleibt im Umriss -- eine wegwerfende Aktion draengt sich nicht auf */
.tg-notice-icon-btn--verwerfen:hover {
    border-color: #ba0000;
    color: #ba0000;
}

.tg-notice-icon-gruppe {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex: none;
}

/* ═══════════════════════════════════════════════════════════════
   PASSUNGSWORT STATT ZAHL (Nachtrag 3, B1–B3)
   Der Ruecken der Trefferkarte zeigt „Volltreffer“, „Kernpassung“
   oder „Angrenzend“ -- zweizeilig getrennt wie im Entwurf.
   ═══════════════════════════════════════════════════════════════ */
.tg-treffer-passung {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: -0.2px;
    text-align: center;
    white-space: nowrap;
}

.tg-treffer-passung--green { color: var(--tg-green-progress); }
.tg-treffer-passung--amber { color: var(--tg-warning); }

/* „Genau gesucht: …“ und „Offen: …“ unter dem Auftraggeber (B2) */
.tg-treffer-gesucht {
    margin: 10px 0 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--tg-text-muted);
}

/* „Warum?“ (N16, A9) */
.tg-treffer-warum {
    margin-top: 12px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
}

.tg-treffer-warum > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 700;
    color: var(--tg-petrol);
    list-style: none;
}

.tg-treffer-warum > summary::-webkit-details-marker { display: none; }
.tg-treffer-warum > summary::after { content: '▾'; font-size: 12px; transition: transform 0.15s ease; }
.tg-treffer-warum[open] > summary::after { transform: rotate(180deg); }
.tg-treffer-warum > summary:focus-visible { outline: 2px solid var(--tg-petrol); outline-offset: 2px; border-radius: 4px; }

.tg-treffer-warum-text {
    margin-top: 8px;
    padding: 10px 14px;
    border-left: 3px solid var(--tg-petrol);
    border-radius: 0 10px 10px 0;
    background: var(--tg-bg-insight);
    color: var(--tg-text-primary);
    cursor: auto;
}

.tg-treffer-warum-text p { margin: 0 0 6px; }
.tg-treffer-warum-link { font-weight: 700; color: var(--tg-petrol); }

/* Passungswort in der Detailansicht statt des Rings (B1) */
.tg-passung-marke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 18px;
    border-radius: 999px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.tg-passung-marke--green { background: #e9f2e5; color: #3f7a2f; }
.tg-passung-marke--amber { background: #fbf1dc; color: #9a5d06; }

/* Offene Fragen zur Suchauslegung an „Suchprofil“ (A2) -- petrol wie im Entwurf */
.tg-nav-fragen { background: var(--tg-petrol) !important; color: #ffffff; font-size: 11px; }
.tg-nav-fragen[hidden] { display: none !important; }

/* Schmale Bildschirme: Der Ruecken bleibt, wird aber schmaler, damit Titel und
   Begruendung Platz haben -- das Passungswort bleibt zweizeilig lesbar. */
@media (max-width: 575.98px) {
    .tg-treffer { min-height: 0; border-radius: 16px; }
    .tg-treffer-holes { width: 62px; padding: 26px 0; }
    .tg-treffer-hole { width: 18px; height: 18px; }
    .tg-treffer-passung { font-size: 14px; }
    .tg-treffer-score-value { font-size: 30px; }
    .tg-treffer-body { padding: 16px 14px 14px 16px; }
    .tg-treffer-chips { margin-bottom: 14px; gap: 8px; }
    .tg-treffer-chips-left { gap: 8px; min-width: 0; }
    .tg-treffer-badge { height: 28px; padding: 0 12px; font-size: 14px; }
    .tg-treffer-badge--query,
    .tg-treffer-badge--status { max-width: 100%; line-height: 26px; }
    .tg-treffer-title { font-size: 17px; overflow-wrap: break-word; hyphens: auto; }
    .tg-treffer-authority { align-items: flex-start; font-size: 15px; }
    .tg-treffer-authority i { margin-top: 3px; }
    .tg-treffer-analysis { padding: 12px 14px 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .tg-treffer-warum > summary::after { transition: none; }
}

/* =========================================================================
   Fundstellen-Zeile der Trefferkarte (Vertrag Matching-Kosten, 5.1) und
   einmaliger Hinweis „Neu: …“ (Abschnitt 6)
   ========================================================================= */
.tg-treffer-fundort {
    margin: 8px 0 0;
    padding-left: 10px;
    border-left: 3px solid var(--tg-green-light);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--tg-text-muted);
    overflow-wrap: anywhere;
}
.tg-treffer-fundort strong { color: var(--tg-dark-petrol); font-weight: 600; }
.tg-treffer-fundort mark {
    background: #fdf0d2;
    color: var(--tg-dark-petrol);
    padding: 0 2px;
    border-radius: 2px;
}
.tg-treffer-neu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--tg-dark-petrol);
    color: #ffffff;
    border-radius: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(26, 47, 51, 0.18);
    transition: opacity 180ms ease, transform 180ms ease;
}
.tg-treffer-neu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: var(--tg-dark-petrol);
    transform: rotate(45deg);
    border-radius: 2px;
}
.tg-treffer-neu-text { flex: 1 1 auto; min-width: 0; }
.tg-treffer-neu-btn {
    flex: none;
    border: 0;
    border-radius: 100px;
    padding: 6px 14px;
    background: var(--tg-green-light);
    color: var(--tg-dark-petrol);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.tg-treffer-neu-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.tg-treffer-neu--weg { opacity: 0; transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
    .tg-treffer-neu { transition: none; }
}
@media (max-width: 480px) {
    .tg-treffer-neu { flex-wrap: wrap; }
    .tg-treffer-neu-text { flex-basis: 100%; }
    .tg-treffer-neu-btn { margin-left: auto; }
}