/* Kontoseiten: Anmeldung, Kennwort, Verwaltung (baut auf style.css auf) */
.konto { max-width: 760px; padding-top: 56px; padding-bottom: 100px; }
/* Navigation: eine Leiste unter dem Kopf, bündig mit der Inhaltsspalte (760 px, im Seitenbaum und Editor 920 px) */
.k-nav { border-bottom: 1px solid var(--rule); }
.k-nav .wrap { max-width: 760px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding-top: 12px; padding-bottom: 12px; }
body:has(.r-baum, .r-editor) .k-nav .wrap { max-width: 920px; }
.k-nav a { color: var(--soft); text-decoration: none; font: 500 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 8px 0 6px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.k-nav a:hover, .k-nav a:focus-visible { color: var(--volt); }
.k-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--volt); }
.k-nav form { margin-left: auto; }
.k-nav button { padding: 7px 14px; background: none; border: 1px solid var(--rule); color: var(--soft); font: 500 .75rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; }
.k-nav button:hover, .k-nav button:focus-visible { color: var(--volt); border-color: var(--volt); }
.konto h1 { font: 300 clamp(2rem, 5.5vw, 3.4rem)/1.05 var(--display); text-transform: uppercase; color: var(--ink); margin-bottom: 22px; }
.konto h1 b { font-weight: 700; color: #fff; }
/* Verweise wie auf der übrigen Seite: ruhig, mit feiner Linie, beim Überfahren hellblau */
.konto a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.konto a:hover, .konto a:focus-visible { color: var(--volt); border-color: var(--volt); }
.konto .tiles a, .konto .tiles a:hover { border-bottom: 0; padding-bottom: 22px; }
.konto p { margin-bottom: 1em; }
.k-form { max-width: 420px; margin: 26px 0; }
.k-form label { display: block; margin-bottom: 18px; color: var(--soft); font-size: .85rem; letter-spacing: .04em; }
.k-form label small { color: var(--soft); opacity: .8; }
.k-form input[type=email], .k-form input[type=password] { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; background: var(--panel); border: 1px solid var(--rule); color: #fff; font: 400 1.05rem/1.2 inherit; outline: 0; }
.k-form input:focus { border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt); }
.k-form button, .k-tab button { padding: 13px 24px; background: none; border: 1px solid var(--volt); color: #fff; font: 500 .95rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.k-form button:hover, .k-form button:focus-visible, .k-tab button:hover, .k-tab button:focus-visible { background: rgba(159, 212, 255, .1); }
.k-klein { color: var(--soft); font-size: .9rem; }
.k-ok, .k-fehler, .k-warten { padding: 14px 18px; background: var(--panel); border: 1px solid var(--rule); border-left: 2px solid #5fe08a; }
.k-fehler { border-left-color: #ff6b57; color: #ffd9d3; }
.k-warten { border-left-color: var(--hot); }
.k-tab { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--rule); margin: 26px 0; font-size: .95rem; }
.k-tab th, .k-tab td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--rule); vertical-align: middle; }
.k-tab thead th { border-top: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); font-weight: 400; }
.k-tab small { color: var(--hot); margin-left: 6px; }
.k-tab form { display: inline-block; margin: 2px 6px 2px 0; }
.k-tab button { padding: 8px 12px; font-size: .78rem; }
.k-tab .k-sperren, .k-tab .k-loeschen { border-color: var(--rule); color: var(--soft); }
.k-s-wartet { color: var(--hot); } .k-s-frei { color: #5fe08a; } .k-s-gesperrt { color: #ff6b57; }
@media (max-width: 640px) { .k-tab thead { display: none; } .k-tab td { display: block; border-top: 0; padding: 4px 14px; } .k-tab tr { display: block; border-top: 1px solid var(--rule); padding: 10px 0; } }
.konto h2 { font: 500 1.5rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin: 2.2em 0 .5em; }
.k-tab tr[hidden] { display: none; }
.k-tab .k-gruppe th { padding: 16px 14px 8px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hot); font-weight: 400; }
.k-pfad { color: var(--soft); font-size: .8rem; }
.k-suche { display: block; max-width: 420px; color: var(--soft); font-size: .85rem; }
.k-suche input { display: block; width: 100%; margin-top: 6px; padding: 11px 14px; background: var(--panel); border: 1px solid var(--rule); color: #fff; font: 400 1rem/1.2 inherit; outline: 0; }
.k-suche input:focus { border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt); }
.k-tab td a { border-bottom: 0; }

/* Zugriffsstatistik */
.k-wahl a, .k-wahl b { margin-right: 10px; }
.k-kennzahlen { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0; }
.k-kennzahlen b { font-size: 1.6rem; font-weight: 600; margin-right: 6px; color: #fff; }
.k-balken-reihe { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-bottom: 28px; margin: 10px 0 0; overflow-x: auto; }
.k-balken { flex: 1 1 0; min-width: 14px; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.k-balken i { display: block; background: rgba(159, 212, 255, .35); min-height: 1px; position: relative; }
.k-balken i b { display: block; position: absolute; left: 0; right: 0; bottom: 0; background: var(--volt); }
/* Balkenhöhe in Prozent als Klasse (k-h0 … k-h100): die Seite kommt so ohne eingebettete Stile aus (CSP ohne 'unsafe-inline') */
.k-h0{height:0%}.k-h1{height:1%}.k-h2{height:2%}.k-h3{height:3%}.k-h4{height:4%}.k-h5{height:5%}.k-h6{height:6%}.k-h7{height:7%}.k-h8{height:8%}.k-h9{height:9%}
.k-h10{height:10%}.k-h11{height:11%}.k-h12{height:12%}.k-h13{height:13%}.k-h14{height:14%}.k-h15{height:15%}.k-h16{height:16%}.k-h17{height:17%}.k-h18{height:18%}.k-h19{height:19%}
.k-h20{height:20%}.k-h21{height:21%}.k-h22{height:22%}.k-h23{height:23%}.k-h24{height:24%}.k-h25{height:25%}.k-h26{height:26%}.k-h27{height:27%}.k-h28{height:28%}.k-h29{height:29%}
.k-h30{height:30%}.k-h31{height:31%}.k-h32{height:32%}.k-h33{height:33%}.k-h34{height:34%}.k-h35{height:35%}.k-h36{height:36%}.k-h37{height:37%}.k-h38{height:38%}.k-h39{height:39%}
.k-h40{height:40%}.k-h41{height:41%}.k-h42{height:42%}.k-h43{height:43%}.k-h44{height:44%}.k-h45{height:45%}.k-h46{height:46%}.k-h47{height:47%}.k-h48{height:48%}.k-h49{height:49%}
.k-h50{height:50%}.k-h51{height:51%}.k-h52{height:52%}.k-h53{height:53%}.k-h54{height:54%}.k-h55{height:55%}.k-h56{height:56%}.k-h57{height:57%}.k-h58{height:58%}.k-h59{height:59%}
.k-h60{height:60%}.k-h61{height:61%}.k-h62{height:62%}.k-h63{height:63%}.k-h64{height:64%}.k-h65{height:65%}.k-h66{height:66%}.k-h67{height:67%}.k-h68{height:68%}.k-h69{height:69%}
.k-h70{height:70%}.k-h71{height:71%}.k-h72{height:72%}.k-h73{height:73%}.k-h74{height:74%}.k-h75{height:75%}.k-h76{height:76%}.k-h77{height:77%}.k-h78{height:78%}.k-h79{height:79%}
.k-h80{height:80%}.k-h81{height:81%}.k-h82{height:82%}.k-h83{height:83%}.k-h84{height:84%}.k-h85{height:85%}.k-h86{height:86%}.k-h87{height:87%}.k-h88{height:88%}.k-h89{height:89%}
.k-h90{height:90%}.k-h91{height:91%}.k-h92{height:92%}.k-h93{height:93%}.k-h94{height:94%}.k-h95{height:95%}.k-h96{height:96%}.k-h97{height:97%}.k-h98{height:98%}.k-h99{height:99%}
.k-h100{height:100%}
.k-balken span { position: absolute; top: 100%; left: 0; right: 0; font-size: .62rem; color: var(--soft); text-align: center; white-space: nowrap; overflow: hidden; margin-top: 4px; transform: rotate(0); }
.k-balken:nth-child(even) span { visibility: hidden; }
@media (min-width: 700px) { .k-balken:nth-child(even) span { visibility: visible; } }
.k-zahl { text-align: right; white-space: nowrap; }
.k-schmal { max-width: 480px; }

/* Seitenbaum: eine Zeile je Seite, Schalter direkt daneben */
.konto:has(.r-baum) { max-width: 920px; }
.r-baum, .r-baum ul { list-style: none; margin: 0; padding: 0; }
.r-baum { margin: 18px 0 26px; background: var(--panel); border: 1px solid var(--rule); padding: 8px 16px; }
.r-baum ul { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--rule); }
.r-baum li[hidden] { display: none; }
.r-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 0; border-top: 1px solid rgba(159, 212, 255, .06); }
.r-baum > li:first-child > .r-zeile { border-top: 0; }
.r-name { flex: 1 1 220px; min-width: 0; }
.r-name a { border-bottom: 0; }
.r-neu > .r-zeile .r-name a { color: var(--volt); }
.r-warn { display: inline-block; margin-left: 8px; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: rgba(255, 194, 74, .18); color: var(--hot); font-size: .75rem; font-weight: 700; cursor: help; }
.r-knoepfe { display: flex; align-items: center; gap: 6px; }
.r-pfeil { width: 34px; height: 34px; background: none; border: 1px solid var(--rule); color: var(--ink); font-size: 1rem; cursor: pointer; }
.r-pfeil:hover, .r-pfeil:focus-visible { border-color: var(--volt); color: #fff; }
.r-pfeil:disabled { opacity: .25; cursor: default; border-color: var(--rule); }
.r-schalter { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; background: none; border: 1px solid transparent; color: var(--soft); cursor: pointer; }
.r-schalter:hover, .r-schalter:focus-visible { border-color: var(--rule); color: var(--ink); }
.r-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.r-bahn { position: relative; display: inline-block; width: 34px; height: 18px; border-radius: 9px; background: rgba(138, 151, 171, .3); transition: background .15s; }
.r-kugel { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--soft); transition: left .15s, background .15s; }
.r-schalter[aria-checked="true"] .r-kugel { left: 18px; }
.r-sicht[aria-checked="true"] { color: #5fe08a; } .r-sicht[aria-checked="true"] .r-bahn { background: rgba(95, 224, 138, .35); } .r-sicht[aria-checked="true"] .r-kugel { background: #5fe08a; }
.r-sicht[aria-checked="false"] { color: var(--hot); }
.r-such[aria-checked="true"] { color: var(--volt); } .r-such[aria-checked="true"] .r-bahn { background: rgba(159, 212, 255, .35); } .r-such[aria-checked="true"] .r-kugel { background: var(--volt); }
.r-wirkungslos { opacity: .45; }
@media (max-width: 560px) { .r-knoepfe { width: 100%; flex-wrap: wrap; gap: 4px; } .r-baum { padding: 6px 10px; } .r-baum ul { margin-left: 2px; padding-left: 8px; } .r-schalter { padding: 0 4px; gap: 4px; } .r-pfeil { width: 32px; } }

/* Seitenbaum: Bearbeiten, neue Seite */
.r-ansehen { margin-left: 4px; font-size: .85rem; color: var(--soft); }
.r-entwurf { color: var(--volt); border-color: rgba(159, 212, 255, .4); }
.r-neue .r-name { color: var(--soft); font-size: .85rem; }
.r-neue input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--rule); color: #fff; font: 400 .95rem/1.2 inherit; }
.r-anlegen { height: 34px; padding: 0 14px; background: none; border: 1px solid var(--volt); color: #fff; cursor: pointer; }

/* Seiteneditor */
.konto:has(.r-editor) { max-width: 920px; }
.r-feld { display: block; margin: 0 0 20px; color: var(--soft); font-size: .85rem; letter-spacing: .03em; }
.r-feld small { color: var(--soft); opacity: .85; }
.r-feld input, .r-feld textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; background: var(--panel); border: 1px solid var(--rule); color: #fff; font: 400 1rem/1.55 inherit; outline: 0; resize: vertical; }
.r-feld input:focus, .r-feld textarea:focus { border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt); }
.r-feld textarea.r-text { font: 400 .95rem/1.6 ui-monospace, Consolas, "Courier New", monospace; min-height: 26em; }
.r-werkzeug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.r-werkzeug button { height: 36px; padding: 0 12px; background: none; border: 1px solid var(--rule); color: var(--ink); font: 400 .9rem/1 inherit; cursor: pointer; }
.r-werkzeug button:hover, .r-werkzeug button:focus-visible { border-color: var(--volt); color: #fff; }
.r-haken { display: flex; gap: 10px; align-items: center; margin: 0 0 20px; color: var(--ink); font-size: .95rem; }
.r-haken input { width: 18px; height: 18px; }
.r-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 26px; }
.r-aktionen button, .r-veroeff button, .r-verwerfen button, .r-fassungen button { padding: 12px 20px; background: none; border: 1px solid var(--rule); color: var(--ink); font: 500 .9rem/1 var(--display); letter-spacing: .06em; cursor: pointer; }
.r-aktionen button:hover, .r-aktionen button:focus-visible, .r-veroeff button:hover, .r-veroeff button:focus-visible, .r-verwerfen button:hover, .r-verwerfen button:focus-visible, .r-fassungen button:hover, .r-fassungen button:focus-visible { border-color: var(--volt); color: #fff; }
.r-veroeff { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--rule); background: var(--panel); }
.r-veroeff legend { padding: 0 8px; color: var(--hot); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.r-veroeff button.r-haupt { border-color: var(--volt); color: #fff; }
.r-veroeff button.r-haupt:hover, .r-veroeff button.r-haupt:focus-visible { background: rgba(159, 212, 255, .1); }
.r-verwerfen { margin-bottom: 30px; }
.r-verwerfen button { color: var(--soft); }
.r-hilfe { margin: 0 0 22px; color: var(--soft); font-size: .9rem; }
.r-hilfe summary { cursor: pointer; }
.r-hilfe code { color: var(--ink); }
.r-fassungen { list-style: none; padding: 0; margin: 0 0 20px; }
.r-fassungen li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); }
.r-fassungen small { color: #5fe08a; }
.r-fassung-knoepfe { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.r-fassungen button { padding: 7px 12px; font-size: .78rem; }
.r-diff pre { overflow-x: auto; padding: 12px; background: var(--panel); border: 1px solid var(--rule); font: .85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.r-dp { color: #5fe08a; } .r-dm { color: #ff8f80; } .r-dg { color: var(--soft); }
.r-vorschau-band { position: sticky; top: 0; z-index: 100; margin: 0; padding: 10px 16px; background: var(--hot); color: #05070c; font: 600 .9rem/1.2 sans-serif; text-align: center; }
/* Marken im Seitenbaum, Verweisprüfung, Löschen, Papierkorb */
.r-marke { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--rule); font-size: .72rem; letter-spacing: .06em; color: var(--soft); vertical-align: 1px; }
.r-linkwarn { color: var(--hot); border-color: rgba(255, 194, 74, .45); cursor: help; }
.r-verweise { margin: 0 0 22px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--rule); border-left: 2px solid var(--hot); font-size: .92rem; }
.r-verweise ul { margin: 6px 0 0 18px; }
.r-loeschen { margin: 0 0 30px; color: var(--soft); }
.r-loeschen summary { cursor: pointer; font-size: .9rem; }
.r-loeschen button { padding: 10px 18px; background: none; border: 1px solid #ff6b57; color: #ffd9d3; font: 500 .85rem/1 var(--display); letter-spacing: .06em; cursor: pointer; }
.r-loeschen button:hover, .r-loeschen button:focus-visible { background: rgba(255, 107, 87, .14); color: #fff; }
.r-korb { list-style: none; padding: 0; margin: 0 0 26px; }
.r-korb li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); }
.r-korb small { color: var(--soft); }
.r-korb button { padding: 7px 12px; background: none; border: 1px solid var(--rule); color: var(--ink); font: 500 .78rem/1 var(--display); letter-spacing: .06em; cursor: pointer; }
.r-korb button:hover, .r-korb button:focus-visible { border-color: var(--volt); color: #fff; }
/* Kopf des Seitenbaums und Hilfeseite */
.r-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; }
.r-kopf .k-suche { flex: 1 1 260px; }
.r-hilfe-link { margin-bottom: 12px; }
.r-inhalt { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 10px; font-size: .9rem; }
.r-hilfeseite h2 { scroll-margin-top: 80px; }
.r-hilfeseite ol { margin: 0 0 1em 1.3em; }
.r-hilfeseite li { margin-bottom: .4em; }
.r-erklaert { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 10px 20px; align-items: center; margin: 14px 0 24px; }
.r-erklaert dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--ink); }
.r-erklaert dd { margin: 0; color: var(--soft); }
.r-erklaert .r-schalter { cursor: default; }
.r-erklaert .r-marke, .r-erklaert .r-warn { margin-left: 0; }
.r-zeichen { display: inline-block; min-width: 34px; padding: 4px 8px; border: 1px solid var(--rule); text-align: center; font-size: .9rem; }
.r-hilfeseite code { color: var(--ink); font: .9em/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.r-format td:first-child { width: 42%; }
@media (max-width: 560px) { .r-erklaert { grid-template-columns: 1fr; gap: 4px 0; } .r-erklaert dd { margin-bottom: 12px; } }
/* Bilder im Editor */
.r-bildform { margin: 12px 0 18px; padding: 16px 18px 4px; background: var(--panel); border: 1px solid var(--rule); }
.r-bildform input[type=file] { color: var(--ink); }
.r-bildform .r-aktionen { align-items: center; margin-bottom: 12px; }
.r-bildzeile code, .r-bildinfo code { color: var(--ink); font: .85rem/1.4 ui-monospace, Consolas, monospace; word-break: break-all; }
.r-bilder { list-style: none; padding: 0; margin: 0 0 26px; }
.r-bilder li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.r-bilder img { display: block; width: 96px; height: auto; border: 1px solid var(--rule); background: var(--panel); }
.r-bildinfo { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.r-bildinfo small { color: var(--soft); }
.r-bildknoepfe { display: flex; gap: 8px; align-items: center; }
.r-bildknoepfe button { padding: 7px 12px; background: none; border: 1px solid var(--rule); color: var(--ink); font: 500 .78rem/1 var(--display); letter-spacing: .06em; cursor: pointer; }
.r-bildknoepfe button:hover, .r-bildknoepfe button:focus-visible { border-color: var(--volt); color: #fff; }
.r-bildinfo .r-bild-ja { color: #5fe08a; } .r-bildinfo .r-bild-nein { color: var(--hot); }
/* Statistik: Filter für einzelne Zugriffe */
.k-filter { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 12px 0 8px; color: var(--soft); font-size: .9rem; }
.k-filter select { margin-left: 6px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--rule); color: #fff; font: inherit; }
.k-filter .r-haken { margin: 0; }
.k-filter button { padding: 9px 16px; background: none; border: 1px solid var(--volt); color: #fff; font: 500 .82rem/1 var(--display); letter-spacing: .06em; cursor: pointer; }
.k-filter button:hover, .k-filter button:focus-visible { background: rgba(159, 212, 255, .1); }
.konto h3 { font: 500 1.05rem/1.3 var(--display); letter-spacing: .04em; color: var(--ink); margin: 1.6em 0 .4em; }
.k-tab code { font: .9rem ui-monospace, Consolas, monospace; color: var(--ink); }