/* ==========================================================================
   KRINet.at – Design-System
   Netzwerk zum Schutz kritischer Infrastruktur Österreich
   Farben: Österreich-Rot / Weiß / Anthrazit / Silber (aus dem Logo abgeleitet)
   Keine externen Ressourcen (DSGVO-freundlich, keine Google Fonts, keine Tracker)
   ========================================================================== */

:root {
  /* Marke */
  --red:        #C8102E;   /* KRINet-/Österreich-Rot */
  --red-700:    #A20C24;   /* Hover / dunkler */
  --red-600:    #B60E28;
  --red-50:     #FCEBEE;   /* Tint */

  /* Anthrazit / Tinten */
  --ink:        #13171F;   /* Text & dunkle Flächen */
  --ink-900:    #0F131A;
  --ink-800:    #1B212C;
  --ink-700:    #29323F;

  /* Grau / Silber */
  --slate:      #47505E;   /* Sekundärtext */
  --muted:      #6A7280;
  --steel:      #9AA3B0;
  --line:       #E4E7EC;   /* Rahmen hell */
  --line-2:     #EEF1F4;

  /* Hintergründe */
  --bg:         #FFFFFF;
  --bg-soft:    #F6F7F9;
  --bg-tint:    #F1F3F6;

  /* Silber-Verlauf (Siegel-Anmutung) */
  --silver:     linear-gradient(180deg,#F4F5F7 0%,#D9DDE3 50%,#B9BEC7 100%);

  /* Radius & Schatten */
  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --sh-1: 0 1px 2px rgba(16,20,28,.06), 0 1px 3px rgba(16,20,28,.10);
  --sh-2: 0 6px 18px rgba(16,20,28,.08), 0 2px 6px rgba(16,20,28,.06);
  --sh-3: 0 18px 40px rgba(16,20,28,.14);

  /* Layout */
  --container: 1140px;
  --gutter: 24px;

  /* Typo */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-base: 17px;
}

/* ------- Reset / Base ------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg,video { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-700); text-decoration: underline; }
h1,h2,h3,h4 { line-height: 1.3; margin: 0 0 .65em; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: 1.28rem; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
ul,ol { margin: 0 0 1rem; padding-left: 1.2rem; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }

/* ------- Skip link ------- */
.skip { position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1rem; z-index:200; border-radius:0 0 8px 0; }
.skip:focus { left:0; color:#fff; }

/* ------- Layout ------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(3rem, 2rem + 5vw, 5.5rem) 0; }
.section--soft { background: var(--bg-soft); }
.section--ink { background: var(--ink); color: #D7DCE4; }
.section--tight { padding-top: clamp(2rem,1.5rem + 2vw,3rem); }
.narrow { max-width: 760px; }
.center { text-align: center; }
.center.narrow { margin-inline: auto; }

/* Grid helpers */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 940px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr;} }

/* ------- Austria accent line (rot/weiß/rot) ------- */
.flag-strip { height: 4px; background: linear-gradient(180deg,var(--red) 0 33.33%,#fff 33.33% 66.66%,var(--red) 66.66% 100%); }

/* ------- Eyebrow / Section head ------- */
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-bottom:.9rem; }
.eyebrow::before { content:""; width:26px; height:2px; background:var(--red); display:inline-block; }
.section--ink .eyebrow { color:#FF8DA0; }
.section--ink .eyebrow::before { background:#FF8DA0; }
.section-head { max-width: 720px; margin-bottom: 2.5rem; }
.section-head.center { margin-inline:auto; }
.lead { font-size: 1.15rem; color: var(--slate); }
.section--ink .lead { color:#AEB6C2; }

/* ------- Buttons ------- */
.btn { --bg:var(--red); --fg:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:700; font-size:1rem; line-height:1; padding:.9rem 1.4rem; border-radius:999px; border:2px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s; text-decoration:none; }
.btn:hover { background:var(--red-700); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn svg { width:1.1em; height:1.1em; }
.btn--lg { padding:1.05rem 1.8rem; font-size:1.06rem; }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover { background:var(--bg-soft); color:var(--ink); border-color:var(--steel); box-shadow:none; }
.btn--outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn--outline-light:hover { background:#fff; color:var(--ink); border-color:#fff; }
.btn--dark { background:var(--ink); color:#fff; }
.btn--dark:hover { background:var(--ink-800); }
.btn--block { display:flex; width:100%; }

/* ------- Header ------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); }
.site-header.scrolled { box-shadow: var(--sh-1); }
.nav { display:flex; align-items:center; gap:1.5rem; height:74px; }
.brand { display:flex; align-items:center; gap:.7rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.brand:hover { text-decoration:none; color:var(--ink); }
.brand img { width:46px; height:46px; flex:0 0 auto; }
.brand__text { display:flex; flex-direction:column; line-height:1.08; }
.brand__text b { font-size:1.12rem; }
.brand__text small { font-size:.68rem; font-weight:600; letter-spacing:.02em; color:var(--muted); margin-top:2px; }
.nav-links { display:flex; align-items:center; gap:.35rem; margin-left:auto; list-style:none; padding:0; }
.nav-links a { color:var(--ink-800); font-weight:600; font-size:.98rem; padding:.5rem .7rem; border-radius:8px; }
.nav-links a:hover { color:var(--red); text-decoration:none; background:var(--red-50); }
.nav-links a[aria-current="page"] { color:var(--red); }
.nav-cta { margin-left:.6rem; }
.nav-cta .btn { color:#fff; }
.nav-cta .btn:hover { color:#fff; }
.nav-toggle { display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.2s; }
.nav-toggle span::before { position:absolute; top:-6px; } .nav-toggle span::after { position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top:0; transform:rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle { display:flex; }
  .nav-links { position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:#fff; margin:0; padding:.5rem var(--gutter) 1.2rem; border-bottom:1px solid var(--line); box-shadow:var(--sh-2); transform:translateY(-130%); transition:transform .25s ease; max-height:calc(100vh - 74px); overflow:auto; }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:.85rem .4rem; border-bottom:1px solid var(--line-2); border-radius:0; font-size:1.05rem; }
  .nav-links a:hover { background:transparent; }
  .nav-cta { margin:.9rem 0 0; } .nav-cta .btn { width:100%; }
}

/* ------- Hero ------- */
.hero { position:relative; background:var(--ink-900); color:#fff; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:0; background:
  radial-gradient(1200px 500px at 80% -10%, rgba(200,16,46,.35), transparent 60%),
  radial-gradient(900px 500px at 0% 110%, rgba(41,50,63,.6), transparent 60%); pointer-events:none; }
.hero__media { position:absolute; inset:0; }
.hero__media img { width:100%; height:100%; object-fit:cover; opacity:.55; filter:grayscale(.08) contrast(1) brightness(1.2); }
.hero__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink-900) 8%, rgba(15,19,26,.72) 55%, rgba(15,19,26,.45)); }
.hero__inner { position:relative; z-index:2; padding: clamp(4.5rem,2.5rem + 8vw,9.5rem) 0 clamp(4rem,2.5rem + 6vw,8rem); max-width:760px; }
.hero h1 { color:#fff; }
.hero p.lead { color:#C7CDD7; font-size:1.22rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.hero__trust { display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.14); color:#AEB6C2; font-size:.92rem; }
.hero__trust b { color:#fff; display:block; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin-bottom:.35rem; }
.tag { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#fff; font-weight:600; font-size:.85rem; padding:.4rem .8rem; border-radius:999px; margin-bottom:1.3rem; }
.tag .dot { width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(200,16,46,.25); }

/* ------- Cards ------- */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.9rem; box-shadow:var(--sh-1); transition:transform .15s ease, box-shadow .15s ease, border-color .15s; height:100%; }
.card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#D8DCE3; }
.card h3 { margin:0 0 .6rem; line-height:1.28; }
.card p { color:var(--slate); margin:0 0 .9rem; }
.card p:last-child { margin-bottom:0; }
.card > *:last-child { margin-bottom:0; }
.card__icon { width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background:var(--red-50); color:var(--red); margin-bottom:1.1rem; }
.card__icon svg { width:26px; height:26px; }
.card--flat { box-shadow:none; }
.card--ink { background:var(--ink-800); border-color:var(--ink-700); color:#C7CDD7; }
.card--ink h3 { color:#fff; } .card--ink p { color:#AEB6C2; }
.card--ink .card__icon { background:rgba(200,16,46,.18); color:#FF8DA0; }

/* ------- List with check/marker ------- */
.ticks { list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:1.7rem; }
.ticks li { position:relative; padding-left:2rem; color:var(--slate); }
.ticks li::before { content:""; position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:50%; background:var(--red-50);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:13px; background-repeat:no-repeat; background-position:center; }
.section--ink .ticks li { color:#C0C7D2; }

/* ------- Steps (nummeriert) ------- */
.steps { counter-reset: step; display:grid; gap:1.2rem; }
.step { display:flex; gap:1.1rem; align-items:flex-start; }
.step__num { flex:0 0 auto; counter-increment:step; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; }
.step__num::before { content:counter(step); }
.step h3 { margin-bottom:.2rem; font-size:1.14rem; }
.step p { color:var(--slate); margin:0; }

/* ------- Split (Bild + Text) ------- */
.split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1rem + 4.5vw,5.5rem); align-items:center; }
.split--rev .split__media { order:2; }
.split__media img { border-radius:var(--r-lg); box-shadow:var(--sh-2); width:100%; object-fit:cover; }
@media (max-width:860px){ .split { grid-template-columns:1fr; gap:3rem; } .split--rev .split__media { order:0; } }

/* ------- Stats ------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat b { display:block; font-size:2.3rem; font-weight:800; letter-spacing:-.03em; color:var(--red); line-height:1; }
.stat span { color:var(--muted); font-weight:600; font-size:.95rem; }
.section--ink .stat b { color:#fff; } .section--ink .stat span { color:#9AA3B0; }
@media (max-width:620px){ .stats { grid-template-columns:repeat(2,1fr); gap:1.6rem; } }

/* ------- Team ------- */
.person { text-align:left; }
.person__avatar { width:76px; height:76px; border-radius:50%; background:var(--silver); display:grid; place-items:center; font-weight:800; font-size:1.4rem; color:var(--ink); margin-bottom:1rem; border:1px solid var(--line); }
.person h3 { margin-bottom:.1rem; }
.person .role { color:var(--red); font-weight:700; font-size:.92rem; margin-bottom:.6rem; }
.person p { color:var(--slate); }

/* ------- Events & News ------- */
.event { display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.5rem; box-shadow:var(--sh-1); }
.event + .event { margin-top:1rem; }
.event__date { text-align:center; min-width:66px; background:var(--ink); color:#fff; border-radius:10px; padding:.5rem .2rem; line-height:1.05; }
.event__date .d { font-size:1.5rem; font-weight:800; display:block; }
.event__date .m { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#C7CDD7; }
.event__date .y { font-size:.68rem; color:var(--steel); }
.event__body h3 { margin:0 0 .25rem; font-size:1.16rem; }
.event__meta { color:var(--muted); font-size:.9rem; display:flex; flex-wrap:wrap; gap:.3rem 1rem; }
.event__meta span { display:inline-flex; align-items:center; gap:.35rem; }
.event__body p { margin:.5rem 0 0; color:var(--slate); }
.event__cta { white-space:nowrap; }
.badge { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .6rem; border-radius:999px; }
.badge--red { background:var(--red-50); color:var(--red); }
.badge--muted { background:var(--bg-tint); color:var(--muted); }
.badge--green { background:#E7F6EC; color:#1E7A44; }
@media (max-width:640px){ .event { grid-template-columns:auto 1fr; } .event__cta { grid-column:1 / -1; } .event__cta .btn{ width:100%; } }

.news-item { padding:1.3rem 0; border-bottom:1px solid var(--line); }
.news-item:first-child { padding-top:0; }
.news-item time { color:var(--red); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.news-item h3 { margin:.3rem 0 .3rem; font-size:1.2rem; }
.news-item p { color:var(--slate); margin:0; }

.empty { color:var(--muted); background:var(--bg-soft); border:1px dashed var(--line); border-radius:var(--r); padding:1.5rem; text-align:center; }

/* ------- Partners ------- */
.partners { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.2rem; }
.partner { display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--slate); font-size:1.05rem; letter-spacing:.01em; padding:.6rem 1rem; border:1px solid var(--line); border-radius:12px; background:#fff; text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; }
.partner:hover { border-color:var(--steel); box-shadow:var(--sh-1); text-decoration:none; color:var(--slate); }
.partner small { display:block; font-size:.68rem; font-weight:600; color:var(--muted); letter-spacing:.02em; }

/* ------- CTA band ------- */
.cta-band { background:linear-gradient(120deg,var(--ink) 0%, var(--ink-800) 60%, #3a1119 140%); color:#fff; border-radius:var(--r-xl); padding:clamp(2rem,1.5rem + 3vw,3.4rem); position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(200,16,46,.45),transparent 70%); }
.cta-band h2 { color:#fff; position:relative; }
.cta-band p { color:#C7CDD7; position:relative; max-width:640px; }
.cta-band .hero__cta { position:relative; margin-top:1.4rem; }

/* ------- Forms ------- */
.form { display:grid; gap:1.1rem; }
.form-row { display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .form-row { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-weight:700; font-size:.92rem; color:var(--ink-800); }
.field .req { color:var(--red); }
.field input, .field select, .field textarea { font-family:inherit; font-size:1rem; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:.8rem .9rem; transition:border-color .15s, box-shadow .15s; width:100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-50); }
.field textarea { min-height:140px; resize:vertical; }
.field .hint { font-size:.82rem; color:var(--muted); }
.checkbox { display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color:var(--slate); }
.checkbox input { width:20px; height:20px; margin-top:.15rem; accent-color:var(--red); flex:0 0 auto; }
.hp { position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }
.form-note { font-size:.85rem; color:var(--muted); }
.form-status { display:none; padding:.9rem 1.1rem; border-radius:10px; font-weight:600; }
.form-status.ok { display:block; background:#E7F6EC; color:#1E7A44; border:1px solid #B7E3C4; }
.form-status.err { display:block; background:var(--red-50); color:var(--red-700); border:1px solid #F3C6CE; }

/* ------- Info / callout ------- */
.callout { border-left:4px solid var(--red); background:var(--red-50); padding:1.1rem 1.3rem; border-radius:0 12px 12px 0; color:var(--ink-800); }
.callout--ink { border-color:var(--red); background:var(--bg-soft); }

/* ------- Prose (Recht/Text-Seiten) ------- */
.prose { max-width:800px; }
.prose h2 { margin-top:2.2rem; }
.prose h3 { margin-top:1.6rem; }
.prose p, .prose li { color:var(--slate); }
.prose a { text-decoration:underline; }
.prose .muted { color:var(--muted); font-size:.92rem; }

/* ------- Breadcrumb / page header ------- */
.page-hero { background:var(--bg-soft); border-bottom:1px solid var(--line); padding:clamp(2.4rem,2rem + 3vw,3.8rem) 0; }
.page-hero .eyebrow { margin-bottom:.7rem; }
.page-hero h1 { margin-bottom:.5rem; }
.page-hero p { color:var(--slate); max-width:680px; font-size:1.1rem; margin:0; }

/* ------- Footer ------- */
.site-footer { background:var(--ink-900); color:#9AA3B0; }
.footer-main { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding:clamp(2.5rem,2rem + 3vw,4rem) 0 2.5rem; }
.footer-brand .brand { color:#fff; margin-bottom:1rem; }
.footer-brand .brand b { color:#fff; } .footer-brand .brand small { color:#8B94A2; }
.footer-brand p { color:#8B94A2; font-size:.95rem; max-width:34ch; }
.site-footer h4 { color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 1rem; }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.footer-links a { color:#AEB6C2; font-weight:500; }
.footer-links a:hover { color:#fff; text-decoration:none; }
.footer-contact a { color:#fff; font-weight:600; }
.footer-bottom { border-top:1px solid var(--ink-700); padding:1.4rem 0; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; align-items:center; font-size:.88rem; color:#7A828F; }
.footer-bottom a { color:#AEB6C2; } .footer-bottom a:hover{ color:#fff; text-decoration:none; }
.footer-bottom nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
@media (max-width:860px){ .footer-main { grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .footer-main { grid-template-columns:1fr; } }

/* ------- Utilities ------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-2{margin-bottom:2rem}
.text-red{color:var(--red)} .fw-800{font-weight:800}
.chip-row{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-800);font-weight:600;font-size:.88rem;padding:.45rem .85rem;border-radius:999px}
.chip svg{width:16px;height:16px;color:var(--red)}