:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #526176;
  --line: #d8e0ea;
  --surface: #ffffff;
  --soft: #f4f7fb;
  --accent: #075985;
  --accent-strong: #0c4a6e;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--soft);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: var(--accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; }
a:hover, a:focus-visible { color: var(--accent-strong); }

.site-header, .site-footer {
  background: #0f172a;
  color: #e2e8f0;
}

.site-header-inner, .site-footer-inner, .page-shell {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}
.site-header-inner { padding: 1rem 0; }
.brand { color: #f8fafc; text-decoration: none; font-weight: 800; letter-spacing: .02em; font-size: 1.25rem; }
.brand span { color: #7dd3fc; }
.site-nav { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .7rem; }
.site-nav a { color: #cbd5e1; padding: .25rem 0; }
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; }
.language-selector { display: flex; gap: .45rem; align-items: center; margin-left: auto; }
.language-selector a { color: #cde7f6; text-decoration: none; padding: .25rem .4rem; border-radius: .3rem; }
.language-selector a[aria-current="true"] { background: rgba(103,232,249,.18); color: #fff; }

.page-shell { padding: 2rem 0 3rem; }
.hero, .panel, .tool-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .75rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.hero { padding: clamp(1.25rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.hero h1 { margin: 0 0 .35rem; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; }
.hero p { max-width: 70ch; color: var(--muted); margin: .5rem 0 0; }
.panel { padding: 1rem; margin: 1rem 0; overflow-x: auto; }
.result { white-space: pre-wrap; overflow-wrap: anywhere; }
.panel h2 { margin-top: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.tool-card { padding: 1rem; }
.tool-card h3 { margin-top: 0; }
.tool-card p { color: var(--muted); }

table { width: 100%; border-collapse: collapse; background: var(--surface); }
td, th { padding: .55rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { background: #e0f2fe; color: #0c4a6e; }
tr:nth-child(even) td { background: #f8fafc; }

form { max-width: 70rem; }
.panel form { display: grid; gap: .65rem; }
.panel form label { display: grid; gap: .3rem; }
.panel form button { justify-self: start; margin-top: .1rem; }
input, textarea, select, button { font: inherit; max-width: 100%; }
input, textarea, select { border: 1px solid #94a3b8; border-radius: .35rem; padding: .55rem .65rem; }
button, input[type="button"], input[type="submit"] { cursor: pointer; border: 0; border-radius: .35rem; padding: .55rem .8rem; background: var(--accent); color: white; }
button:hover, input[type="button"]:hover, input[type="submit"]:hover { background: var(--accent-strong); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }

.site-footer { padding: 1.25rem 0; font-size: .9rem; }
.site-footer a { color: #bae6fd; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .site-header-inner, .site-footer-inner, .page-shell { width: min(100% - 1rem, 1120px); }
  .page-shell { padding-top: 1rem; }
  td, th { padding: .45rem; font-size: .92rem; }
  textarea { width: 100%; }
}

.eyebrow { margin: 0 0 .3rem; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-heading { margin: 1.5rem 0 .75rem; }
.section-heading h2 { margin: 0; }
.tool-group { margin: 1.5rem 0 2rem; }
.tool-card { display: block; color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tool-card:hover, .tool-card:focus-visible { color: var(--ink); border-color: #38bdf8; box-shadow: 0 12px 28px rgba(15, 23, 42, .12); transform: translateY(-2px); }
.tool-card img { display: block; margin-bottom: .8rem; }
.tool-card h3 { margin-bottom: .25rem; }
.tool-card p { margin-bottom: 0; }
.identity-panel { display: grid; grid-template-columns: minmax(10rem, .7fr) 1.3fr; gap: 1rem 2rem; align-items: start; }
.identity-panel h2 { margin-bottom: 0; }
.identity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.identity-grid div { padding: .75rem; background: #f8fafc; border-radius: .5rem; }
.identity-grid dt { color: var(--muted); font-size: .82rem; font-weight: 700; }
.identity-grid dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.identity-note { grid-column: 1 / -1; margin: 0; }
.button-link { display: inline-block; padding: .55rem .8rem; color: #fff; background: var(--accent); border-radius: .35rem; text-decoration: none; }
.button-link:hover, .button-link:focus-visible { color: #fff; background: var(--accent-strong); }
@media (max-width: 700px) {
  .identity-panel { grid-template-columns: 1fr; }
  .identity-grid { grid-template-columns: 1fr; }
}

.tool-hero { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.tool-hero img { grid-row: span 3; }
.tool-hero .eyebrow, .tool-hero h1, .tool-hero p { grid-column: 2; }
.table-scroll { overflow-x: auto; }
.related-tools { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: 1rem 0; }
.danger-note { color: #9f1239; font-weight: 600; }
code { padding: .1rem .25rem; background: #0b2949; color: #d9faff; border-radius: .25rem; }
.example-list { padding-left: 1.25rem; }
.example-list code { display: inline-block; padding: .45rem .65rem; border: 1px solid rgba(103,232,249,.3); background: #061326; color: #d9faff; font-weight: 650; }
@media (max-width: 640px) {
  .tool-hero { grid-template-columns: 1fr; }
  .tool-hero img, .tool-hero .eyebrow, .tool-hero h1, .tool-hero p { grid-column: 1; }
}

:root{color-scheme:dark;--ink:#e7f5ff;--muted:#a9bfd2;--line:rgba(165,243,252,.2);--surface:rgba(8,27,53,.88);--soft:#061326;--accent:#67e8f9;--accent-strong:#cffafe}
body{min-width:0;color:var(--ink);background:var(--soft)}
.site-header,.site-footer{background:#061326;color:var(--ink)}
.site-header{border-bottom:0}
.site-header-inner{min-height:5rem;padding:.85rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;color:#f8fafc;text-decoration:none;font-weight:800;letter-spacing:.015em;font-size:1.18rem;white-space:nowrap}
.brand::before{content:"";width:2.35rem;height:2.35rem;flex:0 0 2.35rem;background:url("/assets/brand/netzwerkzeug-mark.svg") center/contain no-repeat}
.brand span{color:#67e8f9}
.site-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem .95rem;margin-top:0}
.site-nav a{color:#cde7f6;padding:.25rem 0;text-decoration:none}
.hero,.panel,.tool-card{background:var(--surface);border-color:var(--line);border-radius:1rem;box-shadow:0 1.2rem 3rem rgba(0,0,0,.22)}
.hero{padding:clamp(1.35rem,4vw,3.4rem);margin-bottom:1.25rem}
.home-hero{border:1px solid var(--line);box-sizing:border-box;min-height:clamp(27rem,57vw,42rem);display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;background:linear-gradient(90deg,rgba(6,19,38,.98) 0%,rgba(6,19,38,.86) 37%,rgba(6,19,38,.2) 75%),url("/assets/hero/netzwerkzeug-hero-desktop.webp") center/cover no-repeat}
.home-hero>*{max-width:43rem;position:relative;z-index:1}
.hero h1{margin:0 0 .45rem;max-width:18ch;font-size:clamp(2.2rem,6vw,5rem);line-height:1.03;letter-spacing:-.035em}
.hero .eyebrow{color:#67e8f9}.hero .hero-line{color:#a5f3fc;font-size:clamp(1rem,2vw,1.25rem)}
.panel{padding:clamp(1rem,2.5vw,1.6rem);margin:1rem 0}
.tool-card{padding:1.1rem;color:var(--ink)}
.tool-card p,.tool-hero p{color:var(--muted)}
.identity-panel{background:linear-gradient(135deg,rgba(11,41,73,.96),rgba(8,27,53,.9))}
.identity-grid div{padding:.8rem;min-width:0;background:rgba(6,19,38,.65);border:1px solid rgba(103,232,249,.14);border-radius:.65rem}
.identity-grid dt{color:#a5f3fc;font-size:.78rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
table{background:rgba(11,41,73,.94)} th{background:#0b2949;color:#a5f3fc} tr:nth-child(even) td{background:rgba(6,19,38,.45)}
input,textarea,select{width:100%;color:var(--ink);background:rgba(6,19,38,.82);border:1px solid #52738d;border-radius:.45rem;padding:.65rem .7rem}
button,input[type=button],input[type=submit],.button-link{border-radius:.45rem;padding:.65rem .9rem;background:#22d3ee;color:#061326;font-weight:750}
.button-link{text-decoration:none}
.site-footer{padding:1.35rem 0}.site-footer a{color:#a5f3fc}
*:focus-visible{outline:3px solid #a5f3fc;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media(max-width:760px){.site-header-inner{align-items:flex-start;flex-direction:column}.site-nav{justify-content:flex-start}.home-hero{min-height:38rem;background:linear-gradient(180deg,rgba(6,19,38,.93),rgba(6,19,38,.72) 43%,rgba(6,19,38,.15)),url("/assets/hero/netzwerkzeug-hero-mobile.webp") center/cover no-repeat}.home-hero h1{max-width:14ch}.identity-panel{grid-template-columns:1fr}.identity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.identity-note{grid-column:1}}
@media(max-width:520px){.site-header-inner,.site-footer-inner,.page-shell{width:min(100% - 1rem,1120px)}.page-shell{padding-top:1rem}.identity-grid{grid-template-columns:1fr}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.tool-card{padding:.8rem}.tool-card img{width:40px;height:40px}.tool-hero{grid-template-columns:1fr}.tool-hero img,.tool-hero .eyebrow,.tool-hero h1,.tool-hero p{grid-column:1}}

.api-doc{max-width:1160px;margin:0 auto;padding:2rem 1rem 4rem}.api-doc h1{font-size:clamp(2rem,5vw,3.6rem)}.api-doc pre{white-space:pre-wrap;overflow:auto;background:#020b18;color:#d9faff;border:1px solid rgba(103,232,249,.15);border-radius:.6rem;padding:1rem}

@supports (background-image: image-set(url("x") type("image/webp"))) { .home-hero { background-image: linear-gradient(90deg,rgba(6,19,38,.98) 0%,rgba(6,19,38,.86) 37%,rgba(6,19,38,.2) 75%), image-set(url("/assets/hero/netzwerkzeug-hero-desktop.webp") type("image/webp"), url("/assets/hero/netzwerkzeug-hero-desktop.jpg") type("image/jpeg")); } }
@supports (background-image: image-set(url("x") type("image/webp"))) { @media (max-width:760px) { .home-hero { background-image: linear-gradient(180deg,rgba(6,19,38,.93),rgba(6,19,38,.72) 43%,rgba(6,19,38,.15)), image-set(url("/assets/hero/netzwerkzeug-hero-mobile.webp") type("image/webp"), url("/assets/hero/netzwerkzeug-hero-mobile.jpg") type("image/jpeg")); } } }

/* Host-specific design hooks. Add a matching site-theme-* rule for each site in site-config.php. */
.site-theme-netzwerkzeug { --accent: #67e8f9; --accent-strong: #cffafe; }
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; width: 100%; }
.brand { gap: .65rem; }
.brand-text { display: inline-flex; gap: 0; white-space: nowrap; }
.brand-name, .brand-suffix { display: inline; }
.brand-suffix { color: #67e8f9; }
.connection-panel { grid-template-columns: 1fr; width: min(100%, 48rem); margin: 0; padding: .65rem .75rem; box-shadow: 0 .7rem 1.5rem rgba(0,0,0,.18); }
.connection-panel .identity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.connection-panel .identity-grid div { padding: .55rem .65rem; }
.tool-card img { display: block; width: 48px; height: 48px; object-fit: contain; visibility: visible; opacity: 1; }
@media(max-width:760px) {
  .brand-lockup, .connection-panel { width: 100%; }
}
@media(max-width:520px) {
  .connection-panel .identity-grid { grid-template-columns: 1fr; }
  .tool-card img { width: 48px; height: 48px; }
}

/* The connection details are one outer panel overlaying the bottom of the hero image. */
.home-hero { position: relative; padding-bottom: clamp(8rem, 15vw, 10rem); }
.home-hero .hero-identity { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; width: auto; max-width: none;  background: rgba(8,27,53,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-identity .identity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.hero-identity .identity-grid div { padding: .35rem .8rem; background: transparent; border: 0; border-left: 1px solid rgba(165,243,252,.22); border-radius: 0; }
.hero-identity .identity-grid div:first-child { border-left: 0; }
.hero-identity .identity-grid dd { color: #e7f5ff; }
@media(max-width:760px) {
  .home-hero { padding-bottom: 12rem; }
  .home-hero .hero-identity { left: 0; right: 0; bottom: -1px; }
  .hero-identity .identity-grid { grid-template-columns: 1fr; }
  .hero-identity .identity-grid div { border-left: 0; border-top: 1px solid rgba(165,243,252,.22); }
  .hero-identity .identity-grid div:first-child { border-top: 0; }
}

.hero-identity .identity-summary { display: flex; flex-direction: column; gap: .35rem; margin: 0; color: #e7f5ff; }
.hero-identity .identity-summary > div { display: block; min-width: 0; overflow-wrap: anywhere; }
.hero-identity .identity-summary strong { color: #a5f3fc; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
@media