/* ============================================================================
   ALUMONT — Design-System
   Markenfarben aus den Original-Assets extrahiert:
     #006f3d  Bildmarke (logo-gruen.png) + dominante Farbe auf alumont.com
     #004d00  Wortmarke "Alumont – ProfiL am Bau"
   ========================================================================== */

/* ── Farb-Token ─────────────────────────────────────────────────────────── */
:root {
  /* Marke */
  --brand:          #006f3d;
  --brand-deep:     #004d00;
  --brand-hover:    #005c32;
  --brand-soft:     #e8f3ed;
  --brand-ring:     rgba(0, 111, 61, .28);

  /* Flaechen */
  --bg:             #f7f8f7;
  --bg-elevated:    #ffffff;
  --bg-sunken:      #eef0ee;
  --bg-inverse:     #10201a;

  /* Text */
  --fg:             #16201b;
  --fg-muted:       #5d6b63;
  --fg-subtle:      #8a968f;
  --fg-on-brand:    #ffffff;

  /* Linien */
  --line:           #dde2df;
  --line-strong:    #c3ccc7;

  /* Status */
  --ok:             #1a7f4b;
  --ok-soft:        #e3f4ea;
  --warn:           #a86a00;
  --warn-soft:      #fdf1dc;
  --info:           #10607d;
  --info-soft:      #e2f0f5;
  --idle:           #8a968f;
  --idle-soft:      #eef0ee;

  /* Metall-Akzent (Aluminium) */
  --metal: linear-gradient(135deg, #e9ecea 0%, #f7f8f7 25%, #d9dedb 50%, #f2f4f3 75%, #e3e7e5 100%);

  /* Form */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 32, 26, .06), 0 1px 3px rgba(16, 32, 26, .04);
  --shadow:    0 2px 4px rgba(16, 32, 26, .05), 0 8px 20px rgba(16, 32, 26, .07);
  --shadow-lg: 0 8px 16px rgba(16, 32, 26, .07), 0 24px 48px rgba(16, 32, 26, .11);

  --maxw: 1200px;
  --header-h: 72px;

  --ff: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;

  color-scheme: light;
}

/* ── Dark Mode ──────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --brand:          #2f9e6a;
  --brand-deep:     #1d7a4d;
  --brand-hover:    #3cb37a;
  --brand-soft:     #14291f;
  --brand-ring:     rgba(47, 158, 106, .35);

  --bg:             #0e1512;
  --bg-elevated:    #161f1b;
  --bg-sunken:      #0a100d;
  --bg-inverse:     #f7f8f7;

  --fg:             #e6ece8;
  --fg-muted:       #9aa8a0;
  --fg-subtle:      #6f7d75;
  --fg-on-brand:    #06140d;

  --line:           #253029;
  --line-strong:    #35443b;

  --ok:             #4ab97a;  --ok-soft:   #13291d;
  --warn:           #d9a13f;  --warn-soft: #2a2113;
  --info:           #4aa8c4;  --info-soft: #12262d;
  --idle:           #6f7d75;  --idle-soft: #1a231e;

  --metal: linear-gradient(135deg, #1c2521 0%, #232d28 25%, #161f1b 50%, #26312b 75%, #1a231f 100%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 4px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 24px rgba(0,0,0,.45), 0 32px 64px rgba(0,0,0,.55);

  color-scheme: dark;
}

/* ── Basis ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1em; }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); font-size: .875rem; }
.mono { font-family: var(--ff-mono); font-size: .9em; }
.center { text-align: center; }
.hide { display: none !important; }

:focus-visible {
  outline: 3px solid var(--brand-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 100%; }
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo img { height: 50px; width: auto; display: block; }
/* Im Dark Mode behält das Logo seine Originalfarben. Statt einer weißen
   Fläche liegt eine 1 px dünne weiße Kontur direkt an der Form — erzeugt aus
   vier versetzten Schlagschatten OHNE Weichzeichnung. Dadurch ändert sich die
   Größe des Logos nicht, und es glüht auch nicht. */
:root[data-theme="dark"] .logo img {
  background: none; padding: 0; box-shadow: none;
  /* SVG-Filter statt drop-shadow: erzeugt eine harte 0,5-px-Kontur.
     drop-shadow blendet immer weich aus und wirkt dadurch wie ein Glühen. */
  filter: url(#logo-kontur);
}
.logo-text { font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.logo-text small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-subtle); margin-top: -2px; }

.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav > a, .nav-drop-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 11px; border-radius: var(--r-sm); color: var(--fg-muted);
  font-weight: 550; font-size: .875rem; text-decoration: none; white-space: nowrap;
  background: none; border: none; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.nav > a:hover, .nav-drop-btn:hover { background: var(--bg-sunken); color: var(--fg); text-decoration: none; }
.nav > a.active, .nav-drop-btn.active { color: var(--brand); background: var(--brand-soft); }
.caret { width: 14px; height: 14px; transition: transform .18s; }

/* Untermenü „Produkte" */
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 130; min-width: 292px;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 7px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-drop:hover .nav-drop-menu, .nav-drop.offen .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-drop:hover .caret, .nav-drop.offen .caret { transform: rotate(180deg); }
.nav-drop-menu a {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: var(--r-sm); font-size: .88rem; color: var(--fg-muted);
  text-decoration: none; transition: background .13s, color .13s;
}
.nav-drop-menu a:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.nav-drop-alle { font-weight: 700; color: var(--fg) !important; border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important; margin-bottom: 5px; padding-bottom: 11px !important; }
.nav-drop-konf { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 11px !important;
  font-weight: 650; color: var(--brand) !important; }
.nav-drop-konf svg { width: 16px; height: 16px; }

/* Flaggen */
svg.flagge {
  width: 20px; height: 14px; border-radius: 2px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; display: block;
}

.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 600; font-size: .945rem; cursor: pointer; white-space: nowrap;
  transition: background .16s, border-color .16s, transform .08s, box-shadow .16s;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--fg-on-brand); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--fg); }
.btn-ghost:hover { background: var(--bg-sunken); border-color: var(--brand); color: var(--brand); }
.btn-subtle { background: var(--bg-sunken); color: var(--fg); }
.btn-subtle:hover { background: var(--line); }
.btn-sm { padding: 7px 13px; font-size: .865rem; }
.btn-lg { padding: 15px 30px; font-size: 1.03rem; }
.btn-icon {
  width: 40px; height: 40px; padding: 0; border-radius: var(--r);
  background: transparent; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--fg-muted); transition: all .16s;
}
.btn-icon:hover { background: var(--bg-sunken); color: var(--brand); border-color: var(--brand); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--bg-elevated); border-bottom: 1px solid var(--line); }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: var(--metal); opacity: .55;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 18%, var(--brand-ring), transparent 65%),
    repeating-linear-gradient(90deg, transparent 0 62px, color-mix(in srgb, var(--fg) 5%, transparent) 62px 63px);
  opacity: .7;
}
.hero .wrap { position: relative; z-index: 1; padding: clamp(64px, 10vw, 118px) 24px; }
.hero-inner { max-width: 700px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .77rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft);
  padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 22px;
}
.hero h1 { margin-bottom: .35em; }
.hero h1 .accent { color: var(--brand); }
.hero-lead { font-size: clamp(1.05rem, 2vw, 1.24rem); color: var(--fg-muted); max-width: 56ch; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero mit Bildkachel neben dem Text */
.hero-raster {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.hero-kachel {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}
.hero-kachel img { width: 100%; height: auto; display: block; }
.hero-kachel figcaption {
  padding: 10px 16px; font-size: .82rem; color: var(--fg-muted);
  border-top: 1px solid var(--line); background: var(--bg-elevated);
}
@media (max-width: 900px) {
  .hero-raster { grid-template-columns: 1fr; }
  .hero-kachel { max-width: 520px; }
}


/* Kennzahlenband: volle Breite als Flaeche, Inhalt auf Content-Breite */
.stat-band {
  position: relative; z-index: 1;
  background: var(--bg-elevated); border-top: 1px solid var(--line);
}
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px 32px;
}
.stat { padding: 26px 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 32px; }
.stat b { display: block; font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800;
  color: var(--brand); letter-spacing: -.03em; line-height: 1.1; }
.stat span { font-size: .845rem; color: var(--fg-muted); }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding: clamp(56px, 8vw, 92px) 0; }
.section-alt { background: var(--bg-elevated); border-block: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--fg-muted); font-size: 1.06rem; margin-bottom: 0; }

/* ── Karten / Raster ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card-link:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); cursor: pointer; }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

.card-icon {
  width: 46px; height: 46px; border-radius: var(--r);
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card-icon svg { width: 24px; height: 24px; }

/* Produktkarte mit Profil-Silhouette */
.prod-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.prod-visual {
  height: 132px; background: var(--metal); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.prod-visual svg { width: 76%; height: 68%; overflow: visible; }
.prod-visual svg path, .prod-visual svg polyline {
  fill: none; stroke: var(--brand); stroke-width: 5;
  stroke-linecap: square; stroke-linejoin: miter;
}
.prod-body { padding: 22px 24px 24px; flex: 1; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 650; letter-spacing: .01em;
  background: var(--idle-soft); color: var(--idle);
}
.badge-ok   { background: var(--ok-soft);   color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-brand{ background: var(--brand-soft); color: var(--brand); }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.demo-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, var(--warn-soft) 0 8px, transparent 8px 16px);
  color: var(--warn); border: 1px dashed var(--warn);
  padding: 3px 9px; border-radius: var(--r-sm);
}

/* ── Formulare ──────────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .855rem; font-weight: 650; margin-bottom: 6px; color: var(--fg); }
.field .hint { font-size: .79rem; color: var(--fg-subtle); margin-top: 5px; }
.input, .select, .textarea {
  width: 100%; padding: 11px 14px;
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--r); transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
.textarea { min-height: 104px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Kontaktformular ────────────────────────────────────────────────────── */
/* Unsichtbares Feld gegen automatisierte Einsendungen. Bewusst nicht
   display:none — manche Automaten prüfen darauf. */
.honigtopf {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.k-meldung {
  margin: 14px 0 0; padding: 11px 14px; border-radius: var(--r); font-size: .89rem;
}
.k-meldung.fehler { background: #fdeceb; color: #b3261e; border: 1px solid #f3c4c0; }
:root[data-theme="dark"] .k-meldung.fehler { background: #2b1614; color: #ff9d94; border-color: #55211c; }
.k-anhaenge { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.k-upload-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.k-upload {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r);
  font-size: .9rem; font-weight: 600; color: var(--fg-muted); transition: all .15s;
}
.k-upload:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.k-upload svg { width: 18px; height: 18px; }
.k-dateiliste { list-style: none; padding: 0; margin: 12px 0 0; }
.k-dateiliste li {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px;
  background: var(--bg-sunken); border-radius: var(--r-sm); font-size: .88rem;
}
.k-dateiliste li span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-datei-weg {
  border: none; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1;
  color: var(--fg-subtle); padding: 0 4px;
}
.k-datei-weg:hover { color: #b3261e; }

.k-danke { text-align: center; padding: 22px 6px; }
.k-danke .card-icon { margin: 0 auto 16px; }
.k-danke h3 { margin-bottom: .3em; }
.k-danke p { margin: 0; }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elevated); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left; padding: 13px 16px; font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--fg-subtle);
  background: var(--bg-sunken); border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; transition: background .13s; }
tbody tr.clickable:hover { background: var(--brand-soft); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #006f3d 0%, #004d00 100%);
  color: #eef5f0; padding: 56px 0 28px; margin-top: 0;
}
:root[data-theme="dark"] .site-footer {
  background: linear-gradient(160deg, #044a2c 0%, #02310a 100%);
  color: #dfeae3;
}
/* Zeichenlinien laufen auch im Footer weiter */
.site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
}
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer a { color: inherit; opacity: .84; }
.site-footer a:hover { opacity: 1; }
.site-footer h4 { color: #fff; opacity: .72; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 36px; margin-bottom: 40px; }
.footer-grid h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; font-size: .92rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .855rem; opacity: .7;
}

/* ── Portal ─────────────────────────────────────────────────────────────── */
.portal { min-height: calc(100vh - var(--header-h)); }

.login-shell {
  display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - var(--header-h));
}
.login-aside {
  background: var(--bg-inverse); color: var(--bg);
  padding: clamp(44px, 6vw, 76px); display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
:root[data-theme="dark"] .login-aside { color: var(--bg-sunken); }
.login-aside::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 20% 80%, var(--brand-ring), transparent 70%);
}
.login-aside > * { position: relative; z-index: 1; }
.login-aside h2 { color: inherit; }
.login-aside ul { list-style: none; padding: 0; margin: 26px 0 0; }
.login-aside li { display: flex; gap: 12px; margin-bottom: 15px; opacity: .88; font-size: .97rem; }
.login-aside li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand); margin-top: 2px; }

.login-main { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 5vw, 64px); }
.login-box { width: 100%; max-width: 400px; }
.login-box h2 { margin-bottom: .3em; }

.demo-hint {
  background: var(--warn-soft); border: 1px dashed var(--warn);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 24px; font-size: .87rem;
}
.demo-hint b { color: var(--warn); }
.demo-hint dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.demo-hint dt { color: var(--fg-muted); }
.demo-hint dd { margin: 0; font-family: var(--ff-mono); font-size: .93em; }

/* Portal-Layout */
/* Höhe exakt auf das Fenster begrenzen: gescrollt wird nur der Inhaltsbereich,
   nicht die ganze Seite. Sonst bleiben ein paar Pixel Seiten-Scroll übrig. */
.portal-shell {
  display: grid; grid-template-columns: 244px 1fr;
  height: calc(100vh - var(--header-h)); overflow: hidden;
}
.portal-side {
  background: var(--bg-elevated); border-right: 1px solid var(--line);
  padding: 16px 14px; height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
/* Sachbearbeiter-Block und Abmelden bleiben unten */
.portal-side .sb-card { margin-top: auto; }
.portal-main {
  padding: 26px clamp(18px, 2.5vw, 36px) 40px; min-width: 0;
  height: 100%; overflow-y: auto;
}

.kunde-card {
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: var(--r); padding: 11px 13px; margin: 0; flex-shrink: 0;
}
.kunde-card .knr { font-family: var(--ff-mono); font-size: .72rem; color: var(--brand); font-weight: 700; }
.kunde-card strong { display: block; font-size: .9rem; margin: 2px 0 1px; line-height: 1.25; }
.kunde-card .subtle { font-size: .78rem; line-height: 1.3; display: block; }

.side-nav { list-style: none; padding: 0; margin: 0; flex-shrink: 0; }
.side-nav li { margin-bottom: 2px; }
.side-nav button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: none; background: transparent; border-radius: var(--r);
  cursor: pointer; text-align: left; font-weight: 550; font-size: .89rem; color: var(--fg-muted);
  transition: background .14s, color .14s;
}
.side-nav button:hover { background: var(--bg-sunken); color: var(--fg); }
.side-nav button.active { background: var(--brand); color: var(--fg-on-brand); }
.side-nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.side-nav .count {
  margin-left: auto; font-size: .74rem; font-weight: 700;
  background: var(--bg-sunken); color: var(--fg-muted); padding: 2px 8px; border-radius: var(--r-pill);
}
.side-nav button.active .count { background: rgba(255,255,255,.22); color: inherit; }

.sb-card { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; flex-shrink: 0; }
.sb-kopf { display: flex; gap: 10px; align-items: center; }
.sb-kopf strong { display: block; font-size: .89rem; line-height: 1.25; }
.sb-kopf.klein strong { font-size: .84rem; }
.sb-kopf .subtle { font-size: .78rem; line-height: 1.3; }

.sb-foto {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--brand-soft); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.sb-foto img { width: 100%; height: 100%; object-fit: cover; }
.sb-foto.ini { background: var(--brand); color: var(--fg-on-brand); font-weight: 700; font-size: .9rem; }
.sb-kopf.klein .sb-foto { width: 32px; height: 32px; }

.sb-kontakt { display: flex; gap: 6px; margin-top: 10px; }
.sb-kontakt .btn { flex: 1; padding: 6px 8px; font-size: .8rem; }
.sb-kontakt svg { width: 14px; height: 14px; }
.sb-nr { margin: 6px 0 0; font-size: .76rem; color: var(--fg-muted); text-align: center; }
.sb-vertretung { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.sb-vertretung .subtle { display: block; margin-bottom: 6px; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .07em; }
.sb-vertretung .demo-tag { margin-left: auto; }

.chat-head .sb-foto { width: 40px; height: 40px; }
.chat-head-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-head-tools svg { width: 15px; height: 15px; }

.page-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .25em; }
.page-head p { margin: 0; color: var(--fg-muted); }
.page-head .spacer { margin-left: auto; }

/* Auftragsliste */
.auftrag-item {
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; margin-bottom: 14px; cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.auftrag-item:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.auftrag-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.auftrag-nr { font-family: var(--ff-mono); font-weight: 700; color: var(--brand); font-size: .93rem; }
.auftrag-item h3 { font-size: 1.06rem; margin: 0 0 4px; }
.auftrag-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .855rem; color: var(--fg-muted); }
.auftrag-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Fortschrittsbalken */
.progress { display: flex; gap: 3px; margin-top: 14px; }
.progress i {
  height: 5px; flex: 1; border-radius: 3px; background: var(--bg-sunken); display: block;
}
.progress i.done  { background: var(--brand); }
.progress i.early { background: var(--ok); }

/* Meilenstein-Timeline */
.timeline { position: relative; padding-left: 6px; }
.tl-item { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding-bottom: 26px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: 16px; top: 30px; bottom: -4px;
  width: 2px; background: var(--line);
}
.tl-item:last-child::before { display: none; }
.tl-item.done::before { background: var(--brand); }
.tl-dot {
  width: 34px; height: 34px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken); border: 2px solid var(--line); color: var(--fg-subtle);
}
.tl-item.done .tl-dot { background: var(--brand); border-color: var(--brand); color: var(--fg-on-brand); }
.tl-item.next .tl-dot { border-color: var(--brand); color: var(--brand); border-style: dashed; background: var(--bg-elevated); }
.tl-dot svg { width: 17px; height: 17px; }
.tl-body { padding-top: 5px; }
.tl-body strong { display: block; font-size: .99rem; }
.tl-date { font-size: .865rem; color: var(--fg-muted); font-family: var(--ff-mono); }
.tl-note { font-size: .82rem; margin-top: 3px; }

/* Chat */
.chat-box {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-elevated); display: flex; flex-direction: column; height: 560px;
}
.chat-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-sunken);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.chat-head .avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: var(--fg-on-brand);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .92rem;
}
.chat-log { flex: 1; overflow-y: auto; padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 76%; }
.msg .bubble {
  padding: 12px 16px; border-radius: var(--r-lg); font-size: .935rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.msg .meta { font-size: .74rem; color: var(--fg-subtle); margin-top: 5px; padding-inline: 4px; }
.msg.me { align-self: flex-end; }
.msg.me .bubble { background: var(--brand); color: var(--fg-on-brand); border-color: var(--brand); border-bottom-right-radius: var(--r-sm); }
.msg.me .meta { text-align: right; }
.msg.them .bubble { border-bottom-left-radius: var(--r-sm); }
.chat-input { border-top: 1px solid var(--line); padding: 14px 16px; display: flex; gap: 10px; align-items: flex-end; }
.chat-input .textarea { min-height: 44px; max-height: 120px; }

/* Konfigurator */
.konf-shell { display: grid; grid-template-columns: 1fr 420px; gap: 26px; align-items: start; }
.konf-canvas {
  background: var(--metal); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; position: sticky; top: calc(var(--header-h) + 20px);
}
/* Zeichenfläche begrenzt: alles muss innerhalb des viewBox liegen, sonst
   ragen Beschriftungen aus der Karte heraus. */
.konf-canvas svg { width: 100%; height: auto; overflow: hidden; }
.konf-svg-profile { fill: none; stroke: var(--brand); stroke-width: 6; stroke-linejoin: miter; stroke-linecap: square; }
.konf-svg-dim { stroke: var(--fg-muted); stroke-width: 1.2; }
.konf-svg-label { fill: var(--fg-muted); font-size: 13px; font-family: var(--ff-mono); }
.konf-svg-klein { fill: var(--fg-subtle); font-size: 11px; font-family: var(--ff); }
/* Hilfslinien laufen von der Kontur zur Maßlinie */
.konf-svg-hilfe { stroke: var(--fg-subtle); stroke-width: .9; stroke-dasharray: 3 3; opacity: .8; }
.konf-svg-winkel { fill: none; stroke: var(--fg-muted); stroke-width: 1.2; }
.konf-svg-winkeltext { fill: var(--fg-muted); font-size: 11px; font-family: var(--ff-mono); }

/* Abwicklung: Blechtafel mit gestrichelten Kantlinien */
.konf-svg-blech {
  fill: color-mix(in srgb, var(--brand) 9%, transparent);
  stroke: var(--brand); stroke-width: 2.5;
}
.konf-kantlinie { stroke: var(--brand); stroke-width: 1.6; stroke-dasharray: 7 5; opacity: .75; }

/* Räumliche Ansicht: hintere Kontur und Verbindungskanten zurückgenommen */
.konf-svg-hinten {
  fill: none; stroke: var(--brand); stroke-width: 3; opacity: .32;
  stroke-linejoin: miter; stroke-linecap: square;
}
.konf-svg-kante { stroke: var(--brand); stroke-width: 2; opacity: .45; }

/* Umschaltleiste der Ansichten */
.ansicht-wahl {
  display: flex; gap: 4px; margin-bottom: 18px; padding: 4px;
  background: color-mix(in srgb, var(--bg-sunken) 70%, transparent);
  border: 1px solid var(--line); border-radius: var(--r); width: fit-content;
}
.ansicht-wahl button {
  padding: 7px 15px; border: none; background: transparent; border-radius: var(--r-sm);
  cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--fg-muted);
  transition: background .15s, color .15s;
}
.ansicht-wahl button:hover { color: var(--brand); }
.ansicht-wahl button.sel {
  background: var(--bg-elevated); color: var(--brand); box-shadow: var(--shadow-sm);
}
.konf-zeichnung { min-height: 210px; display: flex; align-items: center; }

/* ── Farbauswahl: aufklappbare Liste aller RAL-Töne ─────────────────────── */
.farb-wahl {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; background: var(--bg); cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  transition: border-color .15s;
}
.farb-wahl:hover { border-color: var(--brand); }
.farb-wahl .swatch {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}
.farb-wahl-text { flex: 1; text-align: left; line-height: 1.25; }
.farb-wahl-text strong { display: block; font-size: .93rem; }
.farb-wahl-text small { color: var(--fg-muted); font-size: .8rem; }
.farb-wahl .caret { color: var(--fg-muted); transition: transform .18s; }
.farb-wahl[aria-expanded="true"] .caret { transform: rotate(180deg); }

.farb-panel {
  display: none; margin-top: 8px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-elevated); box-shadow: var(--shadow);
}
.farb-panel.offen { display: block; }
.farb-liste { max-height: 340px; overflow-y: auto; margin-top: 10px; }
.farb-gruppe {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg-subtle); padding: 12px 4px 6px; position: sticky; top: 0;
  background: var(--bg-elevated);
}
.farb-gruppe span { font-weight: 500; opacity: .7; }
.farb-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 5px; }
.farb-eintrag {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; text-align: left; width: 100%;
}
.farb-eintrag:hover { background: var(--bg-sunken); }
.farb-eintrag.sel { border-color: var(--brand); background: var(--brand-soft); }
.farb-eintrag .swatch {
  width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}
.farb-nr { font-family: var(--ff-mono); font-size: .76rem; font-weight: 700; }
.farb-name { font-size: .76rem; color: var(--fg-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.farb-favoriten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 9px;
}

.farb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 9px; }
.farb-chip {
  position: relative;
  border: 1.5px solid var(--line-strong); border-radius: var(--r); padding: 0; cursor: pointer;
  overflow: hidden; background: var(--bg-elevated);
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.farb-chip:hover { transform: translateY(-2px); border-color: var(--brand); }

/* Feiner Rahmen um die Farbfläche selbst — sonst verschwimmen helle Töne
   wie Verkehrsweiß mit dem Kartenhintergrund. */
.farb-chip .swatch {
  height: 44px; display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22);
}
:root[data-theme="dark"] .farb-chip .swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }

/* Ausgewählt: kräftiger Rahmen, Ring und Haken auf der Farbfläche */
.farb-chip.sel {
  border-color: var(--brand); border-width: 2px;
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.farb-chip.sel::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand) center/11px 11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
:root[data-theme="dark"] .farb-chip.sel::after { box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); }
.farb-chip.sel .lbl { color: var(--brand); }
.farb-chip .lbl { display: block; padding: 5px 4px; font-size: .68rem; font-weight: 650; line-height: 1.25; }
.farb-chip .lbl small { display: block; color: var(--fg-subtle); font-weight: 500; }

.preis-box {
  background: var(--brand); color: var(--fg-on-brand); border-radius: var(--r-lg);
  padding: 22px 24px; margin-top: 20px;
}
.preis-box .zeile {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 5px 0; font-size: .9rem; opacity: .88;
}
.preis-box .zeile span:last-child { text-align: right; font-weight: 600; }
.preis-box .total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid rgba(255,255,255,.28); margin-top: 12px; padding-top: 14px;
}
.preis-box .total b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.preis-box .auf-anfrage { white-space: nowrap; }

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  padding: 8px 14px; border: 1px solid var(--line-strong); background: var(--bg);
  border-radius: var(--r); cursor: pointer; font-size: .875rem; font-weight: 600;
  color: var(--fg-muted); transition: all .14s;
}
.seg button:hover { border-color: var(--brand); color: var(--brand); }
.seg button.sel { background: var(--brand); border-color: var(--brand); color: var(--fg-on-brand); }

/* Datenqualitaets-Hinweis */
.dq-note {
  background: var(--info-soft); border-left: 3px solid var(--info);
  padding: 13px 16px; border-radius: 0 var(--r) var(--r) 0; font-size: .87rem; margin-bottom: 22px;
}

/* ── Bearbeitungsmodus in der Vorschau ──────────────────────────────────────
   Kopfzeile und Fußzeile werden hier nicht gepflegt und daher ausgeblendet.
   Die Seitenwahl übernimmt die Verwaltung. Sämtliche Verweise, Schaltflächen
   und Formularfelder sind stillgelegt, damit Klicks ausschließlich dem
   Bearbeiten dienen und nicht wegnavigieren.                                */
.bearbeiten-an .site-header,
.bearbeiten-an .site-footer,
.bearbeiten-an .slider-steuerung,
.bearbeiten-an .slider-aktionen,
.bearbeiten-an .hero-actions { display: none !important; }

.bearbeiten-an body { padding-bottom: 46px; }

/* In der Vorschau läuft nichts: keine Animation, kein Übergang, nichts
   Verstecktes. Alles ist sofort vollständig sichtbar und anklickbar. */
.bearbeiten-an *,
.bearbeiten-an *::before,
.bearbeiten-an *::after {
  animation: none !important;
  transition: none !important;
}
.bearbeiten-an [data-anim] {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}
.bearbeiten-an .weld::after { width: 100% !important; }
.bearbeiten-an .weld::before { display: none !important; }
.bearbeiten-an .section-alt::before { transform: scaleX(1) !important; }
.bearbeiten-an .slide.aktiv { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.bearbeiten-an .slide-logo, .bearbeiten-an .slide-titel { opacity: 1 !important; transform: none !important; }

.bearbeiten-an a,
.bearbeiten-an button,
.bearbeiten-an input,
.bearbeiten-an select,
.bearbeiten-an textarea,
.bearbeiten-an .card-link,
.bearbeiten-an .auftrag-item,
.bearbeiten-an .farb-chip { pointer-events: none !important; }

/* Bearbeitbares bleibt anklickbar — auch innerhalb stillgelegter Bereiche */
.bearbeiten-an [data-inhalt],
.bearbeiten-an [data-inhalt-bild],
.bearbeiten-an [data-inhalt-unbekannt],
.bearbeiten-an .bearb-box,
.bearbeiten-an .bearb-box * { pointer-events: auto !important; }

/* Statusleiste am unteren Rand der Vorschau */
.bearb-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
  background: var(--brand); color: #fff; font-size: .82rem;
  padding: 9px 16px; text-align: center; pointer-events: none;
}
.bearb-leiste b { font-weight: 700; }
.bearb-leiste.warnung { background: #a8480a; }

.bearbeiten-an [data-inhalt],
.bearbeiten-an [data-inhalt-bild] {
  outline: 1px dashed color-mix(in srgb, var(--brand) 60%, transparent);
  outline-offset: 2px; cursor: text;
}
.bearbeiten-an [data-inhalt-bild] { cursor: pointer; position: relative; }
.bearbeiten-an [data-inhalt]:hover {
  outline: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.bearbeiten-an [data-inhalt-bild]:hover { outline: 2px solid var(--brand); }

/* Nicht zuordenbar: sichtbar, aber zurückhaltend — ein Klick erklärt warum */
.bearbeiten-an [data-inhalt-unbekannt] {
  outline: 1px dotted color-mix(in srgb, var(--fg-subtle) 55%, transparent);
  outline-offset: 2px; cursor: help;
}
.bearbeiten-an [data-inhalt-unbekannt]:hover {
  outline-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.bearb-hinweis {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 58px; z-index: 890;
  background: #2a2f2c; color: #fff; padding: 11px 18px; border-radius: var(--r);
  font-size: .86rem; max-width: min(560px, 90vw); box-shadow: var(--shadow-lg);
}

.bearb-box {
  position: absolute; z-index: 900; width: min(360px, calc(100vw - 24px));
  background: var(--bg-elevated); border: 1px solid var(--brand);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 12px;
}
.bearb-pfad {
  font-family: var(--ff-mono); font-size: .68rem; color: var(--fg-subtle); margin-bottom: 7px;
}
.bearb-box input, .bearb-box textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font: inherit; font-size: .9rem; resize: vertical;
  background: var(--bg); color: var(--fg);
}
.bearb-box input:focus, .bearb-box textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
.bearb-anim {
  display: block; margin-top: 10px; font-size: .78rem; color: var(--fg-muted); font-weight: 600;
}
.bearb-anim select {
  width: 100%; margin-top: 5px; padding: 7px 9px; font-size: .85rem; font-weight: 400;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg);
}
.bearb-knoepfe { display: flex; gap: 8px; margin-top: 10px; }
.bearb-knoepfe button {
  flex: 1; padding: 7px 12px; border-radius: var(--r-sm); cursor: pointer;
  font-size: .85rem; font-weight: 600; border: 1px solid var(--line-strong);
  background: transparent; color: var(--fg);
}
.bearb-knoepfe [data-ok] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Zeichenblatt im Hintergrund ────────────────────────────────────────────
   Angedeutetes Millimeterpapier mit betonten Hauptlinien — läuft hinter allen
   Inhalten mit, wie ein technisches Blatt unter der Seite.                  */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--riss-stark) 1px, transparent 1px),
    linear-gradient(90deg, var(--riss-stark) 1px, transparent 1px),
    linear-gradient(var(--riss) 1px, transparent 1px),
    linear-gradient(90deg, var(--riss) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
  background-position: -1px -1px;
}
/* Bemaßungsartige Akzente an den Rändern */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, var(--riss-stark) 0 2px, transparent 2px),
    radial-gradient(circle at 88% 62%, var(--riss-stark) 0 2px, transparent 2px),
    radial-gradient(circle at 34% 84%, var(--riss-stark) 0 2px, transparent 2px);
}
:root { --riss: rgba(0, 111, 61, .055); --riss-stark: rgba(0, 111, 61, .11); }
:root[data-theme="dark"] { --riss: rgba(120, 200, 160, .045); --riss-stark: rgba(120, 200, 160, .085); }

/* Flächen leicht durchscheinend, damit das Blatt überall sichtbar bleibt.
   --flaeche = Grundton der Karten, --flaeche-satt für Bereiche, die mehr
   Ruhe brauchen (Tabellen, Chat, Formulare).                              */
:root {
  --flaeche:      color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  --flaeche-satt: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}
body { background: var(--bg); }
.section-alt { background: color-mix(in srgb, var(--bg-elevated) 62%, transparent); }

.card, .bild-kachel, .table-scroll, .chat-box, .produkt-skizze, .auftrag-item, .sb-card {
  background: var(--flaeche);
  backdrop-filter: blur(2px);
}
.hero { background: color-mix(in srgb, var(--bg-elevated) 55%, transparent); }
/* Zeichen- und Produktflächen behalten die Aluminium-Textur, nur abgeschwächt */
.prod-visual, .konf-canvas, .ohne-bild, .produkt-skizze {
  background: var(--metal); opacity: .97;
}
.input, .select, .textarea { background: var(--flaeche-satt); }
th { background: color-mix(in srgb, var(--bg-sunken) 80%, transparent); }
.portal-side { background: var(--flaeche-satt); }
.kunde-card { backdrop-filter: blur(2px); }

/* Bild- und Zeichnungsflächen bleiben deckend, sonst leidet die Lesbarkeit */
.bild-kachel img { background: var(--bg-elevated); }

/* ── Bildslider ─────────────────────────────────────────────────────────── */
.slider {
  position: relative; overflow: hidden;
  height: clamp(400px, 62vh, 660px);
  background: var(--bg-inverse);
  border-bottom: 1px solid var(--line);
}
.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 1.1s ease, transform 8s linear, visibility 1.1s;
  transform: scale(1.06);
}
/* Echtes Bildelement statt CSS-Variable — zuverlässiger und lädt priorisiert */
.slide-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.slide::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,20,12,.30) 0%, rgba(4,20,12,.05) 38%, rgba(4,20,12,.72) 100%),
    radial-gradient(ellipse 60% 55% at 50% 46%, transparent 40%, rgba(4,20,12,.42) 100%);
}
.slide.aktiv { opacity: 1; visibility: visible; transform: scale(1); }

.slide-inhalt {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 0 24px 90px; text-align: center;
}
.slide-logo {
  width: min(330px, 62vw); filter: drop-shadow(0 6px 20px rgba(0,0,0,.5));
  opacity: 0; transform: translateY(18px);
}
.slide.aktiv .slide-logo { animation: bau-auf .85s .18s ease-out forwards; }
.slide-titel {
  color: #fff; margin: 0; font-size: clamp(1.5rem, 3.6vw, 2.7rem); font-weight: 800;
  letter-spacing: -.02em; text-shadow: 0 4px 26px rgba(0,0,0,.6);
  max-width: 22ch; opacity: 0; transform: translateY(20px);
}
.slide.aktiv .slide-titel { animation: bau-auf .85s .38s ease-out forwards; }

.slider-aktionen {
  position: absolute; left: 0; right: 0; bottom: 74px; z-index: 4;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 0 24px;
}
.slider-aktionen .auf-bild {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff;
  backdrop-filter: blur(6px);
}
.slider-aktionen .auf-bild:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }

.slider-steuerung {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.slider-pfeil {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.34); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background .16s, border-color .16s;
}
.slider-pfeil:hover { background: rgba(255,255,255,.26); border-color: #fff; }
.slider-pfeil svg { width: 18px; height: 18px; }
.slider-pfeil[data-slider="vor"] svg { transform: rotate(180deg); }

.slider-punkte { display: flex; gap: 9px; }
.slider-punkte button {
  width: 34px; height: 4px; border-radius: 2px; border: none; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.36); transition: background .2s, width .2s;
}
.slider-punkte button.aktiv { background: var(--brand); width: 52px; }

.slider-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5;
  background: rgba(255,255,255,.14); }
.slider-balken i { display: block; height: 100%; width: 0; background: var(--brand); }
@keyframes slider-lauf { from { width: 0 } to { width: 100% } }

@media (max-width: 760px) {
  .slider { height: clamp(340px, 56vh, 460px); }
  .slider-aktionen { bottom: 66px; }
  .slider-aktionen .btn { padding: 11px 18px; font-size: .9rem; }
}

/* ── Aufbau-Animation („wie auf der Baustelle montiert“) ────────────────── */
@keyframes bau-auf { to { opacity: 1; transform: none } }

[data-anim] { opacity: 0; will-change: opacity, transform; }
[data-anim="bau"]  { transform: translateY(26px) scale(.985); }
[data-anim="auf"]  { transform: translateY(16px); }
[data-anim].sichtbar {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.22,.9,.3,1) var(--verzoegerung, 0ms),
              transform .62s cubic-bezier(.22,.9,.3,1) var(--verzoegerung, 0ms);
}

/* Tiefenwirkung für das Kanten — ohne Perspektive kippt nichts räumlich */
.grid, .bild-grid, .stat-strip, .timeline { perspective: 1500px; }

/* ANKANTEN: das Blech steht senkrecht und klappt an der Oberkante in die Lage.
   Deutlich langsam, mit sichtbarem Nachfedern wie im Anschlag der Kantbank.  */
[data-anim="kante"] {
  transform: perspective(1200px) rotateX(-90deg) translateY(-14px);
  transform-origin: 50% 0%;
}
[data-anim="kante"].sichtbar {
  transform: perspective(1200px) rotateX(0) translateY(0);
  transition: transform 1.05s cubic-bezier(.16,1.42,.34,1) var(--verzoegerung, 0ms),
              opacity .5s ease-out var(--verzoegerung, 0ms);
}

/* STANZEN: hart, kurz, ohne Federn — das Teil wird aus der Tafel geschlagen */
[data-anim="stanze"] {
  transform: scale(1.3);
  clip-path: inset(30% 30% 30% 30% round 18px);
}
[data-anim="stanze"].sichtbar {
  transform: none; clip-path: inset(0 0 0 0 round 14px);
  transition: transform .34s cubic-bezier(.9,.02,.72,.36) var(--verzoegerung, 0ms),
              clip-path .34s cubic-bezier(.9,.02,.72,.36) var(--verzoegerung, 0ms),
              opacity .16s linear var(--verzoegerung, 0ms);
  animation: stanz-schlag .8s calc(var(--verzoegerung, 0ms) + .3s) both;
}
@keyframes stanz-schlag {
  0%   { box-shadow: 0 0 0 0 rgba(0,111,61,.75); }
  40%  { box-shadow: 0 0 0 14px rgba(0,111,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,111,61,0); }
}

/* PRESSEN: von oben eingeschlagen, staucht und schwingt aus */
[data-anim="presse"] { transform: translateY(-40px) scaleY(1.6) scaleX(.86); }
[data-anim="presse"].sichtbar {
  transform: none;
  transition: transform .82s cubic-bezier(.2,1.8,.36,1) var(--verzoegerung, 0ms),
              opacity .3s ease-out var(--verzoegerung, 0ms);
}

/* ZUSCHNITT: die Trennwand fährt wie ein Schnitt von links auf */
.section-alt { position: relative; }
.section-alt::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  transform: scaleX(0); transform-origin: left;
}
.section-alt.sichtbar::before {
  animation: zuschnitt 1.1s cubic-bezier(.3,.85,.3,1) forwards;
}
@keyframes zuschnitt {
  0%   { transform: scaleX(0);   box-shadow: 0 0 14px 2px rgba(255,190,80,.9); }
  70%  { transform: scaleX(.85); box-shadow: 0 0 10px 2px rgba(255,160,50,.5); }
  100% { transform: scaleX(1);   box-shadow: none; }
}

/* Schweißnaht unter Überschriften: zieht sich glühend auf und kühlt aus.
   Die Naht selbst ist ::after, der laufende Funke ::before.               */
.weld { position: relative; display: block; padding-bottom: .34em; }
.weld::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  height: 3px; width: 0; border-radius: 2px;
  background: var(--brand); opacity: .9;
}
.weld::before {
  content: ''; position: absolute; bottom: -3.5px; left: 0; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%; opacity: 0; margin-left: -5px;
  background: radial-gradient(circle, #fff 0 25%, #ffd27a 45%, rgba(255,150,30,0) 72%);
}
.weld.geschweisst::after { animation: schweiss-naht 1.35s cubic-bezier(.3,.8,.35,1) forwards; }
.weld.geschweisst::before { animation: schweiss-funke 1.35s cubic-bezier(.3,.8,.35,1) forwards; }
/* Fertige Naht ohne Animation — nach Bedien-Aktualisierungen */
.weld.naht-fertig::after { width: 100%; animation: none; }
.weld.naht-fertig::before { display: none; }

/* Die Naht läuft über die volle Breite und trennt Überschrift und Text */
@keyframes schweiss-naht {
  0%   { width: 0;    background: #fff6d8; box-shadow: 0 0 22px 5px rgba(255,200,90,.95); }
  40%  { width: 45%;  background: #ffab2e; box-shadow: 0 0 18px 4px rgba(255,150,30,.75); }
  72%  { width: 82%;  background: #cf7a1e; box-shadow: 0 0 10px 2px rgba(220,120,20,.4); }
  100% { width: 100%; background: var(--brand); box-shadow: 0 0 0 0 rgba(0,111,61,0); }
}
@keyframes schweiss-funke {
  0%   { left: 0;    opacity: 1; transform: scale(1.3); }
  40%  { left: 45%;  opacity: 1; transform: scale(1.1); }
  85%  { left: 94%;  opacity: 1; transform: scale(.85); }
  100% { left: 100%; opacity: 0; transform: scale(.4); }
}

/* Systemeinstellung „Bewegung reduzieren“ respektieren — außer die Seite wurde
   mit ?anim=1 aufgerufen, dann setzt html.anim-erzwungen das außer Kraft. */
@media (prefers-reduced-motion: reduce) {
  html:not(.anim-erzwungen) [data-anim],
  html:not(.anim-erzwungen) [data-anim].sichtbar {
    opacity: 1; transform: none; transition: none; animation: none;
    clip-path: none;
  }
  html:not(.anim-erzwungen) .section-alt::before { transform: scaleX(1); animation: none; }
  html:not(.anim-erzwungen) .weld::after { width: 100%; animation: none; }
  html:not(.anim-erzwungen) .weld::before { display: none; }
  html:not(.anim-erzwungen) .slide-logo,
  html:not(.anim-erzwungen) .slide-titel { opacity: 1; transform: none; animation: none; }
  html:not(.anim-erzwungen) .slide { transition: opacity .2s; transform: none; }
}

/* ── Hero mit Foto ──────────────────────────────────────────────────────── */
.hero-bild::before {
  background: var(--hero-bg) center/cover no-repeat;
  opacity: .28; filter: saturate(.85);
}
:root[data-theme="dark"] .hero-bild::before { opacity: .18; }
.hero-bild::after {
  background:
    linear-gradient(100deg, var(--bg-elevated) 18%, color-mix(in srgb, var(--bg-elevated) 55%, transparent) 58%, transparent 82%),
    radial-gradient(ellipse 70% 60% at 82% 20%, var(--brand-ring), transparent 68%);
  opacity: 1;
}

/* ── Bildraster und Kacheln ─────────────────────────────────────────────── */
.bild-grid { display: grid; gap: 14px; }
.bild-grid.zwei   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bild-grid.drei   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bild-grid.vier   { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.bild-grid.fuenf  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.bild-grid.sechs  { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.bild-kachel {
  margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--bg-elevated); transition: border-color .18s, box-shadow .18s;
}
.bild-kachel:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.bild-kachel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; display: block; }
.bild-kachel.zeichnung img { aspect-ratio: auto; object-fit: contain; background: #fff; padding: 14px; }

/* Technische Zeichnungen halb so groß darstellen — sie füllten sonst die
   halbe Seitenbreite. Zum Vergrößern genügt ein Klick (Lightbox). */
.bild-grid.zeichnungen {
  grid-template-columns: repeat(auto-fill, minmax(180px, 240px));
  justify-content: start;
}
.bild-grid.zeichnungen .bild-kachel img { max-height: 260px; padding: 10px; }
.bild-kachel figcaption {
  padding: 10px 14px; font-size: .82rem; color: var(--fg-muted);
  border-top: 1px solid var(--line);
}

.prod-foto { width: 100%; height: 100%; object-fit: cover; }
.prod-visual:has(.prod-foto) { padding: 0; }

.verfahren-bild img { width: 100%; aspect-ratio: 16/8; object-fit: cover; cursor: zoom-in; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
#lightbox {
  position: fixed; inset: 0; z-index: 500; display: none;
  background: rgba(8, 16, 12, .88); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 40px 24px;
}
#lightbox.offen { display: flex; }
#lightbox figure { margin: 0; max-width: 1100px; max-height: 100%; }
#lightbox img {
  max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain;
  border-radius: var(--r); box-shadow: var(--shadow-lg);
}
#lightbox figcaption { color: #fff; text-align: center; margin-top: 14px; font-size: .93rem; opacity: .85; }
.lb-zu {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%;
  font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .15s;
}
.lb-zu:hover { background: rgba(255,255,255,.24); }

/* ── Produkt-Detail ─────────────────────────────────────────────────────── */
.produkt-kopf {
  display: flex; gap: 32px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 26px;
}
.produkt-kopf h1 { margin-bottom: .2em; }
.produkt-skizze {
  background: var(--metal); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 26px; min-width: 260px;
}
.produkt-skizze svg { width: 100%; height: auto; overflow: visible; }
.produkt-skizze svg polyline, .produkt-skizze svg path {
  fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: square;
}
.produkt-text { max-width: 74ch; }
.produkt-text p { color: var(--fg-muted); }

/* ── Team ───────────────────────────────────────────────────────────────── */
.person { text-align: center; }
.person-bild {
  width: 108px; height: 108px; margin: 0 auto 14px; border-radius: 50%;
  overflow: hidden; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line);
}
.person-bild img { width: 100%; height: 100%; object-fit: cover; }
.person-initialen { font-size: 1.7rem; font-weight: 800; color: var(--brand); }
.person strong { display: block; font-size: 1.02rem; }
.person .subtle { display: block; margin-bottom: 8px; }
.person-mail { font-size: .82rem; word-break: break-all; }

/* ── Listen, Dokumente, Angebots-Karte ──────────────────────────────────── */
.haken { list-style: none; padding: 0; margin: 0 0 16px; }
.haken li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.haken svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; margin-top: 3px; }

.fragen { list-style: none; padding: 0; margin: 0 0 18px; }
.fragen li { color: var(--fg-muted); margin-bottom: 5px; }

.doc-liste { list-style: none; padding: 0; margin: 12px 0 0; }
.doc-liste li { margin-bottom: 7px; }
.doc-liste a { display: flex; gap: 9px; align-items: center; font-size: .9rem; }
.doc-liste svg { width: 17px; height: 17px; flex-shrink: 0; }

.doc-card { text-decoration: none; display: block; }
.doc-card:hover { border-color: var(--brand); box-shadow: var(--shadow); text-decoration: none; }
.doc-card strong { display: block; margin-bottom: 3px; color: var(--fg); }

.angebot-card {
  display: flex; gap: 32px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 26%, transparent);
}

/* ── Produkt ohne belegtes Foto ─────────────────────────────────────────── */
.ohne-bild {
  margin-top: 34px; background: var(--metal); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px; text-align: center;
}
.ohne-bild svg { width: min(420px, 100%); height: auto; overflow: visible; margin: 0 auto 16px; display: block; }
.ohne-bild svg polyline, .ohne-bild svg path {
  fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: square;
}
.ohne-bild p { max-width: 54ch; margin: 0 auto; }

/* ── Suche ──────────────────────────────────────────────────────────────── */
.suche { position: relative; }
.suche-feld {
  width: 160px; height: 40px; padding: 0 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  font-size: .875rem; transition: width .18s, border-color .15s;
}
.suche-feld:focus { outline: none; width: 220px; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.suche-treffer {
  position: absolute; right: 0; top: 46px; min-width: 288px; z-index: 140;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; display: none;
}
.suche-treffer.offen { display: block; }
.suche-treffer button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: transparent; border: none; border-radius: var(--r-sm); cursor: pointer;
  font-size: .88rem; text-align: left; color: var(--fg);
}
.suche-treffer button:hover { background: var(--brand-soft); color: var(--brand); }
.suche-treffer svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .65; }

/* ── Sprachumschalter ───────────────────────────────────────────────────── */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; font-size: .85rem; font-weight: 650; color: var(--fg-muted);
}
.lang-btn:hover { border-color: var(--brand); color: var(--brand); }
.lang-menu {
  position: absolute; right: 0; top: 46px; min-width: 172px; z-index: 120;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; display: none;
}
.lang-menu.offen { display: block; }
.lang-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  background: transparent; border: none; border-radius: var(--r-sm); cursor: pointer;
  font-size: .9rem; text-align: left; color: var(--fg);
}
.lang-menu button:hover { background: var(--bg-sunken); }
.lang-menu button.sel { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.flagge { font-size: 1.15rem; line-height: 1; }

.lang-hinweis {
  display: flex; align-items: center; gap: 10px;
  background: var(--info-soft); border-left: 3px solid var(--info);
  padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0; font-size: .87rem;
  margin: 0 0 22px;
}
.lang-hinweis svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--info); }

/* Sicherheitsnetz: Icons in Textkontexten skalieren mit der Schrift */
.btn svg, .eyebrow svg, .auftrag-meta svg, .badge svg, .dq-note svg {
  width: 1.05em; height: 1.05em; flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .konf-shell { grid-template-columns: 1fr; }
  .konf-canvas { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  /* Auf schmalen Geräten wieder normaler Seitenfluss */
  .portal-shell { grid-template-columns: 1fr; height: auto; overflow: visible;
    min-height: calc(100vh - var(--header-h)); }
  .portal-side {
    height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--line);
    padding: 14px; display: block;
  }
  .portal-main { height: auto; overflow: visible; }
  .side-nav { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 0; }
  .side-nav li { flex-shrink: 0; }
  .side-nav .count { display: none; }
  .kunde-card, .sb-card { display: none; }
}
/* Ab hier wird die Hauptnavigation zum Aufklappmenü */
@media (max-width: 1180px) {
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    background: var(--bg-elevated); border-bottom: 1px solid var(--line);
    padding: 12px; gap: 2px; box-shadow: var(--shadow-lg);
  }
  .nav > a, .nav-drop-btn { padding: 12px 14px; font-size: .96rem; width: 100%; justify-content: space-between; }
  .nav-drop { width: 100%; }
  .nav-drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid var(--line);
    border-radius: 0; margin: 2px 0 6px 14px; padding: 0 0 0 8px;
    display: none; min-width: 0;
  }
  .nav-drop.offen .nav-drop-menu { display: block; }
  .nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; }
  .nav-drop:not(.offen):hover .nav-drop-menu { display: none; }
  .nav-toggle { display: inline-flex !important; }
}
@media (min-width: 1181px) { .nav-toggle { display: none; } }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .row { grid-template-columns: 1fr; }
  .msg { max-width: 88%; }
  .logo img { height: 40px; }
  .header-tools .lang-btn span:last-child { display: none; }
  .suche { display: none; }
}
@media (max-width: 1180px) {
  .suche-feld { width: 128px; }
  .suche-feld:focus { width: 170px; }
}