/* === Warm, ruhige Farbgestaltung (Cream + Ink + Terracotta Akzent) === */
:root{
  --bg:#f6f1e7;
  --ink:#1f2a44;
  --text:#262626;
  --muted:#6b7280;
  --card:#ffffff;
  --accent:#b65a38; /* Terracotta */
  --accent-2:#5b8a72; /* gedämpftes Grün für Links/Hover */
  --ring:rgba(31,42,68,.18);
}

html,body{background:var(--bg); color:var(--text);}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--accent); text-decoration:underline;}

.site-header{background:var(--ink); color:#fff; position:sticky; top:0; z-index:50; box-shadow:0 4px 14px var(--ring)}
.site-header .wrap{display:flex; align-items:center; gap:1.25rem; padding:.9rem 1rem; max-width:1200px; margin:0 auto}
.site-logo{height:48px; width:auto; display:block}
.nav{margin-left:auto; display:flex; gap:1.2rem; flex-wrap:wrap}
.nav a{color:#eef1f6; font-weight:600; letter-spacing:.02em}
.nav a:hover{color:#ffd8be}

.hero{background:#efe8dd; border:1px solid #e7dfd3; box-shadow:0 2px 8px var(--ring); border-radius:14px; padding:1.25rem 1.5rem;}

.wrap{max-width:1200px; margin:0 auto; padding:0 1rem}
.page h1, .hero h1{color:var(--ink);}
.small{color:var(--muted); font-size:.9rem}

.cards{display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin:1.25rem 0}
@media (max-width:1200px){.cards{grid-template-columns:repeat(4,1fr)}}
@media (max-width:800px){.cards{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--card); border:1px solid #e8e2d9; border-radius:14px; overflow:hidden; box-shadow:0 6px 18px var(--ring); display:block}
.card .ph{aspect-ratio:1/1; background:#f0ebe2; display:grid; place-items:center}
.card img{max-width:100%; max-height:100%; object-fit:cover; display:block}
.card .cap{padding:.75rem .85rem; display:flex; flex-direction:column; gap:.25rem}
.card .cap b{color:var(--ink)}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 20px var(--ring)}

.site-footer{margin-top:3rem; border-top:1px solid #e9e2d7; background:#fbf7f1}
.site-footer .wrap{padding:1.25rem 1rem; color:var(--muted)}


:root{
  --ink:#121a22;
  --bg:#F6F4EF;
  --panel:#EDE7DF;
  --accent:#d3b48c;
  --link:#f7f5ef;
  --muted:#5f666d;
  --border:#e2d8c9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:#1b252e;line-height:1.7}
a{color:#204e7a;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:1.2rem}
.site-header{background:var(--ink);color:var(--link)}
.bar{display:flex;align-items:center;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.logo-link{display:flex;align-items:center;padding:6px 0}
.site-logo{height:48px;width:auto;display:block}
.nav{display:flex;gap:1rem;flex-wrap:wrap}
.nav a{color:var(--link)}
.nav a:hover{color:var(--accent)}
.hero{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:2rem;margin:1rem 0}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.card .ph{aspect-ratio:1/1;background:#f1ece4;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .cap{padding:.7rem .8rem}
.card .cap b{display:block}
section.page{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.6rem 2.2rem;margin:1rem 0}
h1{margin:.2rem 0 1rem 0}
h2{margin:1.2rem 0 .4rem}
ul{margin:.2rem 0 .8rem 1.3rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;border:1px solid var(--border);background:#fff}
.btn:hover{background:var(--panel)}
.site-footer{border-top:1px solid var(--border);background:var(--panel);margin-top:2rem}
.site-footer p{margin:.6rem 0}
.small{color:var(--muted);font-size:.95rem}
.notice{background:#fff8e5;border:1px solid #efd9a6;border-radius:10px;padding:.8rem 1rem}