/* CCM 66. Session - Gestaltung "Einladung zum Galaabend"
   Feine Goldlinien, Passepartouts, Cormorant Garamond und Pinyon Script.
   Klassen und IDs wie in den Vorgaenger-Sessionen: #mainMenu, .width75, .gradient, #footer. */

@font-face { font-family: "Cormorant"; font-weight: 500; src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; font-weight: 600; src: url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; font-weight: 700; src: url(../fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; font-weight: 500; font-style: italic; src: url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url(../fonts/pinyon-script-latin-400-normal.woff2) format("woff2"); font-display: swap; }

:root {
  --wein: #4A0609;
  --samt: #8E0F14;
  --gold: #C9A55C;        /* Gold auf Weinrot */
  --goldlinie: #B08D47;   /* Gold auf Papier */
  --goldzart: rgba(176, 141, 71, .45);
  --papier: #FBF8F3;
  --tinte: #2B1A17;
  --grau: #6B5A52;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinte); font: 500 1.2rem/1.65 Cormorant, Georgia, serif;
  background-color: var(--wein);
  background-image: repeating-linear-gradient(45deg, rgba(201,165,92,.07) 0 1px, transparent 1px 16px),
                    repeating-linear-gradient(-45deg, rgba(201,165,92,.07) 0 1px, transparent 1px 16px);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--samt); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--goldlinie); outline-offset: 3px; }

/* ---------- Hauptmenue: zierliche Kapitaelchen mit Rauten ---------- */
#mainMenu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 0; padding: 26px 16px 0; list-style: none; }
#mainMenu li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 18px; background: var(--gold); transform: rotate(45deg) translateY(-2px); }
#mainMenu a { color: #F3E6CC; text-decoration: none; font: 600 1.05rem/1 Cormorant, serif; letter-spacing: .14em; font-variant: small-caps; }
#mainMenu a:hover, #mainMenu a.here { color: var(--gold); }

/* ---------- Die Karte mit doppelter Goldlinie und Eckornamenten ---------- */
.karte { position: relative; max-width: 980px; margin: 30px auto 50px; padding: 70px clamp(26px, 6vw, 84px) 64px; background: var(--papier);
  box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.linie { position: absolute; border: 1px solid var(--goldlinie); pointer-events: none; }
.linie.aussen { inset: 14px; } .linie.innen { inset: 20px; border-color: rgba(176,141,71,.55); }
.ecke { position: absolute; width: 64px; height: 64px; pointer-events: none; }
.ecke.ol { top: 10px; left: 10px; } .ecke.or { top: 10px; right: 10px; transform: scaleX(-1); }
.ecke.ul { bottom: 10px; left: 10px; transform: scaleY(-1); } .ecke.ur { bottom: 10px; right: 10px; transform: scale(-1); }
@media (prefers-reduced-motion: no-preference) {
  .linie { animation: ziehen 1.6s cubic-bezier(.6,0,.2,1) both; }
  .linie.innen { animation-delay: .2s; }
  .ecke { animation: erscheinen .8s 1.2s both; }
  @keyframes ziehen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
  @keyframes erscheinen { from { opacity: 0; transform-origin: center; } }
}

/* Kopf der Karte */
.kartenkopf { text-align: center; }
.medaillon { width: 86px; height: 86px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 1px var(--goldlinie), 0 0 0 6px var(--papier), 0 0 0 7px var(--goldlinie); }
.medaillon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
@media (hover: hover) {
  .medaillon { position: relative; z-index: 5; transform-origin: center top; transition: transform .25s ease, box-shadow .25s ease; }
  .medaillon:hover { transform: scale(2.6); box-shadow: 0 0 0 1px var(--goldlinie), 0 0 0 3px var(--papier), 0 0 0 3.5px var(--goldlinie), 0 6px 12px rgba(43,26,23,.25); }
}
.rubrik { margin: 0; font-style: italic; color: var(--grau); }
.kartenkopf h1 { font: 600 clamp(2.6rem, 1.6rem + 4vw, 4.8rem)/1.02 Cormorant, Georgia, serif; color: var(--samt); margin: 2px 0 0; }
.trenner { display: flex; align-items: center; gap: 14px; width: min(320px, 70%); margin: 30px auto; }
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--goldlinie); }
.trenner i { width: 7px; height: 7px; background: var(--goldlinie); transform: rotate(45deg); }

/* ---------- Medaillonleiste (Navigation der Unterseiten) ---------- */
.medaillons { list-style: none; margin: 0 auto; padding: 6px 4px 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
.medaillons li { width: 96px; text-align: center; }
.medaillons a { display: block; text-decoration: none; color: var(--tinte); }
.medaillons .rund { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--goldlinie), 0 0 0 4px var(--papier), 0 0 0 5px var(--goldzart); transition: transform .25s ease, box-shadow .25s ease; }
.medaillons .rund img { width: 100%; height: 100%; object-fit: cover; }
.medaillons .rund b { font: 500 1.7rem/1 Cormorant, serif; font-style: italic; color: var(--samt); }
.medaillons .name { display: block; font: 600 .82rem/1.2 Cormorant, serif; letter-spacing: .06em; font-variant: small-caps; }
.medaillons a:hover .rund { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--goldlinie), 0 0 0 4px var(--papier), 0 0 0 5px var(--goldlinie), 0 8px 14px rgba(43,26,23,.18); }
.medaillons a[aria-current="page"] .rund { box-shadow: 0 0 0 2px var(--samt), 0 0 0 5px var(--papier), 0 0 0 6px var(--goldlinie); }
.medaillons a[aria-current="page"] .name { color: var(--samt); }
.medaillons a[aria-current="page"] .name::after { content: ""; display: block; width: 5px; height: 5px; margin: 6px auto 0; background: var(--samt); transform: rotate(45deg); }

/* ---------- Inhalt (aus der 65 uebernommen) ---------- */
.width75 { max-width: 760px; margin: 0 auto; }
.width75 .gradient { margin: 0 0 34px; padding: 0 0 30px; border-bottom: 1px solid var(--goldzart); }
.width75 .gradient:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.width75 .gradient::after { content: ""; display: block; clear: both; }
.width75 h1 { font: 600 clamp(2rem, 1.4rem + 1.8vw, 2.8rem)/1.1 Cormorant, serif; color: var(--samt); margin: 0 0 8px; text-align: center; }
.width75 h2 { font: 600 1.55rem/1.25 Cormorant, serif; color: var(--samt); margin: 0 0 10px; text-align: center; }
.width75 h3 { font: 600 1.35rem/1.25 Cormorant, serif; color: var(--tinte); margin: 18px 0 6px; }
.width75 p { margin: 0 0 12px; }
.width75 ul, .width75 ol { padding-left: 1.2em; }
.width75 table { border-collapse: collapse; margin: 8px auto 16px; }
.width75 td, .width75 th { padding: 6px 12px; border-bottom: 1px solid var(--goldzart); text-align: left; vertical-align: top; }
.width75 blockquote { position: relative; max-width: 600px; margin: 18px auto; padding: 18px 24px; border: 1px solid var(--goldlinie); text-align: center; }
.width75 blockquote::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(176,141,71,.4); pointer-events: none; }
.width75 blockquote p { margin: 0; }
.platzhalter { text-align: center; font-style: italic; color: var(--grau); }

/* Bilder im Passepartout mit Goldlinie */
.width75 img { height: auto !important; border: 0 !important; background: #fff; padding: 10px; box-shadow: 0 0 0 1px var(--goldlinie), 0 10px 22px rgba(43,26,23,.14); cursor: zoom-in; }
.width75 .floatLeft { float: left; margin: 6px 26px 18px 2px; }
.width75 .floatRight { float: right; margin: 6px 2px 18px 26px; }
.width75 .clear { clear: both; }
.width75 a img { cursor: pointer; }

.width75 .passepartout img, .width75 .pp img { padding: 0; box-shadow: none; background: none; }

/* Kapitel (Truppen-Uebersicht) */
.kapitel { scroll-margin-top: 20px; text-align: center; }
.kapitel + .trenner { margin: 44px auto; }
.kapitel h2 { margin-bottom: 22px; }
.kapitel .passepartout { padding: 16px; }
.kapitel .passepartout.orden { max-width: 340px; background: #fff; }
.width75 .portraits { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 26px; margin: 0; padding: 0; list-style: none; }
.portraits li { width: 168px; }
.portraits figure { margin: 0; }
.portraits .pp { position: relative; padding: 10px; background: #fff; box-shadow: 0 0 0 1px var(--goldlinie), 0 10px 22px rgba(43,26,23,.14); cursor: zoom-in; transition: transform .25s, box-shadow .25s; }
.portraits .pp::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(176,141,71,.45); pointer-events: none; }
.portraits .pp:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--goldlinie), 0 16px 26px rgba(43,26,23,.2); }
.portraits img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.portraits figcaption { padding-top: 12px; }
.portraits .amt { display: block; font-variant: small-caps; letter-spacing: .14em; font-weight: 600; font-size: .95rem; color: var(--goldlinie); }
.portraits .person { display: block; font: 600 1.3rem/1.2 Cormorant, serif; color: var(--tinte); }

/* Programm (Termine / Veranstaltungen / Startseite) */
.abende { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; text-align: center; }
.abende li { padding: 14px 0; }
.abende li + li { border-top: 1px solid var(--goldzart); }
.abende .wann { display: block; font-style: italic; color: var(--grau); }
.abende .was { display: block; font: 600 1.8rem/1.15 Cormorant, serif; color: var(--tinte); text-decoration: none; }
.abende .was:hover { color: var(--samt); }
.abende .uhr { display: block; font-variant: small-caps; letter-spacing: .12em; font-weight: 600; color: var(--goldlinie); }
.abende.mit-bild { width: fit-content; }
.abende.mit-bild li { display: flex; align-items: center; gap: 22px; text-align: left; }
.abende.mit-bild .bild { flex: 0 0 96px; }
.abende.mit-bild .bild img { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--goldlinie), 0 0 0 4px var(--papier), 0 0 0 5px var(--goldlinie); transition: transform .25s ease, box-shadow .25s ease; }
.abende.mit-bild li:has(a:hover) .bild img { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--goldlinie), 0 0 0 4px var(--papier), 0 0 0 5px var(--goldlinie), 0 8px 14px rgba(43,26,23,.18); }
.abende.mit-bild li:has(a:hover) .was { color: var(--samt); }
.abende.mit-bild .text { flex: 1; min-width: 0; }
.ruf { font: 400 clamp(2.2rem, 1.4rem + 3vw, 3.4rem)/1.2 "Pinyon Script", cursive; color: var(--goldlinie); margin: 0; text-align: center; }
.uawg { position: relative; max-width: 560px; margin: 0 auto; padding: 24px 28px; border: 1px solid var(--goldlinie); text-align: center; }
.uawg::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(176,141,71,.45); pointer-events: none; }
.uawg .kuerzel { font: 600 1.5rem Cormorant, serif; color: var(--samt); letter-spacing: .06em; margin: 0 0 6px; }

/* Startseite */
.start { text-align: center; }
.start .ehre { font-style: italic; font-size: 1.35rem; margin: 0; }
.start .zur { font-style: italic; margin: 6px 0 0; }
.start h1 { font: 600 clamp(3.4rem, 1.8rem + 6.5vw, 7rem)/1 Cormorant, Georgia, serif; color: var(--samt); margin: 2px 0 4px; }
.start .einzuladen { font-style: italic; font-size: 1.35rem; margin: 0; }
.start .saison { margin: 14px 0 0; font-variant: small-caps; letter-spacing: .14em; font-weight: 600; color: var(--grau); }
.passepartout { position: relative; margin: 0 auto; padding: 18px; background: #fff; border: 1px solid var(--goldlinie); box-shadow: 0 14px 30px rgba(43,26,23,.14); max-width: 700px; cursor: zoom-in; }
.passepartout::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(176,141,71,.5); pointer-events: none; }
.passepartout img { position: relative; z-index: 1; }
.bildtext { font-style: italic; font-size: 1.05rem; color: var(--grau); margin-top: 14px; }

/* Bildergalerie: Raster aus Passepartouts */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.galerie button { display: block; width: 100%; padding: 8px; border: 0; background: #fff; cursor: zoom-in; box-shadow: 0 0 0 1px var(--goldlinie), 0 8px 18px rgba(43,26,23,.12); transition: transform .25s, box-shadow .25s; }
.galerie button:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--goldlinie), 0 14px 24px rgba(43,26,23,.2); }
.galerie img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.galerie .beschriftung { display: block; font-style: italic; font-size: .95rem; color: var(--grau); padding-top: 6px; }
/* Rueckblick: eine Kachel je Truppe, fuehrt zur Seite der 65. Session */
.galerie.rueckblick { display: flex; flex-wrap: wrap; justify-content: center; }
.galerie.rueckblick li { width: calc((100% - 44px) / 3); }
.galerie.rueckblick a { display: block; padding: 8px; background: #fff; text-align: center; text-decoration: none; box-shadow: 0 0 0 1px var(--goldlinie), 0 8px 18px rgba(43,26,23,.12); transition: transform .25s, box-shadow .25s; }
.galerie.rueckblick a:hover, .galerie.rueckblick a:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--goldlinie), 0 14px 24px rgba(43,26,23,.2); }
.galerie.rueckblick img { height: auto; }
.galerie.rueckblick:not(.shop) img { aspect-ratio: 3 / 2; object-fit: contain; background: #fff; }
.galerie.shop img { aspect-ratio: 1 / 1; object-fit: contain; }
.start .mehr { text-align: center; margin-top: 18px; }

.paar { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; text-align: left; max-width: 640px; margin: 0 auto; }
.oval { aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--goldlinie), 0 0 0 7px #fff, 0 0 0 8px var(--goldlinie), 0 14px 30px rgba(43,26,23,.18); }
.oval img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* Fotoalben-Hinweis (Bibliothekselement PicsDropD) */
.alben { text-align: center; }
.alben h2 { font: 600 1.5rem/1.2 Cormorant, serif; color: var(--samt); margin: 0 0 4px; }
.alben p { margin: 0; font-style: italic; color: var(--grau); }

/* ---------- Fuss ---------- */
#footer { color: #E9D9BE; text-align: center; padding: 0 16px 50px; font-style: italic; }
#footer a { color: var(--gold); }
#footer .ruf { color: var(--gold); font-size: 2.2rem; margin-bottom: 6px; }

/* ---------- Lichtbox ---------- */
.lichtbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 70px 70px 90px;
  background: rgba(36, 3, 5, .94); }
.lichtbox.offen { display: flex; }
.lichtbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lichtbox .rahmen { position: relative; background: #fff; padding: 14px; box-shadow: 0 0 0 1px var(--goldlinie), 0 30px 70px rgba(0,0,0,.6); }
.lichtbox .rahmen::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(176,141,71,.55); pointer-events: none; }
.lichtbox img { max-width: min(1200px, calc(100vw - 168px)); max-height: calc(100vh - 220px); width: auto; height: auto; }
.lichtbox figcaption { margin-top: 16px; text-align: center; color: #F3E6CC; font-style: italic; max-width: 70ch; }
.lichtbox .zaehler { display: block; font-style: normal; font-variant: small-caps; letter-spacing: .14em; color: var(--gold); font-size: .95rem; }
.lichtbox button { position: absolute; background: none; border: 1px solid rgba(201,165,92,.6); color: #F3E6CC; cursor: pointer; width: 48px; height: 48px; border-radius: 50%;
  font: 500 1.6rem/1 Cormorant, serif; display: grid; place-items: center; }
.lichtbox button:hover { border-color: var(--gold); color: var(--gold); }
.lichtbox .zu { top: 18px; right: 18px; }
.lichtbox .zurueck { left: 14px; top: 50%; transform: translateY(-50%); }
.lichtbox .weiter { right: 14px; top: 50%; transform: translateY(-50%); }
@media (prefers-reduced-motion: no-preference) {
  .lichtbox.offen .rahmen { animation: einblenden .35s ease both; }
  @keyframes einblenden { from { opacity: 0; transform: scale(.97); } }
}

/* ---------- Handy ---------- */
@media (max-width: 700px) {
  .abende.mit-bild li { gap: 16px; }
  .abende.mit-bild .bild { flex-basis: 72px; }
  .abende.mit-bild .bild img { width: 72px; height: 72px; }
  .karte { margin: 16px 8px 34px; padding: 56px 20px 50px; }
  .linie.aussen { inset: 8px; } .linie.innen { inset: 13px; }
  .ecke { width: 48px; height: 48px; }
  .ecke.ol, .ecke.or { top: 4px; } .ecke.ul, .ecke.ur { bottom: 4px; } .ecke.ol, .ecke.ul { left: 4px; } .ecke.or, .ecke.ur { right: 4px; }
  /* Medaillonleiste: seitlich wischen statt umbrechen */
  .medaillons { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 6px 12px; margin: 0 -8px; }
  .medaillons li { flex: 0 0 auto; width: 86px; scroll-snap-align: center; }
  .width75 .floatLeft, .width75 .floatRight { float: none; margin: 10px auto 18px; }
  .width75 img { width: auto; max-width: 100% !important; }
  .width75 table { display: block; overflow-x: auto; }
  .galerie { grid-template-columns: 1fr 1fr; gap: 14px; }
  .galerie.rueckblick li { width: calc(50% - 7px); }
  .width75 .portraits { gap: 22px 14px; }
  .portraits li { width: calc(50% - 7px); }
  .portraits .person { font-size: 1.15rem; }
  .kapitel .passepartout { padding: 10px; }
  .paar { grid-template-columns: 1fr; text-align: center; } .oval { width: 200px; margin: 0 auto; }
  .lichtbox { padding: 64px 8px 110px; }
  .lichtbox img { max-width: calc(100vw - 44px); max-height: calc(100vh - 230px); }
  .lichtbox .zurueck, .lichtbox .weiter { top: auto; bottom: 26px; transform: none; }
  .lichtbox .zurueck { left: calc(50% - 64px); } .lichtbox .weiter { right: calc(50% - 64px); }
}

/* Goldleiste: Unternavigation von Home und Truppen, zweite Zeile unter dem Hauptmenue */
.goldleiste { max-width: 980px; margin: 14px auto 0; padding: 0 16px; }
.goldleiste ul { list-style: none; margin: 0; padding: 9px 0 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0;
  border-top: 1px solid rgba(201,165,92,.5); border-bottom: 1px solid rgba(201,165,92,.5); }
.goldleiste li + li::before { content: "\00B7"; color: var(--gold); margin: 0 10px; }
.goldleiste a { color: var(--gold); text-decoration: none; font: italic 500 1rem/1.3 Cormorant, serif; }
.goldleiste a:hover { color: #F3E6CC; }
.goldleiste a[aria-current] { color: #F3E6CC; border-bottom: 1px solid var(--gold); }
@media (max-width: 700px) {
  .goldleiste { padding: 0; }
  .goldleiste ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 9px 16px 8px; white-space: nowrap; }
}

/* Medaillonleiste ueber der Karte (Veranstaltungen): direkt unter dem Hauptmenue, auf Weinrot */
.ueberkarte { max-width: 980px; margin: 20px auto 0; padding: 0 16px; }
.ueberkarte .medaillons { padding-bottom: 0; }
.ueberkarte .medaillons a { color: #F3E6CC; }
.ueberkarte .medaillons a:hover .name { color: var(--gold); }
.ueberkarte .medaillons a[aria-current="page"] .rund { box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px var(--papier), 0 0 0 6px var(--gold); }
.ueberkarte .medaillons a[aria-current="page"] .name { color: var(--gold); }
.ueberkarte .medaillons a[aria-current="page"] .name::after { background: var(--gold); }
@media (max-width: 700px) {
  .ueberkarte { padding: 0; }
  .ueberkarte .medaillons { margin: 0; }
}

/* Archiv: Kapitel ohne Flaeche, Ueberschrift zwischen zwei Goldlinien, Raute zwischen den Kapiteln */
.archivtafel { margin: 0 0 30px; text-align: center; scroll-margin-top: 20px; }
.archivtafel:last-child { margin-bottom: 0; }
.archivtafel + .archivtafel::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto 34px; background: var(--goldlinie); transform: rotate(45deg); }
.width75 .archivtafel h2 { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.width75 .archivtafel h2::before, .width75 .archivtafel h2::after { content: ""; flex: 1; height: 1px; background: var(--goldlinie); }
.width75 .archivtafel ul { list-style: none; margin: 0; padding: 0; }
@media (max-width: 700px) {
  .width75 .archivtafel h2 { gap: 12px; }
}

/* Goldleiste: Trennpunkt am Zeilenanfang ausblenden (Klasse setzt das Skript der Seite) */
.goldleiste li.zeilenanfang::before { visibility: hidden; }

/* Hinweistext mit feinem Goldrahmen (Disclaimer auf der Seite Links) */
.hinweis { clear: both; margin: 0 0 26px; padding: 16px 20px 6px; border: 1px solid var(--goldzart); font-size: .95em; }

/* Muttizettel: Tabellen zum Jugendschutz */
.width75 table.jugendschutz { width: 100%; margin: 14px 0 4px; font-size: .9em; line-height: 1.3; }
.width75 .jugendschutz th, .width75 .jugendschutz td { padding: 7px 8px; }
.width75 .jugendschutz thead th { border-bottom: 1px solid var(--goldlinie); color: var(--samt); font-weight: 600; text-align: center; vertical-align: bottom; }
.width75 .jugendschutz thead th:first-child { text-align: left; }
.width75 .jugendschutz tbody th { font-weight: 600; }
.width75 .jugendschutz tbody th small { font-weight: 500; font-style: italic; color: var(--grau); }
.width75 .jugendschutz td:not(:last-child) { text-align: center; }
.width75 .jugendschutz .ja { color: #2F6B3F; font-weight: 600; }
.width75 .jugendschutz .nein { color: var(--samt); font-weight: 600; }
.tabellenhinweis { font-size: .85em; font-style: italic; color: var(--grau); text-align: right; }
.herunterladen { font-weight: 600; }

/* Truppenseiten: Vorschaubilder der Mitglieder, alle gleich gross */
.width75 img.mitgliedbild { box-sizing: content-box; width: 100px !important; height: 150px !important; object-fit: cover; margin: 6px 12px 16px 2px !important; }

/* Kontaktseite: Personen nebeneinander */
.portraits.kontakte { margin-bottom: 30px; }
.portraits.kontakte li { width: 320px; text-align: center; }
.portraits.kontakte .pp { width: 200px; margin: 0 auto; box-sizing: border-box; }
.portraits.kontakte .zeilen { display: block; margin-top: 6px; }
@media (max-width: 700px) { .portraits.kontakte li { width: 100%; } }

/* Kontaktseite: Formular */
.kontaktform { max-width: 520px; margin: 0 auto; }
.kontaktform p { margin: 0 0 16px; }
.kontaktform label { display: block; margin-bottom: 4px; font-variant: small-caps; letter-spacing: .08em; font-weight: 600; color: var(--grau); }
.kontaktform input, .kontaktform select, .kontaktform textarea { display: block; width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--goldlinie); border-radius: 0; background: #fff; color: var(--tinte); font: inherit; }
.kontaktform textarea { resize: vertical; }
.kontaktform input:focus-visible, .kontaktform select:focus-visible, .kontaktform textarea:focus-visible { outline: 2px solid var(--goldlinie); outline-offset: 2px; }
.kontaktform .kf_falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontaktform .kf_hinweis { font-style: italic; color: var(--grau); font-size: 1.05rem; }
.kontaktform .kf_knopf { text-align: center; }
.kontaktform button { padding: 10px 28px; border: 1px solid #8E0F14; background: #8E0F14; color: #fff; font: 600 1.15rem Cormorant, Georgia, serif; letter-spacing: .04em; cursor: pointer; }
.kontaktform button:hover { background: #6E0B0F; }
.kontaktform button:disabled { opacity: .6; cursor: wait; }
.formmeldung { text-align: center; font-weight: 600; min-height: 1.2em; }
.formmeldung.gut { color: #2E5B2E; }
.formmeldung.schlecht { color: #8E0F14; }