/* ── tool.css — Charakter „IPv4-Rechner“ ─────────────────────────────────────────────────────────────────
   WAS:   Akzente Petrol (Netz-Bits) · Bernstein (Host-Bits) · Pink (die eingegebene Adresse), Ergebnisblock (Hauptergebnis groß + Liste),
          Bit-Karte als Kachelraster (eingeklappt), Präfix-Schieber mit Oktett-Skala, Aufteilen-Tabelle, Adressliste, Tool-Profil.
   WARUM: Ein Netzwerker denkt in Bits — die Karte zeigt, wo die Grenze Netz|Host liegt. Farben tragen Bedeutung (Netz/Host/Adresse), nicht nur Schmuck.
   LAYOUT (Lauf 2, 27.10.): Desktop ≥ 1000 px: links Eingabe-Tafel, rechts daneben das Ergebnis; darunter über die volle Breite die eingeklappten Kästen
          (.ip-kasten), dann Über dieses Tool, Hilfe & Infos. Unter 1000 px und am Handy alles in einer Spalte, Eingabe zuerst. Zeilenform des Ergebnisses
          (Bezeichnung links, Wert rechts) ab 761 px, darunter Bezeichnung über dem Wert — je ein eigener Medienblock am Ende der Datei.
          Überholte Regeln stehen auskommentiert (Lauf 2).
   WIE ÄNDERN: Farben nur über --a1/--a2/--a3; Grundbausteine (auch .fb-* der Kästen) in ../_werk/werk.css (gemeinsam für alle Tools). */
:root { --a1: #2dd4bf; --a2: #fbbf24; --a3: #f472b6; --a1-tinte: #062420; --bit-tinte: #0b1416; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #0d9488; --a2: #b45309; --a3: #db2777; --bit-tinte: #ffffff; } }
:root[data-thema="hell"] { --a1: #0d9488; --a2: #b45309; --a3: #db2777; --bit-tinte: #ffffff; }

/* Kopf-Icon: Original-Icon (breit, transparent) auf neutralem Grund */
.kopf-glyphe { width: 82px; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }
.kopf-glyphe img { display: block; width: 68px; height: auto; max-height: 44px; object-fit: contain; }

/* Raster: Eingabe | Ergebnis, darunter die Kästen über die volle Breite. Unter 1000 px eine Spalte (vorher war 640–1000 px nicht definiert). */
.ip-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.ip-kasten { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .ip-raster { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); }
}
/* (alt) .ip-raster { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); }  .ip-werte, .ip-teilen, .ip-liste { grid-column: 1 / -1; }
   .ip-eingabe, .ip-bits { align-self: stretch; }  .ip-bits { display: flex; flex-direction: column; }  .ip-raum-block { margin-top: auto; padding-top: 22px; } */
.wert-zahl sup { font-size: .6em; margin-left: 1px; }

/* Eingabe */
.ip-art { margin-left: auto; font: 700 13px var(--mono); padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--a1) 16%, transparent); color: var(--a1); letter-spacing: .04em; }
.ip-art.v6 { background: color-mix(in srgb, var(--a3) 16%, transparent); color: var(--a3); }
.ip-feld input { font-size: clamp(22px, 2.3vw, 28px); padding: 14px 16px; font-weight: 500; }
.ip-echo { display: inline-block; margin-top: 6px; padding: 4px 8px; border-radius: 8px; background: var(--flaeche-2); color: var(--text); font-size: 15px; white-space: pre-wrap; word-break: break-all; }
.ip-praefix { margin-top: 16px; }
.ip-praefix-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ip-praefix-kopf .feld-label { margin: 0; }
.ip-praefix-wert { font: 700 40px/1 var(--titel); color: var(--a1); letter-spacing: -0.02em; min-width: 2.2em; }
/* (entfernt, Lauf 2) .ip-maske-text { font: 500 18px var(--mono); color: var(--leise); margin-left: auto; } */
.ip-schieber { margin-top: 6px; }
.ip-skala { position: relative; height: 18px; margin-top: 2px; }
.ip-skala span { position: absolute; transform: translateX(-50%); font: 500 12px var(--mono); color: var(--sehr-leise); }
.ip-nachbarn { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }   /* jetzt im Kasten „In Teilnetze aufteilen“ */
.ip-nachbarn .ikon-knopf { flex: 1; font-size: 14px; }
.ip-nachbarn .ikon-knopf:disabled { opacity: .35; cursor: not-allowed; }
.ip-beispiele { margin-top: 18px; }
.ip-beispiele .chips { gap: 6px; }
.ip-beispiel { font: 500 13.5px var(--mono); min-height: 34px; padding: 4px 10px; border-radius: 10px; }

/* Ergebnis: Hauptergebnis groß, darunter die geordnete Liste (Lauf 2). Die Zeilen sind .wert-Kästen aus werk.css; .zeile ordnet sie als Tabellenzeile. */
.ip-haupt .wert.haupt { padding: 18px 16px 18px 22px; background: color-mix(in srgb, var(--a1) 9%, var(--flaeche-2)); border-color: color-mix(in srgb, var(--a1) 40%, transparent); }
.ip-haupt .wert.haupt .wert-label { font-size: 15px; }
.ip-haupt .wert.haupt .wert-zahl { font-size: clamp(26px, 3.3vw, 44px); font-weight: 700; line-height: 1.15; color: var(--text); }
.ip-haupt.v6 .wert.haupt .wert-zahl { font-size: clamp(20px, 2.3vw, 30px); }
.ip-haupt .wert.haupt .wert-zusatz { font-size: 15px; }
.erg-liste { display: grid; gap: 8px; }
.ip-haupt + .erg-liste { margin-top: 10px; }
.erg-liste .wert-zahl { font-size: 20px; }
.wert.zahl-akzent .wert-zahl { color: var(--a2); font-weight: 700; }
.erg-liste .wert.zahl-akzent .wert-zahl { font-size: 26px; }
.ip-kasten .fb-inhalt { margin-top: 14px; }
.ip-liste-text { margin: 0 0 10px; }

/* Bit-Karte (jetzt im eingeklappten Kasten, volle Breite) */
.ip-legende { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ip-legende span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--leise); }
.ip-legende span::before { content: ""; width: 12px; height: 12px; border-radius: 4px; }
.lg-netz::before { background: var(--a1); } .lg-host::before { background: var(--a2); }
.ip-karte { display: grid; gap: 10px; }
.ip-zeile { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 10px; }
.ip-zeile-label { font-size: 14px; font-weight: 700; color: var(--leise); padding-top: 6px; }
.ip-zeile-ip .ip-zeile-label { color: var(--a3); }
.ip-gruppen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ip-karte.v6 .ip-gruppen { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.ip-gruppe { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
.ip-zellen { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.ip-karte.v6 .ip-zellen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.z { display: grid; place-items: center; height: 30px; border-radius: 5px; font: 500 14px var(--mono); position: relative;
  transition: background-color .35s var(--kurve) calc(var(--i) * 9ms), color .35s calc(var(--i) * 9ms), box-shadow .3s; }
.z.netz { background: color-mix(in srgb, var(--a1) 12%, transparent); color: color-mix(in srgb, var(--a1) 85%, var(--text)); }
.z.eins { font-weight: 700; }
.z.netz.eins { background: var(--a1); color: var(--bit-tinte); }
.z.host { background: color-mix(in srgb, var(--a2) 12%, transparent); color: color-mix(in srgb, var(--a2) 85%, var(--text)); }
.z.host.eins { background: var(--a2); color: var(--bit-tinte); }
.z.teil { background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 45%, transparent) var(--teil), color-mix(in srgb, var(--a2) 45%, transparent) var(--teil)); color: var(--text); }
.z.grenze::before { content: ""; position: absolute; left: -3px; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--a3); }
.ip-zeile-ip .z { height: 34px; font-size: 15px; font-weight: 700; }
.ip-dez { text-align: center; font: 700 15px var(--mono); color: var(--text); }
.ip-zeile:not(.ip-zeile-ip) .ip-dez { color: var(--leise); font-weight: 500; }

/* [Lauf 2 entfernt/ersetzt]
(* Bereichsbalken *)
.ip-balken-block { margin-top: 18px; padding-top: 34px; }
.ip-balken { position: relative; height: 30px; }
.ip-balken-teile { display: flex; gap: 3px; height: 100%; }
.bt { border-radius: 7px; }
.bt.rand { width: 18px; flex: none; background: color-mix(in srgb, var(--a1) 55%, transparent); }
.bt.mitte { flex: 1; background: color-mix(in srgb, var(--a2) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a2) 35%, transparent); }
.bt.voll { background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 40%, transparent), color-mix(in srgb, var(--a2) 40%, transparent)); }
.ip-zeiger { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--a3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a3) 25%, transparent); transition: left var(--dauer) var(--kurve); }
.ip-zeiger span { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 14px var(--mono);
  color: var(--a3); background: var(--flaeche); padding: 2px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--a3) 40%, transparent); }
.ip-zeiger.links span { left: -4px; transform: none; } .ip-zeiger.rechts span { left: auto; right: -4px; transform: none; }
.ip-balken-ende { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font: 500 14px var(--mono); color: var(--leise); }
.ip-balken-ende span:nth-child(2) { font-family: var(--schrift); color: var(--sehr-leise); text-align: center; }
.ip-balken-ende span:last-child { text-align: right; }

(* Adressraum-Streifen: ganze 2³² Adressen, Sonderbereiche als Flächen, aktuelles Netz als pinke Marke *)
.ip-raum-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ip-raum-kopf .feld-label { margin: 0; }
.ip-raum { position: relative; height: 16px; border-radius: 6px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; }
.rs { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--farbe) 45%, transparent); min-width: 2px; }
.rs-reserviert, .rs-dieses { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--farbe) 35%, transparent) 0 4px, transparent 4px 8px); }
.rs-marke { position: absolute; top: -2px; bottom: -2px; background: var(--a3); border-radius: 2px; box-shadow: 0 0 0 2px var(--flaeche), 0 0 10px var(--a3); transition: left var(--dauer) var(--kurve), width var(--dauer) var(--kurve); }
.ip-raum-skala { position: relative; height: 16px; margin-top: 4px; }
.ip-raum-skala span { position: absolute; transform: translateX(-50%); font: 500 12px var(--mono); color: var(--sehr-leise); }
.ip-raum-skala span:first-child { transform: none; } .ip-raum-skala span:last-child { transform: translateX(-100%); }
.ip-raum-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--leise); }
.ip-raum-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ip-raum-legende span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.lg-privat::before { background: color-mix(in srgb, var(--a1) 55%, transparent); } .lg-cgnat::before { background: color-mix(in srgb, var(--a2) 55%, transparent); }
.lg-multi::before { background: color-mix(in srgb, var(--a3) 55%, transparent); } .lg-res::before { background: color-mix(in srgb, var(--leise) 45%, transparent); }
*/

/* Werte: ersetzt durch den Ergebnisblock oben (.ip-haupt / .erg-liste) */
/* [Lauf 2 entfernt/ersetzt]
@media (min-width: 1000px) {
  .ip-werte .werte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ip-werte .wert.breit { grid-column: span 2; }
}
.wert.zahl-akzent .wert-zahl { color: var(--a2); font-weight: 700; }
.ip-werte .werte.v6 .wert-zahl { font-size: 19px; }
.ip-werte .werte.v6 .wert.haupt .wert-zahl { font-size: 26px; }
*/
/* Aufteilen */
.ip-teilen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ip-stepper { display: flex; align-items: center; gap: 6px; }
.ip-stepper .feld-rahmen { width: 110px; }
.ip-stepper input { font-size: 22px; text-align: center; padding: 8px; }
.ip-stepper .ikon-knopf { width: 44px; height: 44px; font: 700 22px var(--mono); padding: 0; }
.ip-teil-ergebnis { display: flex; flex-direction: column; margin-left: auto; text-align: right; }
.ip-teil-ergebnis b { font: 700 28px/1.1 var(--titel); color: var(--a2); }
.ip-teil-ergebnis span { color: var(--leise); font-size: 15px; }
/* [Lauf 2 entfernt: Teilnetz-Balken]
.ip-teil-balken { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 3px; height: 26px; margin: 16px 0 12px; }
.ip-teil-balken .tb { border: 0; padding: 0; border-radius: 5px; background: color-mix(in srgb, var(--a2) 26%, transparent); transition: background .2s, transform .2s; }
.ip-teil-balken .tb:nth-child(even) { background: color-mix(in srgb, var(--a2) 16%, transparent); }
.ip-teil-balken .tb:hover { background: color-mix(in srgb, var(--a2) 50%, transparent); }
.ip-teil-balken .tb.hier { background: var(--a3); }
*/
.ip-tabelle-rahmen { max-height: 360px; overflow: auto; border-radius: var(--r); border: 1px solid var(--linie); }
.ip-tabelle { width: 100%; border-collapse: collapse; font: 500 15px var(--mono); }
.ip-tabelle th { position: sticky; top: 0; background: var(--flaeche-2); text-align: left; font: 700 13px var(--schrift); color: var(--leise); padding: 9px 12px; letter-spacing: .02em; }
.ip-tabelle td { padding: 6px 12px; border-top: 1px solid var(--linie); white-space: nowrap; }
.ip-tabelle td:first-child { color: var(--sehr-leise); width: 1%; }
.ip-tabelle tr.hier td { background: color-mix(in srgb, var(--a3) 10%, transparent); }
.ip-laden { border: 0; background: none; padding: 2px 0; font: inherit; color: var(--a1); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--a1) 35%, transparent); text-underline-offset: 3px; }
.ip-hier { margin-left: 8px; font: 700 11px var(--schrift); text-transform: uppercase; letter-spacing: .06em; background: var(--a3); color: #fff; padding: 2px 7px; border-radius: 99px; }
.ip-teil-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.ip-leise { color: var(--sehr-leise); font-size: 14px; }

/* Adressliste */
/* [Lauf 2 ersetzt: <details> → Kasten (fb-faltbar)]
.ip-liste { padding-top: 6px; padding-bottom: 6px; }
.ip-liste summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; }
.ip-liste summary::-webkit-details-marker { display: none; }
.ip-liste summary::after { content: "+"; margin-left: auto; font: 500 24px/1 var(--mono); color: var(--sehr-leise); transition: transform .25s var(--kurve); }
.ip-liste details[open] summary::after { transform: rotate(45deg); }
*/
.ip-liste-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 10px; max-height: 320px; overflow: auto; margin-top: 6px;
  font: 500 15px var(--mono); padding: 10px; border-radius: var(--r); background: var(--flaeche-2); }
.ip-adr { display: flex; gap: 8px; align-items: baseline; }
.ip-adr i { font-style: normal; font-size: 12px; color: var(--sehr-leise); min-width: 2.6em; text-align: right; }
.ip-adr.rand { color: var(--a1); } .ip-adr.hier { color: var(--a3); font-weight: 700; }

/* ── Über dieses Tool (Tool-Profil, SEO/GEO) und Hilfe & Infos ── */
.tool-profil { margin-top: 18px; padding: 20px; border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); min-width: 0; }
.tool-profil-titel { margin: 0 0 10px; font: 700 15px/1.2 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); display: flex; align-items: center; gap: 9px; }
.tool-profil-titel::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--a1); }
.tool-profil h3 { margin: 18px 0 8px; font: 700 16px/1.3 var(--schrift); color: var(--text); }
.tool-profil p { margin: 0 0 10px; color: var(--leise); line-height: 1.6; max-width: 80ch; }
.tool-profil-einl { color: var(--text); }
.tool-profil-liste { margin: 0; padding: 0 0 0 20px; color: var(--leise); line-height: 1.55; display: grid; gap: 4px; max-width: 80ch; }
.tool-profil-faq { display: grid; gap: 8px; margin-top: 8px; }
.tool-profil-faq details { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); padding: 0 16px; }
.tool-profil-faq summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.tool-profil-faq summary::-webkit-details-marker { display: none; }
.tool-profil-faq summary::after { content: "+"; margin-left: auto; font: 500 22px/1 var(--mono); color: var(--sehr-leise); transition: transform 0.25s var(--kurve); }
.tool-profil-faq details[open] summary::after { transform: rotate(45deg); }
.tool-profil-faq details p { margin: 0 0 14px; }
.tool-profil + .wissen { margin-top: 18px; }

/* ── Desktop (≥ 761 px): Ergebnis als Zeilen — Bezeichnung links, Wert in der Mitte, Kopierknopf rechts ── */
@media (min-width: 761px) {
  .erg-liste .wert.zeile { grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 0 14px; padding: 9px 10px 9px 16px; }
  .erg-liste .wert.zeile .wert-label { grid-column: 1; grid-row: 1 / span 2; white-space: normal; }
  .erg-liste .wert.zeile .wert-zahl { grid-column: 2; grid-row: 1; }
  .erg-liste .wert.zeile .wert-zusatz { grid-column: 2; grid-row: 2; }
  .erg-liste .wert.zeile .kopier { grid-column: 3; grid-row: 1 / span 2; }
  .ip-eingabe, .ip-ergebnis { padding: 22px; }
}

/* ── Handy (≤ 760 px): eine Spalte, Eingabe zuerst; Bezeichnung über dem Wert ── */
@media (max-width: 760px) {
  .kopf-glyphe { width: 70px; }
  .kopf-glyphe img { width: 58px; max-height: 38px; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}
@media (max-width: 640px) {
  .ip-raster { gap: 10px; }
  .ip-feld input { font-size: 22px; padding: 12px; }
  .ip-praefix-wert { font-size: 34px; }
  /* (entfernt, Lauf 2) .ip-maske-text { font-size: 16px; } */
  .ip-zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* (entfernt, Lauf 2) Bit-Karte blendete am Handy Netz und Broadcast aus — jetzt zeigen Handy und Desktop dieselben Zeilen:
     .ip-karte:not(.v6) .ip-zeile-netz, .ip-karte:not(.v6) .ip-zeile-bc { display: none; } */
  .z { font-weight: 500; }
  .ip-zeile-label { padding-top: 0; font-size: 13px; }
  .ip-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .ip-karte.v6 .ip-gruppen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; }
  .z { height: 26px; font-size: 13px; border-radius: 4px; }
  .ip-zeile-ip .z { height: 28px; font-size: 13px; }
  .ip-dez { font-size: 13px; }
  .ip-karte { gap: 12px; }
  .ip-teil-ergebnis { margin-left: 0; text-align: left; width: 100%; }
  .ip-tabelle { font-size: 13px; }
  .ip-tabelle td, .ip-tabelle th { padding: 6px 8px; }
  .ip-legende span { font-size: 12px; }
  .ip-legende { justify-content: flex-start; }
  .ip-haupt .wert.haupt { padding: 14px 8px 14px 16px; }
  .ip-haupt .wert.haupt .wert-zahl { font-size: 26px; }
  .ip-haupt.v6 .wert.haupt .wert-zahl { font-size: 20px; }
  .erg-liste .wert-zahl { font-size: 18px; }
  .erg-liste .wert.zahl-akzent .wert-zahl { font-size: 22px; }
  /* (entfernt, Lauf 2) Beispiel-Chips scrollten seitlich; bei vier Chips genügt der Umbruch:
     .ip-beispiele .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }  .ip-beispiel { flex: none; } */
  /* (entfernt, Lauf 2) .ip-balken-ende … (Bereichsbalken) */
}