/* ===================================================================
   Karate Verein Eppingen – Design-Tokens
   Sumi (Schwarz), Washi (Papierweiß mit kühlem Grünstich wie Tatami),
   Hinomaru-Rot, Obi-Gold. Die Gürtelfarben-Kette ist das wiederkehrende
   Signature-Element (Obi-Bar) – abgeleitet aus dem echten Prüfungssystem.
   =================================================================== */
:root {
  --sumi: #1d1c19;
  --ink: #2a2823;
  --paper: #eef0e9;
  --paper-alt: #e2e5da;
  --card: #ffffff;
  --red: #ae2b26;
  --red-dark: #8c211d;
  --gold: #c1922f;
  --indigo: #2c3c49;
  --line: #d7d9cd;
  --radius: 3px;
  --belt-white: #f4f4f0;
  --belt-yellow: #e3bd3f;
  --belt-orange: #d97f33;
  --belt-green: #4d7a49;
  --belt-blue: #386693;
  --belt-brown: #6b4a34;
  --belt-black: #1d1c19;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
h1, h2, h3, h4 {
  font-family: 'Bebas Neue', 'Work Sans', sans-serif;
  letter-spacing: 0.04em;
  color: var(--sumi);
  line-height: 1.05;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.4rem; letter-spacing: 0.03em; }
p { margin: 0 0 1em; }
a { color: var(--red-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Fokus sichtbar halten (Barrierefreiheit) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Signature-Element: Obi-Bar (Gürtelfarben-Streifen) ---- */
.obi-bar {
  height: 7px;
  background: linear-gradient(90deg,
    var(--belt-white) 0 14.28%,
    var(--belt-yellow) 14.28% 28.56%,
    var(--belt-orange) 28.56% 42.84%,
    var(--belt-green) 42.84% 57.12%,
    var(--belt-blue) 57.12% 71.4%,
    var(--belt-brown) 71.4% 85.68%,
    var(--belt-black) 85.68% 100%);
}

/* ---- Header ---- */
/* position/z-index: eigener Stapelkontext, damit das ausgeklappte Mobil-Menü
   (position:absolute) über dem Seiteninhalt liegt – ohne z-index wird es sonst
   vom Hero-Bereich (z-index:2) verdeckt und lässt sich scheinbar "nicht öffnen". */
.site-header { background: var(--sumi); color: #f2f1ec; position: relative; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand__mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  width: 42px; height: 42px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.brand__text strong { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.05em; }
.brand__text small { display: block; font-size: 0.72rem; color: #b9b7ad; letter-spacing: 0.06em; text-transform: uppercase; }

.main-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.main-nav > a, .nav-item > a {
  display: block; padding: 10px 14px; color: #e7e5dd; font-weight: 600;
  font-size: 0.92rem; border-bottom: 3px solid transparent;
}
.main-nav > a:hover, .nav-item > a:hover, .main-nav > a.active, .nav-item > a.active {
  color: #fff; border-bottom-color: var(--red); text-decoration: none;
}
.nav-item { position: relative; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0; background: #fff;
  min-width: 200px; box-shadow: 0 12px 24px rgba(0,0,0,0.18); border-radius: var(--radius);
  overflow: hidden; z-index: 20;
}
.dropdown a { display: block; padding: 10px 16px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
.dropdown a:last-child { border-bottom: none; }
.dropdown a:hover { background: var(--paper); text-decoration: none; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { display: block; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none; flex-direction: column; align-items: stretch; width: 100%;
    background: var(--sumi); position: absolute; left: 0; right: 0; top: 100%;
    padding: 8px 0 16px; border-top: 1px solid #3a3833;
  }
  .main-nav.open { display: flex; }
  .site-header__inner { position: relative; flex-wrap: wrap; }
  .dropdown { position: static; box-shadow: none; background: #26241f; }
  .dropdown a { color: #d8d6cd; }
}

/* ---- Startseiten-Ankündigung (Banner) ---- */
.announce { width: 100%; padding: 28px 24px; }
/* In den Neuigkeiten-Bereich eingebettet: abgerundet, mit Abstand zu den Karten */
.announce--inline { border-radius: var(--radius); margin-bottom: 28px; }
.announce__inner { text-align: center; }
.announce__text.rich-content { text-align: inherit; }
.announce__text.rich-content a { color: inherit; text-decoration: underline; }
.announce__title { color: inherit; margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.announce__text { color: inherit; margin: 0 auto 14px; max-width: 760px; font-size: 1.05rem; line-height: 1.5; }
.announce__media { display: block; margin: 14px auto; max-width: 100%; max-height: 480px; border-radius: var(--radius); }
.announce__btn { display: inline-block; margin-top: 6px; padding: 10px 24px; border: 2px solid; border-radius: var(--radius); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }
.announce__btn:hover { text-decoration: none; opacity: 0.85; }

/* ---- Hero (Startseite) ---- */
.hero {
  position: relative; background: var(--sumi); color: #fff; overflow: hidden;
  min-height: 420px; display: flex; align-items: flex-end;
}
.hero__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 0.55; }
.hero__content { position: relative; z-index: 2; padding: 56px 24px; max-width: 1180px; margin: 0 auto; width: 100%; }
.hero__eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 0.85rem; }
.hero h1 { color: #fff; margin-top: 8px; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.hero p { max-width: 620px; color: #e6e4db; font-size: 1.05rem; }
.hero__logo { display: block; width: auto; max-width: 320px; height: auto; margin: 22px 0 4px; }
.hero__actions { margin-top: 8px; }
@media (max-width: 640px) { .hero__logo { max-width: 240px; } }
.btn {
  display: inline-block; background: var(--red); color: #fff; font-weight: 700;
  padding: 12px 26px; border-radius: var(--radius); margin-top: 12px; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.85rem; border: none; cursor: pointer;
}
.btn:hover { background: var(--red-dark); text-decoration: none; }
.btn--ghost { background: transparent; border: 2px solid #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ---- Social-Media-Icons ---- */
.social-bar { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.social-bar__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.social-bar__link svg { width: 24px; height: 24px; fill: currentColor; }
.social-bar__link:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
.social-bar__link--facebook:hover { background: #1877f2; border-color: #1877f2; }
.social-bar__link--instagram:hover { background: #d6249f; border-color: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-bar__link--youtube:hover { background: #ff0000; border-color: #ff0000; }
/* Direkt unter dem Hero-Banner: leicht ins Banner hineingezogen, rechtsbündig
   (an der rechten Kante des Hero-Inhalts ausgerichtet). */
.social-bar--hero {
  justify-content: flex-end;
  max-width: 1180px; margin: -23px auto 8px; padding: 0 24px;
  position: relative; z-index: 3;
}

/* ---- Sections ---- */
section.block { padding: 56px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 8px; }
.section-head a.more { font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
/* Vorschaubild einer Kachel: vollständig sichtbar ("contain" statt "cover").
   Der 4:3-Rahmen bleibt, damit alle Kacheln gleich hoch sind; bei abweichendem
   Seitenverhältnis füllt der Hintergrund die schmalen Ränder. */
.card__img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--paper-alt); }
.card__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.card__meta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--red-dark); font-weight: 700; margin-bottom: 6px; }
.card h3 { margin-bottom: 8px; }
.card p { color: #4c4a44; font-size: 0.95rem; }
.card__link { margin-top: auto; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Inhaltsseiten ---- */
.page-header { background: var(--paper-alt); padding: 40px 0 32px; border-bottom: 1px solid var(--line); }
.content { padding: 44px 0 60px; }
.content .wrap { max-width: 880px; }
.content h2 { margin-top: 1.4em; }
.content h3 { margin-top: 1.5em; margin-bottom: 0.4em; font-size: 1.08rem; }
.content h4 { margin-top: 1.2em; margin-bottom: 0.3em; font-size: 0.98rem; color: #4c4a44; }
/* Groß geschriebene Pflicht-Absätze (z. B. Widerspruchsrecht nach Art. 21 DSGVO)
   optisch entschärfen: etwas kleiner und abgesetzt, damit die Seite lesbar bleibt. */
.dse-shout {
  font-size: 0.86rem; line-height: 1.6; background: var(--paper-alt);
  border-left: 4px solid var(--gold); border-radius: var(--radius);
  padding: 12px 16px; margin: 1.2em 0;
}
.content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 0.92rem; }
.content table th, .content table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.content table th { background: var(--paper-alt); font-weight: 700; }
.belt-list { list-style: none; margin: 1.4em 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.belt-list li { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.belt-swatch { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }

/* ---- Kalender ---- */
.cal__month { margin: 1.8em 0 0.6em; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.cal__list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.cal__event { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); margin-bottom: 10px; }
.cal__when { min-width: 210px; }
.cal__date { display: block; font-weight: 700; color: var(--sumi); }
.cal__time { display: block; font-size: 0.9rem; color: var(--red-dark); font-weight: 600; }
.cal__what { flex: 1; min-width: 200px; }
.cal__title { display: block; font-weight: 700; font-size: 1.05rem; }
.cal__location { display: block; font-size: 0.9rem; color: #4c4a44; margin-top: 2px; }

/* ---- News & Gallery ---- */
/* Bild eines Beitrags: immer vollständig zeigen. Früher wurde es auf 16:9
   zugeschnitten – bei hochformatigen Fotos fehlten dadurch Kopf und Füße.
   Jetzt bestimmt das Bild selbst sein Seitenverhältnis, die Höhe ist nur nach
   oben begrenzt, damit ein hohes Hochformat nicht den ganzen Bildschirm füllt. */
.news-detail img.hero-img {
  max-width: 100%; height: auto;
  margin: 0 auto 24px; border-radius: var(--radius);
}
/* Die Höhenbegrenzung gilt nur, solange keine Breite eingestellt ist: Steht die
   Breite fest, würde der Browser die Höhe kappen, ohne die Breite mitzuziehen –
   das Bild wäre gestaucht. Mit eingestellter Breite hat die Redaktion die Größe
   ja bewusst gewählt. */
.news-detail img.hero-img:not([width]) { max-height: 70vh; }
/* Video eines Beitrags: gleiche Regeln wie beim Titelbild, damit eine im
   Adminbereich eingestellte Breite gilt und es auf dem Handy trotzdem passt. */
.news-detail video.news-video {
  display: block; max-width: 100%; height: auto;
  margin: 0 auto 24px; border-radius: var(--radius);
}

/* Like / Dislike */
.vote { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 28px 0; padding-top: 20px; border-top: 1px solid var(--line); }
.vote__label { font-weight: 600; color: #4c4a44; margin-right: 4px; }
.vote__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 0.95rem; color: var(--ink); line-height: 1; }
.vote__btn:hover { background: var(--paper-alt); }
.vote__btn:disabled { opacity: 0.6; cursor: default; }
.vote__btn.is-active.vote__btn--like { background: #e4efe2; border-color: #b9d8b4; color: #2c5a2a; }
.vote__btn.is-active.vote__btn--dislike { background: #f7e2e1; border-color: #e6b9b6; color: var(--red-dark); }
.vote__count { font-variant-numeric: tabular-nums; }

/* Formatierungen aus dem Editor (Quill) auch auf der öffentlichen Seite darstellen */
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }
.rich-content .ql-indent-1 { margin-left: 2em; }
.rich-content .ql-indent-2 { margin-left: 4em; }
.rich-content .ql-indent-3 { margin-left: 6em; }
.rich-content .ql-indent-4 { margin-left: 8em; }
/* Schriftarten aus dem Editor – müssen zu views/admin/_editor-fonts.ejs passen,
   sonst sieht der Text im Editor anders aus als auf der Website. */
.rich-content .ql-font-worksans { font-family: 'Work Sans', sans-serif; }
.rich-content .ql-font-opensans { font-family: 'Open Sans', sans-serif; }
.rich-content .ql-font-montserrat { font-family: 'Montserrat', sans-serif; }
.rich-content .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.rich-content .ql-font-merriweather { font-family: 'Merriweather', Georgia, serif; }
.rich-content .ql-font-lora { font-family: 'Lora', Georgia, serif; }
.rich-content .ql-font-playfair { font-family: 'Playfair Display', Georgia, serif; }
.rich-content .ql-font-robotoslab { font-family: 'Roboto Slab', Georgia, serif; }
.rich-content .ql-font-headline { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; }
.rich-content .ql-font-oswald { font-family: 'Oswald', 'Bebas Neue', sans-serif; }
.rich-content .ql-font-monospace { font-family: 'Courier New', monospace; }
.rich-content .ql-size-small { font-size: 0.75em; }
.rich-content .ql-size-large { font-size: 1.5em; }
.rich-content .ql-size-huge { font-size: 2.25em; }
.rich-content blockquote { border-left: 4px solid var(--gold); margin: 1.2em 0; padding: 0.4em 0 0.4em 1.2em; color: #4c4a44; font-style: italic; }
.rich-content pre {
  background: var(--sumi); color: #e7e5dd; padding: 14px 16px; border-radius: var(--radius);
  overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.88rem;
}
.rich-content img { border-radius: var(--radius); margin: 0.6em 0; }
/* Link, der im Editor als Schaltfläche markiert wurde (Klasse kommt aus
   views/admin/_editor-link-blot.ejs). Sieht im Editor genauso aus wie später
   auf der Seite. */
.rich-content a.link-as-button, .ql-snow .ql-editor a.link-as-button {
  display: inline-block; background: var(--red); color: #fff; font-weight: 700;
  padding: 12px 26px; border-radius: var(--radius); margin: 6px 0;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem;
  text-decoration: none;
}
.rich-content a.link-as-button:hover { background: var(--red-dark); color: #fff; text-decoration: none; }
/* Im Ankündigungs-Banner sind Links unterstrichen und erben die Textfarbe – für
   die Schaltfläche gilt das nicht. */
.announce__text.rich-content a.link-as-button { color: #fff; text-decoration: none; }
.gallery-year h2 { margin-top: 2em; border-bottom: 2px solid var(--gold); display: inline-block; padding-bottom: 4px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 20px 0 40px; }
.gallery-thumb { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.gallery-thumb img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.gallery-thumb__label { padding: 10px 12px; font-size: 0.85rem; font-weight: 600; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.photo-grid img { aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); }

/* ---- Kontaktformular ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem; background: #fff;
}
textarea { min-height: 130px; resize: vertical; }
/* Ankreuzfelder dürfen nicht auf volle Breite gezogen werden (sonst steht das
   Kästchen weit rechts, losgelöst von seiner Beschriftung). */
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; flex-shrink: 0; }
/* Beschriftung neben dem Ankreuzfeld statt darüber. */
.check-label { display: flex; align-items: center; gap: 8px; font-weight: normal; margin-top: 6px; }
.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; font-weight: 600; }
.alert--success { background: #e4efe2; color: #2c5a2a; border: 1px solid #b9d8b4; }
.alert--error { background: #f7e2e1; color: var(--red-dark); border: 1px solid #e6b9b6; }

/* ---- Footer ---- */
.site-footer { background: var(--sumi); color: #cfcdc4; padding: 40px 0 10px; font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; padding-bottom: 24px; }
.footer-grid strong { color: #fff; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; font-size: 1.05rem; }
.footer-grid a { color: #cfcdc4; }
.footer-bottom { border-top: 1px solid #3a3833; padding: 14px 24px 0; font-size: 0.78rem; color: #9c9a91; }

/* ---- Admin ---- */
.admin-shell { max-width: 1080px; margin: 0 auto; padding: 32px 24px 60px; }
.admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.admin-nav a { padding: 8px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 0.9rem; }
.admin-nav a.active { background: var(--sumi); color: #fff; border-color: var(--sumi); }
table.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; }
table.admin-table th, table.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.92rem; }
table.admin-table th { background: var(--paper-alt); }
.row-actions { display: flex; gap: 8px; }
.row-actions button, .row-actions a { font-size: 0.8rem; padding: 6px 10px; }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; border-radius: var(--radius); }
.btn-danger { background: var(--red); color: #fff; border: none; cursor: pointer; }
.login-box { max-width: 380px; margin: 90px auto; background: #fff; padding: 36px; border-radius: var(--radius); border: 1px solid var(--line); }
.thumb-strip { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0; }
.thumb-strip figure { margin: 0; width: 160px; }
.thumb-strip img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 1/1; object-fit: cover; }
.thumb-strip figcaption { margin-top: 6px; }
.thumb-strip .caption-form { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; }
.thumb-strip .caption-form input { width: 100%; font-size: 0.8rem; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius); }
.thumb-strip .thumb-actions { display: flex; flex-direction: column; gap: 4px; }
/* Umsortieren der Fotos: das Bild ist der Anfasser zum Ziehen. */
.thumb-strip img { cursor: grab; }
.thumb-strip img:active { cursor: grabbing; }
.thumb-strip figure.is-dragging { opacity: 0.4; }
.thumb-strip .thumb-move { display: flex; gap: 4px; margin: 0; }
.thumb-strip .thumb-move button { flex: 1; }
.order-status { display: inline-block; margin-left: 6px; font-weight: 600; color: #2c5a2a; }
.order-status[hidden] { display: none; }
.order-status--error { color: var(--red-dark); }
.thumb-strip .thumb-actions form { margin: 0; }
.thumb-strip .thumb-actions button { width: 100%; }
.thumb-strip .cover-badge { display: block; text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--gold); padding: 6px 0; }
.help-text { color: #6c6a63; font-size: 0.85rem; }

/* Quill setzt .ql-container auf height: 100%. Im Raster unserer Formulare hat
   das umgebende Feld keine feste Höhe – die 100% ergaben deshalb die Höhe des
   ganzen Feldes (inklusive Beschriftung und Symbolleiste), sodass der Editor
   unten herausragte und die Felder darunter (Datum, Status) verdeckte. Die Höhe
   kommt aus .ql-editor (min-height), der Rahmen soll einfach mitwachsen.
   Doppelte Klasse, weil das CSS von Quill nach unserem geladen wird. */
.ql-container.ql-container { height: auto; }

/* ---- Größe von Bildern/Videos im Editor ziehen (_editor-resize.ejs) ---- */
.media-resize {
  position: absolute; z-index: 5; pointer-events: none;
  outline: 2px solid var(--red); outline-offset: 1px;
}
.media-resize[hidden] { display: none; }
.media-resize__handle {
  position: absolute; width: 12px; height: 12px; background: var(--red);
  border: 2px solid #fff; border-radius: 2px; pointer-events: auto; touch-action: none;
}
.media-resize__handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.media-resize__handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.media-resize__handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.media-resize__handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.media-resize__info {
  position: absolute; top: -26px; left: 0; background: var(--sumi); color: #fff;
  font-size: 0.72rem; padding: 2px 8px; border-radius: 3px; white-space: nowrap;
}
.media-resize__reset {
  position: absolute; top: -26px; right: 0; background: var(--sumi); color: #fff;
  border: none; border-radius: 3px; font-size: 0.72rem; font-family: inherit;
  padding: 3px 8px; cursor: pointer; pointer-events: auto; width: auto;
}
.ql-editor img, .ql-editor video { cursor: pointer; }
/* Vorschau von Titelbild/Video im Beitragsformular: genauso breit wie die
   Beitragsspalte (.content .wrap = 880px abzüglich 2×24px Innenabstand),
   damit das Ziehen der Größe zeigt, wie es auf der Seite wirklich aussieht. */
/* Verschieben eines Bildes/Videos im Editor (_editor-move.ejs) */
.ql-editor img.is-moving, .ql-editor video.is-moving { opacity: 0.4; }
.move-marker { position: absolute; width: 2px; background: var(--red); z-index: 6; pointer-events: none; }
/* Ein Video kommt zwischen zwei Absätze – dafür eine waagerechte Linie. */
.move-marker--block { height: 3px; width: 100%; }
.move-marker[hidden] { display: none; }

.media-preview { position: relative; max-width: 832px; margin-bottom: 8px; }
.media-preview img, .media-preview video { max-width: 100%; height: auto; border-radius: var(--radius); cursor: pointer; display: block; }

/* ---- Link-Dialog der Editoren (siehe views/admin/_editor-link.ejs) ---- */
.link-dialog {
  position: fixed; inset: 0; z-index: 100; background: rgba(38,36,31,0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.link-dialog[hidden] { display: none; }
.link-dialog__box {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  padding: 24px; width: 100%; max-width: 460px; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.link-dialog__title { margin: 0 0 16px; }
.link-dialog__box label { margin-top: 12px; }
.link-dialog__box .help-text { margin: 4px 0 0; }
.link-dialog__error { margin: 12px 0 0; color: var(--red-dark); font-weight: 600; font-size: 0.9rem; }
.link-dialog__error[hidden] { display: none; }
.link-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.link-dialog__btn--plain { background: transparent; color: var(--sumi); border: 1px solid var(--line); }
.link-dialog__btn--plain:hover { background: var(--paper-alt); }
.link-dialog__remove { margin-left: auto; color: var(--red-dark); }
.link-dialog__remove[hidden] { display: none; }

/* Quill zeigt beim Anklicken eines vorhandenen Links ein kleines Info-Fenster.
   Dessen Beschriftungen stecken im CSS der Bibliothek und sind englisch – hier
   auf Deutsch umgestellt. */
.ql-snow .ql-tooltip::before { content: "Adresse:"; }
.ql-snow .ql-tooltip[data-mode=link]::before { content: "Adresse eingeben:"; }
.ql-snow .ql-tooltip a.ql-action::after { content: "Ändern"; }
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Speichern"; }
.ql-snow .ql-tooltip a.ql-remove::before { content: "Entfernen"; }

/* ---- Team-Karten (Vorstand, Trainer) ---- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 24px 0; }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; border-top: 4px solid var(--gold); }
.team-card h3 { margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6c6a63; }
.team-card .team-name { font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; color: var(--sumi); }
.team-card .team-role { font-size: 0.9rem; line-height: 1.5; margin: 0 0 8px; }
.team-card .team-contact { font-size: 0.85rem; color: #4a483f; margin: 8px 0 0; line-height: 1.6; }

/* ---- Inhalts-Seiten (übernommene Texte) ---- */
.rich-content h2 { margin-top: 32px; margin-bottom: 12px; color: var(--sumi); border-bottom: 2px solid var(--gold); padding-bottom: 6px; display: inline-block; }
.rich-content blockquote { border-left: 4px solid var(--red); background: var(--paper-alt); margin: 24px 0; padding: 16px 20px; font-style: italic; font-size: 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; }
.rich-content table { width: 100%; border-collapse: collapse; margin: 16px 0; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.rich-content table th, .rich-content table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.92rem; }
.rich-content table th { background: var(--paper-alt); }
.rich-content ul { line-height: 1.7; }

/* ---- Downloads & Listen in Inhaltsseiten ---- */
.rich-content h3 { margin-top: 22px; margin-bottom: 8px; font-size: 1.05rem; color: var(--sumi); }
.rich-content video { display: block; max-width: 100%; margin: 16px auto; border-radius: var(--radius); }
.ql-editor video { display: block; max-width: 100%; margin: 8px 0; }
.rich-content .download-list { list-style: none; padding: 0; }
.rich-content .download-list li { padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rich-content .download-list li a { font-weight: 600; }
.rich-content .download-type { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--red-dark); background: var(--paper-alt); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; text-transform: uppercase; }
.rich-content pre { background: var(--sumi); color: #f5f3ee; padding: 12px 16px; border-radius: var(--radius); overflow-x: auto; font-size: 0.85rem; }

/* ---- Foto auf Team-Karten ---- */
.team-card .team-photo { width: 100%; max-width: 160px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; margin-bottom: 12px; display: block; }
/* Mehrere Fotos in einem Eintrag (z. B. Elternbeirat): nebeneinander, kleiner */
.team-card .team-photos--multi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.team-card .team-photos--multi .team-photo { width: 84px; max-width: 84px; margin-bottom: 0; }

/* ---- Logo im Seitenkopf (falls public/img/logo.* vorhanden) ---- */
.brand__logo { height: 52px; width: auto; display: block; }
@media (max-width: 600px) { .brand__logo { height: 42px; } }