/* ==========================================================================
   1. IMPORTS & TAILWIND BASIS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;700&display=swap');

/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--text-xl:1.25rem;--text-xl--line-height:1.25;--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--tracking-tight:-.025em;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-text:#040404;--color-background:#fff;--color-shade:color-mix(in srgb,var(--color-text),transparent 95%);--spacing-container:none;--text-action:18px;--text-action--line-height:24px;--text-metadata:20px;--text-metadata--line-height:24px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab,currentColor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}body{color:var(--color-text);background-color:var(--color-background);text-underline-offset:2px}body *{text-decoration-thickness:1px}}@layer components{.button{--border-width:1.5px;--vpadding:1rem;--hpadding:1.5rem;padding:calc(var(--vpadding) - var(--border-width))calc(var(--hpadding) - var(--border-width));border:var(--border-width)solid;text-align:center;border-radius:9999px;min-width:8rem;display:block}.button:hover{color:var(--color-background);background-color:var(--color-text);border-color:#0000}.button--smaller{--vpadding:.75rem;--hpadding:1.25rem}.button--primary{color:var(--color-background);background-color:var(--color-text);border-color:#0000}.copy>:first-child{margin-top:0}.copy>:last-child{margin-bottom:0}.copy>p,.copy>ul,.copy>ol,.copy>dl,.copy>pre,.copy>table,.copy>figure,.copy>blockquote,.copy>aside,.copy>nav,.copy>div{margin-top:var(--copy-space);margin-bottom:var(--copy-space)}.copy>h1{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height));--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance;margin-top:6rem;margin-bottom:2rem}.copy>h2{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height));--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance;margin-top:6rem;margin-bottom:2rem}.copy>h3{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance;margin-top:4rem;margin-bottom:2rem}.copy a:not(.button){text-decoration-line:underline}.copy em{font-style:italic}.copy strong{font-weight:700}.copy ul>li{padding-left:3ch}.copy ul>li:before{content:"—";float:left;clear:left;width:3ch;margin-left:-3ch;display:block}.copy ol{counter-reset:ol}.copy ol>li{padding-left:3ch}.copy ol>li:before{counter-increment:ol;content:"0" counter(ol)".";float:left;clear:left;font-variant-numeric:tabular-nums;width:3ch;margin-left:-3ch;display:block}.copy ol>li:nth-child(n+10):before{content:counter(ol)"."}.copy>ul p,.copy>ol p{margin-top:var(--copy-space)}.copy blockquote{border-left:2px solid;padding-left:calc(3ch - 2px)}.copy code{background-color:var(--color-shade);padding:2px 4px;font-size:16px}.copy pre{white-space:pre-wrap;background-color:var(--color-shade);overflow-wrap:break-word;padding:20px}.copy pre code{background-color:#0000;padding:0;font-size:14px;line-height:20px;display:block}.copy img{max-width:100%;height:auto;display:block}.copy figure a{display:block}.copy figcaption{text-align:center;margin-top:.5rem;font-size:1rem}}@layer utilities{.fixed{position:fixed}.static{position:static}.float-left{float:left}.mx-2{margin-inline:calc(var(--spacing)*2)}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-1{margin-right:calc(var(--spacing)*1)}.block{display:block}.flex{display:flex}.inline-block{display:inline-block}.min-h-dvh{min-height:100dvh}.min-h-screen{min-height:100vh}.max-w-container{max-width:var(--spacing-container)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-4{min-width:calc(var(--spacing)*4)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-6{column-gap:calc(var(--spacing)*6)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.p-2{padding:calc(var(--spacing)*2)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-7{padding-block:calc(var(--spacing)*7)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-0\.5{padding-top:calc(var(--spacing)*.5)}.text-action{font-size:var(--text-action);line-height:var(--tw-leading,var(--text-action--line-height))}.text-metadata{font-size:var(--text-metadata);line-height:var(--tw-leading,var(--text-metadata--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.text-current\/20{color:color-mix(in oklab,currentColor 20%,transparent)}.text-current\/60{color:color-mix(in oklab,currentColor 60%,transparent)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.hover\:underline:hover{text-decoration-line:underline}}@media (width>=40rem){.sm\:flex{display:flex}.sm\:flex-row{flex-direction:row}:where(.sm\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}.sm\:text-current{color:currentColor}}@media (width>=48rem){.md\:p-6{padding:calc(var(--spacing)*6)}.md\:p-8{padding:calc(var(--spacing)*8)}.md\:px-6{padding-inline:calc(var(--spacing)*6)}.md\:px-8{padding-inline:calc(var(--spacing)*8)}}}:root{--copy-space:2rem}


/* ==========================================================================
   2. KUNDEN-ANPASSUNGEN (Custom Overrides)
   ========================================================================== */

/* --- BASIS & VARIABLEN & DARKMODE-LOCK --- */
@layer theme {
  :root {
    color-scheme: light !important; /* Erzwingt helles Browser-UI */
    --color-background: #fcfcfc !important;
    --color-text: #000000 !important;
    --font-sans: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif !important;
  }
}

/* Globaler Schutz gegen Darkmode-Invertierung durch Browser */
:root {
    color-scheme: light !important;
}

/* Hinweis: Der @media (prefers-color-scheme: dark) Block wurde entfernt, 
   da die Galerie ein festes helles Design (Galerie-Weiß) nutzt.
*/

body {
  letter-spacing: -0.01em;
  background-color: #fcfcfc;
  color: #000000;
  font-family: "Roboto Condensed", sans-serif !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* --- NAVIGATION (Desktop) --- */
.main-navigation {
    margin-left: auto;
    padding-bottom: 6px;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    align-items: flex-end;
}

.main-navigation a {
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #757575; /* Inaktiv: Grau */
    border: none !important;
    transition: color 0.2s ease;
}

.main-navigation a.active,
.main-navigation a:hover {
    font-weight: 400 !important;
    color: #000000 !important;
    border: none !important;
}


/* --- TYPOGRAFIE (Global) --- */

/* 1. Fließtext */
.copy p, 
.spoiler-content p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    max-width: 100% !important; 
    text-align: justify;
    
    white-space: normal !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    hyphenate-limit-chars: 15 3 3 !important;
}

/* 2. Überschriften */
h1, h2, h3, h4, h5, h6,
.post-title, .post-subtitle,
.copy h1, .copy h2, .copy h3,
.spoiler-content h2, .spoiler-content h3,
.archive-grid a, .post-footer-archive .grid a {
    color: #000000 !important;
}

.post-title {
    font-size: 30px !important; 
    line-height: 1.2 !important;
    margin-bottom: 1rem;
    font-weight: 400 !important;
}

.copy h1, .copy h2, .spoiler-content h2 {
    font-size: 24px !important; 
    line-height: 1.3 !important;
    font-weight: 400 !important;
    /* Im Spoiler reduzieren wir den oberen Rand der Überschrift, 
       damit der Platz von der Bildunterschrift genutzt werden kann */
    margin-top: 1rem !important; 
    margin-bottom: 0.5rem !important; 
}

.copy h3, .spoiler-content h3 {
    font-size: 20px !important;
    font-weight: 500;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}


/* --- BILDER & FIGURES (Professioneller Galerie-Stil) --- */
.copy figure, .spoiler-content figure {
    display: block !important;    
    max-width: 100% !important;   
    margin-bottom: 2.5rem !important;
    margin-left: auto !important; /* Sorgt zusammen mit margin-right für die Zentrierung */
    margin-right: auto !important; /* NEU: auto statt 0 für mittige Ausrichtung */
}

.copy figure img, .spoiler-content figure img {
    display: block !important;
    width: 100% !important;       /* Das Bild füllt den Rahmen aus */
    max-width: 100% !important; 
    height: auto !important;
}

/* Bildunterschrift: Bündig zum Bild und mit Zeilenumbruch-Support */
.copy figcaption, .spoiler-content figcaption {
    display: block !important;    /* WICHTIG: Kein 'table-caption' mehr! */
    text-align: right !important; /* Text rechtsbündig */
    font-size: 14px !important;
    color: #666666 !important;
    margin-top: 0.4rem !important; 
    font-style: normal !important;
    line-height: 1.4 !important;
    white-space: pre-line !important; 
    word-break: break-word !important; 
}


/* --- SPOILER / INTRO SECTION --- */
.intro-section {
    margin-top: 5.3rem !important; 
    margin-bottom: 2rem !important;   
    
    /* NEUE FARBE: #dedae0 */
    background-color: #f5f5f4 !important;
    border: none !important;
    border-radius: 0 !important;

    padding: 2rem !important; 
}

.intro-section .spoiler-content h2 {
    margin-top: 0rem !important; /* Etwas hochgezogen im Farb-Block */
    font-size: 26px !important;    
}

/* Abstand der Paragraphen im Spoiler */
.spoiler-content p {
    margin-top: 0.5rem !important;
}

.spoiler-content figure {
    display: block !important;
    width: var(--intro-img-width, 100%) !important; 
}
/* Intro-Bildunterschrift: Extrem dicht am Bild, wie bei Ausstellungen */
.intro-section .spoiler-content figcaption {
    display: block !important;
    text-align: right !important;
    font-size: 15px !important;
    color: #666666 !important;
    /* Minimaler Abstand zum Bild oben */
    margin-top: 0.2rem !important; 
    /* Abstand nach unten zur Überschrift 'Einstand' */
    margin-bottom: 1.2rem !important; 
    padding-top: 0 !important;
}

/* Einklapp-Mechanik */
.spoiler-wrapper:not(.is-expanded) .spoiler-content p {
    display: -webkit-box;
    -webkit-line-clamp: 5; 
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.spoiler-wrapper:not(.is-expanded) .spoiler-content p ~ p {
    display: none;
}
.is-expanded .spoiler-content p {
    display: block !important;
    -webkit-line-clamp: none !important;
}

/* Spoiler Button */
.spoiler-toggle-btn {
    background: none; border: none; padding: 0; 
    
    /* ABSTAND VOR "WEITERLESEN" */
    margin-top: 0rem !important; 
    
    font-size: 13px; text-transform: uppercase; color: #a0a0a0 !important;
    cursor: pointer; display: inline-flex !important; flex-direction: row !important;
    align-items: center; white-space: nowrap; transition: color 0.2s ease; outline: none !important;
}
.spoiler-toggle-btn:hover, .spoiler-toggle-btn:active {
    color: #000000 !important;
}
.spoiler-toggle-btn:focus { color: #a0a0a0 !important; }

.btn-text-more-wrapper::before, .btn-text-less-wrapper::before {
    display: inline-block !important; font-size: 9px; margin-right: 8px; 
    line-height: 1; position: relative !important; top: -2px !important;
}
.btn-text-more-wrapper::before { content: '►'; }
.btn-text-less-wrapper::before { content: '▲'; }


/* --- KÜNSTLER-VERZEICHNIS (FIXIERT) --- */

/* 1. Header-Abstand erzwingen: Null Padding unten */
.page-kuenstler .post-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Style für den grauen Block */
.page-kuenstler .copy-blocks p {
    display: block !important; 
    
    /* Farbe & Padding */
    background-color: #f5f5f4 !important; 
    border: none !important;     
    padding: 2rem !important;                 
    
    /* Text-Formatierung */
    white-space: pre-line !important; 
    margin-top: 0rem !important;
    text-align: left !important;
} 

/* 3. Spalten-Layout (NUR ab Tablet/Desktop) */
@media (min-width: 768px) {
    .page-kuenstler .copy-blocks p {
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        column-count: 2 !important;
        
        column-gap: 50px !important;
        break-inside: avoid !important; 
    }
}


/* --- FOOTER --- */
.site-footer a:hover,
.site-footer a:active,
.site-footer a.active {
    color: #000000 !important;
    transition: color 0.2s ease;
}


/* --- MOBILE NAVIGATION (Burger) --- */
#menu-toggle {
    display: none; flex-direction: column; gap: 6px; width: 35px; height: 35px;
    justify-content: center; align-items: center; z-index: 2000;
    background: transparent; cursor: pointer; border: none; padding: 0;
}
#menu-toggle span {
    display: block; width: 26px; height: 2px; background-color: #000000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center;
}
#menu-toggle.is-open-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menu-toggle.is-open-active span:nth-child(2) { opacity: 0; }
#menu-toggle.is-open-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 767px) {
    #menu-toggle { display: flex; position: absolute; top: 1.8rem; right: 1.2rem; }
    
    .main-navigation {
        display: none; position: absolute; top: 100%; left: 0; width: 100%;
        background-color: #fcfcfc; padding: 2rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 1999; border-top: 1px solid #eee;
    }
    .main-navigation.is-open { display: block !important; }
    .main-navigation ul { 
        flex-direction: column !important; align-items: flex-start !important; gap: 1.5rem !important; 
    }
    header { position: relative; }
}

/* ==========================================================================
   3. ARCHIV & KACHELN (ZWEISPALTIG & BÜNDIG)
   ========================================================================== */

/* 1. Der Container */
.archive-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, 48%) !important;
    gap: 4% !important;
    width: 100% !important;
    margin-top: 2rem;
    
    /* Standard-Einzug für Startseite/Beiträge */
    padding-left: 1rem !important; 
}

/* SPEZIAL-FIX ARCHIVSEITE: Padding links entfernen für Bündigkeit mit Titel */
.page-archive .archive-grid-container {
    padding-left: 0 !important;
}

@media (min-width: 768px) {
    .archive-grid-container {
        padding-left: 2rem !important;
    }
    /* Archivseite bleibt auch auf Desktop bei 0 */
    .page-archive .archive-grid-container {
        padding-left: 0 !important;
    }
}

/* 2. Die Kachel */
.archive-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background-color: #f5f5f4 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    min-height: 120px;
    width: 100% !important; /* Nutzt die 48% des Grids voll aus */
}

.archive-card:hover {
    background-color: #e0e0e0 !important;
}

/* 3. Bild-Teil (Links) */
.archive-image-wrapper {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
}

.archive-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 4. Text-Teil (Rechts) */
.archive-text-wrapper {
    padding: 1rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.archive-item-subheadline {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.3rem !important;
    
    /* Wichtig für den Umbruch langer Namen */
    white-space: normal !important; 
    overflow: visible !important;
}

.archive-item-title {
    font-size: 15px !important;
    color: #000000 !important;
    opacity: 0.7 !important;
    white-space: normal !important;
}

/* 5. Mobile Anpassung (unter 768px) */
@media (max-width: 767px) {
    .archive-grid-container {
        grid-template-columns: 1fr !important; /* Untereinander auf dem Handy */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .archive-card {
        width: 100% !important;
    }
}

/* ==========================================================================
   4. SPLASH SCREEN (INTRO)
   ========================================================================== */

.splash-overlay {
    position: fixed;
    inset: 0; /* Oben, Unten, Links, Rechts = 0 */
    width: 100vw;
    height: 100vh;
    z-index: 99999; /* Muss höher sein als alles andere (Menu ist 2000) */
    background-color: #fff; /* Hintergrundfarbe, falls Bild lädt */
    pointer-events: none; /* Wichtig: Damit man am Ende "durchklicken" kann */
    
    /* Die Animation: Name | Dauer | Kurve | Verzögerung | Endzustand behalten */
    animation: fadeOutSplash 1s ease-in-out 1s forwards;
}

.splash-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Füllt den Schirm, schneidet Ränder ab */
    display: block;
}

/* Keyframes für die Animation */
@keyframes fadeOutSplash {
    0% {
        opacity: 1;
        visibility: visible;
    }
    99% {
        opacity: 0;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden; /* Nimmt es komplett aus dem Klick-Fluss */
    }
}