/**
 * Design der Hauser Massivbau GmbH.
 *
 * Quelle: `01 KUNDEN/006 Hauser Massivbau/_Wissen/MARKEN.md` — Werte von der
 * Live-Website `hausermassivbau.de`, abgerufen 14.09.2026.
 *
 *   Orange      #EC6607   die Markenfarbe, sonst keine Buntfarbe
 *   Dunkelgrau  #4E4640   Text (die Website nennt es `--brown`)
 *   tiefer      #37312D   Seitenleiste
 *   Hellgrau    #DFD8CC   Linien
 *   Fläche      #F2EFEB   Grund
 *   Schrift     FreightMicro Pro für Überschriften, Inter für alles andere
 *
 * **Zwei Orange, und das ist Absicht.** `#EC6607` hat auf Weiß nur rund 3,2:1
 * — genug für Flächen, zu wenig für Text. Knöpfe mit weißer Schrift nehmen
 * deshalb `#D15700` (die Hover-Stufe der Website), Text in Orange `#9B4000`.
 * Beide stehen als „technische Abstufungen" in MARKEN.md, keine ist erfunden.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* FreightMicro Pro liegt lizenziert in `_CI/` und deckt laut Lizenzmappe auch
   Web ab. Die Datei ist nicht eingecheckt (`.gitignore`) — fehlt sie, greift
   eine Serifenschrift des Systems. */
@font-face{ font-family:"FreightMicro Pro"; src:url("schrift/FreightMicroPro.otf") format("opentype");
  font-weight:500; font-display:swap }

:root{
  --orange:#EC6607; --orange-knopf:#D15700; --orange-text:#9B4000;
  --akzent:#D15700; --akzent-dark:#9B4000; --akzent-soft:#FCEBDD;
  --navy:#37312D; --navy-mid:#4E4640; --navy-soft:#F2EFEB;
  --schiefer:#4E4640; --muted:#8A8078;
  --gruen:#5E9E6E; --gruen-soft:#E7F2EA; --gruen-dark:#3F7A50;
  --rot:#C0392B; --rot-soft:#FBE9E7;
  --gelb:#D99A1E; --gelb-soft:#FBF1DC;
  --bg:#F2EFEB; --surface:#FFFFFF; --line:#E6E0D6; --line-stark:#DFD8CC;
  --radius:10px; --radius-s:6px;
  --schatten:0 1px 2px rgba(55,49,45,.06), 0 6px 18px rgba(55,49,45,.05);
  --grau-mittel:#8A8078;
  --f-titel:"FreightMicro Pro", Georgia, "Times New Roman", serif;
  --anmelde-grund: linear-gradient(165deg, #37312D 0%, #4E4640 70%, #5d534c 100%);
}
body{ font-family:Inter, -apple-system, "Segoe UI", sans-serif; color:var(--navy) }
.kopf h1, .tafel-kopf h2, .post-kopf h2{ font-family:var(--f-titel); font-weight:500; letter-spacing:0 }
.kopf h1{ font-size:24px }
a{ color:var(--orange-text) }
::selection{ background:var(--orange); color:#fff }

/* Seitenleiste: das tiefe Grau, weißer Kopf für das orangefarbene Logo —
   wie auf der Website: heller Kopf über dunklem Rest. */
.seite{ background:#37312D }
.marke .logo{ height:46px }
.marke .ich .kuerzel{ background:var(--orange) }
nav .gruppe{ color:rgba(255,255,255,.5) }
nav a.aktiv{ background:var(--orange-knopf); color:#fff }
nav a:hover{ background:rgba(255,255,255,.07) }
.seite .fuss a{ color:#F6A56B }
.seite .fuss b{ color:#F6A56B !important }

.knopf.primaer{ background:var(--orange-knopf); border-color:var(--orange-knopf) }
.knopf.primaer:hover{ background:var(--orange-text); border-color:var(--orange-text) }
.chip.an{ background:var(--orange-knopf); border-color:var(--orange-knopf); color:#fff }
.kachel.akzent{ border-color:#F3C29D; background:linear-gradient(180deg,#FFF8F2,#fff) }
.kachel .wert{ font-family:var(--f-titel); font-weight:500 }

/* ═══════════════════════ Posteingang ═══════════════════════ */
.mail-pille{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:99px; background:#fff; border:1px solid var(--line-stark); color:var(--schiefer) }
.mail-pille i{ width:8px; height:8px; border-radius:50%; background:var(--gruen) }
.mail-pille.demo i{ background:var(--gelb) }
.mail-pille.fehler i{ background:var(--rot) }

.post{ display:grid; grid-template-columns:200px minmax(300px, 400px) 1fr; gap:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--schatten); height:calc(100vh - 130px); min-height:520px; overflow:hidden }
.post-ordner{ border-right:1px solid var(--line); padding:12px 8px; background:#FBFAF8; display:flex; flex-direction:column; gap:2px }
.post-ordner button{ display:flex; align-items:center; gap:9px; border:0; background:none; text-align:left;
  padding:8px 10px; border-radius:var(--radius-s); font-size:13px; font-weight:500; cursor:pointer; color:var(--navy) }
.post-ordner button:hover{ background:var(--navy-soft) }
.post-ordner button.an{ background:var(--akzent-soft); color:var(--orange-text); font-weight:700 }
.post-ordner button b{ margin-left:auto; font-size:11px; background:var(--orange-knopf); color:#fff;
  padding:1px 7px; border-radius:99px }
.post-hinweis{ margin-top:auto; font-size:11.5px; color:var(--muted); padding:10px; line-height:1.45 }
.post-hinweis code{ font-size:11px }

.post-liste{ border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0 }
.post-suche{ padding:10px; border-bottom:1px solid var(--line) }
.post-suche input{ width:100%; padding:8px 10px; border:1px solid var(--line-stark); border-radius:var(--radius-s) }
#postZeilen{ overflow-y:auto; flex:1 }
.post-zeile{ display:flex; gap:11px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line);
  background:#fff; padding:12px 14px; cursor:pointer; position:relative }
.post-zeile:hover{ background:#FBFAF8 }
.post-zeile.an{ background:var(--akzent-soft) }
.post-zeile.neu::before{ content:""; position:absolute; left:4px; top:20px; width:6px; height:6px;
  border-radius:50%; background:var(--orange) }
.post-zeile.neu b, .post-zeile.neu .post-betreff{ font-weight:700 }
.post-kern{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px }
.post-z1{ display:flex; gap:8px; align-items:baseline }
.post-z1 b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.post-z1 time{ margin-left:auto; font-size:11.5px; color:var(--muted); flex:none }
.post-betreff{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.post-betreff em{ color:var(--orange-text); font-style:normal; font-weight:700 }
.post-vorschau{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.post-marke{ margin-top:4px }
.post-marke .zu{ font-size:11px; background:var(--navy-soft); color:var(--schiefer); padding:2px 8px; border-radius:99px }
.post-marke .frei{ font-size:11px; background:var(--gelb-soft); color:#7A5410; padding:2px 8px; border-radius:99px }

.avatar{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:#EDE7DE; color:var(--schiefer) }
.avatar.aus{ background:var(--akzent-soft); color:var(--orange-text) }
.avatar.gross{ width:42px; height:42px; font-size:14px }

.post-lesen{ overflow-y:auto; padding:22px 28px; min-width:0 }
.post-leer{ display:grid; place-items:center; height:100%; color:var(--muted) }
.post-kopf h2{ margin:0 0 12px; font-size:22px; line-height:1.25 }
.post-von{ display:flex; gap:12px; align-items:center; margin-bottom:12px }
.post-von time{ margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap }
.klein{ font-size:12px; color:var(--muted) }
.post-zuordnung{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; border-radius:var(--radius);
  padding:12px 14px; margin:6px 0 16px; border:1px solid var(--line) }
.post-zuordnung.ja{ background:#FBFAF8; cursor:pointer }
.post-zuordnung.ja:hover{ border-color:var(--orange) }
.post-zuordnung.ja .pfeil{ margin-left:auto; font-size:12px; font-weight:600; color:var(--orange-text) }
.post-zuordnung.nein{ background:var(--gelb-soft); border-color:#EED9A8 }
.post-zu-knoepfe{ margin-left:auto; display:flex; gap:8px }
#zuordnenFeld{ flex-basis:100% }
.post-zuordnen-form{ display:flex; gap:8px; margin-top:4px }
.post-text{ white-space:pre-wrap; font-size:14px; line-height:1.6; margin-bottom:18px; overflow-wrap:anywhere }
.post-aktionen{ margin:6px 0 10px }

.verfassen{ border:1px solid var(--line-stark); border-radius:var(--radius); padding:12px; background:#fff;
  box-shadow:0 4px 18px rgba(55,49,45,.08); margin-bottom:14px }
.verfassen-kopf{ display:grid; gap:6px; margin-bottom:8px }
.verfassen-kopf label{ display:grid; grid-template-columns:60px 1fr; align-items:center; font-size:12px;
  color:var(--muted); font-weight:600 }
.verfassen textarea{ width:100%; font:inherit; font-size:14px; min-height:150px }
.verfassen-zitat{ font-size:12px; color:var(--muted); border-left:3px solid var(--line-stark);
  padding:4px 10px; margin:8px 0; white-space:pre-wrap }
.verfassen-fuss{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px }
.verfassen-fuss .klein{ margin-left:auto }

/* Die Mailkarte am Vorgang — der Faden wie in Close */
.mailkarte .karte-kopf h2::before{ content:"✉ "; color:var(--orange) }
.faden{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; background:#fff }
.faden summary{ list-style:none; display:flex; gap:10px; align-items:center; padding:10px 12px; cursor:pointer }
.faden summary::-webkit-details-marker{ display:none }
.faden[open] summary{ border-bottom:1px solid var(--line) }
.faden .post-text{ padding:12px 14px 0; margin-bottom:8px; font-size:13.5px }
.faden.aus{ border-left:3px solid var(--orange) }
.faden-kern{ min-width:0; flex:1; display:flex; flex-direction:column }
.faden-kern b{ font-size:13px }
.faden-betreff{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.faden time{ font-size:11.5px; color:var(--muted); white-space:nowrap }
.faden .entwurf{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--orange-text);
  background:var(--akzent-soft); padding:1px 6px; border-radius:99px; margin-left:4px }
.faden-fuss{ display:flex; gap:8px; padding:0 14px 12px }
.geraetecode{ font-family:ui-monospace, monospace; font-size:30px; font-weight:700; letter-spacing:.18em;
  padding:14px; text-align:center; background:var(--navy-soft); border-radius:var(--radius); margin:6px 0 14px }

/* Vertriebsübersicht */
.zwei-spalten{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px }
.zwei-spalten .karte + .karte{ margin-top:0 }
.balken-liste{ display:grid; gap:8px }
.balken-zeile{ display:grid; grid-template-columns:170px 1fr 34px; gap:10px; align-items:center; font-size:13px }
.balken-zeile[data-sprung]{ cursor:pointer }
.bl-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bl-spur{ height:10px; background:var(--navy-soft); border-radius:99px; overflow:hidden }
.bl-spur i{ display:block; height:100%; border-radius:99px }
.bl-zahl{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums }

@media (max-width:1100px){
  .post{ grid-template-columns:1fr; height:auto }
  .post-ordner{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line) }
  .post-hinweis{ display:none }
  #postZeilen{ max-height:50vh }
  .zwei-spalten{ grid-template-columns:1fr }
}

/* Die Verbindungsanzeige bleibt eine Zeile, auch im schmalen Fenster — das
   Motorblatt setzt dort Schrift für `.werkzeuge span` groß (24.09.2026). */
.kopf .werkzeuge .mail-pille{ font:600 12px/1.3 Inter, sans-serif !important; letter-spacing:0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-align:left;
  padding:5px 12px !important; background:#fff !important; border:1px solid var(--line-stark) !important;
  color:var(--schiefer) !important; border-radius:99px !important; min-height:0 !important }

/* Grid-Kinder schrumpfen sonst nicht unter ihren Inhalt: Eine Signatur ohne
   Leerzeichen („+49 7454 … www.…") drückte die ganze Seite in die Breite. */
.post > *, .post-kern, .post-zeile{ min-width:0 }
.post{ max-width:100% }
.post-vorschau, .post-betreff{ max-width:100% }

/* ═══════════════════════ Mein Eingang ═══════════════════════ */
.ein{ display:grid; gap:14px; max-width:1100px }
.ein .karte + .karte{ margin-top:0 }
.ein-zahl{ background:var(--orange-knopf); color:#fff; font-size:11px; padding:1px 8px; border-radius:99px }
.ein-zeile{ display:flex; gap:12px; align-items:center; padding:10px 2px; border-bottom:1px solid var(--line);
  transition:opacity .3s }
.ein-zeile:last-child{ border-bottom:0 }
.ein-aufgabe{ cursor:pointer }
.ein-aufgabe input{ width:18px; height:18px; flex:none; accent-color:var(--orange-knopf) }
.ein-kern{ flex:1; min-width:0 }
.ein-aktion{ display:flex; gap:8px; align-items:center; flex:none }
.ein-vorgang{ color:var(--navy); text-decoration:none; font-weight:600 }
.ein-vorgang:hover{ color:var(--orange-text) }
.ein-wer{ font-size:11px; background:var(--navy-soft); padding:1px 7px; border-radius:99px; margin-left:4px }
.ein-leer{ color:var(--gruen-dark); font-size:13px }
.ein-weg{ opacity:.25; text-decoration:line-through }
.ein-teamzeile{ cursor:pointer }
.ein-teamzeile:hover td{ background:var(--akzent-soft) }

/* ═══════════════════════ Kontrollzentrum ═══════════════════════ */
.kz{ display:grid; gap:22px; max-width:1240px }
.kz .karte + .karte{ margin-top:0 }
.kz-block{ display:grid; gap:12px }
.kz-block > header{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-bottom:2px solid var(--line-stark); padding-bottom:6px }
.kz-block > header h2{ margin:0; font-family:var(--f-titel); font-weight:500; font-size:22px }
.kz-quelle{ font-size:11.5px; color:var(--muted); background:#fff; border:1px solid var(--line);
  padding:1px 8px; border-radius:99px }
.kz-quelle.warn{ color:var(--rot); border-color:#F0C3BD }
.kz-mehr{ margin-left:auto; font-size:13px; font-weight:600; text-decoration:none }
.kz .kacheln{ margin-bottom:0 }
.kachel.warn .wert{ color:var(--rot) }
.kz-zwei{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.kz-achtung{ display:flex; flex-wrap:wrap; gap:8px }
.kz-achtung button{ border:1px solid; border-radius:99px; padding:7px 14px; font-size:13px;
  font-weight:600; cursor:pointer; background:#fff }
.kz-achtung button span{ margin-left:6px }
.kz-achtung .kz-rot{ border-color:#E8A79F; color:#9B2A1E; background:var(--rot-soft) }
.kz-achtung .kz-gelb{ border-color:#EED9A8; color:#7A5410; background:var(--gelb-soft) }
.kz-ruhig{ color:var(--gruen-dark); font-weight:600; font-size:14px }
.kz-saeulen{ display:flex; gap:6px; align-items:flex-end; height:150px; padding-top:18px }
.kz-saeule{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; position:relative }
.kz-saeule i{ display:block; width:100%; max-width:34px; background:var(--orange-knopf); border-radius:4px 4px 0 0 }
.kz-saeule.laufend i{ background:#F3B98C }
.kz-sw{ font-size:11px; font-weight:700; color:var(--schiefer); margin-bottom:3px }
.kz-kw{ position:absolute; bottom:-18px; font-size:10px; color:var(--muted); white-space:nowrap }
.kz-saeulen + *{ margin-top:22px }
.kz .karte-koerper:has(.kz-saeulen){ padding-bottom:30px }
.kz-ceo{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.kz-ceo div{ display:flex; flex-direction:column; gap:2px }
.kz-ceo b{ font-family:var(--f-titel); font-weight:500; font-size:30px; line-height:1 }
.kz-ceo span{ font-size:12px; color:var(--muted) }
.kz-signale{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:3px }
.kz-signale li{ font-size:12px; padding-left:16px; position:relative }
.kz-signale li::before{ content:""; position:absolute; left:2px; top:6px; width:8px; height:8px; border-radius:50% }
.kz-signale .kz-rot{ color:#9B2A1E } .kz-signale .kz-rot::before{ background:var(--rot) }
.kz-signale .kz-gelb{ color:#7A5410 } .kz-signale .kz-gelb::before{ background:var(--gelb) }
.kz-signale .kz-grau{ color:var(--muted) } .kz-signale .kz-grau::before{ background:#C9BFB2 }
.kz-spark{ display:flex; align-items:flex-end; gap:1px; height:34px; width:130px }
.kz-spark i{ flex:1; background:var(--orange-knopf); opacity:.8; min-height:1px }
.kz-tage{ display:flex; align-items:flex-end; gap:3px; height:120px }
.kz-tage div{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative }
.kz-tage i{ display:block; width:100%; background:var(--orange-knopf); border-radius:3px 3px 0 0 }
.kz-tage b{ position:absolute; top:0; width:7px; height:7px; border-radius:50%; background:var(--navy) }
.kz-tab td{ vertical-align:top }
.kz-pfeil{ font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap }
.kz-pfeil.rot{ color:var(--rot) } .kz-pfeil.gruen{ color:var(--gruen-dark) }
.kz-rest summary{ cursor:pointer; font-size:13px; color:var(--muted); margin:8px 0 }
.kz-rest ul{ columns:2; font-size:12.5px }
.kz-listen{ display:flex; gap:8px; flex-wrap:wrap }
@media (max-width:1000px){ .kz-zwei, .kz-ceo{ grid-template-columns:1fr } }

/* ═══════════════════════ Werbung ═══════════════════════ */
.w-leiste{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; position:sticky; top:74px; z-index:5 }
.w-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.w-eigen{ display:flex; gap:6px; align-items:center; font-size:12px; color:var(--muted) }
.w-eigen input{ width:auto; padding:4px 6px; font-size:12px }
.w-filter{ display:flex; gap:8px } .w-filter select{ width:auto }
.w-kachel .notiz{ min-height:16px }
.w-delta{ font-weight:700; font-size:11.5px; color:var(--muted) }
.w-delta.gut{ color:var(--gruen-dark) } .w-delta.schlecht{ color:var(--rot) }
.w-laeuft{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px }
.w-laufkarte{ text-align:left; border:1px solid var(--line); border-left:4px solid var(--gruen); background:#fff;
  border-radius:var(--radius); padding:10px 12px; display:grid; gap:3px; cursor:pointer; font-size:13px }
.w-laufkarte.haengt{ border-left-color:var(--rot) }
.w-laufkarte:hover{ border-color:var(--orange) }
.w-warn{ color:var(--rot); font-size:12px; font-weight:600 }
.w-legende{ display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--schiefer); margin-bottom:6px }
.w-legende i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px }
.w-monate{ display:flex; gap:3px; align-items:flex-end; height:170px; padding-bottom:20px; position:relative }
.w-monat{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  border:0; background:none; padding:0; cursor:pointer; position:relative; min-width:0 }
.w-monat:hover .w-stapel, .w-monat.an .w-stapel{ outline:2px solid var(--navy); outline-offset:1px }
.w-stapel{ width:100%; max-width:30px; display:flex; flex-direction:column-reverse; border-radius:3px 3px 0 0; overflow:hidden }
.w-stapel i{ display:block; width:100% }
.w-mname{ position:absolute; bottom:-18px; font-size:10px; color:var(--muted); white-space:nowrap }
.w-tab tbody tr{ cursor:pointer } .w-tab tbody tr:hover td{ background:var(--akzent-soft) }
.w-kat{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap;
  color:var(--f); background:color-mix(in srgb, var(--f) 12%, white) }
.w-plattformen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px }
.w-plattform{ display:grid; gap:5px }
.w-pkopf{ display:flex; justify-content:space-between; font-size:13px }
.w-plattform ul{ list-style:none; margin:4px 0 0; padding:0; font-size:12px; color:var(--schiefer) }
.w-plattform li{ display:flex; justify-content:space-between; border-bottom:1px dotted var(--line); padding:2px 0 }
.w-achse{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:4px }
.w-motive{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px }
.w-motiv{ display:grid; grid-template-columns:110px 1fr; gap:10px; border:1px solid var(--line); border-radius:var(--radius); padding:10px }
.w-bild{ width:110px; height:110px; background:var(--navy-soft); border-radius:6px; overflow:hidden; display:grid; place-items:center;
  font-size:11px; color:var(--muted) }
.w-bild img{ width:100%; height:100%; object-fit:cover }
.w-mtext{ min-width:0; display:grid; gap:4px; align-content:start; font-size:13px }
.w-mtext p{ margin:0; font-size:12px; color:var(--schiefer); white-space:pre-line; max-height:5.2em; overflow:hidden }
.w-mzahlen{ display:flex; flex-wrap:wrap; gap:8px; font-size:12px; font-weight:600 }
.w-mtext .knopf{ justify-self:start }
.w-trends{ display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:12px }
.w-trends .karte + .karte{ margin-top:0 }
.w-trend{ margin-left:auto; font-size:12px; font-weight:700; color:var(--muted) }
.w-trend.gut{ color:var(--gruen-dark) } .w-trend.schlecht{ color:var(--rot) }
.w-linie{ width:100%; height:auto; display:block }
.w-lwert{ font-size:12px; font-weight:700; fill:var(--navy) }
.w-lachse{ font-size:10px; fill:var(--muted) }
@media (max-width:800px){ .w-leiste{ position:static } .w-trends{ grid-template-columns:1fr } }