:root { --deko:#1a468e; --lab:#4e67aa; --ink:#231f20; --mute:#5b6270; --line:#d5dce6; --bg:#f4f6f9; --pri:#1a468e; --acc:#d9731a; --paper:#fff;
  --grad:linear-gradient(90deg, #fafcfd 0.0%, #cbe3ec 6.6%, #bbdae6 18.8%, #aac8de 35.2%, #98b5d4 41.8%, #86a3cb 48.4%, #7692c2 55.1%, #6683ba 61.7%, #5776b2 68.4%, #4969aa 75.0%, #3c5ea2 81.6%, #2f559b 88.3%, #234c93 94.9%, #1b468e 100.0%); }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:"Myriad Pro Condensed","Myriad Pro Cond","Myriad Pro","Roboto Condensed","Arial Narrow","Liberation Sans Narrow",system-ui,sans-serif;
  font-stretch:condensed; font-size:1.15rem; color:var(--ink); background:var(--bg); line-height:1.5; padding-bottom:3rem; }
a { color:var(--deko); } a:hover { color:var(--acc); }
.in { max-width:62rem; margin:0 auto; padding:0 1.2rem; }
.hero { background:var(--grad); }
.hero .in { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:9.5rem; }
.brand { text-decoration:none; color:var(--deko); display:block; }
.brand .b1 { display:block; font-weight:700; font-size:2.3rem; line-height:1.1; color:var(--deko); }
.brand .b2 { display:block; font-size:1.7rem; font-weight:700; line-height:1.15; color:var(--deko); }
.hero .lg { height:5.2rem; width:auto; flex:0 0 auto; }
nav.top { position:sticky; top:0; z-index:40; background:#fff; border-bottom:3px solid transparent; border-image:var(--grad) 1; box-shadow:0 2px 6px rgba(0,0,0,.08); }
nav.top .in { display:flex; flex-wrap:wrap; gap:.2rem 1.6rem; padding-top:.5rem; padding-bottom:.5rem; }
nav.top a { text-decoration:none; color:var(--deko); font-weight:700; font-size:1.15rem; }
nav.top a:hover { color:var(--acc); }
.wrap { max-width:62rem; margin:0 auto; padding:2rem 1.2rem 2rem; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.box { background:var(--paper); border:1px solid var(--line); border-radius:.5rem; padding:1.2rem 1.4rem; scroll-margin-top:4.5rem; }
.box h2, .doc h1, .doc h2 { color:var(--deko); }
.box h2 { margin:0 0 .6rem; font-size:1.4rem; }
.box p { margin:.4rem 0; }
.lab { color:var(--lab); display:inline-block; min-width:4.2rem; }
.btn { display:inline-block; margin-top:.6rem; padding:.55rem 1.2rem; border-radius:.4rem; background:var(--deko); color:#fff; text-decoration:none; font-weight:700; }
.btn:hover { background:#34589d; color:#fff; }
.small { font-size:.95rem; color:var(--mute); }
.doc { max-width:59.6rem; margin:2rem auto; padding:1.5rem 1.4rem 2rem; background:var(--paper); border:1px solid var(--line); border-radius:.5rem; }
@media (max-width:52rem) { .doc { margin:1rem; } }
.doc > h1:first-child { margin-top:0; }
.doc > * { max-width:50rem; }
.doc h2 { margin-top:1.8rem; font-size:1.35rem; }
.doc p.it { margin-left:1.4rem; text-indent:-1.4rem; }
.doc .stand { margin-top:2rem; color:var(--mute); }
.o { direction:rtl; unicode-bidi:bidi-override; display:inline-block; text-align:left; white-space:nowrap; }
#anliegen { grid-column:1/-1; }
.intro h1 { margin:0 0 .6rem; font-size:2.2rem; line-height:1.15; color:var(--deko); }
.lead { font-size:1.3rem; }
.pr { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 2rem; margin:1.2rem 0; }
.pr h3 { margin:0 0 .2rem; color:var(--deko); font-size:1.25rem; }
.pr p { margin:0; }
.cta { font-weight:700; }
a.x { text-decoration:none; } a.x .o { text-decoration:underline; }
.foot { position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:3px solid transparent; border-image:var(--grad) 1; font-size:1rem; }
.foot .in { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.2rem 1rem; padding-top:.4rem; padding-bottom:.4rem; color:var(--mute); }
.foot a { color:var(--deko); margin-right:1.2rem; text-decoration:none; } .foot a:hover { color:var(--acc); }
nav.top .mini { margin-left:auto; display:flex; align-items:center; gap:.5rem; opacity:0; visibility:hidden; transition:opacity .25s; color:var(--deko); font-weight:700; white-space:nowrap; }
nav.top.sc .mini { opacity:1; visibility:visible; }
nav.top .mini .mk { height:1.9rem; width:auto; }
/* Kontakt */
.kt h1 { margin:0 0 .4rem; font-size:2.1rem; line-height:1.15; color:var(--deko); }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; align-items:start; margin:1.2rem 0; }
.cards figure { margin:0; }
.vk { margin:0; border-radius:.5rem; box-shadow:0 2px 10px rgba(0,0,0,.22); overflow:hidden; background:#fff; }
.vk img { display:block; width:100%; height:auto; }
.cards figcaption { margin-top:.5rem; font-size:1rem; color:var(--mute); }
.vkw { min-width:0; }
.mine { container-type:inline-size; aspect-ratio:85/55; display:flex; flex-direction:column; }
.band2 { background:var(--grad); flex:0 0 40%; display:flex; justify-content:flex-end; align-items:center; padding:0 6%; }
.band2 img { height:70%; width:auto; }
.rows { flex:1; display:grid; grid-template-columns:34% 1fr; column-gap:3%; align-content:center; padding:0 6%; font-size:clamp(16px,3.4cqw,24px); line-height:1.25; }
.rows input { width:100%; min-width:0; font:inherit; color:var(--ink); border:0; border-bottom:1px dashed #b9c4d8; background:transparent; padding:.05em .1em; border-radius:0; }
.rows input:focus { outline:0; border-bottom-color:var(--deko); background:#f3f7fd; }
.rows .n input { font-weight:700; color:var(--deko); text-align:right; }
.rows .f input { font-weight:700; }
.rows .l { color:var(--lab); text-align:right; align-self:center; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.lk { background:none; border:0; padding:0; font:inherit; color:var(--deko); text-decoration:underline; cursor:pointer; }
.hint { margin-top:.7rem; padding:.6rem .8rem; background:#eaf1fb; border-left:4px solid var(--lab); border-radius:.3rem; font-size:1rem; }
.anl label { display:block; font-weight:700; color:var(--deko); margin-bottom:.3rem; }
.anl textarea { width:100%; font:inherit; padding:.6rem; border:1px solid #aeb9c3; border-radius:.4rem; background:#fff; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.send { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.send .btn { border:0; font:inherit; font-weight:700; cursor:pointer; }
.send .btn[disabled] { opacity:.6; cursor:wait; }
#msg.ok { color:#1b6b2f; font-weight:700; } #msg.err { color:#a3301a; font-weight:700; }
.kt .direkt { margin-top:1.5rem; }
@media (max-width:56rem) { .cards { grid-template-columns:1fr; } .mine { max-width:36rem; } .ours { max-width:36rem; } }
@media (max-width:40rem) {
  .mine { aspect-ratio:auto; }
  .band2 { flex:0 0 5rem; }
  .rows { grid-template-columns:4.6rem 1fr; padding:.9rem 1rem 1rem; row-gap:.35rem; }
  .rows .n, .rows .f { grid-column:1/-1; }
  .rows .n input { text-align:left; }
  .kt h1 { font-size:1.6rem; }
  .foot .in span:last-child { display:none; }
}
/* Board-Kopf */
.band { background:var(--grad); flex:0 0 auto; }
.band .in { max-width:none; display:flex; align-items:center; gap:1rem; min-height:3.2rem; }
.band .back { color:var(--deko); font-weight:700; text-decoration:none; }
.band .bt { font-weight:700; font-size:1.3rem; color:var(--deko); }
.band .lg { height:2.4rem; margin-left:auto; }
body.board { padding-bottom:0; font-size:1rem; }
body.board .foot { position:static; flex:0 0 auto; }
@media (max-width:40rem) { .grid, .pr { grid-template-columns:1fr; } .brand .b2 { font-size:1.4rem; } .hero .lg { height:3rem; } .hero .in { min-height:7rem; } body { font-size:1.05rem; } }
/* ---------- Board ---------- */
body.board { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.bbar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); padding: .4rem .7rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bbar .logo { margin-right: .6rem; }
.tools { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-left: auto; }
.tb {
  font: inherit; font-size: .95rem; min-height: 2.5rem; min-width: 2.5rem; padding: .3rem .8rem;
  border: 1px solid var(--deko); background: var(--deko); color: #fff; border-radius: .4rem; cursor: pointer;
}
.tb:hover { background: #34589d; }
.tb.on { background: var(--acc); border-color: var(--acc); }
.tb[hidden] { display: none; }
#st { font-size: .8rem; color: var(--mute); margin-left: .5rem; }
#tabs { display: flex; gap: .25rem; overflow-x: auto; flex: 1 1 auto; align-items: flex-end; padding-top: .2rem; }
.tab {
  font: inherit; padding: .45rem 1rem; border: 0; border-radius: .4rem .4rem 0 0; cursor: pointer;
  background: #dfe8f3; color: var(--deko); white-space: nowrap; min-height: 2.5rem;
}
.tab small { opacity: .7; margin-left: .4rem; }
.tab.act { background: var(--bg); color: var(--ink); font-weight: 600; }
.tab.plus { background: transparent; color: var(--deko); border: 1px dashed var(--lab); }

#stage { flex: 1 1 auto; overflow: auto; background: var(--bg); position: relative; }
#canvas { position: relative; width: max-content; min-width: 100%; min-height: 100%; font-size: 16px; }
#lk { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 20; }
#lk .hit { stroke: transparent; stroke-width: 16; fill: none; pointer-events: stroke; cursor: pointer; }
#lk .ln { stroke: #3b4a57; stroke-width: 2.2; fill: none; pointer-events: none; }
#lk text { font-size: 13px; fill: #17232e; paint-order: stroke; stroke: #f4f6f8; stroke-width: 4px; pointer-events: none; }

.card {
  position: relative; background: #fff3a8; border-radius: .5em; padding: .6em 2.4em .6em .8em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab; min-height: 2.6em; word-break: break-word; font-size: 1em;
}
.card .ct { white-space: pre-wrap; }
.card .cn { font-size: .8em; color: #44525e; margin-top: .3em; white-space: pre-wrap; }
.card .eb {
  position: absolute; top: .2em; right: .2em; width: 2em; height: 2em; border: 0; border-radius: .3em;
  background: rgba(255, 255, 255, .55); cursor: pointer; font-size: 1em; line-height: 1;
}
.card .eb:hover { background: #fff; }
.card.drag { z-index: 50; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); cursor: grabbing; }
.card.lf { outline: 3px solid var(--acc); }
body.linkmode .card { cursor: crosshair; }

.kb { display: flex; gap: 1em; padding: 1em; align-items: flex-start; min-height: 100%; }
.col { flex: 0 0 17em; background: #e3e9ef; border-radius: .6em; padding: .5em; }
.colh { display: flex; align-items: center; gap: .4em; padding: .2em .3em .5em; font-weight: 600; }
.colh .tt { flex: 1 1 auto; }
.colh .cnt { font-weight: 400; color: var(--mute); font-size: .85em; }
.colh button, .sw .lh button { border: 0; background: transparent; cursor: pointer; font-size: 1em; min-width: 2em; min-height: 2em; }
.colb { min-height: 5em; display: flex; flex-direction: column; gap: .5em; border-radius: .4em; padding: .2em; }
.over { background: rgba(217, 115, 26, .18); }
.addc { margin-top: .4em; width: 100%; border: 1px dashed #9aa9b6; background: transparent; border-radius: .4em; min-height: 2.4em; cursor: pointer; color: var(--mute); }

.sw { display: grid; gap: 4px; padding: 1em; align-content: start; }
.sw .ch, .sw .lh { background: #cfd9e2; font-weight: 600; padding: .5em .7em; border-radius: .4em; display: flex; align-items: center; gap: .3em; }
.sw .ch span, .sw .lh span { flex: 1 1 auto; }
.sw .cell { background: #e9eef3; min-height: 8em; padding: .4em; display: flex; flex-direction: column; gap: .5em; border-radius: .4em; }

.net { position: relative; min-height: 100%; background-image: radial-gradient(#c3ccd5 1px, transparent 1px); background-size: 2em 2em; }
.card.abs { position: absolute; width: 12em; }

.gt { padding: 1em; position: relative; }
.grow { display: flex; height: 3.2em; border-bottom: 1px solid var(--line); background: #fff; }
.ghead { height: 4.2em; background: #e3e9ef; }
.glab { flex: 0 0 13em; position: sticky; left: 0; z-index: 6; background: #fff; padding: 0 .5em; display: flex; align-items: center; gap: .4em; overflow: hidden; border-right: 1px solid var(--line); }
.ghead .glab { background: #e3e9ef; font-weight: 600; }
.glab span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glab button { border: 0; background: transparent; cursor: pointer; font-size: 1em; min-width: 2em; min-height: 2em; }
.gtrack { position: relative; flex: 0 0 auto; height: 100%; background-image: linear-gradient(90deg, transparent 0 11em, rgba(0, 0, 0, .06) 11em 15.4em), linear-gradient(90deg, rgba(0, 0, 0, .09) 1px, transparent 1px); background-size: 15.4em 100%, 2.2em 100%; }
.ghead .gtrack { background: none; }
.gd { position: absolute; top: 0; width: 2.2em; height: 100%; text-align: center; font-size: .75em; line-height: 1.5; padding-top: 1.7em; }
.gd.we { color: #8a97a3; }
.gd.td { background: rgba(217, 115, 26, .25); }
.gd i { position: absolute; top: .1em; left: .2em; font-style: normal; font-weight: 700; white-space: nowrap; color: var(--pri); }
.gd b { display: block; font-size: 1.1em; }
.tline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--acc); opacity: .7; pointer-events: none; }
.bar { position: absolute; top: .3em; height: 2.6em; padding: 0 1em 0 .5em; display: flex; align-items: center; overflow: hidden; white-space: nowrap; min-height: 0; }
.bar .ct { overflow: hidden; text-overflow: ellipsis; font-size: .9em; }
.bar .rs { position: absolute; right: 0; top: 0; bottom: 0; width: .9em; cursor: ew-resize; background: rgba(0, 0, 0, .15); touch-action: none; }

dialog { border: 0; border-radius: .7rem; padding: 1.2rem 1.4rem; width: min(30rem, 94vw); box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
dialog::backdrop { background: rgba(10, 25, 35, .55); }
dialog h2 { margin: 0 0 .8rem; color: var(--pri); font-size: 1.2rem; }
dialog label { display: block; margin: .6rem 0 .2rem; font-size: .9rem; color: var(--mute); }
dialog input, dialog textarea, dialog select { width: 100%; font: inherit; padding: .5rem; border: 1px solid #aeb9c3; border-radius: .35rem; }
dialog .btns { display: flex; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; }
dialog .btns button { font: inherit; padding: .55rem 1rem; border-radius: .4rem; border: 1px solid #aeb9c3; background: #eef2f5; cursor: pointer; min-height: 2.5rem; }
dialog .btns .pri { background: var(--pri); color: #fff; border-color: var(--pri); }
dialog .btns .del { background: #fbe3e3; border-color: #e0a3a3; color: #8a1c1c; margin-left: auto; }
.swatches { display: flex; gap: .5rem; }
.swatches button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px #8a97a3; }
.swatches button.sel { border-color: var(--ink); }