/* NOIR only. Loaded by the NOIR site module, never by FastKey. */

/* globals.css sets DM Sans via a FastKey-only variable; without this the skip link and WhatsApp bubble fall back to Times. */
body {
  font-family: var(--font-outfit), Outfit, sans-serif;
}

/* Hostinger header of the old NOIR site: 112px high, 55px logo, Roboto menu, blue hover. */
.hh {
  --hh-h: 112px;
  height: 112px;
  padding: 0 max(16px, calc((100% - 1240px) / 2 + 16px));
  font-family: var(--font-roboto), Roboto, sans-serif;
}
.hh-logo img {
  width: 55px;
  height: auto;
}
.hh-link:hover,
.hh-link:focus-visible,
.hh-link[aria-current="page"] {
  color: rgb(59, 88, 130);
}
.hh-drop-label {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
/* the embed ran edge to edge (custom code "Vollbreite") */
.fk-frame {
  padding: 0;
}
@media (max-width: 920px) {
  html {
    scroll-padding-top: 112px;
  }
  .fk-frame,
  .fk-frame--sub {
    padding: 0;
  }
  .hh {
    min-height: 104px;
    padding: 0 16px;
  }
  .hh-logo {
    padding: 17px 0;
  }
  .hh-logo img {
    width: 70px;
    height: auto;
  }
  .hh--open .hh-nav {
    max-height: calc(100dvh - 104px);
  }
}

/* Map placeholder: Google Maps loads only after a click. */
.nx-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 450px;
  padding: 24px;
  background: #0f1b30;
  color: #c9d3e3;
  text-align: center;
  font-family: var(--font-outfit), Outfit, sans-serif;
}
.nx-map p {
  max-width: 420px;
  margin: 0;
}
.nx-map-load {
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 4px;
  background: #1a6dd4;
  color: #fff;
  font: 600 1rem var(--font-outfit), Outfit, sans-serif;
  cursor: pointer;
}
.nx-map-load:hover,
.nx-map-load:focus-visible {
  background: #1558ad;
}

/* Local section below the city pages (was injected at runtime by the old custom code). */
.nl-host{display:block;background:#050810;color:#e8edf5;font-family:var(--font-outfit),Outfit,sans-serif}
.nl{border-top:1px solid #1a2d4a;padding:clamp(3rem,6vw,5rem) 6%}
.nl-in{max-width:1080px;margin:0 auto}
.nl-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a8c8ff;margin:0 0 .8rem}
.nl h2{font-family:var(--font-playfair),"Playfair Display",serif;font-weight:900;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.1;margin:0 0 1rem;color:#fff}
.nl h3{font-size:1rem;font-weight:600;margin:0 0 .6rem;color:#fff}
.nl p{color:#c9d3e3;line-height:1.7;margin:0;font-size:1rem}
.nl-lead{max-width:760px;font-size:1.08rem!important}
.nl-block{margin-top:2rem}
.nl-pills{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.nl-pills li{border:1px solid #1a2d4a;background:#0f1b30;border-radius:4px;padding:6px 12px;font-size:.85rem;color:#e8edf5}
.nl-links li{padding:0}
.nl-links a{display:block;padding:6px 12px;color:#a8c8ff;text-decoration:none}
.nl-links a:hover{color:#fff}
.nl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2rem}
.nl-card{background:#0f1b30;border:1px solid #1a2d4a;border-radius:6px;padding:1.4rem 1.5rem}
.nl-faq-h{margin-top:2.4rem!important;font-size:1.15rem!important}
.nl-faq{margin-top:10px;background:#0c1526;border:1px solid #1a2d4a;border-radius:6px;padding:1.1rem 1.4rem}
.nl-faq summary{cursor:pointer;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;list-style:none}
.nl-faq summary::-webkit-details-marker{display:none}
/* ::after is the enlarged tap area (below), so the open/closed sign uses ::before, moved to the right with order */
.nl-faq summary::before{content:"+";order:1;flex-shrink:0;color:#a8c8ff;font-size:1.3rem;font-weight:300;line-height:1}
.nl-faq[open] summary::before{content:"\2212"}
.nl-faq p{margin-top:.7rem}
.nl-call{display:inline-block;margin-top:1.4rem;font-weight:700;font-size:1.1rem;color:#a8c8ff;text-decoration:underline;text-underline-offset:4px}
.nl-call:hover{color:#fff}
.nl-faq summary:focus-visible,.nl-call:focus-visible,.nl-links a:focus-visible{outline:2px solid #a8c8ff;outline-offset:4px}
@media(max-width:760px){.nl-grid{grid-template-columns:1fr}
}

/* Legal page in the NOIR look. */
.nl-legal {
  background: #050810;
  color: #c9d3e3;
  font-family: var(--font-outfit), Outfit, sans-serif;
  line-height: 1.7;
  padding: clamp(3rem, 6vw, 5rem) 6%;
}
.nl-legal-in {
  max-width: 820px;
  margin: 0 auto;
}
.nl-legal h1 {
  margin: 0 0 2rem;
  font-family: var(--font-playfair), "Playfair Display", serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  color: #fff;
}
.nl-legal h2 {
  margin: 2.4rem 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}
.nl-legal p {
  margin: 0 0 1rem;
}
.nl-legal a {
  color: #a8c8ff;
  text-underline-offset: 3px;
}
.nl-legal a:hover,
.nl-legal a:focus-visible {
  color: #fff;
}
.nl-legal .nl-legal-box {
  padding: 1.2rem 1.4rem;
  border: 1px solid #1a2d4a;
  border-radius: 6px;
  background: #0f1b30;
}

.nl-credit {
  margin: 0;
  padding: 24px 6% 32px;
  border-top: 1px solid #1a2d4a;
  color: #8fa0bb;
  font-size: 0.85rem;
  text-align: center;
  line-height: 2;
}
.nl-credit a {
  display: inline-block;
  color: #a8c8ff;
  text-decoration: none;
}
.nl-credit a:hover,
.nl-credit a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* Text links next to body text are underlined, so they do not rely on colour alone. */
.fk-embed .nachbarn > a[href] {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Small links (footer lists, phone number in the top bar, FAQ call link) get a larger invisible hit area on
   phones without moving anything; 5px up and down lifts the 15px footer links over 24px. */
:is(.fk-embed, .fk-host) :is(footer a, .topbar a, .nl-call),
.nl-faq summary {
  position: relative;
}
:is(.fk-embed, .fk-host) :is(footer a, .topbar a, .nl-call)::after,
.nl-faq summary::after {
  content: "";
  position: absolute;
  inset: -5px -2px;
}

/* Small blue text on the navy cards (#0f1b30): the brand's own bright blue reaches 5:1 there, #1a6fd4 only 3.5:1
   and #2a7be0 4.1:1. Eyebrows, service and step numbers, partner links, the callback eyebrow. */
.fk-embed :is(.about-eyebrow, .faq-eyebrow, .section-eyebrow, .svc-num, .proc-num, .partner-link-text, .cb-eyebrow) {
  color: #2d8aff;
}
/* Start page service cards: number and link were dimmed with opacity (1.8:1 and 2.4:1). The number stays muted. */
.fk-frame--home .fk-embed .svc-num {
  color: #7387a6;
  opacity: 1;
}
.fk-frame--home .fk-embed .svc-link {
  color: #2d8aff;
  opacity: 1;
}
.fk-frame--home .fk-embed .svc-card:hover .svc-link {
  color: #fff;
}
/* Small uppercase labels (eyebrows, badges, numbers, footer headings and the footer line) were 10.9 to 11.7px; 12px
   is the floor for readable text (Webify accessibility standard). "html" outranks the embed's own rules. */
html :is(.fk-embed, .fk-host)
  :is(.partner-tag, .hero-badge, .proof-label, .hero-card-title, .section-eyebrow, .eyebrow, .svc-num, .leistung-num, .badge-notfall, .tag, .preis-zeit, .stat-label, .topbar, .fact span, footer h4, .footer-bottom) {
  font-size: 0.75rem;
}
/* The proof and stat labels sit side by side in wrapping rows; slightly tighter tracking keeps them as wide as before,
   so the rows do not wrap earlier. */
html :is(.fk-embed, .fk-host) :is(.proof-label, .stat-label) {
  letter-spacing: 0.07em;
}

/* Footer links were 15px high with 8px gaps (23px apart), below the 24px target size (WCAG 2.5.8). The gap moves into
   the link as padding, so each link is a 24px target and the column grows by about 1px per link. */
html :is(.fk-embed, .fk-host) .footer-grid a {
  margin-bottom: 0;
  padding-block: 4.5px;
}

/* The footer below the city pages is styled by a stylesheet without a link colour, so its links showed the
   browser blue on the navy footer (contrast 2.05, Unlighthouse 28.10.2026). Same colours as the embed footer. */
html .fk-host footer a {
  color: #8a9cb8;
  text-decoration: none;
}
html .fk-host footer a:hover {
  color: #e8edf5;
}

/* The pulsing dot in the hero badge stands still when the visitor asks for reduced motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  html .fk-embed .hero-badge::before {
    animation: none;
  }
}

/* Content pages (Preise, Ratgeber, Schwarze Schafe): built from the parts of the NOIR Leistungen page; these
   rules only add the layouts that page does not have (factor grids, card rows, topic list, charts on dark). */
.fk-embed .nx-factors {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fk-embed .nx-factors--wide {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.fk-embed .nx-factors--wide .factor-item {
  padding: 24px;
  background: var(--navy-card);
  border: 1px solid var(--navy-brd);
  border-radius: 8px;
  transition: border-color 0.2s;
}
.fk-embed .nx-factors--wide .factor-item:hover {
  border-color: var(--blue);
}
.fk-embed .factor-text strong {
  color: var(--white);
}
.fk-embed .factor-text span {
  color: #8fa0bb;
}
.fk-embed .factor-text a {
  color: var(--ice);
  text-underline-offset: 3px;
}
.fk-embed .factor-text a:hover,
.fk-embed .factor-text a:focus-visible {
  color: #fff;
}
.fk-embed .nx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.fk-embed .nx-cards .preis-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--navy-brd);
  border-radius: 8px;
}
.fk-embed .nx-cards .preis-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
}
.fk-embed .nx-cards .preis-name {
  color: var(--white);
}
.fk-embed .nx-cards .preis-desc,
.fk-embed .preis-note {
  color: #8fa0bb;
}
.fk-embed .nx-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 64px 80px;
}
.fk-embed .nx-topic {
  scroll-margin-top: 140px;
  padding-top: 32px;
  border-top: 1px solid var(--navy-brd);
}
.fk-embed .nx-topic .leistung-title {
  font-size: clamp(1.6rem, 3cqw, 2.2rem);
}
.fk-embed .area-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.fk-embed .area-pill:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 2px;
}
/* method diagram and arrival chart from the shared components, in NOIR colours */
.fk-embed .nx-figure {
  --ib-ink: #fff;
  --ib-text: #c9d3e3;
  --ib-teal: #a8c8ff;
  --ib-blue: #1a6fd4;
  --ib-line: #1a2d4a;
  --ib-soft: #0f1b30;
  max-width: 960px;
  color: #c9d3e3;
}
.fk-embed .nx-figure .md-row {
  background: var(--navy-card);
  border-color: var(--navy-brd);
  border-radius: 8px;
}
.fk-embed .nx-figure .md-step {
  background: var(--blue);
}
.fk-embed .nx-figure .md-arrow,
.fk-embed .nx-figure .md-method strong,
.fk-embed .nx-figure .md-row--swap .md-method strong {
  color: var(--ice);
}
.fk-embed .nx-figure figcaption,
.fk-embed .nx-figure .eta-ticks span {
  color: #8fa0bb;
}
.fk-embed .nx-figure .eta-group h3 {
  color: var(--blue-bright);
}
.fk-embed .nx-figure .eta-row a,
.fk-embed .nx-figure .eta-val {
  color: var(--white);
}
.fk-embed .nx-figure .eta-row a:hover,
.fk-embed .nx-figure .eta-row a:focus-visible {
  color: var(--ice);
}
/* bars in the bright NOIR blue with a glow so they stand out on the dark track */
.fk-embed .nx-figure .eta-track {
  height: 14px;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, #0f1b30 0 calc(var(--eta-step) - 1px), #1a2d4a calc(var(--eta-step) - 1px) var(--eta-step));
}
.fk-embed .nx-figure .eta-bar {
  min-width: 10px;
  border-radius: 7px;
  background: var(--blue-bright);
  box-shadow: 0 0 10px rgba(45, 138, 255, 0.6);
}
.fk-embed .nx-figure .eta-row:hover .eta-bar {
  background: var(--ice);
}
.fk-embed .nx-figure .eta-ticks span {
  font-size: 0.75rem;
}
/* every other tick on phones so the labels do not run into each other */
@container fk (max-width: 600px) {
  .fk-embed .nx-figure .eta-ticks span:nth-child(even) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fk-embed .nx-factors--wide .factor-item {
    transition: none;
  }
}
/* long compounds in the content page titles ("Schlüsselproblemen") must fit one line at 375px */
@container fk (max-width: 600px) {
  .fk-embed .nx-hero h1 {
    font-size: 8.6cqw;
  }
}

/* Phone overflow on the imported pages. The service titles are one unbreakable word ("Türöffnung<em>beschädigungsfrei</em>"
   without a space), so on phones the 1fr grid track grew to that width and pushed the service card ("Türöffnung
   Miltenberg") out on the right. A zero-width space in front of the em lets the title wrap there when it does not
   fit; where it fits nothing moves. The partner tiles on the start page asked for at least 320px. Desktop unchanged. */
.fk-embed .leistung-title em::before {
  content: "\200B";
}
.fk-embed .partner-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}