/* ============================================================
   GESPANN-LEXIKON STYLESHEET - OPTIMIERT
   Version: 2026-01-24
   - Reduzierte Code-Duplikation
   - CSS-Variablen für Farben
   - Konsolidiertes Google Translate Widget Styling
   ============================================================ */

/* ========================================
   CSS-VARIABLEN
   ======================================== */

:root {
    --primary-color: #D32F2F;
    --primary-hover: #b71c1c;
    --text-color: #2c3e50;
    --heading-color: #212529;
    --border-color: #e9ecef;
    --bg-gray: #f8f9fa;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 17px;
    --max-width: 960px;
    --padding-desktop: 40px;
    --padding-mobile: 15px;

    /* ==========================================
       TEXT HIERARCHY TOKENS — GL-TYPOGRAPHY-v1
       Einfuehrung: 2026-06-07
       ========================================== */
    --gl-text-primary:   #2c3e50;   /* Haupttext     10.1:1 AA ✅ */
    --gl-text-secondary: #555;      /* Sekundaertext  7.0:1 AA ✅ */
    --gl-text-muted:     #767676;   /* Begleittext    4.54:1 AA ✅ */
    --gl-text-micro:     #888;      /* Kleintext      3.5:1 — nur bold/gross */
    /* TYPE SCALE */
    --gl-size-xl:   2rem;           /* 34px — H1 */
    --gl-size-lg:   1.5rem;         /* 25px — H2 */
    --gl-size-md:   1.125rem;       /* 19px — H3, Lead */
    --gl-size-base: 1rem;           /* 17px — Fliesstext */
    --gl-size-sm:   0.75rem;        /* 13px — Meta, Footer */
}

/* ========================================
   GRUNDLEGENDES LAYOUT
   ======================================== */

html {
    background: #fafafa !important;
    background-attachment: fixed !important;
    min-height: 100% !important;
}

body {
    font-family: var(--font-main) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.68 !important;
    color: var(--text-color) !important;
    background: white !important;
    margin: 40px auto !important;
    padding: 0 var(--padding-desktop) 50px var(--padding-desktop) !important;
    max-width: var(--max-width) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    overflow: visible !important;
    top: 0 !important;  /* Google Translate Fix */
}

/* ========================================
   NAVIGATION
   ======================================== */

ul#topnav,
#topnav {
    background: var(--bg-gray) !important;
    padding: 20px 0 !important;
    margin: 0 calc(-1 * var(--padding-desktop)) !important;
    border-bottom: 1px solid #dee2e6 !important;
    list-style: none !important;
    text-align: center !important;
    border-radius: 8px 8px 0 0 !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    overflow: visible !important;
}

#topnav li {
    display: inline-block !important;
    float: none !important;
    margin: 0 15px !important;
    padding: 0 !important;
    list-style: none !important;
    background-image: none !important;
}

#topnav a,
#topnav a:link,
#topnav a:visited {
    color: var(--heading-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

#topnav a:hover,
#topnav a:active,
#topnav a.active,
#topnav a.here,
#topnav li.active a {
    background: var(--primary-color) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ========================================
   SCHNELLZUGRIFF-KACHELN (index.html)
   ======================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0 28px 0;
}

.card {
    display: block;
    padding: 16px 18px;
    background: var(--bg-gray);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.card:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(211,47,47,0.12);
    border-top-color: var(--primary-hover);
    transform: translateY(-2px);
}

.card strong {
    display: block;
    color: var(--primary-color) !important;
    font-weight: 700;
    margin-bottom: 4px;
}

.card span {
    display: block;
    color: #666;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ========================================
   ÜBERSCHRIFTEN
   ======================================== */

h1 {
    color: var(--heading-color) !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    margin: 40px 0 30px 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 3px solid var(--primary-color) !important;
    line-height: 1.3 !important;
}

h2 {
    color: var(--heading-color) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin: 35px 0 20px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--border-color) !important;
}

h3 {
    color: #495057 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 30px 0 15px 0 !important;
}

h4, h5, h6 {
    color: #495057 !important;
    font-weight: 600 !important;
    margin: 25px 0 10px 0 !important;
}

/* ========================================
   DATEN-ÜBERSCHRIFTEN
   ======================================== */

.data-section-header,
.Zwischenüb,
p.Zwischenüb {
    font-size: var(--font-size-base) !important;
    font-weight: bold !important;
    color: #555 !important;
    text-decoration: underline !important;
    display: block !important;
    margin: 25px 0 15px 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.5 !important;
}

/* ========================================
   TABELLEN - KONSOLIDIERT
   ======================================== */

/* Alle Tabellen — Basis */
table {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
}

/* Tabellen-Header */
table th {
    background: var(--primary-color) !important;
    color: #fff !important;
    padding: 10px 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
}

/* Tabellen-Zellen allgemein */
table td {
    padding: 9px 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    vertical-align: top !important;
}

/* Zebra-Stripes */
table tr:nth-child(even) td {
    background: #f2f2f2 !important;
}

/* Hover-Highlight */
table tr:hover td {
    background: #fff5f5 !important;
}

.tech-data-table,
.angle-table {
    width: 100% !important;
    margin: 20px 0 !important;
    border-collapse: collapse !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.5 !important;
}

.tech-data-table tr,
.angle-table tr {
    border-bottom: 1px solid #f0f0f0 !important;
}

.tech-data-table tr:last-child,
.angle-table tr:last-child {
    border-bottom: none !important;
}

.tech-data-table td,
.angle-table td {
    padding: 8px 12px !important;
    vertical-align: top !important;
}

.tech-data-table td:first-child {
    width: 240px !important;
    color: var(--text-color) !important;
    font-weight: normal !important;
    padding-right: 20px !important;
}

.tech-data-table td:last-child {
    color: var(--text-color) !important;
}

/* Spezielle Angle-Table Anpassungen */
.angle-table td {
    padding: 8px 15px !important;
    vertical-align: middle !important;
}

.angle-table td:first-child {
    font-weight: normal !important;
    min-width: 200px !important;
    text-align: left !important;
}

.angle-table td:not(:first-child) {
    text-align: center !important;
}

/* ========================================
   LISTEN
   ======================================== */

ul, ol {
    margin: 20px 0 !important;
    padding-left: 30px !important;
}

li {
    margin: 5px 0 !important;
    line-height: 1.5 !important;
}

.backlinks ul,
.references ul,
.backlinks ol,
.references ol {
    margin-left: 0 !important;
    padding-left: 20px !important;
}

/* Spezielle "Einzug"-Listen */
ul[style*="list-style-type:disc"] {
    margin: 15px 0 !important;
    padding-left: 20px !important;
    list-style-position: outside !important;
}

ul[style*="list-style-type:disc"] li p.Einzug {
    font-size: var(--font-size-base) !important;
    color: var(--text-color) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

ul[style*="list-style-type:disc"] li a.Einzug {
    font-size: var(--font-size-base) !important;
    color: var(--primary-color) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

ul[style*="list-style-type:disc"] li a.Einzug:hover {
    color: var(--primary-hover) !important;
    text-decoration: underline !important;
}

/* ========================================
   ABSÄTZE UND TEXT
   ======================================== */

p {
    margin: 15px 0 !important;
    text-align: left !important;
    hyphens: auto !important;
}

p.Lexikon {
    margin: 15px 0 !important;
    text-align: left !important;
    hyphens: auto !important;
}

/* Leere Absätze */
p.Lexikon:empty,
p:empty {
    margin: 5px 0 !important;
}

/* Footer-Bereich */
#footer,
#parents,
#references {
    margin: 30px 0 20px 0 !important;
    padding: 0 !important;
}

#footer h2,
#parents h2,
#references h2 {
    margin: 20px 0 15px 0 !important;
}

#footer p,
#parents p,
#references p {
    margin: 10px 0 !important;
}

/* ========================================
   LINKS - KONSOLIDIERT
   ======================================== */

a,
a:link,
p a,
p.Lexikon a,
.Lexikon a,
#content a,
div#content a,
#footer a,
#parents a,
#references a,
a[style*="color"] {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-size: inherit !important;
}

a:visited {
    color: var(--primary-color) !important;
}

a:hover,
a:active {
    color: var(--primary-hover) !important;
    text-decoration: underline !important;
}

/* ========================================
   BILDER
   ======================================== */

img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px 0 !important;
    border-radius: 4px !important;
}

p img,
.Lexikon img {
    margin: 15px 0 !important;
}

/* ========================================
   SPEZIELLE KLASSEN
   ======================================== */

/* Copyright */
p.Copyright {
    font-size: 10pt !important;
    color: #404040 !important;
}

/* Hervorhebung */
em.Hervorhebung,
.Hervorhebung {
    font-style: italic !important;
}

/* Quellenverweis */
p.Verweis,
p.QuellenVerweis {
    font-size: var(--font-size-base) !important;
    color: #404040 !important;
    font-style: italic !important;
}

p.Verweis a,
p.QuellenVerweis a {
    color: var(--primary-color) !important;
    font-size: var(--font-size-base) !important;
}

/* ========================================
   GOOGLE TRANSLATE WIDGET - KONSOLIDIERT
   ======================================== */

/* Navigation-Item */
#topnav li.translate-widget {
    float: right !important;
    list-style: none !important;
}

/* Links im Widget */
#topnav li.translate-widget a {
    padding: 0 !important;
}

/* Widget-Container */
#google_translate_element {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}

/* Schriftgröße erzwingen */
#google_translate_element,
#google_translate_element *,
.goog-te-gadget,
.goog-te-gadget *,
.goog-te-gadget-simple,
.goog-te-gadget-simple * {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Google Banner & Branding ausblenden */
.goog-te-banner-frame {
    display: none !important;
}

/* "Powered by" Text und Logo ausblenden */
#google_translate_element .goog-te-gadget > span,
#google_translate_element .goog-te-gadget img {
    display: none !important;
}

/* Logo-Link ausblenden */
.goog-logo-link {
    display: none !important;
}

/* Gadget-Styling */
.goog-te-gadget {
    font-family: inherit !important;
    color: transparent !important;
}

.goog-te-gadget-simple {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-decoration: none !important;
}

.goog-te-gadget-simple:hover {
    text-decoration: underline !important;
}

.goog-te-gadget-simple:focus,
.goog-te-gadget-simple:focus-visible {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* Menu-Value */
.goog-te-gadget-simple .goog-te-menu-value,
.goog-te-gadget-simple .goog-te-menu-value span {
    color: inherit !important;
    vertical-align: middle !important;
    font-family: inherit !important;
    border: none !important;
    background: none !important;
}

/* Dropdown-Pfeil */
.goog-te-gadget-simple img {
    vertical-align: middle !important;
    margin-left: 3px !important;
    opacity: 0.7 !important;
}

/* Dropdown-Menü */
.goog-te-menu-frame {
    max-height: 400px !important;
    overflow-y: auto !important;
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    border-radius: 4px !important;
}

.goog-te-menu-value span {
    padding: 5px 10px !important;
}

.goog-te-menu2-item:hover {
    background-color: #f5f5f5 !important;
}

.goog-te-menu2-item-selected {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mobile */
@media (max-width: 768px) {
    body {
        font-size: 16px !important;
        padding: 0 var(--padding-mobile) 50px var(--padding-mobile) !important;
    }
    
    #topnav {
        margin: 0 calc(-1 * var(--padding-mobile)) !important;
    }
    
    #topnav li {
        margin: 5px 15px !important;
    }
    
    #topnav li.translate-widget {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 10px 0 !important;
    }
    
    #google_translate_element {
        display: block !important;
    }
    
    p,
    p.Lexikon,
    .Lexikon {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    h1 {
        font-size: 24px !important;
    }
    
    h2, .Zwischenüb {
        font-size: 18px !important;
    }
    
    #content {
        padding: 0 !important;
    }
}

/* ========================================
   LINK-VORSCHAU (TOOLTIP PREVIEW)
   ======================================== */

.link-preview {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    max-width: 350px;
    min-width: 250px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    font-family: var(--font-main);
}

.link-preview.visible {
    opacity: 1;
    visibility: visible;
}

.link-preview-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.link-preview-img.lp-hidden {
    display: none !important;
}

.link-preview-body {
    padding: 12px 15px;
}

.link-preview-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.link-preview-desc {
    font-size: 13px;
    color: #555;
    margin: 0;
    line-height: 1.5;
    text-align: left !important;
    hyphens: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Auf Mobilgeraeten deaktiviert (kein Hover) */
@media (max-width: 768px) {
    .link-preview {
        display: none !important;
    }
}

@media (hover: none) {
    .link-preview {
        display: none !important;
    }
}

/* ========================================
   DRUCK-OPTIMIERUNG
   ======================================== */

@media print {
    #topnav li.translate-widget,
    #google_translate_element,
    .goog-te-banner-frame,
    .goog-te-gadget {
        display: none !important;
    }
}
/* ========================================
   MOBILE — PHASE 2.2 + 3.1 ERGAENZUNGEN
   Hinzugefuegt: 2026-06-07
   ======================================== */

@media (max-width: 768px) {

    /* Body auf Mobile: kein Margin, kein Shadow, kein Radius */
    body {
        margin: 0 auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Ueberschriften verkleinern */
    h3 {
        font-size: 17px !important;
    }

    h4, h5, h6 {
        font-size: 16px !important;
    }

    /* Tabellen: nie breiter als der Viewport */
    table {
        max-width: 100% !important;
    }

    /* Datentabellen scrollbar machen statt zu brechen */
    .tech-data-table,
    .angle-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .tech-data-table td:first-child {
        width: auto !important;
        min-width: 120px !important;
    }

    /* Touch-Targets: #topnav a auf min. 44px Hoehe */
    #topnav li {
        margin: 2px 0 !important;
    }

    #topnav a,
    #topnav a:link,
    #topnav a:visited {
        padding: 12px 16px !important;
        display: block !important;
        min-height: 44px !important;
        line-height: 44px !important;
        font-size: 18px !important;
    }

}

/* ==========================================
   LEXICAN INLINE-OVERRIDE
   Normalisiert pt-basierte Schriftgroessen
   und #404040 / #3F3F3F aus LexiCan-Export.
   Elemente erben Farbe und Groesse aus user.css.
   ========================================== */
p.Lexikon,
p[class~="Lexikon"],
td.Lexikon,
span.Lexikon {
    font-size: var(--font-size-base) !important;
    color: var(--text-color) !important;
}
.Lexikon em,
.Lexikon strong,
p.Lexikon em,
p.Lexikon strong {
    color: inherit !important;
}
p[style*="font-size:12pt"],
p[style*="font-size: 12pt"],
p[style*="font-size:10pt"],
p[style*="font-size: 10pt"],
td[style*="font-size:12pt"],
em[style*="font-size:12pt"],
span[style*="font-size:12pt"] {
    font-size: inherit !important;
}
[style*="color:#404040"],
[style*="color: #404040"],
[style*="color:#3F3F3F"],
[style*="color: #3F3F3F"] {
    color: inherit !important;
}