/* web/css/app.css - eigenes Styling ueber Bootstrap 5.
   Farben aus dem bisherigen Auftritt (CI bleibt): Gelb, Hellgelb, Braun, Rost. */

:root {
    --auu-gelb: #EDBA44;
    --auu-gelb-hell: #FFDD6B;
    --auu-creme: #FFEDB5;
    --auu-papier: #FFFBF0;
    --auu-braun: #7A390A;
    --auu-braun-dunkel: #5A2A07;
    --auu-rost: #B55410;
    --auu-orange: #DF6531;
    --auu-tinte: #2E1F12;

    --bs-link-color: var(--auu-braun);
    --bs-link-color-rgb: 122, 57, 10;
    --bs-link-hover-color: var(--auu-rost);
    --bs-link-hover-color-rgb: 181, 84, 16;
    --bs-body-color: var(--auu-tinte);
    --bs-body-bg: var(--auu-papier);
    --bs-border-radius: .5rem;
    --bs-focus-ring-color: rgba(181, 84, 16, .3);
    /* Fehlerrot dunkler: #dc3545 hat auf Papier nur 4,4:1 */
    --bs-form-invalid-color: #b02a37;
    --bs-form-invalid-border-color: #b02a37;
    --bs-danger-text-emphasis: #8a1f2a;
}

body { background: var(--auu-papier); }

.auu-sprung {
    position: absolute; left: 1rem; top: 1rem; z-index: 1080;
    background: #fff; padding: .5rem 1rem; border-radius: .5rem;
}

/* Kopf: Logo auf Gelb, Menue in Braun ------------------------------------- */
.auu-kopf { background: var(--auu-gelb); }
.auu-logo { display: inline-block; max-width: 100%; }
.auu-logo img { display: block; max-width: 100%; height: auto; }

.auu-nav { background: var(--auu-braun); padding-top: .25rem; padding-bottom: .25rem; }
.auu-nav .nav-link { color: #fff3d6; }
.auu-nav .nav-link:hover,
.auu-nav .nav-link:focus { color: #fff; }
.auu-nav .nav-link.active { color: var(--auu-braun); background: var(--auu-gelb-hell); border-radius: .4rem; font-weight: 600; }

/* Fuss -------------------------------------------------------------------- */
.auu-fuss { background: var(--auu-gelb); color: var(--auu-tinte); border-top: 4px solid var(--auu-braun); }
.auu-fuss a { color: var(--auu-braun); font-weight: 500; }
.auu-fuss-hoernchen { width: 60px; height: auto; }
.auu-fuss-liste { columns: 2; column-gap: 1.5rem; }
.auu-fuss-liste li { margin-bottom: .35rem; break-inside: avoid; }
.auu-fuss-unten { background: rgba(122, 57, 10, .08); border-top: 1px solid rgba(122, 57, 10, .2); }

/* Werbebanner (App\Werbung): Bild mit Link, Kennzeichnung "Werbung" */
.auu-werbung { text-align: center; line-height: 0; }
.auu-werbung img { max-width: 100%; height: auto; display: inline-block; }
.auu-werbung-hinweis { display: block; line-height: 1.2; font-size: .7rem; color: #6f5f4d; letter-spacing: .04em; margin-bottom: .2rem; }
.auu-werbung-anzeige { margin-bottom: 1rem; }

/* Knoepfe ------------------------------------------------------------------ */
.btn-auu {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--auu-rost);
    --bs-btn-border-color: var(--auu-rost);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--auu-braun);
    --bs-btn-hover-border-color: var(--auu-braun);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--auu-braun-dunkel);
    --bs-btn-active-border-color: var(--auu-braun-dunkel);
    --bs-btn-disabled-bg: var(--auu-rost);
    --bs-btn-disabled-border-color: var(--auu-rost);
    --bs-btn-focus-shadow-rgb: 181, 84, 16;
}
.btn-outline-auu {
    --bs-btn-color: var(--auu-braun);
    --bs-btn-border-color: var(--auu-braun);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--auu-braun);
    --bs-btn-hover-border-color: var(--auu-braun);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--auu-braun-dunkel);
    --bs-btn-active-border-color: var(--auu-braun-dunkel);
    --bs-btn-focus-shadow-rgb: 122, 57, 10;
}

.nav-pills { --bs-nav-pills-link-active-bg: var(--auu-braun); }
.nav-pills .nav-link:not(.active) { color: var(--auu-braun); }

/* Bausteine ---------------------------------------------------------------- */
.auu-vorzeile {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--auu-rost);
}

.auu-held { background: linear-gradient(180deg, var(--auu-creme), var(--auu-papier)); padding: clamp(2rem, 6vw, 4.5rem) 0; }
.auu-held h1 { color: var(--auu-braun); font-weight: 800; }
.auu-held .lead { max-width: 40rem; }

.auu-karte { background: #fff; border: 1px solid #f0dfb5; border-radius: .75rem; }
.auu-karte-link { text-decoration: none; color: inherit; display: block; height: 100%; transition: border-color .15s, box-shadow .15s; }
.auu-karte-link:hover { border-color: var(--auu-gelb); box-shadow: 0 .25rem .75rem rgba(122, 57, 10, .12); }
.auu-symbol {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--auu-creme); color: var(--auu-rost); font-size: 1.35rem;
}

.badge-auu { background: var(--auu-creme); color: var(--auu-braun); font-weight: 600; }

/* Umsonstlaeden -------------------------------------------------------------- */
.auu-landkarte { height: clamp(320px, 55vh, 560px); border-radius: .75rem; border: 1px solid #f0dfb5; z-index: 0; }
.auu-laden { scroll-margin-top: 1rem; }
.auu-laden:target { outline: 3px solid var(--auu-gelb); outline-offset: 2px; }
.auu-laden dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; margin: 0; }
.auu-laden dt { font-weight: 500; color: #7a6a58; }
.auu-laden dd { margin: 0; overflow-wrap: anywhere; }

/* Links -------------------------------------------------------------------- */
.auu-link-liste li + li { border-top: 1px solid #f3e6c6; }
.auu-link-liste .url { color: #7a6a58; font-size: .875rem; overflow-wrap: anywhere; }

/* Fotos beim Inserieren ------------------------------------------------------ */
.auu-ablage {
    display: block; text-align: center; cursor: pointer;
    padding: 1.5rem 1rem; border: 2px dashed #e6cf95; border-radius: .75rem;
    background: var(--auu-papier); color: var(--auu-braun);
}
.auu-ablage:hover, input:focus-visible + .auu-ablage, .auu-ablage:focus-within, .auu-ablage.ist-ueber { border-color: var(--auu-rost); background: var(--auu-creme); }
.auu-ablage.ist-ueber { border-style: solid; }
.auu-bild-kachel { position: relative; aspect-ratio: 1; border-radius: .5rem; overflow: hidden; background: #f3ead2; }
.auu-bild-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auu-bild-titel { position: absolute; left: .4rem; top: .4rem; }
.auu-bild-knoepfe { position: absolute; right: .4rem; bottom: .4rem; display: flex; gap: .25rem; }

/* Anzeige ---------------------------------------------------------------------- */
.auu-galerie { background: #2e1f12; }
.auu-galerie .carousel-item img { width: 100%; height: clamp(240px, 50vh, 480px); object-fit: contain; }
.auu-galerie-werbung { position: relative; }
.auu-galerie-werbung-hinweis { position: absolute; top: .5rem; right: .75rem; font-size: .7rem; color: #f3e6c6; background: rgba(0, 0, 0, .45); padding: .1rem .4rem; border-radius: .25rem; }
.auu-anzeige-text { overflow-wrap: anywhere; }

/* Meine Anzeigen --------------------------------------------------------------- */
.auu-meine li + li { border-top: 1px solid #f3e6c6; }
.auu-meine a:hover .fw-semibold { color: var(--auu-rost); }
.auu-meine-bild {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: .4rem; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; background: #f3ead2; color: #b9a476;
}
.auu-meine-bild img { width: 100%; height: 100%; object-fit: cover; }
.min-w-0 { min-width: 0; }

/* Anzeigenliste ------------------------------------------------------------------ */
.auu-kategorien a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .25rem .4rem; border-radius: .35rem; text-decoration: none; color: var(--auu-tinte); }
.auu-kategorien a:hover { background: var(--auu-creme); }
.auu-kategorien a.aktiv { background: var(--auu-braun); color: #fff; }
.auu-kategorien .anzahl { margin-left: auto; font-size: .75rem; color: #6f5f4d; }
.auu-kategorien a.aktiv .anzahl { color: #f3dcb5; }
.auu-kachel-bild {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; background: #f3ead2; color: #c8b07a; font-size: 2.25rem;
}
.auu-kachel-bild img { width: 100%; height: 100%; object-fit: cover; }
.auu-kachel-marke { position: absolute; left: .5rem; top: .5rem; }
.auu-kachel-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; }

/* Gaestebuch / Fragen ------------------------------------------------------------ */
.auu-antwort { border-left: 3px solid var(--auu-gelb); background: var(--auu-papier); padding: .6rem .9rem; border-radius: 0 .4rem .4rem 0; }
.auu-antwort p:last-child, .auu-anzeige-text p:last-child { margin-bottom: 0; }
@media (min-width: 992px) { .auu-klebend { position: sticky; top: 1rem; } }
.auu-fragen .accordion-button:not(.collapsed) { background: var(--auu-creme); color: var(--auu-braun); box-shadow: none; }
.auu-fragen .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(181, 84, 16, .25); }
.auu-fragen .accordion-item { border-color: #f0dfb5; }

/* Menue: Untermenue ------------------------------------------------------------- */
.dropdown-item.active, .dropdown-item:active { background: var(--auu-braun); color: #fff; }

/* Admin: Sperrliste, Kategorien */
.auu-notiz { font-size: .8rem; white-space: normal; max-height: 4.5em; overflow: hidden; }
.auu-kat-haupt { background: #fdf6e6; }

/* Admin: Linkampel, Karte im Umsonstladen-Formular */
.auu-ampel { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; flex: none; margin-top: .2rem; }
.auu-ampel-leer { border: 2px solid #c8b99a; }
.auu-admin-karte { height: 22rem; }

/* Termine */
.auu-termine li + li { border-top: 1px solid #f3e6c6; }
.auu-termine a:hover .fw-semibold { color: var(--auu-rost); }
.auu-datum { flex: none; width: 3.6rem; padding: .35rem 0; border-radius: .5rem; background: #FFEDB5; color: #7A390A; }

/* Rechtstexte, Banner */
.auu-rechtstext h2 { margin-top: 1.75rem; }
.auu-rechtstext ul { padding-left: 1.2rem; }
.auu-banner-vorschau { overflow-x: auto; }
.auu-banner-vorschau img { max-width: 100%; height: auto; }

/* Startseite: Maskottchen, Karte DE/AT/CH */
.auu-held-bild { width: 100%; max-width: 340px; height: auto; }
.auu-karte-dach { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.auu-karte-dach path { fill: #F3CD6E; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; transition: fill .15s; }
.auu-karte-dach .auu-karte-land path { fill: #FBE6B0; }
.auu-karte-dach text { font: 600 12px/1 system-ui, sans-serif; fill: #4a2205; text-anchor: middle; pointer-events: none; text-decoration: none; }
.auu-karte-dach text.klein { font-size: 10px; }
.auu-karte-dach text.gross { font-size: 15px; }
.auu-karte-dach a:hover path, .auu-karte-dach a:focus path { fill: #E0913A; }
.auu-karte-dach a:focus { outline: none; }
.auu-karte-dach a:focus-visible path { stroke: #7A390A; stroke-width: 2.5; }
.auu-region-liste a { text-decoration: none; border-bottom: 1px solid #f3e6c6; }
.auu-region-liste a:hover span:first-child { color: var(--auu-rost); text-decoration: underline; }

/* Barrierefreiheit (WCAG 2.2 AA) ------------------------------------------- */
/* Fokus deutlich sichtbar: im braunen Menue gelber Rahmen, sonst Rost */
.auu-nav .nav-link:focus-visible,
.auu-nav .navbar-toggler:focus-visible { outline: 3px solid var(--auu-gelb-hell); outline-offset: 2px; box-shadow: none; border-radius: .4rem; }
.auu-nav .nav-link.active:focus-visible { outline-color: #fff; }
.dropdown-item:focus-visible { outline: 3px solid var(--auu-rost); outline-offset: -3px; }
.auu-fuss a:focus-visible, .auu-sprung:focus-visible { outline: 3px solid var(--auu-braun); outline-offset: 2px; border-radius: .2rem; }
input:focus-visible + .auu-ablage { outline: 3px solid var(--auu-rost); outline-offset: 2px; }
/* Kontrast mind. 4,5:1 */
.auu-fuss-unten a { color: var(--auu-braun-dunkel); }
code { color: #a3245f; }
/* Mindestgroesse fuer Klickziele (24 px) */
.pagination .page-link { min-width: 2.25rem; text-align: center; }

/* Startseite: Hinweis "Alles neu" (app/teile/hinweis-neu.php) */
.auu-hinweis-neu { background: var(--auu-papier); border: 0; border-top: 6px solid var(--auu-gelb); }
.auu-hinweis-neu .modal-title { color: var(--auu-braun); font-weight: 800; }
.auu-hinweis-neu-liste li { display: flex; gap: .75rem; align-items: flex-start; }
.auu-hinweis-neu-liste li + li { margin-top: .85rem; }
.auu-hinweis-neu-liste .bi { flex: none; font-size: 1.25rem; line-height: 1.3; color: var(--auu-rost); }

/* Symbole: Platz freihalten, solange das Symbol-CSS nachlaedt (kein Springen) */
.bi { display: inline-block; min-width: 1em; }