/* =====================================================================
   IGO Technical X-Perts — Kundenportal (Schriften ohne externe Anbieter)
   Gestaltung im Stil der Hauptseite. Die Farb- und Schrift-Token sind
   aus index.html übernommen; wer dort etwas ändert, ändert es hier mit.
   ===================================================================== */

:root{
  --b7:#1B5A8A; --b6:#2069A0; --b5:#2878B5; --b4:#4A94C9; --b3:#7BB3DA;
  --acc:#E66B3D; --acc2:#F58A5A;
  --ok:#3FA37A; --ok2:#5BC195;
  --warn:#D9A441;
  --bg:#060E18; --bg2:#0A1628; --card:#101F33; --card-h:#142842;
  --bdr:rgba(27,90,138,.12); --bdr2:rgba(27,90,138,.22); --bdr3:rgba(27,90,138,.36);
  --w:#FFF; --t1:#E4EAF0; --t2:#8FA4BC; --t3:#5A7190;
  --fd:Georgia,'Times New Roman',serif; --fb:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mx:1240px; --r:12px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  font-family:var(--fb);background:var(--bg);color:var(--t1);
  line-height:1.65;min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--b4);outline-offset:2px;border-radius:4px}

.c{max-width:var(--mx);margin:0 auto;padding:0 clamp(18px,4vw,48px);width:100%}
.c-schmal{max-width:820px}

/* ------------------------------------------------------------------ */
/* Kopfzeile                                                           */
/* ------------------------------------------------------------------ */
.kopf{
  position:sticky;top:0;z-index:200;
  background:rgba(6,14,24,.92);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--bdr);
}
.kopf-innen{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:64px;max-width:var(--mx);margin:0 auto;padding:0 clamp(18px,4vw,48px);
}
.marke{display:flex;align-items:center;gap:10px;flex-shrink:0}
.marke-tx{line-height:1.05}
.marke-tx span{display:block;font-size:13.5px;color:#9BA8B4;font-weight:300;letter-spacing:.4px}
.marke-tx strong{display:block;font-size:13.5px;color:var(--b4);font-weight:700;letter-spacing:1.4px}
.marke-zusatz{
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);
  border-left:1px solid var(--bdr2);padding-left:12px;margin-left:2px;font-weight:600;
}
@media(max-width:600px){.marke-zusatz{display:none}}

.hauptnav{display:flex;align-items:center;gap:4px;list-style:none;flex-wrap:wrap}
.hauptnav a{
  display:block;padding:7px 13px;border-radius:7px;
  font-size:12.5px;font-weight:500;color:var(--t2);transition:.22s;
}
.hauptnav a:hover{color:var(--w);background:rgba(27,90,138,.14)}
.hauptnav a[aria-current="page"]{color:var(--w);background:rgba(27,90,138,.22)}
.hauptnav .nav-admin a{color:var(--acc2)}

.kopf-konto{display:flex;align-items:center;gap:12px;flex-shrink:0}
.kopf-konto .name{font-size:12px;color:var(--t2);text-align:right;line-height:1.3}
.kopf-konto .name strong{display:block;color:var(--t1);font-weight:600;font-size:12.5px}
@media(max-width:820px){.kopf-konto .name{display:none}}

.nav-schalter{display:none;background:none;border:1px solid var(--bdr2);border-radius:7px;cursor:pointer;padding:8px 10px}
.nav-schalter span{display:block;width:18px;height:2px;background:var(--t1);margin:3.5px 0;border-radius:2px}
@media(max-width:900px){
  .nav-schalter{display:block}
  .hauptnav{
    display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--card);padding:14px;
    border-bottom:1px solid var(--bdr2);box-shadow:0 16px 40px rgba(0,0,0,.5);
  }
  .hauptnav.offen{display:flex}
  .hauptnav a{padding:11px 14px;font-size:13.5px}
}

/* ------------------------------------------------------------------ */
/* Seitenkopf und Grundraster                                          */
/* ------------------------------------------------------------------ */
main{flex:1;padding:clamp(28px,4vw,52px) 0 72px}
.seitenkopf{margin-bottom:30px}
.aufhaenger{font-size:10.5px;text-transform:uppercase;letter-spacing:3px;color:var(--b4);font-weight:600;margin-bottom:9px}
.aufhaenger.acc{color:var(--acc2)}
h1.titel{font-family:var(--fd);font-size:clamp(25px,3.2vw,38px);font-weight:400;line-height:1.12;color:var(--w);letter-spacing:-.4px}
h1.titel em{font-style:italic;color:var(--b4)}
.untertitel{font-size:14.5px;color:var(--t2);max-width:660px;margin-top:12px;line-height:1.7}

h2.abschnitt{
  font-family:var(--fd);font-size:20px;font-weight:400;color:var(--w);
  margin:38px 0 16px;letter-spacing:-.2px;
  display:flex;align-items:baseline;gap:12px;
}
h2.abschnitt::after{content:'';flex:1;height:1px;background:var(--bdr2)}
h2.abschnitt .zahl{font-size:12px;color:var(--t3);font-weight:400;font-family:var(--fb)}

.raster{display:grid;gap:13px}
.raster-2{grid-template-columns:repeat(2,1fr)}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.raster-3,.raster-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.raster-2,.raster-3,.raster-4{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ */
/* Karten                                                              */
/* ------------------------------------------------------------------ */
.karte{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:24px 22px;transition:.3s;position:relative;
}
.karte-still{background:rgba(16,31,51,.5)}
a.karte,.karte-klick{cursor:pointer}
a.karte:hover,.karte-klick:hover{border-color:var(--bdr3);background:var(--card-h);transform:translateY(-2px)}
.karte h3{font-size:15px;font-weight:600;color:var(--w);margin-bottom:7px;line-height:1.35}
.karte p{font-size:13px;color:var(--t2);line-height:1.65}
.karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}
.karte-kopf h3{margin-bottom:0}

.sinnbild{
  width:38px;height:38px;border-radius:9px;margin-bottom:13px;flex-shrink:0;
  background:rgba(27,90,138,.1);border:1px solid rgba(27,90,138,.2);
  display:flex;align-items:center;justify-content:center;
}
.sinnbild svg{width:19px;height:19px;stroke:var(--b4);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sinnbild.acc{background:rgba(230,107,61,.08);border-color:rgba(230,107,61,.2)}
.sinnbild.acc svg{stroke:var(--acc2)}

/* Kachel auf dem Übersichtsschirm */
.kachel{display:flex;flex-direction:column;min-height:186px}
.kachel .zaehler{
  margin-top:auto;padding-top:14px;font-size:12px;color:var(--b3);font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.kachel .zaehler .pfeil{transition:transform .25s}
a.karte:hover .zaehler .pfeil{transform:translateX(4px)}

/* ------------------------------------------------------------------ */
/* Termine                                                             */
/* ------------------------------------------------------------------ */
.termin{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:22px;display:grid;grid-template-columns:88px 1fr auto;gap:22px;align-items:start;
}
@media(max-width:760px){.termin{grid-template-columns:1fr;gap:14px}}
.termin.vorbei{opacity:.58}
.termin.gleich{border-color:rgba(230,107,61,.4);box-shadow:0 0 0 1px rgba(230,107,61,.12)}

.datumsblock{
  text-align:center;background:rgba(27,90,138,.1);border:1px solid var(--bdr2);
  border-radius:10px;padding:11px 6px;
}
@media(max-width:760px){.datumsblock{width:88px}}
.datumsblock .tag{font-family:var(--fd);font-size:27px;color:var(--b4);line-height:1}
.datumsblock .monat{font-size:10px;text-transform:uppercase;letter-spacing:1.6px;color:var(--t2);margin-top:4px}
.datumsblock .jahr{font-size:10px;color:var(--t3);margin-top:1px}

.termin-inhalt h3{font-size:16.5px;font-weight:600;color:var(--w);line-height:1.35;margin-bottom:5px}
.termin-inhalt .wann{font-size:12.5px;color:var(--b3);margin-bottom:9px}
.termin-inhalt p{font-size:13px;color:var(--t2);line-height:1.65}
.termin-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:11.5px;color:var(--t3)}
.termin-meta span{display:flex;align-items:center;gap:6px}
.termin-tat{display:flex;flex-direction:column;gap:9px;align-items:stretch;min-width:172px}
@media(max-width:760px){.termin-tat{min-width:0}}

/* ------------------------------------------------------------------ */
/* Kennzeichen                                                         */
/* ------------------------------------------------------------------ */
.kz{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;border:1px solid;
}
.kz-blau{color:var(--b3);background:rgba(27,90,138,.12);border-color:rgba(27,90,138,.28)}
.kz-acc{color:var(--acc2);background:rgba(230,107,61,.1);border-color:rgba(230,107,61,.28)}
.kz-ok{color:var(--ok2);background:rgba(63,163,122,.1);border-color:rgba(63,163,122,.3)}
.kz-warn{color:var(--warn);background:rgba(217,164,65,.1);border-color:rgba(217,164,65,.3)}
.kz-still{color:var(--t3);background:rgba(90,113,144,.1);border-color:rgba(90,113,144,.24)}
.punkt{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.punkt-puls{animation:pulsieren 2s infinite}
@keyframes pulsieren{0%,100%{opacity:1}50%{opacity:.28}}

/* ------------------------------------------------------------------ */
/* Schaltflächen                                                       */
/* ------------------------------------------------------------------ */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fb);font-size:13.5px;font-weight:600;line-height:1.2;
  padding:11px 22px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:.25s;text-align:center;
}
.knopf:disabled,.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.knopf-1{background:var(--b7);color:var(--w)}
.knopf-1:hover:not(:disabled){background:var(--b6);transform:translateY(-1px);box-shadow:0 6px 20px rgba(27,90,138,.32)}
.knopf-2{background:transparent;color:var(--t1);border-color:var(--bdr2)}
.knopf-2:hover:not(:disabled){border-color:var(--b5);background:rgba(27,90,138,.08)}
.knopf-acc{background:var(--acc);color:var(--w)}
.knopf-acc:hover:not(:disabled){background:var(--acc2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(230,107,61,.3)}
.knopf-gefahr{background:transparent;color:#E8836B;border-color:rgba(232,131,107,.35)}
.knopf-gefahr:hover:not(:disabled){background:rgba(232,131,107,.1);border-color:rgba(232,131,107,.6)}
.knopf-klein{font-size:12px;padding:8px 15px}
.knopf-breit{width:100%}
.knopf-schlicht{
  background:none;border:none;color:var(--b3);font-size:12.5px;font-weight:500;
  cursor:pointer;padding:0;font-family:var(--fb);
}
.knopf-schlicht:hover{color:var(--b4);text-decoration:underline}

/* ------------------------------------------------------------------ */
/* Formulare                                                           */
/* ------------------------------------------------------------------ */
.feld{margin-bottom:17px}
.feld label,.feldname{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--t2);margin-bottom:7px;
}
.feld .pflicht{color:var(--acc2);margin-left:2px}
.feld input[type=text],.feld input[type=email],.feld input[type=password],
.feld input[type=tel],.feld input[type=url],.feld input[type=number],
.feld input[type=date],.feld input[type=time],.feld input[type=datetime-local],
.feld input[type=file],.feld select,.feld textarea{
  width:100%;font-family:var(--fb);font-size:14px;color:var(--t1);
  background:var(--bg2);border:1px solid var(--bdr2);border-radius:8px;
  padding:11px 14px;transition:.22s;
}
.feld textarea{min-height:130px;resize:vertical;line-height:1.65}
.feld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA4BC' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--b5);background:var(--card);
  box-shadow:0 0 0 3px rgba(40,120,181,.14);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--t3)}
.feld .beiwerk{font-size:11.5px;color:var(--t3);margin-top:6px;line-height:1.55}
.feld.fehlerhaft input,.feld.fehlerhaft select,.feld.fehlerhaft textarea{border-color:#C0563C}
.feld .feldfehler{font-size:12px;color:#E8836B;margin-top:6px}

.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.feld-paar{grid-template-columns:1fr}}

.ankreuz{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:13px;color:var(--t2);line-height:1.6}
.ankreuz input[type=checkbox],.ankreuz input[type=radio]{
  width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--b5);cursor:pointer;
}
.ankreuz strong{color:var(--t1);font-weight:600}

/* ------------------------------------------------------------------ */
/* Meldungen                                                           */
/* ------------------------------------------------------------------ */
.meldung{
  display:flex;gap:12px;align-items:flex-start;
  border-radius:10px;padding:14px 17px;margin-bottom:15px;
  font-size:13.5px;line-height:1.6;border:1px solid;
}
.meldung svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.meldung-ok{color:var(--ok2);background:rgba(63,163,122,.08);border-color:rgba(63,163,122,.28)}
.meldung-ok svg{stroke:var(--ok2)}
.meldung-fehler{color:#E8836B;background:rgba(192,86,60,.09);border-color:rgba(192,86,60,.32)}
.meldung-fehler svg{stroke:#E8836B}
.meldung-warnung{color:var(--warn);background:rgba(217,164,65,.08);border-color:rgba(217,164,65,.28)}
.meldung-warnung svg{stroke:var(--warn)}
.meldung-info{color:var(--b3);background:rgba(27,90,138,.1);border-color:var(--bdr2)}
.meldung-info svg{stroke:var(--b3)}
.meldung strong{display:block;color:var(--w);font-weight:600;margin-bottom:2px}

/* Leerer Zustand */
.leer{
  text-align:center;padding:52px 26px;border:1px dashed var(--bdr2);
  border-radius:var(--r);background:rgba(16,31,51,.35);
}
.leer h3{font-family:var(--fd);font-size:18px;font-weight:400;color:var(--t1);margin-bottom:9px}
.leer p{font-size:13.5px;color:var(--t2);max-width:440px;margin:0 auto;line-height:1.7}

/* ------------------------------------------------------------------ */
/* Tabellen                                                            */
/* ------------------------------------------------------------------ */
.tabellenrahmen{overflow-x:auto;border:1px solid var(--bdr);border-radius:var(--r);background:var(--card)}
table.liste{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
table.liste th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--t3);font-weight:600;padding:13px 16px;
  border-bottom:1px solid var(--bdr2);white-space:nowrap;background:rgba(10,22,40,.5);
}
table.liste td{padding:13px 16px;border-bottom:1px solid var(--bdr);color:var(--t2);vertical-align:middle}
table.liste tr:last-child td{border-bottom:none}
table.liste tbody tr:hover td{background:rgba(27,90,138,.06)}
table.liste td strong{color:var(--t1);font-weight:600}
table.liste td .leise{display:block;font-size:11.5px;color:var(--t3);margin-top:2px}
table.liste .rechts{text-align:right}
table.liste .tatspalte{white-space:nowrap;text-align:right}

/* ------------------------------------------------------------------ */
/* Anmeldeseite                                                        */
/* ------------------------------------------------------------------ */
body.tor{justify-content:center;background:var(--bg)}
body.tor::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 70% 25%,rgba(230,107,61,.07),transparent 65%),
    radial-gradient(ellipse 50% 50% at 22% 78%,rgba(27,90,138,.16),transparent 70%);
}
body.tor::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(27,90,138,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,90,138,.03) 1px,transparent 1px);
  background-size:70px 70px;
}
.torfeld{position:relative;z-index:1;width:100%;max-width:452px;margin:auto;padding:36px 20px}
.torkarte{
  background:var(--card);border:1px solid var(--bdr2);border-radius:16px;
  padding:clamp(28px,5vw,40px);box-shadow:0 26px 70px rgba(0,0,0,.5);
}
.torkopf{text-align:center;margin-bottom:28px}
.torkopf .marke{justify-content:center;margin-bottom:20px}
.torkopf h1{font-family:var(--fd);font-size:25px;font-weight:400;color:var(--w);letter-spacing:-.3px}
.torkopf p{font-size:13.5px;color:var(--t2);margin-top:9px;line-height:1.65}
.torfuss{
  text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--bdr);
  font-size:12.5px;color:var(--t3);line-height:1.75;
}
.torfuss a{color:var(--b3)}
.torfuss a:hover{color:var(--b4);text-decoration:underline}

/* Passwortstärke */
.staerke{display:flex;gap:4px;margin-top:9px}
.staerke i{flex:1;height:3px;border-radius:2px;background:var(--bdr2);transition:background .25s}
.staerke i.an-1{background:#C0563C}
.staerke i.an-2{background:var(--warn)}
.staerke i.an-3{background:var(--ok)}

/* ------------------------------------------------------------------ */
/* Fußzeile                                                            */
/* ------------------------------------------------------------------ */
.fuss{border-top:1px solid var(--bdr);background:var(--bg2);padding:26px 0;margin-top:auto}
.fuss-innen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  font-size:11.5px;color:var(--t3);
}
.fuss-innen nav{display:flex;flex-wrap:wrap;gap:16px}
.fuss-innen a:hover{color:var(--b3)}

/* ------------------------------------------------------------------ */
/* Hilfsklassen                                                        */
/* ------------------------------------------------------------------ */
.nurvorleser{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.reihe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.reihe-ende{justify-content:flex-end}
.abstand-o{margin-top:22px}
.abstand-u{margin-bottom:22px}
.leise{color:var(--t3);font-size:12px}
.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:12.5px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ------------------------------------------------------------------ */
/* Ergänzungen Kundenportal                                            */
/* ------------------------------------------------------------------ */
.marke-bild{height:36px;width:auto}
form.inline{display:inline-flex;gap:6px;flex-wrap:wrap}
.versteckt{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.torfuss-leise{border-top:none;padding-top:14px}
.kachel-fuss{margin-top:auto;padding-top:14px}
.tabellenrahmen table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.tabellenrahmen th{text-align:left;padding:12px 16px;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--bdr2)}
.tabellenrahmen td{padding:12px 16px;border-bottom:1px solid var(--bdr);color:var(--t2);vertical-align:top}
.tabellenrahmen tr:last-child td{border-bottom:none}
dl.angaben{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;font-size:14px}
dl.angaben dt{color:var(--t3)}
dl.angaben dd{color:var(--t1);overflow-wrap:anywhere}
ol.schritte{padding-left:20px;margin-bottom:18px;display:grid;gap:12px;font-size:14px;color:var(--t2)}
.schluessel{margin:10px 0 6px;padding:12px 14px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:8px;color:var(--w);font-size:17px;letter-spacing:2px;word-break:break-all}
.fliesstext h2{font-family:var(--fd);font-size:19px;font-weight:400;color:var(--w);margin:26px 0 8px}
.fliesstext p,.fliesstext li{font-size:14px;color:var(--t2);line-height:1.75;margin-bottom:10px}
.fliesstext ul{padding-left:20px}
.fliesstext a,.meldung a,.leise a,.torfuss a,label a{color:var(--b4);text-decoration:underline}
details summary{cursor:pointer;color:var(--t2);font-size:13.5px;margin-top:10px}
.feld label.ankreuz{text-transform:none;letter-spacing:normal;font-size:13px;font-weight:400;color:var(--t2);margin-bottom:0}
.pw-hilfe{margin:-4px 0 16px;padding:12px 14px;background:var(--bg2);border:1px solid var(--bdr);border-radius:8px}
.pw-titel{font-size:12.5px;color:var(--t2);margin-bottom:6px}
.pw-regeln{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;margin-bottom:10px;font-size:12.5px;color:var(--t3)}
@media(max-width:560px){.pw-regeln{grid-template-columns:1fr}}
.pw-regeln li::before{content:"○";display:inline-block;width:16px;color:var(--t3)}
.pw-regeln li.erfuellt{color:var(--ok2)}
.pw-regeln li.erfuellt::before{content:"✓";color:var(--ok2)}
.pw-vorschlag-hinweis{margin-top:8px;font-size:12px;color:var(--warn)}
.qr-code{margin:12px 0;display:block;width:fit-content;padding:6px;background:#fff;border-radius:8px;line-height:0}
.qr-code svg{display:block;max-width:260px;height:auto}
.qr-alternativ{margin-top:6px}
.qr-alternativ p{margin:8px 0 4px}