/* ==========================================================================
   ATL Luebeck - Design-Layer
   Alle Illustrationen sind Inline-SVG (Data-URI): skalieren scharf, kein Ladevorgang.
   ========================================================================== */

:root {
  --atl-rot: #c8102e;
  --atl-rot-hell: #e8556b;
  --atl-tief: #0b1114;
  --atl-wasser: #0e6e6e;
  --atl-papier: #fbf9f6;
  --atl-sand: #f1ebe1;
  --atl-sand-dunkel: #e4ddd1;
  --atl-grau: #5a6066;
}

/* --- Rhythmus und Typografie ---------------------------------------------- */

.entry-content h2[style*="1.4rem"] { padding-top: 0; }
.entry-content h2[style*="1.4rem"]::before { display: none; }

.entry-content h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  position: relative;
  padding-top: 1.1rem;
}
.atl-artikel h2 { padding-top: 0; }
.atl-artikel h2::before { display: none; }

.entry-content h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3rem; height: 4px;
  border-radius: 2px;
  background: var(--atl-rot);
}
.atl-cta h2::before { background: rgba(255,255,255,.65); }
.entry-content h3 { letter-spacing: -0.01em; }
.entry-content p { text-wrap: pretty; }

/* --- Hero ------------------------------------------------------------------ */

.atl-hero {
  position: relative;
  overflow: hidden;
  display: block;
  padding-top: clamp(4.5rem, 9vw, 7.5rem) !important;
  padding-bottom: clamp(6.5rem, 13vw, 11rem) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M28 30 C28 14 48 6 70 6 C94 6 112 16 116 30 C112 44 94 54 70 54 C48 54 28 46 28 30 Z'/%3E%3Cpath d='M28 30 L4 10 L11 30 L4 50 Z'/%3E%3Cpath d='M66 8 C72 -1 84 1 88 9 C81 6 73 6 66 8 Z'/%3E%3Cpath d='M66 52 C72 61 84 59 88 51 C81 54 73 54 66 52 Z'/%3E%3C/g%3E%3Ccircle cx='100' cy='24' r='3.4' fill='%230b1114' fill-opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M92 30 C92 14 72 6 50 6 C26 6 8 16 4 30 C8 44 26 54 50 54 C72 54 92 46 92 30 Z'/%3E%3Cpath d='M92 30 L116 10 L109 30 L116 50 Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 15% -10%, rgba(14,110,110,.55) 0%, rgba(14,110,110,0) 55%),
    linear-gradient(170deg, #14323a 0%, var(--atl-tief) 68%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: right 4% top 14%, left 6% bottom 20%, center, center;
  background-size: clamp(7rem, 14vw, 14rem) auto, clamp(4rem, 7vw, 7rem) auto, cover, cover;
}

.atl-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background: repeating-linear-gradient(102deg, rgba(255,255,255,.05) 0 2.5rem, rgba(255,255,255,0) 2.5rem 7rem);
  transform: rotate(-4deg);
  pointer-events: none;
  z-index: 0;
}

.atl-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(44px, 6vw, 88px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C 160 92 300 22 460 42 C 620 62 760 96 900 72 C 1020 52 1120 24 1200 38 L1200 90 L0 90 Z' fill='%23fbf9f6'/%3E%3C/svg%3E") repeat-x bottom / 1200px 100%;
  pointer-events: none;
  z-index: 1;
}

.atl-hero > * { position: relative; z-index: 2; }


/* --- Seitenkopf der Unterseiten -------------------------------------------- */

.atl-seitenkopf {
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Cpath d='M28 30 C28 14 48 6 70 6 C94 6 112 16 116 30 C112 44 94 54 70 54 C48 54 28 46 28 30 Z'/%3E%3Cpath d='M28 30 L4 10 L11 30 L4 50 Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 130% at 12% -20%, rgba(14,110,110,.5) 0%, rgba(14,110,110,0) 60%),
    linear-gradient(165deg, #14323a 0%, var(--atl-tief) 72%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right 5% center, center, center;
  background-size: clamp(6rem, 12vw, 11rem) auto, cover, cover;
  padding-bottom: clamp(4.5rem, 8vw, 6rem) !important;
}
.atl-seitenkopf::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background: repeating-linear-gradient(102deg, rgba(255,255,255,.045) 0 2.5rem, rgba(255,255,255,0) 2.5rem 7rem);
  transform: rotate(-4deg);
  pointer-events: none;
}
.atl-seitenkopf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(34px, 4.5vw, 62px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C 160 92 300 22 460 42 C 620 62 760 96 900 72 C 1020 52 1120 24 1200 38 L1200 90 L0 90 Z' fill='%23fbf9f6'/%3E%3C/svg%3E") repeat-x bottom / 1200px 100%;
  pointer-events: none;
}
.atl-seitenkopf > * { position: relative; z-index: 2; }
.atl-seitenkopf h1 { max-width: 20ch; }

body:not(.home) main { margin-top: 0 !important; }
body:not(.home) main > .wp-block-group { padding-top: 0 !important; }

@media (max-width: 680px) {
  .atl-seitenkopf {
    background-image:
      radial-gradient(120% 130% at 12% -20%, rgba(14,110,110,.45) 0%, rgba(14,110,110,0) 60%),
      linear-gradient(165deg, #14323a 0%, var(--atl-tief) 72%);
    background-position: center, center;
    background-size: cover, cover;
  }
}

/* --- Faktenbox ------------------------------------------------------------- */

.atl-fakten {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--atl-sand-dunkel);
  box-shadow: 0 1px 2px rgba(11,17,20,.04), 0 8px 28px -18px rgba(11,17,20,.35);
}
.atl-fakten::after {
  content: "";
  position: absolute;
  right: -1.5rem; bottom: -2rem;
  width: 11rem; height: 9rem;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg fill='none' stroke='%230e6e6e' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M30 160 C20 120 40 100 32 60 C28 40 34 26 40 16'/%3E%3Cpath d='M70 160 C64 130 80 112 74 78 C70 56 78 40 84 30'/%3E%3Cpath d='M110 160 C104 128 120 108 114 74'/%3E%3Cpath d='M150 160 C142 126 160 106 152 70 C148 52 156 38 162 28'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right / contain;
  pointer-events: none;
}
.atl-fakten ul { position: relative; z-index: 1; }
.atl-fakten li { padding-block: .15rem; }

/* --- Karten ---------------------------------------------------------------- */

.atl-karten .wp-block-column {
  background: #fff;
  border: 1px solid var(--atl-sand-dunkel) !important;
  box-shadow: 0 1px 2px rgba(11,17,20,.04), 0 12px 32px -22px rgba(11,17,20,.4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.atl-karten .wp-block-column:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(11,17,20,.05), 0 18px 40px -22px rgba(11,17,20,.45);
}
.atl-karten .wp-block-column::before {
  content: "";
  display: block;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: .9rem;
  border-radius: 10px;
  background-color: var(--atl-sand);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
}
.atl-karten .wp-block-column:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23c8102e'%3E%3Cpath d='M28 30 C28 14 48 6 70 6 C94 6 112 16 116 30 C112 44 94 54 70 54 C48 54 28 46 28 30 Z'/%3E%3Cpath d='M28 30 L4 10 L11 30 L4 50 Z'/%3E%3C/g%3E%3Ccircle cx='100' cy='24' r='3.6' fill='%23f1ebe1'/%3E%3C/svg%3E");
}
.atl-karten .wp-block-column:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg fill='none' stroke='%230e6e6e' stroke-width='14' stroke-linecap='round'%3E%3Cpath d='M60 155 C48 115 72 96 62 52'/%3E%3Cpath d='M110 155 C100 120 124 98 116 58'/%3E%3Cpath d='M158 155 C150 124 168 106 160 74'/%3E%3C/g%3E%3C/svg%3E");
}
.atl-karten .wp-block-column:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23c8102e' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/g%3E%3C/svg%3E");
}


/* --- Artikeluebersicht ------------------------------------------------------ */

.atl-artikel .wp-block-post-template { gap: 1.25rem; }
.atl-artikel li.wp-block-post {
  background: #fff;
  border: 1px solid var(--atl-sand-dunkel);
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: 0 1px 2px rgba(11,17,20,.03);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  display: flex;
  flex-direction: column;
}
.atl-artikel li.wp-block-post:hover {
  transform: translateY(-3px);
  border-color: rgba(200,16,46,.35);
  box-shadow: 0 1px 2px rgba(11,17,20,.04), 0 16px 34px -22px rgba(11,17,20,.45);
}
.atl-artikel .wp-block-post-title { letter-spacing: -.01em; }
.atl-artikel .wp-block-post-title a { color: inherit; text-decoration: none; }
.atl-artikel .wp-block-post-title a:hover { color: var(--atl-rot); }
.atl-artikel .wp-block-post-excerpt { font-size: .95rem; color: #3a3f44; margin-top: auto; }
.atl-artikel .wp-block-post-excerpt__more-link { display: inline-block; margin-top: .6rem; font-weight: 600; }

/* Einzelner Artikel: angenehme Lesebreite und Rhythmus */
.single .entry-content > * { margin-top: 1.1rem; }
.single .entry-content h2 { margin-top: 2.4rem; }
.single .entry-content li { margin-bottom: .5rem; }

/* --- Terminliste ----------------------------------------------------------- */

.atl-termine { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; background: none; border: 0; }

.atl-termin {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--atl-sand-dunkel);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11,17,20,.03);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.atl-termin:hover {
  transform: translateY(-2px);
  border-color: rgba(200,16,46,.35);
  box-shadow: 0 1px 2px rgba(11,17,20,.04), 0 14px 30px -20px rgba(11,17,20,.45);
}

.atl-termin-datum {
  flex: 0 0 4.25rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: .55rem .3rem;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--atl-rot) 0%, #a50d26 100%);
  color: #fff;
  line-height: 1.05;
  box-shadow: 0 6px 14px -8px rgba(200,16,46,.8);
}
.atl-termin-datum strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.atl-termin-datum em { font-style: normal; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.atl-termin-datum i { font-style: normal; font-size: .65rem; opacity: .75; }

.atl-termin-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.atl-termin-text > strong { font-size: 1.1rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.atl-termin-meta { font-size: .875rem; color: var(--atl-grau); }
.atl-termin-info { font-size: .95rem; color: #3a3f44; margin-top: .3rem; }
.atl-leer { color: var(--atl-grau); font-style: italic; }

/* --- CTA-Band mit Wellenkante --------------------------------------------- */

.atl-cta { position: relative; overflow: hidden; }
.atl-cta::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: clamp(40px, 5vw, 70px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 30 C 1040 62 900 8 740 30 C 580 52 420 76 260 54 C 150 39 70 14 0 26 Z' fill='%23fbf9f6'/%3E%3C/svg%3E") repeat-x top / 1200px 100%;
  pointer-events: none;
}
.atl-cta > * { position: relative; z-index: 2; }
.atl-cta .wp-block-group__inner-container { padding-top: 2rem; }

/* --- Footer ---------------------------------------------------------------- */

footer.wp-block-template-part > .wp-block-group { position: relative; overflow: hidden; }
footer.wp-block-template-part a { color: #fff; text-underline-offset: .2em; }
footer.wp-block-template-part a:hover { color: var(--atl-sand); }

/* --- Buttons --------------------------------------------------------------- */

.wp-element-button, .wp-block-button__link {
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* --- Responsiv ------------------------------------------------------------- */

@media (max-width: 900px) {
  .atl-hero { min-height: auto; padding-top: 4rem !important; padding-bottom: 5.5rem !important; }
}

@media (max-width: 680px) {
  .atl-hero {
    background-image:
      radial-gradient(130% 100% at 15% -10%, rgba(14,110,110,.5) 0%, rgba(14,110,110,0) 55%),
      linear-gradient(170deg, #14323a 0%, var(--atl-tief) 68%);
    background-position: center, center;
    background-size: cover, cover;
  }
  .atl-fakten::after { opacity: .3; width: 8rem; height: 6.5rem; }
  .atl-termin { gap: .9rem; padding: .9rem 1rem; align-items: flex-start; }
  .atl-termin-datum { flex-basis: 3.6rem; }
  .atl-termin-datum strong { font-size: 1.35rem; }
  .atl-termin-text > strong { font-size: 1rem; }
  .entry-content h2 { padding-top: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .atl-termin, .atl-karten .wp-block-column, .wp-block-button__link { transition: none; }
  .atl-termin:hover, .atl-karten .wp-block-column:hover, .wp-block-button__link:hover { transform: none; }
}

/* Vereinsverwaltung – bewusst groß und ruhig, wird von Ehrenamtlichen selten benutzt. */

.atl {
  --atl-rot: #c8102e;
  --atl-rand: #d9d9d9;
  max-width: 46rem;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.atl h2 { margin: 0 0 1.25rem; font-size: 1.6rem; }
.atl-klein { font-size: .875rem; color: #666; }
.atl-rechts { text-align: right; }

.atl-kopf {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding-bottom: .75rem; margin-bottom: 2rem;
  border-bottom: 2px solid var(--atl-rot);
}
.atl-kopf nav { display: flex; gap: 1.25rem; }
.atl-kopf nav a { text-decoration: none; font-weight: 600; color: #333; }
.atl-kopf nav a.atl-aktiv { color: var(--atl-rot); border-bottom: 2px solid var(--atl-rot); }

.atl-hinweis {
  padding: .75rem 1rem; margin-bottom: 1.5rem;
  background: #edf7ed; border-left: 4px solid #2e7d32; border-radius: 4px;
}

/* Startkacheln */
.atl-kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.atl-kachel {
  display: block; padding: 1.5rem; text-decoration: none; color: inherit;
  border: 2px solid var(--atl-rot); border-radius: 10px; background: var(--atl-rot);
  transition: transform .12s ease;
}
.atl-kachel strong, .atl-kachel span { color: #fff; display: block; }
.atl-kachel span { font-size: 2rem; line-height: 1; margin-bottom: .5rem; }
.atl-kachel strong { font-size: 1.2rem; }
.atl-kachel em { color: rgba(255,255,255,.85); font-style: normal; font-size: .9rem; }
.atl-kachel:hover { transform: translateY(-2px); }
.atl-kachel-still { background: #fff; border-color: var(--atl-rand); }
.atl-kachel-still strong { color: #222; }
.atl-kachel-still em { color: #666; }

/* Formulare */
.atl-feld { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.25rem; }
.atl-feld label { font-weight: 600; }
.atl-pflicht { color: var(--atl-rot); }
.atl input[type="text"], .atl input[type="date"], .atl input[type="time"],
.atl input[type="password"], .atl textarea {
  width: 100%; padding: .65rem .75rem; font: inherit;
  border: 1px solid var(--atl-rand); border-radius: 6px; background: #fff;
}
.atl input:focus, .atl textarea:focus { outline: 3px solid rgba(200,16,46,.35); border-color: var(--atl-rot); }
.atl-zweispaltig { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.atl-vorschau img { max-width: 120px; height: auto; border-radius: 6px; margin: .25rem 0; }
.atl-status label { font-weight: 400; }

.atl-knopf {
  display: inline-block; padding: .7rem 1.4rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--atl-rot); border: 0; border-radius: 6px;
  cursor: pointer; text-decoration: none;
}
.atl-knopf:hover { background: #a50d26; }
.atl-abbruch { margin-left: .75rem; color: #666; }
.atl-loeschen {
  padding: .4rem .8rem; font: inherit; font-size: .875rem; color: var(--atl-rot);
  background: none; border: 1px solid var(--atl-rand); border-radius: 6px; cursor: pointer;
}
.atl-loeschen:hover { border-color: var(--atl-rot); background: #fdf2f4; }

/* Listen */
.atl-tabelle { width: 100%; border-collapse: collapse; }
.atl-tabelle td { padding: .9rem 0; border-bottom: 1px solid var(--atl-rand); vertical-align: middle; }
.atl-tabelle a { color: inherit; text-decoration: none; }
.atl-tabelle a:hover strong { color: var(--atl-rot); }

/* Login */
.atl-login { max-width: 24rem; }
.atl-login .login-username, .atl-login .login-password { margin-bottom: 1rem; }
.atl-login label { display: block; font-weight: 600; margin-bottom: .35rem; }
.atl-login .login-submit input {
  width: 100%; padding: .7rem 1.4rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--atl-rot); border: 0; border-radius: 6px; cursor: pointer;
}
.atl-login .login-remember { font-size: .9rem; }

@media (max-width: 480px) {
  .atl-zweispaltig { grid-template-columns: 1fr; }
  .atl-kopf { flex-direction: column; }
}

/* Autorenzeile und Kategorie auf Einzelbeitraegen ausblenden - fuer einen Vereinsblog ohne Mehrwert */
.single .wp-block-group.has-small-font-size.wp-block-group-is-layout-flex { display: none; }