/* Swiss Storage Solutions – im Stil von redqube.de (apps/web/src/styles.css) */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url(fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url(fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url(fonts/inter-700.woff2) format('woff2'); }

:root {
  --primary: #C8102E;
  --primary-light: #E8455C;
  --primary-dark: #9A0C23;
  --secondary: #1A1A2E;
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-500: #737373;
  --gray-700: #404040;
  --gray-800: #262626;
  --weiss: #fff;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--gray-700); background: var(--weiss); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-light); }
h1, h2, h3, h4 { color: var(--gray-800); line-height: 1.2; }
h1 { font-size: 44px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 30px; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
p + p { margin-top: 12px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 64px; }
.schmal { max-width: 860px; }

.topbar { background: var(--secondary); color: #fff; font-size: 13px; }
.topbar .wrap { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 40px; }
.topbar a { color: #fff; }
.trenn { opacity: .4; }

.kopf { position: sticky; top: 0; z-index: 1100; background: var(--weiss); border-bottom: 1px solid var(--gray-200); }
.kopf .wrap { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.logo img { width: 206px; }
.kopf nav { display: flex; gap: 28px; margin-left: auto; }
.kopf nav a { color: var(--gray-800); font-size: 15px; font-weight: 500; }
.kopf nav a:hover { color: var(--primary); }
.burger { display: none; margin-left: auto; background: none; border: 0; font-size: 26px; color: var(--gray-800); cursor: pointer; }

.btn { display: inline-block; background: var(--primary); color: #fff; font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: var(--radius-md); border: 0; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--primary-light); color: #fff; }
.btn-klein { padding: 9px 16px; font-size: 13px; }
.btn-ghost { font-weight: 600; font-size: 15px; }
.btn-ghost:hover { text-decoration: underline; }

.hero { background: var(--gray-50); padding: 80px 0; }
.hero-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.marke { color: var(--primary); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.lead { font-size: 18px; color: var(--gray-500); margin: 20px 0 32px; line-height: 1.6; }
.knoepfe { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hero-bild img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.zahlen { background: var(--primary); color: #fff; padding: 36px 0; }
.zahlen-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.zahlen b { display: block; font-size: 28px; font-weight: 700; }
.zahlen span { font-size: 14px; opacity: .9; }

.abschnitt { padding: 80px 0; }
.grau { background: var(--gray-50); }
.mitte { text-align: center; }
.unter { color: var(--gray-500); margin-bottom: 28px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.mitte-y { align-items: center; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rund { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.weiss { background: #fff; padding: 24px; }
.karte { background: var(--weiss); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px; }
.karte ul { list-style: none; }
.karte li { padding: 6px 0 6px 22px; position: relative; border-top: 1px solid var(--gray-100); }
.karte li::before { content: ''; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; background: var(--primary); border-radius: 2px; }
.nr { color: var(--primary); font-weight: 700; font-size: 14px; }

.fakten { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 20px 0 28px; }
.fakten dt { font-weight: 600; color: var(--gray-800); }

.zeitleiste { list-style: none; border-left: 3px solid var(--primary); padding-left: 28px; }
.zeitleiste li { position: relative; padding-bottom: 22px; }
.zeitleiste li::before { content: ''; position: absolute; left: -37px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--weiss); border: 3px solid var(--primary); }
.zeitleiste b { color: var(--primary); font-size: 17px; }
.zeitleiste p { margin-top: 2px; }

.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 28px; }
.kachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.kachel:hover img { opacity: .9; }
.sprung { margin-bottom: 32px; }
.hinweis { color: var(--gray-500); background: var(--gray-100); border-radius: var(--radius-md); padding: 20px; margin-bottom: 28px; }
h2[id^="phase-"] { margin-top: 24px; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: grid; place-items: center; z-index: 1500; cursor: zoom-out; padding: 16px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 92vh; width: auto; border-radius: var(--radius-md); }

.formular { display: grid; gap: 14px; }
.formular label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--gray-800); }
.formular input, .formular textarea { font: inherit; padding: 11px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.formular .btn { justify-self: start; }

.text h1 { margin-bottom: 24px; }
.text h2 { font-size: 22px; margin-top: 32px; }

.fuss { background: var(--secondary); color: #c9c9d4; padding: 56px 0 24px; font-size: 14px; }
.fuss a { color: #fff; }
.fuss h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.fuss-raster { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.fuss-logo { background: #fff; padding: 8px 10px; border-radius: var(--radius-md); margin-bottom: 14px; width: 226px; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; font-size: 13px; }

@media (max-width: 1023px) {
  .wrap { padding: 0 32px; }
  .kopf nav { gap: 18px; }
  .galerie { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .burger { display: block; }
  .nur-desktop { display: none; }
  .kopf nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--weiss); border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); }
  .kopf nav.auf { display: flex; }
  .kopf nav a { padding: 14px 16px; border-top: 1px solid var(--gray-100); }
}
@media (max-width: 767px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .logo img { width: 170px; }
  .hero { padding: 40px 0; }
  .hero-raster, .zwei, .drei, .fuss-raster { grid-template-columns: 1fr; gap: 28px; }
  .zwei > *, .drei > *, .hero-raster > * { min-width: 0; }
  .zahlen-raster { grid-template-columns: 1fr 1fr; }
  .zahlen b { font-size: 22px; }
  .abschnitt { padding: 48px 0; }
  .galerie { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .fakten { grid-template-columns: 1fr; gap: 2px; }
  .fakten dd { margin-bottom: 10px; }
  .topbar .wrap { font-size: 12px; flex-wrap: wrap; }
}