/* ============================================
   Alte helfen Alten – style.css (NEU, sauberer Rand & Schatten entfernt + Feinschliff + Rotation)
   ============================================ */

/* ---------- Variablen ---------- */
:root{
  --hauptfarbe:#0b5c60;
  --hell:#e6f2f3;

  --section-gradient-start:#f9fbfb;
  --section-gradient-end:#e6f2f3;

  --aha-text:#333;
  --aha-radius:12px;
  --aha-gap:18px;

  --cta-yellow:#ffeb3b;

  /* Sicherheitsabstand für Rotation + Schatten */
  --bleed-x: 14px;   /* horizontaler Puffer links/rechts */
  --bleed-y: 10px;   /* vertikaler Puffer oben/unten */
  font-size: 100%;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Arial,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  background:var(--hell);
  color:#333;
  line-height:1.6;
  font-size: 1.1rem;
  }

/* ---------- Header ---------- */
header{
  background:linear-gradient(135deg,#0b5c60,#099499);
  padding:2rem 1rem;
  display:flex;justify-content:center;
}
.header-inner{
  display:flex;align-items:center;gap:2rem;
  max-width:840px;width:100%;
  /* FEINSCHLIFF 1: Header wie Aufzählungs-Karte */
  background:linear-gradient(135deg,#eaf6f1,#d6ede5);
  background-clip:padding-box;
  padding:2rem;border-radius:14px;

  /* Weißer dünner Ring + feiner dunkler Außenring */
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(0,0,0,.22);
}
header img{max-width:200px;height:auto;border-radius:8px}
.header-text h1{
  color:var(--hauptfarbe);
  font-size:2rem;font-weight:700;line-height:1.2;
  margin-bottom:.3rem;
}
.subtitle{font-size:1.1rem;font-weight:500;color:#555}
body.home .header-text h1::after{
  content:"";display:block;height:1px;background:rgba(0,0,0,.2);margin-top:.5rem
}

/* ---------- Main / Sections ---------- */
main{
  max-width:900px;margin:2rem auto;padding:1rem 2rem;
  display:flex;flex-direction:column;gap:2rem
}
section{
  position:relative;
  background:linear-gradient(135deg,var(--section-gradient-start),var(--section-gradient-end));
  padding:1.5rem 2rem;border-radius:12px;
  overflow:visible;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 6px 14px rgba(0,0,0,0.10);
}

h2{color:var(--hauptfarbe);margin-bottom:1rem}

/* ------------ Silbentrennung ------------ */
html[lang="de"] p {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: break-word;
  line-height: 1.5;
}

/* =========================================================
   SUPPORT-LIST – Masonry (Columns) | Kein abgeschnittener Rand
   ========================================================= */
.support-list{
  position:relative;
  list-style:none;
  margin:0;
  padding:calc(var(--bleed-y) - 4px) var(--bleed-x) calc(var(--bleed-y) + 8px);
  column-count:2;
  column-gap:calc(var(--aha-gap) + 10px);
  overflow:visible;
}

/* Top-/Bottom-Masken */
.support-list::before,
.support-list::after{
  content:"";
  position:absolute;
  left:var(--bleed-x);right:var(--bleed-x);
  pointer-events:none;z-index:2;
  border-radius:12px;
}
.support-list::before{
  top:0;height:var(--bleed-y);
  background:linear-gradient(to bottom,var(--section-gradient-start),transparent);
}
.support-list::after{
  bottom:0;height:calc(var(--bleed-y) + 4px);
  background:linear-gradient(to top,var(--section-gradient-end),transparent);
}

/* Äußere Karte */
.support-list>li{
  display:block;break-inside:avoid;
  margin:0 0 var(--aha-gap);
  position:relative;
  border-radius:var(--aha-radius);
}

/* Innere Karte */
.support-list>li .card-inner{
  margin:0;
  border-radius:var(--aha-radius);
  background:linear-gradient(135deg,#eaf6f1,#d6ede5);
  background-clip:padding-box;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(0,0,0,.22);
  padding:16px 14px 12px;
  display:grid;grid-template-columns:auto 1fr;
  align-items:start;column-gap:10px;
  text-align:left;line-height:1.45;color:var(--aha-text);
  transform-origin:center top;
  /* Änderung: Rotation etwas stärker multiplizieren */
  transform:
    translateY(var(--ty,0))
    rotate(calc(var(--rot,0deg) * 1.3))
    scale(var(--sc,1));
  will-change:transform;
}

/* Pastellvarianten */
.support-list>li:nth-child(4n)   .card-inner{background:linear-gradient(135deg,#e8f5f0,#cfeae0)}
.support-list>li:nth-child(4n+1) .card-inner{background:linear-gradient(135deg,#f0f8f3,#dbefe5)}
.support-list>li:nth-child(4n+2) .card-inner{background:linear-gradient(135deg,#e6f7f2,#cfeee6)}
.support-list>li:nth-child(4n+3) .card-inner{background:linear-gradient(135deg,#edf9f4,#d7efe6)}

/* Icon-Badge */
.support-list .icon{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:12px;
  background:#f3f4f6;outline:2px solid #e5e7eb;
  font-size:22px;line-height:1;
}

/* Titel */
.card-title{
  margin:0 0 .5rem 0;font-weight:700;color:var(--hauptfarbe);
  padding-bottom:.35rem;position:relative;
}
.card-title::after{
  content:"";display:block;height:1px;margin-top:.4rem;background:rgba(0,0,0,.12);
}

/* Fallback ohne JS */
.support-list.no-js>li .card-inner{transform:translateY(2px)}

/* Mobil */
@media (max-width:540px){
  :root{ --bleed-x: 10px; }
  .support-list{column-count:1;column-gap:var(--aha-gap)}
  body {
    font-size: 1.1rem;    /* leicht vergrößert */
  }
}

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(135deg,#0b5c60,#099499);
  color:#fff;padding:1.5rem;text-align:center;border-radius:12px;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px rgba(0,0,0,0.22),
    0 8px 18px rgba(0,0,0,.12);
  font-size:1.2rem;
}
.cta h2,.cta strong{
  color:var(--cta-yellow);
}
.cta .email-link{color:var(--cta-yellow);text-decoration:none;font-weight:bold}
.cta .email-link:hover{text-decoration:underline}

/* ---------- Footer ---------- */
footer{
  background:linear-gradient(135deg,#0a4c51,#0b5c60);
  color:#fff;text-align:center;padding:1rem;margin-top:2rem;border-top:4px solid #099499
}
a.custom-link{color:#fff;text-decoration:none}
a.custom-link:hover{color:var(--cta-yellow)}

/* ---------- Responsive Header ---------- */
@media (max-width:768px){
  .header-inner{flex-direction:column;text-align:center}
  header img{max-width:180px;margin-bottom:1rem}
  .header-text h1{font-size:1.6rem}
  .subtitle{font-size:.9rem}
}

/* ---------- Dark Mode ---------- */
@media (prefers-color-scheme:dark){
  .card-title::after{background:rgba(255,255,255,.18)}
  .support-list>li .card-inner{
    color:#e9f1ef;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.9),
      0 0 0 3px rgba(255,255,255,0.22);
  }
  .support-list>li:nth-child(4n)   .card-inner{background:linear-gradient(135deg,#143a3c,#0f2f31)}
  .support-list>li:nth-child(4n+1) .card-inner{background:linear-gradient(135deg,#133637,#0e2b2d)}
  .support-list>li:nth-child(4n+2) .card-inner{background:linear-gradient(135deg,#153f3f,#103235)}
  .support-list>li:nth-child(4n+3) .card-inner{background:linear-gradient(135deg,#123434,#0e2a2b)}
}



/* ---------- Impressum Box ---------- */
.impressum-box{
  max-width:840px;
  margin:2rem auto;
  padding:2rem;
  background:#fdfdfd;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.05)
}
.impressum-box p{margin-bottom:1rem;line-height:1.6}
.impressum-box strong{color:var(--hauptfarbe)}

/* === Fix: Geisterschatten oben rechts (Masken unter Karten legen) === */
.support-list { position: relative; z-index: 0; }
.support-list > li { position: relative; z-index: 2; }
.support-list > li .card-inner { position: relative; z-index: 3; }
.support-list::before,
.support-list::after{
  z-index: -1 !important;
  pointer-events: none !important;
}