/* =========================================================================
   Startseite closinghub.de, Stufe 100k (ab 11.10.2026)
   Liegt ueber start-hell.css und uebernimmt Bausteine der Kampagnenseite
   /start/: echter Dialer-Clip, frei stehende 3D-Glasobjekte, gestaffeltes
   Einblenden. Regeln: in einer Sektion Raster ODER Kreise, Icons in Karten
   sitzen fest, nur frei stehende Glasobjekte laufen beim Scrollen mit,
   keine Hover-Bewegung, keine Dauerschleifen ausser dem Produkt-Clip.
   Gliederung:
     1. Hero-Buehne mit Clip
     2. Glasobjekte
     3. Einblenden
     4. Handy
     5. Reduzierte Bewegung
   ========================================================================= */

/* ---------- 1. Hero-Buehne mit Clip -------------------------------------- */
.hero { overflow-x: clip; }
.hero-wrap { z-index: 1; }
.hero .hero-buehne { padding: 64px 64px 0; }

/* Szene: Fenster links, iPhone ragt rechts unten ueber die Kante. Alles in Prozent der Szene, damit es mitwaechst. */
.hero-szene { position: relative; max-width: 1060px; margin: 0 auto; padding-bottom: 64px; }
.hero-fenster { width: 86%; margin: 0; overflow: hidden; }
.hero-fenster .fenster-leiste { display: grid; grid-template-columns: 1fr minmax(0, 46%) 1fr; align-items: center; }
.fl-punkte { display: flex; gap: 6px; }
.fl-adresse { padding: 4px 12px; border-radius: 7px; background: var(--paper); border: 1px solid var(--rahmen); font: 500 12px/1.4 Manrope, system-ui, sans-serif; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-clip { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--tint-weak); }

.hero-handy {
  position: absolute; right: 0; bottom: 24px; width: 21%; height: auto;
  border-radius: 34px;
  box-shadow: 0 0 0 7px #17102B, 0 0 0 8px rgba(23, 16, 43, .35), 0 48px 80px -30px rgba(23, 16, 43, .55);
}


/* ---------- 2. Glasobjekte ----------------------------------------------- */
/* Frei stehend am Buehnenrand. --px setzt start-100k.js aus dem Scroll. */
.glas-frei { position: absolute; z-index: 3; height: auto; pointer-events: none; user-select: none;
  translate: 0 var(--px, 0px);
  filter: drop-shadow(0 26px 30px rgba(76, 29, 149, .28)); }
.hg-telefon  { width: 132px; left: -44px; top: 16%; rotate: -12deg; }
.hg-flamme   { width: 112px; right: -34px; top: -38px; }
.hg-kalender { width: 96px; left: 7%; bottom: -44px; rotate: 8deg; filter: blur(1.5px) drop-shadow(0 26px 30px rgba(76, 29, 149, .22)); opacity: .9; }

/* ---------- 3. Einblenden ------------------------------------------------ */
/* Einmal beim Laden: Fenster steigt flach aus der Tiefe, dann iPhone,
   Marke und Glas. start-100k.js setzt .ist-da. */
.hero-szene { perspective: 1800px; }
.hero-szene .hero-fenster { opacity: 0; transform: translateY(36px) rotateX(10deg); transform-origin: 50% 100%; transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.hero-szene .hero-handy { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.hero-wrap .glas-frei { opacity: 0; scale: .92; transition: opacity .9s var(--ease), scale 1.1s var(--ease); }
.hero-szene.ist-da .hero-fenster { opacity: 1; transform: none; transition-delay: .1s; }
.hero-szene.ist-da .hero-handy { opacity: 1; transform: none; transition-delay: .55s; }
.hero-wrap.ist-da .glas-frei { opacity: 1; scale: 1; transition-delay: .35s; }
.hero-wrap.ist-da .hg-kalender { opacity: .9; transition-delay: .6s; }

/* ---------- 4. Handy ----------------------------------------------------- */
@media (max-width: 980px) {
  .hero .hero-buehne { padding: 48px 32px 0; }
  .hero-szene { padding-bottom: 48px; }
  .hg-telefon { width: 96px; left: -20px; }
  .hg-flamme { width: 84px; right: -14px; top: -30px; }
  .hg-kalender { width: 72px; bottom: -34px; }
}
@media (max-width: 620px) {
  .hero .hero-buehne { padding: 28px 14px 0; }
  .hero-szene { padding-bottom: 44px; }
  .hero-fenster { width: 92%; }
  .hero-fenster .fenster-leiste { padding: 7px 10px; }
  .fl-punkte { gap: 4px; }
  .hero-fenster .fenster-leiste i { width: 7px; height: 7px; }
  .fl-adresse { padding: 1px 8px; font-size: 10px; }
  .hero-handy { width: 31%; right: -1%; bottom: 14px; border-radius: 18px; box-shadow: 0 0 0 4px #17102B, 0 0 0 5px rgba(23, 16, 43, .35), 0 28px 44px -18px rgba(23, 16, 43, .55); }
  .hg-telefon { width: 56px; left: -6px; top: auto; bottom: 64px; }
  .hg-flamme { width: 46px; right: 2px; top: -16px; }
  .hg-kalender { display: none; }
  /* Am Handy ist die Buehne zu nah an Text und Knopfzeile: Glas steht still. */
  .glas-frei { translate: none; }
}

/* ---------- 5. Reduzierte Bewegung --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-szene .hero-fenster, .hero-szene .hero-handy, .hero-wrap .glas-frei { opacity: 1; transform: none; scale: 1; transition: none; }
  .hero-wrap .hg-kalender { opacity: .9; }
  .glas-frei { translate: none; }
}

/* ---------- 6. Funktions-Buehnen ----------------------------------------- */
/* Glas-Icon in fester Box statt Versal-Pille. Das Icon sitzt fest, keine
   Parallaxe, keine Hover-Bewegung. */
.feature-marke { display: flex; align-items: center; gap: 14px; margin: 0; font: 600 17px/1.2 Outfit, system-ui, sans-serif; letter-spacing: -.01em; color: var(--farbe-tief); }
.fm-glas { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 16px;
  background: color-mix(in srgb, var(--farbe) 14%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--farbe) 22%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 28px -18px color-mix(in srgb, var(--farbe-tief) 70%, transparent); }
.fm-glas img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--farbe-tief) 35%, transparent)); }
.feature-marke + h2 { margin-top: 24px; }

/* Bühne 2 und 4 gespiegelt: Bild links bis an den Rand, Text rechts. */
@media (min-width: 981px) {
  .feature-gespiegelt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-right: 56px; padding-left: 0; }
  .feature-gespiegelt .feature-medien { order: -1; border-radius: 0 var(--r-medien) var(--r-medien) 0; }
  .feature-gespiegelt .feature-medien .ebene-fenster { left: auto; right: 56px; border-radius: 0 16px 0 0; }
  .feature-gespiegelt .feature-medien .ebene-fenster img { object-position: top right; }
  .feature-gespiegelt .eb-eins { left: auto; right: -48px; }
  .feature-gespiegelt .eb-zwei { right: auto; left: -40px; }
}
@media (max-width: 620px) {
  .fm-glas { width: 52px; height: 52px; border-radius: 14px; }
  .fm-glas img { width: 38px; height: 38px; }
}

/* ---------- 7. Dunkle Panels (Kosten, Vergleich) ------------------------- */
/* Nachtviolett mit Raster oben rechts und unten links, keine Ringe. Breite
   wie die hellen Buehnen, damit die Seitenlinien durchlaufen. */
:root { --head: Outfit, system-ui, sans-serif; --body: Manrope, system-ui, sans-serif; --nacht: color-mix(in srgb, #6C2BF2 12%, #17102B); }
.mitte { text-align: center; }
.unter { margin: 14px 0 0; max-width: 36em; font-size: 18px; line-height: 1.55; color: var(--ink-3); }
.unter.mitte { margin-inline: auto; }

.dpanel {
  position: relative; isolation: isolate; overflow: hidden;
  width: min(var(--buehne), 100% - 2 * var(--gutter) + 80px); max-width: calc(100% - 24px); margin-inline: auto;
  padding: 80px 88px 88px; border-radius: var(--r-buehne);
  color: rgba(255, 255, 255, .76);
  background:
    radial-gradient(ellipse 60% 70% at 6% 0%, color-mix(in srgb, #6C2BF2 42%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 75% at 100% 100%, color-mix(in srgb, #6C2BF2 34%, transparent), transparent 70%),
    var(--nacht);
}
.dp-gitter { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(192, 165, 251, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(192, 165, 251, .14) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 100% 0%, #000 15%, transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 100% 0%, #000 15%, transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, #000 10%, transparent 70%); }
.dp-titel { max-width: 860px; margin: 0; font: 500 clamp(34px, 3.8vw, 52px)/1.06 var(--head); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.dp-titel em { display: block; font-style: normal; color: var(--accent-soft); }
.dpanel svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.studien { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.studie { padding: 28px 30px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font-size: 16.5px; line-height: 1.55; }
.studie p { margin: 0; color: rgba(255, 255, 255, .84); }
.st-zahl { margin-bottom: 14px !important; font: 500 60px/1 var(--head); letter-spacing: -.04em; color: #fff !important; font-variant-numeric: tabular-nums; }
.st-quelle { margin-top: 14px !important; font-size: 13px; color: rgba(255, 255, 255, .52) !important; }

.rechner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.re-eingaben, .re-ergebnis { padding: 30px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.re-titel { margin: 0 0 18px; font: 600 19px/1.3 var(--head); color: #fff; }
.re-feld { display: block; margin-top: 20px; }
.re-feld span { display: flex; justify-content: space-between; gap: 12px; font-size: 15.5px; color: rgba(255, 255, 255, .78); }
.re-feld b { color: #fff; font: 600 16px var(--head); font-variant-numeric: tabular-nums; }
.re-feld input { --wert: 50%; width: 100%; height: 6px; margin: 14px 0 0; border-radius: 9px; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--wert), rgba(255, 255, 255, .16) var(--wert)); }
.re-feld input:focus-visible { box-shadow: 0 0 0 3px rgba(192, 165, 251, .55); }
.re-feld input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 4px 14px rgba(5, 2, 15, .6); }
.re-feld input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); }
.re-ergebnis { display: flex; flex-direction: column; justify-content: center; font-size: 16.5px; color: rgba(255, 255, 255, .82);
  background: linear-gradient(165deg, rgba(108, 43, 242, .48), rgba(108, 43, 242, .14)); border-color: rgba(192, 165, 251, .55); }
.re-ergebnis p { margin: 0; }
.re-ergebnis p b { color: #fff; }
.re-zahl { margin: 8px 0 10px !important; font: 500 22px/1 var(--head); color: #fff; }
.re-zahl b { font-size: 68px; font-weight: 500; letter-spacing: -.04em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.re-ergebnis .btn { margin-top: 24px; }

.vergleich { margin-top: 40px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.vg-zeile { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; }
.vg-zeile > span { padding: 18px 22px; font-size: 15.5px; color: rgba(255, 255, 255, .66); border-top: 1px solid rgba(255, 255, 255, .08); }
.vg-kopf > span { border-top: 0; font: 600 14px/1.2 var(--body); color: rgba(255, 255, 255, .58); }
.vg-zeile > span:first-child { color: #fff; font-weight: 600; }
.vg-wir { background: rgba(108, 43, 242, .24); color: #fff !important; font-weight: 600; }
.vg-kopf .vg-wir { color: var(--accent-soft) !important; }
.vg-ehrlich { margin: 24px 0 0; max-width: 760px; font-size: 16px; color: rgba(255, 255, 255, .72); }
.vg-ehrlich b { color: #fff; }
.dp-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 34px 0 0; }
.dp-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; color: var(--accent-soft); }
.dp-link svg { width: 16px; height: 16px; }
.dp-link:hover { color: #fff; }
.dp-link:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; border-radius: 4px; }

/* ---------- 8. Demo ------------------------------------------------------ */
.demo-sek .titel { margin: 0; }
.demo-sek .demo { margin-top: 44px; }
/* Breit wie die Buehnen und hoeher, damit der Dialer nicht eingeengt wirkt;
   Adresszeile mittig wie im echten Browser. */
@media (min-width: 961px) {
  .demo-sek .demo { max-width: none; width: min(var(--buehne), 100vw - 48px); margin-inline: calc(50% - min(var(--buehne), 100vw - 48px) / 2); }
  .demo-sek .dm-raster { grid-template-columns: 320px 1fr; gap: 18px; padding: 18px; min-height: 560px; }
  .demo-sek .dm-schlange { padding: 18px; }
  .demo-sek .dm-notizkarte textarea { min-height: 120px; }
}
.demo-sek .dm-leiste { display: grid; grid-template-columns: 1fr minmax(0, 46%) 1fr; align-items: center; padding: 12px 16px; }
.demo-sek .dm-leiste .fl-punkte { display: flex; gap: 6px; }
.demo-sek .dm-leiste .dm-adresse { margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--rahmen); }
.demo-sek .dm-tipp { text-align: center; }

/* ---------- 9. Gruender -------------------------------------------------- */
.gruender { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 72px; align-items: center; }
.gr-bild { position: relative; }
.gr-bild > img:first-child { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-medien); box-shadow: 0 40px 80px -40px rgba(40, 20, 90, .55); }
.gr-glas { width: 112px; right: -38px; bottom: -30px; }
.gr-text .titel { margin: 0; }
.gr-text > p { margin: 20px 0 0; max-width: 34em; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.fakten-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.fakten-raster li { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-karte); background: linear-gradient(150deg, var(--tint-weak), var(--paper)); border: 1px solid var(--rahmen); }
.fr-glas { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tint); }
.fr-glas img { width: 38px; height: 38px; object-fit: contain; }
.fakten-raster b { font: 600 16px/1.3 var(--head); color: var(--ink); }
.fakten-raster li > span:last-child { font-size: 14px; color: var(--ink-3); }

/* ---------- 10. Staffeln und Zaehlen ------------------------------------- */
[data-staffel] > * { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
[data-staffel].ist-da > * { opacity: 1; translate: 0 0; }

@media (max-width: 980px) {
  .dpanel { padding: 56px 40px 60px; }
  .gruender { grid-template-columns: 1fr; gap: 48px; }
  .gr-bild { max-width: 420px; }
}
@media (max-width: 760px) {
  .studien, .rechner { grid-template-columns: 1fr; }
  /* Vergleich am Handy: je Zeile eine Karte, die drei Werte mit Beschriftung. */
  .vg-kopf { display: none; }
  .vg-zeile { grid-template-columns: 1fr; padding: 16px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .vg-zeile:nth-child(2) { border-top: 0; }
  .vg-zeile > span { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 0; font-size: 15px; }
  .vg-zeile > span:first-child { padding-bottom: 8px; font-size: 16px; }
  .vg-zeile > span[data-label]::before { content: attr(data-label); flex: none; color: rgba(255, 255, 255, .5); font-weight: 500; }
  .vg-zeile > span[data-label] { text-align: right; }
  .vg-zeile > .vg-wir { margin: 4px -10px 0; padding: 8px 10px; border-radius: 10px; }
  .dp-link { display: inline; }
  .dp-link svg { display: inline; vertical-align: -3px; margin-left: 4px; }
}
@media (max-width: 620px) {
  .dpanel { width: calc(100% - 24px); padding: 40px 20px 44px; }
  .dp-titel { font-size: 32px; }
  .st-zahl { font-size: 48px; }
  .re-eingaben, .re-ergebnis { padding: 22px; }
  .re-zahl b { font-size: 56px; }
  .fakten-raster { grid-template-columns: 1fr; }
  .gr-glas { width: 80px; right: -6px; bottom: -24px; }
  .dp-knoepfe .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-staffel] > * { opacity: 1; translate: none; transition: none; }
}
.demo-sek .titel, .gr-text .titel { font-size: clamp(34px, 4vw, 52px); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }

/* ---------- 11. Preise im dunklen Panel ---------------------------------- */
/* Karten, Zusaetze und Minuten bleiben hell (Glas auf Nacht), Texte im
   Panel werden hell. Paket-Icons als Glas in gleich grosser, fester Box. */
.preise-panel { padding-top: 72px; }
.preise-panel .pr-kopfzeile .titel, .preise-panel .pr-titel { color: #fff; }
.preise-panel .pr-kopfzeile .lead { color: rgba(255, 255, 255, .74); }
.preise-panel .pr-notiz { color: var(--accent-soft); }
.preise-panel .pr-notiz > span:not(.pr-emoji) { background-image: linear-gradient(105deg, #C0A5FB, #EDE4FF 60%, #C0A5FB); }
.preise-panel .pr-schalter .fl-segmente { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.preise-panel .pr-schalter .fl-segmente button { color: rgba(255, 255, 255, .72); }
.preise-panel .pr-schalter .fl-segmente button[aria-pressed="true"] { background: var(--paper); color: var(--accent); }
.preise-panel .pr-karte { box-shadow: 0 40px 80px -48px rgba(5, 2, 15, .9); }
.preise-panel .pr-unten .pille { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .82); }
.preise-panel .pr-unten .pfeil-link { color: var(--accent-soft); }
.preise-panel .pr-unten .pfeil-link:hover { color: #fff; }

.pr-glas { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 16px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 14px 28px -18px rgba(76, 29, 149, .55); }
.pr-glas img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(76, 29, 149, .3)); }
.pr-zusatz { grid-template-columns: 52px minmax(0, 1fr) auto; }
.pr-zglas { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tint); }
.pr-zglas img { width: 38px; height: 38px; object-fit: contain; }
@media (max-width: 620px) {
  .pr-zusatz { grid-template-columns: 52px minmax(0, 1fr); }
  .preise-panel { padding-top: 44px; }
}

/* ---------- 12. Schluss -------------------------------------------------- */
/* Vier frei stehende Glasobjekte um die Schlusszeile, nur sie laufen mit. */
.schluss-wrap { position: relative; }
.schluss-wrap .kopfzeile { position: relative; z-index: 4; }
.sg-telefon  { width: 120px; left: 2%; top: 4%; rotate: -12deg; }
.sg-flamme   { width: 100px; right: 4%; top: 0; }
.sg-kalender { width: 84px; left: 12%; top: 34%; opacity: .9; filter: blur(1.5px) drop-shadow(0 26px 30px rgba(76, 29, 149, .22)); }
.sg-haus     { width: 92px; right: 13%; top: 32%; rotate: 6deg; opacity: .9; filter: blur(1.5px) drop-shadow(0 26px 30px rgba(76, 29, 149, .22)); }
@media (max-width: 980px) { .sg-kalender, .sg-haus { display: none; } .sg-telefon { width: 80px; left: -2%; top: -2%; } .sg-flamme { width: 70px; right: 0; top: -4%; } }
@media (max-width: 620px) { .schluss-wrap { padding-top: 76px; } .sg-telefon { width: 52px; left: 0; top: -4px; } .sg-flamme { width: 44px; right: 4px; top: -6px; } }

/* ---------- 13. Ein System ----------------------------------------------- */
/* Die animierte Zeigehand auf den Karten ist aus (Tobias 11.10.2026).
   Markup und Skript bleiben, die Hand wird nur nicht gezeigt. */
.zeiger { display: none !important; }
.demo-sek .dm-leiste > span:not(.dm-adresse) { margin: 0; padding: 0; background: none; }

/* Buehnen am Handy: Spalte darf schmaler werden als ihr laengstes Wort,
   sonst ragt die Buehne 27px ueber den Rand (war auch live so). */
@media (max-width: 980px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature-text, .feature-medien { min-width: 0; }
}
@media (max-width: 620px) {
  /* Hinweiszeile unter den Preisen darf umbrechen statt abgeschnitten zu werden. */
  .pr-unten .pille { white-space: normal; height: auto; padding-block: 6px; line-height: 1.35; max-width: 100%; }
}

/* Ablauf "So laeuft ein Lead": Buehne traegt Raster, also Nummern als
   Kacheln statt Kreise (Regel Raster ODER Kreise). */
.workflow-buehne .schritt-nr { border-radius: 9px; }