/* EINZIGE QUELLE fuer die auf praktisch allen Seiten identischen
   Stilregeln (Kopfbereich, Navigation, Fusszeile, gemeinsame
   Bausteine wie Formular-Karten, Kontakt-Icons, Sponsor-Chips usw.)
   - automatisch erzeugt aus den bis dahin identisch dupliziert
   vorliegenden Regeln in allen Seiten der App.
   Seitenspezifische Regeln bleiben bewusst weiterhin im jeweiligen
   <style>-Block der einzelnen Seite. */

*{box-sizing:border-box;}
body{
    margin:0;
    background:var(--papier);
    color:var(--tinte);
    font-family:'Inter', sans-serif;
    line-height:1.5;
  }
a{ color:var(--tanne); }
/* Barrierefreiheit: Sprungmarke für Tastatur-/Screenreader-Nutzung */
  .skip-link{
    position:absolute;
    left:-999px;
    top:auto;
    background:var(--tanne);
    color:var(--weiss);
    padding:12px 18px;
    z-index:200;
    font-family:'Inter', sans-serif;
    font-size:13px;
    text-decoration:none;
    border-radius:2px;
  }
.skip-link:focus{ left:12px; top:12px; }
/* Sichtbarer Fokus-Rahmen für Tastaturbedienung */
  :focus-visible{ outline:3px solid var(--kupfer); outline-offset:2px; }
/* Masthead */
  header.masthead{
    max-width:1100px;
    margin:0 auto;
    padding:32px 20px 0;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
.rauten-streifen{
    height:16px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20'%3E%3Cpolygon points='0,10 10,0 20,10 10,20' fill='%230072A3'/%3E%3Cpolygon points='20,10 30,0 40,10 30,20' fill='%23166B39'/%3E%3Cpolygon points='40,10 50,0 60,10 50,20' fill='%23E8AA00'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-size:60px 16px;
    background-position:center;
    margin:22px auto 0;
    max-width:1100px;
    border-top:1px solid rgba(15,92,130,.2);
    border-bottom:1px solid rgba(15,92,130,.2);
  }
footer{ position:relative; overflow:hidden; }
footer::before{
    content:"";
    position:absolute;
    bottom:0; left:0; right:0; height:260px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Crect width='21' height='21' fill='%230072A3'/%3E%3Crect x='21' width='21' height='21' fill='none'/%3E%3Crect y='21' width='21' height='21' fill='none'/%3E%3Crect x='21' y='21' width='21' height='21' fill='%230072A3'/%3E%3C/svg%3E");
    background-size:34px 34px;
    transform:rotate(45deg) scale(1.6);
    transform-origin:center bottom;
    opacity:0.1;
    pointer-events:none;
  }
footer > *{ position:relative; z-index:1; }
.install-hilfe{
    max-width:1100px;
    margin:30px auto 40px;
    padding:0 20px;
  }
.install-toggle{
    display:block;
    width:100%;
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:var(--tanne);
    color:var(--weiss);
    border:none;
    padding:13px 16px;
    cursor:pointer;
    border-radius:2px;
  }
.install-panel{ display:none; }
.install-panel.aktiv{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:12px;
    background:var(--weiss);
    border:1px solid var(--papier-dunkler);
    padding:22px;
  }
.install-panel h4{
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--kupfer-text);
    margin:0 0 10px;
  }
.install-panel ol{
    margin:0;
    padding-left:18px;
    font-size:13px;
    line-height:1.7;
    color:var(--tinte);
  }
.install-banner{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:50;
    background:var(--tanne);
    color:var(--weiss);
    padding:14px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    font-family:'Inter', sans-serif;
    font-size:13px;
    box-shadow:0 -2px 14px rgba(0,0,0,.18);
  }
.install-banner[hidden]{ display:none; }
.install-banner button{
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    letter-spacing:.03em;
    border:none;
    padding:9px 16px;
    cursor:pointer;
    border-radius:2px;
  }
.install-banner .jetzt{ background:var(--weiss); color:var(--tanne); }
.install-banner .spaeter{ background:transparent; color:var(--weiss); border:1px solid rgba(255,255,255,.5); }
.kicker{
    font-family:'Inter', sans-serif;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--messing-text);
  }
h1.title{
    font-family:'Inter', sans-serif;
    font-optical-sizing:auto;
    font-weight:700;
    font-size:clamp(32px, 6vw, 56px);
    margin:0;
    letter-spacing:-.01em;
    line-height:1;
  }
.subtitle{
    font-family:'Inter', sans-serif;
    font-size:13px;
    color:var(--tanne);
    letter-spacing:.04em;
    margin-bottom:14px;
  }
.gemeinde-leiste #gemeinde-anzeige{ font-weight:600; color:var(--tanne); }
.gemeinde-leiste button{
    font-family:'Inter', sans-serif; font-size:12px; padding:4px 10px;
    border-radius:20px; border:1px solid var(--tanne); background:transparent;
    color:var(--tanne); cursor:pointer;
  }
.gemeinde-toggle{ display:flex; align-items:center; gap:5px; cursor:pointer; color:#555; }
.gemeinde-auswahl-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200;
    display:flex; align-items:center; justify-content:center; padding:16px;
  }
.gemeinde-auswahl-overlay[hidden]{ display:none; }
.gemeinde-auswahl-box{
    background:#fff; border-radius:12px; padding:22px; max-width:380px; width:100%;
    font-family:'Inter', sans-serif;
  }
.gemeinde-auswahl-box h3{ margin:0 0 8px; font-family:'Fraunces', serif; }
.gemeinde-hinweis-text{ font-size:13px; color:#555; margin:0 0 14px; }
#gemeinde-suche{
    width:100%; padding:10px 12px; font-size:15px; border:1px solid #ccc;
    border-radius:8px; box-sizing:border-box; margin-bottom:14px;
  }
.gemeinde-auswahl-aktionen{ display:flex; gap:10px; justify-content:flex-end; }
.gemeinde-auswahl-aktionen button{
    font-family:'Inter', sans-serif; font-size:14px; padding:8px 16px;
    border-radius:8px; cursor:pointer; border:1px solid var(--tanne);
  }
#gemeinde-uebernehmen-btn{ background:var(--tanne); color:#fff; }
.umkreis-bereich{ margin-bottom:14px; }
.umkreis-label{ display:block; font-size:12.5px; color:var(--tinte); margin-bottom:6px; }
#umkreis-regler{ width:100%; accent-color:var(--tanne); }
.umkreis-skala{ display:flex; justify-content:space-between; font-size:10px; color:var(--messing-text); margin-top:2px; }
#gemeinde-abbrechen-btn{ background:transparent; color:var(--tanne); }
.rule{
    border:none;
    border-top:3px solid var(--tinte);
    border-bottom:1px solid var(--tinte);
    height:5px;
    margin:0;
  }
/* Bergkette als Signaturelement */
  .ridge{
    display:block;
    width:100%;
    height:34px;
    margin-top:6px;
  }
.ridge path{ fill:none; stroke:var(--tanne); stroke-width:1.4; }
/* Kategorie-Nav */
  .such-bereich{
    max-width:1100px;
    margin:14px auto 0;
    padding:0 20px;
    position:relative;
  }
  .such-bereich svg.lucide-search{
    position:absolute; left:36px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--messing-text); pointer-events:none;
  }
#suche-feld{
    width:100%;
    box-sizing:border-box;
    font-family:'Inter', sans-serif;
    font-size:14px;
    padding:11px 16px 11px 38px;
    border:1.5px solid var(--tanne);
    border-radius:22px;
    background:var(--weiss);
    color:var(--tinte);
  }
#suche-feld:focus{ outline:2px solid #E8AA00; outline-offset:1px; }
nav.kategorien{
    max-width:1100px;
    margin:14px auto 0;
    padding:0 20px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    position:relative;
  }
nav.kategorien svg{ width:12px; height:12px; margin-right:3px; }
nav.kategorien > button[aria-current="true"]{
    background:var(--tanne);
    border-color:var(--tanne);
    color:var(--weiss);
  }
/* Tourismus-Klappmenü - natives <details>/<summary> für eingebaute Tastatur-/Screenreader-Bedienbarkeit */
  .klappmenue{ position:relative; }
.klappmenue summary{
    list-style:none;
    cursor:pointer;
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:var(--weiss);
    border:1px solid var(--tinte);
    color:var(--tinte);
    padding:10px 16px;
    border-radius:2px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
.klappmenue summary::-webkit-details-marker{ display:none; }
.klappmenue summary::after{ content:"▾"; font-size:10px; }
.klappmenue[open] summary{ background:var(--tanne); border-color:var(--tanne); color:var(--weiss); }
.klappmenue .klapp-liste{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    z-index:30;
    background:var(--weiss);
    border:1px solid var(--tinte);
    min-width:220px;
    display:flex;
    flex-direction:column;
    padding:6px;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
  }
.klappmenue .klapp-liste button:hover,
  .klappmenue .klapp-liste button[aria-current="true"]{ background:var(--papier-dunkler); }
.grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:22px;
    margin-top:10px;
  }
article.karte{
    background:var(--weiss);
    border:1px solid var(--papier-dunkler);
    padding:18px;
    display:block;
  }
article.karte.top{ grid-column:span 6; }
article.karte.mittig{ grid-column:span 3; }
article.karte.unten{ grid-column:span 2; }
article.karte img{
    display:block;
    width:100%;
    height:auto;
    max-height:360px;
    object-fit:cover;
    margin:10px 0 12px;
    background:var(--papier-dunkler);
    border-radius:2px;
  }
article.karte.top img{ max-height:460px; }
/* Kompaktes Listenformat für Firmen und Vereine: Logo fest links in
     eigener Spalte, Name/Ort/Text rechts daneben - bricht bei langen
     Namen nur rechts um, Logo bleibt immer an derselben Stelle. */
  article.karte-kompakt{
    background:var(--weiss);
    border:1px solid var(--papier-dunkler);
    border-radius:8px;
    padding:14px;
    display:block;
    grid-column:span 3;
  }
/* Bezahlte Anzeigen zwischen News/Events-Beiträgen sollen sich dezent,
   aber deutlich von den echten redaktionellen Beiträgen abheben - im
   selben, bereits etablierten Grün-Stil wie die "Jetzt eintragen"-
   Kästen, statt optisch wie ein ganz normaler Beitrag durchzugehen. */
article.karte-kompakt.kompakt-anzeige-hervorgehoben{
    background:rgba(22, 107, 57, .07);
    border:2px dashed var(--moos);
    border-radius:16px;
    /* WICHTIG: ".grid" setzt kein eigenes align-items, wodurch der
       Browser standardmäßig ALLE Karten einer Zeile auf die Höhe der
       größten Karte streckt (CSS-Grid-Standardverhalten). Landet die
       kompakte Werbekarte neben einer News-Karte mit großem Bild,
       wurde sie dadurch künstlich in die Länge gezogen, mit viel
       leerem Platz darunter. align-self:start beendet das gezielt
       nur für die Werbekarte - sie behält immer ihre natürliche,
       inhaltsbestimmte Höhe, unabhängig von der Nachbarkarte. */
    align-self:start;
  }
/* Der rotierende "Unsere Wegbegleiter"-Banner (unten auf jeder Seite)
   bekommt bewusst eine ANDERE, goldene statt grüne Kennzeichnung -
   Gold steht in der App bereits für "bevorzugt/Premium" (siehe
   Gewerbe-Premium-Knopf), Grün wäre hier verwirrend, da Grün woanders
   für "kostenlos eintragen" steht. Bewusst gestrichelt statt
   durchgezogen und mit dezentem statt kräftigem Goldton, damit es
   hochwertig statt aufdringlich wirkt. */
article.karte-kompakt.anzeige.wegbegleiter-premium{
    border:2px dashed #E8AA00;
    border-radius:16px;
    background:rgba(232, 170, 0, .06);
  }
.kompakt-zeile{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }
.kompakt-logo{
    flex:0 0 72px;
    width:72px;
    height:72px;
    border-radius:8px;
    overflow:hidden;
    background:var(--papier-dunkler);
    display:block;
  }
.kompakt-logo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
.kompakt-logo-platzhalter{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Fraunces', serif;
    font-size:1.6em;
    font-weight:700;
    color:var(--messing-text);
  }
.kompakt-inhalt{
    flex:1 1 auto;
    min-width:0;
  }
.kompakt-inhalt h2{
    margin:4px 0 2px;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:1.05em;
    line-height:1.35;
  }
.kompakt-text{
    margin:0;
    color:#4a4838;
    font-size:.92em;
    overflow-wrap:break-word;
  }
.kompakt-fuss{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
article.karte.anzeige{
    border:1.5px dashed var(--messing);
    border-radius:10px;
    box-shadow:0 3px 10px rgba(43,42,36,.08);
    background:var(--weiss);
  }
article.karte.anzeige img{ border-radius:6px; }
.anzeige-kontaktzeile a{ color:inherit; }
article.karte.platzhalter{
    border:2px dashed;
    background:repeating-linear-gradient(135deg, transparent, transparent 12px, rgba(0,0,0,.02) 12px, rgba(0,0,0,.02) 24px);
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:180px;
  }
article.karte.platzhalter .inhalt{ max-width:280px; }
article.karte.platzhalter .tag{ letter-spacing:.1em; }
article.karte.platzhalter h2{ font-size:1em; }
article.karte.platzhalter p{ font-size:.9em; }
article.karte.platzhalter a{ font-family:'Inter', sans-serif; font-size:11.5px; text-decoration:underline; }
article.karte.platzhalter a.platzhalter-btn{
    display:inline-block; margin-top:10px; padding:9px 20px;
    background:var(--tanne); color:#fff; border-radius:20px;
    text-decoration:none; font-weight:600; font-size:12.5px;
  }
article.karte.platzhalter a.platzhalter-btn:hover{ filter:brightness(1.1); }
article.karte.platzhalter-a{ border-color:var(--tanne); }
article.karte.platzhalter-a .tag{ color:var(--tanne); }
article.karte.platzhalter-b{ border-color:var(--kupfer-text); }
article.karte.platzhalter-b .tag{ color:var(--kupfer-text); }
article.karte.platzhalter-c{ border-color:var(--moos); }
article.karte.platzhalter-c .tag{ color:var(--moos); }
article.karte.klein img{ height:170px; width:100%; object-fit:cover; margin:8px 0 10px; border-radius:6px; }
article.karte.klein h2{ font-size:.98em; margin:0 0 5px; }
article.karte.klein p{ font-size:.88em; }
.tag{
    font-family:'Inter', sans-serif;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--kupfer-text);
    margin-bottom:6px;
  }
.regional-badge{
    display:inline-block;
    margin-left:7px;
    padding:2px 8px;
    background:var(--papier-dunkler);
    color:var(--messing-text);
    border-radius:9px;
    font-size:9.5px;
    letter-spacing:.03em;
    text-transform:none;
    font-weight:600;
    vertical-align:1px;
  }
article.karte h2{
    font-family:'Inter', sans-serif;
    font-weight:600;
    margin:0 0 6px;
    font-size:1.05em;
    line-height:1.35;
  }
article.karte.top h2{ font-size:1.3em; }
article.karte p{ margin:0; color:#4a4838; font-size:.95em; }
.eventdatum{
    font-family:'Inter', sans-serif;
    font-size:12px;
    color:var(--tanne);
    margin-top:10px;
  }
.kontakt-kasten{
    margin-top:12px;
    padding:10px 12px;
    background:var(--papier);
    border:1px solid var(--papier-dunkler);
    border-radius:8px;
  }
.kontakt-anschrift{
    font-family:'Inter', sans-serif;
    font-size:12px;
    color:var(--tinte);
    margin-bottom:8px;
  }
.kontakt-icon-reihe{
    display:flex;
    gap:10px;
  }
.kontakt-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--weiss);
    border:1px solid var(--tanne);
    font-size:15px;
    text-decoration:none;
    flex-shrink:0;
  }
.kontakt-icon svg{ width:16px; height:16px; color:var(--tanne); stroke-width:2; }
.leer{
    grid-column:1/-1;
    text-align:center;
    padding:50px 20px;
    color:var(--messing-text);
    font-family:'Inter', sans-serif;
    font-size:13px;
  }
/* Startseite */
  .start-seite{ grid-column:1/-1; }
.willkommen{
    background:var(--weiss);
    border:1px solid var(--papier-dunkler);
    padding:30px 28px;
    margin-bottom:24px;
    text-align:center;
  }
.willkommen p{
    max-width:640px;
    margin:0 auto;
    font-size:1.02em;
    color:#3d3b30;
  }
.willkommen img{
    display:block;
    width:100%;
    max-height:320px;
    object-fit:cover;
    border-radius:2px;
    margin-bottom:18px;
  }
.start-vorschau h2{
    font-family:'Inter', sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--messing-text);
    margin:0 0 12px;
    text-align:center;
  }
.start-vorschau-karte:hover{ background:var(--papier-dunkler); }
.start-vorschau-karte .tag{ margin-bottom:5px; }
.lade-hinweis{
    grid-column:1/-1;
    text-align:center;
    padding:20px;
    font-family:'Inter', sans-serif;
    font-size:12px;
    color:var(--messing-text);
  }
/* Sponsoren-Leiste */
  section.sponsoren{
    max-width:1100px;
    margin:28px auto 0;
    padding:0 20px;
  }
section.sponsoren h3{
    font-family:'Inter', sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--messing-text);
    text-align:center;
    margin-bottom:16px;
  }
.sponsoren-leiste{
    max-width:420px;
    margin:0 auto;
  }
.sponsoren-leiste article.karte{ margin:0; }
.sponsor-chip{
    background:var(--weiss);
    border:1px solid var(--papier-dunkler);
    padding:10px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--tinte);
    font-family:'Inter', sans-serif;
    font-size:12.5px;
  }
.sponsor-chip img{ height:24px; width:auto; }
.sponsor-chip-platzhalter{ border-style:dashed; font-style:italic; }
.sponsor-chip-platzhalter.platzhalter-a{ border-color:var(--tanne); color:var(--tanne); }
.sponsor-chip-platzhalter.platzhalter-b{ border-color:var(--kupfer-text); color:var(--kupfer-text); }
.sponsor-chip-platzhalter.platzhalter-c{ border-color:var(--moos); color:var(--moos); }
.footer-info{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:40px;
    margin:22px 0;
    text-align:left;
  }
.footer-info h4{
    font-family:'Inter', sans-serif;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--tanne);
    margin:0 0 8px;
  }
.footer-info p{
    margin:0;
    font-size:12.5px;
    line-height:1.7;
    color:var(--tinte);
  }
.footer-info a{ color:var(--tinte); }
.footer-social{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:18px 0;
    flex-wrap:wrap;
  }
.footer-social a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:'Inter', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    border:none;
    padding:9px 16px;
    border-radius:4px;
    transition:filter .15s ease;
    min-height:40px;
  }
.footer-social a svg{ width:16px; height:16px; flex-shrink:0; }
.footer-social a:hover{ filter:brightness(1.08); }
.footer-social a.instagram{
    background:linear-gradient(45deg, #f9ce34, #ee2a7b 60%, #6228d7);
  }
.footer-social a.facebook{ background:#1877F2; }
.footer-social button.teilen{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-family:'Inter', sans-serif; font-size:12px;
    background:#25D366; color:#fff; border:none;
    padding:9px 16px; border-radius:4px; cursor:pointer;
    transition:filter .15s ease;
    min-width:126px;
  }
.footer-social button.teilen svg{ width:16px; height:16px; flex-shrink:0; }
.footer-social button.teilen:hover{ filter:brightness(1.08); }
.footer-social button.teilen-mail{ background:#0072A3; padding:9px 12px; min-width:0; }
.footer-social button.teilen-facebook{ background:#1877F2; padding:9px 12px; min-width:0; }
.offizielle-seite{
    display:inline-block;
    margin-top:8px;
    font-family:'Inter', sans-serif;
    font-size:12px;
    color:var(--kupfer-text);
    text-decoration:underline;
  }
.versions-zeile{
    margin-top:18px;
    font-size:15px;
    color:var(--messing-text);
    opacity:.85;
  }
.versions-zeile > a svg{ width:13px; height:13px; vertical-align:-2px; margin-right:1px; }
.footer-gemeinden-zeile{
    margin-top:14px;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    font-size:11.5px;
    line-height:1.9;
    color:var(--messing-text);
    opacity:.7;
  }
.footer-gemeinden-zeile a{ color:inherit; text-decoration:none; }
.footer-gemeinden-zeile a:hover{ text-decoration:underline; }
.versions-link{
    color:inherit;
    text-decoration:none;
    cursor:default;
  }
.footer-eintragen-label{
    display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--messing-text); opacity:.75; margin:18px 0 6px;
  }
.footer-eintragen-label:first-of-type{ margin-top:0; }
.footer-link-raster{
    display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  }
.footer-link-raster a{
    display:inline-block; padding:8px 16px; border-radius:20px;
    background:var(--papier); border:1px solid var(--messing);
    color:var(--tinte) !important; text-decoration:none !important;
    font-size:12.5px; font-weight:600;
    transition:border-color .15s ease, background .15s ease;
  }
.footer-link-raster a:hover{ border-color:var(--tanne); background:var(--weiss); }
.footer-mangel-zeile{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.mangel-btn{ background:#0072A3; color:#fff !important; border:2px solid #E8AA00; }
.sponsor-btn{ background:#E8AA00; color:#0072A3 !important; border:2px solid #0072A3; }
.kontakt-btn{ background:#0072A3; color:#fff !important; border:2px solid #E8AA00; }
/* Push-Benachrichtigungen sticht bewusst in einem ganz eigenen, kräftigen
   Orange hervor - Grün, Blau und Gold sind bereits die drei
   Landkreis-Farben und für die anderen Knöpfe reserviert, ein vierter
   Knopf in einer dieser Farben würde zwischen den anderen untergehen. */
.push-btn{ background:#D9600B; color:#fff !important; border:2px solid #A8433A; }
.mangel-ansehen-btn{ background:var(--weiss); color:var(--tinte) !important; border:2px solid var(--messing); }
.mangel-btn:hover, .sponsor-btn:hover, .kontakt-btn:hover{ filter:brightness(1.06); }
.mangel-btn svg, .sponsor-btn svg, .kontakt-btn svg{ width:14px; height:14px; vertical-align:-2px; margin-right:2px; }
.sponsor-logo:hover, .sponsor-logo:active{ filter:grayscale(0%) opacity(1); }
.sponsor-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.masthead-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:8px 0 6px;
  }
.wappen{
    height:52px;
    width:auto;
    flex-shrink:0;
    border-radius:11px;
    object-fit:cover;
  }
.wappen-footer{
    height:32px;
    width:auto;
    vertical-align:middle;
    margin-right:8px;
    opacity:.85;
    border-radius:7px;
    object-fit:cover;
  }
/* ---------------- Zentraler "+ Eintragen"-Knopf ---------------- */
.eintragen-fab{
  position:fixed; right:16px; bottom:16px; z-index:500;
  display:flex; align-items:center; gap:8px;
  background:var(--tanne); color:#fff; border:none; border-radius:999px;
  padding:14px 20px; font-family:'Inter', sans-serif; font-weight:700; font-size:15px;
  box-shadow:0 4px 14px rgba(0,0,0,.25); cursor:pointer;
}
.eintragen-fab:hover{ filter:brightness(1.08); }
.eintragen-fab .plus{ font-size:20px; line-height:1; }
.eintragen-fab svg{ width:18px; height:18px; }
.eintragen-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:600;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.eintragen-overlay.offen{ opacity:1; pointer-events:auto; }
.eintragen-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:601;
  background:var(--papier); border-radius:18px 18px 0 0;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
  max-height:80vh; overflow-y:auto;
  transform:translateY(100%); transition:transform .25s ease;
  padding:18px 18px 28px;
  pointer-events:none;
}
.eintragen-sheet.offen{ transform:translateY(0); pointer-events:auto; }
.eintragen-sheet-kopf{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.eintragen-sheet-kopf h3{ margin:0; font-family:'Fraunces', serif; }
.eintragen-sheet-schliessen{
  background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--messing-text); padding:4px 8px;
}
.eintragen-gruppe-label{
  font-family:'Inter', sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--messing-text); margin:16px 0 8px;
}
.eintragen-gruppe-label:first-of-type{ margin-top:6px; }
.eintragen-raster{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.eintragen-raster a{
  display:flex; align-items:center; gap:8px;
  background:var(--weiss); border:1px solid var(--papier-dunkler); border-radius:10px;
  padding:10px 12px; font-family:'Inter', sans-serif; font-size:13.5px; color:var(--tinte); text-decoration:none;
}
.eintragen-raster a svg{ width:18px; height:18px; color:var(--tanne); flex-shrink:0; }
.eintragen-raster a:hover{ border-color:var(--tanne); }
/* Kategorie-Nav */
  .gemeinde-leiste{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-family:'Inter', sans-serif; font-size:13px; margin-bottom:12px;
  }
nav.kategorien > button, nav.kategorien > a{ text-decoration:none;
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    letter-spacing:.03em;
    text-transform:uppercase;
    background:var(--weiss);
    border:1px solid var(--tinte);
    color:var(--tinte);
    padding:8px 13px;
    cursor:pointer;
    border-radius:2px;
    min-height:34px;
    display:inline-flex;
    align-items:center;
  }
nav.kategorien > button.active, nav.kategorien > a.active{
    background:var(--tanne);
    border-color:var(--tanne);
    color:var(--weiss);
  }
nav.kategorien > button.nav-home-btn, nav.kategorien > a.nav-home-btn{
    background:var(--messing); border-color:var(--messing); color:var(--weiss);
    font-weight:600;
  }
.klappmenue .klapp-liste button, .klappmenue .klapp-liste a{ text-decoration:none;
    text-align:left;
    background:none;
    border:none;
    padding:11px 12px;
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    color:var(--tinte);
    cursor:pointer;
    border-radius:2px;
    min-height:40px;
  }
main{
    max-width:1100px;
    margin:0 auto;
    padding:24px 20px 60px;
  }
article.karte.anzeige .tag{ color:var(--messing-text); font-size:10.5px; letter-spacing:.08em; }
article.karte.anzeige h2{ font-size:1.02em; text-align:center; margin:0 0 8px; }
article.karte.anzeige p{ font-size:.85em; text-align:center; color:#5a5748; }
.anzeige-kontaktzeile{ text-align:center; font-family:'Inter', sans-serif; font-size:.82em; color:var(--messing-text); margin-top:4px; }
.hinweise-banner h2{
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:14px 0 6px;
    opacity:.85;
  }
.hinweise-banner .hinweis-eintrag{
    padding:10px 0;
    border-top:1px solid rgba(255,255,255,.25);
  }
.hinweise-banner .hinweis-eintrag:first-of-type{ border-top:none; }
.hinweise-banner .hinweis-eintrag h3{ font-family:'Inter', sans-serif; font-size:.98em; margin:0 0 4px; }
.hinweise-banner .hinweis-eintrag p{ margin:0; font-size:.95em; opacity:.92; }
.start-werbebanner{
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--weiss);
    border:2px solid var(--kupfer);
    padding:16px 20px;
    margin-bottom:24px;
  }
.start-werbebanner.platzhalter{ border-style:dashed; }
.start-werbebanner img{ width:70px; height:70px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.start-werbebanner .inhalt{ flex:1; }
.start-werbebanner .tag{ margin-bottom:3px; }
.start-werbebanner h3{ font-family:'Inter', sans-serif; margin:0 0 3px; font-size:.98em; }
.start-werbebanner p{ margin:0; font-size:.92em; color:#4a4838; }
.start-vorschau-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
  }
.start-vorschau-karte{
    background:var(--weiss);
    border:1px solid var(--papier-dunkler);
    padding:14px 16px;
    text-align:left;
    cursor:pointer;
    display:block;
    width:100%;
  }
.start-vorschau-karte h3{ font-family:'Inter', sans-serif; margin:0; font-size:.95em; color:var(--tinte); }
.gewerbe-hinweis{
    grid-column:1/-1;
    margin-top:16px;
    padding:22px;
    text-align:center;
    background:var(--weiss);
    border:1px dashed var(--messing);
    font-size:.97em;
    color:var(--tinte);
  }
.gewerbe-hinweis a{ color:var(--tanne); font-weight:600; }
article.karte.klein{ padding:14px; }
.kompakt-ort{
    font-family:'Inter', sans-serif;
    font-size:12px;
    color:var(--messing-text);
    margin-bottom:4px;
  }
footer{
    max-width:1100px;
    margin:28px auto 0;
    padding:20px;
    text-align:center;
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    color:var(--messing-text);
    border-top:1px solid var(--papier-dunkler);
  }
.mangel-btn, .sponsor-btn, .kontakt-btn, .push-btn, .mangel-ansehen-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 16px; border-radius:9px;
    text-decoration:none !important; font-weight:700; font-size:12.5px;
    cursor:pointer; font-family:'Inter', sans-serif;
  }
.push-btn svg, .push-btn i, .mangel-btn svg, .mangel-btn i,
.sponsor-btn svg, .sponsor-btn i, .kontakt-btn svg, .kontakt-btn i,
.mangel-ansehen-btn svg, .mangel-ansehen-btn i{ width:15px; height:15px; flex-shrink:0; }
.sponsoren-bereich{ margin-top:26px; }
.sponsoren-logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:10px; }
.sponsor-logo{
    width:58px; height:58px; border-radius:10px; overflow:hidden;
    background:var(--weiss); border:1px solid var(--papier-dunkler);
    filter:grayscale(65%) opacity(0.55); transition:filter .15s ease;
  }
header.masthead::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0; height:200px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Crect width='21' height='21' fill='%230072A3'/%3E%3Crect x='21' width='21' height='21' fill='none'/%3E%3Crect y='21' width='21' height='21' fill='none'/%3E%3Crect x='21' y='21' width='21' height='21' fill='%230072A3'/%3E%3C/svg%3E");
    background-size:34px 34px;
    transform:rotate(45deg) scale(1.6);
    transform-origin:center top;
    opacity:0.1;
    pointer-events:none;
  }
.sponsoren h3{
    font-family:'Inter', sans-serif; font-size:12px; text-transform:uppercase;
    letter-spacing:.1em; color:var(--messing-text); text-align:center; margin-bottom:16px;
  }
.sponsor-chip{
    background:var(--weiss); border:1px solid var(--papier-dunkler); padding:10px 16px;
    display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinte);
    font-family:'Inter', sans-serif; font-size:12.5px;
  }

/* Schmalere Bildschirme: Navigation etwas kompakter darstellen, damit
   alle Kategorien gut nebeneinander passen. WICHTIG: "Gewerbe" ist ein
   <details><summary>-Aufklappmenü, kein <button>/<a> wie die anderen
   Navigationspunkte - muss deshalb explizit mit aufgeführt werden,
   sonst bleibt es bei schmalen/mittleren Fensterbreiten größer als
   alle Geschwister-Knöpfe (genau der gemeldete, sichtbare
   Größen-Unterschied). */
@media (max-width:480px){
  nav.kategorien{ gap:6px; }
  nav.kategorien > button, nav.kategorien > a, nav.kategorien details.klappmenue summary{
    font-size:10px;
    padding:7px 9px;
    letter-spacing:.02em;
  }
  nav.kategorien > button.nav-home-btn, nav.kategorien > a.nav-home-btn{
    padding:7px 10px;
  }
}

/* Gemeinsame "Jetzt eintragen"-Hinweiskästen (Events, Amtliches, Presse,
   Vereine, Ab Hof, Gesundheit, Anzeigen, Jobs) - deckt sowohl den
   Klassennamen .gewerbe-hinweis (Startseite, je nach Kategorie) als
   auch .anzeigen-hinweis-banner (Anzeigen, Jobs) ab, die bis hierher
   als getrennte, fast identische Kopien vorlagen.
   Gestaltung: dezentes, durchscheinendes Landkreis-Grün (passend zum
   Logo) statt kräftigem Blau, gestrichelter statt durchgezogener
   Rahmen, stärker abgerundete Ecken, weißer statt farbiger
   Eintragen-Knopf, einheitliche App-Schrift (Inter) statt der
   dekorativen Fraunces-Schrift bei der Überschrift. */
.gewerbe-hinweis, .anzeigen-hinweis-banner{
  grid-column:1/-1;
  margin-bottom:20px;
  padding:24px 24px;
  text-align:center;
  background:rgba(22, 107, 57, .07);
  border:2px dashed var(--moos);
  border-radius:20px;
  color:var(--tinte);
}
.gewerbe-hinweis .eintragen-titel, .anzeigen-hinweis-banner .eintragen-titel{
  font-family:'Inter', sans-serif;
  font-size:1.05em;
  font-weight:700;
  margin:0 0 10px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  line-height:1.3;
}
.gewerbe-hinweis .eintragen-titel svg, .anzeigen-hinweis-banner .eintragen-titel svg{
  width:20px; height:20px; flex-shrink:0; margin-top:1px;
}
.gewerbe-hinweis .eintragen-unterzeile, .anzeigen-hinweis-banner .eintragen-unterzeile{
  font-family:'Inter', sans-serif;
  font-size:12px;
  color:var(--messing-text);
  opacity:1;
  margin-top:10px;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}
.gewerbe-hinweis a.eintragen-btn, .anzeigen-hinweis-banner a.eintragen-btn{
  display:inline-block;
  margin-top:6px;
  background:var(--weiss);
  color:var(--tinte) !important;
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:13px;
  padding:9px 22px;
  border-radius:20px;
  border:1.5px solid var(--tinte);
  text-decoration:none !important;
  cursor:pointer;
}
.gewerbe-hinweis a.eintragen-btn:hover, .anzeigen-hinweis-banner a.eintragen-btn:hover{
  background:var(--papier-dunkler);
}
/* Firmen-Eintrag ist kostenpflichtig - bewusst golden statt weiß, damit
   sofort klar ist: hier geht es um eine bezahlte Anmeldung, nicht um
   ein kostenloses Eintragen wie bei den übrigen Kategorien. */
.gewerbe-hinweis a.eintragen-btn.kostenpflichtig{ background:#E8AA00; color:var(--tinte) !important; border-color:#E8AA00; }

/* Erfolgs-Bestätigung nach dem Absenden eines Eintragungsformulars -
   siehe /js/formular-erfolg.js für die genaue Verwendung und den
   Hintergrund dazu. */
.formular-erfolg-overlay{
  position:fixed; inset:0; background:rgba(43,42,36,.6); z-index:1100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.formular-erfolg-karte{
  background:var(--weiss); border-radius:16px; padding:36px 28px 30px;
  max-width:380px; width:100%; text-align:center;
  box-shadow:0 16px 48px rgba(0,0,0,.28);
}
.formular-erfolg-haken{
  width:64px; height:64px; border-radius:50%;
  background:var(--moos); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.formular-erfolg-haken svg{ width:34px; height:34px; stroke-width:3; }
.formular-erfolg-karte h2{
  font-family:'Fraunces', serif; font-size:1.5em; margin:0 0 12px; color:var(--tinte);
}
.formular-erfolg-karte p{
  font-family:'Inter', sans-serif; font-size:14px; color:var(--messing-text);
  line-height:1.55; margin:0 0 26px;
}
.formular-erfolg-knoepfe{ display:flex; flex-direction:column; gap:10px; }
.formular-erfolg-btn{
  display:block; padding:12px 20px; border-radius:9px;
  font-family:'Inter', sans-serif; font-weight:700; font-size:14px;
  text-decoration:none; cursor:pointer; border:none;
}
.formular-erfolg-btn.primaer{ background:var(--tanne); color:#fff; }
.formular-erfolg-btn.primaer:hover{ filter:brightness(1.08); }
.formular-erfolg-btn.sekundaer{ background:var(--weiss); color:var(--tinte); border:1.5px solid var(--messing); }
.formular-erfolg-btn.sekundaer:hover{ background:var(--papier-dunkler); }

/* Teilen-Auswahlmenü (Facebook/X/WhatsApp/Link kopieren) - erscheint nur
   als Rückfall, wenn das Gerät keinen eigenen nativen Teilen-Dialog
   anbietet (v.a. am Desktop-Computer, siehe teilen-kalender.js und die
   entsprechenden Stellen bei Fotos/Lieblingsplätzen). Ohne dieses Menü
   landete man dort bisher direkt und ausschließlich bei WhatsApp, ohne
   weitere Wahl. */
.teilen-fallback-overlay{
  position:fixed; inset:0; background:rgba(43,42,36,.45); z-index:9000;
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:600px){
  .teilen-fallback-overlay{ align-items:center; }
}
.teilen-fallback-menu{
  background:var(--weiss); border-radius:16px 16px 0 0; padding:22px 20px 26px;
  width:100%; max-width:380px; box-sizing:border-box;
}
@media (min-width:600px){
  .teilen-fallback-menu{ border-radius:16px; }
}
.teilen-fallback-menu h3{
  font-family:'Inter', sans-serif; font-size:15px; font-weight:700; color:var(--tinte);
  margin:0 0 16px; text-align:center;
}
.teilen-fallback-reihe{ display:flex; gap:12px; justify-content:center; margin-bottom:6px; }
.teilen-fallback-reihe a, .teilen-fallback-reihe button{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Inter', sans-serif; font-size:11.5px; color:var(--tinte);
  text-decoration:none; background:none; border:none; cursor:pointer;
  width:72px;
}
.teilen-fallback-reihe .teilen-fallback-icon{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff;
}
.teilen-fallback-icon.whatsapp{ background:#25D366; }
.teilen-fallback-icon.facebook{ background:#1877F2; }
.teilen-fallback-icon.x{ background:#000; }
.teilen-fallback-icon.kopieren{ background:var(--messing); }
.teilen-fallback-icon svg{ width:24px; height:24px; }
.teilen-fallback-schliessen{
  display:block; width:100%; margin-top:18px; padding:11px; border-radius:9px;
  font-family:'Inter', sans-serif; font-weight:600; font-size:13.5px;
  background:var(--papier); border:1px solid var(--papier-dunkler); color:var(--tinte); cursor:pointer;
}