/* ============================================================
   FAMILIEN.CAMP WISSEN – GESTALTUNGSSCHICHT
   ============================================================
   Wird NACH verzeichnis.css und artikel.css geladen und setzt dort
   ausschliesslich Farben, Verlaeufe und Rundungen neu. Keine
   Layoutaenderung, keine neuen Klassen, keine Schriftumstellung.

   Herkunft der Farben: familien.camp
     Grün   #34AB3C   Marke, kommt als --accent aus den Einstellungen
     Ocker  #B3843A   Zweitfarbe, hier fuer Auszeichnungen und Rahmen
     Sand   #F5CD9C   helle Flaeche
     Wasser #15779B   Verweise, Silbersee-Bezug

   Die vier Variablen --accent, --accent-text, --accent-on und
   --accent-flaeche werden vom System aus site_accent berechnet und in
   einem <style>-Block NACH dieser Datei gesetzt. Sie werden hier
   bewusst nicht angefasst – das ist die Stelle, an der das System
   den Kontrast von 4,5:1 sicherstellt.
   ============================================================ */

:root {
    /* --- Grundfarben: von Navy/Neon auf Wald und Ocker --- */
    --primary:        #2C6E31;
    --primary-light:  #4E9A52;
    --primary-dark:   #1F5024;
    --primary-text:   #1F5024;
    --secondary:      #15779B;

    --accent-light:   #7CC97F;
    --accent-dark:    #235C2B;

    /* Dunkle Flaechen: warmes Waldschwarz statt blaugrauem Navy */
    --navy:           #1C2620;
    --navy-light:     #2A3A2F;

    /* Helle Flaechen: Papier mit Waerme statt kuehlem Grau */
    --white:          #FFFFFF;
    --off-white:      #FBF9F3;
    --light:          #F2EEE3;
    --light-gray:     #D8D2C2;
    --medium-gray:    #6E6857;

    --text-dark:      #21281F;
    --text-medium:    #55604F;

    /* --- Verlaeufe --- */
    --gradient-hero:  linear-gradient(150deg, #17201A 0%, #1F3324 45%, #2C4A2F 100%);
    --gradient-neon:  linear-gradient(135deg, #34AB3C 0%, #B3843A 100%);
    --gradient-glow:  linear-gradient(135deg, rgba(52,171,60,0.10) 0%, rgba(179,132,58,0.10) 100%);

    /* --- Schatten: weicher, warmer, weniger Leuchten --- */
    --shadow:         rgba(33, 40, 31, 0.10);
    --shadow-strong:  rgba(33, 40, 31, 0.16);
    --glow-primary:   0 2px 10px rgba(44, 110, 49, 0.22);
    --glow-accent:    0 2px 10px rgba(179, 132, 58, 0.22);

    /* --- Formen: etwas runder, das wirkt freundlicher --- */
    --border-radius:    14px;
    --border-radius-lg: 22px;
}

/* Etwas mehr Zeilenabstand. Das Portal richtet sich an Eltern, die
   nebenbei lesen – nicht an Entwickler, die scannen. */
body { line-height: 1.68; }

/* ------------------------------------------------------------------
   HERO – Punktraster gegen Blattstruktur tauschen
   Das Raster im Kern ist ein Technikmotiv. Hier steht stattdessen
   eine sehr zurueckhaltende organische Textur.
   ------------------------------------------------------------------ */
.hero::before {
    background:
        radial-gradient(ellipse at 22% 60%, rgba(52,171,60,0.16) 0%, transparent 58%),
        radial-gradient(ellipse at 78% 25%, rgba(179,132,58,0.12) 0%, transparent 58%);
}
.hero::after {
    background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23F5CD9C' stroke-opacity='0.06' stroke-width='1.2'%3E%3Cpath d='M12 60c8-18 22-30 40-36'/%3E%3Cpath d='M18 62c6-10 14-17 26-21'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   KOPF UND FUSS
   ------------------------------------------------------------------ */
.header {
    background: rgba(28, 38, 32, 0.97);
    border-bottom: 1px solid rgba(245, 205, 156, 0.14);
}
.footer { background: #17201A; }

.logo-mark {
    background: var(--gradient-neon);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(52, 171, 60, 0.28);
}

/* ------------------------------------------------------------------
   MENUEPUNKT ZUR HAUPTSEITE
   Der Verweis auf familien.camp fuehrt aus dem Wissensportal heraus
   zur Buchung. Er bekommt deshalb eine eigene Auszeichnung – nicht
   grell, aber unterscheidbar von den Menuepunkten dieses Portals.
   ------------------------------------------------------------------ */
.nav a[href^="https://familien.camp"] {
    color: #F5CD9C;
    border: 1px solid rgba(245, 205, 156, 0.32);
    border-radius: 999px;
    padding-inline: 0.85rem;
}
.nav a[href^="https://familien.camp"]:hover,
.nav a[href^="https://familien.camp"]:focus-visible {
    background: rgba(245, 205, 156, 0.12);
    color: #FBF0DC;
    border-color: rgba(245, 205, 156, 0.55);
}
.footer a[href^="https://familien.camp"] { color: #F5CD9C; }

/* ------------------------------------------------------------------
   KARTEN UND FLAECHEN
   ------------------------------------------------------------------ */
.listing-card,
.faq-item,
.answer-box,
.author-box {
    border-radius: var(--border-radius-lg);
}
.listing-card { border-color: var(--light-gray); }
.listing-card:hover { box-shadow: 0 12px 28px var(--shadow); }

/* Der Antwortkasten ist das wichtigste Element jeder Seite.
   Ocker statt Cyan, damit er sich vom Fliesstext abhebt, ohne zu
   schreien. */
.answer-box {
    background: linear-gradient(135deg, rgba(245,205,156,0.20) 0%, rgba(52,171,60,0.07) 100%);
    border-left: 4px solid #B3843A;
}
.answer-label { color: #8A5F1F; }

/* ------------------------------------------------------------------
   GRAFIKEN IM FLIESSTEXT
   Inline-SVG in Beitraegen: nimmt die Textfarbe auf und bleibt damit
   auch dann lesbar, wenn sich die Grundfarben aendern.
   ------------------------------------------------------------------ */
.beitrag-grafik {
    margin: 2rem 0;
    padding: 1.25rem;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 12px var(--shadow);
}
.beitrag-grafik svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--text-dark);
}
.beitrag-grafik figcaption {
    margin-top: 0.9rem;
    font-size: 0.87rem;
    line-height: 1.55;
    color: var(--text-medium);
}
.beitrag-grafik .g-flaeche  { fill: #F2EEE3; }
.beitrag-grafik .g-akzent   { fill: #34AB3C; }
.beitrag-grafik .g-ocker    { fill: #B3843A; }
.beitrag-grafik .g-wasser   { fill: #15779B; }
.beitrag-grafik .g-linie    { stroke: currentColor; fill: none; stroke-width: 1.5; }
.beitrag-grafik .g-text     { fill: currentColor; font-family: var(--font); font-size: 13px; }
.beitrag-grafik .g-klein    { fill: #55604F; font-family: var(--font); font-size: 11px; }
.beitrag-grafik .g-zahl     { fill: #FFFFFF; font-family: var(--font); font-size: 13px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}