/* Blog — dieselbe Anmutung wie tambum.de. Die Schriften liegen bereits auf
   dem Server und werden von der Hauptseite geladen; hier derselbe Verweis. */
@import url("/assets/schriften.css");

:root{
  --bg:#0F0F0F; --karte:#161616; --line:#242424; --line-strong:#333;
  --ink:#F2EDE3; --ink-soft:#C6C1B9; --ink-faint:#7a7a7a;
  --accent:#FF3D14;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* feines Korn wie auf der Hauptseite */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:200;
  opacity:.30;mix-blend-mode:overlay;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:22px;
  padding:16px clamp(20px,5vw,64px);border-bottom:1px solid var(--line);
  background:rgba(15,15,15,.94);backdrop-filter:blur(10px);transform:translateZ(0)}
.marke{display:flex;align-items:center;gap:11px;font-family:var(--display);
  font-weight:800;letter-spacing:.16em;font-size:14px}
.marke .punkt{width:15px;height:15px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,61,20,.16)}
.kopf nav{margin-left:auto;display:flex;gap:6px}
.kopf nav a{font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);padding:12px 12px}
.kopf nav a:hover{color:var(--accent)}

/* ---------- Bahn ---------- */
.bahn{max-width:880px;margin:0 auto;padding:clamp(48px,9vw,100px) clamp(20px,5vw,40px) 110px}
.eyebrow{display:block;font:500 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:18px}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(32px,5.4vw,58px);line-height:1.05;margin:0 0 18px}
h2{font-family:var(--display);font-weight:800;letter-spacing:-.015em;
  font-size:clamp(21px,2.6vw,28px);line-height:1.2;margin:44px 0 14px}
h3{font-family:var(--display);font-weight:800;font-size:19px;margin:32px 0 10px}
p{font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:var(--ink-soft);margin:0 0 18px}
p strong{color:var(--ink);font-weight:600}
ul{padding-left:22px;margin:0 0 20px}
li{font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:var(--ink-soft);margin-bottom:8px}
.bahn a[rel]{color:var(--accent);border-bottom:1px solid rgba(255,61,20,.4)}
.bahn a[rel]:hover{border-color:var(--accent)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-faint)}

/* ---------- Übersicht ---------- */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 8px}
.filter a{font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;padding:11px 15px;color:var(--ink-faint)}
.filter a:hover,.filter a.an{color:var(--accent);border-color:var(--accent)}

.liste{list-style:none;padding:0;margin:34px 0 0}
.liste li{border-top:1px solid var(--line);padding:32px 0}
.liste li:last-child{border-bottom:1px solid var(--line)}
.liste .bild{width:100%;height:auto;max-height:240px;object-fit:cover;
  border-radius:3px;margin-bottom:18px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.liste .titel{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.4vw,27px);
  line-height:1.2;display:block;letter-spacing:-.015em}
.liste .titel:hover{color:var(--accent)}
.liste p{margin:10px 0 0;font-size:16px}
.liste .datum{display:block;margin-top:12px;font:500 10px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- Beitrag ---------- */
/* ⚠️ Hochformat (9:16) fuellt sonst den halben Bildschirm. `max-height` begrenzt
   es, `max-width` das Querformat — welche Grenze greift, entscheidet das Bild selbst. */
.kopfbild{max-width:100%;max-height:66vh;width:auto;height:auto;display:block;
  margin:26px auto 34px;border-radius:3px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.vorspann{font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:var(--ink)}
.inhalt img{max-width:100%;max-height:70vh;width:auto;height:auto;
  display:block;margin:30px auto;border-radius:3px}
/* Werkstattfilme sind Hochformat (720×1280). Im Fluss auf lesbare Breite
   begrenzt, im Vollbild `contain`, damit das Format erhalten bleibt. */
.inhalt video{display:block;width:100%;max-width:330px;height:auto;margin:30px auto;
  border-radius:3px;background:#000}
.inhalt video:fullscreen,.inhalt video:-webkit-full-screen{
  max-width:none;object-fit:contain;background:#000}
.marken{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}
.marken a{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;padding:10px 14px;color:var(--ink-faint)}
.marken a:hover{color:var(--accent);border-color:var(--accent)}

.zurueck{display:inline-block;margin-top:44px;font:500 11px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.zurueck:hover{color:var(--accent)}
.leer{color:var(--ink-faint);padding:30px 0}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--line);padding:30px clamp(20px,5vw,64px);
  display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.fuss a{font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint)}
.fuss a:hover{color:var(--accent)}

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

/* ---------- Teilen ---------- */
.teilen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:44px;
  padding-top:26px;border-top:1px solid var(--line)}
.teilen-was{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:6px}
.teilen a,.teilen button{font:500 10px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;
  padding:11px 14px;color:var(--ink-faint);background:none;cursor:pointer;
  transition:color .2s,border-color .2s}
.teilen a:hover,.teilen button:hover{color:var(--accent);border-color:var(--accent)}
.kopf nav a.sprach{border:1px solid var(--line-strong);border-radius:2px;
  padding:9px 11px;margin-left:4px}
.kopf nav a.sprach:hover{border-color:var(--accent)}