/* Aalen Friends of Optometry e.V. – eigenes Stylesheet (Nachbau des bisherigen Erscheinungsbilds, eigener Code) */
@import url('/schriften/schriften.css');

:root {
  --blau: #0d68b4;        /* Hauptfarbe rgb(13,104,180) */
  --blau-dunkel: #003e84; /* rgb(0,62,132) */
  --gelb: #fee17f;        /* rgb(254,225,127) */
  --schwarz: #000;
  --grau-hell: #fafafa;   /* Seitenhintergrund */
  --grau: #e6e6e6;
  --grau-text: #555;
  --weiss: #fff;
  --breite: 1200px;
  --schrift: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Nunito", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--schrift); font-size: 16px; line-height: 1.65; color: var(--schwarz); background: var(--grau-hell); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); text-decoration: none; }
a:hover, a:focus { color: var(--blau-dunkel); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--schrift-titel); font-weight: 400; line-height: 1.25; margin: 0 0 .5em; color: var(--schwarz); }
h1 { font-size: 2.5em; }
h2 { font-size: 2em; margin-top: 1.2em; }
h3 { font-size: 1.75em; margin-top: 1.6em; margin-bottom: .4em; }
h4 { font-size: 1.25em; margin-top: 1.2em; }
h5 { font-size: 1.1em; }
p, ul, ol { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--grau); margin: 2em 0; }
.springen { position: absolute; left: -999px; top: 0; background: var(--gelb); padding: .5em 1em; z-index: 9999; }
.springen:focus { left: 1em; }

/* ---------- Container ---------- */
.inhalt { width: 88%; max-width: var(--breite); margin: 0 auto; }
.abschnitt { padding: 4em 0; }
.abschnitt-eng { padding: 2.5em 0; }
.abschnitt-weiss { background: var(--weiss); }
.abschnitt-gelb { background: var(--gelb); }
.abschnitt-blau { background: var(--blau-dunkel); color: var(--weiss); }
.abschnitt-blau h1, .abschnitt-blau h2, .abschnitt-blau h3, .abschnitt-blau a { color: var(--weiss); }
.schmal { max-width: 820px; }
.zentriert { text-align: center; }
.spalten-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5em; align-items: start; }
.spalten-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; }
@media (max-width: 800px) { .spalten-2, .spalten-3 { grid-template-columns: 1fr; } }

/* ---------- Knöpfe ---------- */
.knopf, button.knopf { display: inline-block; font-family: var(--schrift); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9em;
  color: var(--blau); border: 3px solid var(--blau); background: transparent; border-radius: .25em; padding: .6em 1.4em; line-height: 1.3;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.knopf:hover, .knopf:focus, button.knopf:hover { background: var(--blau); color: var(--weiss); text-decoration: none; }
.knopf-hell { color: var(--blau-dunkel); border-color: var(--grau); background: var(--weiss); }
.knopf-hell:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf-dunkel { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: var(--weiss); }
.knopf-dunkel:hover { background: var(--blau); border-color: var(--blau); }
.knopf-gelb { background: var(--gelb); border-color: var(--gelb); color: var(--schwarz); }
.knopf-gelb:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: var(--weiss); }
.knopf-gross { font-size: 1.05em; padding: .8em 2em; }
.knopf-aus { opacity: .5; cursor: default; }
.knopf-aus:hover { background: transparent; color: var(--blau); }

/* ---------- Kopfzeile / Menü ---------- */
.kopfzeile { background: var(--weiss); border-bottom: 1px solid var(--grau); position: sticky; top: 0; z-index: 100; }
.kopfzeile-innen { width: 92%; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 104px; gap: 1em; }
.logo img { height: 78px; width: auto; }
.hauptmenue > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .2em; }
.hauptmenue li { margin: 0; position: relative; }
.hauptmenue a, .hauptmenue button { display: block; padding: .8em .85em; color: var(--schwarz); font-weight: 600; font-size: .92em; background: none; border: 0; font-family: inherit; cursor: pointer; text-decoration: none; }
.hauptmenue a:hover, .hauptmenue button:hover, .hauptmenue li.aktiv > a, .hauptmenue li.aktiv > button, .hauptmenue a[aria-current="page"] { color: var(--blau); text-decoration: none; }
.hauptmenue .sprache a { border: 2px solid var(--grau); border-radius: .25em; padding: .35em .6em; margin-left: .6em; font-size: .85em; }
.hauptmenue .untermenue { list-style: none; margin: 0; padding: .4em 0; position: absolute; left: 0; top: 100%; min-width: 230px; background: var(--weiss); border: 1px solid var(--grau); border-radius: 0 0 .5em .5em; box-shadow: 0 10px 25px rgba(0,0,0,.12); display: none; }
.hauptmenue .untermenue a { padding: .6em 1.2em; font-weight: 500; }
.hauptmenue li.hat-unter:hover > .untermenue, .hauptmenue li.hat-unter:focus-within > .untermenue, .hauptmenue li.hat-unter.offen > .untermenue { display: block; }
.hauptmenue .pfeil { font-size: .8em; }
.menue-knopf { display: none; background: none; border: 2px solid var(--grau); border-radius: .35em; padding: .5em .7em; cursor: pointer; align-items: center; gap: .5em; font-family: inherit; font-weight: 600; }
.menue-knopf span:not(.menue-wort) { display: block; width: 22px; height: 3px; background: var(--schwarz); margin: 3px 0; }
.menue-knopf .menue-wort { font-size: .9em; }
@media (max-width: 1050px) {
  .menue-knopf { display: inline-flex; flex-direction: column; }
  .menue-knopf .menue-wort { display: none; }
  .hauptmenue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-bottom: 1px solid var(--grau); box-shadow: 0 10px 25px rgba(0,0,0,.12); max-height: calc(100vh - 104px); overflow: auto; }
  .hauptmenue.offen { display: block; }
  .hauptmenue > ul { flex-direction: column; align-items: stretch; padding: .5em 0 1em; }
  .hauptmenue a, .hauptmenue button { padding: .8em 6%; width: 100%; text-align: left; font-size: 1em; }
  .hauptmenue .untermenue { position: static; display: none; border: 0; box-shadow: none; background: var(--grau-hell); border-radius: 0; }
  .hauptmenue li.hat-unter:hover > .untermenue { display: none; }
  .hauptmenue li.hat-unter.offen > .untermenue { display: block; }
  .hauptmenue .untermenue a { padding-left: 10%; }
  .hauptmenue .sprache a { display: inline-block; width: auto; margin: .6em 6%; }
}

/* ---------- Kopfbild ---------- */
.hero { position: relative; min-height: 62vh; background-size: cover; background-position: center; display: flex; align-items: flex-end; color: var(--weiss); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%); }
.hero-innen { position: relative; width: 88%; max-width: var(--breite); margin: 0 auto; padding: 12vh 0 3em; }
.hero h1 { color: var(--weiss); text-shadow: 0 2px 8px rgba(0,0,0,.5); margin: 0; font-size: clamp(1.9em, 4.5vw, 3em); }
.hero-klein { min-height: 36vh; }
.hero-start { min-height: 88vh; align-items: center; }
.hero-start .hero-innen { padding: 20vh 0 8vh; text-align: center; }
.hero-start h1 { font-size: clamp(2.2em, 6vw, 4em); }
.hero-start .untertitel { font-size: clamp(1.1em, 2.2vw, 1.5em); font-family: var(--schrift-titel); text-shadow: 0 2px 8px rgba(0,0,0,.6); margin: .5em 0 0; }
@media (max-width: 700px) { .hero { min-height: 45vh; } .hero-klein { min-height: 30vh; } .hero-start { min-height: 70vh; } .hero-start h1 { font-size: 1.9em; } .hero h1 { font-size: 1.6em; overflow-wrap: anywhere; } .logo img { height: 60px; } .kopfzeile-innen { min-height: 80px; } }

/* ---------- Startseite: Kacheln ---------- */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; margin-top: -4em; position: relative; z-index: 2; }
.kachel { position: relative; display: block; border-radius: .75em; overflow: hidden; aspect-ratio: 4/3; background: var(--blau-dunkel); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kachel:hover img { transform: scale(1.05); }
.kachel span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4em 1.2em 1em; color: var(--weiss); font-family: var(--schrift-titel); font-size: 1.5em; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }
@media (max-width: 800px) { .kacheln { grid-template-columns: 1fr; margin-top: -2em; } .kachel { aspect-ratio: 16/9; } }

/* ---------- Veranstaltungskarten ---------- */
.events-liste { display: flex; flex-direction: column; gap: 2em; margin: 2em 0; }
.event-karte { display: grid; grid-template-columns: 200px 1fr; gap: 0; background: var(--weiss); border-radius: .75em; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.08); border: 1px solid var(--grau); }
.event-datum { background: var(--gelb); padding: 1.6em 1.2em; display: flex; flex-direction: column; gap: .3em; font-family: var(--schrift-titel); }
.event-datum .datum { font-size: 1.35em; line-height: 1.2; font-weight: 700; }
.event-datum .uhrzeit { font-size: 1.05em; }
.event-datum .hinweis { font-size: .9em; color: var(--blau-dunkel); margin-top: .5em; }
.event-inhalt { padding: 1.6em 2em; }
.event-inhalt h3 { margin-top: 0; font-size: 1.55em; }
.event-untertitel { font-family: var(--schrift-titel); font-size: 1.1em; color: var(--grau-text); }
.event-text { margin: .8em 0; }
.event-bild img { max-width: 260px; border-radius: .4em; }
.event-knoepfe { display: flex; flex-wrap: wrap; gap: .7em; margin: 1.2em 0 0; }
.event-vorbei .event-datum { background: var(--grau); }
@media (max-width: 700px) { .event-karte { grid-template-columns: 1fr; } .event-datum { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .8em; padding: 1em 1.4em; } .event-inhalt { padding: 1.3em 1.4em; } }

/* ---------- Vorstand ---------- */
.person { display: grid; grid-template-columns: 220px 1fr; gap: 2em; align-items: start; margin: 2.5em 0; padding-bottom: 2.5em; border-bottom: 1px solid var(--grau); }
.person:last-child { border-bottom: 0; }
.person img { border-radius: .5em; width: 100%; }
.person h3 { margin-top: 0; }
.person .rolle { color: var(--grau-text); font-family: var(--schrift-titel); font-size: 1.1em; margin-top: -.3em; }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } .person img { max-width: 240px; } }

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8em; margin: 2em 0; }
.galerie a { display: block; aspect-ratio: 3/2; overflow: hidden; border-radius: .4em; background: var(--grau); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galerie a:hover img { transform: scale(1.04); }
.lichtbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 1000; }
.lichtbox.offen { display: flex; }
.lichtbox img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; box-shadow: 0 0 40px rgba(0,0,0,.6); }
.lichtbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 2em; width: 1.6em; height: 1.6em; border-radius: 50%; cursor: pointer; line-height: 1; }
.lichtbox .schliessen { top: 1em; right: 1em; }
.lichtbox .zurueck { left: 1em; top: 50%; transform: translateY(-50%); }
.lichtbox .weiter { right: 1em; top: 50%; transform: translateY(-50%); }

/* ---------- Formulare ---------- */
.formular { max-width: 760px; }
.feld { margin-bottom: 1.2em; }
.feld label, .feld .label { display: block; font-weight: 600; margin-bottom: .35em; }
.feld input:not([type]), .feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld input[type=date], .feld input[type=number], .feld input[type=password], .feld select, .feld textarea {
  width: 100%; font: inherit; padding: .65em .8em; border: 1px solid #bbb; border-radius: .3em; background: var(--weiss); }
.feld textarea { min-height: 7em; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--blau); border-color: var(--blau); }
.feld .pflicht { color: #b00020; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
@media (max-width: 600px) { .feld-reihe { grid-template-columns: 1fr; } }
.feld .wahl label { font-weight: 400; display: flex; gap: .6em; align-items: flex-start; margin: .3em 0; }
.feld .wahl input { margin-top: .35em; }
.feld .erklaerung { font-size: .9em; color: var(--grau-text); margin: .3em 0 0; }
.fehler { color: #b00020; font-size: .92em; margin: .3em 0 0; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: #b00020; }
.hinweis-kasten { background: var(--weiss); border-left: 5px solid var(--gelb); padding: 1.2em 1.5em; margin: 1.5em 0; border-radius: .3em; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.hinweis-kasten.erfolg { border-left-color: #1b8f3a; }
.hinweis-kasten.warnung { border-left-color: #b00020; }
.honig, .versteckt { position: absolute; left: -5000px; }
.unterschrift { border: 1px dashed #999; background: var(--weiss); border-radius: .3em; touch-action: none; width: 100%; max-width: 520px; height: 180px; }

/* ---------- Festschrift / Einbettung ---------- */
.einbettung { position: relative; width: 100%; aspect-ratio: 4/3; max-height: 85vh; background: var(--grau); border-radius: .5em; overflow: hidden; }
.einbettung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-platzhalter { background: var(--blau-dunkel); color: var(--weiss); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2em; }

/* ---------- News ---------- */
.news-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2em; margin: 2em 0; }
.news-karte { background: var(--weiss); border-radius: .75em; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.08); display: flex; flex-direction: column; }
.news-karte .bild { aspect-ratio: 16/10; overflow: hidden; background: var(--grau); }
.news-karte .bild img { width: 100%; height: 100%; object-fit: cover; }
.news-karte .text { padding: 1.3em 1.5em 1.5em; display: flex; flex-direction: column; flex: 1; }
.news-karte h3 { font-size: 1.3em; margin: .3em 0 .5em; }
.news-karte .datum, .beitrag .datum { color: var(--grau-text); font-size: .9em; }
.news-karte .mehr { margin-top: auto; }
.beitrag { max-width: 860px; }
.beitrag img { border-radius: .4em; margin: 1em 0; }
.beitrag .titelbild { margin-bottom: 1.5em; }
.beitrag figure { margin: 1.5em 0; }
.beitrag figcaption { font-size: .9em; color: var(--grau-text); }

/* ---------- Fußzeile ---------- */
.fusszeile { margin-top: 4em; }
.partner { background: var(--weiss); padding: 2.5em 0; border-top: 1px solid var(--grau); }
.partner-innen { width: 88%; max-width: var(--breite); margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 4em; flex-wrap: wrap; }
.partner img { max-height: 70px; width: auto; }
.fuss-aufruf { background: var(--blau-dunkel); padding: 2.5em 0; text-align: center; }
.fuss-aufruf .knopf { color: var(--weiss); border-color: var(--weiss); }
.fuss-aufruf .knopf:hover { background: var(--weiss); color: var(--blau-dunkel); }
.fuss-innen { width: 88%; max-width: var(--breite); margin: 0 auto; padding: 2em 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1em; }
.fuss-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5em; flex-wrap: wrap; }
.fuss-links a { color: var(--schwarz); font-weight: 600; font-size: .92em; }
.fuss-copy { margin: 0; font-size: .85em; color: var(--grau-text); }
.mitglieder-leiste { background: var(--gelb); padding: 1.2em 0; text-align: center; display: flex; justify-content: center; align-items: center; gap: 1.5em; flex-wrap: wrap; }
.mitglieder-leiste a:not(.knopf) { color: var(--blau-dunkel); font-weight: 700; }

/* ---------- Kontakt / Infos ---------- */
.adresse { font-size: 1.05em; line-height: 1.8; }
.liste-haken { list-style: none; padding: 0; }
.liste-haken li { padding-left: 1.6em; position: relative; }
.liste-haken li::before { content: "✓"; color: var(--blau); position: absolute; left: 0; font-weight: 700; }
.tabelle { width: 100%; border-collapse: collapse; margin: 1.5em 0; background: var(--weiss); }
.tabelle th, .tabelle td { text-align: left; padding: .6em .8em; border-bottom: 1px solid var(--grau); vertical-align: top; }
.tabelle th { background: var(--grau-hell); font-family: var(--schrift-titel); }
.klapp summary { cursor: pointer; font-family: var(--schrift-titel); font-size: 1.3em; padding: .6em 0; }
.klapp { border-bottom: 1px solid var(--grau); }
.dateiliste { list-style: none; padding: 0; }
.dateiliste li { padding: .5em 0; border-bottom: 1px solid var(--grau); display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.dateiliste .groesse { color: var(--grau-text); font-size: .9em; }
.verwaltung .inhalt { max-width: 1400px; }
@media print { .kopfzeile, .fusszeile, .hero { display: none; } }

/* ---------- Platzhalter „Programm folgt“ ---------- */
.programm-folgt { max-width: 820px; margin: 0 auto; text-align: center; background: var(--weiss); border-radius: .6em; padding: 0 0 3em; box-shadow: 0 8px 30px rgba(0,62,132,.10); border-top: 6px solid var(--gelb); overflow: hidden; }
.programm-folgt-foto { margin: 0 0 1.5em; }
.programm-folgt-foto img { width: 100%; height: auto; }
.programm-folgt-foto figcaption { font-size: .8em; color: var(--grau-text); padding: .5em 1em 0; }
.programm-folgt > :not(.programm-folgt-foto) { margin-left: 2em; margin-right: 2em; }
.programm-folgt > .programm-folgt-logo { width: 130px; height: auto; margin: 0 auto 1.2em; }
.programm-folgt-label { font-family: var(--schrift); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blau); margin: 0 0 .3em; font-size: .85em; }
.programm-folgt h1 { font-size: 1.9em; margin-bottom: .3em; }
.programm-folgt-meta { color: var(--grau-text); margin-bottom: 1.6em; }
.programm-folgt-text { font-family: var(--schrift-titel); font-size: 1.35em; line-height: 1.4; margin-bottom: .6em; }
.programm-folgt-knoepfe { margin: 1.8em 0 0; }
@media (max-width: 700px) { .programm-folgt { padding: 0 0 2em; } .programm-folgt > :not(.programm-folgt-foto) { margin-left: 1.2em; margin-right: 1.2em; } .programm-folgt-logo { width: 100px; } .programm-folgt h1 { font-size: 1.5em; } .programm-folgt-text { font-size: 1.15em; } }

/* Hinweis in der lokalen Testversion */
.lokal-hinweis { background: #b00020; color: #fff; text-align: center; font-size: .85em; padding: .4em 1em; }
.lokal-hinweis a { color: #fff; text-decoration: underline; }

.galerie-breit { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.galerie-breit a { aspect-ratio: 842/595; background: var(--weiss); border: 1px solid var(--grau); }
.galerie-breit img { object-fit: contain; }

.zurueck-zeile { padding: 0 0 2.5em; }

.event-punkte { margin: .4em 0 .8em; }