/* ===========================================================================
   heimwerken.at – Designsystem „Holzwerkstatt"
   ---------------------------------------------------------------------------
   Warme Papier- und Holztöne mit Ziegelrot als Signalfarbe. Bewusst anders
   angelegt als das kühle Navy/Orange von werkzeugmarkt.at: beide Seiten haben
   denselben Betreiber, sollen aber als eigenständige Marken erkennbar bleiben.
   ======================================================================== */

:root{
  --papier:#FAF7F2;      /* Seitengrund, warm gebrochen                      */
  --papier-2:#F1EAE0;    /* abgesetzte Bänder                                */
  --tinte:#1A1714;       /* Überschriften                                    */
  --tinte-2:#514A43;     /* Fließtext                                        */
  --tinte-3:#8A8177;     /* Metazeilen, Datum, Quellen                       */
  --tief:#2A2018;        /* dunkle Flächen (Hero-Schleier, Absender)         */
  --tief-2:#3E3025;
  --akzent:#B8432A;      /* Ziegelrot – Kontrast 5.4:1 auf Weiß             */
  --akzent-2:#96351F;
  --linie:#DFD5C7;
  --weiss:#FFFFFF;

  --raster:1360px;       /* Inhaltsbreite wie in der Referenz                */
  --rand:clamp(20px,5vw,64px);

  --serif:Bitter,Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}

/* Der Besucher entscheidet über die Systemeinstellung; ein data-theme am
   Wurzelelement gewinnt in beide Richtungen. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#14110F; --papier-2:#1C1815; --tinte:#F2EDE6; --tinte-2:#BCB3A8;
    --tinte-3:#8F867B; --tief:#0E0C0A; --tief-2:#241C16; --akzent:#E86844;
    --akzent-2:#F2805C; --linie:#2E2823; --weiss:#1A1613;
  }
}
:root[data-theme="dark"]{
  --papier:#14110F; --papier-2:#1C1815; --tinte:#F2EDE6; --tinte-2:#BCB3A8;
  --tinte-3:#8F867B; --tief:#0E0C0A; --tief-2:#241C16; --akzent:#E86844;
  --akzent-2:#F2805C; --linie:#2E2823; --weiss:#1A1613;
}

/* --------------------------------------------------------------------------
   Grundtypografie
   ----------------------------------------------------------------------- */

body.hw{
  background:var(--papier);
  color:var(--tinte-2);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Zeilenabstand 1.15, nicht 1.1: Bitter hat lange Oberlängen und tiefe
   Unterlängen. Bei 1.1 stößt das Komma einer Zeile in die Oberlängen der
   nächsten – sichtbar erst bei langen, zweizeiligen Überschriften. Derselbe
   Wert steht im Elementor-Kit, sonst gilt für Widget-Überschriften ein
   anderer als für unsere eigenen. */
.hw h1,.hw h2,.hw h3,.hw h4,.hw .serif{
  font-family:var(--serif);
  color:var(--tinte);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.012em;
  /* Zeilen gleichmäßig verteilen statt bis zum Rand füllen.
     Auf dem Handy brach „Ryobi ONE+ RDD18-0" nach dem Bindestrich um und ließ
     die 0 allein in der nächsten Zeile stehen. Solche Modellkennungen haben
     wir zu Dutzenden – GE-CM, TE-RH, 18V-125 –, und bei jedem neuen Beitrag
     kämen welche dazu. Sie einzeln zu umklammern wäre Flickwerk.
     `balance` löst das an der Wurzel: Der Browser verteilt die Zeilen einer
     kurzen Überschrift gleichmäßig, statt die erste zu füllen und den Rest
     überlaufen zu lassen. Ältere Browser ignorieren die Eigenschaft und
     zeigen weiterhin den bisherigen Umbruch – es geht nichts kaputt. */
  text-wrap:balance;
}

/* Modellkennungen wie „RDD18-0" oder „18V-125" bleiben auf einer Zeile.
   Gesetzt wird die Klasse beim Ausliefern, siehe heimwerken-core.php. */
.hw-zusammen{white-space:nowrap}

.hw h1{font-size:clamp(2.1rem,5.2vw,4.1rem)}
.hw h2{font-size:clamp(1.7rem,3.4vw,2.9rem)}
.hw h3{font-size:clamp(1.15rem,1.7vw,1.45rem)}

/* Der Mono-Kicker ist das wiederkehrende Ordnungselement: er sagt vor jeder
   Sektion, worum es geht, ohne der Überschrift Gewicht zu nehmen. */
.hw-label{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--akzent);
  display:block;
}

.hw-k{
  max-width:var(--raster);
  margin-inline:auto;
  padding-inline:var(--rand);
}

.hw-sek{
  padding-block:clamp(56px,7vw,104px);
}

.hw-btn{
  display:inline-block;
  background:var(--akzent);
  color:#fff !important;
  font-weight:600;
  padding:.85em 1.5em;
  border-radius:4px;
  text-decoration:none !important;
  transition:background .15s ease;
}
.hw-btn:hover,.hw-btn:focus{background:var(--akzent-2)}

.hw-btn-still{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  color:var(--tinte) !important;
  font-weight:600;
  text-decoration:none !important;
  border-bottom:2px solid var(--akzent);
  padding-bottom:.2em;
}
.hw-btn-still:hover{color:var(--akzent) !important}

/* Sichtbarer Tastaturfokus – ohne ihn ist die Seite ohne Maus nicht bedienbar */
.hw a:focus-visible,.hw button:focus-visible{
  outline:3px solid var(--akzent);
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   Karten und Werbehinweis
   Stehen hier und nicht in start.css: Dieselben Karten tragen inzwischen die
   Neuerscheinungen der Startseite UND den Werbeblock jeder Themenwelt. Lagen
   sie nur im Startseiten-Stilblatt, stünden sie auf allen Unterseiten
   untereinander statt nebeneinander.
   ----------------------------------------------------------------------- */

.hw-leer{
  padding:clamp(24px,3vw,40px);
  border-left:3px solid var(--akzent);
  background:var(--weiss);
  font-size:.97rem;
}

/* --------------------------------------------------------------------------
   4. Neuheiten – der Affiliate-Block
   Die Kennzeichnung sitzt über dem Block, nicht darunter: sie muss gelesen
   werden, bevor jemand auf einen Partnerlink klickt.
   ----------------------------------------------------------------------- */

.hw-neu{background:var(--papier)}
.hw-werbehinweis{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinte-3);
  margin:0 0 1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--linie);
}
/* Die kleine Werbezeile unter einer Karte. Sie soll als Angebot lesbar sein,
   nicht als Teil des redaktionellen Textes – deshalb Monoschrift wie beim
   Werbehinweis, eigene Linie darüber und deutlich kleiner als der Kartentext. */
.hw-amazon-zeile{
  margin:.75rem 0 0;
  padding-top:.6rem;
  border-top:1px solid var(--linie);
  font-family:var(--mono);
  font-size:.74rem;
  line-height:1.45;
  letter-spacing:.02em;
}
.hw-amazon-zeile a{
  color:var(--akzent) !important;
  text-decoration:none !important;
  display:inline-flex;
  align-items:baseline;
  gap:.45em;
}
.hw-amazon-zeile a:hover{text-decoration:underline !important}

.hw-neu-raster{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
}
.hw-karte{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:6px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.hw-karte-bild{
  display:grid;
  place-items:center;
  min-height:200px;
  padding:20px;
  background:#fff;
}
.hw-karte-bild img{max-height:180px;width:auto;object-fit:contain}
.hw-karte-txt{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.hw-karte-marke{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinte-3);margin:0 0 .4rem;
}
.hw-karte h3{font-size:1rem;line-height:1.3;margin:0 0 .6rem}
.hw-karte h3 a{color:inherit;text-decoration:none}
.hw-karte ul{margin:0 0 .9rem;padding-left:1.05rem;font-size:.87rem;line-height:1.45}
.hw-karte li{margin-bottom:.2rem}
.hw-karte-fuss{margin-top:auto;padding-top:.6rem}
.hw-karte-preis{font-weight:600;color:var(--tinte);font-size:1.05rem;margin:0 0 .7rem}
.hw-karte-preis small{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;color:var(--tinte-3);letter-spacing:.05em}
.hw-stand{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  color:var(--tinte-3);margin:1.1rem 0 0;
}

.hw-karte-zwischen{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinte-3);
  margin:.2rem 0 .5rem;
  padding-top:.9rem;
  border-top:1px solid var(--linie);
}
.hw-karte-intern{
  margin:.8rem 0 0;
  font-size:.86rem;
}
.hw-karte-intern a{
  color:var(--tinte-2);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--linie);
}