/* Öffentliche Website (Schritt 7) – eigenes, schlichtes Layout */
:root{ --grün:#4A5E4A; --grün-d:#33422F; --sand:#f6f4ee; --tinte:#232a21; }
body.pub{ margin:0; background:#fff; color:var(--tinte);
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.55; }
.pub .wrap{ max-width:1040px; margin:0 auto; padding:0 20px; }

/* Kopf */
.pubbar{ background:var(--grün-d); color:#fff; position:sticky; top:0; z-index:500; }
/* Kopfzeile fluchtet mit dem Inhalt (max-width 1040 aus .pub .wrap) */
.pubbar-in{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.publogo{ color:#fff; text-decoration:none; font-weight:800; letter-spacing:.5px; font-size:1.25rem; }
.publogo span{ font-weight:400; opacity:.8; }
.pubnav{ display:flex; gap:.1rem; align-items:center; flex-wrap:wrap; }
.pubnav a{ color:#edf1ea; text-decoration:none; padding:.4rem .5rem; border-radius:6px;
  font-size:.9rem; white-space:nowrap; }
.pubnav a:hover{ background:rgba(255,255,255,.12); }
.pubnav a.active{ background:rgba(255,255,255,.18); color:#fff; }
.pubnav a.pub-login{ border:1px solid rgba(255,255,255,.4); margin-left:.35rem; }

.pub .pubmain{ padding:2.4rem 20px 3rem; }   /* hoehere Spezifitaet als .pub .wrap */
.pubfoot{ background:var(--sand); color:#555; padding:1.4rem 0; margin-top:3rem; font-size:.9rem; border-top:1px solid #e6e2d8; }
.pubfoot a{ color:var(--grün-d); }

/* Hero */
.hero{ background:linear-gradient(135deg,var(--grün-d),var(--grün)); color:#fff;
  border-radius:0 0 18px 18px; padding:3.2rem 20px 3rem; margin-bottom:0; }
.hero .wrap{ padding:0; }
.hero h1{ margin:.2rem 0 .6rem; font-size:2.15rem; line-height:1.2; }
.hero p{ font-size:1.15rem; max-width:60ch; opacity:.95; margin:.2rem 0 1.3rem; }
.hero .cta{ display:inline-block; background:#fff; color:var(--grün-d); font-weight:700;
  text-decoration:none; padding:.7rem 1.2rem; border-radius:8px; }
.hero .cta.sec{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); margin-left:.5rem; }

/* Statistik */
.stats{ display:flex; gap:1rem; flex-wrap:wrap; margin:.6rem 0 0; }
.stat{ background:rgba(255,255,255,.12); border-radius:10px; padding:.7rem 1.1rem; }
.stat b{ display:block; font-size:1.6rem; }
.stat span{ opacity:.9; font-size:.9rem; }

/* Karten/Kacheln */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem; margin:1.4rem 0; }
.tile{ border:1px solid #dde5d8; border-radius:12px; padding:1.2rem; text-decoration:none; color:inherit; background:#fff; }
.tile:hover{ border-color:var(--grün); box-shadow:0 4px 16px rgba(74,94,74,.08); }
.tile h3{ margin:.1rem 0 .4rem; color:var(--grün-d); }
.tile p{ margin:0; color:#555; font-size:.95rem; }

.pub h2{ color:var(--grün-d); border-bottom:2px solid #e3eadd; padding-bottom:.3rem; margin-top:2rem; }
.lead{ font-size:1.1rem; color:#444; max-width:66ch; }
.karte-box{ height:560px; border-radius:12px; overflow:hidden; border:1px solid #d8e2d3; }
.schutz{ background:var(--sand); border-left:4px solid var(--grün); padding:.7rem 1rem; border-radius:6px; margin:1rem 0; color:#444; }
.kontakt{ background:var(--sand); border-radius:12px; padding:1.2rem 1.4rem; max-width:40ch; }
model-viewer{ width:100%; height:420px; background:#f0efe9; border-radius:12px; }
.model-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }

/* --- Responsive Navigation (Hamburger) --- */
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;}
.navtoggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s;}
.pubbar.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.pubbar.nav-open .navtoggle span:nth-child(2){opacity:0;}
.pubbar.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:1040px){
  .pubbar-in{flex-wrap:wrap;height:auto;min-height:60px;}
  .navtoggle{display:block;}
  .pubnav{display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:0;
    margin-top:.3rem;padding:.3rem 0 .6rem;border-top:1px solid rgba(255,255,255,.16);}
  .pubbar.nav-open .pubnav{display:flex;}
  .pubnav a{padding:.8rem .5rem;border-radius:6px;font-size:1rem;}
  .pubnav a.pub-login{margin:.6rem .5rem .2rem;text-align:center;border:1px solid rgba(255,255,255,.5);}
}

/* --- Mobile: Inhalte --- */
@media (max-width:640px){
  .pub .pubmain{padding:1.8rem 14px 2.4rem;}
  .hero{padding:2.2rem 16px 2rem;}
  .hero h1{font-size:1.6rem;}
  .hero p{font-size:1.02rem;}
  .karte-box{height:62vh;min-height:340px;}
  .statgrid{grid-template-columns:1fr;}
  .brow{grid-template-columns:8.5rem 1fr 2.4rem;}
  model-viewer{height:320px;}
}

/* --- Nav-Dropdowns (Untermenüs) --- */
.navdrop{ position:relative; }
.navdrop-t{ background:none; border:0; cursor:pointer; color:#edf1ea; font:inherit;
  font-size:.9rem; padding:.4rem .5rem; border-radius:6px; white-space:nowrap; }
.navdrop-t:hover{ background:rgba(255,255,255,.12); }
.navdrop-t.active{ background:rgba(255,255,255,.18); color:#fff; }
.navdrop-pop{ display:none; position:absolute; top:100%; left:0; min-width:200px;
  background:#fff; border:1px solid #cfdccb; border-radius:8px; padding:.35rem;
  box-shadow:0 8px 24px rgba(20,40,25,.18); z-index:600; }
.navdrop:hover .navdrop-pop, .navdrop.open .navdrop-pop{ display:block; }
.navdrop-pop a{ display:block; color:#232a21; padding:.5rem .7rem; border-radius:6px;
  font-size:.92rem; }
.navdrop-pop a:hover{ background:#f0f4ed; }
.navdrop-pop a.active{ background:#dde7da; color:#33422F; font-weight:600; }
@media (max-width:1040px){
  .navdrop{ width:100%; }
  .navdrop-t{ width:100%; text-align:left; padding:.8rem .5rem; font-size:1rem; }
  .navdrop-pop{ display:block; position:static; background:transparent; border:0;
    box-shadow:none; padding:0 0 .2rem .9rem; }
  .navdrop-pop a{ color:#edf1ea; padding:.6rem .5rem; }
  .navdrop-pop a:hover{ background:rgba(255,255,255,.12); }
  .navdrop-pop a.active{ background:rgba(255,255,255,.18); color:#fff; }
}

/* --- Hero-Statistik: klickbar mit Hover --- */
a.stat{ text-decoration:none; color:inherit; display:block;
  transition:background .15s, transform .15s, box-shadow .15s; }
a.stat:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.18); }

/* --- Startseite: Aktuelles-Teaser --- */
.home-aktuell{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1rem; margin:1rem 0 .6rem; }
.ha-card{ border:1px solid #dde5d8; border-radius:12px; overflow:hidden; background:#fff;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:box-shadow .15s, border-color .15s; }
.ha-card:hover{ border-color:var(--grün); box-shadow:0 4px 16px rgba(74,94,74,.12); }
.ha-card img{ width:100%; height:120px; object-fit:cover; }
.ha-card img.einpassen{ object-fit:contain; background:#f4f2ec; padding:4px 0; }
/* Platzhalter für Beiträge ohne Bild: Vereinslogo auf Grün */
.ha-card .ha-ph{ height:120px; background:var(--grün, #4A5E4A); display:flex; align-items:center; justify-content:center; }
.ha-card .ha-ph img{ width:auto; height:72px; object-fit:contain; }
.ha-card .ha-body{ padding:.7rem .85rem .85rem; }
.ha-card h3{ margin:0 0 .25rem; font-size:.98rem; color:var(--grün-d); line-height:1.3; }
.ha-card .ha-datum{ font-size:.78rem; color:#75806f; }
/* Kennzeichen für kommende Termine (Startseite + Aktuelles) */
.termin-badge{ display:inline-block; background:#4A5E4A; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 7px; border-radius:999px; margin-right:6px; vertical-align:1px; }
.mehr-link{ font-weight:600; color:var(--grün); text-decoration:none; }
.mehr-link:hover{ text-decoration:underline; }

/* --- Themen-Kacheln: Farbwelt + Icons --- */
.tile{ position:relative; padding-top:1.1rem; }
.tile .ticon{ font-size:1.6rem; line-height:1; display:block; margin-bottom:.5rem; }
.tile.t-aktuelles{ background:#fdf6e8; border-color:#ecd9ae; }
.tile.t-fundorte{ background:#e9f2ea; border-color:#bcd6c0; }
.tile.t-epochen{ background:#f3ede2; border-color:#ddcfb2; }
.tile.t-arten{ background:#ece9f4; border-color:#c9c2e0; }
.tile.t-3d{ background:#e8f0f5; border-color:#b9d2e0; }
.tile.t-galerie{ background:#fdeeee; border-color:#eccaca; }
.tile.t-verein{ background:#eaf3f0; border-color:#bedcd2; }
.tile.t-bibliothek{ background:#f0ede5; border-color:#d6cdb4; }
.tile:hover{ box-shadow:0 6px 18px rgba(74,94,74,.14); transform:translateY(-2px); }
.tile{ transition:box-shadow .15s, transform .15s, border-color .15s; }

/* --- Footer: Social-Media-Icons --- */
.foot-in{ display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; }
.social{ display:flex; gap:12px; align-items:center; }
.social a{ color:#5a6b5a; display:inline-flex; padding:6px; border-radius:8px;
  transition:color .15s, background .15s, transform .15s; }
.social a:hover{ color:#33422F; background:#e8efe8; transform:translateY(-2px); }

/* --- Logo-Marke im Kopf --- */
.publogo{ display:flex; align-items:center; gap:10px; }
.logomark{ width:50px; height:50px; display:block; }

/* Sticky-Badge: Feld-Erfassung für Mitglieder (alle öffentlichen Seiten) */
.feldbadge{ position:fixed; right:0; top:34%; z-index:1300; }
.fb-tab{ position:absolute; right:0; top:0; background:#A34A26; color:#fff; border:0;
  cursor:pointer; padding:13px 7px; border-radius:10px 0 0 10px; writing-mode:vertical-rl;
  font-weight:700; font-size:.85rem; letter-spacing:.02em; white-space:nowrap;
  box-shadow:-2px 2px 10px rgba(0,0,0,.22); }
.fb-tab:hover{ background:#7E361B; }
.fb-panel{ display:none; position:absolute; right:42px; top:0; width:252px; background:#fff;
  border:1px solid #cddac9; border-radius:12px; padding:16px 18px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.24); }
.feldbadge.open .fb-panel{ display:block; }
.fb-x{ position:absolute; top:5px; right:9px; background:none; border:0; font-size:1.4rem;
  line-height:1; color:#8a938a; cursor:pointer; }
.fb-h{ display:block; color:#33422F; font-size:1rem; margin:0 0 6px; padding-right:14px; }
.fb-t{ font-size:.82rem; color:#4a5548; margin:0 0 8px; line-height:1.5; }
.fb-qr{ display:block; margin:0 auto 8px; background:#fff; border-radius:8px; }
.fb-s{ font-size:.76rem; color:#5a6656; margin:0; line-height:1.5; }
.fb-s a{ color:#A34A26; }
@media (max-width:760px){
  /* Handy: runder Button unten rechts statt Seitenlasche. Vorher war die Huelle
     unten verankert, die Lasche hing aber von top:0 nach unten -> auf dem iPhone
     fast komplett unterhalb des Bildschirms. */
  .feldbadge{ top:auto; bottom:16px; right:16px; }
  .fb-tab{ top:auto; bottom:0; right:0; writing-mode:horizontal-tb; width:52px; height:52px;
    padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:1.45rem; box-shadow:0 4px 14px rgba(0,0,0,.28); }
  .fb-tab .fb-txt{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; }
  .fb-panel{ right:0; top:auto; bottom:62px; width:min(84vw,280px); }
  .fb-qr{ display:none; }
  /* Seitenende nicht unter dem runden Button */
  .pubfoot{ padding-bottom:84px; }
}

/* --- Mobil im Hochformat (Smartphones, z. B. iPhone 13 = 390 px) ------------
   Buttons untereinander mit Abstand und gleicher Breite, Zahlen-Kacheln in
   gleich breiten Spalten statt Zufallsumbruch, Eingabefelder mit 16 px
   (darunter zoomt iOS Safari beim Antippen ungefragt in die Seite). */
@media (max-width:600px){
  .hero .cta, .hero .cta.sec{ display:block; text-align:center; margin:0 0 .7rem; }
  .hero .stats{ margin-top:1.2rem; }
  .stats, .pubmain .bibstats{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
  .stats > :last-child:nth-child(odd),
  .pubmain .bibstats > :last-child:nth-child(odd){ grid-column:1 / -1; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea{
    font-size:16px !important; }
  /* Fingertaugliche Tippflaechen und Abstaende */
  .pubfoot .foot-in a{ display:inline-block; padding:12px 2px; }
  .pubmain .abc, .pubmain .seiten{ gap:8px; }   /* Buchstaben-Leiste, Seitennummern */
  .pubmain .med-card a.dl{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; }
  /* Kleingedrucktes in Formularen (z. B. Zahlungsweise, SEPA-Hinweis) lesbar */
  .pubmain form small{ font-size:13px; }
}