/* Juden für Deutschland e. V. – Website-Stylesheet (Stand 2026-09)
   Seriös/staatstragend: Navy + Gold. Keine externen Schriften, keine externen Ressourcen.
   Farbkontraste: Text auf Gold = Navy (4,75:1), Gold-Text auf Weiß = dunkles Gold (4,9:1). */
:root{
  --navy:#1f3a5f; --navy-d:#16283f; --navy-l:#2c4f7c;
  --gold:#c9a227; --gold-d:#8a6d12; --gold-hover:#d4ad35;
  --ink:#1a1a1a; --text-2:#3a4757; --muted:#5b6b80;
  --bg:#ffffff; --bg-soft:#f4f6f9; --line:#e1e7ee; --note:#fbf7ea;
  --err:#b3261e; --ok:#1d6b3a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:'Segoe UI',Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.6;background:var(--bg);font-size:1.0625rem;overflow-wrap:break-word}
p,li,td,th,dt,dd,address,legend,label,caption,h1,h2,h3,figcaption,blockquote{overflow-wrap:break-word}
a{overflow-wrap:anywhere}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;color:var(--navy);line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1em}
a{color:var(--navy)}
img{max-width:100%;height:auto}
address{font-style:normal}

/* Fokus sichtbar (Tastatur) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.hero a:focus-visible,.cta-band a:focus-visible,nav.main a:focus-visible,nav.main button:focus-visible,.site-foot a:focus-visible,.page-head a:focus-visible{outline-color:#fff}
main:focus{outline:none}

/* Hilfsklassen */
.container{max-width:1080px;margin:0 auto;padding:0 1.375rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:0;top:-100%;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:1000;text-decoration:none;font-weight:600}
.skip-link:focus{top:0}
.text-center{text-align:center}
.muted{color:var(--muted);font-size:.95rem}

/* Buttons */
.btn{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;text-decoration:none;padding:.8rem 1.6rem;border-radius:6px;border:2px solid var(--gold);transition:background .15s,border-color .15s;font-size:1rem;line-height:1.3;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--gold-hover);border-color:var(--gold-hover)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-row{display:flex;gap:.875rem;flex-wrap:wrap;align-items:center}

/* Kopf */
.site-head{background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;justify-content:center;align-items:center;padding:1rem 0 .875rem}
.brand-link{display:inline-block;line-height:0;border-radius:4px}
.brand img{width:280px;max-width:88vw;height:auto}

/* Navigation */
nav.main{background:var(--navy)}
.nav-inner{display:flex;flex-direction:column;align-items:stretch}
.nav-toggle{display:none}
.nav-list{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-list a{display:block;color:#dfe7f2;text-decoration:none;padding:.75rem 1rem;font-size:.906rem;letter-spacing:.3px;border-radius:0}
/* Der Zeigerzustand muss sich von der aktiven Seite unterscheiden. Vorher sahen
   beide gleich aus: Wer mit der Maus ueber "Vorstand" fuhr, hielt es fuer die
   aktive Seite, obwohl er auf der Datenschutzseite war. Jetzt ist der
   Zeigerzustand heller und unterstrichen, die aktive Seite dunkler mit
   goldenem Balken. */
.nav-list a:hover{background:var(--navy-l);color:#fff;text-decoration:underline;text-underline-offset:5px}
.nav-list a[aria-current="page"],.nav-list .is-section>a{background:var(--navy-d);color:#fff;text-decoration:none}
.nav-list a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--gold)}
.nav-list .is-section>a{box-shadow:inset 0 -3px 0 rgba(201,162,39,.45)}
.nav-list .nav-cta a{background:var(--gold);color:var(--navy);font-weight:700;border-radius:4px;margin:.3rem .5rem;padding:.45rem 1rem}
.nav-list .nav-cta a:hover,.nav-list .nav-cta a[aria-current="page"],.nav-list .nav-cta.is-section>a{background:var(--gold-hover);color:var(--navy)}
/* Verweise im Textfluss zusaetzlich unterstreichen (nicht nur farblich) */
.prose a:not(.btn):not(.btn-file):not(.btn-outline),.note a,.form a,.site-foot address a,.site-foot .legal a,.card a:not(.btn):not(.btn-file):not(.btn-outline){text-decoration:underline}
.site-foot a[aria-current="page"]{text-decoration:underline}
@media (max-width:940px){
  .js .nav-toggle{display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.65);border-radius:6px;padding:.5rem .9rem;margin:.5rem 0;font:inherit;font-weight:600;cursor:pointer}
  .nav-toggle-bar{display:block;width:22px;height:2px;background:#fff;box-shadow:0 -7px 0 #fff,0 7px 0 #fff}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar{background:transparent;box-shadow:0 -7px 0 #fff,0 7px 0 #fff}
  .nav-list{flex-direction:column;gap:0;padding-bottom:.5rem}
  .js .nav-list{display:none}
  .js .nav-list.is-open{display:flex}
  .nav-list a{padding:.8rem 1rem;border-top:1px solid rgba(255,255,255,.08)}
  .nav-list .nav-cta a{margin:.5rem 1rem;text-align:center}
}

/* Hero (Startseite) */
.hero{background:linear-gradient(180deg,var(--navy),var(--navy-d));color:#fff;text-align:center;padding:4rem 0 3.6rem}
.hero h1{color:#fff;font-size:2.875rem;margin-bottom:.5rem}
.hero .lead{font-size:1.1875rem;color:#cdd8e6;max-width:680px;margin:0 auto 1.6rem}
.hero .rule{width:90px;height:3px;background:var(--gold);margin:1.1rem auto 1.4rem;border:0}
.hero .cta-row{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap}

/* Abschnitte */
section.block{padding:3.4rem 0}
section.block.soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-title{text-align:center;font-size:1.875rem;margin-bottom:.4rem}
.section-sub{text-align:center;color:var(--muted);max-width:720px;margin:0 auto 2.1rem}
.lead-text{max-width:760px;margin:0 auto;font-size:1.125rem;text-align:center}

/* Karten (Grundpfeiler) */
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:1.125rem}
.cards>.card{flex:1 1 260px;max-width:calc((100% - 2.25rem)/3)}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:8px;padding:1.25rem}
.card h3{font-size:1.125rem;margin-bottom:.4rem}
.card p{margin:0;color:var(--text-2);font-size:.97rem}
.card p+p,.card p+a{margin-top:.8rem}

/* Zitat (bewusst abgesetzt, kein Teil des Rasters) */
.quote-band{max-width:720px;margin:2rem auto 0;padding:1.4rem 2rem;border-left:5px solid var(--gold);background:#fff;font-family:Georgia,'Times New Roman',serif;font-size:1.25rem;color:var(--navy);text-align:center;line-height:1.5}
.quote-band p{margin:0}
.lead-quote{max-width:820px;margin:0 auto 1.5rem;padding:1.2rem 1.6rem;background:var(--note);border-left:5px solid var(--gold);border-radius:6px;font-family:Georgia,'Times New Roman',serif;font-size:1.15rem;font-style:italic;text-align:center;color:var(--navy)}
.lead-quote p{margin:0}

/* Hinweisbox */
.note{background:var(--note);border-left:5px solid var(--gold);padding:1.1rem 1.375rem;border-radius:6px;max-width:820px;margin:0 auto 1em;font-size:1rem}
.note p:last-child{margin-bottom:0}

/* Handlungsband */
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:2.9rem 0}
.cta-band h2{color:#fff;font-size:1.75rem;margin-bottom:.9rem}
.cta-band p{color:#cdd8e6;max-width:620px;margin:0 auto 1.25rem}

/* Fuß */
.site-foot{background:var(--navy-d);color:#c5d0de;font-size:.906rem;padding:2.1rem 0 1.6rem}
.site-foot .cols{display:flex;flex-wrap:wrap;gap:1.9rem;justify-content:space-between}
.foot-title{color:#fff;font-family:'Segoe UI',Helvetica,Arial,sans-serif;font-size:.875rem;text-transform:uppercase;letter-spacing:1px;margin:0 0 .6rem}
.site-foot a{color:#dfe7f2;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.25rem 0}
.site-foot .legal{border-top:1px solid #2a405c;margin:1.4rem 0 0;padding-top:.9rem;color:#9fb1c6;font-size:.8125rem}

/* Innenseiten */
.page-head{background:linear-gradient(180deg,var(--navy),var(--navy-d));color:#fff;text-align:center;padding:2.5rem 0 2.25rem}
.page-head h1{color:#fff;margin:0;font-size:2.25rem}
.page-head p{color:#cdd8e6;margin:.6rem auto 0;max-width:680px}
.prose{max-width:820px;margin:0 auto}
/* Zeilenlaenge im Lesetext auf rund 80 Zeichen begrenzen. Nur direkte Kinder,
   damit Tabellen, Formulare, Karten und Hinweisboxen ihre Breite behalten. */
.prose>p,.prose>ul,.prose>ol{max-width:44em}
.prose h2{font-size:1.5625rem;margin:1.9rem 0 .5rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1875rem;margin:1.1rem 0 .25rem}
.prose p,.prose li{font-size:1.0625rem}
.prose ul,.prose ol{padding-left:1.4rem}
.prose li{margin:.25rem 0}

.tbl{width:100%;border-collapse:collapse;margin:1rem 0;font-size:1rem}
.tbl caption{text-align:left;font-weight:600;color:var(--navy);padding:0 0 .4rem}
.tbl th,.tbl td{border:1px solid var(--line);padding:.55rem .75rem;text-align:left;vertical-align:top}
.tbl th{background:var(--bg-soft);color:var(--navy)}
.tbl-wrap{overflow-x:auto}

.btn-file{display:inline-block;background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:6px;padding:.7rem 1.25rem;text-decoration:none;font-weight:600;margin:.375rem .5rem .375rem 0;line-height:1.3}
.btn-file:hover{background:var(--navy);color:#fff}
.btn-file small{display:block;font-weight:400;font-size:.8rem;opacity:.9}
.btn-file:hover small{color:#fff}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.375rem}
/* Zwei Karten nebeneinander: gleiche Hoehe, Schaltflaechen buendig am Fuss.
   Ohne das haengen die Schaltflaechen am Text und stehen je nach Textlaenge
   auf verschiedenen Hoehen. */
.grid2>.card{display:flex;flex-direction:column}
.card .btn-stack{display:flex;flex-direction:column;gap:.625rem;margin-top:auto;padding-top:1.125rem}
.card .btn-stack>.btn,.card .btn-stack>.btn-file{display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:100%;min-height:4.25rem;margin:0;text-align:center}
.org-list{list-style:none;padding:0;margin:0}
.org-list li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.org-list .role{color:var(--gold-d);font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}
.tag{display:inline-block;background:var(--navy);color:#fff;font-size:.75rem;padding:.15rem .7rem;border-radius:20px;letter-spacing:.5px;vertical-align:middle;font-family:'Segoe UI',Helvetica,Arial,sans-serif;font-weight:600}

/* Formulare */
.form{max-width:760px;margin:0 auto}
.form fieldset{border:1px solid var(--line);border-radius:8px;padding:1.25rem;margin:0 0 1.5rem;min-width:0}
/* Der Aussenabstand des letzten Feldes addierte sich zum Innenabstand des Kastens. */
.form fieldset>*:last-child{margin-bottom:0}
/* Kasten im Kasten nicht doppelt rahmen, sondern nur einruecken. */
.form fieldset fieldset{border:0;border-left:3px solid var(--line);border-radius:0;padding:.25rem 0 .25rem 1rem;margin:0 0 1.1rem}
.form fieldset fieldset>legend{font-family:'Segoe UI',Helvetica,Arial,sans-serif;font-size:1rem;font-weight:600;padding:0}
.form legend{font-family:Georgia,'Times New Roman',serif;color:var(--navy);font-size:1.15rem;padding:0 .4rem;font-weight:700}
.field{margin:0 0 1.1rem}
.field>label,.field>.label{display:block;font-weight:600;margin-bottom:.3rem}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field select,.field textarea{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid #6f7d8f;border-radius:6px;background:#fff;color:var(--ink)}
.field textarea{min-height:9rem;resize:vertical}
.field .hint{display:block;color:var(--muted);font-size:.9rem;margin-top:.3rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.choice{display:flex;gap:.6rem;align-items:flex-start;margin:.45rem 0}
.choice input{width:1.25rem;height:1.25rem;margin:.2rem 0 0;flex:none}
.choice label{font-weight:400}
.req{color:var(--err);font-weight:700}
.form-note{color:var(--muted);font-size:.95rem}
/* Der Absende-Knopf ist das Ziel der Seite und darf sich nicht verstecken. */
.form>p:has(>button[type=submit]){margin:1.5rem 0 1.25rem}
.form button[type=submit]{font-size:1.0625rem;padding:.9rem 2rem}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Aufklappbarer Bereich fuer die freiwilligen Angaben eines Formulars.
   Natives details/summary: laeuft ohne JavaScript, ist tastaturbedienbar und
   wird von Screenreadern als aufklappbar angekuendigt. Darin darf kein
   Pflichtfeld liegen, sonst kann der Browser bei geschlossenem Bereich nicht
   dorthin springen und die Pruefung schlaegt still fehl. */
.mehr{border:1px solid var(--line);border-radius:8px;background:#fff;margin:0 0 1.5rem}
.mehr>summary{padding:.9rem 1.25rem;font-weight:600;color:var(--navy);cursor:pointer;border-radius:8px}
.mehr>summary:hover{background:var(--bg-soft)}
.mehr>summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.mehr[open]>summary{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.mehr>*:not(summary){margin-left:1.25rem;margin-right:1.25rem}
.mehr>.form-note{margin-top:1rem;margin-bottom:1.25rem}
.mehr fieldset{border:0;border-radius:0;padding:0;margin:0 0 1.25rem}
.mehr fieldset>legend{font-family:'Segoe UI',Helvetica,Arial,sans-serif;font-size:1rem;font-weight:600;padding:0}
.mehr>fieldset:last-of-type{margin-bottom:1.25rem}
.alert{border-left:5px solid var(--err);background:#fdf2f1;padding:1rem 1.25rem;border-radius:6px;margin:0 0 1.5rem}
.alert-ok{border-left-color:var(--ok);background:#eef7f0}
.alert ul{margin:.4rem 0 0;padding-left:1.2rem}

@media (max-width:760px){
  body{font-size:1rem}
  .cards>.card{max-width:100%}
  .hero h1{font-size:2.125rem}
  .brand img{width:240px}
  .grid2{grid-template-columns:1fr}
  .page-head h1{font-size:1.75rem}
  .section-title{font-size:1.6rem}
}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
@media print{
  .nav-toggle,.skip-link,nav.main{display:none}
  .hero,.cta-band,.page-head,.site-foot{background:#fff;color:#000}
  .hero h1,.page-head h1,.cta-band h2,.hero .lead,.page-head p,.cta-band p,
  .site-foot,.site-foot a,.site-foot .foot-title,.site-foot .legal{color:#000}
  .btn,.btn-file{border:1px solid #000;background:#fff;color:#000}
  .card,.note,.alert,.quote-band{break-inside:avoid;page-break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
}