/* Keep Elbit Out — shared stylesheet
   Black / white / red · no rounded corners · no JS */

:root {
  --black: #000000;
  --white: #ffffff;
  --red: #c00000;
  --red-dark: #900000;
  --grey: #1a1a1a;
  --grey-light: #e6e6e6;
  --maxw: 900px;
  --mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* "paper + ink" surfaces — these invert in dark mode, unlike the
     literal black bars (header/nav/footer/event-date) and red accents */
  --surface: var(--white);
  --ink: var(--black);
  --surface-alt: var(--grey-light);
  --muted: var(--grey);

  /* Spendenaufruf: poster palette. --spenden-green/--spenden-green-hover/
     --spenden-yellow are static self-contained color pairs (e.g. black-on-
     green) that don't depend on page background. --spenden-surface/
     --spenden-ink/--spenden-accent flip with color scheme instead, same
     pattern as --surface/--ink above. */
  --spenden-surface: #F2E9B8;
  --spenden-ink: var(--black);
  --spenden-accent: #2E6E34;
  --spenden-green: #5CAD5E;
  --spenden-green-hover: #2E6E34;
  --spenden-yellow: #F2C744;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
  /* enforce: never any rounded corners */
}

/* Every <details><summary> on the site (past-events, reason-group) hides
   the native disclosure marker and draws its own via ::after instead. */
summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: "";
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--black);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

/* Shared reset for inline icon/graphic svgs (spenden stars, map pin,
   reason-list icons) — fill their container fully. */
.spenden-star svg,
.map-pin svg,
.reason-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--white);
  background: var(--red);
  text-decoration: none;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.inline-img {
  float: left;
  width: 35%;
  margin: 0 0.5em 0.5em 0;
}

.inline-img img {
  width: 100%;
  height: auto;
}

.inline-img figcaption {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--black);
  color: var(--white);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  flex-wrap: wrap;
}

.site-logo {
  height: 72px;
  width: auto;
}

.site-title {
  margin: 0;
  line-height: 1.1;
}

.site-title .title-main {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
}

.site-title .title-sub {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- Nav ---------- */
.site-nav {
  background: var(--red);
}

.nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.site-nav a {
  display: block;
  padding: 14px 22px;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a.active-tab {
  background: var(--black);
  color: var(--white);
}

/* Action items (Mail an die Stadt, Spenden) are pulled out of the tab list
   and styled as buttons so they read as calls to action, not more tabs. */
.nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 10px 0;
}

.site-nav .nav-action {
  padding: 8px 16px;
  border: 2px solid var(--white);
}

.site-nav .nav-action:hover,
.site-nav .nav-action:focus {
  background: var(--white);
  color: var(--red);
}

.site-nav .nav-action.active-tab {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* Mobile menu collapse: same CSS-only hidden-checkbox + label pattern as
   the language switch above (see .lang-radio), so no JS is needed. The
   checkbox/label are no-ops on desktop (.nav-toggle stays display:none
   until the mobile breakpoint below), so desktop keeps today's layout. */
.nav-toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle {
  display: none;
}

/* ---------- Sections ---------- */
main {
  background: var(--surface);
  padding: 40px 0 20px;
}

section {
  padding: 30px 0;
  border-bottom: 2px solid var(--ink);
}

section:last-of-type {
  border-bottom: none;
}

h1,
h2,
h3 {
  line-height: 1.15;
  font-weight: 800;
}

h1 {
  font-size: 2.2rem;
  margin: 0 0 0.5em;
}

section h2 {
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.7em;
  padding-left: 14px;
  border-left: 10px solid var(--red);
}

h3 {
  font-size: 1.25rem;
  margin: 1.4em 0 0.4em;
}

.lead {
  font-size: 1.2rem;
  font-weight: 600;
}

.muted {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 24px;
  margin: 6px 10px 6px 0;
  border: 3px solid var(--red);
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.btn.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}

.btn.btn-outline:hover,
.btn.btn-outline:focus {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* Visually-only text for screen readers, e.g. to announce that a link
   leaves the site without cluttering the visible button label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Small "leaves this site" indicator appended to links/buttons that open
   another website or application. Uses currentColor via mask so it matches
   whatever text color the surrounding button/link has. */
.external-link::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.4em;
  vertical-align: 0.02em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3Cpath d='M5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ---------- Spendenaufruf (full-bleed poster) ---------- */
.spenden-section {
  background: var(--spenden-surface);
  border-bottom: none;
  /* cancel the generic `section` divider — the color
    change from the page surface is the section break, no rule line needed */
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.spenden-section .spenden-band {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.spenden-section h2 {
  border-left: none;
  padding-left: 0;
}

.spenden-heading-wrap {
  overflow: hidden; /* contain the float so it doesn't bleed past the intro
    paragraph into the closing line / button below */
  width: fit-content;
  max-width: 100%;
  background: var(--spenden-green);
  padding: 20px 24px;
  margin-bottom: 1em;
}

.spenden-heading-wrap h2,
.spenden-heading-wrap p {
  color: var(--black); /* dark mode below swaps this to a darker green
    background with white text for readability */
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #121212;
    --ink: #f2f2f2;
    --surface-alt: #262626;
    --muted: #bdbdbd;

    --spenden-surface: #2B2712;
    --spenden-ink: var(--white);
    --spenden-accent: #5CAD5E;
  }

  /* logo is solid black on transparent — invert to white so it stays
     visible against the dark poster surface */
  .spenden-logo {
    filter: invert(1);
  }

  /* the light-mode --spenden-green is too bright for white text, so swap
     in the darker hover shade here instead — same pairing already used by
     .btn.spenden-btn:hover, just applied at rest in dark mode. This block
     must come after the light-mode rule above: with equal specificity, a
     later unconditional rule beats an earlier media-queried one. */
  .spenden-heading-wrap {
    background: var(--spenden-green-hover);
  }

  .spenden-heading-wrap h2,
  .spenden-heading-wrap p {
    color: var(--white);
  }
}

.spenden-logo {
  float: left;
  width: 110px;
  height: auto;
  margin: 0 24px 12px 0;
}

.spenden-section p {
  color: var(--spenden-ink);
}

.spenden-section .spenden-closing {
  color: var(--spenden-accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1em;
}

.btn.spenden-btn {
  background: var(--spenden-green);
  border-color: var(--spenden-ink);
  color: var(--black);
}

.btn.spenden-btn:hover,
.btn.spenden-btn:focus {
  background: var(--spenden-green-hover);
  border-color: var(--spenden-green-hover);
  color: var(--white);
}

.spenden-star {
  position: absolute;
  color: var(--spenden-yellow);
  pointer-events: none;
}

.spenden-star--1 {
  top: 10%;
  left: 4%;
  width: 38px;
  height: 38px;
  transform: rotate(-10deg);
}

.spenden-star--2 {
  top: 12%;
  right: 6%;
  width: 30px;
  height: 30px;
  transform: rotate(15deg);
}

.spenden-star--3 {
  bottom: 12%;
  left: 8%;
  width: 26px;
  height: 26px;
  transform: rotate(6deg);
}

.spenden-star--4 {
  bottom: 10%;
  right: 10%;
  width: 34px;
  height: 34px;
  transform: rotate(-20deg);
}

/* ---------- Supporters list ---------- */
.supporters {
  columns: 2;
  column-gap: 40px;
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
  font-size: 0.95rem;
}

.supporters li {
  padding: 4px 0 4px 16px;
  border-left: 4px solid var(--red);
  margin-bottom: 6px;
  break-inside: avoid;
}

/* ---------- Events ---------- */
.event {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 3px solid var(--ink);
  margin-bottom: 18px;
}

.event-date {
  background: var(--black);
  color: var(--white);
  padding: 16px 20px;
  min-width: 160px;
  font-weight: 700;
}

.event-date .day {
  display: block;
  font-size: 1.6rem;
  color: var(--red);
}

.event-body {
  padding: 16px 20px;
  flex: 1 1 260px;
}

.event-body h3 {
  margin: 0 0 0.3em;
}

.event-body .meta {
  font-size: 0.95rem;
  color: var(--muted);
}

/* ---------- Past events disclosure ---------- */
.past-events {
  margin-top: 18px;
}

.past-events summary {
  cursor: pointer;
  list-style: none;
}

.past-events summary::after {
  content: " \25BE";
}

.past-events[open] summary::after {
  content: " \25B4";
}

.past-events .event {
  margin-top: 18px;
}

/* ---------- Map embed ---------- */
.map-embed {
  margin: 1.5em 0;
}

.map-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  max-width: 1024px;
  border: 1px solid var(--ink);
  overflow: hidden;
}

.map-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.map-pin {
  position: absolute;
  left: 53.5083%;
  top: 46.8173%;
  transform: translate(-50%, -100%);
  width: 28px;
  height: 42px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.map-pin .pin-body {
  fill: var(--red);
}

.map-pin .pin-center {
  fill: var(--white);
}

.map-embed figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Language switch (ueber-uns) ---------- */
/* CSS-only radio tabs: hidden radios + label tabs, :checked toggles the
   matching panel. Adding a language needs 4 pieces: a radio, a label, a
   panel, and one line in each of the two rule lists below (CSS can't pair
   an arbitrary radio to its panel/tab generically). */
.lang-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lang-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0 0 1.2em;
}

.lang-tab {
  display: inline-block;
  padding: 8px 16px;
  border: 3px solid var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  color: var(--ink);
  background: var(--surface);
}

.lang-tab:hover {
  background: var(--surface-alt);
}

.lang-panel {
  display: none;
}

#lang-de:checked~#panel-de,
#lang-en:checked~#panel-en,
#lang-ar:checked~#panel-ar {
  display: block;
}

#lang-de:checked~.lang-tabs label[for="lang-de"],
#lang-en:checked~.lang-tabs label[for="lang-en"],
#lang-ar:checked~.lang-tabs label[for="lang-ar"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* RTL panels: mirror the mascot figure's float so it sits on the same
   side relative to the text direction. Scoped to the same breakpoint as
   .inline-img's float so it doesn't fight the mobile float:none reset
   (see @media (max-width: 640px) below). */
@media (min-width: 641px) {
  .lang-panel[dir="rtl"] .inline-img {
    float: right;
    margin: 0 0 0.5em 0.5em;
  }
}

/* ---------- Contact ---------- */
.contact-links,
.reason-list {
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
}

.contact-links li {
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.contact-links .label {
  display: inline-block;
  min-width: 130px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.qr-thumb {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  line-height: 0;
}

.qr-thumb img {
  display: block;
  background: var(--white);
  border: 1px solid var(--ink);
  padding: 3px;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.qr-thumb:hover img {
  opacity: 1;
}

/* ---------- Mail tool (contact-tool.html) ---------- */
.reason-list > li {
  border-bottom: 1px solid var(--ink);
}

.reason-list > li:last-child {
  border-bottom: none;
}

.reason-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}

.reason-list input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--red);
}

.reason-group summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.reason-group summary:hover {
  background: var(--surface-alt);
}

.reason-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ink);
}

.reason-label {
  flex: 1;
}

.reason-group summary::after {
  content: "\25BE";
  flex-shrink: 0;
  color: var(--ink);
  transition: color 0.15s ease;
}

.reason-group[open] summary::after {
  content: "\25B4";
}

.reason-group summary:hover::after,
.reason-group[open] summary::after {
  color: var(--red);
}

.subreason-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 14px 34px;
}

.subreason-list li {
  margin-bottom: 8px;
}

.subreason-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
}

.subreason-list input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
}

.copy-box {
  border: 2px solid var(--ink);
  background: var(--surface-alt);
  padding: 16px 20px;
  margin: 1em 0;
}

.copy-field {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
}

.copy-field + .copy-field {
  margin-top: 12px;
}

.copy-field .label {
  flex-shrink: 0;
  min-width: 100px;
  padding-top: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

.copy-field .value {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 12px;
  font-family: var(--mono);
  font-weight: 600;
  word-break: break-word;
}

.copy-field button {
  flex-shrink: 0;
  margin: 0;
}

.email-preview {
  margin: 1em 0;
  padding: 16px 20px;
  border: 2px solid var(--ink);
  background: var(--surface-alt);
  font-family: var(--mono);
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 480px;
  overflow-y: auto;
}

/* ---------- Blockquote (flyer) ---------- */
blockquote {
  margin: 1.2em 0;
  padding: 14px 20px;
  border-left: 10px solid var(--red);
  background: var(--surface-alt);
  font-weight: 600;
  font-style: normal;
}

.article-body p {
  margin: 0 0 1.1em;
}

/* ---------- Post image (blog Markdown) ---------- */
.post-image {
  margin: 1.5em 0;
}

.post-image img {
  display: block;
  width: 100%;
  height: auto;
}

.post-image figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Blog list ---------- */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.rss-link {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.blog-list {
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
}

.blog-list li {
  padding: 10px 0 10px 16px;
  border-left: 4px solid var(--red);
  margin-bottom: 14px;
}

.blog-list li p:first-child {
  margin: 0 0 4px;
}

.blog-list li p:last-child {
  margin: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black);
  color: var(--white);
  border-top: 6px solid var(--red);
  padding: 30px 0;
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--white);
}

.site-footer a:hover,
.site-footer a:focus {
  background: var(--red);
  color: var(--white);
}

.site-footer p {
  margin: 0 0 0.6em;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

  .inline-img {
    float: none;
    width: 75%;
    margin: 0 auto 1em;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-title .title-main {
    font-size: 1.5rem;
  }

  .nav-toggle {
    display: block;
    padding: 14px 22px;
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
    cursor: pointer;
    position: relative;
  }

  .nav-toggle::after {
    content: "▾";
    position: absolute;
    right: 22px;
    transition: transform 0.15s ease;
  }

  .nav-toggle-checkbox:checked ~ .nav-toggle::after {
    transform: rotate(180deg);
  }

  .nav-inner {
    display: none;
  }

  .nav-toggle-checkbox:checked ~ .nav-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links {
    flex-direction: column;
  }

  .nav-links a {
    border-bottom: 1px solid var(--red-dark);
  }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 10px 0;
  }

  .site-nav .nav-action {
    border: none;
    border-bottom: 1px solid var(--red-dark);
    padding: 14px 22px;
  }

  .nav-actions .nav-action:last-child {
    border-bottom: none;
  }

  .supporters {
    columns: 1;
  }

  .event {
    flex-direction: column;
  }

  .event-date {
    min-width: 0;
  }

  .copy-field {
    flex-direction: column;
    align-items: stretch;
  }

  .copy-field .label,
  .copy-field .value {
    padding-top: 0;
  }

  .copy-field button {
    align-self: flex-start;
  }

  .spenden-section .spenden-band {
    padding: 26px 16px;
  }

  .spenden-logo {
    float: none;
    width: 140px;
    margin: 0 auto 16px;
  }

  .spenden-star--2,
  .spenden-star--3 {
    display: none;
  }

  .spenden-star--1,
  .spenden-star--4 {
    width: 24px;
    height: 24px;
  }
}