:root {
  --green: #9dbfa8;
  --green-dark: #4f7a61;
  --red: #c4726f;
  --bg: #171f1b;
  --pico-primary: var(--green);
  --pico-primary-background: var(--green-dark);
  --pico-primary-hover: #b6d3bf;
  --pico-primary-hover-background: #5d8a6f;
  --pico-primary-inverse: #f2f6f3;
  --pico-primary-underline: rgba(157, 191, 168, .4);
  --pico-spacing: .9rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body { background: var(--bg); background-image: radial-gradient(60rem 30rem at 0% -10%, rgba(157,191,168,.05), transparent 60%); min-height: 100vh; }
.bi { margin-right: .35em; vertical-align: -.1em; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--green-dark); color: #fff; padding: .4rem .8rem; border-radius: .3rem; }

.site-header { padding-top: 2rem; padding-bottom: .25rem; }
.top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.brand { display: flex; align-items: center; gap: .75rem; margin: 0; font-family: var(--mono); flex-wrap: wrap; }
.brand-name { font-size: clamp(2rem, 8vw, 3rem); color: var(--green); letter-spacing: -.02em; }
.subtitle { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; padding: 0; margin: .6rem 0 1.75rem; font-size: 1.05rem; }
.subtitle li { margin: 0; padding: 0; list-style: none; }
.subtitle .bi { color: var(--green); }
.subtitle .sub { color: var(--pico-muted-color); font-size: .9em; margin-left: .3em; }
.meta { color: var(--pico-muted-color); margin-bottom: 1.2rem; }
.slogan { color: var(--green); }

.live-badge { display: inline-flex; align-items: center; gap: .1rem; padding: .3rem .9rem; border-radius: 999px; font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-decoration: none; border: 1px solid; }
.live-badge.offline { color: #8e9a93; border-color: #3a4640; background: rgba(142,154,147,.07); }
.live-badge.live { color: #fff; background: #c0504d; border-color: #c0504d; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(192,80,77,.6); } 70% { box-shadow: 0 0 0 .7rem rgba(192,80,77,0); } 100% { box-shadow: 0 0 0 0 rgba(192,80,77,0); } }

.shortlinks { display: flex; flex-wrap: wrap; gap: .6rem; }
.shortlinks a { flex: 1 1 0; min-width: 6.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.2rem; border: 1px solid var(--green); border-bottom-width: 3px; border-radius: .6rem; text-decoration: none; font-weight: 600; font-family: var(--mono); font-size: 1.05rem; background: var(--green-dark); color: #f2f6f3; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .15s, background .15s, border-color .15s; }
.shortlinks a .bi { margin: 0; font-size: 1.25rem; }
.shortlinks a:hover, .shortlinks a:focus-visible { background: #5d8a6f; border-color: var(--red); transform: translateY(-2px); }
.shortlinks a:active { transform: translateY(1px); border-bottom-width: 1px; }

section { margin-top: 2rem; }
h2 { font-family: var(--mono); font-size: 1.35rem; }
h2 .bi { color: var(--red); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.card { margin: 0; display: flex; flex-direction: column; border-top: 3px solid var(--green-dark); transition: border-color .2s; }
.card:nth-child(3n+2) { border-top-color: #8a5856; }
.card:hover { border-top-color: var(--green); }
.card h3 { margin: 0; font-size: 1.15rem; }
.card h3 .bi { color: var(--green); }
.card p { flex: 1; }
.card footer { margin-top: auto; }
.card [role=button] { font-size: .95rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.tags li { margin: 0; padding: .1rem .6rem; font-size: .8rem; border-radius: .3rem; background: rgba(157,191,168,.1); color: var(--green); font-family: var(--mono); }
.tags li .bi { margin-right: .3em; opacity: .85; }
.card > .tags:last-child { margin-bottom: 0; }

.haltung { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.haltung span { padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(196,114,111,.45); background: rgba(196,114,111,.08); font-size: .9rem; }
.haltung span:nth-child(even) { border-color: rgba(157,191,168,.4); background: rgba(157,191,168,.07); }
.haltung .bi { color: var(--red); }
.haltung span:nth-child(even) .bi { color: var(--green); }

.site-footer { text-align: center; padding: 3rem 0 2rem; color: var(--pico-muted-color); font-size: .9rem; }
.site-footer p { margin: .2rem 0; }
.stripe { height: 4px; margin-bottom: 1rem; background: linear-gradient(90deg, #a85d5a 0 50%, #5d8a6f 50% 100%); border-radius: 2px; opacity: .8; }
.motto { color: var(--green); letter-spacing: .05em; }
.motto .bi:nth-child(odd) { color: var(--red); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.logo { border-radius: 50%; }
.site-footer a { color: var(--green); }
.tags li { list-style: none; } .tags li::marker { content: ""; }
.heart { color: #c0504d; }

.si, .ic { display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -.12em; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.si-docker { --m: url(https://cdn.jsdelivr.net/npm/simple-icons@11/icons/docker.svg); }
.ic-mountain { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21 9 6l4 7 3-4 8 12z'/%3E%3C/svg%3E"); }

@media (max-width: 576px) {
  .site-header { padding-top: 1.2rem; }
  .top-row { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .brand { flex-wrap: nowrap; gap: .6rem; }
  .logo { width: 44px; height: 44px; }
  .brand-name { font-size: 2rem; }
    .subtitle { flex-direction: column; gap: .3rem; margin-bottom: 1.4rem; }
  .shortlinks { flex-wrap: nowrap; gap: .5rem; }
  .shortlinks a { min-width: 0; padding: .7rem .4rem; }
  section { margin-top: 1.6rem; }
  h2 { font-size: 1.2rem; }
  .card { --pico-block-spacing-vertical: 1rem; --pico-block-spacing-horizontal: 1rem; }
  .haltung span { font-size: .85rem; padding: .35rem .7rem; }
  .site-footer { padding-top: 2rem; font-size: .85rem; }
}

@media (min-width: 900px) { .grid-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
h2 { display: flex; align-items: baseline; }
.card h3 { display: flex; align-items: baseline; }

.card > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.card .go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.3rem; border-radius: .6rem; border: 1px solid var(--green); border-bottom-width: 3px; background: var(--green-dark); color: #f2f6f3; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .15s, background .15s, border-color .15s; }
.card .go .bi { margin: 0; font-size: 1.05rem; }
.card .go:hover, .card .go:focus-visible { background: #5d8a6f; border-color: var(--red); transform: translateY(-2px); }
.card .go:active { transform: translateY(1px); border-bottom-width: 1px; }

/* --- Theme-Toggle & Aktionen --- */
.actions { display: flex; align-items: center; gap: .6rem; }
.live-info { margin-left: .5em; font-weight: 400; letter-spacing: 0; }

/* --- Tipp-Effekt mit Cursor (Text kommt aus app.js) --- */
.brand-name { display: inline-block; min-height: 1.25em; white-space: nowrap; border-right: .1em solid var(--red); animation: caret 1s step-end infinite; }
@keyframes caret { 50% { border-color: transparent; } }

/* --- Scroll-Reveal --- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* --- Haltung: Bewegung --- */
.haltung .bi { display: inline-block; transition: transform .25s; }
.haltung span:hover .bi { transform: scale(1.3) rotate(-10deg); }
.haltung span:first-child .bi { animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

@media (prefers-reduced-motion: reduce) { .brand-name { border-right: 0; } .js .reveal { opacity: 1; transform: none; } }
@media (max-width: 576px) { .actions { width: 100%; justify-content: space-between; flex-direction: row-reverse; } .live-info { display: none; } }


/* --- Zufalls-Effekte --- */
.logo.drum { animation: drum .5s ease-out 4; }
@keyframes drum { 0% { transform: scale(1); } 15% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }
.logo.wink { animation: wink .9s ease-in-out; }
@keyframes wink { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.1); } 60% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .brand-name { animation: none; } }