/* ==========================================================================
   Technothek Hub – Design-System
   Technische, sachliche Bildsprache: Platinen-Grün als Primärfarbe, Kupfer als
   Akzent, dunkles Tannengrün als Grundton, klare Struktur, datenblattartige Darstellung. Baut auf
   Bootstrap 5.3 CSS-Variablen auf (kein Rebuild/Sass nötig).
   ========================================================================== */

:root {
    /* Platinen-Grün als Bootstrap-Primary (Elektronik/Bausätze, bewusst kein VDI-/VDE-Blau) */
    --bs-primary: #1a6b45;
    --bs-primary-rgb: 26, 107, 69;
    --bs-primary-text-emphasis: #0f3d27;
    --bs-primary-bg-subtle: #dcefe4;
    --bs-primary-border-subtle: #a6d2b8;

    --bs-link-color: #1a6b45;
    --bs-link-color-rgb: 26, 107, 69;
    --bs-link-hover-color: #0f3d27;
    --bs-link-hover-color-rgb: 15, 61, 39;

    /* Leicht grünliche Neutraltöne statt Bootstrap-Standardgrau */
    --th-navy: #10231b;
    --th-navy-2: #183427;
    --th-ink: #1b2a23;
    --th-muted: #55695e;
    --th-surface: #f3f8f5;
    --th-border: #d7e3dc;
    --th-accent: #c7811f;

    /* Hinweisboxen (alert-info) in Kupfer-Tönen statt Bootstrap-Cyan */
    --bs-info-text-emphasis: #5a3a08;
    --bs-info-bg-subtle: #f8ecd6;
    --bs-info-border-subtle: #e6c98f;

    --bs-body-bg: #ffffff;
    --bs-body-color: var(--th-ink);
    --bs-secondary-color: var(--th-muted);
    --bs-border-color: var(--th-border);

    --th-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* -- Technische Textbausteine -------------------------------------------- */

.th-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.th-mono {
    font-family: var(--th-font-mono);
    font-variant-numeric: tabular-nums;
}

/* -- Utility-Leiste + Hauptnavigation ------------------------------------- */

.th-utility-bar {
    background: var(--th-navy);
    color: #cfe6da;
    font-size: 0.8125rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.th-utility-bar a {
    color: #cfe6da;
    text-decoration: none;
}

.th-utility-bar a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.th-navbar {
    background: var(--th-navy-2);
    border-bottom: 3px solid var(--bs-primary);
}

.th-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.th-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: var(--bs-primary);
    color: #fff;
    font-family: var(--th-font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.th-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.th-brand-text small {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9dbfad;
}

.th-navbar .nav-link {
    color: #cfe6da;
    font-size: 0.925rem;
    font-weight: 500;
}

.th-navbar .nav-link:hover,
.th-navbar .nav-link.active {
    color: #ffffff;
}

/* -- Hero ------------------------------------------------------------------ */

.th-hero {
    background: linear-gradient(135deg, var(--th-navy) 0%, var(--th-navy-2) 55%, var(--bs-primary) 130%);
    color: #eef6f1;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

.th-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.th-hero .th-eyebrow {
    color: #9ad6b4;
}

/* -- Karten / Panels -------------------------------------------------------- */

.th-card {
    border: 1px solid var(--th-border);
    border-radius: 0.375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.th-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.th-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 0.25rem 0.75rem rgba(16, 35, 27, 0.08);
}

.th-card-accent {
    border-top: 3px solid var(--bs-primary);
}

/* -- Datenblatt (Standort-Detail) -------------------------------------------- */

.th-datasheet dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--th-muted);
    margin-top: 0.85rem;
}

.th-datasheet dt:first-child {
    margin-top: 0;
}

.th-datasheet dd {
    margin-bottom: 0;
    color: var(--th-ink);
}

.th-icon-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.th-icon-row svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--bs-primary);
}

.th-hours-table th,
.th-hours-table td {
    padding: 0.3rem 0.6rem;
    font-size: 0.9rem;
}

.th-hours-table td.th-mono {
    color: var(--th-ink);
}

.th-hours-table tr.th-closed td {
    color: var(--th-muted);
}

/* -- Status-Badges ------------------------------------------------------- */

.th-status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.4rem;
}

/* -- Footer --------------------------------------------------------------- */

.th-footer {
    background: var(--th-navy);
    color: #b9d3c4;
}

.th-footer a {
    color: #dcefe4;
}

.th-footer a:hover {
    color: #ffffff;
}

.th-footer h2,
.th-footer h3 {
    color: #ffffff;
}

/* -- Sonstiges -------------------------------------------------------------- */

trix-editor.trix-content {
    min-height: 16rem;
}

/* Symfony markiert Pflichtfelder mit class="required", zeigt das aber ohne
   eigenes CSS nicht sichtbar an - Sternchen ergänzt für sehende Nutzende,
   die native required-Validierung erreicht Screenreader-Nutzende ohnehin. */
.form-label.required::after {
    content: ' *';
    color: var(--bs-danger);
}

/* Kompakte Öffnungszeiten-Eingabe: ein Tag pro Zeile statt pro Feld. */
.opening-hours-day-label {
    min-width: 8rem;
    flex-shrink: 0;
}

.opening-hours-time {
    width: 6.5rem;
}

/* -- Kontaktformular: Honeypot-Feld für Menschen unsichtbar ---------------- */

.th-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}