:root{
  --bg: #0b1220;
  --fg: #e5e7eb;
  --muted: #9aa4b2;
  --accent: #4f7cff;
  --card: #0f172a;
  --border: rgba(255,255,255,.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:24px}

.site-header{position:sticky;top:0;background:rgba(11,18,32,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);z-index:50}
.flex{display:flex}
.between{justify-content:space-between}
.center{align-items:center}
.ml-auto{margin-left:auto}
.brand{display:flex;gap:12px;align-items:center;font-weight:700;color:var(--fg)}
.logo{height:28px;width:auto}
.nav a{margin-left:16px;font-weight:500}
.nav a:hover{text-decoration:underline}

.hero{padding:56px 0 24px}
.hero.enhanced{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background: radial-gradient(1200px 400px at 10% -20%, rgba(79,124,255,.25), transparent 60%),
              radial-gradient(1000px 400px at 90% -10%, rgba(79,124,255,.18), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--border);
}
.hero.enhanced::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(80% 80% at 50% 0%, rgba(0,0,0,1), rgba(0,0,0,0.15));
  pointer-events:none;
}
.hero .hero-content{position:relative; padding:32px}
.hero.mini{padding:32px 0 8px}
.hero h1{font-size:56px; margin:0 0 8px}
.lead{color:var(--muted);max-width:68ch}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:16px 0 32px}
.card {
  background: var(--card);
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px; /* <– hinzugefügt: sorgt für einheitliche Kartengröße */
}
.card h3{
  margin:0 0 -2px;
  color:var(--accent);
}
.card p{margin:0 0 10px}

/* Kartenlayout anpassen, damit der "Lesen"-Link immer unten sitzt */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;               /* gleiche Höhe für alle Karten */
}


.card-media{display:block}                    /* <a> als Block, klickbar über ganze Breite */
.card-media img{width:100%;height:180px;object-fit:cover;display:block}
.card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 12px 0px 0px;
}

.card-body .more {
  margin-top: auto;           /* schiebt den Link nach unten */
  display: inline-block;
}
.card-title{
  margin: 12px 0 0px;  /* ↑ mehr Abstand zum Bild (oben), ↓ weniger zum Datum */
}

.card .post-meta{
  font-size:.85rem;
  opacity:.8;
  margin:0 0 12px;
  /* optional: */
  /* color: var(--muted); */
}

.card .card-text {
  font-size:.9rem;
  color:var(--muted);
  hyphens:auto;
  overflow-wrap:break-word;
  word-wrap:break-word;
}


/* Gesamte Karte klickbar machen */
.card.post-card {
  position: relative;
  cursor: pointer;
}

.card-link {
  position: absolute;
  inset: 0;           /* deckt gesamte Karte ab */
  z-index: 1;         /* liegt über Inhalt */
  border-radius: var(--radius);
}

.card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.card.post-card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}



.more{
  display:inline-block;
  margin-top:8px;
  color:var(--accent);
}

.site-footer{margin-top:32px;padding:24px 0;border-top:1px solid var(--border);color:var(--muted)}


/* Hoover-Effekt */

/* Sanfter, akzentbasierter Hover-Effekt für klickbare Karten */
.card.post-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.card.post-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}

.card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}









/* Aktiv: echte Kreisbahn via CSS Motion Path */
.move-dot {
  position: relative;
  display: inline-block;
  --dur: 1500ms;        /* Dauer der Animation */
}

.move-dot .dot {
  position: relative;
  display: inline-block;

  /* Startpunkt feintunen: weiter rechts & tiefer */
  transform: translate(0.25ch, 0.55em);  /* ← rechts, unten */

  /* Halbkreis klar nach unten; etwas längerer Weg bis hinter "it" */
  offset-path: path("M 0 0 Q 29 50 58 0");
  -webkit-offset-path: path("M 0 0 Q 29 50 58 0");

  offset-rotate: 0deg;
  -webkit-offset-rotate: 0deg;
  offset-distance: 0%;
  -webkit-offset-distance: 0%;
  animation: dot-path var(--dur) ease-out forwards;
  animation-delay: 1s;   /* ← Startet 2 Sekunden nach Seiten-Load */
}

@keyframes dot-path {
  from { offset-distance: 0%;   -webkit-offset-distance: 0%; }
  to   { offset-distance: 100%; -webkit-offset-distance: 100%; }
}

/* Optional: leichte „Absenkung“ des ganzen H1 um Zeilenversatz auszugleichen */
.move-dot h1,
.move-dot {
  line-height: 1.1;
}

/* Barrierearmut: keine Bewegung, aber Punkt sofort am Ziel */
@media (prefers-reduced-motion: reduce) {
  .move-dot .dot {
    animation: none !important;
    offset-distance: 100%;
    -webkit-offset-distance: 100%;
  }
}





/* Einheitliche Breite und Abstände für Beitragsseiten */
.post-body {
  max-width: 100%;                     /* passt sich an Containerbreite an */
  margin: 16px 0 32px;                 /* gleicher vertikaler Abstand wie .cards */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* sorgt dafür, dass Hero und Beitrag dieselbe Breite innerhalb der container haben */
.hero.mini.enhanced,
.post-body {
  width: calc(100% - 48px);            /* 2×24px Padding der .container */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Auf kleinen Displays bleibt es vollbreit */
@media (max-width: 768px) {
  .hero.mini.enhanced,
  .post-body {
    width: 100%;
  }
}



/* Post-Navigation (vorheriger / neuerer Beitrag innerhalb eines Projekts) */
.post-nav-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 32px;
  max-width: 100%;
  width: calc(100% - 48px);   /* gleiche optische Breite wie hero / post-body */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.post-nav-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  position: relative;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 15%, transparent);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.post-nav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-decoration: none;
}

.post-nav-label {
  font-size: .75rem;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-nav-label span.dir {
  color: var(--accent);
  font-weight: 600;
  font-size: .7rem;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.2;
}

.post-nav-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--fg);
}

.post-nav-meta {
  margin: 4px 0 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Mobile: volle Breite */
@media (max-width: 768px) {
  .post-nav-wrapper {
    width: 100%;
  }
}