/* =================================================================== */
/* === BASIS-STILE, LAYOUT & GLOBALE VARIABLEN                     === */
/* =================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* KORREKTUR: Alle globalen Variablen sind hier zentral definiert */
:root {
  /* Layout & Abstände */
  --padding: 1.5rem;

  /* Globale Farben (Light Mode Standard) */
  --bg: #ffffff;
  --text: #111111;
  --accent: #3b82f6;

  /* Spezifische Farben & Hilfsvariablen */
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #777;
  --color-light: #efefef;
  --color-text-grey: var(--color-grey);

  /* Code Highlighting Farben */
  --color-code-light-grey:  #cacbd1;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-red:         #d16464;
  --color-code-orange:      #de935f;
  --color-code-yellow:      #f0c674;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #7e9abf;
  --color-code-purple:      #b294bb;

  /* Schriften */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* KORREKTUR: Dark Mode überschreibt sauber nur die benötigten Variablen */
html[data-theme="dark"] {
  --bg: #111111;
  --text: #ffffff;
  --accent: #f97316;

  /* NEUE DARK MODE FIXES: Spezifische Farben anpassen */
  --color-black: #ffffff;          /* Invertiert für Dark Mode */
  --color-white: #111111;          /* Invertiert für Dark Mode */
  --color-grey: #aaaaaa;           /* Heller für besseren Kontrast */
  --color-light: #2a2a2a;          /* Dunkler Hintergrund statt hellem */
  --color-text-grey: #cccccc;      /* Heller für bessere Lesbarkeit */

  /* Variablen für das mobile Menü im Dark Mode */
  --menu-bg: rgba(30, 30, 30, 0.98);
  --menu-text-color: #eeeeee;
  --menu-border-color: rgba(255, 255, 255, 0.1);

  /* Code Highlighting für Dark Mode angepasst */
  --color-code-light-grey:  #8a8b91;
  --color-code-comment:     #6a6b6d;
  --color-code-white:       #e5e9e6;
  --color-code-red:         #f18484;
  --color-code-orange:      #feb37f;
  --color-code-yellow:      #f5d694;
  --color-code-green:       #c7d588;
  --color-code-aqua:        #aaded7;
  --color-code-blue:        #9ebadf;
  --color-code-purple:      #d2b4db;
}

html {
  font-family: var(--font-family-sans);
}


body {
  padding: var(--padding);
  max-width: 70rem;
  margin: 0 auto;
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}

li { list-style: none; }
img { width: 100%; display: block; }
a { color: currentColor; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: currentColor; cursor: pointer; }
strong, b { font-weight: 600; }
small { font-size: inherit; color: var(--color-text-grey); }

/* Globale Hilfsklassen */
.bg-light { background-color: var(--color-light); }
.color-grey { color: var(--color-text-grey); }
.align-center { text-align: center; }

/* =================================================================== */
/* === HEADER & NAVIGATION                                         === */
/* =================================================================== */

.header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-right: -1rem;
  margin-left: -1rem;
  font-size: 1.2rem;
  z-index: 1002;
}

.logo {
  padding: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  font-size: 1.5em;
  text-decoration: none;
}

/* Desktop Navigation */
.menu {
  display: flex;
  align-items: center;
}

.menu a, .menu .social a {
    margin-left: 20px;
    text-decoration: none;
    color: var(--text);
    padding: 5px 0;
    position: relative;
}
.menu a:hover { color: var(--accent); }
.menu a[aria-current] { text-decoration: underline; }

.social {
  display: flex;
  padding: 0 .5rem;
}
.social a { padding: 1rem .5rem; }

/* Burger Menü Button (standardmäßig für Desktop ausgeblendet) */
.burger-menu-button { display: none; }

/* =================================================================== */
/* === ALLGEMEINE KOMPONENTEN & SEITENINHALT                         === */
/* =================================================================== */

.main { margin-top: 5%; margin-bottom: 5%; }
.section { padding: 3rem 0; }
.grid { --columns: 12; --gutter: 3rem; display: grid; grid-gap: var(--gutter); grid-template-columns: 1fr; }
.grid > .column { margin-bottom: var(--gutter); }
.autogrid { --gutter: 3rem; --min: 10rem; display: grid; grid-gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)); grid-auto-flow: dense; }

h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; line-height: inherit; }
.text { line-height: 1.5em; }
.text a { text-decoration: underline; }
.text :first-child { margin-top: 0; }
.text :last-child { margin-bottom: 0; }
.text p, .text ul, .text ol { margin-bottom: 1.5rem; }
.text ul, .text ol { margin-left: 1rem; }
.text ul > li { list-style: disc; }
.text ol > li { list-style: decimal; }
.text h1, .h1, .intro { font-size: 2rem; margin-bottom: 3rem; line-height: 1.25em; }
.text h2, .h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; text-align: center; }
.text h3, .h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; text-align: center; }
.text h4, .h4 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; text-align: center; }
.text blockquote { font-size: 1.25rem; line-height: 1.325em; border-left: 2px solid var(--text); padding-left: 1rem; margin: 3rem 0; max-width: 25rem; }
.text blockquote footer { font-size: .875rem; font-style: italic; }
.text figure { margin: 3rem 0; }
figure img {
    max-height: 80vh;
}
.text figcaption { padding-top: .75rem; color: var(--color-text-grey); text-align: center; }


hr { border: 0;
background: currentColor; height: 1px; width: 90%; margin: 3rem auto; }
.intro { max-width: 40rem; }
.intro *:not(:last-child) { margin-bottom: 1em; }
.cta { background: var(--color-black); color: var(--color-white); display: inline-flex; justify-content: center; padding: .75rem 1.5rem; border: 4px solid var(--color-white); outline: 2px solid var(--color-black); }
.box { background: var(--color-light); padding: 1.5rem; border: 4px solid var(--color-white); outline: 2px solid var(--color-light); }
.video, .img { position: relative; display: block; --w: 1; --h: 1; padding-bottom: calc(100% / var(--w) * var(--h)); background: var(--color-black); }
.img img, .video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.img[data-contain] img { object-fit: contain; }
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer { padding-top: 3%; line-height: 1.5em; color: var(--color-text-grey); text-align: center; }
.footer h2 { font-weight: 600; margin-bottom: .75rem; }
.pagination { display: flex; padding-top: 6rem; }
.pagination > * { padding: .5rem; width: 3rem; text-align: center; border: 2px solid currentColor; margin-right: 1.5rem; }
.pagination > a:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }

/* =================================================================== */
/* === PLUGINS & SEITEN-SPEZIFISCHE STILE                          === */
/* =================================================================== */

/* Prism.js Code Highlighting */
.text pre { margin: 3rem 0; background: #2d2d2d; color: var(--color-code-white); padding: 1.5rem; overflow-x: auto; line-height: 1.5rem; }
.text code { font-family: var(--font-family-mono); font-size: 1em; background: var(--color-light); padding: 0 .5rem; display: inline-block; color: var(--color-black); }
.text pre code { background: none; color: inherit; padding: 0; }
code[class*="language-"],pre[class*="language-"]{color:var(--color-code-white);font-family:var(--font-family-mono);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;-webkit-hyphens:none;hyphens:none}
.token.punctuation{color:var(--color-code-light-grey)}.token.comment,.token.doctype{color:var(--color-code-comment)}.token.tag,.token.markup,.token.variable,.token.this,.token.selector,.token.key,.token.prolog,.token.delimiter{color:var(--color-code-red)}.token.constant,.token.number,.token.boolean,.token.attr-name,.token.entity,.token.bold{color:var(--color-code-orange)}.token.keyword,.token.italic{color:var(--color-code-purple)}.token.function{color:var(--color-code-blue)}.token.operator,.token.title{color:var(--color-code-aqua)}.token.string,.token.attr-value{color:var(--color-code-green)}.token.scope,.token.class-name,.token.property,.token.url{color:var(--color-code-yellow)}.token.bold{font-weight:bold}.token.italic{font-style:italic}

/* basicLightbox.js */
.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:0;transition:opacity .4s ease;z-index:1100;will-change:opacity}.basicLightbox--visible{opacity:1}.basicLightbox__placeholder{max-width:100%;transform:scale(.9);transition:transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:95%;max-height:95%;width:auto;height:auto;display:block}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}

/* Verhindert Klick-Probleme durch Browser-Features wie "Live Text" */
[data-lightbox] img {
    pointer-events: none;
}

/* Theme-Umschalter */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toggle-theme{background:0 0;border:2px solid transparent;border-radius:.5rem;font-size:1.2rem;color:var(--text);padding:.4rem .6rem;cursor:pointer;display:flex;align-items:center;transition:all .3s ease}
.toggle-theme:hover{border-color:var(--accent);color:var(--accent)}

/* Seiten-spezifische Layouts */
.kachel:hover{transform:scale(1.05)}.kachel:active{transform:scale(.98)}.kachel,.gallery li,.column figure{transition:transform .3s ease,box-shadow .3s ease;overflow:hidden}.gallery li:hover,.column figure:hover{transform:scale(1.03)}
.home-grid{display:grid;list-style:none;grid-gap:1.5rem;line-height:0;grid-template-columns:1fr;grid-auto-flow:dense}.home-grid li{position:relative;--cols:1;--rows:1;overflow:hidden;background:#000;line-height:0}.home-grid li:first-child{--cols:2;--rows:2}.home-grid li:nth-child(5){--cols:2}.home-grid li:nth-child(6){--rows:2}.home-grid li:nth-child(7){--cols:2}.home-grid a{display:block;height:10rem}.home-grid img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:all .3s}.home-grid figcaption{display:flex;align-items:center;justify-content:center;position:absolute;color:#fff;top:0;right:0;bottom:0;left:0;line-height:1;text-align:center;background:rgba(0,0,0,.5)}
.album-gallery{line-height:0;columns:1;column-gap:1.5rem}.album-gallery li{display:block;margin-bottom:1.5rem;break-inside:avoid}
.contact{padding:3rem;border:2px solid var(--text)}.contact .h1{margin-bottom:1.5rem}
.note{max-width:35rem;margin:0 auto}.note-header{padding-top:3rem;margin-bottom:3rem}.note-footer{padding:6rem 0}.note-date{color:var(--color-text-grey)}.note-tags{display:flex;margin-bottom:1.5rem}.note-tags li{margin-right:.5rem}.note-tags a{padding:.5rem 1rem;display:block;background:var(--color-light)}.note-tags a:hover{background:var(--color-black);color:var(--color-white)}

/* =================================================================== */
/* === DARK MODE SPEZIFISCHE FIXES                                 === */
/* =================================================================== */

/* Dark Mode Lightbox Fix */
html[data-theme="dark"] .basicLightbox {
  background: rgba(0, 0, 0, 0.9);
}

/* Dark Mode Code Highlighting spezielle Anpassungen */
html[data-theme="dark"] .text pre {
  background: #1a1a1a;
  border: 1px solid #333;
}

html[data-theme="dark"] .text code {
  background: var(--color-light);
  color: var(--text);
}

/* Dark Mode home-grid Fixes */
html[data-theme="dark"] .home-grid li {
  background: #222;
}

html[data-theme="dark"] .home-grid figcaption {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Dark Mode Pagination Fix */
html[data-theme="dark"] .pagination > a:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* =================================================================== */
/* === RESPONSIVE & MOBILE NAVIGATION                              === */
/* =================================================================== */

@media screen and (min-width:45em){.home-grid{grid-template-columns:repeat(3,1fr)}.home-grid li{grid-column-start:span var(--cols);grid-row-start:span var(--rows)}.home-grid a{padding-bottom:52.65%}}
@media screen and (min-width:60rem){body{--padding:3rem}.album-gallery{columns:2}.grid{grid-template-columns:repeat(12,1fr)}.grid > .column{grid-column:span var(--columns)}}

/* Mobile Navigation (< 768px) */
@media (max-width: 768px) {
    .burger-menu-button {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        position: relative;
        z-index: 1003;
    }
    .burger-menu-button-icon {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text);
        position: relative;
        transition: background-color 0.3s ease-in-out 0.1s;
    }
    .burger-menu-button-icon::before,
    .burger-menu-button-icon::after {
        content: '';
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text);
        position: absolute;
        left: 0;
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
    }
    .burger-menu-button-icon::before { top: -8px; }
    .burger-menu-button-icon::after { bottom: -8px; }
    .burger-menu-button.open .burger-menu-button-icon { background-color: transparent; }
    .burger-menu-button.open .burger-menu-button-icon::before { top: 0; transform: rotate(45deg); }
    .burger-menu-button.open .burger-menu-button-icon::after { bottom: 0; transform: rotate(-45deg); }

    .menu {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--menu-bg, rgba(248, 249, 250, 0.98));
        backdrop-filter: blur(5px);
        padding: 60px 20px 20px;
        opacity: 0;
        transform: translateX(-100%);
        visibility: hidden;
        transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                    transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                    visibility 0s linear 0.5s;
    }
    .menu.open {
        opacity: 1;
        transform: translateX(0%);
        visibility: visible;
        transition-delay: 0s;
    }
    .menu a:not(.social a) {
        width: 100%;
        max-width: 300px;
        text-align: center;
        padding: 18px 10px;
        font-size: 1.3em;
        color: var(--menu-text-color, #333);
        border-bottom: 1px solid var(--menu-border-color, rgba(0,0,0,0.05));
    }
    .menu .social {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 10px 0;
    }
    .menu .social a {
        margin: 0;
        padding: 0 15px;
        color: var(--menu-text-color, #333);
    }
    .menu .social a svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }
    /* Animation für alle sichtbaren Elemente im Menü */
    .menu.open > * {
        opacity: 0;
        transform: translateY(20px);
        animation: a-fade-in 0.4s ease-out forwards;
    }
    .menu.open > :nth-child(1) { animation-delay: 0.15s; }
    .menu.open > :nth-child(2) { animation-delay: 0.20s; }
    .menu.open > :nth-child(3) { animation-delay: 0.25s; }
    .menu.open > :nth-child(4) { animation-delay: 0.30s; }
    .menu.open > :nth-child(5) { animation-delay: 0.35s; }
    @keyframes a-fade-in { to { opacity: 1; transform: translateY(0); } }

    body.mobile-menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0s linear 0.5s;
        z-index: 1000;
    }
    body.mobile-menu-open.menu-fully-animated::before {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }
}

/* === DARK MODE NAVIGATION FIXES === */
html[data-theme="dark"] .menu a,
html[data-theme="dark"] .menu .social a {
  color: #eeeeee;
}

html[data-theme="dark"] .menu a:hover {
  color: var(--accent);
}

html[data-theme="dark"] .menu {
  background-color: var(--menu-bg, #1e1e1e);
}

html[data-theme="dark"] .menu a:not(.social a) {
  color: var(--menu-text-color, #eee);
  border-bottom: 1px solid var(--menu-border-color, rgba(255, 255, 255, 0.1));
}

/* === DARK MODE ICON & TEXT VISIBILITY FIXES === */
html[data-theme="dark"] svg,
html[data-theme="dark"] .icon,
html[data-theme="dark"] .text,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] .logo,
html[data-theme="dark"] .contact,
html[data-theme="dark"] .note-date,
html[data-theme="dark"] .note-tags a {
  color: #f0f0f0 !important;
}

/* Fix für helle Icons (z. B. SVG in Social Nav) */
html[data-theme="dark"] .social a svg {
  fill: #f0f0f0 !important;
}

/* Dunklere Boxen und Kontraste */
html[data-theme="dark"] .box,
html[data-theme="dark"] .note-tags a {
  background-color: #1c1c1c !important;
  border-color: #444 !important;
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .cta {
  background-color: var(--text);
  color: var(--bg);
  border-color: var(--bg);
  outline-color: var(--text);
}

/* === DARK MODE INSTAGRAM ICON FIX === */
html[data-theme="dark"] .social a.instagram svg {
  fill: #f0f0f0 !important;
  color: #f0f0f0 !important;
}

/* === DARK MODE: Instagram Icon im mobilen Menü === */
html[data-theme="dark"] .menu .social a.instagram svg {
  fill: #eeeeee !important;
  color: #eeeeee !important;
}

/* === DARK MODE: Burger-Icon sichtbar machen === */
html[data-theme="dark"] .burger-menu-button-icon,
html[data-theme="dark"] .burger-menu-button-icon::before,
html[data-theme="dark"] .burger-menu-button-icon::after {
  background-color: #eeeeee !important;
}

/* === DARK MODE: Visited Link Farben === */
html[data-theme="dark"] a:visited {
  color: #eeeeee;
}

html[data-theme="dark"] .menu a:visited {
  color: var(--menu-text-color, #eee);
}

html[data-theme="dark"] .social a:visited svg,
html[data-theme="dark"] .menu .social a.instagram:visited svg {
  fill: #eeeeee !important;
  color: #eeeeee !important;
}

/* === DARK MODE: Fix für <use> im Instagram-Icon (SVG Sprite) === */
html[data-theme="dark"] .social a.instagram svg,
html[data-theme="dark"] .social a.instagram use {
  fill: #eeeeee !important;
  color: #eeeeee !important;
}

/* === BROWSER LIVE-TEXT FIX === */
/* Verhindert, dass Browser-Overlays (z.B. Safari Live-Text) Klicks auf Lightbox-Bilder stehlen. */
[data-elementor-open-lightbox="yes"] img {
    pointer-events: none;
}

/* Neuer responsiver Map‑Container mit aspect-ratio */
.map-responsive {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  overflow: hidden !important;
}

.map-responsive iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}