/* ODB Designsystem 2026-11 – gilt für Website, Flyer (Druck-CSS) und Social-Vorlagen. Keine externen Schriften. */
:root{
  --ink:#0c2038; --ink-2:#2b3a4d; --muted:#55605c; --line:#dcd6ca; --line-2:#ebe6dc;
  --bg:#ffffff; --sand:#f5f2eb; --sand-2:#ece6da;
  --teal:#13365f; --teal-d:#0c2c4e; --teal-l:#e6edf5;
  --orange:#ff6b35; --orange-d:#b8470f; --orange-l:#fdeee4;
  --ok:#15803d; --warn:#a16207; --err:#b42318;
  --r:14px; --r-s:8px; --sh:0 1px 2px rgba(20,32,30,.06),0 8px 24px rgba(20,32,30,.08);
  --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --fm:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --w:1180px; --g:clamp(16px,4vw,32px);
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font:400 17px/1.6 var(--f);color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block} a{color:var(--teal-d);text-underline-offset:3px} a:hover{color:var(--orange-d)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:99} .skip:focus{left:8px}
h1,h2,h3,h4{line-height:1.18;margin:0 0 .5em;letter-spacing:-.01em;font-weight:750} h1{font-size:clamp(32px,5.2vw,56px)} h2{font-size:clamp(26px,3.4vw,38px)} h3{font-size:clamp(19px,2vw,23px)} p{margin:0 0 1em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--g)} .sec{padding:clamp(48px,8vw,96px) 0} .sec.sand{background:var(--sand)} .sec.ink{background:var(--ink);color:#e8efed} .sec.ink a{color:#9fd6cf}
.kicker{display:inline-block;font:700 13px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d);margin-bottom:14px} .sec.ink .kicker{color:#ffb38a}
.lead{font-size:clamp(18px,2vw,21px);color:var(--ink-2);max-width:60ch} .muted{color:var(--muted)} small,.small{font-size:14px}
/* Kopf */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line-2)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:68px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.02em}
.brand svg{width:34px;height:34px;flex:none} .brand span small{display:block;font-weight:500;font-size:12px;color:var(--muted);letter-spacing:0}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center} .nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:15px} .nav a:hover,.nav a[aria-current]{background:var(--teal-l);color:var(--teal-d)}
.nav .btn{margin-left:8px} .menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:600 15px var(--f)}
@media (max-width:980px){.nav{display:none;position:absolute;left:0;right:0;top:68px;background:#fff;flex-direction:column;align-items:stretch;padding:12px var(--g) 20px;border-bottom:1px solid var(--line)} .nav.open{display:flex} .nav a{padding:12px;border-radius:10px} .menu-btn{display:block}}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;background:var(--teal);color:#fff!important;text-decoration:none;font:700 16px/1 var(--f);padding:14px 22px;border-radius:999px;border:2px solid var(--teal);cursor:pointer;min-height:48px}
.btn:hover{background:var(--teal-d);border-color:var(--teal-d)} .btn.o{background:transparent;color:var(--teal-d)!important} .btn.o:hover{background:var(--teal-l)} .btn.acc{background:var(--orange);border-color:var(--orange);color:#1b0e05!important} .btn.acc:hover{background:#d4560f;border-color:#d4560f}
.btn.s{padding:10px 16px;font-size:15px;min-height:40px}
/* Brotkrumen */
.crumbs{font-size:14px;color:var(--muted);padding:14px 0 0} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .crumbs li+li:before{content:"›";margin-right:6px;color:var(--line)}
/* Hero */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff} .hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,22,21,.92) 0%,rgba(14,22,21,.72) 45%,rgba(14,22,21,.15) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(64px,10vw,120px);padding-bottom:clamp(56px,9vw,110px)} .hero h1{max-width:16ch} .hero .lead{color:#dfe9e6}
.hero .kicker{color:#ffb38a} .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.badge{display:inline-block;font:600 12.5px/1.3 var(--f);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:6px 12px;margin-top:22px}
.src-note{position:absolute;right:10px;bottom:8px;z-index:3;font:500 11.5px/1.3 var(--f);color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:6px;max-width:70%}
/* Raster und Karten */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column} .card .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card a.more{margin-top:auto;font-weight:700;text-decoration:none} .card figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)} .card figure img{width:100%;height:100%;object-fit:cover}
.card .tag{font:700 12px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-d)} .card .price{font-weight:700;color:var(--teal-d)}
.pill{display:inline-block;font:600 12.5px/1 var(--f);padding:6px 10px;border-radius:999px;background:var(--teal-l);color:var(--teal-d)} .pill.new{background:var(--orange-l);color:var(--orange-d)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{border-left:3px solid var(--orange);padding:4px 0 4px 16px} .stat b{display:block;font-size:clamp(24px,3vw,34px);line-height:1.1} .stat span{font-size:14.5px;color:var(--muted)} .sec.ink .stat span{color:#b9c9c5}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center} @media (max-width:860px){.split{grid-template-columns:1fr}}
.shot{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line-2);background:#fff;position:relative} .shot figcaption{font-size:13px;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line-2);background:#fff}
ul.check{list-style:none;padding:0;margin:0 0 1em} ul.check li{position:relative;padding-left:30px;margin:8px 0} ul.check li:before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--teal-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%230c2c4e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.steps{counter-reset:s;display:grid;gap:18px} .steps>div{counter-increment:s;position:relative;padding:18px 20px 18px 74px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r)} .steps>div:before{content:counter(s);position:absolute;left:18px;top:16px;width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;display:grid;place-items:center}
.note{border:1px solid #f1c9a9;background:var(--orange-l);border-radius:var(--r-s);padding:14px 16px;font-size:15px} .note.info{border-color:#bcd9d4;background:var(--teal-l)}
table.t{width:100%;border-collapse:collapse;font-size:15px} table.t th,table.t td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top} table.t th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .tbl{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r);background:#fff}
details.faq{border-bottom:1px solid var(--line);padding:6px 0} details.faq summary{cursor:pointer;font-weight:700;padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:12px} details.faq summary:after{content:"+";font-size:22px;color:var(--teal)} details.faq[open] summary:after{content:"–"}
/* Dateiübersicht */
.files{display:grid;gap:10px} .file{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--line-2);border-radius:12px}
.file .ext{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;font:800 11.5px var(--fm);color:#fff;background:var(--teal)} .file .ext.pdf{background:#b42318} .file .ext.xlsx,.file .ext.csv{background:#15803d} .file .ext.dxf{background:#1d4ed8} .file .ext.kmz{background:#ca8a04} .file .ext.geojson{background:#7c3aed} .file .ext.tif,.file .ext.jpg,.file .ext.jgw{background:#0f766e} .file .ext.html{background:var(--orange-d)} .file .ext.las{background:#475569}
.file b{display:block} .file small{color:var(--muted)} .file details summary{cursor:pointer;color:var(--teal-d);font-weight:600;font-size:14px}
.viewer{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/10;width:100%} .viewer iframe{width:100%;height:100%;border:0;background:#fff}
/* Formular */
.form{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(18px,3vw,32px);box-shadow:var(--sh)} .form fieldset{border:0;padding:0;margin:0 0 18px} .form legend{font-weight:800;font-size:19px;margin-bottom:10px}
.form label{display:block;font-weight:600;font-size:15px;margin:12px 0 6px} .form input,.form select,.form textarea{width:100%;font:16px/1.4 var(--f);padding:12px 14px;border:1.5px solid #bdb5a6;border-radius:10px;background:#fff;color:var(--ink)} .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--teal);outline:3px solid var(--teal-l)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:640px){.form .row{grid-template-columns:1fr}} .form .chk{display:flex;gap:10px;align-items:flex-start;font-weight:500} .form .chk input{width:22px;height:22px;flex:none;margin-top:2px}
.form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .form .err{color:var(--err);font-size:14px;font-weight:600} .stepper{display:flex;gap:6px;margin-bottom:18px} .stepper span{flex:1;height:6px;border-radius:3px;background:var(--line-2)} .stepper span.on{background:var(--teal)}
.choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px} .choice label{margin:0;border:1.5px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;cursor:pointer;font-weight:600} .choice input{width:auto} .choice label:has(input:checked){border-color:var(--teal);background:var(--teal-l)}
/* Fuß */
.foot{background:#0f1817;color:#c9d6d3;padding:56px 0 28px;font-size:15px} .foot a{color:#e8efed} .foot .grid{grid-template-columns:2fr 1fr 1fr 1fr} @media (max-width:860px){.foot .grid{grid-template-columns:1fr 1fr}} .foot h4{color:#fff;font-size:15px} .foot ul{list-style:none;padding:0;margin:0} .foot li{margin:6px 0} .foot .legal{border-top:1px solid #26332f;margin-top:32px;padding-top:18px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:13.5px}
.mobile-cta{display:none} @media (max-width:640px){.mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.08)} .mobile-cta a{flex:1} body{padding-bottom:72px}}
@media print{.top,.foot,.mobile-cta,.cta,.menu-btn{display:none!important} body{font-size:11pt} .sec{padding:16px 0} .hero{background:#fff;color:#000} .hero:after,.hero .bgimg{display:none} a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* QA-Korrekturen (automatische Prüfung 07.11.): Mobil-Überbreite, Kontrast */
.split>*,.grid>*,.file>div{min-width:0} .file b,.file small,table.t td,table.t th{overflow-wrap:anywhere} .file{grid-template-columns:48px minmax(0,1fr) auto}
@media (max-width:640px){.file{grid-template-columns:44px minmax(0,1fr)} .file>span.small{display:none}}
.file .ext.kmz{background:#8a5a00} .sec.ink .steps>div{color:var(--ink)}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ===== Übergabe-Portal ===== */
.portal{display:grid;grid-template-columns:230px 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;min-height:620px;box-shadow:0 10px 30px rgba(12,32,56,.08)}
.pt-side{background:var(--ink);color:#e8eef5;padding:16px 12px;display:flex;flex-direction:column;gap:6px}
.pt-side h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9fb3c8;margin:4px 8px 8px;font-weight:700}
.pt-pk{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 10px;border-radius:8px;font-size:14px;color:#e8eef5}
.pt-pk small{color:#9fb3c8;font-size:12px}.pt-pk:hover{background:rgba(255,255,255,.08)}.pt-pk[aria-current=true]{background:var(--orange);color:#1b0e05}.pt-pk[aria-current=true] small{color:#3b1d08}
.pt-pk:focus-visible{outline:3px solid #fff}
.pt-main{display:flex;flex-direction:column;min-width:0}
.pt-head{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.pt-head h2{margin:0;font-size:20px}.pt-head p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.pt-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line-2);overflow-x:auto;background:#fafbfc}
.pt-tab{all:unset;cursor:pointer;padding:12px 14px;font-weight:600;font-size:14.5px;color:var(--ink-2);border-bottom:3px solid transparent;white-space:nowrap}
.pt-tab[aria-selected=true]{color:var(--teal-d);border-bottom-color:var(--orange)}.pt-tab:focus-visible{outline:3px solid var(--orange)}
#pt-body{padding:20px;flex:1}
.pt-frame{width:100%;height:min(70vh,640px);border:1px solid var(--line-2);border-radius:10px;background:#fff}
.pt-hint{background:var(--teal-l);border-radius:10px;padding:12px 14px;font-size:14.5px;margin-bottom:12px}
.pt-ov{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.pt-kpi{display:grid;gap:8px}.pt-kpi div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line-2);padding:6px 0;font-size:15px}.pt-kpi span{color:var(--muted)}
.pt-cnt{list-style:none;padding:0;margin:0}.pt-cnt li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line-2)}
.link{all:unset;cursor:pointer;color:var(--teal-d);text-decoration:underline;text-underline-offset:3px}.link:focus-visible{outline:3px solid var(--orange)}
.pt-files{display:grid;gap:8px}.pt-file{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px}
.pt-file b{display:block;word-break:break-word;font-size:14.5px}.pt-file small{display:block;color:var(--muted);font-size:12.8px;line-height:1.4}.pt-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.btn.s{min-height:36px;padding:8px 14px;font-size:14px}
.pt-pre{white-space:pre-wrap;background:#f6f8fa;border-radius:8px;padding:12px;font-size:12.5px;overflow:auto;max-height:300px}
.pt-drop{border:2px dashed var(--line);border-radius:12px;padding:28px;text-align:center;margin:20px}.pt-drop.on{border-color:var(--orange);background:var(--orange-l)}
.pt-dlg{border:0;border-radius:14px;padding:20px;max-width:min(720px,94vw)}.pt-dlg::backdrop{background:rgba(12,32,56,.5)}
.pt-load{padding:30px 20px}
.pt-mob{display:none}
@media(max-width:820px){.portal{grid-template-columns:1fr}.pt-side{flex-direction:row;flex-wrap:wrap;gap:4px}.pt-side h2{width:100%}.pt-pk{padding:7px 9px;background:rgba(255,255,255,.07)}.pt-ov{grid-template-columns:1fr}.pt-file{grid-template-columns:auto 1fr}.pt-act{grid-column:1/-1;justify-content:flex-start}}