/* Still im Sturm – ruhiges, zartes Basis-Theme (Full Replace) */
:root{
  --petrol:#4a6964;
  --mauve:#a189b4;
  --beige:#ebe6df;
  --grau:#6b7280;
  --tinte:#2a2f33;
  --weiss:#ffffff;
  --bg:#f7f5f2;
  --ring: color-mix(in oklab, var(--mauve) 45%, var(--petrol));
  --shadow: 0 6px 18px rgba(20,24,27,.08);
  --radius: 14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--tinte);
  background:linear-gradient(180deg, var(--bg), #fff 35%) fixed;
  /* Upgrade: ruhigeres Schriftbild */
  font-size:17px;
  line-height:1.7;
  letter-spacing:.1px;
}

.wrap{width:min(1120px, 92vw); margin-inline:auto; padding-inline:1.2rem;}

.skip-link{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:var(--weiss); border-radius:.5rem; outline:2px solid var(--ring)
}

/* Fokus sichtbarer (A11y) */
:focus-visible{
  outline:3px solid color-mix(in oklab, var(--ring) 65%, white);
  outline-offset:2px; border-radius:8px;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--tinte); font-weight:600; letter-spacing:.2px}
.brand img{filter: drop-shadow(0 1px 0 rgba(0,0,0,.12))}
.site-header ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.site-header a{color:var(--tinte); text-decoration:none; padding:.35rem .5rem; border-radius:.5rem}

/* Nav Hover & Underline-Animation */
.site-header nav a{ position:relative; transition: background .2s ease, color .2s ease; }
.site-header nav a:hover{ background:var(--beige); }
.site-header nav a::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:.2rem;
  height:2px; border-radius:2px;
  background: color-mix(in oklab, var(--petrol) 70%, var(--mauve));
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.site-header nav a:hover::after{ transform: scaleX(1); }
.site-header nav a[aria-current="page"],
.site-header nav a[aria-current="true"]{ color:var(--petrol); }
.site-header nav a[aria-current="page"]::after{ transform: scaleX(1); }

/* Hero */
.hero{
  background:
    radial-gradient(1000px 420px at 68% -10%, color-mix(in oklab, var(--mauve) 16%, white), transparent 70%),
    radial-gradient(800px 380px at 10% -20%, color-mix(in oklab, var(--petrol) 12%, white), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--beige) 60%, white), transparent);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.hero-inner{padding:6.5rem 0 4rem}
.hero h1{
  font-family: "EB Garamond", Georgia, serif;
  font-weight:600; font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing:.4px; margin:0 0 .6rem;
  color:var(--petrol);
}
.tagline{font-size: clamp(1.05rem, 2.4vw, 1.3rem); color:var(--grau); margin:0; opacity:.92}

/* Sections */
h1,h2,h3{ letter-spacing:.2px; }
.about{padding:3rem 0 2rem}
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem}
.motto{
  background: color-mix(in oklab, var(--beige) 70%, white);
  padding:.85rem 1rem; border-left:5px solid var(--mauve); border-radius:.4rem;
  color: color-mix(in oklab, var(--tinte) 88%, var(--grau));
}
.button{
  display:inline-block; padding:.6rem .9rem; border-radius:.6rem;
  background:var(--petrol); color:white; text-decoration:none; box-shadow:var(--shadow);
  border:1px solid color-mix(in oklab, var(--petrol) 30%, black);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover{ filter:brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20,24,27,.12); }
.button:active{ transform: translateY(0); box-shadow: 0 4px 10px rgba(20,24,27,.10); }

/* Cards */
.cards{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr))}
.card{
  background:white; border-radius:var(--radius); padding:1.1rem 1.1rem 1rem;
  box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card.soft{background:linear-gradient(180deg, white, color-mix(in oklab, var(--beige) 45%, white));}
.card h3{margin:.2rem 0 .2rem; font-family:"EB Garamond", Georgia, serif}
.card .meta{color:var(--grau); font-size:.95rem; margin:.1rem 0 .5rem}
.card .more{color:var(--petrol); text-decoration:none; font-weight:600}
.card .more:hover{text-decoration:underline}
@media (prefers-reduced-motion: reduce){ .card{ transition:none; } }
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,24,27,.10); border-color: rgba(0,0,0,.06); }

/* Posts section */
.posts{padding:2.5rem 0 3.5rem}
.posts h2, .about h2{font-family:"EB Garamond", Georgia, serif; color:var(--tinte)}

/* Footer */
.site-footer{
  border-top:1px solid rgba(0,0,0,.06);
  padding:2.2rem 0 3rem;
  background:linear-gradient(180deg, #fff, var(--bg));
  color: color-mix(in oklab, var(--tinte) 70%, var(--grau));
}
.site-footer .tiny{color:var(--grau); font-size:.95rem; opacity:.9}
.site-footer a{color:var(--petrol); text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Responsive tweaks */
@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
  .hero-inner{padding:5.5rem 0 3rem}
  .site-header nav ul{gap:.5rem}
}

/* Dark Mode – dezent */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #131516;
    --tinte: #E7E9EA;
    --grau: #a7adb5;
    --beige: #2a2e31;
    --shadow: 0 6px 18px rgba(0,0,0,.5);
  }
  body{ background: linear-gradient(180deg, #121415, #0f1112 35%) fixed; }
  .site-header{ background: rgba(20,22,24,.65); border-bottom-color: rgba(255,255,255,.08); }
  .site-header a:hover{ background: rgba(255,255,255,.06); }
  .card{ background: #1a1d1f; border-color: rgba(255,255,255,.06); }
  .card.soft{ background: linear-gradient(180deg, #1a1d1f, #1f2225); }
  .motto{ background: #212427; border-left-color: color-mix(in oklab, var(--mauve) 70%, white); }
  .site-footer{ background: linear-gradient(180deg, #171a1c, #131516); border-top-color: rgba(255,255,255,.08); }
}
	  /* ===== Still im Sturm – zarte Papiertextur (CSS-only, no images) ===== */

/* 0) Helfer: Texture-Layer als Pseudo-Element */
.paper-texture::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* mehrschichtige, sehr subtile "Fasern" + "Sprenkel" */
  background:
    /* feine Faserwolken */
    radial-gradient(1200px 800px at 20% -10%, rgba(0,0,0,.02), transparent 60%),
    radial-gradient(900px 600px at 120% 0%, rgba(0,0,0,.018), transparent 65%),
    /* Sprenkel / Korn */
    repeating-radial-gradient(circle at 30% 40%, rgba(0,0,0,.018) 0 1px, transparent 1px 8px),
    repeating-radial-gradient(circle at 70% 60%, rgba(0,0,0,.015) 0 1px, transparent 1px 10px),
    /* sehr sanfter Feinkorn-Layer */
    conic-gradient(from 0deg at 50% 50%, rgba(0,0,0,.012), transparent 60%, rgba(0,0,0,.012));
  mix-blend-mode: multiply;
  opacity: .55;
}

/* 1) Body als "Papierblatt" */
body{
  position: relative; /* für ::before der Seite */
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), transparent 30%),
    /* hauchfeines Papierkorn über der ganzen Seite */
    repeating-radial-gradient(circle at 10% 15%, rgba(0,0,0,.012) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at 80% 75%, rgba(0,0,0,.012) 0 1px, transparent 1px 11px);
  mix-blend-mode: multiply;
  opacity: .55;
  z-index: 0;
}

/* 2) Hero & Footer bekommen zartes Papierfinish */
.hero, .site-footer{
  position: relative;
  z-index: 1;
}
.hero.paper, .site-footer.paper{ /* optional per Klasse aktivieren */
  /* nichts – nur Markerklasse */
}
.hero.paper::before, .site-footer.paper::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(1000px 600px at 10% -20%, rgba(0,0,0,.02), transparent 60%),
    repeating-radial-gradient(circle at 60% 30%, rgba(0,0,0,.015) 0 1px, transparent 1px 10px);
  mix-blend-mode:multiply;
  opacity:.5;
}

/* 3) Karten wie leichtes Kartonpapier */
.card{
  position: relative; z-index: 1;
}
.card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(800px 500px at 0% -10%, rgba(0,0,0,.02), transparent 60%),
    repeating-radial-gradient(circle at 40% 70%, rgba(0,0,0,.02) 0 1px, transparent 1px 10px);
  mix-blend-mode:multiply;
  opacity:.45;
}

/* 4) Dark Mode – Textur deutlich schwächer (sonst sieht es staubig aus) */
@media (prefers-color-scheme: dark){
  body::before{ opacity:.25; }
  .card::before{ opacity:.25; }
  .hero.paper::before, .site-footer.paper::before{ opacity:.22; }
}
/* Immer helle Ansicht erzwingen */
@media (prefers-color-scheme: dark){
  :root{ --bg:#f7f5f2; --tinte:#2a2f33; --grau:#6b7280; --beige:#ebe6df; --shadow:0 6px 18px rgba(20,24,27,.08); }
  body{ background: linear-gradient(180deg, var(--bg), #fff 35%) fixed !important; }
  .site-header{ background: rgba(255,255,255,.85) !important; border-bottom-color: rgba(0,0,0,.05) !important; }
  .card{ background:#fff !important; border-color: rgba(0,0,0,.04) !important; }
  .card.soft{ background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--beige) 45%, #fff)) !important; }
  .motto{ background: color-mix(in oklab, var(--beige) 70%, #fff) !important; border-left-color: var(--mauve) !important; }
  .site-footer{ background: linear-gradient(180deg, #fff, var(--bg)) !important; border-top-color: rgba(0,0,0,.06) !important; }
}
/* Überschriften-Links in Karten: wie die Überschrift färben */
.card h3 a,
.card h3 a:visited{
  color: inherit !important;
  text-decoration: none;
}

.card h3 a:hover{
  color: var(--petrol) !important;
  text-decoration: underline;
}

/* Falls irgendwo noch grelles Blau übrig bleibt: Links in Karten allgemein */
.cards a,
.cards a:visited{
  color: var(--tinte) !important;
  text-decoration: none;
}

.cards a:hover{
  color: var(--petrol) !important;
  text-decoration: underline;
}

	  /* Infoblock-Stil für "Selbst wenn" – Kartenoptik ausschalten */
.about .card.infobox{
  background: color-mix(in oklab, var(--mauve) 20%, white) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1.8rem 2rem !important;
  border-left: 6px solid var(--mauve) !important;
  color: color-mix(in oklab, var(--tinte) 85%, black) !important;
}

.about .card.infobox h3{
  color: var(--petrol) !important;
  margin-top: 0;
}

.about .card.infobox a.more{
  display: inline-block;
  margin-top: .8rem;
  color: var(--petrol) !important;
  text-decoration: underline;
  font-weight: 500;
}
	  @media (max-width: 420px){
  .hero h1{ font-size: 2rem; }
  .tagline{ font-size: 1rem; }
  .card{ padding: .9rem .9rem .85rem; }
  .card.infobox{ padding: 1.2rem 1.2rem; } /* der mauve Info-Block */
}
	  @media (max-width: 860px){
  .about aside.card.soft{
    background: color-mix(in oklab, var(--beige) 70%, white);
  }
}
	  /* ===== Mobile-Header-Fix ===== */
@media (max-width: 860px){
  /* Kopfbereich darf in zwei Zeilen umbrechen, aber geordnet */
  .site-header .wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;          /* erlaubt zweite Zeile fürs Menü */
    row-gap: .4rem;
    padding: .55rem 0;
  }

  /* Marke/Logo kompakter & ohne Umbruch */
  .brand{ gap: .4rem; }
  .brand img{ width:28px; height:28px; }
  .brand span{
    white-space: nowrap;      /* "Still im Sturm" bleibt zusammen */
    font-size: 1rem;
  }

  /* Menü in die zweite Zeile, volle Breite, schön verteilt */
  .site-header nav{ width: 100%; order: 2; }
  .site-header nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .4rem;
    flex-wrap: nowrap;        /* nichts bricht in 2 Zeilen */
  }
  .site-header nav a{
    white-space: nowrap;      /* z. B. "Über mich" nicht trennen */
    padding: .35rem .5rem;
    font-size: .95rem;
  }
}

/* Extra kompakt für sehr kleine Geräte */
@media (max-width: 420px){
  .brand span{ font-size: .95rem; }
  .site-header nav a{ font-size: .9rem; padding: .3rem .45rem; }
}
	  .brand span{
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.4px;
}
	  
/* 5) Optional: Klasse an bestehenden Bereichen aktivieren (falls gewünscht)
   – Wenn du die Textur extra stark im Hero/Footer willst, füge im HTML
   <section class="hero paper"> … </section>
   und/oder <footer class="site-footer paper"> … </footer> ein.
*/