/* ==========================================================================
   Hellweg Druckerei - Gestaltung "Werkstatt"

   Wird ueber plg_system_hellwegdesign NACH theme.9.css geladen und
   ueberschreibt sie gezielt. Liegt als Datei im Git, ueberlebt jedes
   YOOtheme-Update.

   Durchgang 1: Textseiten (.uk-article) - Lesbarkeit, Hierarchie, Rhythmus.
   Die Builder-Seiten (Start, Kontakt) nutzen .uk-section und bleiben in
   diesem Durchgang unberuehrt.
   ========================================================================== */

:root {
    --hw-signal:      #f9591e;
    --hw-signal-hell: #ff6a2c;
    --hw-ink:         #141518;
    --hw-text:        #24262a;
    --hw-gedaempft:   #5a5e66;
    --hw-linie:       #e0dcd6;
    --hw-papier:      #f4f2ef;
    --hw-mass:        68ch;   /* Zeilenlaenge: vorher 108 Zeichen */
    --hw-design:      "aktiv";
}

/* --------------------------------------------------------------------------
   1. Zeilenlaenge
   Vorher lief der Fliesstext ueber die volle Containerbreite (1152 px,
   ~108 Zeichen). Beim Zeilensprung verliert das Auge dann die Spur.
   -------------------------------------------------------------------------- */

/*
 * Die ganze Textspalte wird begrenzt und mittig gesetzt - nicht nur die
 * Absaetze. Sonst klebt der Text links und rechts bleibt eine leere Haelfte
 * stehen, was nach halbfertig aussieht statt nach Absicht.
 * (Sobald die Randspalte aus dem Entwurf steht, wird das hier wieder
 * linksbuendig mit Spalte daneben.)
 */
.tm-main .uk-article {
    max-width: 74ch;
    margin-inline: auto;
}

.tm-main .uk-article > div > p,
.tm-main .uk-article > div > ul,
.tm-main .uk-article > div > ol,
.tm-main .uk-article > p,
.tm-main .uk-article > ul,
.tm-main .uk-article > ol {
    max-width: var(--hw-mass);
}

/* --------------------------------------------------------------------------
   2. Typografische Stufen
   Vorher: h1 42 px, h2 36 px, beide versal - fast identisch, keine Hierarchie.
   Jetzt: deutlicher Abstand zwischen den Ebenen. H1 bleibt versal (Markenbild),
   H2 und H3 werden gemischt gesetzt - das liest sich schneller.
   -------------------------------------------------------------------------- */

.tm-main .uk-article .uk-article-title {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: 0.005em;
    margin-bottom: 0.25em;
}

/*
 * Versalien bleiben - das ist die Bildsprache der Marke, das Logo ist ebenfalls
 * versal, und Oswald ist eine schmale Display-Schrift, die in Grossbuchstaben
 * ihre Wirkung entfaltet. Die Hierarchie kommt stattdessen aus Groesse,
 * Laufweite und Abstand: H1 55 px, H2 32 px, H3 19 px.
 */
.tm-main .uk-article h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-top: 2.75rem;
    margin-bottom: 0.6rem;
}

.tm-main .uk-article h3 {
    font-size: 1.1875rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hw-gedaempft);
    margin-top: 1.75rem;
    margin-bottom: 0.4rem;
}

/* Erste Ueberschrift nach dem Titel braucht keinen zusaetzlichen Abstand */
.tm-main .uk-article > div > h2:first-child,
.tm-main .uk-article > h2:first-child {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   3. Fliesstext und Listen
   -------------------------------------------------------------------------- */

.tm-main .uk-article {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--hw-text);
}

.tm-main .uk-article > div > ul li,
.tm-main .uk-article > ul li {
    margin-bottom: 0.45rem;
}

/* Der erste Absatz nach dem Titel traegt die Seite - etwas groesser */
.tm-main .uk-article > div > p:first-of-type {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--hw-gedaempft);
    max-width: 58ch;
}

/* --------------------------------------------------------------------------
   4. Offene Stellen sichtbar machen
   Die [[ERGAENZEN: ...]]-Markierungen sollen ins Auge fallen, solange sie
   da sind - und nicht wie normaler Text mitgelesen werden.
   -------------------------------------------------------------------------- */

.tm-main .uk-article p.hw-todo {
    background: #fff6f2;
    border-left: 3px solid var(--hw-signal);
    padding: 0.85rem 1rem;
    margin-block: 1.25rem;
    font-size: 0.9375rem;
    color: #7a3a1c;
    max-width: var(--hw-mass);
}

.tm-main .uk-article p.hw-todo strong {
    color: #7a3a1c;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   5. Hero: Fliesstext nicht in Versalien
   Das Theme setzt auch den Beschreibungstext der Diaschau auf Grossbuchstaben.
   Bei Ueberschriften ist das die Bildsprache der Marke - bei einem ganzen Satz
   kostet es spuerbar Lesegeschwindigkeit.
   -------------------------------------------------------------------------- */

/*
 * Ohne .tm-main davor: der Hero liegt ausserhalb des Hauptinhalts.
 * Die Versalien kommen aus ".lead, .uk-text-lead" in theme.9.css.
 */
.uk-slideshow-items .el-content,
.uk-slideshow-items .el-content.uk-text-lead {
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.55;
    max-width: 54ch;
}

/* --------------------------------------------------------------------------
   Fliesstext auf den Builder-Seiten
   Dort liefen einzelne Absaetze ueber 136 Zeichen pro Zeile. 80 Zeichen sind
   bewusst grosszuegiger als die 68 der Textseiten - die Builder-Abschnitte
   leben von breiten Flaechen, sollen aber nicht ausufern.
   -------------------------------------------------------------------------- */

main .uk-section .el-content > p,
main .uk-section .uk-panel > p {
    max-width: 80ch;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Randspalte der Leistungsseiten
   Sobald sie da ist, steht die Textspalte wieder linksbuendig - mittig
   zentriert ergibt nur ohne Nachbarspalte Sinn.
   -------------------------------------------------------------------------- */

.tm-main:has(.tm-sidebar) .uk-article {
    max-width: none;
    margin-inline: 0;
}

.tm-sidebar .hw-kasten {
    border: 1px solid var(--hw-linie);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
}

.tm-sidebar .hw-kasten--signal {
    border-color: var(--hw-ink);
    border-top: 4px solid var(--hw-signal);
}

.tm-sidebar .hw-kasten h3 {
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem;
}

.tm-sidebar .hw-fakten {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.tm-sidebar .hw-fakten li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
    padding-block: 0.45rem;
    border-bottom: 1px solid var(--hw-linie);
}

.tm-sidebar .hw-fakten li:last-child { border-bottom: 0; }
.tm-sidebar .hw-fakten span { color: var(--hw-gedaempft); }
.tm-sidebar .hw-fakten b { font-family: Oswald, sans-serif; font-weight: 500; }

/* Anfrage-Knopf: dunkler Text auf Orange - weiss faellt durch WCAG AA */
.tm-sidebar .hw-knopf {
    display: block;
    text-align: center;
    background: var(--hw-signal);
    color: var(--hw-ink);
    font-family: Oswald, sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.9rem 1.25rem;
    border-radius: 0;
}

.tm-sidebar .hw-knopf:hover,
.tm-sidebar .hw-knopf:focus {
    background: var(--hw-signal-hell);
    color: var(--hw-ink);
}

.tm-sidebar .hw-kasten__fuss {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--hw-gedaempft);
    text-align: center;
}

.tm-sidebar .hw-ablauf {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.9375rem;
}

.tm-sidebar .hw-ablauf li { padding-block: 0.3rem; }
.tm-sidebar .hw-ablauf li::marker { font-family: Oswald, sans-serif; color: var(--hw-signal); font-weight: 600; }

.tm-sidebar .hw-links { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.tm-sidebar .hw-links li { padding-block: 0.4rem; border-bottom: 1px solid var(--hw-linie); }
.tm-sidebar .hw-links li:last-child { border-bottom: 0; }
.tm-sidebar .hw-links a { text-decoration: none; }
.tm-sidebar .hw-links a:hover { color: var(--hw-signal); }

/* --------------------------------------------------------------------------
   Infoleiste oben
   Oeffnungszeiten und Kontakt auf jeder Seite sichtbar - aber als Information
   am Rand, nicht als Ueberschrift im Hero, wie es vorher war.
   -------------------------------------------------------------------------- */

.tm-toolbar {
    background-color: var(--hw-ink);
    border-bottom: 1px solid #24262b;
    padding-block: 0.35rem;
}

.hw-toolbar {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #b9bcc2;
}

.hw-toolbar strong {
    color: #fff;
    font-weight: 500;
}

.hw-toolbar a {
    color: #fff;
    text-decoration: none;
}

.hw-toolbar a:hover,
.hw-toolbar a:focus {
    color: var(--hw-signal);
    text-decoration: underline;
}

.hw-toolbar__trenner {
    margin-inline: 0.5rem;
    color: #6b6f77;
}

/* Knopf im Hero: das Theme rendert ihn als uk-button-default, die
   Stil-Eigenschaft der Folie greift nicht. Hier gezielt als Signalknopf. */
.uk-slideshow-items .el-link.uk-button {
    background-color: var(--hw-signal);
    border-color: var(--hw-signal);
    color: var(--hw-ink);
    border-radius: 0;
    margin-top: 1.5rem;
}

.uk-slideshow-items .el-link.uk-button:hover,
.uk-slideshow-items .el-link.uk-button:focus {
    background-color: var(--hw-signal-hell);
    border-color: var(--hw-signal-hell);
    color: var(--hw-ink);
}

/* --------------------------------------------------------------------------
   7. Kontrast der Schaltflaechen
   Weiss auf #f9591e ergibt 3,24:1 und faellt durch WCAG AA (4,5:1 noetig).
   Fast-schwarzer Text auf demselben Orange kommt auf 5,63:1 - die Markenfarbe
   bleibt dabei unveraendert.
   -------------------------------------------------------------------------- */

.uk-button-primary,
.uk-button-primary:hover,
.uk-button-primary:focus {
    color: var(--hw-ink);
}

.uk-button-primary {
    background-color: var(--hw-signal);
    border-radius: 0;
}

.uk-button-primary:hover,
.uk-button-primary:focus {
    background-color: var(--hw-signal-hell);
}

/* --------------------------------------------------------------------------
   Fussbereich (Modul in der Position "bottom", auf allen Seiten)
   -------------------------------------------------------------------------- */

.hw-fuss {
    background: var(--hw-ink);
    color: #a9acb3;
    padding: 3.5rem clamp(1.25rem, 4vw, 3.5rem);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.hw-fuss__raster {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.hw-fuss h4 {
    color: #fff;
    font-family: Oswald, sans-serif;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}

.hw-fuss p { margin: 0 0 1rem; }
.hw-fuss ul { list-style: none; margin: 0; padding: 0; }
.hw-fuss li { margin-bottom: 0.4rem; }
.hw-fuss a { color: #d9dade; text-decoration: none; }
.hw-fuss a:hover, .hw-fuss a:focus { color: var(--hw-signal); text-decoration: underline; }

.hw-fuss__unten {
    max-width: 1220px;
    margin: 2rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid #24262b;
    font-size: 0.875rem;
}

/* Der Bottom-Bereich des Themes soll den Fuss nicht zusaetzlich einrahmen */
.tm-bottom { padding: 0 !important; }
.tm-bottom .uk-container { max-width: none; padding: 0; }

/* Im Bottom-Bereich liegt neben dem Fuss auch das WhatsApp-Modul. Das Theme
   macht daraus zwei Spalten, wodurch der Fuss nur die halbe Breite bekam.
   Das WhatsApp-Element ist fest positioniert und braucht keinen Platz im
   Textfluss - deshalb wird die Spaltenaufteilung hier aufgehoben. */
.tm-bottom .uk-grid { display: block; margin: 0; }
.tm-bottom .uk-grid > * { width: 100%; padding: 0; }

/* --------------------------------------------------------------------------
   Anfrageformular (com_contact)
   Joomla stapelt hier vier Ueberschriften uebereinander: Seitentitel,
   Kontaktname, "Kontakt" und "Kontaktformular". Fuer den Besucher ist das
   Rauschen - eine Ueberschrift reicht.
   -------------------------------------------------------------------------- */

.com-contact .page-header,
.com-contact__container > h3,
.com-contact > h3:not(.hw-behalten),
.com-contact legend { display: none; }

.com-contact { max-width: 40rem; }

.com-contact .control-group { margin-bottom: 1.25rem; }

.com-contact label {
    display: block;
    font-family: Oswald, sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hw-gedaempft);
    margin-bottom: 0.35rem;
}

.com-contact input[type="text"],
.com-contact input[type="email"],
.com-contact textarea {
    width: 100%;
    border: 1px solid var(--hw-linie);
    border-radius: 0;
    background: #fff;
    padding: 0.75rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--hw-text);
}

.com-contact input:focus,
.com-contact textarea:focus {
    outline: 2px solid var(--hw-signal);
    outline-offset: 1px;
    border-color: var(--hw-signal);
}

.com-contact textarea { min-height: 11rem; resize: vertical; }

/* Dunkler Text auf Orange - weiss faellt durch WCAG AA */
.com-contact .btn-primary {
    background: var(--hw-signal);
    border: 2px solid var(--hw-signal);
    color: var(--hw-ink);
    border-radius: 0;
    font-family: Oswald, sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.9rem 1.6rem;
    cursor: pointer;
}

.com-contact .btn-primary:hover,
.com-contact .btn-primary:focus {
    background: var(--hw-signal-hell);
    border-color: var(--hw-signal-hell);
    color: var(--hw-ink);
}

/* Joomla stellt den Einleitungstext hinter das Formular. Davor gelesen hilft
   er dem Besucher, dahinter nicht mehr. */
.com-contact.contact { display: flex; flex-direction: column; }
.com-contact.contact > .com-contact__container { order: 2; }
.com-contact.contact > *:not(.com-contact__container) { order: 1; }

/* --------------------------------------------------------------------------
   Honigtopf des Spamschutzes
   Bewusst nicht display:none - manche Bots ueberspringen genau das. Stattdessen
   aus dem sichtbaren Bereich geschoben und fuer Screenreader ausgeblendet.
   -------------------------------------------------------------------------- */

.com-contact .hw-honigtopf,
.com-contact .control-group:has(.hw-honigtopf),
.com-contact fieldset[id*="hw_schutz"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Untere Fusszeile: Copyright links, VSW-Mitgliedschaft rechts.
   Das vierspaltige Raster darueber bleibt dadurch unberuehrt. */
.hw-fuss__unten {
    max-width: 1220px;
    margin: 2rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid #24262b;
    font-size: 0.875rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.hw-fuss__unten p { margin: 0; }

.hw-fuss__vsw {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #8b8f97;
}

.hw-fuss__vsw img {
    display: block;
    height: 74px;
    width: auto;
    border-radius: 2px;
}

.hw-fuss__vsw a { display: block; line-height: 0; }
.hw-fuss__vsw a:focus-visible { outline: 3px solid var(--hw-signal); outline-offset: 3px; }

/* Auszeichnungen (IHK, VSW) stehen als Paar zusammen - so brechen sie auf
   schmalen Schirmen gemeinsam um statt einzeln zu verrutschen. */
.hw-fuss__zeichen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.hw-fuss__ihk { display: block; line-height: 0; }

.hw-fuss__ihk img {
    display: block;
    height: 74px;
    width: auto;
    border-radius: 2px;
}

/* Ausbildung als eigene Fussbereich-Spalte - als kleines Zeichen neben dem
   VSW-Logo ging die Auszeichnung unter. */
.hw-fuss__ausbildung img {
    display: block;
    width: 100%;
    max-width: 178px;
    height: auto;
    margin-bottom: 0.85rem;
    border-radius: 2px;
}

/* Bilder im Fliesstext der Leistungsseiten */
.hw-bild {
    margin: 2rem 0 2.5rem;
    max-width: none;
}

.hw-bild img {
    display: block;
    width: 100%;
    height: auto;
}

.hw-bild figcaption {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--hw-gedaempft);
    border-left: 3px solid var(--hw-signal);
    padding-left: 0.85rem;
}

/* Hersteller-Siegel im Nachhaltigkeitsabschnitt.
   Bewusst zurueckhaltend und in der Textbreite gehalten: Es sind
   Auszeichnungen des Herstellers, nicht des Betriebs. */
.hw-siegel { margin: 1.5rem 0 1.75rem; }

.hw-siegel img {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
}

.hw-siegel a { display: inline-block; }
.hw-siegel a:focus-visible { outline: 3px solid var(--hw-signal); outline-offset: 4px; }

/* Verweis auf den Textilkatalog samt Preishinweis */
.hw-katalog {
    border-left: 3px solid var(--hw-signal);
    padding-left: 1rem;
    margin: 1.5rem 0 1.75rem;
}

.hw-katalog > a {
    font-family: Oswald, sans-serif;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 2px solid var(--hw-signal);
    padding-bottom: 0.15rem;
}

.hw-hinweis {
    display: block;
    margin-top: 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--hw-gedaempft);
}

/* --------------------------------------------------------------------------
   Signalfarbe fuer kleine Schrift

   #f9591e erreicht auf Weiss nur 3,24:1. Fuer Flaechen, Linien und Symbole
   reicht das, fuer kleine Schrift verlangt die Lesbarkeitsnorm 4,5:1.
   Dieser Ton liegt bei 5,22:1 und ist vom Markenorange kaum zu unterscheiden.
   Die Markenfarbe selbst bleibt unveraendert.
   -------------------------------------------------------------------------- */
:root { --hw-signal-schrift: #c43d0e; }