@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Open+Sans:wght@400;600&display=swap" );
:root{
  --ivory:#F6F1E7;      /* Elfenbeinweiß */
  --forest:#2E4A40;     /* Nordwaldgrün */
  --paper:#ffffff;
  --shadow:0 2px 12px rgba(0,0,0,.05);
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--ivory);
  color:var(--forest);
  font-family:"Open Sans",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.65
}
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:24px
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:14px 16px; background:var(--ivory);
  border-bottom:1px solid rgba(27,38,59,.10);
}
.nav-left{justify-self:start; position:relative}
.brand{justify-self:center; text-align:center}
.brand h1{margin:0; font:600 clamp(24px,3.5vw,36px)/1 "Montserrat",sans-serif}
.brand h1 a{ color:var(--forest); text-decoration:none }
.motto{margin:2px 0 0; font:italic 400 14px/1.4 "Open Sans",system-ui; color:var(--forest); opacity:.85}
.nav-right{justify-self:end; display:flex; gap:10px; align-items:center}

/* Menü */
.menu-button{
  background:transparent; border:none; cursor:pointer;
  font:600 16px "Montserrat",sans-serif; color:var(--forest);
  padding:6px 10px; border-radius:8px;
}
.menu-button:hover{ background:rgba(46,74,64,.08) }
.menu-button .chev{ margin-left:4px; transition:.2s transform }
.menu-button.rot .chev{ transform:rotate(180deg) }

.menu-panel{
  position:absolute; left:0; top:calc(100% + 8px);
  min-width:190px; background:var(--ivory);
  border:1px solid rgba(27,38,59,.12); border-radius:12px;
  box-shadow:var(--shadow); padding:8px; display:none; z-index:1000;
}
.menu-panel.open{ display:block }
.menu-panel a{
  display:block; padding:10px 12px; border-radius:10px;
  color:var(--forest); text-decoration:none; font-weight:600;
}
.menu-panel a:hover, .menu-panel a:focus, .menu-panel a.active{
  background-color: rgba(46,74,64,.95);
  color: var(--ivory);
  transition: background-color .25s ease, color .25s ease;
}

/* Socials */
.social-link{ display:inline-block; text-decoration:none }
.icon-badge{
  background:var(--ivory);
  border-radius:50%; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
  border:2px solid rgba(27,38,59,.12);
}
.icon-badge:hover{ transform:translateY(-2px) }

/* Hero mit fließendem Verlauf wie 0.8.5 */
.hero{
  position:relative; min-height:56vh;
  background: center/cover no-repeat; background-image: var(--hero);
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, var(--ivory) 0%, rgba(246,241,231,.86) 70%, rgba(246,241,231,0) 100%);
}
.hero-content{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  color: var(--forest);
  pointer-events:none;
}
.hero-title{ margin:0; font:600 clamp(36px,6vw,64px)/1 "Montserrat",sans-serif }
.hero-sub{ margin-top:6px; font:400 clamp(14px,2.5vw,18px)/1.4 "Open Sans",sans-serif; opacity:.9 }

/* Grid / Cards (Bilder) */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0 6px }
.card{ background:var(--paper); border:1px solid rgba(27,38,59,.08); border-radius:14px; overflow:hidden; box-shadow:var(--shadow) }
.card img{ width:100%; height:220px; object-fit:cover; display:block }

/* Über uns */
.about-hero img{ width:100%; min-height:460px; aspect-ratio:21/9; object-fit:cover; object-position:50% 50%;
  border-radius:16px; box-shadow:var(--shadow) }
.about-text{ max-width:700px; margin:28px auto 0; line-height:1.75; color:var(--forest) }
.about-quote{ margin:24px 0; font-style:italic; color:var(--forest); opacity:.9; text-align:center; font-weight:600 }

/* Lightbox */
.lightbox-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:2000; padding:24px}
.lightbox-backdrop.open{display:flex}
.lightbox-image{max-width:92vw; max-height:90vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* Footer */
.footer{padding:28px 0 64px; opacity:.85}
.footer .ver{opacity:.65}

/* Responsive */
@media (max-width:900px){
  .grid{ grid-template-columns:1fr 1fr }
  .card img{ height:200px }
}
@media (max-width:720px){
  .topbar{ grid-template-columns:1fr 1fr auto }
  .brand{ justify-self:start; text-align:left }
  .nav-right{ flex-direction:column; gap:8px }
  .hero{ min-height:64vh; }
  .about-hero img{ min-height:340px; object-position:50% 55% }
  .about-text{ padding:0 12px }
}
/* Fotos Seite spezifisches Grid */
.grid.photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid.photos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .grid.photos{ grid-template-columns:1fr; } }

/* v0.9.8 utilities (non-intrusive) */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:1rem; top:1rem; z-index:9999; background:#fff; padding:.5rem .75rem; border-radius:.5rem; }
html { font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.spruch, .claim, h1, h2 { text-wrap: balance; hanging-punctuation: first; }
@media (prefers-reduced-motion: no-preference) {
  .fade-in { opacity: 0; transform: translateY(4px); }
  .fade-in.is-visible { opacity: 1; transform: none; transition: opacity 600ms ease, transform 600ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
img { max-width: 100%; height: auto; }

/* v0.9.8 hero tuning + footer layout */
.hero{position:relative}
.hero-media{position:relative; overflow:hidden}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center top}
/* gentle fade later */
/* removed legacy hero ::after overlay (v0.9.10) */

/* Footer: center ©, version bottom-left */
.site-footer .container{display:flex; justify-content:center; align-items:center; position:relative}
.site-footer .version{position:absolute; left:16px; bottom:24px; font-size:.85rem; opacity:.75}
.site-footer .copyright{text-align:center; margin:0}
@media (max-width: 480px){
  .site-footer .version{left:12px; bottom:20px}
}

/* v0.9.10 hero override (from v0.9.8 base): full-width cover, top-aligned, later ivory fade */
.hero{
  background: var(--hero) no-repeat center top !important;
  background-size: cover !important;
}
.hero-overlay{
  background: linear-gradient(to bottom,
    rgba(248,245,239,0) 0%,
    rgba(248,245,239,0) 70%,
    rgba(248,245,239,1) 100%) !important;
}

/* v0.9.11 hero refinement: frame more image, smoother ivory fade, keep text visible */
.hero{
  /* Show more of the image vertically */
  min-height: clamp(52vh, 64vh, 72vh);
  background-position: center 25% !important; /* move focus slightly down from absolute top */
  background-size: cover !important;
}
.hero-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(to bottom,
    rgba(248,245,239,0) 0%,
    rgba(248,245,239,0.3) 60%,
    rgba(248,245,239,0.7) 80%,
    rgba(248,245,239,1) 100%) !important;
}
.hero-content{ position:relative; z-index:1; }

/* v0.9.12 hero refinement: stronger, earlier ivory fade */
.hero-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(to bottom,
    rgba(248,245,239,0) 0%,
    rgba(248,245,239,0.3) 60%,
    rgba(248,245,239,0.7) 80%,
    rgba(248,245,239,1) 100%) !important;
}

/* v0.9.13: hero heading lower + centered wrap paragraph */
.hero-content{
  position: relative;
  transform: translateY(20%);
}
@media (min-width: 900px){
  .hero-content{ transform: translateY(22%); }
}
.wrap p{
  text-align: center;
  margin-inline: auto;
}
/* === Hero – Mitte + richtiger Fokus (v0.9.14) === */
.hero{
  position: relative;                           /* für absolute Kinder */
  min-height: 60vh;                             /* genug Höhe für echtes „Mitte“-Gefühl */
  background: var(--hero) no-repeat center 35% !important; /* statt \'center top\' */
  background-size: cover !important;
}

/* Fade bleibt elfenbeinweiß – Start etwas früher für bessere Lesbarkeit */
.hero-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* Overlay unter dem Text */
  background: linear-gradient(to bottom,
    rgba(248,245,239,0) 0%,
    rgba(248,245,239,0.3) 60%,
    rgba(248,245,239,0.7) 80%,
    rgba(248,245,239,1) 100%) !important;
}

/* Tervetuloa mittig auf dem Bild */
.hero-content{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* vertikale Mitte */
  text-align: center;
  z-index: 1;               /* über dem Overlay */
  pointer-events: none;
}

/* Alte Verschiebung aus v0.9.13 sicher neutralisieren */
.hero-content{ transform: none !important; }
@media (min-width: 900px){
  .hero-content{ transform: none !important; }
}

/* Spruch-Zentrierung unterhalb des Heros */
.wrap p{
  text-align: center;
  margin-inline: auto;
}
/* post-seiten: header sicher über dem hero */
.topbar{ z-index: 10; }
/* Blog-Post: Topbar sicher über dem Hero */
.topbar { position: relative; z-index: 20; }

/* Falls nötig: Overlay unter Text halten */
.hero-overlay { z-index: 0; }
.hero-content { z-index: 1; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
/* Blog-Post: Topbar sicher über dem Hero */
.topbar { position: relative; z-index: 20; }
.hero-overlay { z-index: 0; }
.hero-content {
  z-index: 1;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
/* --- Sichtbarkeitsfix für Blogposts --- */
article.wrap {
  position: relative !important;
  z-index: 5 !important;
  color: var(--forest, #111) !important;
}

.fade-in {
  opacity: 1 !important;
  transform: none !important;
}

.hero-overlay {
  z-index: 0 !important;
  opacity: 0.4 !important; /* sanfter, aber nicht alles verdecken */
}
/* --- Einheitliche, fixierte Topbar für alle Seiten --- */
:root { --topbar-h: 64px; }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 100;
  background: #f8f5ef; /* dein elfenbeinweiß, wie Startseite */
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

body {
  padding-top: var(--topbar-h); /* Platz schaffen, damit nix verdeckt wird */
}
/* --- Mobile: Social-Icons kleiner & enger -------------------------------- */
@media (max-width: 700px) {
  .nav-right.socials {
    gap: .28rem; /* enger zusammen */
  }

  .social-link .icon-badge {
    width: 32px;        /* kleinerer Kreis */
    height: 32px;
    padding: 4px;       /* weniger Innenabstand */
    border-radius: 9999px;
    border-width: 1px;  /* dünnere Umrandung */
  }

  .social-link svg {
    width: 18px;        /* Icon leicht kleiner */
    height: 18px;
  }
}
/* --- Dark Mode Fix nur für Mobile: Pinterest Angleichen --- */
@media (max-width: 700px) {
  @media (prefers-color-scheme: dark) {
    .social-link[href*="pinterest"] .icon-badge {
      background-color: transparent !important; /* heller Kreis weg */
      border-color: var(--forest);               /* gleiche Linie wie Instagram */
    }

    .social-link[href*="pinterest"] svg {
      color: var(--forest);                      /* gleiche Farbe wie Text im Dunkeln */
      fill: var(--forest);
    }
  }
}
/* --- Mobile + Dark Mode: Pinterest wie Instagram (ohne hellen Innenkreis) --- */
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  /* Badge/Kreis hinten: transparent und dezenter Rand */
  .nav-right.socials a[href*="pinterest"] .icon-badge {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
  }

  /* Alle Teile des SVG: kein Fill, nur Outline in ivory */
  .nav-right.socials a[href*="pinterest"] svg * {
    fill: none !important;
    stroke: var(--ivory) !important;
    stroke-width: 1.6 !important;
  }

  /* Falls das SVG einen extra Kreis legt – explizit rausnehmen */
  .nav-right.socials a[href*="pinterest"] svg circle,
  .nav-right.socials a[href*="pinterest"] svg path[fill] {
    fill: none !important;
  }
}
/* --- Mobile + Dark Mode: Pinterest Icon fixen --- */
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  /* Hintergrund vom Kreis transparent machen */
  .social-link[href*="pinterest"] svg circle,
  .social-link[href*="pinterest"] svg path[fill],
  .social-link[href*="pinterest"] svg [fill="var(--ivory)"],
  .social-link[href*="pinterest"] svg [fill="#EBE7DC"] {
    fill: transparent !important;
  }

  /* Das P selbst soll in ivory bleiben */
  .social-link[href*="pinterest"] svg path:not([fill="none"]) {
    fill: var(--ivory) !important;
  }

  /* Außenkreis angleichen */
  .social-link[href*="pinterest"] .icon-badge {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
}
/* --- Mobile + Dark Mode: Pinterest-Innenkreis weg, nur das "P" sichtbar --- */
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  /* 1) Helle Kreis-/Flächen-Hintergründe ausblenden */
  .social-link[href*="pinterest"] svg circle,
  .social-link[href*="pinterest"] svg ellipse,
  .social-link[href*="pinterest"] svg > path:first-of-type {
    display: none !important;       /* erwischt den runden Hintergrund */
  }

  /* 2) Badge-Hintergrund transparent lassen */
  .social-link[href*="pinterest"] .icon-badge {
    background: transparent !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: none !important;
  }

  /* 3) Alles andere als Outline, das "P" gefüllt */
  .social-link[href*="pinterest"] svg * {
    fill: none !important;
    stroke: var(--ivory) !important;
    stroke-width: 1.6 !important;
  }
  .social-link[href*="pinterest"] svg path:last-of-type {
    fill: var(--ivory) !important;  /* das "P" selbst */
    stroke: none !important;
  }
}
/* --- Pinterest Dark Mode Fix (Mobile + Desktop) --- */
@media (prefers-color-scheme: dark) {
  /* Kein heller Kreis im Hintergrund */
  .social-link[href*="pinterest"] .icon-badge {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    filter: brightness(0) invert(1) contrast(1.05) !important;
  }
}
/* --- Pinterest Dark Mode Fix -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Grüner Kreis im Darkmode unsichtbar machen */
  .social-link[href*="pinterest"] svg circle {
    fill: transparent !important;
  }

  /* Das "P" bleibt ivory */
  .social-link[href*="pinterest"] svg path {
    fill: var(--ivory) !important;
  }

  /* Optional: Badge-Rand im Dark Mode dezent halten */
  .social-link[href*="pinterest"] .icon-badge {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: none;
  }
}
/* --- Pinterest Dark Mode: ivory-Fill transparent machen --- */
@media (prefers-color-scheme: dark) {
  /* Nur der innere ivory-Fill wird transparent */
  .social-link[href*="pinterest"] svg path[fill="var(--ivory)"] {
    fill: transparent !important;
  }

  /* Kreis und grünes P bleiben wie im Light Mode */
  .social-link[href*="pinterest"] svg circle {
    fill: var(--forest) !important;
  }
  .social-link[href*="pinterest"] svg path {
    stroke: var(--forest) !important;
    stroke-width: 1.6;
  }
}
/* --- Pinterest im Dark Mode: ivory-Fill raus, P grün als Outline --- */
@media (prefers-color-scheme: dark) {
  .nav-right.socials .social-link[aria-label="Pinterest"] svg path {
    fill: transparent !important;         /* ivory-Füllung weg */
    stroke: var(--forest) !important;      /* P in grün */
    stroke-width: 1.6 !important;          /* ggf. 1.4–1.8 feintunen */
  }
  /* Kreis bleibt grün (nur zur Sicherheit explizit) */
  .nav-right.socials .social-link[aria-label="Pinterest"] svg circle {
    fill: var(--forest) !important;
  }
}
/* Pinterest: Standard (hell) und Dark-Mode getrennt steuern */
.social-link[aria-label="Pinterest"] .p-glyph {
  color: var(--ivory);              /* Light Mode: innen ivory wie gehabt */
}

/* Nur Dark Mode: ivory-Füllung transparent, P als grüne Outline */
@media (prefers-color-scheme: dark) {
  .social-link[aria-label="Pinterest"] .p-glyph {
    color: transparent;             /* macht den Fill durchsichtig */
    stroke: var(--forest);          /* grünes P als Kontur */
    stroke-width: 1.6;              /* ggf. 1.4–1.8 feinjustieren */
  }
  /* Kreis bleibt sicher grün */
  .social-link[aria-label="Pinterest"] svg circle { fill: var(--forest); }
}
/* --- Pinterest: nur Dark Mode, ivory-Füllung weg, P bleibt grün --- */
@media (prefers-color-scheme: dark) {
  .nav-right.socials a[aria-label="Pinterest"] svg path {
    fill: transparent !important;     /* ivory-Füllung aus */
    stroke: var(--forest) !important; /* P als grüne Outline */
    stroke-width: 1.8 !important;
  }
  .nav-right.socials a[aria-label="Pinterest"] svg circle {
    fill: var(--forest) !important;    /* grüner Kreis bleibt */
  }
}
/* Pinterest: im Dark Mode nur den ivory-Fill ausblenden */
@media (prefers-color-scheme: dark) {
  .nav-right.socials a[aria-label="Pinterest"] svg path[fill="var(--ivory)"] {
    fill: transparent !important;
  }
}
/* === HOTFIX: Pinterest im Dark Mode ================================ */
@media (prefers-color-scheme: dark) {
  .nav-right.socials a[aria-label="Pinterest"] svg path {
    fill: transparent !important;     /* ivory-Füllung raus */
    stroke: var(--forest) !important; /* grünes P als Kontur */
    stroke-width: 1.8 !important;
  }
  .nav-right.socials a[aria-label="Pinterest"] svg circle {
    fill: var(--forest) !important;   /* Kreis bleibt grün */
  }
}
/* === /HOTFIX ======================================================= */
/* === HOTFIX: Pinterest im Dark Mode ================================= */
@media (prefers-color-scheme: dark) {
  /* Nur der Pinterest-Pfad: hellen Fill im Dark Mode transparent machen */
  .nav-right.socials a[aria-label="Pinterest"] svg path {
    fill: transparent !important;   /* ivory weg */
    stroke: var(--forest) !important;
    stroke-width: 1.8 !important;
  }
  /* Kreis bleibt grün – nur zur Sicherheit nochmal gesetzt */
  .nav-right.socials a[aria-label="Pinterest"] svg circle {
    fill: var(--forest) !important;
  }
}
/* === /HOTFIX ======================================================== */
/* Nur für Desktop auf der Über-mich-Seite */
@media (min-width: 1024px) {
  body.ueber-mich .about-hero img {
    width: 100%;
    max-width: 1080px;
    height: auto;
    display: block;
    margin: 2rem auto; /* bleibt schön zentriert */
  }
}
/* Über-mich-Seite: Bild im richtigen Verhältnis darstellen */
body.ueber-mich .about-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: auto;           /* Container nicht fix verzerren lassen */
  max-height: none;
}

body.ueber-mich .about-hero img {
  width: auto;            /* Breite an Bildverhältnis anpassen */
  height: auto;
  max-width: 90%;         /* nicht über den Bildschirmrand hinaus */
  max-height: 90vh;       /* maximal 90% der Bildschirmhöhe */
  object-fit: contain;    /* Bild komplett sichtbar */
  display: block;
  margin: 0 auto;
}