/* RESET / BASIS */
*,*::before,*::after{box-sizing:border-box}
img{display:block;max-width:100%;height:auto}
html,body{height:100%}
main.page{flex:1 1 auto;min-height:0;overflow:auto;-ms-overflow-style:none;scrollbar-width:none}
main.page::-webkit-scrollbar{display:none}
.page .wrap{
  max-width:none;
  margin:0 auto;
  padding:14px 16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  color:#0b1220;
}

/* ROWS */
.row{
  display:grid;
  gap:14px;
  align-items:flex-start;
  min-height:0;
}
.row + .row{margin-top:10px}
.row > *{min-width:0}
.r1{grid-template-columns:1fr}
.r2{grid-template-columns:1fr}
.r3{grid-template-columns:1fr}

/* ab breiter Ansicht: Adresse 20 %, Formular 80 % */
@media (min-width: 1024px){
  .r3{grid-template-columns:0.22fr 0.78fr;}
}

/* KACHEL */
.cell{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:#fff;
  border:2px solid #0b0f14;
  border-radius:12px;
  padding:14px;
  color:#0b1220;
}
.cell>.content{flex:1 1 auto;min-height:0}
.cell .h{
  margin:0 0 .25em;
  font-weight:800;
  font-size:clamp(22px,3.2vmin,30px);
  line-height:1.15;
  text-align:left;
}
.cell .content p{
  margin:.30em 0;
  font:400 clamp(14px,1.8vmin,18px)/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
}

/* LINKS & BUTTONS */
.link{
  display:inline-block;
  margin-top:.30em;
  font-weight:700;
  color:#0b1220;
  text-decoration:none;
  border-bottom:2px solid currentColor;
  line-height:1.2;
}
.link:hover{opacity:.85}
.btn{
  display:inline-block;
  padding:.6em 1.1em;
  border:2px solid #0b0f14;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  background:#0b0f14;
  color:#fff;
  cursor:pointer;
}
.btn:hover{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}

/* A/B ausblenden */
.cell.a,.cell.b{display:none}

/* C – Adresse */
.cell.c .content p{margin:.35em 0}

/* Bild unten links */
.addr-image{
  margin-top:18px;
}
.addr-image img{
  max-width:100%;
  border-radius:8px;
}

/* D – Formular */
.cell.d .notice{
  border:2px solid #0b0f14;
  border-radius:10px;
  padding:.6em .8em;
  margin:.2em 0 .8em;
}
.cell.d .notice.ok{border-color:#1f8b4c}
.cell.d .notice.err{border-color:#b02a2a}

.cell.d form.contact{
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
}

/* Honeypot */
.cell.d .contact .hp{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Oberer Teil als Grid */
.cell.d .contact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 16px;
}
.cell.d .contact-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:600;
  font-size:14px;
}
.cell.d .contact-grid input,
.cell.d .contact-grid textarea{
  border:1px solid #0b0f14;
  border-radius:8px;
  padding:.5em .7em;
  font:inherit;
  background:#f8f8f8;
}
.cell.d .contact-grid textarea{
  resize:vertical;
}
.cell.d .contact-grid label.full{
  grid-column:1 / -1;
}
.cell.d .contact-grid label.invalid input,
.cell.d .contact-grid label.invalid textarea{
  border-color:#b02a2a;
}

/* Unterer Teil: 3 Spalten (Opt-in | Kompass | Button) */
.contact-bottom{
  display:grid;
  grid-template-columns:2fr 1fr auto;
  align-items:center;
  gap:16px;
  margin-top:4px;
}

/* Spalte 1: Datenschutz links */
.contact-bottom .privacy{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-weight:600;
  font-size:14px;
}
.contact-bottom .privacy input{
  margin-top:.25em;
}
.contact-bottom .privacy.invalid span{
  text-decoration:underline;
  text-decoration-color:#b02a2a;
}

/* Spalte 2: Kompass */
.captcha-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.captcha-label{
  font-weight:600;
  font-size:13px;
}
.captcha-col.invalid .captcha-label{
  text-decoration:underline;
  text-decoration-color:#b02a2a;
}

/* Spalte 3: Button rechts */
.actions-col{
  display:flex;
  justify-content:flex-end;
}

/* Kompass */
.cell.d .compass.pretty{
  --size: 140px;
  --ring:#0b0f14;
  --bg:#fff;
  position:relative;
  width:var(--size);
  aspect-ratio:1/1;
}
.cell.d .compass.pretty .rose{
  position:absolute;
  inset:0;
  background:
    center/contain no-repeat url('compass.svg'),
    radial-gradient(circle at 50% 50%, transparent 58%, var(--ring) 58% 60%, transparent 60%),
    conic-gradient(from -22.5deg,
      rgba(0,0,0,.06) 0 12.5%, transparent 0 25%,
      rgba(0,0,0,.06) 0 37.5%, transparent 0 50%,
      rgba(0,0,0,.06) 0 62.5%, transparent 0 75%,
      rgba(0,0,0,.06) 0 87.5%, transparent 0 100%),
    var(--bg);
  border:2px solid var(--ring);
  border-radius:50%;
}
.cell.d .compass.pretty .sector{
  position:absolute;
  inset:0;
  z-index:1;
  border:0;
  background:transparent;
  cursor:pointer;
  outline:none;
}
.cell.d .compass.pretty .sector:focus-visible{
  box-shadow:0 0 0 3px rgba(11,15,20,.35) inset;
  border-radius:12px;
}
.cell.d .compass.pretty .sector:hover{ background:rgba(15,163,107,.12) }
.cell.d .compass.pretty .sector.active{ background:rgba(15,163,107,.20) }

.cell.d .compass.pretty .highlight{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#0fa36b;
  box-shadow:0 0 0 3px rgba(15,163,107,.25);
  transform:translate(-50%,-50%);
  display:none;
  z-index:2;
}
.cell.d .compass.pretty .highlight.on{
  display:block;
  left:var(--x);
  top:var(--y);
}

/* 8 Sektoren */
.cell.d .compass.pretty .sector.n  { clip-path: polygon(50% 50%, 26% 4%, 74% 4%); }
.cell.d .compass.pretty .sector.ne { clip-path: polygon(50% 50%, 74% 4%, 96% 26%); }
.cell.d .compass.pretty .sector.e  { clip-path: polygon(50% 50%, 96% 26%, 96% 74%); }
.cell.d .compass.pretty .sector.se { clip-path: polygon(50% 50%, 96% 74%, 74% 96%); }
.cell.d .compass.pretty .sector.s  { clip-path: polygon(50% 50%, 74% 96%, 26% 96%); }
.cell.d .compass.pretty .sector.sw { clip-path: polygon(50% 50%, 26% 96%, 4% 74%); }
.cell.d .compass.pretty .sector.w  { clip-path: polygon(50% 50%, 4% 74%, 4% 26%); }
.cell.d .compass.pretty .sector.nw { clip-path: polygon(50% 50%, 4% 26%, 26% 4%); }

/* Responsive: alles untereinander */
@media (max-width: 900px){
  .cell.d .contact-grid{
    grid-template-columns:1fr;
  }
  .contact-bottom{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
  .actions-col{
    justify-content:flex-start;
  }
  .cell.d .compass.pretty{--size:170px;}
}