/* ==========================================================================
   werkzeugmarkt.at – Gestaltung der Startseite
   ==========================================================================
   Erzeugt 26.08.2026 aus dem freigegebenen Designentwurf.
   Wird über das MU-Plugin eingebunden. Farben und Schriften entsprechen
   dem Elementor-Kit; Änderungen dort und hier müssen zusammenpassen.

   Die Klassen sind bewusst eigenständig benannt, damit Astra- und
   Elementor-Standardstile nicht überschrieben werden.
   ========================================================================== */

:root{
  --paper:#FAF8F5;
  --paper-2:#F1EDE7;
  --ink:#15181A;
  --ink-2:#4A5155;
  --ink-3:#7C8489;
  --navy:#10212B;
  --navy-2:#1B3644;
  --orange:#E06A00;
  --line:#DED8CF;
  --white:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111416; --paper-2:#181C1F; --ink:#F0EDE8; --ink-2:#B6BDC1; --ink-3:#8A9298;
    --navy:#0A141A; --navy-2:#162A34; --orange:#FF8A2B; --line:#2A3035; --white:#1C2124;
  }
}
:root[data-theme="dark"]{
  --paper:#111416; --paper-2:#181C1F; --ink:#F0EDE8; --ink-2:#B6BDC1; --ink-3:#8A9298;
  --navy:#0A141A; --navy-2:#162A34; --orange:#FF8A2B; --line:#2A3035; --white:#1C2124;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.k{max-width:1360px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.k-eng{max-width:820px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ---------- Typo ---------- */
.serif{font-family:Fraunces,Georgia,"Times New Roman",serif;font-optical-sizing:auto}
h1,h2,h3,.serif{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.03;
  letter-spacing:-.022em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,5.1vw,4.7rem);font-weight:600}
h2{font-size:clamp(2rem,4.4vw,3.5rem)}
h3{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.12}
p{margin:0}
.label{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em}
.vorspann{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.55;color:var(--ink-2);font-weight:300}

/* ---------- Kopf ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:20;padding:26px 0}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:30px}
.marke{font-family:Fraunces,serif;font-weight:600;font-size:1.35rem;color:#fff;letter-spacing:-.02em}
.marke span{color:var(--orange)}
.nav{display:flex;gap:34px;align-items:center}
.nav a{font-size:.94rem;color:rgba(255,255,255,.86);font-weight:400;padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.nav a:hover,.nav a:focus-visible{color:#fff;border-color:var(--orange)}
@media(max-width:900px){.nav{display:none}}
.burger{display:none;width:26px;height:14px;position:relative}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:#fff}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){bottom:0}
@media(max-width:900px){.burger{display:block}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--navy)}
.hero-bild{position:absolute;inset:0}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-schleier{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,18,.62) 0%,rgba(8,14,18,.12) 34%,rgba(8,14,18,.55) 68%,rgba(8,14,18,.92) 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding:0 0 clamp(48px,7vw,96px)}
.hero-txt{max-width:15ch}
.hero h1{color:#fff;margin:18px 0 0}
.hero .label{color:var(--orange)}
.hero .vorspann{color:rgba(255,255,255,.82);max-width:46ch;margin-top:22px;font-weight:300}
.byline{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:30px;
  font-size:.86rem;color:rgba(255,255,255,.6)}
.byline .punkt{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}
.hero-cta{display:inline-flex;align-items:center;gap:11px;margin-top:34px;color:#fff;
  font-size:.98rem;font-weight:500;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .2s,gap .2s}
.hero-cta:hover{border-color:var(--orange);gap:16px}
.hero-cta em{font-style:normal;color:var(--orange);font-size:1.15rem;line-height:1}

/* ---------- Vertrauensband ---------- */
.trust{background:var(--paper-2);border-bottom:1px solid var(--line)}
.trust-in{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:clamp(24px,4vw,56px);
  align-items:start;padding:clamp(34px,4vw,52px) 0}
.trust-p{display:flex;flex-direction:column;gap:7px}
.trust-p .label{color:var(--orange)}
.trust-p p{font-size:.97rem;color:var(--ink-2);line-height:1.5}
.trust-link{align-self:center;font-size:.92rem;font-weight:500;white-space:nowrap;
  padding-bottom:4px;border-bottom:1px solid var(--ink);transition:color .2s,border-color .2s}
.trust-link:hover{color:var(--orange);border-color:var(--orange)}
@media(max-width:900px){.trust-in{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.trust-in{grid-template-columns:1fr}}

/* ---------- Sektionsrahmen ---------- */
.sek{padding:clamp(72px,10vw,148px) 0}
.sek-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px 40px;margin-bottom:clamp(38px,5vw,66px)}
.sek-kopf .li{display:flex;flex-direction:column;gap:14px;max-width:34ch}
.sek-kopf .label{color:var(--ink-3)}
.sek-kopf .re{font-size:.94rem;color:var(--ink-2);max-width:38ch;padding-bottom:4px}
.mehr{display:inline-flex;align-items:center;gap:9px;font-size:.93rem;font-weight:500;
  padding-bottom:5px;border-bottom:1px solid var(--line);transition:border-color .2s,gap .2s}
.mehr:hover{border-color:var(--orange);gap:14px}
.mehr em{font-style:normal;color:var(--orange)}

/* ---------- Saison: Kartenraster ---------- */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px)}
@media(max-width:1000px){.karten{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.karten{grid-template-columns:1fr}}
.karte{display:flex;flex-direction:column;gap:20px;group}
.karte-bild{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.karte:hover .karte-bild img{transform:scale(1.045)}
.karte-nr{position:absolute;left:0;top:0;background:var(--paper);padding:9px 15px 8px}
.karte-nr .label{color:var(--orange)}
.karte-txt{display:flex;flex-direction:column;gap:11px}
.karte h3{transition:color .2s}
.karte:hover h3{color:var(--orange)}
.karte p{font-size:.98rem;color:var(--ink-2);line-height:1.55}
.karte .meta{font-size:.82rem;color:var(--ink-3);display:flex;gap:14px;align-items:center}

/* ---------- Österreich ---------- */
.at{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.at-raster{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;min-height:min(78vh,700px)}
@media(max-width:900px){.at-raster{grid-template-columns:1fr}}
.at-bild{position:relative;overflow:hidden;min-height:340px}
.at-bild img{width:100%;height:100%;object-fit:cover}
.at-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,33,43,.15),rgba(16,33,43,.75))}
@media(max-width:900px){.at-bild::after{background:linear-gradient(180deg,rgba(16,33,43,.1),rgba(16,33,43,.8))}}
.at-txt{display:flex;flex-direction:column;justify-content:center;gap:26px;
  padding:clamp(48px,6vw,96px) clamp(28px,5vw,80px)}
.at-txt .label{color:var(--orange)}
.at-txt h2{color:#fff;max-width:16ch}
.at-txt p{color:rgba(255,255,255,.76);font-size:1.05rem;font-weight:300;max-width:44ch;line-height:1.6}
.at-liste{display:flex;flex-direction:column;margin-top:6px}
.at-liste a{display:flex;align-items:baseline;gap:16px;padding:17px 0;
  border-top:1px solid rgba(255,255,255,.14);transition:padding-left .25s,color .2s}
.at-liste a:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.at-liste a:hover{padding-left:10px;color:var(--orange)}
.at-liste .n{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--orange);flex:none}
.at-liste .t{font-family:Fraunces,serif;font-size:1.12rem;font-weight:400;color:#fff;line-height:1.25}
.at-liste a:hover .t{color:var(--orange)}

/* ---------- Wissen ---------- */
.wissen{background:var(--paper)}
.wissen-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
@media(max-width:820px){.wissen-raster{grid-template-columns:1fr;gap:48px}}
.wissen-el{display:flex;flex-direction:column;gap:18px;padding-top:26px;border-top:2px solid var(--ink)}
.wissen-el .label{color:var(--ink-3)}
.wissen-el h3{max-width:20ch}
.wissen-el p{color:var(--ink-2);font-size:1rem;line-height:1.6}
.wissen-el .mehr{align-self:flex-start;margin-top:4px}

/* ---------- Themenwelten ---------- */
.welten{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:1000px){.welten{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.welten{grid-template-columns:1fr}}
.welt{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:flex-end;
  background:var(--navy)}
.welt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.welt:hover img{transform:scale(1.06)}
.welt::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,18,.05) 30%,rgba(8,14,18,.82) 100%)}
.welt-txt{position:relative;z-index:2;padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;gap:8px}
.welt-txt .label{color:var(--orange)}
.welt-txt strong{font-family:Fraunces,serif;font-size:clamp(1.15rem,1.6vw,1.5rem);
  font-weight:600;color:#fff;line-height:1.1}
.welt-txt span{font-size:.86rem;color:rgba(255,255,255,.66)}

/* ---------- Verzeichnis ---------- */
.verz{border-top:1px solid var(--line);padding-top:clamp(38px,5vw,60px)}
.verz-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 30px}
@media(max-width:900px){.verz-raster{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.verz-raster{grid-template-columns:1fr}}
.verz-sp{display:flex;flex-direction:column;gap:11px}
.verz-sp .label{color:var(--ink-3);margin-bottom:3px}
.verz-sp a{font-size:.97rem;color:var(--ink-2);transition:color .18s,padding-left .18s}
.verz-sp a:hover{color:var(--orange);padding-left:5px}

/* ---------- Absender ---------- */
.absender{background:var(--paper-2)}
.abs-raster{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:700px){.abs-raster{grid-template-columns:1fr;gap:26px}}
.abs-foto{width:clamp(120px,14vw,180px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--navy-2);flex:none}
.abs-foto img{width:100%;height:100%;object-fit:cover}
.abs-txt{display:flex;flex-direction:column;gap:16px;max-width:56ch}
.abs-txt .label{color:var(--orange)}
.abs-txt p{color:var(--ink-2);font-size:1.05rem;line-height:1.62;font-weight:300}
.abs-sig{font-family:Fraunces,serif;font-size:1.25rem;font-weight:600}

/* ---------- Fuß ---------- */
.fuss{background:var(--navy);color:rgba(255,255,255,.62);padding:clamp(56px,6vw,88px) 0 40px}
.fuss-raster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px 30px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.fuss-raster{grid-template-columns:1fr}}
.fuss .marke{color:#fff;margin-bottom:14px}
.fuss-sp{display:flex;flex-direction:column;gap:10px}
.fuss-sp .label{color:rgba(255,255,255,.42);margin-bottom:4px}
.fuss-sp a,.fuss-sp p{font-size:.93rem;color:rgba(255,255,255,.62)}
.fuss-sp a:hover{color:var(--orange)}
.fuss-unten{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  padding-top:26px;font-size:.85rem;color:rgba(255,255,255,.42)}
.hinweis{font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.5);max-width:52ch}

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

/* ==========================================================================
   Anpassungen an die WordPress-Umgebung
   ==========================================================================
   Der Entwurf kannte keinen Theme-Kopfbereich. Astra blendet über dem Hero
   einen eigenen Kopf ein, der rund 110 px beansprucht. Die folgenden Regeln
   gleichen das aus, ohne die Gestaltung zu verändern.
   Dieses Stylesheet lädt ausschließlich auf der Startseite.
   ========================================================================== */

/* Astra faerbt die Menueleiste ein. Über dem Hero muss sie transparent sein,
   sonst liegt ein blauer Kasten im Bild. */
.main-header-menu,
.ast-builder-menu .main-header-menu,
.ast-primary-header-bar .main-header-menu {
  background-color: transparent !important;
}

/* Zwei Korrekturen gegenueber dem Entwurf:

   1. Die Zeilenbreite war in "ch" bemessen. Bei 73 px Schriftgroesse faellt
      das zu schmal aus, und zusammen mit text-wrap:balance bricht die
      Schlagzeile nach jedem Wort um. Feste Breite ist hier vorhersagbar.

   2. Ein Innenabstand oben wuerde die Sektion ueber die Bildhoehe hinaus
      wachsen lassen – darunter erschiene ein schwarzer Streifen. Der
      Abstand zum Theme-Kopf entsteht stattdessen aus der geringeren
      Zeilenzahl der Schlagzeile. */
.hero-txt { max-width: 660px; }
.hero h1 { text-wrap: pretty; }

/* Das Format-Label steht auf hellen Bildstellen. Ein leichter Schatten
   sichert die Lesbarkeit, ohne die Gestaltung zu veraendern. */
.hero .label { text-shadow: 0 1px 3px rgba(8,14,18,.95), 0 2px 18px rgba(8,14,18,.85); color: #FF8A2B; }
.hero .vorspann, .hero .byline { text-shadow: 0 1px 10px rgba(8, 14, 18, .5); }

/* Astra setzt auf Seiten mit Seitenbauer einen Innenabstand, der die
   randlosen Sektionen einrücken würde. */
.elementor-page .site-content .ast-container { padding-left: 0; padding-right: 0; max-width: 100%; }
.elementor-page .entry-content > .elementor { margin: 0; }

/* Astra und Elementor setzen fuer Bilder height:auto mit hoher Spezifitaet.
   Dadurch fuellen die Motive ihre Bildflaechen nicht aus und der
   Hintergrund der Kachel scheint darunter durch. Die Bildflaechen geben
   das Seitenverhaeltnis vor, das Motiv muss sie vollstaendig fuellen. */
.hero-bild img,
.karte-bild img,
.at-bild img,
.welt img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  max-width: none;
}

/* Auf hellen Motiven verschwand das Label im Bild. Der Verlauf setzt
   etwas frueher an – Gestaltung unveraendert, Lesbarkeit gesichert. */
.welt::after {
  background: linear-gradient(180deg, rgba(8,14,18,.05) 18%, rgba(8,14,18,.55) 58%, rgba(8,14,18,.9) 100%);
}

/* Der seitliche Innenabstand der Inhaltsspalte wurde von einer fremden Regel
   auf 0 gesetzt – mobil klebte der Text am Bildschirmrand. Hoehere
   Spezifitaet ueber den Widget-Kontext stellt ihn wieder her. */
.elementor-widget-html .k,
.elementor-widget-html .k-eng {
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}
/* Der Hero traegt seinen Abstand ueber die innere Spalte, nicht ueber die
   Sektion – sonst wuerde das Hintergrundbild eingerueckt. */
.elementor-widget-html .hero > .k {
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

/* ==========================================================================
   KI-Kennzeichnung nach Artikel 50 EU AI Act
   ==========================================================================
   Die Hinweise stehen als echter Text im HTML, nicht als CSS-Inhalt – sie
   bleiben dadurch fuer Screenreader, Textkopie und ohne Stylesheet erhalten.
   Alt-Texte beschreiben weiterhin nur den Bildinhalt und tragen keinen
   rechtlichen Hinweis.
   ========================================================================== */

.ki-hinweis {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);            /* auf hellem Grund rund 8:1 Kontrast */
}

.ki-zeile { margin: 14px 0 0; }

/* Auf dunklen Flaechen und ueber Bildern */
.hero .ki-hinweis,
.ki-hell,
.ki-auf-bild .ki-hinweis {
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 4px rgba(8, 14, 18, .8);
}

/* Oesterreich: unten links im Bildbereich, mit eigener Abdunklung,
   damit der Hinweis auf jedem Bildinhalt lesbar bleibt. */
.ki-auf-bild {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 8px 16px;
  background: rgba(8, 14, 18, .62);
}

/* Themenwelten: eigene Zeile unter der Beschreibung */
.welt-txt .ki-hinweis { display: block; margin-top: 6px; }

/* Saison-Karten: Trenner in der Metazeile */
.punkt-trenner { color: var(--ink-3); }
.karte .meta .ki-hinweis { white-space: nowrap; }

@media (max-width: 660px) {
  .karte .meta { flex-wrap: wrap; row-gap: 4px; }
}

/* Feinschliff der KI-Kennzeichnung nach der Sichtpruefung:
   In den Saison-Karten stand der Hinweis in derselben Zeile wie Lesezeit und
   Datum und drueckte diese in den Umbruch. Er bekommt eine eigene Zeile.
   In den Themenwelten war die Zeile fuer die Kachelbreite zu lang. */

.karte .meta { flex-wrap: wrap; row-gap: 6px; }
.karte .meta .ki-hinweis {
  flex: 0 0 100%;
  margin-top: 2px;
  white-space: normal;
}
.karte .meta .punkt-trenner { display: none; }   /* Trenner vor dem Umbruch entfaellt */

.welt-txt .ki-hinweis {
  font-size: .56rem;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* Auf schmalen Bildschirmen stehen die Kacheln einspaltig – dort ist Platz
   fuer eine lesbare Schriftgroesse. Die Verkleinerung war nur noetig, damit
   der Hinweis in der vierspaltigen Desktopansicht einzeilig bleibt. */
@media (max-width: 1000px) {
  .ki-hinweis { font-size: .72rem; letter-spacing: .09em; }
  .welt-txt .ki-hinweis { font-size: .7rem; letter-spacing: .08em; }
}