/* ╔══════════════════════════════════╗
   ║      ᚺ  ᚢ  ᚷ  ᛁ  ᚾ  ᛋ  ᛟ  ᚾ      ║
   ║         H  U  G  I  N  S  O  N    ║
   ╚══════════════════════════════════╝
   otterstein.ai · Stylesheet · 2026-10-19
   Design angeglichen an consulting.nicolaslekai.com (DANY 19.10.2026: „webpages aufeinander angleichen").
   Werte aus Nickis style.css (Abruf 19.10.2026): dunkle Bühne #1c1c1e, helle Bühne #f5f5f7, Rot #f0413f,
   Helvetica Neue, Überschriften klein geschrieben mit rotem Schlussteil, dunkle und helle Bänder im Wechsel.
   Keine Webfonts, keine Drittanbieter — Schrift kommt vom Gerät. Vorfassung: _alt/style_v0.2_2026-09-13.css
   Akzent seit 19.10.2026 (DANY: „statt dem Rot unser helles Bergwind-Blau“) aus der Bergwind-CI
   (BERGWIND-ING-MARKETING/docs/brand-guidelines.html): --akzent #8DD2EC „Hellblau Akzent“ auf dunklen Bändern,
   --tech-700 #0077AA auf hellen (Hellblau hätte dort nur 1,5 : 1 Kontrast). Rote Fassung: _alt/style_v0.3_rot_2026-10-19.css */

:root{
  --dark:#1c1c1e; --light:#f5f5f7;
  --ink-d:#f5f5f7; --soft-d:#a1a1a6; --ink-l:#1d1d1f; --soft-l:#6e6e73;
  --akzent-hell:#8DD2EC;      /* Bergwind-CI „Hellblau Akzent“ — auf Dunkel */
  --akzent-dunkel:#0077AA;    /* Bergwind-CI Tech 700 — auf Hell */
  --akzent-ink:#1c1c1e;       /* Schrift auf dem hellen Akzent */
  --line-d:rgba(255,255,255,.14); --line-l:rgba(0,0,0,.1);
  --card-d:#2c2c2e; --card-l:#ffffff;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(72px,9vw,120px); --max:1180px; --gap:24px; --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dark);color:var(--ink-d);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--a);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media(max-width:760px){.wrap{padding:0 20px}}
/* Akzent je Band: --a ist überall die Akzentfarbe, passend zum Untergrund */
body,header.top,.tile.dark{--a:var(--akzent-hell)}
.tile.light{--a:var(--akzent-dunkel)}

/* Typo — Überschriften klein geschrieben, Schlussteil rot in eigener Zeile */
h1,h2,h3{margin:0 0 .4em}
h1,h2{font-weight:700;letter-spacing:-.035em;text-transform:lowercase;overflow-wrap:break-word}
h1{font-size:clamp(46px,7.2vw,100px);line-height:1}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.04}
h1 em,h2 em{font-style:normal;color:var(--a);display:block}
h3{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
p{margin:0 0 1em}
.lead{max-width:34em;margin:22px 0 0;font-size:clamp(19px,1.65vw,23px);line-height:1.42;letter-spacing:-.012em}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.hinweis{font-size:14px;margin-top:22px;max-width:46em}

/* Bänder */
.tile{padding:var(--pad) 0;overflow-x:clip}
.tile.dark{background:var(--dark);color:var(--ink-d)}
.tile.light{background:var(--light);color:var(--ink-l)}
.tile.next{padding-top:0}
.dark .lead,.dark .soft,.dark .eyebrow,.dark .hinweis{color:var(--soft-d)}
.light .lead,.light .soft,.light .eyebrow,.light .hinweis{color:var(--soft-l)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font:700 15px/1 var(--font);letter-spacing:-.01em;text-decoration:none;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn.primary{background:var(--a);color:var(--akzent-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--akzent-ink)}
.light .btn.primary,.light .btn.primary:hover{color:#fff}
.btn.ghost{border-color:var(--line-d);color:var(--ink-d)}
.light .btn.ghost{border-color:var(--line-l);color:var(--ink-l)}
.btn.ghost:hover{border-color:var(--a);color:var(--a)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* Kopf */
header.top{position:sticky;top:0;z-index:20;background:rgba(28,28,30,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-d)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-d);font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.brand img{height:15px;width:auto;display:block}   /* Richards Schriftzug „OTTER ᔕ STEIN“ (seit 20.10.) */
.brand .amp{color:var(--a)}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{font-size:13px;text-decoration:none;color:var(--soft-d);transition:color .2s;white-space:nowrap}
nav.main a:hover,nav.main a.aktiv{color:var(--ink-d)}
nav.main a.aktiv{font-weight:700}
nav.main a.nav-cta{color:var(--akzent-ink);padding:8px 14px;font-size:13px}
@media(max-width:900px){
  header.top .wrap{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:10px;gap:8px}
  nav.main{width:100%;gap:20px;overflow-x:auto;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a.nav-cta{display:none}
}

/* Hero */
.hero{padding-top:clamp(64px,8vw,112px)}
.grid2{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* Film — wie Nickis Hero: Standbild, roter Abspielpunkt, lädt erst beim Klick */
.film{margin:56px 0 0}
.film-wrap{position:relative;border-radius:var(--r);overflow:hidden;background:#000;isolation:isolate;--a:var(--akzent-dunkel)}  /* Standbild ist hell → dunkles Blau wie auf hellen Bändern */
.film-wrap video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.film-play{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer}
.film-cta{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;transition:transform .2s ease}
.film-dot{position:relative;width:84px;height:84px;border-radius:50%;background:var(--a);animation:halo 2.6s ease-out infinite}
.film-dot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-36%,-50%);border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.film-label{font-size:15px;color:#fff;background:rgba(29,29,31,.86);padding:8px 16px;border-radius:999px;white-space:nowrap}
.film-play:hover .film-cta{transform:translate(-50%,-50%) scale(1.04)}
.film-play:focus-visible{outline:none}
.film-play:focus-visible .film-dot{outline:2px solid #fff;outline-offset:4px}
.film-wrap.playing .film-play{display:none}
.film figcaption{margin-top:14px;font-size:13px;color:var(--soft-d)}
.film figcaption a{color:var(--ink-d);text-decoration:none}
.film figcaption a:hover{color:var(--a)}
@keyframes halo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 45%,transparent)}100%{box-shadow:0 0 0 22px color-mix(in srgb,var(--a) 0%,transparent)}}
@media(max-width:760px){
  .film{margin-top:40px} .film-wrap{border-radius:12px} .film-cta{gap:10px;top:64%}
  .film-dot{width:56px;height:56px} .film-dot::after{border-width:10px 0 10px 15px} .film-label{font-size:12px;padding:5px 11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} .film-dot{animation:none} .film-cta{transition:none}}

/* Ausgangslage · Ergebnis · Einstieg + Enthalten */
.dreier{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.dreier div{border-top:1px solid var(--line-l);padding-top:18px}
.dreier b{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a);margin-bottom:10px}
.dreier p{margin:0;font-size:17px}
@media(max-width:900px){.dreier{grid-template-columns:1fr}}
.enthalten{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:44px}
.enthalten b{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft-l);margin-right:8px}
.enthalten span{font-size:14px;padding:7px 14px;border-radius:999px;background:var(--card-l);border:1px solid var(--line-l);color:var(--ink-l)}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:44px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{border-radius:var(--r);padding:28px}
.dark .card{background:var(--card-d);border:1px solid var(--line-d)}
.light .card{background:var(--card-l);border:1px solid var(--line-l)}
.card .was{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a);margin-bottom:12px}
.card h3{font-size:20px}
.card p{margin:0;font-size:16px}
.dark .card p{color:var(--soft-d)} .light .card p{color:var(--soft-l)}
.card .zahl{font-size:44px;font-weight:700;letter-spacing:-.035em;margin-bottom:8px}

/* Hub: was wir machen */
.themen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:48px}
.themen.vier{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.themen,.themen.vier{grid-template-columns:1fr}}
.thema{display:flex;flex-direction:column;text-decoration:none;color:var(--ink-l);background:var(--card-l);border:1px solid var(--line-l);border-radius:var(--r);padding:30px;transition:transform .2s,border-color .2s}
.thema:hover{transform:translateY(-2px);border-color:var(--a)}
.thema .nr{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--a);margin-bottom:14px}
.thema h3{font-size:24px}
.thema p{color:var(--soft-l);font-size:16px;margin:0 0 20px;flex:1}
.thema .mehr{font-weight:700;font-size:15px}
.thema:hover .mehr{color:var(--a)}

/* Zeitstrahl — wie Nickis „wie wir arbeiten" */
.zeitstrahl{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--gap);margin-top:56px;position:relative}
.zeitstrahl::before{content:"";position:absolute;left:12px;right:12px;top:11px;height:2px;background:currentColor;opacity:.16}
.zeitstrahl>div{position:relative;padding-top:46px}
.zeitstrahl>div::before{content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:currentColor}
.zeitstrahl>div:last-child::before{background:var(--a)}
.zeitstrahl h3{font-size:19px;margin-bottom:2px}
.zeitstrahl .dauer{font-size:13px;margin-bottom:10px;min-height:1em}
.zeitstrahl p{font-size:15.5px;margin:0}
.light .zeitstrahl .dauer,.light .zeitstrahl p{color:var(--soft-l)}
.dark .zeitstrahl .dauer,.dark .zeitstrahl p{color:var(--soft-d)}
@media(max-width:760px){
  .zeitstrahl{grid-template-columns:1fr;gap:30px}
  .zeitstrahl::before{left:11px;right:auto;top:12px;bottom:12px;width:2px;height:auto}
  .zeitstrahl>div{padding:0 0 0 46px}
}

/* Geräterahmen im Apple-Stil (seit 20.10.2026, DANY: „setze mockups in apple geräte layouts“): MacBook, iPad, iPhone
   als reines CSS ohne Herstellerlogos. Die Aufnahmen passen pixelgenau (screenshots.py: 1440×848, 820×1156, 393×798).
   Alle Maße in cqw: Rahmen, Radien und Insel wachsen mit der Gerätebreite mit. Der Rahmen sitzt eine Ebene
   unter .dev, weil cqw am Container selbst nicht ihn, sondern den nächsten äußeren Container meint. */
.dev{position:relative;container-type:inline-size}
.dev img{display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:cover;object-position:top}

/* MacBook — schwarzer Rand, Kamera, silbernes Unterteil mit Griffmulde; Bildschirm 1440×900,
   oben 52 px Safari-Leiste, darunter die Aufnahme 1440×848 */
.mac-deckel{position:relative;margin:0 6.5%;background:#0a0a0c;border-radius:3.3cqw 3.3cqw 0 0;padding:2.3cqw 2.3cqw 2.8cqw;
  box-shadow:0 0 0 .22cqw #b9bbc0,0 0 0 .34cqw #6e7075}
.mac-deckel::before{content:"";position:absolute;top:.85cqw;left:50%;width:.62cqw;height:.62cqw;margin-left:-.31cqw;border-radius:50%;background:#16212a;box-shadow:inset 0 0 0 .12cqw #2b3a46}
.mac-schirm{display:flex;flex-direction:column;aspect-ratio:1440/900;border-radius:.7cqw .7cqw 0 0;overflow:hidden;background:#fff}
.safari{flex:0 0 2.98cqw;display:flex;align-items:center;gap:.55cqw;padding:0 1.1cqw;background:#ececef;border-bottom:.08cqw solid #d2d2d7;position:relative}
.safari i{width:.72cqw;height:.72cqw;border-radius:50%;background:#ff5f57}
.safari i:nth-child(2){background:#febc2e} .safari i:nth-child(3){background:#28c840}
.safari span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;height:1.75cqw;border-radius:.5cqw;background:#fff;
  font:500 .92cqw/1.75cqw -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#3a3a3c;text-align:center;letter-spacing:0;white-space:nowrap;overflow:hidden}
.mac-boden{position:relative;height:2.3cqw;border-radius:0 0 1.9cqw 1.9cqw/0 0 1.6cqw 1.6cqw;
  background:linear-gradient(#f2f3f5 0,#d6d7db 18%,#bfc1c6 55%,#8e9095 100%);box-shadow:0 1.8cqw 3.4cqw rgba(0,0,0,.5)}
.mac-boden::before{content:"";position:absolute;top:0;left:50%;width:14cqw;height:.7cqw;margin-left:-7cqw;border-radius:0 0 1cqw 1cqw;background:linear-gradient(#9ea0a6,#c9cbd0)}

/* iPad Air 11" — gleichmäßiger schwarzer Rand, Kamera oben, silberne Kante; Bildschirm 820×1180,
   oben 24 px Statusleiste, darunter die Aufnahme 820×1156 */
.ipad .rahmen{position:relative;background:#0a0a0c;border-radius:8.6cqw;padding:4.6cqw;box-shadow:0 0 0 .6cqw #c3c5ca,0 0 0 .9cqw #85878c,0 3cqw 7cqw rgba(0,0,0,.5)}
.ipad .rahmen::before{content:"";position:absolute;top:2.05cqw;left:50%;width:1.2cqw;height:1.2cqw;margin-left:-.6cqw;border-radius:50%;background:#16212a}
.ipad-schirm{display:flex;flex-direction:column;aspect-ratio:820/1180;border-radius:4.1cqw;overflow:hidden;background:var(--sb,#fff)}
.ipad .statusleiste{flex:0 0 2.66cqw;padding:0 3.4cqw;font-size:1.75cqw}

/* iPhone — schmaler Rand, Titan-Kante, Seitentasten, Dynamic Island; Bildschirm 393×852,
   oben 54 px Statusleiste, darunter die Aufnahme 393×798 */
.iphone .rahmen{position:relative;background:#0a0a0c;border-radius:16.6cqw;padding:3.6cqw;box-shadow:0 0 0 1cqw #a7a49f,0 0 0 1.5cqw #5d5a56,0 3.5cqw 8cqw rgba(0,0,0,.55)}
.iphone .rahmen::before,.iphone .rahmen::after{content:"";position:absolute;width:1.1cqw;border-radius:.6cqw;background:#86837e}
.iphone .rahmen::before{right:-2.4cqw;top:27%;height:15%}
.iphone .rahmen::after{left:-2.4cqw;top:22%;height:9%;box-shadow:0 13cqw 0 #86837e}
.iphone-schirm{position:relative;display:flex;flex-direction:column;aspect-ratio:393/852;border-radius:13cqw;overflow:hidden;background:var(--sb,#fff)}
.iphone .statusleiste{flex:0 0 12.75cqw;padding:0 8.4cqw 0 10.5cqw;font-size:4.1cqw}
.iphone-schirm::before{content:"";position:absolute;top:2.65cqw;left:50%;width:29.5cqw;height:8.6cqw;margin-left:-14.75cqw;border-radius:5cqw;background:#000;z-index:2}
.iphone-schirm::after{content:"";position:absolute;bottom:1.9cqw;left:50%;width:34cqw;height:1.25cqw;margin-left:-17cqw;border-radius:1cqw;background:rgba(0,0,0,.8);box-shadow:0 0 0 .25cqw rgba(255,255,255,.4)}

/* Statusleiste: Farbe der obersten Pixelzeile der Seite (assets/mockups/statusleiste.json) */
.statusleiste{display:flex;align-items:center;justify-content:space-between;color:var(--sb-ink,#000);
  font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;letter-spacing:-.01em}
.statusleiste svg{height:1em;width:auto;fill:currentColor}

/* Anordnung wie Apples Gerätefamilie: Mac hinten links, iPad rechts, iPhone vorn dazwischen */
.galerie{position:relative;aspect-ratio:16/11}
.galerie .dev{position:absolute}
.galerie .d-mac{left:0;top:0;width:86%} .galerie .d-ipad{right:0;bottom:4%;width:24%} .galerie .d-iphone{right:21%;bottom:0;width:12%}
@media(max-width:900px){.trio{max-width:560px;margin:0 auto}}
@media(max-width:600px){.trio{aspect-ratio:auto} .trio .d-ipad,.trio .d-iphone{display:none} .trio .d-mac{position:relative;width:100%}}

/* Referenzen (dunkle Bühne) */
.ref{display:grid;grid-template-columns:7fr 5fr;gap:40px;padding:64px 0;border-bottom:1px solid var(--line-d);align-items:start}
.ref:last-child{border-bottom:0}
.ref .info h3{font-size:26px}
.ref .info .kunde{color:var(--soft-d);margin-bottom:12px}
.ref .tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.ref .tags span{font-size:13px;padding:5px 11px;border:1px solid var(--line-d);border-radius:999px;color:var(--soft-d)}
.werkzettel{border:1px solid var(--line-d);border-radius:14px;background:var(--card-d);padding:0 18px}
.werkzettel summary{cursor:pointer;padding:14px 0;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.werkzettel summary::-webkit-details-marker{display:none}
.werkzettel summary:after{content:"+";font-size:22px;font-weight:400;color:var(--a)}
.werkzettel[open] summary:after{content:"–"}
.werkzettel dl{margin:0 0 16px;display:grid;grid-template-columns:120px 1fr;gap:8px 14px;font-size:15px}
.werkzettel dt{font-weight:700;color:var(--soft-d)} .werkzettel dd{margin:0}
.ref .link{display:inline-block;margin-top:16px;font-weight:700;text-decoration:none;color:var(--ink-d)}
.ref .link:hover{color:var(--a)}
@media(max-width:900px){.ref{grid-template-columns:1fr;gap:24px}}
/* Geräteumschalter mobil (ohne JS): Radio + :has */
.ref .switch{display:none;gap:8px;margin-bottom:12px}
@media(max-width:600px){
  .ref .switch{display:flex}
  .ref .switch label{font-size:13px;font-weight:700;padding:6px 12px;border:1px solid var(--line-d);border-radius:999px;cursor:pointer;color:var(--soft-d)}
  .ref .shots{aspect-ratio:auto;position:static;padding:4px 10px 18px} .ref .shots .dev{position:static;width:100%!important;display:none;margin:0 auto}
  .ref:has(input[value=mac]:checked) .d-mac{display:block} .ref:has(input[value=ipad]:checked) .d-ipad{display:block;max-width:330px} .ref:has(input[value=iphone]:checked) .d-iphone{display:block;max-width:210px}
  .ref .switch input{display:none} .ref .switch input:checked+label{background:var(--a);color:var(--akzent-ink);border-color:var(--a)}
}

/* Ablauf-Grafik */
.flow{background:var(--card-d);border:1px solid var(--line-d);border-radius:var(--r);padding:28px;margin-top:44px}
.flow h3{font-size:19px}
.flow svg{width:100%;height:auto}

/* Team */
.team-kopf{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.team-logo{width:min(300px,34vw);height:auto;opacity:.95}
@media(max-width:760px){.team-kopf{grid-template-columns:1fr} .team-logo{width:220px}}
.person .rolle{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a);margin-bottom:14px}
.person h3{margin-bottom:2px}
.person .status{font-size:14px;color:var(--soft-d);margin-bottom:12px}
.person p a{color:var(--ink-d);text-decoration:none;white-space:nowrap} .person p a:hover{color:var(--a)}

/* Kontakt */
.kontakt .box{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-top:44px;padding:36px;border-radius:var(--r);background:var(--card-d);border:1px solid var(--line-d)}
@media(max-width:900px){.kontakt .box{grid-template-columns:1fr;padding:26px}}
.kontakt .daten{font-size:18px}
.kontakt .daten div{margin-bottom:10px}
.kontakt .daten a{text-decoration:none;font-weight:700}
.kontakt .daten a:hover{color:var(--a)}
.kontakt .daten .btn{font-size:15px}
.kontakt h3{font-size:19px}
.kontakt ul{padding-left:18px;margin:0;color:var(--soft-d);font-size:16px}
.kontakt li{margin-bottom:6px}

/* Fuß — wie Nickis .foot */
footer.tile{padding-bottom:48px}
.foot{display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:20px;border-top:1px solid var(--line-d);font-size:12px;color:#86868b}
.foot a{text-decoration:none} .foot a:hover{color:var(--ink-d)}

/* Unterseiten (Impressum, Datenschutz) */
.page{max-width:760px}
.page h1{font-size:clamp(40px,5vw,64px)}
.page h2{font-size:24px;letter-spacing:-.02em;text-transform:none;margin-top:36px}
.page p,.page li{font-size:17px}
.page a{color:var(--ink-l)} .page a:hover{color:var(--a)}
.tbd{background:#fdecec;color:#a8201e;padding:2px 6px;border-radius:4px;font-weight:700}