/* extrabesonders Brand Portal – Stylesheet */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/fallback/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(../fonts/fallback/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../fonts/fallback/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(../fonts/fallback/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-display:swap;src:url(../fonts/fallback/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-display:swap;src:url(../fonts/fallback/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
/* Markenschriften: Dateien in data/files/fonts ablegen (siehe LIESMICH). Fehlen sie, greifen die Ersatzschriften. */
@font-face{font-family:"Argesta Headline";font-weight:400;font-display:swap;src:local("Argesta Headline"),local("ArgestaHeadline-Regular"),url("../../api/file.php?a=fonts&p=argesta-headline-regular.woff2") format("woff2")}
@font-face{font-family:"Argesta Display";font-weight:400;font-display:swap;src:local("Argesta Display"),local("ArgestaDisplay-Regular"),url("../../api/file.php?a=fonts&p=argesta-display-regular.woff2") format("woff2")}
@font-face{font-family:"Helvetica Now Display";font-weight:300;font-display:swap;src:local("Helvetica Now Display Light"),url("../../api/file.php?a=fonts&p=helvetica-now-display-light.woff2") format("woff2")}
@font-face{font-family:"Helvetica Now Display";font-weight:400;font-display:swap;src:local("Helvetica Now Display"),url("../../api/file.php?a=fonts&p=helvetica-now-display-regular.woff2") format("woff2")}
@font-face{font-family:"Helvetica Now Display";font-weight:700;font-display:swap;src:local("Helvetica Now Display Bold"),url("../../api/file.php?a=fonts&p=helvetica-now-display-bold.woff2") format("woff2")}

:root{
  --serif:"Argesta Headline","Argesta Display","Cormorant Garamond",Georgia,serif;
  --sans:"Helvetica Now Display","Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  --bg:#172D40; --surface:#1D3650; --surface2:#223A59; --line:rgba(239,225,206,.16);
  --text:#E8EDF2; --muted:#9FB3C5; --head:#EFE1CE; --accent:#B9ADFF; --accent-2:#A799FF; --on-accent:#172D40;
  --gold:#C9A24B; --gold-text:#E2C177; --danger:#FFB4A8; --ok:#9BE3B5;
  --radius:14px; --shadow:0 18px 50px rgba(0,0,0,.28);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F7F1E7; --surface:#FFFFFF; --surface2:#EFE1CE; --line:rgba(23,45,64,.18);
  --text:#172D40; --muted:#4A5F73; --head:#172D40; --accent:#4B4573; --accent-2:#4B4573; --on-accent:#FFFFFF;
  --gold:#C9A24B; --gold-text:#7A5B14; --danger:#9B2C1F; --ok:#1E6B3A;
  --shadow:0 18px 50px rgba(23,45,64,.12);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:300 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--head)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
h1,h2,h3,h4{margin:0;font-weight:400}
h1,h2{font-family:var(--serif);color:var(--head);letter-spacing:.02em;line-height:1.12}
h1{font-size:clamp(44px,7vw,84px)}
h2{font-size:clamp(34px,5vw,64px);margin-bottom:12px}
h3{font:700 19px/1.4 var(--sans);color:var(--head);letter-spacing:.01em;margin:36px 0 10px}
h4{font:700 16px/1.4 var(--sans);color:var(--head);letter-spacing:.02em;margin:0 0 8px}
p{margin:0 0 14px;max-width:72ch}
.lede{font-size:clamp(21px,2.4vw,30px);line-height:1.45;letter-spacing:.02em;color:var(--head);max-width:46ch;margin:20px 0 0}
.muted{color:var(--muted)}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
section.sec{padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--line)}
.eyebrow{font:700 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:18px;display:block}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em}
code{background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:6px}

/* Kopfleiste */
header.top{position:sticky;top:0;z-index:50;padding:12px 0;background:linear-gradient(var(--bg) 70%,transparent)}
.bar{display:flex;align-items:center;gap:16px}
.bar .brand{display:flex;align-items:center;gap:10px;color:var(--head);text-decoration:none;font:400 22px/1 var(--serif);letter-spacing:.02em;flex:none}
.bar .brand img{height:30px;width:auto}
.pill{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px}
.pill::-webkit-scrollbar{display:none}
.pill a{flex:none;color:var(--text);text-decoration:none;font:500 14px/1 var(--sans);letter-spacing:.02em;padding:11px 14px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center}
.pill a:hover{background:var(--surface2);color:var(--head)}
.pill a.on{background:var(--accent);color:var(--on-accent)}
.tools{display:flex;gap:8px;flex:none;align-items:center}
.iconbtn{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--text);width:44px;height:44px;border-radius:999px;cursor:pointer;display:grid;place-items:center;font:inherit}
.iconbtn:hover{background:var(--surface2)}
.userchip{font:500 13px/1 var(--sans);color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.userchip{display:none}.bar .brand span{display:none}}

/* Hero */
.hero{padding:clamp(56px,9vw,140px) 0 clamp(48px,7vw,96px)}
.hero h1 span{color:var(--gold-text)}
.cta{display:inline-flex;align-items:center;gap:10px;font:700 21px/1 var(--sans);letter-spacing:.02em;color:var(--accent);text-decoration:none;padding:14px 0;margin-top:28px}
.cta::after{content:"→";transition:transform .2s}
.cta:hover::after{transform:translateX(5px)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:48px}
.tile{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:var(--text);min-height:132px;transition:border-color .2s,transform .2s}
.tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.tile b{display:block;font:400 28px/1.2 var(--serif);color:var(--head);letter-spacing:.02em;margin-bottom:6px}
.tile small{font-size:15px;color:var(--muted);line-height:1.45;display:block}
.tile .n{font:700 12px/1 var(--sans);letter-spacing:.14em;color:var(--gold-text);display:block;margin-bottom:10px}

/* Karten, Raster */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.card h4{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.note{border-left:3px solid var(--gold);background:var(--surface);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0;max-width:78ch;font-size:16px}
.open{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);background:var(--gold);padding:5px 8px;border-radius:6px;vertical-align:middle;margin-left:8px}
.tag{display:inline-block;font:500 12px/1 var(--sans);padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tablewrap table{min-width:560px}
.tablewrap tr:last-child td{border-bottom:0}

/* Logos */
.logogroup{margin-top:56px}
.logogroup>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:16px}
.logogroup>header h3{margin:0;font:400 34px/1.1 var(--serif);letter-spacing:.02em}
.logogroup>header p{margin:0;color:var(--muted);font-size:16px}
.ltile{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.ltile .stage{display:grid;place-items:center;min-height:190px;padding:28px}
.ltile .stage img{max-width:100%;max-height:120px;width:auto;height:auto;display:block}
.ltile .stage.web img{max-height:44px}
.ltile .meta{padding:14px 16px 16px;border-top:1px solid var(--line)}
.ltile .meta b{display:block;font:700 15px/1.3 var(--sans);color:var(--head)}
.ltile .meta small{display:block;color:var(--muted);font-size:14px;line-height:1.4;margin:3px 0 10px}
.dl{display:flex;flex-wrap:wrap;gap:6px}
.dl a,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line);font:700 13px/1 var(--sans);letter-spacing:.04em;color:var(--text);text-decoration:none;background:transparent;cursor:pointer}
.dl a:hover,.btn:hover{background:var(--surface2);border-color:var(--gold);color:var(--head)}
.bg-dunkel{background:#172D40}.bg-hell{background:#EFE1CE}.bg-weiss{background:#FFFFFF}.bg-slate{background:#343A4A}
.bg-metallic{background:linear-gradient(135deg,#2C5F8E,#1B4468 55%,#2A5A86);position:relative}
.bg-metallic::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px);pointer-events:none}
.bg-metallic img{position:relative;z-index:1}

/* Farben */
.sw{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.sw .chip{height:120px;display:flex;align-items:flex-end;padding:12px 14px;font:700 13px/1 var(--sans);letter-spacing:.06em}
.sw .body{padding:14px 16px 16px;font-size:15px;line-height:1.5}
.sw b{display:block;font:400 26px/1.15 var(--serif);color:var(--head);letter-spacing:.02em}
.sw .vals{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:10px 0 0;font-size:14px}
.sw .vals dt{color:var(--muted)}.sw .vals dd{margin:0}
.copy{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;text-align:left;border-bottom:1px dashed var(--muted)}
.copy:hover{color:var(--head);border-color:var(--gold)}
.ratio{display:inline-block;min-width:54px}
.pass{color:var(--ok);font-weight:700}.fail{color:var(--danger);font-weight:700}
.sample{display:inline-grid;place-items:center;width:64px;height:34px;border-radius:8px;border:1px solid var(--line);font:700 15px/1 var(--sans)}

/* Typografie */
.spec{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:6px 28px;padding:26px 0;border-top:1px solid var(--line);align-items:baseline}
.spec .k{font-size:14px;color:var(--muted);line-height:1.5}
.spec .k b{color:var(--head);display:block;font-weight:700}
@media (max-width:700px){.spec{grid-template-columns:1fr}}
.t-h1{font:400 clamp(40px,6vw,72px)/1.12 var(--serif);letter-spacing:.02em;color:var(--head)}
.t-lede{font:300 clamp(22px,2.6vw,33.6px)/1.4 var(--sans);letter-spacing:.04em;color:var(--head)}
.t-h3{font:700 19px/1.4 var(--sans);color:var(--head)}
.t-btn{font:700 21px/1 var(--sans);letter-spacing:.02em;color:var(--accent)}
.t-body{font:300 18px/1.65 var(--sans)}
.t-sub{font:400 34px/1.1 var(--serif);letter-spacing:.02em;color:var(--head)}
.glyphs{font:400 34px/1.5 var(--serif);letter-spacing:.06em;color:var(--head);word-break:break-all}

/* Signaturen */
.sigwrap{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:28px;align-items:start;margin-top:24px}
@media (max-width:980px){.sigwrap{grid-template-columns:1fr}}
.form label{display:block;font:700 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
input,select,textarea{width:100%;font:400 16px/1.3 var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:46px}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:90px;resize:vertical}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;background:var(--bg)}
.seg button{appearance:none;border:0;background:none;color:var(--text);font:700 13px/1 var(--sans);padding:10px 16px;border-radius:999px;cursor:pointer;min-height:36px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.sigstage{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff;overflow-x:auto}
.sigstage.dark{background:#0F1F2D}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--head);color:var(--bg)}
.btn.danger{color:var(--danger)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.saved{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.saved .tag{cursor:pointer;background:transparent;color:var(--text)}
.saved .tag:hover{border-color:var(--gold)}

/* Druck */
.printcat{margin-top:44px}
.printcat>h3{font:400 34px/1.1 var(--serif);letter-spacing:.02em;margin:0 0 16px}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pcard .pv{background:#1B4468;display:block;overflow:hidden}
.pcard .pv img{width:100%;height:auto;display:block}
.pcard .pb{padding:16px 18px 18px}
.pcard .pb b{display:block;font:700 17px/1.3 var(--sans);color:var(--head)}
.pcard .pb p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:6px 0 12px}
.spot{display:flex;gap:14px;align-items:flex-start}
.spot i{flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 44px;max-width:76ch}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-text);font:700 14px/28px var(--sans);text-align:center}

/* Raster */
.colsdemo{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin:18px 0}
.colsdemo span{background:var(--surface2);border:1px solid var(--line);height:70px;border-radius:6px;display:grid;place-items:center;font:700 12px/1 var(--sans);color:var(--muted)}
@media (max-width:700px){.colsdemo{grid-template-columns:repeat(4,1fr)}.colsdemo span:nth-child(n+5){display:none}}
.space{display:flex;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.space i{display:block;height:18px;background:var(--gold);border-radius:3px;flex:none}
.space code{flex:none;min-width:60px;text-align:center}
.zone{position:relative;display:inline-grid;place-items:center;padding:34px;border:1.5px dashed var(--gold);border-radius:10px;background:var(--surface)}
.zone img{height:70px}

/* Komponenten */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.b-primary{appearance:none;cursor:pointer;border:0;background:var(--accent);color:var(--on-accent);font:700 17px/1 var(--sans);letter-spacing:.02em;padding:0 26px;min-height:52px;border-radius:999px}
.b-primary:hover{background:var(--head)}
.b-ghost{appearance:none;cursor:pointer;background:none;color:var(--head);border:1.5px solid var(--head);font:700 17px/1 var(--sans);letter-spacing:.02em;padding:0 26px;min-height:52px;border-radius:999px}
.b-ghost:hover{border-color:var(--gold);color:var(--gold-text)}
.b-gold{appearance:none;cursor:pointer;border:0;background:var(--gold);color:#172D40;font:700 17px/1 var(--sans);padding:0 26px;min-height:52px;border-radius:999px}
.alert{border-radius:12px;padding:12px 16px;border:1px solid var(--line);font-size:16px;display:flex;gap:10px;align-items:flex-start;max-width:520px}
.alert.ok{border-color:var(--ok);color:var(--ok)}.alert.err{border-color:var(--danger);color:var(--danger)}.alert.info{border-color:var(--accent);color:var(--accent)}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(1200px 600px at 20% -10%,#24476a 0,transparent 60%),var(--bg)}
.lbox{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,5vw,44px);box-shadow:var(--shadow)}
.lbox img.logo{width:min(280px,80%);height:auto;display:block;margin:0 0 30px;background:none}
.lbox img.logo-on-light{display:none}
:root[data-theme="light"] .lbox img.logo-on-dark{display:none}
:root[data-theme="light"] .lbox img.logo-on-light{display:block}
.lbox .row{flex-direction:column;align-items:stretch}
.lbox .btn{width:100%;min-height:52px;font-size:15px}
.lbox h1{font-size:44px;margin-bottom:10px}
.lbox .msg{min-height:24px;margin-top:14px;font-size:15.5px}
.code-in{font:700 30px/1 ui-monospace,Menlo,monospace;letter-spacing:.5em;text-align:center}

/* Admin, Tabellen */
.adminbox{margin-top:20px}
.forminline{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.forminline>*{flex:1 1 200px}.forminline .btn,.forminline button{flex:0 0 auto}
dialog{border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);padding:28px;max-width:640px;width:calc(100% - 32px);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(8,16,24,.6)}
footer.foot{border-top:1px solid var(--line);padding:36px 0 60px;color:var(--muted);font-size:15px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--head);color:var(--bg);padding:12px 20px;border-radius:999px;font:700 14px/1 var(--sans);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
@media print{header.top,.tools,.dl,.btn{display:none!important}:root{--bg:#fff;--text:#000}}

.sigstage table{width:auto;font-size:inherit;min-width:0}.sigstage td,.sigstage th{padding:0;border:0}
:root[data-theme="light"] .login{background:var(--bg)}