.nn-graz {
  --jade-light:#b7e5ba;
  --jade-mid:#5ca87c;
  --jade:#288760;
  --jade-dark:#1a5140;

  --bg:#ffffff;
  --paper:#f7f9f7;
  --ink:#12211a;
  --ink-muted:#5c6d64;
  --line:#dfe8e2;
  --card:#ffffff;

  --jade-accent:#288760;
  --tint:#eef6f0;
  --shadow:0 1px 2px rgba(18,33,26,.04), 0 8px 24px rgba(18,33,26,.06);

  --nav-h:97px;

  --spalte:60rem;
}
@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) .nn-graz {
    --bg:#0b0c0c;
    --paper:#0f1512;
    --ink:#e7e9ec;
    --ink-muted:#b0b5bf;
    --line:#22362c;
    --card:#111815;
    --jade-accent:#5ca87c;
    --tint:#122019;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
html[data-theme="dark"] .nn-graz {
  --bg:#0b0c0c;
  --paper:#0f1512;
  --ink:#e7e9ec;
  --ink-muted:#b0b5bf;
  --line:#22362c;
  --card:#111815;
  --jade-accent:#5ca87c;
  --tint:#122019;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

.nn-graz, .nn-graz *, .nn-graz *::before, .nn-graz *::after {box-sizing:border-box}

.nn-graz {margin-top:0;background:var(--bg);color:var(--ink)}

.nn-graz .wrap {width:min(2200px,100% - clamp(2rem,10vw,13rem));margin-inline:auto}
@media (max-width:560px) {
  .nn-graz .wrap {width:calc(100% - 2rem)}
}

.nn-graz .spalte {max-width:var(--spalte);margin-inline:auto}

.nn-graz h1, .nn-graz h2, .nn-graz h3 {font-weight:900;letter-spacing:-.025em;line-height:1.12;margin:0;color:var(--ink)}
.nn-graz h1 {font-size:clamp(2.2rem,3.6vw,3.6rem);text-wrap:balance}
.nn-graz h2 {font-size:clamp(1.5rem,2.3vw,2.2rem);text-wrap:balance}
.nn-graz h3 {font-size:clamp(1.12rem,1.4vw,1.4rem);letter-spacing:-.015em}
.nn-graz p {margin:0}

.nn-graz .kicker {
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade-accent);margin:0 0 .9rem;
}

.nn-graz .btn {
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:#247a56;color:#fff;
  font-weight:700;font-size:1rem;text-align:center;
  padding:.85rem 1.6rem;border-radius:999px;
  text-decoration:none;border:0;cursor:pointer;font-family:inherit;
}
.nn-graz .btn:hover, .nn-graz .btn:focus-visible {background:#1e6548;transition:background .2s ease}

.nn-graz .crumbs {
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  list-style:none;margin:0 0 clamp(1.75rem,4vh,2.75rem);padding:0;
  font-size:.85rem;color:var(--ink-muted);
}
.nn-graz .crumbs li {display:flex;align-items:center;gap:.45rem}
.nn-graz .crumbs a {color:var(--ink-muted);text-decoration:none}
.nn-graz .crumbs a:hover, .nn-graz .crumbs a:focus-visible {color:var(--jade-accent);transition:color .2s ease}
.nn-graz .crumbs [aria-current="page"] {color:var(--ink);font-weight:600}
.nn-graz .crumbs__sep {opacity:.45}

.nn-graz .artikel-kopf {
  position:relative;overflow:hidden;isolation:isolate;
  padding:calc(var(--nav-h) + clamp(1.5rem,4vh,3rem)) 0 clamp(2rem,4vh,3rem);
}
.nn-graz .artikel-kopf__atmo {
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 60% at 88% 12%, color-mix(in srgb,var(--jade) 22%,transparent) 0%, transparent 70%),
    radial-gradient(36% 46% at 4% 96%, color-mix(in srgb,var(--jade-light) 26%,transparent) 0%, transparent 72%),
    var(--bg);
}
.nn-graz .artikel-kopf__grid {
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center;
}
@media (max-width:900px) {
  .nn-graz .artikel-kopf__grid {grid-template-columns:1fr}
}
.nn-graz .artikel-kopf h1 {margin-bottom:.6rem}
.nn-graz .artikel-kopf__subline {
  font-style:italic;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(1.2rem,1.6vw,1.6rem);color:var(--jade-accent);margin-bottom:1.3rem;
}

.nn-graz .artikel-kopf__bild {margin:0}
.nn-graz .artikel-kopf__bild img {
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 62%;
  border-radius:20px;box-shadow:var(--shadow);background:var(--paper);
}
.nn-graz .artikel-kopf__bild figcaption {
  margin-top:.75rem;text-align:center;font-size:.85rem;font-weight:600;color:var(--ink-muted);
}
@media (max-width:900px) {
  .nn-graz .artikel-kopf__bild img {aspect-ratio:3/2;object-position:50% 70%}
}
.nn-graz .artikel-kopf__lede {font-size:clamp(1.08rem,1.3vw,1.3rem);line-height:1.6;color:var(--ink);text-wrap:pretty}

.nn-graz .artikel-meta {
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.9rem;
  align-items:center;margin-top:clamp(1.75rem,3.5vh,2.5rem);
  padding-top:1.25rem;border-top:1px solid var(--line);
}
.nn-graz .artikel-meta__foto {
  grid-row:1 / span 2;width:3rem;height:3rem;border-radius:50%;
  object-fit:cover;object-position:center 18%;
}
.nn-graz .artikel-meta p:not(.artikel-meta__datum) {display:flex;flex-wrap:wrap;gap:0 .6rem;align-items:baseline}
.nn-graz .artikel-meta__autor {font-weight:800;font-size:.95rem;color:var(--ink)}
.nn-graz .artikel-meta__rolle {font-size:.88rem;color:var(--ink-muted)}
.nn-graz .artikel-meta__datum {font-size:.85rem;color:var(--ink-muted)}

.nn-graz .anchors {
  position:sticky;top:var(--nav-h);z-index:30;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-block:1px solid var(--line);
  margin-bottom:clamp(2rem,4vh,3rem);
}
.nn-graz .anchors.is-stuck {background:var(--bg)}

.nn-graz .anchors__inner {
  max-width:calc(var(--spalte) + 1.7rem);
  display:flex;gap:.3rem;padding:.55rem 0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.nn-graz .anchors__inner::-webkit-scrollbar {display:none}
.nn-graz .anchors a {
  flex:none;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .85rem;border-radius:999px;border:1px solid transparent;
  font-size:.87rem;font-weight:700;white-space:nowrap;
  color:var(--ink-muted);text-decoration:none;
}
.nn-graz .anchors a:hover, .nn-graz .anchors a:focus-visible {color:var(--jade-accent);transition:color .2s ease}
.nn-graz .anchors a b {font-weight:900;font-size:.72rem;color:var(--jade-accent);font-variant-numeric:tabular-nums}
.nn-graz .anchors a.is-active {color:var(--ink);background:var(--tint);border-color:var(--line)}
.nn-graz .anchors__bar {height:2px;background:var(--jade);width:0;transition:width .15s linear}

.nn-graz .liste {list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.nn-graz .liste li {position:relative;padding-left:1.4rem;line-height:1.6}
.nn-graz .liste li::before {
  content:"";position:absolute;left:.1rem;top:.62em;width:.45rem;height:.45rem;border-radius:50%;
  background:var(--jade-accent);
}
.nn-graz .liste strong {color:var(--ink)}

.nn-graz .kurz-section {padding:0}
.nn-graz .kurz {
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.5rem,3vw,2.25rem);
}
.nn-graz .kurz__titel {font-size:clamp(1.12rem,1.4vw,1.35rem);margin-bottom:1.1rem}
.nn-graz .kurz .liste li {font-size:1rem;color:var(--ink-muted)}

.nn-graz .artikel {padding:clamp(2.5rem,6vh,4.5rem) 0 clamp(3rem,7vh,5rem)}
.nn-graz .text {font-size:1.125rem;line-height:1.75;color:var(--ink-muted)}
.nn-graz .text > * + * {margin-top:1.15rem}

.nn-graz .text h2 {margin-top:clamp(3rem,7vh,4.5rem);scroll-margin-top:calc(var(--nav-h) + 5rem)}
.nn-graz .text > h2:first-child {margin-top:0}
.nn-graz .text h3 {margin-top:2rem}
.nn-graz .text h2 + p, .nn-graz .text h3 + p {margin-top:.85rem}
.nn-graz .text strong {color:var(--ink);font-weight:700}
.nn-graz .text a:not(.btn) {
  color:var(--jade-accent);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.2em;
}
.nn-graz .text a:not(.btn):hover, .nn-graz .text a:not(.btn):focus-visible {text-decoration-thickness:2px}
.nn-graz .text .num {color:var(--jade-accent);margin-right:.2rem}
.nn-graz .text .liste-titel {color:var(--ink);font-weight:700}
.nn-graz .text .liste-titel + .liste {margin-top:.75rem}

.nn-graz .gut-zu-wissen {
  margin-block:2rem !important;
  background:var(--tint);border-left:3px solid var(--jade-accent);border-radius:0 14px 14px 0;
  padding:1.25rem 1.5rem;font-size:1rem;line-height:1.65;color:var(--ink);
}
.nn-graz .gut-zu-wissen__label {
  font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--jade-accent);margin-bottom:.45rem !important;
}

.nn-graz .tipp {
  margin-block:2.5rem !important;
  background:#1a5140;color:#e6f2ea;border-radius:20px;
  padding:clamp(1.5rem,3vw,2.25rem);
}
.nn-graz .tipp__label {font-weight:900;font-size:clamp(1.12rem,1.4vw,1.35rem);letter-spacing:-.015em;color:#fff;margin-bottom:.6rem}
.nn-graz .tipp p {font-size:1rem;line-height:1.65}
.nn-graz .tipp .btn {margin-top:1.4rem;background:#b7e5ba;color:#06110c}
.nn-graz .tipp .btn:hover, .nn-graz .tipp .btn:focus-visible {background:#d3f0d5}

.nn-graz .artikel-cta {
  margin-top:2.5rem !important;
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--jade-accent);
  border-radius:20px;box-shadow:var(--shadow);padding:clamp(1.5rem,3vw,2.25rem);
}
.nn-graz .artikel-cta__titel {font-weight:900;font-size:clamp(1.12rem,1.4vw,1.35rem);letter-spacing:-.015em;color:var(--ink);margin-bottom:.6rem}
.nn-graz .artikel-cta p {font-size:1rem;line-height:1.65}
.nn-graz .artikel-cta .btn {margin-top:1.4rem}

.nn-graz .faq-section {scroll-margin-top:calc(var(--nav-h) + 3rem);padding:clamp(3rem,7vh,5rem) 0;background:var(--paper)}
.nn-graz .faq-section h2 {margin-bottom:clamp(1.5rem,3vh,2.25rem)}
.nn-graz .faq details {border-bottom:1px solid var(--line)}
.nn-graz .faq details:first-of-type {border-top:1px solid var(--line)}
.nn-graz .faq summary {
  list-style:none;cursor:pointer;position:relative;
  padding:1.2rem 2.25rem 1.2rem 0;
  font-weight:800;font-size:clamp(1rem,1.2vw,1.2rem);letter-spacing:-.01em;color:var(--ink);
}
.nn-graz .faq summary::-webkit-details-marker {display:none}
.nn-graz .faq summary::after {
  content:"+";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  font-size:1.4rem;font-weight:400;color:var(--jade-accent);
}
.nn-graz .faq details[open] summary::after {content:"−"}
.nn-graz .faq summary:hover {color:var(--jade-accent);transition:color .2s ease}
.nn-graz .faq summary:focus-visible {outline:2px solid var(--jade-accent);outline-offset:3px}
.nn-graz .faq__a {padding:0 2.25rem 1.4rem 0;color:var(--ink-muted);font-size:1rem;line-height:1.65}

.nn-graz .weiterlesen-section {padding:clamp(3rem,7vh,5rem) 0 clamp(4rem,9vh,6rem)}
.nn-graz .weiterlesen-section .wrap {max-width:var(--spalte)}
.nn-graz .weiterlesen-head {
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;
  margin-bottom:clamp(1.5rem,3vh,2.25rem);
}
.nn-graz .weiterlesen-head p {margin-top:.6rem;color:var(--ink-muted);font-size:1rem}
.nn-graz .weiterlesen-alle {color:var(--jade-accent);font-weight:700;text-decoration:none;white-space:nowrap}
.nn-graz .weiterlesen-alle:hover, .nn-graz .weiterlesen-alle:focus-visible {text-decoration:underline}

.nn-graz .weiterlesen-grid {
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
}
.nn-graz .weiterlesen-grid > li {display:flex}
.nn-graz .weiterlesen-card {
  flex:1;display:flex;flex-direction:column;gap:.55rem;
  padding:1.5rem;border:1px solid var(--line);border-radius:16px;
  background:var(--card);box-shadow:var(--shadow);
  text-decoration:none;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease;
}
.nn-graz .weiterlesen-card__kicker {font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jade-accent)}
.nn-graz .weiterlesen-card__titel {font-weight:900;font-size:1.12rem;line-height:1.3;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.nn-graz .weiterlesen-card__text {color:var(--ink-muted);font-size:.95rem;line-height:1.55}
.nn-graz .weiterlesen-card__link {margin-top:auto;padding-top:.6rem;color:var(--jade-accent);font-weight:700;font-size:.95rem}
.nn-graz .weiterlesen-card__link span {display:inline-block;transition:transform .25s ease}
.nn-graz .weiterlesen-card:hover, .nn-graz .weiterlesen-card:focus-visible {
  transform:translateY(-3px);border-color:var(--jade-accent);
  box-shadow:0 2px 4px rgba(18,33,26,.05), 0 14px 32px rgba(18,33,26,.1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.nn-graz .weiterlesen-card:hover .weiterlesen-card__titel, .nn-graz .weiterlesen-card:focus-visible .weiterlesen-card__titel {
  color:var(--jade-accent);transition:color .2s ease;
}
.nn-graz .weiterlesen-card:hover .weiterlesen-card__link span {transform:translateX(.3rem)}
.nn-graz .weiterlesen-card:focus-visible {outline:2px solid var(--jade-accent);outline-offset:3px}
@media (max-width:900px) {
  .nn-graz .weiterlesen-grid {grid-template-columns:1fr}
}

.nn-graz .artikel-kopf__lede {margin-bottom:1.6rem}
.nn-graz .artikel-kopf__actions {display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem}
.nn-graz .btn--hero {font-size:.98rem;letter-spacing:.04em;text-transform:uppercase}
.nn-graz .artikel-kopf__link {color:var(--jade-accent);font-weight:700;text-decoration:none}
.nn-graz .artikel-kopf__link:hover, .nn-graz .artikel-kopf__link:focus-visible {text-decoration:underline}

.nn-graz .text .ergebnisse {list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:erg}
.nn-graz .ergebnisse li {
  counter-increment:erg;position:relative;
  padding:1.25rem 0 1.25rem 3.25rem;border-top:1px solid var(--line);
}
.nn-graz .ergebnisse li:last-child {border-bottom:1px solid var(--line)}
.nn-graz .ergebnisse li::before {
  content:counter(erg,decimal-leading-zero);position:absolute;left:0;top:1.3rem;
  font-weight:900;font-size:.95rem;color:var(--jade-accent);font-variant-numeric:tabular-nums;
}
.nn-graz .text .ergebnisse h3 {margin:0 0 .4rem}
.nn-graz .text .ergebnisse p {margin:0;font-size:1rem;line-height:1.65}

.nn-graz .text .formate-titel {margin-top:2.5rem}
.nn-graz .text .formate {
  list-style:none;margin:1rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
}
.nn-graz .format {
  display:flex;flex-direction:column;gap:.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:1.4rem;
}
.nn-graz .format--highlight {border-color:var(--jade-accent);box-shadow:0 0 0 1px var(--jade-accent), var(--shadow)}
.nn-graz .format__name {font-weight:900;font-size:1.1rem;letter-spacing:-.015em;color:var(--ink)}
.nn-graz .format__text {font-size:.96rem;line-height:1.6}
@media (max-width:760px) {
  .nn-graz .text .formate {grid-template-columns:1fr}
}

.nn-graz .text .ratgeber-trenner {
  margin-top:clamp(3.5rem,8vh,5.5rem);padding-top:clamp(2rem,4vh,3rem);
  border-top:2px solid var(--jade-accent);scroll-margin-top:calc(var(--nav-h) + 5rem);
}
.nn-graz .ratgeber-trenner .kicker {margin-bottom:.6rem}
.nn-graz .ratgeber-trenner__titel {
  font-weight:900;font-size:clamp(1.6rem,2.6vw,2.5rem);letter-spacing:-.025em;line-height:1.12;
  color:var(--ink);margin-bottom:.8rem !important;
}
.nn-graz .text .ratgeber-trenner + h2 {margin-top:clamp(2rem,4vh,3rem)}

.nn-graz .text .preis-tabelle-wrap {
  margin-top:1.5rem;border:1px solid var(--line);border-radius:16px;
  background:var(--card);box-shadow:var(--shadow);overflow:hidden;
}
.nn-graz .preis-tabelle {width:100%;border-collapse:collapse}
.nn-graz .preis-tabelle th, .nn-graz .preis-tabelle td {
  padding:1rem 1.25rem;text-align:left;vertical-align:top;
  font-size:.98rem;line-height:1.55;border-bottom:1px solid var(--line);
}
.nn-graz .preis-tabelle thead th {
  font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);background:var(--paper);
}
.nn-graz .preis-tabelle tbody th {font-weight:800;color:var(--ink);width:28%}
.nn-graz .preis-tabelle td {color:var(--ink-muted)}
.nn-graz .preis-tabelle td.is-accent {color:var(--ink);font-weight:700;width:28%;background:color-mix(in srgb,var(--jade) 7%,transparent)}
.nn-graz .preis-tabelle tbody tr:last-child th, .nn-graz .preis-tabelle tbody tr:last-child td {border-bottom:0}
@media (max-width:640px) {
  .nn-graz .text .preis-tabelle-wrap {display:none}
}

.nn-graz .text .preis-kurz {display:none}
@media (max-width:640px) {
  .nn-graz .text .preis-kurz {display:grid}
}

@media (min-width:1900px) {
  .nn-graz {--spalte:72rem}
  .nn-graz .text {font-size:1.25rem}
  .nn-graz .anchors a {font-size:1rem}
  .nn-graz .kurz .liste li, .nn-graz .gut-zu-wissen, .nn-graz .tipp p,
  .nn-graz .artikel-cta p, .nn-graz .faq__a {font-size:1.1rem}
}

@media (prefers-reduced-motion:reduce) {
  .nn-graz, .nn-graz * {animation-duration:.001ms !important;transition-duration:.001ms !important}
}