/* ---------- Basis ---------- */
:root{
  --bg:#eef6fb;
  --ink:#26241f;
  --ink-dim:#6b675f;
  --card:#ffffff;
  --line:#dfe9f2;
  --accent:#c9922e;
  --accent-2:#8b6bd6;
  --shadow:0 12px 30px rgba(38,36,31,.08);
  --maxw:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}

/* ---------- Animierter Hintergrund: hellblau-weiße Farbflächen ---------- */
.bg-scene{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:linear-gradient(180deg, #dcedfa 0%, #eef7fd 55%, #ffffff 100%);
  --bubble-op:1;
}
@media (max-width: 880px){
  .bg-scene{
    background:linear-gradient(180deg, #e5f2fb 0%, #f2f9fe 55%, #ffffff 100%);
    --bubble-op:0.5; /* Bubbles auf Mobile durchsichtiger, stören weniger beim Lesen */
  }
}
/* Bubbles: strömen gleichmäßig aus der Mitte nach außen und wachsen dabei */
.bubble{
  position:absolute;
  left:50%; top:50%;
  width:var(--size); height:var(--size);
  margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(139,193,250,.8) 55%, rgba(139,193,250,0) 100%);
  opacity:0;
  animation-name:radiate;
  animation-timing-function:ease-out;
  animation-iteration-count:infinite;
  will-change:transform, opacity;
}
@keyframes radiate{
  0%{ transform:translate(0,0) scale(.15); opacity:0; }
  12%{ opacity:calc(.85 * var(--bubble-op, 1)); }
  70%{ opacity:calc(.55 * var(--bubble-op, 1)); }
  100%{ transform:translate(var(--tx), var(--ty)) scale(1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .bubble{ display:none; }
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ line-height:1.2; margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; color:var(--ink-dim); }

/* ---------- Intro ---------- */
.hub-intro{
  max-width:760px; margin:0 auto;
  padding:min(9vw,90px) 24px 30px;
  text-align:center;
}
.tribal-line{
  width:min(260px, 60%);
  height:32px;
  margin:0 auto 18px;
  display:block;
}
.tribal-line path{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.5;
  stroke-linecap:round;
}
.hub-intro h1{ font-size:clamp(1.9rem,4.4vw,2.9rem); }
.hub-lead{ font-size:1.1rem; margin:0 auto; white-space:nowrap; }
@media (max-width: 640px){
  .hub-lead{ white-space:normal; }
}

/* ---------- Hub ---------- */
.hub{
  max-width:var(--maxw); margin:0 auto;
  padding:20px 24px 60px;
}
.hub-canvas{
  position:relative;
  width:100%;
  max-width:680px;
  aspect-ratio:1/1;
  margin:0 auto;
}
.hub-lines{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.hub-lines path{
  fill:none;
  stroke:var(--line);
  stroke-width:.5;
}
.hub-lines marker path{ fill:var(--line); }

.hub-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:34%;
  text-align:center;
  z-index:2;
  cursor:pointer;
}
.hub-center-photo{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  border:4px solid var(--card);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.hub-center-sig{
  width:70%;
  margin:10px auto 0;
  opacity:.85;
  transition:opacity .25s ease;
}
.hub-center:hover .hub-center-photo,
.hub-center:focus-visible .hub-center-photo{
  transform:scale(1.08);
  box-shadow:0 20px 40px rgba(201,146,46,.35);
}
.hub-center:hover .hub-center-sig,
.hub-center:focus-visible .hub-center-sig{
  opacity:1;
}

.bereich{
  position:absolute;
  transform:translate(-50%,-50%);
  width:19%;
  min-width:76px;
  text-align:center;
  z-index:3;
}
.bereich:hover, .bereich:focus-visible{ z-index:20; }

.bereich-media{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1/1;
}
.bereich-circle{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  padding:14%;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bereich-circle img{ width:100%; object-fit:contain; transition:opacity .2s ease; }
.bereich-circle .icon{ font-size:1.8rem; transition:opacity .2s ease; }
.bereich-circle.is-fertig{
  padding:0;
  background:none;
}
.bereich-circle.is-fertig img{
  width:100%; height:100%;
  object-fit:cover;
}
.bereich-circle.is-weiss{
  padding:6%;
  background:#ffffff;
}

/* Hover/Fokus: Bild blendet aus, ein größerer Kreis mit dem vollen Text blendet ein */
.bereich-overlay{
  position:absolute;
  left:50%; top:50%;
  width:170%; height:170%;
  transform:translate(-50%,-50%) scale(.85);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18%;
  border-radius:50%;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.bereich-overlay-titel{
  font-weight:700;
  font-size:clamp(.85rem, 1.5vw, 1rem);
  color:var(--accent);
  margin-bottom:.35em;
  line-height:1.2;
}
.bereich-overlay-text{
  font-size:clamp(.75rem, 1.15vw, .85rem);
  line-height:1.3;
  color:var(--ink);
}
.bereich:hover .bereich-circle img,
.bereich:focus-visible .bereich-circle img,
.bereich:hover .bereich-circle .icon,
.bereich:focus-visible .bereich-circle .icon{
  opacity:0;
}
.bereich:hover .bereich-overlay,
.bereich:focus-visible .bereich-overlay{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.bereich-label{
  display:block;
  margin-top:8px;
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-dim);
}
.bereich:hover .bereich-circle,
.bereich:focus-visible .bereich-circle{
  border-color:var(--accent);
  box-shadow:0 16px 34px rgba(201,146,46,.25);
}

/* ---------- Panel (nur für Screenreader, Info steht jetzt direkt im Kreis) ---------- */
.hub-panel{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---------- Mobile-Fallback: Foto oben, Kreise als Grid zum Antippen ---------- */
.hub-list{
  display:none;
  max-width:520px; margin:0 auto;
  padding:0 20px 60px;
  text-align:center;
}
.mobile-hub-photo{
  display:inline-block;
  width:150px;
  margin:0 auto 32px;
  cursor:pointer;
}
.mobile-hub-photo img:first-child{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  border:4px solid var(--card);
  box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.mobile-hub-photo:active img:first-child{ transform:scale(.97); }
.mobile-hub-sig{ width:70%; margin:8px auto 0; opacity:.85; }

.mobile-bereich-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}
.mobile-bereich{
  display:flex; flex-direction:column; align-items:center;
  gap:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px 12px 20px;
}
.mobile-bereich .badge{
  width:100%;
  max-width:150px;
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  padding:12%;
  transition:transform .15s ease;
}
.mobile-bereich:active .badge{ transform:scale(.96); }
.mobile-bereich .badge img{ width:100%; object-fit:contain; }
.mobile-bereich .badge .icon{ font-size:2.2rem; }
.mobile-bereich .badge.is-fertig{
  padding:0;
  overflow:hidden;
  background:none;
}
.mobile-bereich .badge.is-fertig img{
  width:100%; height:100%;
  object-fit:cover;
}
.mobile-bereich-label{
  font-size:.78rem;
  font-weight:500;
  color:var(--ink-dim);
  line-height:1.35;
}

@media (max-width: 360px){
  .mobile-bereich-grid{ gap:12px; }
  .mobile-bereich{ padding:14px 10px 16px; }
  .mobile-bereich-label{ font-size:.74rem; }
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:#e9e6de;
  padding:60px 24px 24px;
}
.footer-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.footer-block h3{ color:#fff; font-size:1rem; margin-bottom:14px; }
.footer-block address{ font-style:normal; color:#bdb9ae; margin-bottom:10px; }
.footer-block p{ color:#bdb9ae; margin:0 0 6px; }
.footer-block a{ color:#e9e6de; }
.footer-links{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:6px; }
.footer-form{ display:grid; gap:10px; max-width:280px; }
.footer-form input, .footer-form textarea{
  padding:12px 14px;
  border-radius:7px;
  border:1px solid #3a382f;
  background:#333127;
  color:#fff;
  font:inherit;
  font-size:16px; /* verhindert Auto-Zoom bei Fokus auf iOS Safari */
}
.footer-form textarea{ resize:vertical; min-height:44px; }
.footer-form button{
  justify-self:start;
  padding:12px 24px;
  min-height:44px;
  border-radius:100px;
  border:none;
  background:var(--accent);
  color:#1c1a15;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
}
/* Honeypot-Feld: für Menschen unsichtbar, aber im DOM erreichbar (kein display:none, das erkennen manche Bots) */
.footer-form-hp{
  position:absolute;
  left:-5000px;
  width:1px; height:1px;
  overflow:hidden;
}
.footer-copy{
  text-align:center; color:#8a8678; font-size:.82rem;
  margin:40px 0 0; padding-top:20px; border-top:1px solid #3a382f;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .hub{ display:none; }
  .hub-list{ display:block; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
}