/* BLOCH Design – gemeinsames Stylesheet */
:root{
  --paper:#e6e6e6;
  --card:#fbf9ee;
  --card-edge:#e5e0c9;
  --ink:#1a2340;
  --ink-soft:#465074;
  --accent:#2f3b73;
  --hair:#d8d4bf;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Layout-Grundgeruest ---------- */
.stage{
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,5vw,56px);
}
.wrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:clamp(24px,6vw,56px) clamp(20px,5vw,40px);
  flex:1 0 auto;
}

/* ---------- Visitenkarte ---------- */
.card{
  width:100%;
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:4px;
  box-shadow:0 1px 0 #fff inset, 0 18px 50px -24px rgba(26,35,64,.45);
  position:relative;
  overflow:hidden;
}
.card::before,
.card::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),#7883b0 60%,transparent);
  opacity:.9;
}
.card::before{top:0}
.card::after{bottom:0;transform:scaleX(-1)}

/* auf der Startseite ist die Karte schmaler und mittig */
.card--hero{max-width:640px}

.inner{
  position:relative;
  padding:clamp(30px,6vw,54px);
  z-index:1;
}

/* ---------- Marke ---------- */
.logo{
  font-size:clamp(34px,9vw,52px);
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.02;
  color:var(--ink);
}
.logo span{font-weight:300}
.tagline{
  margin-top:8px;
  font-size:clamp(13px,3.4vw,16px);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.rule{
  height:2px;
  width:72px;
  background:var(--accent);
  margin:26px 0 22px;
  border-radius:2px;
}
.motto{
  font-size:clamp(17px,4.4vw,21px);
  font-style:italic;
  font-weight:500;
  color:var(--accent);
  letter-spacing:.01em;
}

/* ---------- Schmetterling (nur Hero) ---------- */
.brand{position:relative;z-index:2;max-width:70%}
.butterfly{
  position:absolute;
  top:50%;
  right:clamp(-30px,-4vw,-10px);
  transform:translateY(-50%);
  width:min(50%,300px);
  height:auto;
  opacity:.9;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
@media(max-width:520px){
  .brand{max-width:100%}
  .butterfly{
    top:auto;
    bottom:-14px;
    right:-30px;
    transform:none;
    width:60%;
    opacity:.22;
  }
}

/* ---------- Buttons ---------- */
.links{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  position:relative;
  z-index:2;
}
.links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:11px 22px;
  border:1px solid var(--accent);
  border-radius:999px;
  color:var(--accent);
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  background:rgba(251,249,238,.7);
  transition:background .15s ease,color .15s ease;
}
.links a:hover,
.links a:focus-visible{
  background:var(--accent);
  color:var(--card);
}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- Zurueck-Link (Unterseiten) ---------- */
.back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent);
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  margin-bottom:24px;
  min-height:44px;
}
.back:hover,.back:focus-visible{text-decoration:underline}

/* ---------- Textseiten (Impressum / AGB) ---------- */
.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.page-title{
  font-size:clamp(24px,6vw,34px);
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:28px;
}
.card h2{
  font-size:clamp(15px,3.8vw,18px);
  font-weight:700;
  color:var(--accent);
  margin:30px 0 8px;
  display:flex;
  gap:10px;
  align-items:baseline;
  scroll-margin-top:16px;
}
.card h2 .num{
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  background:#eceadb;
  border-radius:5px;
  padding:1px 8px;
  font-size:.82em;
  flex-shrink:0;
}
.card h2:first-of-type{margin-top:0}
.card p{
  color:var(--ink-soft);
  font-size:clamp(14px,3.6vw,16px);
  margin-bottom:12px;
}
.card .block{
  color:var(--ink);
  font-size:clamp(15px,3.8vw,17px);
  line-height:1.8;
}
.card a.inline{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.card a.inline:hover,
.card a.inline:focus-visible{border-bottom-color:var(--accent)}
.card > p:last-child,
.card .block:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.foot{
  flex-shrink:0;
  text-align:center;
  font-size:13px;
  color:#7c7a68;
  padding:22px 20px 30px;
}