/* ==========================================================================
   extra.css (MkDocs Material)
   Ziel: NUR Struktur + Kommentare. Keine inhaltlichen Änderungen an Regeln.
   ==========================================================================

   Inhaltsübersicht
   0) Design Tokens / CSS-Variablen (:root)
   1) Header & Tabs (Top-Navigation)
   2) Landingpage: Hero (Parallax)
   3) Landingpage: Welcome-Section (Full-Width Box + Foto)
   4) Landingpage: Features/Leistungen (alternierende Reihen)
   5) Layout: Content-Breite für Unterseiten
   6) Typografie & Navigation (Headings, Fließtext, Sidebar, ToC)
   7) Unterseiten: Subpage-Hero (Intro-Box)
   8) Unterseiten: Vertikale Service-Karten (Icon + Text)
   9) Semantik: Box-Titel ohne Navigationseintrag
  10) Referenzen: Projekt-Container (Rahmen + Hover-Highlight)
  11) Fixes / Overrides (Grid-Höhen, kompakte Titel etc.)
  12) Responsive (Mobile Anpassungen)
   ========================================================================== */


/* ==========================================================================
   0) DESIGN TOKENS / CSS-VARIABLEN
   - Farbpalette (Branding)
   - MkDocs Material Integration (Primary/Accent/Link Colors)
   ========================================================================== */
:root {
  /* Design-Specs Farben */
  --signal-teal:         #00ffcc; /* Dein Logo-Teal */
  --dark-vibrant-teal:   #053a47; /* Dein seriöses Petrol */
  --teal-tint:           #e6f5f2;
  --pure-white:          #ffffff;
  --light-grey:          #F5F6F7;
  --grey:                #E8EAEC;
  --deep-bg:             #0a1f24; /* Dunkles Petrol für die Boxen */

  /* MkDocs Integration */
  --md-primary-fg-color:        var(--pure-white);
  --md-accent-fg-color:  #7e56c2;
  --md-typeset-a-color:         var(--dark-vibrant-teal);
}


/* ==========================================================================
   1) HEADER & TABS (REINZEICHNUNG)
   ========================================================================== */

/* Header: Reinweiß und ohne Schatten für maximale Klarheit */
.md-header {
    background-color: var(--pure-white) !important;
    color: var(--dark-vibrant-teal) !important;
    box-shadow: none !important; /* Entfernt den Standard-Schatten */
    border-bottom: 1px solid rgba(5, 58, 71, 0.05); /* Sehr dezente Trennlinie */
    z-index: 1000;
}

/* Logo: Anpassung an das lange Format */
.md-header__button.md-logo img {
    height: 38px; /* Etwas flacher für das lange Format */
    width: auto;
    display: block;
}

/* Versteckt den redundanten Text-Titel */
.md-header__title .md-ellipsis {
    display: none;
}

/* Tabs (Navigationsleiste): Ebenfalls Reinweiß */
.md-tabs {
    background-color: var(--pure-white) !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(5, 58, 71, 0.08); /* Klare, feine Kante nach unten */
}

/* Tab-Links: Styling für einen sauberen Look */
.md-tabs__link {
    color: var(--dark-vibrant-teal) !important;
    opacity: 0.7;
    font-weight: 500;
    transition: opacity 0.3s, color 0.3s;
}

.md-tabs__link:hover {
    opacity: 1;
    color: var(--md-accent-fg-color) !important; /* Signal-Teal beim Hover */
}

/* Aktiver Tab: Kennzeichnung durch deine Akzentfarbe */
.md-tabs__item--active .md-tabs__link {
    opacity: 1;
    color: var(--dark-vibrant-teal) !important;
    font-weight: 700;
}

/* Suchleiste: Wiederherstellung der sanften Teal-Tönung */
.md-search__input {
    background-color: var(--teal-tint) !important; /* Hier kommt das Teal zurück */
    border-radius: 4px !important;
    color: var(--dark-vibrant-teal) !important;
}

.md-footer {
    display: none;
}

.md-top {
    background-color: var(--pure-white) !important;
    color: var(--dark-vibrant-teal) !important;
    border: 1px solid var(--signal-teal) !important;
    box-shadow: 0 4px 10px rgba(5, 58, 71, 0.1) !important;
}

.md-top:hover {
    color: var(--pure-white) !important;
    border-color: var(--md-accent-fg-color) !important;
    background-color: var(--md-accent-fg-color) !important;
}

/* ==========================================================================
   2) LANDINGPAGE: HERO (PARALLAX)
   - Hintergrundbild + Farbverlauf (Branding)
   - Parallax via background-attachment: fixed
   - Positionierung/Scaling des Hintergrunds
   ========================================================================== */
.hero-parallax {
    height: 65vh; /* Etwas kompakter in der Höhe */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10%;
/* Verlauf mit deinen Branding-Farben */
    background-image:
        linear-gradient(
            to right,
            rgba(14, 116, 144, 0.92) 0%,
            rgba(0, 255, 204, 0.25) 100%
        ),
        url('../images/rsu3.jpg');
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-size: cover;
    /* POSITIONIERUNG FIX: Schiebt den Bildinhalt nach oben */
    background-size: 110%;
    background-position: center 50%;
    color: white;
}

.hero-parallax-content {
    text-align: left;
    border-left: 4px solid var(--signal-teal);
    padding-left: 2rem;
}

.hero-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.3rem; /* Enger für Kompaktheit */
}

.hero-parallax-content h1 {
    color: var(--pure-white) !important;
    font-size: 2.8rem; /* Schlanker als die ursprünglichen 3.5rem */
    line-height: 1.1;
    font-weight: 800;
    margin: 0;
    text-shadow: none;
}


/* ==========================================================================
   3) LANDINGPAGE: WELCOME-SECTION (FULL-WIDTH)
   - Full-bleed Box (100vw + negative margins)
   - Innenlayout via .welcome-content (max-width)
   - Foto-Styling
   ========================================================================== */


.welcome-box-full {
    background: var(--teal-tint);
    /* Wiederherstellung der Full-Width Logik */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    /* Geringes Padding, damit die Box selbst schmal bleibt */
    padding: 2.5rem 0;
    z-index: 20;
    /* Dezenter Schatten nach unten statt hartem Kontrast */
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.02);
}

/* Texte jetzt in Deep Petrol statt Weiß
   Hinweis: Hier wird var(--deep-petrol) verwendet, ist aber in :root NICHT definiert.
   (Nur Kommentar: ggf. später prüfen, ob das absichtlich ist oder ob ein Token fehlt.) */
.welcome-box-full h1,
.welcome-box-full p,
.welcome-box-full strong {
    color: var(--deep-petrol) !important;
}

.welcome-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 5rem;
    padding: 0 2rem;
}

.welcome-photo {
    border-radius: 50%;
    width: 780px;
    height: 780px;
    object-fit: cover;
    /* Weißer Rahmen um das Foto als Absetzung zum hellen Hintergrund */
    border: 5px solid var(--pure-white);
    box-shadow: 0 15px 45px rgba(5, 58, 71, 0.15);
    flex-shrink: 0;
}


/* ==========================================================================
   4) LANDINGPAGE: FEATURES / LEISTUNGEN (ALTERNIERENDE REIHEN)
   - h2 Abstand
   - .feature-item Layout (Bild/Text)
   - even -> row-reverse für alternierendes Layout
   ========================================================================== */

h2 {
    margin-bottom: 1rem !important;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 3rem;      /* Etwas engerer Abstand zwischen Text und Bild */
    margin-top: 0 !important;    /* Keinen Abstand mehr nach oben zur Überschrift */
    margin-bottom: 3rem !important; /* Moderater Abstand zur nächsten Leistung */
}

.feature-item:nth-child(even) { flex-direction: row-reverse; }
.feature-image img { border-radius: 12px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.feature-text p {
    margin-top: 0.5rem;
}


/* ==========================================================================
   5) LAYOUT: CONTENT-BREITE NUR FÜR UNTERSEITEN BEGRENZEN
   - Greift nur auf bestimmten Seiten (data-md-page)
   - Beeinflusst den Content-Container (nicht global)
   ========================================================================== */

body[data-md-page="referenzen"] .md-content,
body[data-md-page="leistungen"] .md-content {
    max-width: 1100px;
    margin-right: auto;
}


/* ==========================================================================
   6) TYPOGRAFIE & NAVIGATION (VEREINHEITLICHUNG)
   - Headings in Petrol
   - Fließtext in dunkelgrau
   - Sidebar Links (inactive/hover/active)
   - Secondary Nav (ToC rechts)
   ========================================================================== */

/* 1. Überschriften (H1 bis H3) in Petrol */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    color: var(--dark-vibrant-teal) !important;
    font-weight: 700;
}

/* 2. Allgemeiner Fließtext (etwas weicher als Schwarz) */
.md-typeset {
    color: #374151; /* Ein dunkles, professionelles Grau-Anthrazit */
    line-height: 1.5;
}

/* --- Deaktivierung von Ligaturen für saubere Buchstabentrennung --- */
.md-typeset,
.md-nav,
.md-header__title {
    /* Deaktiviert die Verschmelzung von Zeichen wie fi, fl, ff überall */
    font-variant-ligatures: none !important;
    font-feature-settings: "liga" 0 !important;
    text-rendering: optimizeLegibility;
}

/* 3. Linke Seiten-Navigation (Sidebar) vereinheitlichen */
/* Inaktive Links (vorher Blau) */
.md-nav__link {
    color: var(--dark-vibrant-teal) !important;
    transition: color 0.3s ease;
}
.md-typeset a {
    /* Dein seriöses Petrol als Standardfarbe für Links */
    color: var(--dark-vibrant-teal) !important;
    transition: color 0.3s ease;
    /* Optional: Eine leichte Unterstreichung für bessere Erkennbarkeit */
    text-decoration: underline;
    text-decoration-color: var(--signal-teal);
    text-underline-offset: 3px;
}

.md-typeset a:hover {
    /* Beibehaltung des Theme-Accent (Default Purple/Indigo) beim Hover */
    color: var(--md-accent-fg-color) !important;
    text-decoration-color: var(--md-accent-fg-color);
}

/* Spezial-Fix für Links in Buttons (damit diese weiß bleiben) */
.md-typeset .md-button {
    text-decoration: none !important;
}

/* 1. Standard-Zustand für alle Links */
.md-nav__link {
    color: var(--dark-vibrant-teal) !important;
    transition: color 0.3s ease !important;
}

/* 2. HOVER: Nur für Links, die NICHT aktiv sind */
nav.md-nav .md-nav__link:not(.md-nav__link--active):hover {
    color: var(--md-accent-fg-color) !important;
    cursor: pointer;
}

/* 3. AKTIVER ZUSTAND: Bleibt statisch in Petrol (auch beim Hover) */
.md-nav__link--active,
.md-nav__link--active:hover {
    color: var(--dark-vibrant-teal) !important;
    font-weight: 700;
    cursor: default; /* Signalisiert: Hier passiert nichts mehr */
}

/* Aktiver Menüpunkt (wo man sich gerade befindet) */
.md-nav__link--active {
    color: var(--dark-vibrant-teal) !important;
    font-weight: 700;
}

/* Die kleinen Markierungen (Striche/Icons) in der Navigation */
.md-nav__item .md-nav__link--active {
    border-left: 3px solid var(--signal-teal);
    padding-left: 0.5rem;
}

/* 4. Inhaltsverzeichnis (rechts auf Desktop) */
.md-nav--secondary .md-nav__link {
    font-size: 0.75rem;
    color: #6b7280 !important; /* Etwas dezenter */
}

/* ==========================================================================
   7) UNTERSEITEN: SUBPAGE-HERO (INTRO-BOX)
   ========================================================================== */

.subpage-hero {
    background: var(--teal-tint);
    width: 100%;
    /* Reduziertes Padding oben (1.5rem statt 2.5rem) */
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
    margin-bottom: 3rem;
    border-radius: 8px;
    box-sizing: border-box;
}

.subpage-hero-content {
    /* Gewohnte Standardgröße und Farbe der Unterseiten */
    font-size: var(--md-typeset-font-size) !important;
    color: var(--md-default-fg-color) !important;
    line-height: 1.6;
    /* NEU: Blocksatz und Silbentrennung */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Entfernt den Standard-Abstand des ersten Absatzes nach oben */
.subpage-hero-content p:first-child {
    margin-top: 0 !important;
}

.subpage-hero-content strong {
    display: block;
    /* Leicht reduzierte Größe für einen eleganteren Look */
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
    /* Die Überschrift bleibt im markanten Petrol */
    color: var(--dark-vibrant-teal) !important;
    /* Verhindert Blocksatz für die Überschriftzeile */
    text-align: left !important;
}


/* ==========================================================================
   8) UNTERSEITEN: VERTIKALE SERVICE-KARTEN
   - Stack-Layout (Liste von Cards)
   - Card Hover (Lift + Border + Shadow)
   - Icon-Kreis + SVG-Skalierung (Twemoji)
   - Text-Layout (Blocksatz + Listen)
   ========================================================================== */

.service-stack {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 3rem;
}

.service-item-vertical {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 3rem;
    background: var(--pure-white);
    border-radius: 12px;
    /* Subtiler Look: Ganz feine Outline und minimaler Schatten */
    border: 1px solid rgba(5, 58, 71, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

/* Wechselseitige Anordnung */
.service-item-vertical:nth-child(even) {
    flex-direction: row-reverse;
}

/* Hover-Effekt: Dezent und hochwertig */
.service-item-vertical:hover {
    transform: translateY(-5px);
    border-color: var(--signal-teal);
    /* Etwas mehr Tiefe im Schatten beim Hover, ohne "forced" zu wirken */
    box-shadow: 0 20px 40px rgba(5, 58, 71, 0.08);
}

/* --- ICON-SKALIERUNG: JETZT RICHTIG GROSS --- */
.service-icon-box {
    flex-shrink: 0;
    background: var(--teal-tint);
    width: 150px; /* Kreis-Basis */
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Verhindert Überlaufen bei extremen Größen */
}

/* Dieser Selektor erzwingt die Größe direkt auf dem SVG-Element */
.service-icon-box .twemoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.service-icon-box .twemoji svg {
    /* Wir nutzen 65% des Kreises für das Icon selbst */
    width: 95px !important;
    height: 95px !important;
    fill: var(--dark-vibrant-teal) !important;
    transition: transform 0.3s ease;
}

.service-item-vertical:hover .service-icon-box .twemoji svg {
    transform: scale(1.1); /* Das Icon selbst wächst beim Hover leicht mit */
}

.service-text-box {
    /* Blocksatz mit Silbentrennung wieder aktivieren */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Gezielte Einrückung für die Listen (Bulletpoints) */
.service-text-box ul {
    margin-left: 1.5rem; /* Schiebt die gesamte Liste nach rechts */
    padding-left: 0;
    list-style-position: outside; /* Bulletpoint bleibt links vom Textblock */
}

.service-text-box li {
    margin-bottom: 0.6rem; /* Mehr Platz zwischen den einzelnen Punkten */
    padding-left: 0.5rem;  /* Kleiner Abstand zwischen Bullet und Text */
}

.service-text-box h2 {
    /* Entfernt den leeren Raum über der Überschrift */
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0.8rem !important;
    /* Verhindert, dass die Überschrift selbst in den Blocksatz gezwungen wird */
    text-align: left !important;
}


/* ==========================================================================
   9) SEMANTIK: BOX-TITEL OHNE NAVIGATIONS-EINTRAG
   - Alternative zu h3, um nicht im Inhaltsverzeichnis/Navigation aufzutauchen
   ========================================================================== */

.box-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--dark-vibrant-teal) !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--teal-tint);
    display: block;
}

/* ==========================================================================
  10) REFERENZEN: PROJEKTREFERENZEN (RAHMEN & HOVER-HIGHLIGHT)
   - Außenrahmen (Container)
   - Innere Boxen (Card + Hover)
   - Grid-Layout (Top Row 2 Spalten)
   - Logos und Bilder
   ========================================================================== */

/* 1. DER AUSSENRAHMEN (Project Container) */
.project-container {
    margin-top: 0;
    margin-bottom: 1.5rem; /* Abstand zum nächsten Projekt */
    padding: 1.2rem 2rem 2rem 2rem;
    background-color: rgba(230, 245, 242, 0.3); /* Dein Mint-Teal Hintergrund */
    border: 2px solid var(--teal-tint); /* Die mintfarbene Rahmung */
    border-radius: 16px;
    display: block;
}

/* 2. DIE INNEREN BOXEN (mit Highlight-Effekt wie bei Leistungen) */
.project-box {
    background: var(--pure-white);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid rgba(5, 58, 71, 0.08);
    /* Der flüssige Übergang von der Leistungsseite */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    text-align: justify; /* Blocksatz sicherstellen */
    hyphens: auto;
}

/* 3. DER HIGHLIGHT-EFFEKT (Hover) */
.project-box:hover {
    transform: translateY(-5px); /* Anheben der Box */
    border-color: var(--signal-teal); /* Rahmen wird Teal */
    box-shadow: 0 20px 40px rgba(5, 58, 71, 0.08); /* Tiefer, weicher Schatten */
    z-index: 2; /* Box überdeckt Nachbarn leicht beim Anheben */
}

/* 4. ABSTÄNDE UND TYPOGRAFIE INNERHALB DER BOXEN */
.project-container h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 1.2rem !important;
    text-align: left !important;
}

.project-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Sicherstellen, dass die Impressionen-Box auch den Effekt hat */
.project-bottom-row .project-box {
    width: 100%;
}

/* Blocksatz innerhalb der Projektboxen sicherstellen */
.project-box p,
.project-box li {
    text-align: justify;
    hyphens: auto;
}

/* Logo-Styling innerhalb der Box */
.project-logo-top {
    width: 100%;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.project-logo-top img {
    max-width: 100%;
    max-height: 100px;
    height: auto;
    object-fit: contain;
}

/* Untere Impression-Box */
.project-bottom-row {
    width: 100%;
}

.project-bottom-row img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}


/* ==========================================================================
  11) FIXES / OVERRIDES (ÜBERLAPPENDE STILE)
   - Spezifische Display/Height/Justify Fixes für bestimmte Grids
   - Kompakte Titel (mit Icon)
   ========================================================================== */

/* Spezielle Anpassung für Text-Kacheln in Sektion 1 & 2 */
.background-logo-grid .project-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    text-align: justify;
    hyphens: auto;
}

/* Stellt sicher, dass Kacheln in Grids immer die gleiche Höhe haben */
.project-top-row .project-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: justify;
    hyphens: auto;
    padding: 1.5rem; /* Etwas kompakteres Padding */
}

/* Neuer Selektor für kompakte Titel mit Icons – nur wenn wir die Klasse 'compact-title' nutzen */
.compact-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--dark-vibrant-teal);
    margin-bottom: 0.8rem;
}

.compact-title .twemoji {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ==========================================================================
  12) PROFIL SEITE - OPTIMIERTE KOMPAKT-LISTE
   ========================================================================== */

.profile-icon-list {
    display: flex;
    flex-direction: column;
    /* KORREKTUR: Gap auf 0 gesetzt, da wir das Padding im Content steuern */
    gap: 0 !important;
    margin-top: 0.5rem;
}

.profile-list-item {
    display: flex;
    gap: 1.2rem;
    align-items: center; /* Hält das Icon mittig zum Textblock */
    /* KORREKTUR: Minimaler Außenabstand zwischen den Zeilen */
    margin-bottom: 0.1rem !important;
}

.profile-icon-circle {
    flex-shrink: 0;
    background-color: var(--teal-tint);
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* KORREKTUR: Um die "Größen-Blockade" der Icons zu brechen */
/* --- Profil: Perfekte Zentrierung der Icons im Kreis --- */
.profile-icon-circle {
    flex-shrink: 0;
    background-color: var(--teal-tint) !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;

    /* Flexbox für Zentrierung */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* KORREKTUR: Verhindert vertikale Offsets durch Zeilenhöhe */
    line-height: 0 !important;
}

/* WICHTIG: Wir zentrieren auch das umschließende Span */
.profile-icon-circle .twemoji {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
}

.profile-icon-circle .twemoji svg {
    width: 36px !important;
    height: 36px !important;
    fill: var(--dark-vibrant-teal) !important;

    /* KORREKTUR: Entfernt Standard-Abstände des Themes */
    margin: 0 !important;
    display: block !important;
    vertical-align: middle !important;
}

.profile-list-content {
    flex: 1;
    line-height: 1.3; /* Zeilenabstand im Text leicht verringert */
    /* KORREKTUR: Padding drastisch reduziert für weniger Weißraum */
    padding: 0.1rem 0 !important;
}

.profile-list-content strong {
    color: var(--dark-vibrant-teal);
    font-size: 0.95rem;
    display: inline-block;
    margin-bottom: 2px;
}

/* --- Profil: H2-Überschrift innerhalb der Box (Navigation-fix) --- */
.project-box h2 {
    margin-top: 0 !important;      /* Entfernt das Weiß oben */
    padding-top: 0 !important;
    font-size: 1.25rem !important; /* Gleiche Größe wie .box-title */
    font-weight: 700 !important;
    color: var(--dark-vibrant-teal) !important;
    border-bottom: 2px solid var(--teal-tint); /* Dein gewünschter Trenner */
    padding-bottom: 0.5rem;
    margin-bottom: 1rem !important;
    text-align: left !important;
}

/* --- Abstand zwischen den Boxen wiederherstellen --- */
.project-box {
    margin-bottom: 2.5rem !important; /* Erzeugt den vertikalen Zwischenraum */
}

/* Optional: Verhindert, dass die allerletzte Box auf der Seite zu viel Platz nach unten lässt */
.project-box:last-child {
    margin-bottom: 0 !important;
}

/* --- Profil: Beruflicher Hintergrund (Liste mit Logo rechts) --- */
.background-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 1rem;
}

.background-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0;
    /* Dezente Trennlinie zwischen den Stationen */
    border-bottom: 1px solid var(--teal-tint);
}

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

.background-list-content {
    flex: 1;
    line-height: 1.4;
}

.background-list-logo {
    flex-shrink: 0;
    margin-left: 2rem;
    width: 100px; /* Feste Breite für die Logo-Spalte */
    display: flex;
    justify-content: flex-end;
}

.background-list-logo img {
    max-height: 45px;
    width: auto;
    object-fit: contain;
}

/* Mobile Anpassung: Logo über den Text bei sehr schmalen Screens */
@media screen and (max-width: 480px) {
    .background-list-item { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; }
    .background-list-logo { margin-left: 0; justify-content: flex-start; }
}

/* --- Profil: Werkzeuge (Große Icons, wechselseitig, kompakt) --- */
.tool-stack-profile {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Abstand zwischen den Tool-Karten */
    margin-top: 1.5rem;
}

.tool-card-alternating {
    display: flex;
    align-items: center; /* Hält Logo und Text mittig zueinander */
    gap: 3rem;
    padding: 1.5rem 2.5rem; /* DEUTLICH reduziert (vorher 3rem) */
    background: var(--pure-white);
    border-radius: 12px;
    border: 1px solid rgba(5, 58, 71, 0.08);
    transition: all 0.4s ease;
}

/* Der gewünschte Wechsel-Rhythmus */
.tool-card-alternating:nth-child(even) {
    flex-direction: row-reverse;
}

.tool-card-alternating:hover {
    border-color: var(--signal-teal);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(5, 58, 71, 0.08);
}

/* Wir nutzen deine ORIGINALEN Maße für die Kreise (150px) */
/* --- Profil: Werkzeuge (Große Logos füllen den Kreis aus) --- */
/* --- Profil: Werkzeuge - Perfekte Logo-Zentrierung --- */
.tool-logo-box-large {
    flex-shrink: 0;
    background: var(--teal-tint);
    width: 150px;
    height: 150px;
    border-radius: 50%;

    /* Perfekte Zentrierung via Flexbox */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Verhindert vertikale Offsets durch Text-Eigenschaften */
    line-height: 0 !important;
    overflow: hidden;
}

.tool-logo-box-large img {
    /* Beibehaltung deiner gewünschten Vergrößerung */
    width: 130% !important;
    height: 130% !important;

    /* Verhindert Baseline-Verschiebungen */
    display: block !important;
    margin: 0 !important;

    /* Sorgt für saubere Skalierung ohne Verzerrung */
    object-fit: contain;
}

.tool-text-box {
    flex: 1;
    text-align: justify;
    hyphens: auto;
}

.tool-text-box h3 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    color: var(--dark-vibrant-teal);
}
/* --- Profil: Rollen-Kammer (Sektion 3) --- */
.role-chamber-layout {
    display: flex;
    align-items: center; /* Zentriert das Logo vertikal zur gesamten Liste */
    gap: 0;
    margin-top: 2rem;
    padding: 1rem 0;
}
/* --- Mobile Anpassung: Werkzeuge & Methoden (Sektion 4) --- */
@media screen and (max-width: 800px) {
    .tool-card-alternating {
        flex-direction: column !important; /* Stapelt Logo über Text */
        align-items: center;
        text-align: left;
        gap: 1.5rem;
        padding: 1.5rem; /* Kompakteres Padding für Mobile */
    }

    /* Entfernt den Wechselrhythmus auf Mobile für mehr Ruhe */
    .tool-card-alternating:nth-child(even) {
        flex-direction: column !important;
    }

    .tool-logo-box-large {
        width: 120px; /* Logo-Box leicht verkleinert */
        height: 120px;
    }

    .tool-logo-box-large img {
        width: 100% !important;
        height: 100% !important;
    }

    .tool-text-box h3 {
        text-align: center; /* Titel für bessere Balance mittig */
        margin-bottom: 1rem !important;
    }
}



/* 1. Der Logo-Anker (analog zum Foto auf Home) */
/* --- Profil: Rollen-Kammer (Sektion 3) --- */
.role-chamber-anchor {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: var(--teal-tint);
    border: 5px solid var(--pure-white);
    box-shadow: 0 10px 30px rgba(5, 58, 71, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 5;
}

.role-chamber-anchor img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Geändert von contain auf cover für besseres Ausfüllen */
    /* ZOOM-KORREKTUR: 5% Vergrößerung um Kanten zu kaschieren */
    transform: scale(1.05);
}

/* 2. Die horizontale Hauptverbindung */
.role-chamber-stem {
    width: 60px;
    height: 2px;
    background-color: var(--teal-tint);
    flex-shrink: 0;
}

/* 3. Die vertikale Kammer (Klammer) mit den Texten */
.role-chamber-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    position: relative;
    /* Die vertikale Linie der Klammer */
    border-left: 2px solid var(--teal-tint);
    padding: 0.5rem 0 0.5rem 2.5rem;
}

.role-chamber-item {
    position: relative;
    /* Angleichung an .profile-list-content */
    line-height: 1.35;
    text-align: justify;
    hyphens: auto;
}

/* Die horizontalen "Anstriche" von der Kammer zum Text */
.role-chamber-item::before {
    content: '';
    position: absolute;
    left: -2.5rem;
    /* KORREKTUR: Tiefer gesetzt auf Höhe der Marker */
    top: 1.3rem;
    width: 1.2rem;
    height: 2px;
    background-color: var(--teal-tint);
}

.role-chamber-item strong {
    color: var(--dark-vibrant-teal);
    font-size: 0.95rem;
    display: inline-block;
    margin-bottom: 2px;
}

/* --- Mobile Anpassung für die Rollen-Kammer --- */
@media screen and (max-width: 800px) {
    .role-chamber-layout {
        flex-direction: column; /* Bild oben, Text darunter */
        align-items: center;
        text-align: left;
    }

    .role-chamber-anchor {
        width: 140px; /* Leicht verkleinert für mobile */
        height: 140px;
        margin-bottom: 1.5rem;
    }

    .role-chamber-stem {
        display: none; /* Der horizontale Steg verschwindet */
    }

    .role-chamber-list {
        width: 100%;
        padding-left: 1.5rem; /* Weniger Abstand links */
        border-left: 2px solid var(--teal-tint); /* Die vertikale Kammerlinie bleibt */
    }

    .role-chamber-item::before {
        left: -1.5rem; /* Anstriche an den geringeren Abstand anpassen */
        width: 0.8rem;
    }
}

/* ==========================================================================
  12) PROFIL: DIDAKTIK & WISSENSARBEIT (Abschnitt 5)
   ========================================================================== */

/* Grüner Rahmen: Statisch, kein Hover */
.project-container {
    margin-bottom: 2.5rem !important;
    padding: 2.5rem !important; /* Identischer Abstand wie in den weißen Kacheln */
    background-color: rgba(230, 245, 242, 0.4);
    border: 2px solid var(--teal-tint);
    border-radius: 16px;
}

/* Deaktiviert Hover-Effekte für den grünen Außenrahmen, falls global definiert */
.project-container:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--teal-tint) !important;
}

.didactic-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Profil: Didaktik & Wissensarbeit (Finaler Fix für Abstände) --- */

.didactic-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 3rem !important;
    margin-bottom: 0 !important;
}

.didactic-row.row-reverse {
    flex-direction: row-reverse !important;
}

.didactic-text-box {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    /* Entfernt jegliches Padding oben im Container */
    padding-top: 0 !important;
}

/* Entfernt den Standard-Margin des ersten Absatzes (<p>),
   damit der Text bündig mit der Bildkante startet */
.didactic-text-box p:first-child {
    margin-top: 0 !important;
}

/* Optional: Falls du den Abstand unter der fetten Überschrift in der Kachel
   noch leicht anpassen willst */
.didactic-text-box strong {
    display: inline-block;
    margin-bottom: 0.2rem;
}

.didactic-img-container {
    flex: 1 1 50% !important;
    min-width: 0 !important;
}

.didactic-img-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* DER GEWÜNSCHTE ENGE ABSTAND */
    gap: 0.3rem !important;
}

/* WICHTIG: Entfernt Theme-Abstände von Paragraphs im Container, damit 'gap' greift */
.didactic-img-container p {
    margin: 0 !important;
    padding: 0 !important;
}

.didactic-img-container img {
    width: 100% !important;
    max-height: 250px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid var(--teal-tint) !important;
    display: block !important;
}

.img-caption {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    color: #666 !important;
    text-align: center !important;
    font-style: italic !important;
    width: 100% !important;
}

/* Unteres Grid für die zwei kleinen Kacheln */
.didactic-grid-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.didactic-grid-bottom .project-box {
    margin-bottom: 0 !important;
}

/* --- Home: Leistungs-Liste (Analog zu Profil Abschnitt 1) --- */
.background-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.background-list-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.background-list-icon {
    flex-shrink: 0;
    font-size: 1.8rem; /* Markante Icon-Größe */
    color: var(--dark-vibrant-teal);
    width: 2.5rem;
    display: flex;
    justify-content: center;
    padding-top: 0.2rem;
}

.background-list-content {
    flex: 1;
    line-height: 1.5;
}

.background-list-content strong {
    color: var(--dark-vibrant-teal);
    display: block;
    margin-bottom: 0.2rem;
}

/* Mobile Optimierung: Stapeln bei Bedarf */
@media screen and (max-width: 600px) {
    .background-list-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    .background-list-icon {
        width: auto;
        justify-content: flex-start;
    }
}

/* ==========================================================================
  12) HOME: "DAS BIETE ICH IHNEN" (Freistehende Kacheln)
   ========================================================================== */

.home-service-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.home-service-row.project-box {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
    padding: 2rem !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 12px rgba(5, 58, 71, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.home-service-row.project-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(5, 58, 71, 0.1);
    border-color: var(--signal-teal);
}

.home-service-row.row-reverse {
    flex-direction: row-reverse !important;
}

/* In Sektion 12 der extra.css */

.home-service-text {
    flex: 1.2;
    min-width: 0;
    /* 1. Das Container-Padding oben entfernen */
    padding-top: 0 !important;
}

/* 2. Den Standard-Abstand des unsichtbaren <p>-Tags entfernen */
.home-service-text p:first-child {
    margin-top: 0 !important;
}

.home-service-text strong {
    color: var(--dark-vibrant-teal);
    font-size: 1.2rem;
    display: block;
    /* Sicherstellen, dass hier kein Extra-Raum entsteht */
    margin-top: 0 !important;
    margin-bottom: 0.6rem; /* Etwas gerafft */
    border-bottom: 2px solid var(--teal-tint);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* WIEDERHERGESTELLT: Exakte Font-Größe & Farbe der Unterseiten */
.service-subtext {
    color: var(--md-default-fg-color);
    font-size: var(--md-typeset-font-size);
    line-height: 1.6;
}

.service-subtext ul {
    margin-top: 0.4rem;
    padding-left: 1.2rem;
}

.service-subtext li {
    margin-bottom: 0.15rem;
    font-weight: 500;
}

.home-service-img {
    flex: 1; /* Bild-Container nimmt den restlichen Platz */
    min-width: 0;
}

/* ERZWINGEN DES EINHEITLICHEN WIDE-FORMATS */
.home-service-img img {
    width: 100%;
    height: 220px !important; /* Fixe Höhe (Wert aus dem grünen Entwurf). !important zwingt die Anwendung. */
    object-fit: cover; /* Das Bild füllt die Box komplett aus, Überstände werden abgeschnitten */
    border-radius: 8px;
    border: 1px solid var(--teal-tint);
    display: block; /* Verhindert störende Abstände unter dem Bild */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Dezenter Schatten direkt am Bild */
}

/* --- Spezial-Button für die Home-Seite (Dunkles Teal / Theme-Purple Hover) --- */
.md-button.btn-dark-teal {
    background-color: var(--dark-vibrant-teal) !important;
    color: var(--pure-white) !important;
    border-color: var(--dark-vibrant-teal) !important;
    transition: all 0.3s ease;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
}

.md-button.btn-dark-teal:hover {
    /* Nutzt die primäre Highlight-Farbe deines Themes (das Purple) */
    background-color: var(--md-accent-fg-color) !important;
    border-color: var(--md-accent-fg-color) !important;
    color: var(--pure-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Hilfsklasse für die Ausrichtung des Buttons */
.home-button-row {
    margin-top: 2.5rem;
    text-align: left;
}

/* --- Home: Lehrpreis-Badge auf dem Service-Bild --- */
.image-with-badge {
    position: relative;
    cursor: default;
}

/* --- Home: Lehrpreis-Badge (Refined Glass Look) --- */
.award-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;

    /* Glas-Effekt: Transparentes Weiß + Weichzeichner */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Clean-Look: Keine harten Linien mehr */
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

    color: var(--dark-vibrant-teal) !important;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;

    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

/* Hover-Effekt: Dezentes Aufhellen und Heben */
.award-badge:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    color: var(--md-accent-fg-color) !important; /* Wechselt dezent zu Lila */
}



/* ==========================================================================
  13) HOME: SEKTIONS-EINLEITUNG (ANKER)
   ========================================================================== */

.section-intro {
    text-align: center; /* Zentrierung für moderne Balance */
    max-width: 800px;
    margin: 4rem auto 3rem auto; /* Viel Platz nach oben zur Willkommensbox */
    padding: 0 1rem;
}

.section-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--md-accent-fg-color); /* Dein Teal-Akzent */
    margin-bottom: 0.5rem;
}

.section-intro h2 {
    font-size: 2rem !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    /* Entfernt die Trennlinie unter der H2, da wir sie zentriert schöner finden */
    border-bottom: none !important;
    display: inline-block;
    position: relative;
}

/* Kleine Akzentlinie unter der zentrierten Überschrift */
.section-intro h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 25%;
    width: 50%;
    height: 3px;
    background-color: var(--teal-tint);
    border-radius: 2px;
}

.section-intro p {
    font-size: 1.1rem;
    color: #6b7280; /* Etwas dezenteres Grau */
    line-height: 1.6;
}

/* ==========================================================================
  15) HOME: REFERENZ-CARDS (3er-GRID)
   ========================================================================== */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.ref-card {
    background: var(--pure-white);
    border: 1px solid rgba(5, 58, 71, 0.08);
    border-radius: 12px;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(5, 58, 71, 0.03);
}

.ref-card:hover {
    transform: translateY(-5px);
    border-color: var(--signal-teal);
    box-shadow: 0 12px 24px rgba(5, 58, 71, 0.1);
}

.ref-logo {
    height: 60px;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    /* FIX: Zentriert das Logo horizontal in der Karte */
    justify-content: center !important;
    width: 100%;
}

.ref-logo img {
    max-height: 100%;
    max-width: 140px;
    object-fit: contain;
    /* Sicherstellen, dass kein Margin das Zentrieren stört */
    margin: 0 auto !important;
}

.ref-card h3 {
    font-size: 1.15rem !important;
    margin: 0 0 0.8rem 0 !important;
    color: var(--dark-vibrant-teal) !important;
    border-bottom: 1px solid var(--teal-tint);
    padding-bottom: 0.5rem;
}

.ref-card ul {
    margin: 0 0 2rem 0 !important;
    padding-left: 1.2rem !important;
    font-size: 0.85rem;
    flex-grow: 1;
}

.ref-card li {
    margin-bottom: 0.5rem !important;
    color: var(--md-default-fg-color);
    text-align: left !important; /* Kein Blocksatz in den kleinen Karten */
}

/* Link-Styling (Fix für die Farbe) */
.ref-more {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--dark-vibrant-teal) !important; /* Seriöses Petrol */
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.ref-more:hover {
    color: var(--md-accent-fg-color) !important;
}

/* --- Home: Punchline in den Referenz-Cards --- */

.ref-punchline {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    font-style: italic;
    color: #4b5563; /* Ein etwas weicheres Grau */
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    min-height: 3rem; /* Sorgt für einheitliche Kantenhöhen, falls Texte unterschiedlich lang sind */
}

/* Anpassung der Liste, damit sie enger an der Punchline klebt */
.ref-card h3 + .ref-punchline {
    margin-top: -0.2rem !important;
}

/* ==========================================================================
   16) GLOBALER FOOTER: SIGNATUR-LOOK
   ========================================================================== */

.custom-footer {
    background-color: var(--pure-white);
    border-top: 1px solid rgba(5, 58, 71, 0.08);
    padding: 4rem 2rem 2rem 2rem;
    text-align: center;
    width: 100%;
}

.footer-logo {
    max-width: 500px; /* Vollversion darf hier präsent sein */
    height: auto;
    margin-bottom: 2rem;
    /* Sanfter Graustufen-Filter, der bei Hover farbig wird (optional) */
    filter: grayscale(20%);
    opacity: 0.9;
    transition: all 0.3s ease;
}

.footer-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.footer-info {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.6;
}

.footer-links {
    margin-top: 1rem;
}

.footer-links a {
    color: var(--dark-vibrant-teal) !important;
    text-decoration: none !important;
    margin: 0 1rem;
    font-weight: 600;
}

.footer-links a:hover {
    color: var(--md-accent-fg-color) !important;
}

/* ==========================================================================
  17) RESPONSIVE (Zentraler Mobile-View für alle Seiten)
   ========================================================================== */

@media screen and (max-width: 900px) {

    /* --- Seite: Leistungen --- */
    .service-item-vertical {
        flex-direction: column !important;
        align-items: center;
        text-align: left;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
    .service-item-vertical:nth-child(even) {
        flex-direction: column !important;
    }
    .service-icon-box {
        width: 120px;
        height: 120px;
    }
    .service-text-box h2 {
        text-align: center !important;
    }

    /* --- Profil: Sektion 3 (Rollen-Kammer) --- */
    .role-chamber-layout {
        flex-direction: column;
        align-items: center;
    }
    .role-chamber-anchor {
        width: 140px;
        height: 140px;
        margin-bottom: 1.5rem;
    }
    .role-chamber-stem {
        display: none;
    }
    .role-chamber-list {
        width: 100%;
        padding-left: 1.5rem;
        border-left: 2px solid var(--teal-tint);
    }

    /* --- Profil: Sektion 4 (Werkzeuge) --- */
    .tool-card-alternating {
        flex-direction: column !important;
        align-items: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .tool-card-alternating:nth-child(even) {
        flex-direction: column !important;
    }
    .tool-logo-box-large {
        width: 120px;
        height: 120px;
    }

    /* --- Profil: Sektion 5 (Didaktik) --- */
    .didactic-row,
    .didactic-row.row-reverse {
        flex-direction: column !important;
        align-items: center;
        gap: 1.5rem;
    }
    .didactic-text-box,
    .didactic-img-container {
        flex: 1 1 100% !important;
        width: 100%;
    }
    .didactic-grid-bottom {
        grid-template-columns: 1fr;
    }
        .home-split-container {
        flex-direction: column;
    }
    .home-service-row.project-box {
        flex-direction: column !important;
        align-items: center; /* Zentriert die Inhalte */
        gap: 1.5rem;
        padding: 1.5rem !important;
    }

    .home-service-img {
        width: 100% !important; /* WICHTIG: Container füllt die Kachel aus */
        margin-bottom: 0.5rem;
    }

    .home-service-img img {
        width: 100% !important; /* Bild füllt den Container aus */
        height: 260px !important; /* Einheitliche Höhe auf Mobile */
        object-fit: cover;
        border-radius: 8px;
    }

    .home-service-text {
        width: 100% !important;
        text-align: left; /* Text bleibt linksbündig für bessere Lesbarkeit */
    }
.ref-grid {
        grid-template-columns: 1fr !important; /* Wechselt von 3 Spalten auf 1 Spalte */
        gap: 1.5rem; /* Behält den Abstand zwischen den Kacheln bei */
    }

    /* Optional: Sicherstellen, dass die Kacheln die volle Breite nutzen */
    .ref-card {
        width: 100%;
    }
}