/* Minimal baseline CSS – kann mit deinem bestehenden Style erweitert werden */
:root { --ink:#111; --bg:#fff; --muted:#555; --brand:#0bb5a7; font-size:16px; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

#header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid #e5e7eb;background:#ffffffcc;backdrop-filter:saturate(140%) blur(6px)}
.brand-name{font-weight:800;letter-spacing:.2px;text-transform:lowercase}
.brand-name span{color:var(--brand)}
#nav{display:flex;gap:14px;align-items:center}
#nav a{padding:8px 10px;border-radius:10px}
#nav a:hover{background:#f3f4f6}

.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:8px;border-radius:10px}
.burger span{display:block;width:22px;height:2px;background:#111}
@media (max-width:860px){
  #nav{display:none;position:absolute;top:56px;left:0;right:0;background:#fff;border-bottom:1px solid #e5e7eb;flex-direction:column;padding:8px}
  #nav.open{display:flex}
  .burger{display:flex}
}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center;padding:28px 14px}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.hero h1{margin:0;font-size:clamp(1.8rem,4vw,3rem);line-height:1.1}
.hero p{color:var(--muted)}

section{padding:28px 14px}
h2{margin:0 0 10px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{border:1px solid #e5e7eb;border-radius:14px;padding:14px;background:#fafafa}

.portrait{max-width:340px}
.content{max-width:900px;margin:0 auto}

footer{text-align:center;padding:20px 10px;border-top:1px solid #e5e7eb;color:#444}
.kontakt-formular label{display:block;margin-top:10px}
.kontakt-formular input,.kontakt-formular textarea{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:10px}
.kontakt-formular button{margin-top:12px;padding:10px 14px;border-radius:999px;border:0;background:linear-gradient(90deg,#0bb5a7,#5ec0ff);color:#fff;font-weight:600}