:root {
  --bg: #fafafa;
  --panel: #f8f3ec;
  --text: #0f172a;
  --muted: #475569;
  --brand-1: #f56a33;
  --brand-2: #f7b529;
  --ring: #2563eb;
  --radius: 16px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#fafafa; --panel:#f8f3ec; --text:#0f172a; --muted:#475569; --ring:#2563eb; }
}

* {
    box-sizing:border-box;
}
html,body {
    height:100%
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 16px/1.5 sans-serif;
}
a {
    color:inherit;
    text-decoration:none;
}
main a {
    text-decoration: underline;
}
img {
    max-width:100%;
    display:block;
}
h1, h2, h3 {
    margin: 0;
}
h1 {
    font-size: 2em;
    font-weight: 900;
}
h2 {
    font-size: 1.5em;
    font-weight: 700;
}
h3 {
    font-size: 1.25em;
    font-weight: 500;
}

.wrapper{ max-width: 1200px; margin-inline:auto; padding: 0 2em; }
main.wrapper { margin: 2em auto; }

/* Header */
header.site-header{ position:sticky; top:0; z-index:50; backdrop-filter: saturate(150%) blur(8px); background: color-mix(in lab, var(--panel) 85%, transparent); border-bottom:1px solid color-mix(in lab, var(--text) 10%, transparent) }

.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block: 12px; }

.brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.2px; font-size:1.5em; }
.brand .logo{ width:50px; height:50px; border-radius:10px; display:grid; place-items:center; color:white; font-weight:800 }
.brand .logo img{ display: block; object-fit: contain; width: 100%; height: 100%; }

.brand-1 { color: var(--brand-1);}
.brand-2 { color: var(--brand-2);}

/* Nav links */
.nav-links{ display:flex; align-items:center; gap:8px; }
.nav-links a{ padding:10px 12px; border-radius:10px; color:var(--muted); font-weight:600; transition: background .2s; }
.nav-links a[aria-current="page"], .nav-links a:hover{ color:var(--text); background: color-mix(in lab, var(--text) 8%, transparent) }

/* CTA button */
.btn,
.offcanvas a.btn { padding:10px 14px; border-radius:12px; background:var(--brand-2); color:white; font-weight:700; border:none; cursor:pointer; display: inline-block; transition: background .2s; }
.btn:hover{ background:var(--brand-1); }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }

/* Burger button (hidden on desktop) */
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid color-mix(in lab, var(--text) 12%, transparent); background:transparent; color:var(--text); cursor:pointer }
.nav-toggle:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }

/* Off-canvas for tablet & mobile */
.offcanvas{
  position:fixed; inset:0 0 auto 0; top:64px; /* below header */
  background: color-mix(in lab, var(--panel) 98%, transparent);
  border-top:1px solid color-mix(in lab, var(--text) 10%, transparent);
  display:none;
}
.offcanvas.open{ display:block; animation: fadeDown .18s ease; }
@keyframes fadeDown{ from{ opacity:0; transform: translateY(-6px) } to{ opacity:1; transform:none } }

.offcanvas .menu{ display:grid; gap:6px; padding:12px clamp(16px, 3vw, 32px); }
.offcanvas a{ padding:12px; border-radius:12px; color:var(--text); font-weight:600; background: color-mix(in lab, var(--text) 6%, transparent) }

/* Layout scaffolding (demo) */
main{ padding-block: 32px; }
.cards{ display:grid; gap:16px; grid-template-columns:1fr; align-items:center; }
.card{ background: var(--panel); border-radius: var(--radius); padding:24px }
.card h1{ font-size:1.25em; margin: 0; line-height:1; }
.card p{ margin: 0.5em 0; }
.konzepte-cards { display: flex; flex-direction: column; gap: 2em;}

footer{ border-top:1px solid color-mix(in lab, var(--text) 10%, transparent); margin-top:40px; }
footer .inner{ display:flex; gap:16px; justify-content:flex-end; align-items:center; padding-block:16px; color:var(--muted) }

.section {
  margin: 2em 0;
}
.section.section-content-image {
}
.section.section-content-image .image {
  display: block;
  width: 300px;
  margin: 0 auto;
}

.hero h1 span { font-weight: lighter;}
.hero h1 span .brand-1 { font-weight: bolder;}

/* Desktop breakpoint */
@media (min-width: 1100px){
  .nav-toggle{ display:none }
  .offcanvas{ display:none !important }
  .nav-desktop{ display:flex; align-items:center; gap:2em; }
  .spacer{ flex:1 }
  .cards{ grid-template-columns: 1fr 1fr; align-items:stretch; }
  .section.section-content-image {
  display: grid;
    grid-template-columns: 1fr min-content;
  }
  .section.section-content-image.content-right {
    grid-template-columns: min-content 1fr;
  }
}

/* Tablet & Mobile: hide desktop nav; burger shows */
@media (max-width: 1100px){
  .nav-desktop{ display:none }
}

/* Focus ring utility for links */
a:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:10px }

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