:root {
--navy:#071c39;
--blue:#0b75ff;
--cyan:#19b8ff;
--ink:#0d1b2d;
--muted:#66758a;
--line:#dfe7f0;
--soft:#f5f8fc;
--white:#fff;
--r:24px}
* {
box-sizing:border-box}
html {
scroll-behavior:smooth}
body {
margin:0;
font-family:Inter,system-ui,sans-serif;
color:var(--ink);
background:#fff}
.noise {
position:fixed;
inset:0;
pointer-events:none;
opacity:.025;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
z-index:99
}


.site-header {
position:sticky;
top:0;
z-index:50;
height:105px;
display:flex;
align-items:center;
gap:32px;
padding:0 max(28px,calc((100vw - 1280px)/2));
background:rgba(255,255,255,1.0);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid rgba(7,28,57,.08)}

/*
.site-header {
	position:sticky;
	top:0;
	z-index:50;
	height: 163px;
	display:flex;
	align-items:center;
	gap:38px;
	padding:0 max(28px,calc((100vw - 1280px)/2));
	background:rgba(255,255,255,.88);
	backdrop-filter:blur(18px);
	border-bottom:1px solid rgba(7,28,57,.08)
}
*/


.wall-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.wall-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 13px 20px;

    background: #0878f9;
    color: #ffffff;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;
    text-decoration: none;

    white-space: nowrap;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.wall-button span {
    font-size: 17px;
    line-height: 1;
    transition: transform .2s ease;
}

.wall-button:hover {
    background: #0668db;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(8, 120, 249, .18);
}

.wall-button:hover span {
    transform: translateX(3px);
}


/* MOBILE */

@media (max-width: 560px) {

    .wall-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .wall-button {
        width: 100%;
    }

}

.brand {
display:flex;
align-items:center;
margin-right:auto}


.brand img {
    width: 300px;
    height: 100px;
    object-fit: cover;
    object-position: center 64%;
    clip-path: inset(3% 0 0% 0);
    /*transform: scale(1.5);*/
}

@media (max-width: 560px) {
    .brand img {
        width: 100%;
        height: 50%;
        object-fit: cover;
        /* object-position: center -14%; */
        /* clip-path: inset(30% 0 15% 0); */
        /* transform: scale(1.3); */
        margin-top: 0px;
		margin-left: 25px;
    }
}


.nav {
display:flex;
gap:30px}

.nav a:hover {
	transform:translateY(-2px);
	box-shadow:0 18px 40px rgba(11,117,255,.28)
	}


.nav a,.site-header a {
text-decoration:none;
color:var(--ink);
font-size:14px;
font-weight:600}
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:0 24px;
border-radius:14px;
background:linear-gradient(135deg,var(--blue),#1456dd);
color:#fff!important;
text-decoration:none;
font-weight:700;
border:0;
box-shadow:0 12px 30px rgba(11,117,255,.22);
transition:.25s}

.nav-digitale-wand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 1px solid #0b75ff;
    border-radius: 8px;
    background: #fff;
    color: #0b75ff !important;
    text-decoration: none;
    transition: .2s ease;
}
.nav-digitale-wand:hover {
transform:translateY(-2px);
box-shadow:0 18px 40px rgba(11,117,255,.28)
}

.btn:hover {
transform:translateY(-2px);
box-shadow:0 18px 40px rgba(11,117,255,.28)}
.btn-small {
min-height:42px;
padding:0 18px;
border-radius:11px;
font-size:13px!important}
.ghost {
background:#fff;
color:var(--ink)!important;
border:1px solid var(--line);
box-shadow:none}
.menu-btn {
display:none;
border:0;
background:none;
font-size:24px}
.hero {
max-width:1280px;
margin:auto;
min-height:720px;
padding:92px 28px 70px;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:70px;
align-items:center;
position:relative;
overflow:hidden}
.hero-copy,.hero-panel {
position:relative;
z-index:2}
.eyebrow,.kicker {
font-size:12px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--blue)}
.eyebrow {
display:inline-flex;
align-items:center;
gap:9px;
background:#eff7ff;
border:1px solid #dcecff;
padding:9px 12px;
border-radius:999px}
.eyebrow i {
width:7px;
height:7px;
border-radius:50%;
background:var(--blue);
box-shadow:0 0 0 5px rgba(11,117,255,.12)}
h1 {
font-size:clamp(52px,6vw,88px);
line-height:.96;
letter-spacing:-.055em;
margin:28px 0 26px;
max-width:760px}
h1 span {
background:linear-gradient(90deg,var(--blue),var(--cyan));
-webkit-background-clip:text;
color:transparent}
.hero-copy>p {
font-size:18px;
line-height:1.7;
color:var(--muted);
max-width:650px}
.hero-actions {
display:flex;
gap:12px;
margin-top:32px}
.stats {
display:flex;
gap:38px;
margin-top:48px;
padding-top:28px;
border-top:1px solid var(--line)}
.stats div {
display:flex;
flex-direction:column;
gap:5px}
.stats strong {
font-size:26px;
letter-spacing:-.03em}
.stats span {
font-size:12px;
color:var(--muted)}
.hero-panel {
background:#071427;
border-radius:28px;
padding:18px;
box-shadow:0 40px 100px rgba(7,28,57,.22);
transform:rotate(1.5deg)}
.panel-head,.panel-foot {
display:flex;
align-items:center;
justify-content:space-between;
color:#fff;
padding:6px 6px 18px;
font-size:11px;
letter-spacing:.12em}
.panel-head small {
color:#9fb1c8}
.panel-head b {
display:inline-block;
width:7px;
height:7px;
background:#38e68a;
border-radius:50%;
margin-right:6px}
.mini-wall {
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:88px;
gap:8px}
.mini-card {
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.09);
background:linear-gradient(145deg,#142944,#0d1c30);
border-radius:12px;
padding:12px;
color:#fff;
display:flex;
flex-direction:column;
justify-content:space-between}
.mini-card.large {
grid-column:span 2;
grid-row:span 2}
.mini-card.medium {
grid-column:span 2}
.mini-card:nth-child(4n+2) {
background:linear-gradient(145deg,#0f68ee,#1551c2)}
.mini-card span {
font-size:20px;
font-weight:800}
.mini-card small {
font-size:10px;
color:#bdcce0}
.panel-foot {
padding:17px 6px 3px;
color:#9fb1c8}
.panel-foot strong {
color:#59bcff}
.hero-glow {
position:absolute;
border-radius:50%;
filter:blur(40px);
opacity:.16}
.hero-glow.one {
width:420px;
height:420px;
background:#0b75ff;
right:10%;
top:5%}
.hero-glow.two {
width:260px;
height:260px;
background:#19b8ff;
left:-80px;
bottom:0}
.ticker {
overflow:hidden;
border-block:1px solid var(--line);
background:#f8fbff}
.ticker div {
white-space:nowrap;
padding:16px 0;
font-size:11px;
font-weight:800;
letter-spacing:.18em;
color:#46617f;
animation:ticker 28s linear infinite}
.ticker span {
margin:0 28px}
.ticker i {
color:var(--blue)}
@keyframes ticker {
    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-100%);
    }
}
.section {
max-width:1280px;
margin:auto;
padding:110px 28px}
.section-head {
display:flex;
justify-content:space-between;
gap:60px;
align-items:end;
margin-bottom:48px}
.section-head h2,.reserve h2,.founder h2 {
font-size:clamp(38px,5vw,64px);
letter-spacing:-.045em;
line-height:1.02;
margin:12px 0 0}
.section-head>p {
max-width:440px;
color:var(--muted);
line-height:1.7}
.filters {
display:flex;
gap:7px;
flex-wrap:wrap;
margin-bottom:20px}
.filters button {
padding:10px 14px;
border-radius:999px;
border:1px solid var(--line);
background:#fff;
font:600 12px Inter;
color:#617189;
cursor:pointer;
font-family: sans-serif;}
.filters button.active {
background:var(--navy);
color:#fff;
border-color:var(--navy)}
/* Dichte Kachelbelegung: freie Rasterlücken werden automatisch
   mit nachfolgenden passenden SMALL/BUSINESS/PREMIUM-Kacheln aufgefüllt. */
.wall-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:142px;
grid-auto-flow:dense;
gap:10px;
background:#eff4f9;
padding:10px;
border-radius:26px}
.company {
position:relative;
display:flex;
gap:14px;
align-items:flex-end;
padding:20px;
background:#fff;
border-radius:18px;
border:1px solid #e6edf4;
transition:.25s;
overflow:hidden}
.company:hover {
transform:translateY(-3px);
box-shadow:0 14px 38px rgba(7,28,57,.1)}
.company.large {
grid-column:span 2;
grid-row:span 2;
border: 5px solid #0b75ff57;}
.company.medium {
grid-column:span 2;
grid-row:span 1;
border: 3px solid #0b75ff57;}
.company.small {
grid-column:span 1;
grid-row:span 1;
min-width:0;
border: 1px solid #0b75ff57;}
.company-mark {
position:absolute;
right:14px;
top:10px;
font-size:54px;
font-weight:800;
letter-spacing:-.12em;
color:#e8f0fa}
.company-mark span {
color:#d2e7ff}
.company h3 {
margin:0 0 5px;
font-size:15px}
.company p {
margin:0;
color:var(--muted);
font-size:11px}
.arrow {
position:absolute;
top:16px;
right:16px;
color:var(--blue)}
.add {
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
border:1px dashed #9bc7ff;
text-decoration:none;
color:var(--blue);
background:#f6fbff}
.add span {
font-size:30px}
.add small {
color:#7190b3}
.steps {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.steps article {
padding:34px;
border:1px solid var(--line);
border-radius:22px;
background:#fff}
.steps article>span {
color:#9cb0c8;
font-size:15px}
.step-icon {
font-size:32px;
margin:46px 0 22px;
color:var(--blue)}
.steps h3 {
font-size:22px;
margin:0 0 12px}
.steps p {
margin:0;
color:var(--muted);
line-height:1.65}
.pricing {
background:linear-gradient(180deg,#fff,#f8fbff);
max-width:none;
padding-inline:max(28px,calc((100vw - 1280px)/2))}
.price-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px}
.price-grid article {
position:relative;
border:1px solid var(--line);
border-radius:24px;
padding:32px;
background:#fff}
.price-grid .featured {
border:1.5px solid var(--blue);
box-shadow:0 24px 60px rgba(11,117,255,.12)}
.tag {
font-size:11px;
font-weight:800;
letter-spacing:.15em;
color:var(--blue)}
.popular {
position:absolute;
right:18px;
top:18px;
background:#0b75ff;
color:var(--white);
font-size:12px;
font-weight:400;
padding:11px 19px;
border-radius:999px;
font-family: sans-serif;}
.price-grid h3 {
font-size:20px;
margin:16px 0 28px}
.price {
font-size:48px;
font-weight:800;
letter-spacing:-.05em}

.price small {
font-size:11px;
font-weight:600;
color:var(--muted);
margin-left:8px;
letter-spacing: 3px;
}

.price-grid ul {
list-style:none;
padding:0;
margin:26px 0}
.price-grid li {
padding:10px 0;
border-bottom:1px solid #edf1f5;
color:#52647a;
font-size:13px}
.price-grid li:before {
content:'✓';
color:var(--blue);
margin-right:9px;
font-weight:800}
.price-btn {
display:flex;
justify-content:center;
padding:14px;
border-radius:12px;
background:#eff7ff;
color:var(--blue);
font-weight:700;
font-size:13px;
text-decoration:none}
.featured .price-btn {
background:var(--blue);
color:#fff}
.founder {
padding-top:60px}

.founder>div,
.founder-inner {
position:relative;
overflow:hidden;
padding:60px;
border-radius:30px;
background:#071c39;
color:#fff}

.founder-inner {
display:flex;
align-items:center;
justify-content:space-between;
gap:64px}

.founder-copy {
flex:1 1 auto;
min-width:0}

.founder-copy h2 {
max-width:760px}

.founder p {
max-width:680px;
margin:24px 0 0;
color:#aebdd0;
line-height:1.7}

.founder-limit {
display:block;
margin-top:22px;
color:#fff;
font-size:14px;
font-weight:700}

.founder-badge {
position:relative;
right:auto;
top:auto;
transform:none;
flex:0 0 280px;
width:280px;
min-height:280px;
height:auto;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
padding:34px 26px;
border:1px solid #3ea5ff;
background:radial-gradient(circle at 30% 20%,#1457a4,#071c39);
color:#94caff;
text-align:center;
text-decoration:none;
box-shadow:0 20px 55px rgba(0,0,0,.18);
transition:transform .25s ease,box-shadow .25s ease}

.founder-badge:hover {
transform:translateY(-4px);
box-shadow:0 26px 65px rgba(0,0,0,.25)}

.founder-badge-title {
font-size:25px;
font-weight:800;
letter-spacing:.13em}

.founder-badge-hash{
font-size:30px;
font-weight:800;
letter-spacing:.13em;
color:#ffffff}

.founder-badge strong {
font-size:20px;
line-height:1;
color:#c7def7
margin:4px 0}

.founder-badge-position,
.founder-badge-price {
font-size:12px;
line-height:1.35;
letter-spacing:.03em;
color:#c7def7}

.founder-badge-price {
font-weight:700;
color:#fff}

.founder-badge-cta {
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:5px;
padding:10px 15px;
border-radius:999px;
background:#0b75ff;
color:#fff;
font-size:11px;
font-weight:800;
letter-spacing:.04em}

@media (max-width:900px) {
.founder-inner {
flex-direction:column;
align-items:flex-start;
gap:34px}

.founder-badge {
align-self:center;
flex-basis:auto}
}

@media (max-width:560px) {
.founder>div,
.founder-inner {
padding:32px 24px}

.founder p {
max-width:100%}

.founder-badge {
width:240px;
min-height:240px;
padding:28px 22px}

.founder-badge strong {
font-size:36px}
}

.reserve {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:70px;
align-items:start}
.reserve-copy>p {
color:var(--muted);
line-height:1.7}
.trust {
display:grid;
gap:12px;
margin-top:28px;
font-size:13px}
.trust span {
color:#40546c}
.reserve-form {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
padding:28px;
border:1px solid var(--line);
border-radius:26px;
background:#fbfdff}
.field {
display:flex;
flex-direction:column;
gap:8px}
.field label {
font-size:11px;
font-weight:700;
color:#50647c}
.field input {
height:48px;
border:1px solid #dbe5ef;
border-radius:11px;
padding:0 13px;
font:500 13px Inter;
outline:none;
background:#fff;
font-family: sans-serif;}
.field input:focus {
border-color:#77b7ff;
box-shadow:0 0 0 3px #eaf4ff}
.full {
grid-column:1/-1}
.package-pills {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px}
.package-pills input {
display:none}
.package-pills span {
display:block;
text-align:center;
padding:13px 10px;
border:1px solid var(--line);
border-radius:10px;
font-size:11px;
font-weight:700;
cursor:pointer}
.package-pills input:checked+span {
border-color:var(--blue);
background:#edf7ff;
color:var(--blue)}
.check {
display:flex;
gap:10px;
font-size:11px;
color:#65758b;
line-height:1.5}
.faq-list {
border-top:1px solid var(--line)}
details {
border-bottom:1px solid var(--line);
padding:0}
summary {
cursor:pointer;
list-style:none;
padding:24px 0;
font-weight:700;
font-size:16px;
display:flex;
justify-content:space-between}
summary:after {
content:'+';
color:var(--blue);
font-size:22px}
details[open] summary:after {
content:'−'}
details p {
color:var(--muted);
max-width:760px;
line-height:1.7;
margin:0 0 24px}
footer {
max-width:1280px;
margin:auto;
padding:50px 28px;
display:grid;
grid-template-columns:1fr auto auto;
align-items:end;
gap:40px;
border-top:1px solid var(--line)}

.footer-brand img {
width:300px;
margin-left: -70px;
}

@media(max-width:560px) {
.footer-brand img {
	width:320px;
    margin-left: 10px;
}}

@media(max-width:560px) {
.footer-brand-txt {
	
	margin-left: 58px;
    margin-top: 10px;
}}

.footer-brand p,footer small {
	font-size:11px;
	color:var(--muted);
	text-align: center !important;
}

@media(max-width:560px) {
.b-brand {
	font-size:11px;
	color:var(--muted);
	text-align: left !important;
	
}}


footer>div:nth-child(2) {
display:flex;
gap:18px}
footer a {
font-size:12px;
color:#52647a;
text-decoration:none}
@media(max-width:900px) {
.nav,.site-header>.btn {
display:none}
.menu-btn {
display:block}
.hero {
grid-template-columns:1fr;
padding-top:60px}
.hero-panel {
transform:none}
.section-head {
display:block}
.wall-grid {
grid-template-columns:repeat(2,1fr)}
.steps,.price-grid {
grid-template-columns:1fr}
.reserve {
grid-template-columns:1fr}
.founder-badge {
position:relative;
right:auto;
top:auto;
transform:none;
margin-top:30px}
.founder>div {
padding:36px}
.package-pills {
grid-template-columns:1fr}
footer {
grid-template-columns:1fr}
.stats {
gap:18px;
flex-wrap:wrap}
}

@media(max-width:560px) {
.site-header {
height:100px;
padding:0 18px
}

.hero {
padding:44px 18px 50px;
min-height:auto;
gap:46px}
h1 {
font-size:49px}
.hero-copy>p {
font-size:16px}
.hero-actions {
flex-direction:column}
.stats {
display:grid;
grid-template-columns:1fr 1fr}
.mini-wall {
grid-template-columns:repeat(3,1fr);
grid-auto-rows:72px}
.mini-card:nth-child(n+10) {
display:none}
.section {
padding:82px 18px}
.wall-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:128px;
grid-auto-flow:dense;
gap:10px}

.company.small {
grid-column:span 1;
grid-row:span 1;
min-width:0}

.company.medium {
grid-column:1 / -1;
grid-row:span 1}

.company.large {
grid-column:1 / -1;
grid-row:span 2;
min-height:266px}

.wall-grid > .company.add {
grid-column:1 / -1;
grid-row:span 1}
.reserve-form {
grid-template-columns:1fr;
padding:20px}
.field,.full {
grid-column:1}
.section-head h2,.reserve h2,.founder h2 {
font-size:42px}
.founder>div {
padding:32px 24px}
.ticker div {
font-size:10px}
}



/* === Kunden-Uploads, Vorschau und Adminbereich === */
.user-company { text-decoration:none; color:inherit; min-height:100%; align-items:stretch; padding:0; background:#fff; }
.company-upload { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:18px; background:#fff; }
.user-company .company-upload { transition:transform .3s ease; }
.user-company:hover .company-upload { transform:scale(1.025); }

.company-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 18px;
	padding: 42px 18px 3px;

    /*Original*/ /*padding: 42px 18px 14px; */

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.20) 35%,
        rgba(255,255,255,.78) 100%
    );
}

.company-overlay h3 {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-overlay p {
    margin: 0 0 1px;
    flex: 0 1 auto;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-number {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;
    padding: 6px 9px;

    border: 1px solid rgba(11,117,255,.18);
    border-radius: 8px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 14px rgba(7,28,57,.08);

    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
}
.user-company .arrow { z-index:4; background:rgba(255,255,255,.9); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.upload-field label span { margin-left:7px; color:var(--muted); font-size:10px; font-weight:500; }
.upload-field input[type=file] { height:auto; padding:12px; background:#fff; border:1px dashed #a9bfd8; border-radius:12px; }
.upload-field small { color:var(--muted); font-size:10px; }
.preview-area { margin-top:6px; }

.preview-stage { 
	display:grid; 
	grid-template-columns:minmax(315px, auto) 1fr; 
	gap:20px; 
	align-items:center;
	padding:18px;
	border:1px solid var(--line);
	border-radius:18px; background:#f6f9fd;
	font-family: sans-serif;
	}


.preview-company { width:100%; min-height:160px; pointer-events:none; align-items:stretch; padding:0; }
.preview-company.medium { min-height:180px; }
.preview-company.large { min-height:230px; }
.preview-placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:20px; background:linear-gradient(135deg,#f3f7fc,#eaf3ff); color:#91a5bd; font-size:12px; font-weight:800; letter-spacing:.12em; }
.preview-info { display:grid; gap:8px; color:var(--muted); font-size:12px; line-height:1.6; }
.preview-info strong { color:var(--blue); font-size:13px; letter-spacing:.12em; }
.form-message { margin:0 0 18px; padding:16px 18px; border-radius:14px; font-size:13px; line-height:1.55; display:grid; gap:5px; }
.form-message.success { background:#edfbf4; border:1px solid #bdebd2; color:#12633a; }
.form-message.error { background:#fff3f3; border:1px solid #f0caca; color:#8a2929; }
.form-message ul { margin:5px 0 0 18px; padding:0; }

.admin-body { background:#f5f8fc; min-height:100vh; }
.admin-login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.admin-login-card { width:min(440px,100%); display:grid; gap:16px; padding:34px; background:#fff; border:1px solid var(--line); border-radius:24px; }
.admin-login-card h1 { margin:0 0 10px; font-size:38px; }
.admin-login-card label { display:grid; gap:7px; font-size:12px; font-weight:700; color:#50647c; }
.admin-login-card input { height:48px; border:1px solid #dbe5ef; border-radius:11px; padding:0 13px; font:500 14px Inter; }
.admin-header { height:70px; padding:0 max(22px,calc((100vw - 1240px)/2)); background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.admin-header div { display:flex; align-items:center; gap:10px; }
.admin-header strong { color:var(--navy); letter-spacing:.08em; }
.admin-header span { color:var(--muted); font-size:12px; }
.admin-header a { color:var(--muted); text-decoration:none; font-size:12px; }
.admin-wrap { max-width:1240px; margin:auto; padding:50px 22px 90px; }
.admin-title { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:26px; }
.admin-title h1 { font-size:48px; margin:10px 0 0; }
.admin-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.admin-filters a { text-decoration:none; color:#617189; background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 13px; font-size:12px; font-weight:700; }
.admin-filters a.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.admin-filters b { margin-left:5px; }
.admin-list { display:grid; gap:16px; }
.admin-entry { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:22px; }
.admin-preview { position:relative; min-height:170px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; }
.admin-preview img { width:100%; height:100%; object-fit:contain; padding:12px; }
.admin-preview span { position:absolute; left:10px; bottom:10px; padding:6px 8px; border-radius:8px; background:rgba(7,28,57,.9); color:#fff; font-size:10px; font-weight:800; }
.admin-data { min-width:0; }
.admin-entry-head { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.admin-entry-head h2 { margin:8px 0 18px; font-size:22px; }
.admin-entry-head>strong { color:var(--blue); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.status { font-size:9px; font-weight:800; letter-spacing:.1em; padding:5px 8px; border-radius:999px; }
.status-pending { background:#fff5d9; color:#8b6413; }
.status-published { background:#e8faef; color:#176c3c; }
.status-rejected { background:#fff0f0; color:#9b3232; }
.admin-entry dl { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 20px; margin:0; }
.admin-entry dl div { min-width:0; }
.admin-entry dt { color:var(--muted); font-size:10px; margin-bottom:4px; }
.admin-entry dd { margin:0; font-size:12px; overflow-wrap:anywhere; }
.admin-entry dd a { color:var(--blue); }
.admin-actions { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.admin-actions form { display:flex; flex-wrap:wrap; gap:8px; }
.admin-actions button { border:0; border-radius:10px; padding:10px 13px; font:700 11px Inter; cursor:pointer; border: 1px solid var(--line); font-family: sans-serif;}
.admin-approve { background:#e5f8ed; color:#11683a; }
.admin-reject { background:#fff0f0; color:#923333; }
.admin-pending { background:#edf3fa; color:#465d78; }
.admin-empty { padding:40px; text-align:center; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:20px; }

@media(max-width:760px) {
  .preview-stage { grid-template-columns:1fr; }
  .admin-entry { grid-template-columns:1fr; }
  .admin-preview { min-height:220px; }
  .admin-entry dl { grid-template-columns:1fr 1fr; }
  .admin-title { align-items:start; flex-direction:column; }
  .admin-title h1 { font-size:38px; }
}
@media(max-width:520px) {
  .admin-entry dl { grid-template-columns:1fr; }
}


/* =========================================================
   RECHTLICHE UNTERSEITEN
   ========================================================= */
.legal-main {
    min-height: 70vh;
}

.legal-hero {
    max-width: 1040px;
    margin: 0 auto;
    padding: 90px 28px 45px;
}

.legal-hero h1 {
    max-width: none;
    margin: 14px 0 20px;
    font-size: clamp(48px, 7vw, 49px);
    line-height: 1;
    letter-spacing: -.055em;
}

.legal-hero > p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

.legal-content {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 28px 110px;
}

.legal-content h2 {
    margin: 46px 0 14px;
    padding-top: 4px;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.025em;
    color: var(--navy);
}

.legal-content p {
    max-width: 860px;
    margin: 0 0 16px;
    color: #52647a;
    font-size: 14px;
    line-height: 1.85;
}

.legal-content a {
    color: var(--blue);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-note {
    max-width: 860px;
    margin: 0 0 48px;
    padding: 22px 24px;
    border: 1px solid #cfe4ff;
    border-radius: 18px;
    background: #f4f9ff;
}

.legal-note strong {
    display: block;
    margin-bottom: 7px;
    color: var(--blue);
    font-size: 13px;
    letter-spacing: .03em;
}

.legal-note p {
    margin: 0;
    color: #52647a;
}

.check a {
    color: var(--blue);
    font-weight: 700;
}

@media (max-width: 560px) {
    .legal-hero {
        padding: 58px 18px 32px;
    }

    .legal-hero h1 {
        font-size: 36px;
    }

    .legal-content {
        padding: 0 18px 80px;
    }

    .legal-content h2 {
        margin-top: 38px;
        font-size: 20px;
    }

    .legal-note {
        padding: 18px;
    }
}


/* Kachelbeschriftung und Nummer – mobile Optimierung */
@media (max-width: 560px) {
    .company-number {
        top: 9px;
        left: 9px;
        min-height: 24px;
        padding: 5px 7px;
        font-size: 9px;
    }

    .company-overlay {
        gap: 7px;
        padding: 34px 10px 10px;
    }

    .company-overlay h3 {
        font-size: 10px;
    }

    .company-overlay p {
        margin-bottom: 0;
        font-size: 8px;
    }
}


/* =========================================================
   AUTOMATISCHE LÜCKENFÜLLER DER KACHELWAND
   =========================================================
   Werden per JavaScript nur dann erzeugt, wenn durch die
   Kombination aus SMALL / BUSINESS / PREMIUM innerhalb des
   Grids ein freies Rasterfeld entstehen würde.
*/
.grid-gap-filler {
    pointer-events: none;
    border-style: dashed;
    border-color: #b8d8ff;
    background: #fbfdff;
}

.grid-gap-filler .company-mark {
    color: #e8f2ff;
}

.grid-gap-filler .company-mark span {
    color: #d7eaff;
}

.grid-gap-filler h3 {
    color: var(--ink);
}

.grid-gap-filler p {
    color: var(--muted);
}

.vorschau {
	
	    font-size: 8px;
}


/* =========================================================
   FIRMENWAND – DEZENTER 3D-EFFEKT
   ========================================================= */
.wall-grid {
    perspective:1400px;
    perspective-origin:50% 45%;
    transform-style:preserve-3d;
}
.wall-grid > .company {
    transform-style:preserve-3d;
    transform:translateZ(0);
    box-shadow:0 2px 2px rgba(7,28,57,.035),0 5px 8px rgba(7,28,57,.045),0 10px 18px rgba(7,28,57,.055);
    transition:transform .25s ease,box-shadow .25s ease;
    will-change:transform;
}
.wall-grid > .company::after {
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    bottom:-4px;
    height:5px;
    border-radius:0 0 14px 14px;
    background:rgba(7,28,57,.07);
    opacity:.55;
    pointer-events:none;
    z-index:-1;
}
.wall-grid > .company:hover {
    transform:translateY(-4px) translateZ(14px);
    box-shadow:0 4px 5px rgba(7,28,57,.045),0 11px 18px rgba(7,28,57,.075),0 22px 38px rgba(7,28,57,.09);
}
.wall-grid > .user-company .company-upload {
    transform:translateZ(1px);
}
.wall-grid > .user-company:hover .company-upload {
    transform:translateZ(1px) scale(1.025);
}
.wall-grid > .user-company .company-number,
.wall-grid > .user-company .arrow,
.wall-grid > .user-company .company-overlay {
    transform:translateZ(3px);
}
.wall-grid > .grid-gap-filler:hover {
    transform:translateZ(0);
}
@media (hover:none) {
    .wall-grid > .company:hover {
        transform:translateZ(0);
        box-shadow:0 2px 2px rgba(7,28,57,.035),0 5px 8px rgba(7,28,57,.045),0 10px 18px rgba(7,28,57,.055);
    }
    .wall-grid > .user-company:hover .company-upload {
        transform:translateZ(1px);
    }
}
@media (prefers-reduced-motion:reduce) {
    .wall-grid > .company,
    .wall-grid > .user-company .company-upload {
        transition:none;
    }
}


/* Founding 100 – Textabstände für den erweiterten Inhalt */
.founder-text {
    max-width:720px;
}
.founder-text p {
    max-width:100%;
    margin:18px 0 0;
}
.founder-text p:first-child {
    margin-top:24px;
}
.founder-text strong {
    color:#fff;
}

/* Founding #0001 */
#standardPackagePills[hidden],
#founderPackagePills[hidden] {
    display:none !important;
}


/* === FIRMENWAND Buchung: Unternehmer-, AGB- und Rückerstattungsbestätigung === */
.order-legal {
    display: grid;
    gap: 14px;
    margin-top: 4px;
    padding: 20px;
    border: 1px solid #dbe5ef;
    border-radius: 16px;
    background: #f7fbff;
}

.order-legal-title {
    color: var(--navy);
    font-size: 13px;
}

.order-legal .check {
    align-items: flex-start;
    margin: 0;
}

.order-legal .check input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
}

.order-legal .check span {
    color: #5f7187;
    font-size: 11px;
    line-height: 1.65;
}

.order-legal .check a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

footer > div:nth-child(2) {
    flex-wrap: wrap;
}

@media (max-width: 560px) {
    .order-legal {
        padding: 17px;
    }

    footer > div:nth-child(2) {
        gap: 12px 11px;
    }
}

/* =========================================================
   FIRMENWAND – LOGOS RESPONSIVE
   Mobile Optimierung für Header- und Footer-Logo
   ========================================================= */
@media (max-width: 560px) {
    .site-header { height: 110px; }
    .brand { height: 100%; min-width: 0; overflow: visible; }
    .brand img {
        width: 170px !important;
        height: 104px !important;
        max-width: 250px;
        object-fit: contain;
        object-position: left center;
        clip-path: none;
        margin: 0 0 0 4px !important;
    }
    .footer-brand img {
        width: 310px !important;
        max-width: 100%;
        height: auto !important;
        object-fit: contain;
        margin-left: 0 !important;
    }
    .footer-brand-txt { margin-left: 0 !important; }
}
@media (max-width: 560px) {
.legal-head h1 {
    margin: 12px 0 0;
    font-size: clamp(33px, 6vw, 68px) !important;
    line-height: 1;
    letter-spacing: -.05em;
}}