/* ============================================================================
   Hand-CSS-Layer – Holzrecycling Schmid. Lädt NACH theme.css (siehe base.html.twig).
   Reines, Node-frei editierbares CSS: Typografie im Inhalt und die Seiten-Haken
   (hrs-*), die Bereiche im niarxbuilder über „CSS-Klassen" bekommen.
   Der Build überschreibt diese Datei NIE – nach Änderungen selbst nach
   public/assets/themes/holzrecyclingschmid/custom-theme.css kopieren.

   Werte aus der bisherigen Seite (holzrecycling-schmid.de): Überschriften Grün
   #449c2f (h1 36px, h2 30px, Strichstärke 500), h3 Anthrazit 24px, Fließtext
   Anthrazit #3c3c3b. Fließtext 16px statt 14px (Lesbarkeit).
   ========================================================================== */

:root {
    --hrs-green: #449c2f;
    --hrs-darkgreen: #295f1d;
    --hrs-dark: #3c3c3b;
    --hrs-line: #f5f5f5;
}

body {
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    line-height: 1.6;
}

/* v4-Preflight setzt Buttons auf cursor:default – v3-Verhalten beibehalten. */
button,
[role="button"] {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Typografie im Inhalt. Die Text-Blöcke tragen `prose` (Typography-Plugin); dessen
   Regeln stehen in :where() (Spezifität 0) – #content schlägt sie zuverlässig.
   ------------------------------------------------------------------------- */
#content .prose {
    color: var(--hrs-dark);
    font-size: 1rem;
    line-height: 1.6;
}

/* Überschriften im GANZEN Inhalt – auch auf Modulseiten (Downloads, Formular), die keinen
   prose-Wrapper haben und sonst ihre Standard-Optik (dunkel, fett) zeigten. #content schlägt
   die Tailwind-Utilities der Modul-Views. Abstände nur in Text-Blöcken (unten), damit die
   Modul-Layouts ihre eigenen behalten. */
#content :is(h1, h2, h3, h4) {
    font-weight: 500;
    line-height: 1.15;
}

#content h1 {
    color: var(--hrs-green);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
}

#content h2 {
    color: var(--hrs-green);
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 1.875rem);
}

#content :is(h3, h4) {
    color: var(--hrs-dark);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
}

#content .prose :is(h1, h2, h3, h4) {
    margin: 1.25rem 0 .625rem;
}

#content .prose p {
    margin: 0 0 .625rem;
}

#content .prose :is(ul, ol) {
    margin: 0 0 .625rem;
}

#content .prose li {
    margin: .125rem 0;
}

#content .prose strong {
    color: inherit;
    font-weight: 700;
}

/* Inhaltslinks: dunkelgrün + unterstrichen (Kontrast ~7:1). Die bisherige Seite hatte
   aus demselben Grund reines Blau nachgerüstet („wcag"-Block in screen.css). */
#content .prose a {
    color: var(--hrs-darkgreen);
    text-decoration: underline;
    text-underline-offset: .15em;
    font-weight: inherit;
}

#content .prose a:hover {
    color: var(--hrs-dark);
}

/* Eckige Bilder wie bisher (der Bild-Block bringt rounded-2xl mit). */
#content figure img {
    border-radius: 0;
}

#content figure {
    margin: 0;
}

/* Der erste Bereich direkt unter Kopfbild/Brotkrume: weniger Luft als my-8. */
#content > section:first-child {
    margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Seiten-Haken (niarxbuilder › Bereich › ⚙ › CSS-Klassen)
   ------------------------------------------------------------------------- */

/* Randlose Bänder: Bereich ohne Innen-/Außenabstand, Spalten ohne Lücke. */
#content :is(.hrs-band-gruen, .hrs-bildband) {
    max-width: none;
    padding: 0;
    margin: 0;
}

#content :is(.hrs-band-gruen, .hrs-bildband, .hrs-kacheln) > .grid {
    gap: 0;
}

#content :is(.hrs-band-gruen, .hrs-bildband, .hrs-kacheln) figure,
#content :is(.hrs-band-gruen, .hrs-bildband, .hrs-kacheln) figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* hrs-band-gruen – Startseite „Biomasse": Text auf Dunkelgrün links, Bild randlos rechts.
   Der Text beginnt (ab lg) dort, wo der Inhalt der Seite beginnt – wie col-lg-offset-2. */
#content .hrs-band-gruen > .grid > .nb-col:first-child {
    background: var(--hrs-darkgreen);
    color: #fff;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#content .hrs-band-gruen > .grid > .nb-col:first-child .prose,
#content .hrs-band-gruen > .grid > .nb-col:first-child .prose :is(h2, h3, p) {
    color: #fff;
}

@media (min-width: 1024px) {
    #content .hrs-band-gruen > .grid > .nb-col:first-child {
        padding: 1.5rem 1.5rem 1.5rem 33.333%;
    }
}

/* hrs-kacheln – Bild | anthrazit | anthrazit | Bild, ohne Lücken. */
#content .hrs-kacheln > .grid > .nb-col:is(:nth-child(2), :nth-child(3)) {
    background: var(--hrs-dark);
    color: #fff;
    padding: 1rem 1rem 1.5rem;
}

#content .hrs-kacheln > .grid > .nb-col:is(:nth-child(2), :nth-child(3)) .prose,
#content .hrs-kacheln > .grid > .nb-col:is(:nth-child(2), :nth-child(3)) .prose :is(h2, h3, p) {
    color: #fff;
}

#content .hrs-kacheln .prose h2 {
    hyphens: manual;
}

@media (min-width: 768px) {
    #content .hrs-kacheln > .grid > .nb-col {
        min-height: 21.5rem;
    }
}

/* hrs-aussen – zwei Textspalten an den Außenkanten, Mitte frei (wie 4/4/4 mit leerer Mitte). */
@media (min-width: 640px) {
    #content .hrs-aussen > .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #content .hrs-aussen > .grid > .nb-col:last-child {
        grid-column: 3;
    }
}

/* hrs-bildband – Bild | §-Kachel | Bild im Verhältnis 5:2:5, randlos. */
@media (min-width: 640px) {
    #content .hrs-bildband > .grid {
        grid-template-columns: 5fr 2fr 5fr;
    }
}

#content .hrs-bildband > .grid > .nb-col:nth-child(2) {
    background: var(--hrs-green);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem .75rem;
}

/* Die §-Kachel: echter Text statt Bild-mit-Text (lesbar, skalierbar, für Screenreader).
   Weiß auf #449c2f erfüllt AA für große, fette Schrift. */
#content .hrs-bildband .nb-col:nth-child(2) .prose p {
    margin: 0;
}

#content .hrs-bildband .nb-col:nth-child(2) .prose a {
    display: inline-block;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.125rem, .9rem + .6vw, 1.375rem);
    line-height: 1.15;
    text-decoration: none;
}

#content .hrs-bildband .nb-col:nth-child(2) .prose a::before {
    content: "§";
    display: block;
    width: 3.25rem;
    margin: 0 auto .75rem;
    padding: .25rem 0 .35rem;
    background: #fff;
    color: var(--hrs-green);
    font-size: 2.25rem;
    line-height: 1;
}

#content .hrs-bildband .nb-col:nth-child(2) .prose a:is(:hover, :focus-visible) {
    text-decoration: underline;
}

/* hrs-container-zeile – Containerliste: Bild | Bezeichnung | Volumen (eine Zeile je Bereich). */
#content .hrs-container-zeile {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

#content .hrs-container-zeile > .grid {
    grid-template-columns: minmax(6rem, 1fr) 2fr 1fr;
    align-items: center;
    gap: 1rem;
}

#content .hrs-container-zeile figure img {
    max-height: 7rem;
    width: auto;
}

#content .hrs-container-zeile .prose :is(h2, h3) {
    margin: 0;
    font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
}

#content .hrs-container-zeile .prose p {
    margin: 0;
    font-size: .875rem;
}

/* hrs-bildstapel – mehrere Bilder einer Spalte lückenlos untereinander. */
#content .hrs-bildstapel .nb-col figure + figure,
#content .hrs-bildstapel .nb-col > * + figure {
    margin-top: 0;
}

#content .hrs-bildstapel .nb-col figure img {
    display: block;
    width: 100%;
}

/* hrs-kaesten – jede Spalte als umrahmter Kasten (Gewerbeabfallverordnung). */
#content .hrs-kaesten > .grid {
    align-items: start;
}

#content .hrs-kaesten > .grid > .nb-col {
    border: 1px solid var(--hrs-dark);
    padding: .5rem .75rem;
}

#content .hrs-kaesten .prose p:last-child {
    margin-bottom: 0;
}

/* hrs-rahmen – grün umrahmter, zentrierter Kasten. */
#content .hrs-rahmen > .grid > .nb-col {
    border: 3px solid var(--hrs-green);
    padding: 2rem 1rem;
    text-align: center;
}

/* hrs-produkte – „Was verkaufen wir?": Produktname im grün umrahmten Kasten, darunter das Bild
   in einheitlicher Höhe (Bildausschnitt statt unterschiedlich hoher Fotos). */
#content .hrs-produkte .nb-col .prose p {
    border: 1px solid var(--hrs-green);
    padding: .5rem .75rem;
    min-height: 5.5rem;
    margin: 0 0 1rem;
}

#content .hrs-produkte figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Kontaktformular breiter als der Modul-Standard (max-w-xl) – wie bisher über den Inhalt. */
#content .cf-form {
    max-width: 48rem;
}

/* hrs-hinweis – Absatz mit rotem Rahmen (Text-Einstellungen › CSS-Klassen). */
#content .prose p.hrs-hinweis {
    display: inline-block;
    border: 1px solid #cd0a0a;
    padding: .25rem .625rem;
    font-weight: 700;
    color: #000;
}