/* huetec – eigene Styles auf Basis von Bootstrap 5 */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --hu-ink:#16202A; --hu-accent:#0F6E74; --hu-accent-light:#5CC6C4;
  --hu-muted:#5B6670; --hu-paper:#F6F4EF; --hu-line:#DCD8CF;
  --bs-body-font-family:"Inter",system-ui,sans-serif;
  --bs-body-color:var(--hu-ink); --bs-body-bg:var(--hu-paper);
  --bs-link-color-rgb:15,110,116; --bs-link-hover-color-rgb:22,32,42;
}
body{font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display-font{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.875rem;letter-spacing:.02em}
.text-muted-hu{color:var(--hu-muted)}
.accent{color:var(--hu-accent)}

/* Navigation */
.navbar{background:var(--hu-paper);border-bottom:1px solid var(--hu-line)}
.navbar-brand img{height:44px;width:auto}
.nav-link{font-weight:600;color:var(--hu-ink)}
.nav-link:hover{color:var(--hu-accent)}
.btn-hu{--bs-btn-bg:var(--hu-ink);--bs-btn-border-color:var(--hu-ink);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--hu-accent);--bs-btn-hover-border-color:var(--hu-accent);--bs-btn-hover-color:#fff;
  --bs-btn-font-weight:600;--bs-btn-padding-x:1.25rem;--bs-btn-padding-y:.65rem;border-radius:2px}
.btn-hu-outline{--bs-btn-color:var(--hu-ink);--bs-btn-border-color:var(--hu-ink);
  --bs-btn-hover-bg:var(--hu-ink);--bs-btn-hover-color:#fff;--bs-btn-font-weight:600;
  --bs-btn-padding-x:1.25rem;--bs-btn-padding-y:.65rem;border-radius:2px}

/* Hero */
.hero{padding:6rem 0 5rem}
.hero h1{font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.05;max-width:16ch}
.hero .lead{font-size:1.25rem;max-width:40rem;color:var(--hu-muted)}
.bracket{color:var(--hu-accent);font-weight:500}

/* Abschnitte */
section{scroll-margin-top:5rem}
.section{padding:4.5rem 0;border-top:1px solid var(--hu-line)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--hu-accent);margin-bottom:.75rem}
.focus-item{border-left:3px solid var(--hu-accent);padding:.25rem 0 .25rem 1.25rem;height:100%}
.focus-item h3{font-size:1.3rem;margin-bottom:.5rem}
.focus-item p{color:var(--hu-muted);margin:0}

.contact{background:var(--hu-ink);color:#F4F2EC;padding:4.5rem 0}
.contact a{color:var(--hu-accent-light);text-decoration:none}
.contact a:hover{text-decoration:underline}
.contact .btn-hu{--bs-btn-bg:var(--hu-accent-light);--bs-btn-border-color:var(--hu-accent-light);--bs-btn-color:var(--hu-ink);
  --bs-btn-hover-bg:#F4F2EC;--bs-btn-hover-border-color:#F4F2EC;--bs-btn-hover-color:var(--hu-ink)}
.contact .btn-hu:hover{text-decoration:none}

footer{padding:1.5rem 0;font-size:.9rem;color:var(--hu-muted)}
footer a{color:var(--hu-muted);text-decoration:none;margin-left:1.25rem}
footer a:hover{color:var(--hu-ink)}

/* Rechtstexte */
.legal{padding:4rem 0 5rem;max-width:46rem}
.legal h1{font-size:2.4rem;margin-bottom:2rem}
.legal h2{font-size:1.25rem;margin-top:2.25rem}
.todo{background:#FFF3C4;padding:0 .25rem}

/* Korrekturen */
.navbar-brand{display:flex;align-items:center;gap:.75rem}
.navbar-brand img{height:40px}
.brand-name{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:1.15rem;color:var(--hu-ink);letter-spacing:-.01em}
.h1,.h2,.h3{font-weight:700}
.contact a.btn{color:var(--bs-btn-color)}
.contact a.btn:hover{color:var(--bs-btn-hover-color)}
footer .container{gap:.5rem 1.25rem}
footer a{margin-left:0;margin-right:1.25rem}
footer a:last-child{margin-right:0}

/* Evans-Layout: Positionierung + Beiträge */
.hero-compact{padding:5rem 0 3.5rem}
.hero-compact h1{max-width:none}
.posts{border-top:1px solid var(--hu-line)}
.post{padding:1.75rem 0;border-bottom:1px solid var(--hu-line);max-width:46rem}
.post time{display:block;color:var(--hu-muted);margin-bottom:.4rem}
.post h3{font-size:1.45rem;margin-bottom:.4rem}
.post h3 a{color:var(--hu-ink);text-decoration:none}
.post h3 a:hover{color:var(--hu-accent)}
.post p{color:var(--hu-muted);margin:0}
#beitraege,#posts-section{border-top:0;padding-top:1rem}

/* Sprachumschalter */
.lang-switch{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:.875rem;letter-spacing:.04em;border:1px solid var(--hu-line);padding:.2rem .55rem!important;border-radius:2px}
.lang-switch:hover{border-color:var(--hu-accent)}

/* Visitenkarten-Modus: Link statt Beitragsliste */
.hero-compact{padding-bottom:5rem}
.hero-link{font-size:.95rem;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.hero-link:hover{color:var(--hu-ink)}