:root {
  --bg: #050816;
  --bg-light: #0b1020;
  --accent: #ffcc00;
  --accent-soft: rgba(255, 204, 0, 0.15);
  --text: #f5f5f5;
  --muted: #a0a6b8;
  --radius-lg: 1.5rem;
  --radius-md: 1rem;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.45);
  --transition-fast: 0.2s ease-out;
  --spacing: 1.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #141b3a 0, #050816 60%);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
}

.main {
  flex: 1;
}

.content {
  min-height: 100vh;
  max-width: 1920px;
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------- */
/* HERO / HEADER                                      */
/* -------------------------------------------------- */

.hero {
  padding: 3.5rem 1.5rem 2.5rem;
  display: flex;
  justify-content: center;
}

.hero-inner {
  width: 100%;
  display: flex;
  align-items: start;
  flex-direction: column-reverse;
  gap: 2rem;
  justify-content: space-between;
}

.hero-brand {
  flex-shrink: 0;
}

.hero-logo {
  max-width: 260px;
  width: 100%;
  height: auto;
  display: block;
}

.hero-content {
  text-align: left;
}

.hero h1 {
  font-size: clamp(2.3rem, 4vw, 3rem);
  margin: 0 0 0.75rem;
}

.hero p {
  margin: 0 0 1.5rem;
  max-width: 35rem;
  color: var(--muted);
}

/* Button im Header */
.hero-btn {
  display: inline-flex;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
  background var(--transition-fast);
}

.hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
  background: #ffd633;
}

.main {
  flex: 1;
}

/* -------------------------------------------------- */
/* SECTION STYLES                                     */
/* -------------------------------------------------- */

.section {
  padding: 2.25rem 0 3.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section > * {
  width: 100%;
}

.section h2 {
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}

.section-subtitle {
  margin: 0 0 1.75rem;
  color: var(--muted);
}

/* -------------------------------------------------- */
/* CARDS / GRID                                       */
/* -------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing);
}

.card {
  position: relative;
  background: linear-gradient(145deg, var(--bg-light), #06091a);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
  border-color var(--transition-fast), background 0.25s ease-out;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255, 204, 0, 0.2), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
}

.card:hover::before {
  opacity: 1;
}

/* Tag oben (z. B. "Eventtechnik") */
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.8rem;
}

/* LOGO in den Kacheln */
.card-logo-wrapper {
  margin-bottom: 0.7rem;
  display: flex;
  justify-content: flex-start;
}

.card-logo {
  max-height: 60px;
  width: auto;
  display: block;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.card p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Link unten in der Karte */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  padding-bottom: 0.1rem;
  border-bottom: 1px solid rgba(255, 204, 0, 0.4);
  transition: gap var(--transition-fast), color var(--transition-fast),
  border-color var(--transition-fast);
}

.card-link::after {
  content: "↗";
  font-size: 0.85rem;
}

.card-link:hover {
  gap: 0.5rem;
  color: #ffd633;
  border-color: rgba(255, 214, 51, 0.7);
}

/* -------------------------------------------------- */
/* FOOTER                                             */
/* -------------------------------------------------- */

.footer {
  padding: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  justify-content: center;
  flex: 1;
  max-height: 65px;
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: -2px;
  height: 1px;
  background: #bcbaba;
  width: 96vw;
  max-width: 1400px;
}

.footer > div,
.footer > p {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}



.footer a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
}

.footer a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .hero-inner {
    flex-direction: row;
  }

  .footer {

  }
}

/* -------------------------------------------------- */
/* NAVIGATION / LAYOUT (EMSE Site)                     */
/* -------------------------------------------------- */

:root{
  --max: 1400px;
}

.content{
  width: 100%;
  padding: 0;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(5, 8, 22, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.site-header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo{
  height: 38px;
  width: auto;
  display: block;
}

.nav{
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-link{
  color: var(--muted);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.nav-link:hover{
  color: var(--text);
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.nav-link.is-active{
  color: #000;
  background: var(--accent);
}

.nav-toggle{
  display: none;
  border: 0;
  background: rgba(255,255,255,0.06);
  border-radius: 0.9rem;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
}

.nav-toggle-bar{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 4px 0;
  border-radius: 2px;
  opacity: 0.9;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* -------------------------------------------------- */
/* HERO VARIANTS                                      */
/* -------------------------------------------------- */

.hero{
  padding: 2.75rem 0 1.75rem;
}

.hero-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-weight: 650;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
}

.hero-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.btn-secondary{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.btn-secondary:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
}

.hero-metrics{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.metric{
  background: linear-gradient(145deg, var(--bg-light), #06091a);
  border-radius: var(--radius-lg);
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-soft);
}

.metric .value{
  font-weight: 900;
  font-size: 1.15rem;
}

.metric .label{
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* -------------------------------------------------- */
/* CONTENT ELEMENTS                                   */
/* -------------------------------------------------- */

.split{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.25rem;
  align-items: start;
}

.panel{
  background: linear-gradient(145deg, var(--bg-light), #06091a);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.35rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-soft);
}

.list-check{
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}

.list-check li{
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0;
  color: var(--muted);
}

.list-check li::before{
  content: "✓";
  color: var(--accent);
  font-weight: 900;
}

.badges{
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  font-weight: 650;
  font-size: 0.85rem;
}

.kpi-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing);
}

/* -------------------------------------------------- */
/* FORM                                               */
/* -------------------------------------------------- */

.form{
  display: grid;
  gap: 0.9rem;
}

.field{
  display: grid;
  gap: 0.35rem;
}

.label{
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}

.input, .textarea, .select{
  width: 100%;
  padding: 0.85rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(6, 9, 26, 0.9);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.textarea{
  min-height: 140px;
  resize: vertical;
}

.input:focus, .textarea:focus, .select:focus{
  border-color: rgba(255, 204, 0, 0.55);
}

.help{
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.checkbox{
  display: flex;
  gap: 0.6rem;
  align-items: start;
  color: var(--muted);
  font-size: 0.9rem;
}

.checkbox input{
  margin-top: 0.25rem;
}

.notice{
  margin-top: 0.65rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  border: 1px dashed rgba(255,255,255,0.16);
  color: var(--muted);
  background: rgba(255,255,255,0.03);
}

/* -------------------------------------------------- */
/* FOOTER FIX                                         */
/* -------------------------------------------------- */

.footer--site{
  max-height: none;
  flex: 0;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.footer--site::before{
  width: calc(100% - 2.5rem);
  max-width: var(--max);
  left: 50%;
  transform: translateX(-50%);
}

/* -------------------------------------------------- */
/* RESPONSIVE                                         */
/* -------------------------------------------------- */

@media screen and (max-width: 920px){
  .split{
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 860px){
  .nav-toggle{
    display: inline-block;
  }

  .nav{
    position: fixed;
    right: 1rem;
    top: 4.4rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.6rem;
    width: min(360px, calc(100vw - 2rem));
    border-radius: 1.25rem;
    background: rgba(5, 8, 22, 0.92);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--shadow-soft);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }

  .nav.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-link{
    padding: 0.75rem 0.9rem;
    border-radius: 1rem;
  }

  .form-row{
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


/* EMSE logo PNG tweaks */
.brand-logo{image-rendering:auto;}

/* -------------------------------------------------- */
/* EMSE UPDATE v5: Dark dashboard vibe + Gelb solid    */
/* -------------------------------------------------- */

:root{
  /* Fokus: EMSE Gelb (OHNE Verlauf) */
  --accent: #ffcc00;

  /* Akzente (nur punktuell) */
  --accent-2: #2b8cff;   /* Blau */
  --accent-3: #22c55e;   /* Grün */
  --accent-4: #ef4444;   /* Rot */
  --accent-5: #a855f7;   /* Violett */
  --accent-6: #f97316;   /* Orange */

  /* zurück zu dunklerem Look wie im Ausgangsdesign */
  --bg: #050816;
  --bg-light: #0b1020;

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --shadow-soft: 0 20px 55px rgba(0,0,0,0.35);
}

/* Darker background, no loud blobs */
body{
  background:
    radial-gradient(circle at top, rgba(255,204,0,0.08), transparent 42%),
    linear-gradient(180deg, #050816 0%, #070b1b 55%, #050816 100%);
}

/* Active nav: solid yellow */
.nav-link.is-active{
  color: #000 !important;
  background: var(--accent) !important;
}

/* Card tag: solid yellow (no gradient) */
.card-tag{
  background: var(--accent) !important;
  color: #000 !important;
  border: 0 !important;
}

/* Make links pop subtly on hover */
a:hover{
  color: rgba(255,204,0,0.95);
}

/* -------------------------------------------------- */
/* Image scaling fixes (Leistungen/Referenzen)         */
/* -------------------------------------------------- */

.showcase-card img,
.case-media img{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

/* Slightly nicer frame */
.showcase-card,
.case-card{
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.12));
}

.case-card .card-tag{
  display: inline-flex !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap;
}

/* -------------------------------------------------- */
/* Mini Web-UI App (Mac window)                        */
/* -------------------------------------------------- */

.mac-window{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  box-shadow: var(--shadow-soft);
}

.mac-titlebar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.traffic-lights{
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
}

.light{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}

.light.red{ background: var(--accent-4); }
.light.yellow{ background: var(--accent); }
.light.green{ background: var(--accent-3); }

.mac-title{
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.fake-url{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}

.app-shell{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: 520px;
}

.app-nav{
  padding: 1rem;
  border-right: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}

.app-nav h3{
  margin: 0 0 0.75rem 0;
  font-size: 1.05rem;
}

.app-tabs{
  display: grid;
  gap: 0.5rem;
}

.app-tab{
  text-align: left;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.88);
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.app-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
}

.app-tab.is-active{
  border-color: rgba(255,204,0,0.55);
  background: rgba(255,204,0,0.10);
}

.app-hint{
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.app-content{
  padding: 1rem 1rem 1.1rem;
}

.app-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  padding: 1rem;
}

.app-row{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
}

.app-row + .app-row{
  margin-top: 1rem;
}

.table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
}

.table th, .table td{
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align: left;
  vertical-align: middle;
  color: rgba(255,255,255,0.88);
  font-size: 0.92rem;
}

.table th{
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.2px;
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
  font-weight: 750;
}

.pill.ok{ border-color: rgba(34,197,94,0.35); }
.pill.warn{ border-color: rgba(255,204,0,0.45); }
.pill.err{ border-color: rgba(239,68,68,0.35); }

.btn-mini{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.btn-mini:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); }
.btn-mini.primary{
  border-color: rgba(255,204,0,0.55);
  background: rgba(255,204,0,0.14);
}

.btn-mini.danger{
  border-color: rgba(239,68,68,0.50);
  background: rgba(239,68,68,0.10);
}

.input-mini, .select-mini{
  width: 100%;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  outline: none;
}

.input-mini:focus, .select-mini:focus{
  border-color: rgba(255,204,0,0.55);
}

.small-muted{
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

@media screen and (max-width: 980px){
  .app-shell{ grid-template-columns: 1fr; }
  .app-nav{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .app-row{ grid-template-columns: 1fr; }
}

/* -------------------------------------------------- */
/* Toast + Terminal (v7)                               */
/* -------------------------------------------------- */

.toast{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.toast.is-show{
  opacity: 1;
  transform: translateY(0);
}

.toast-inner{
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,204,0,0.40);
  background: rgba(10, 14, 34, 0.92);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  min-width: min(420px, calc(100vw - 2rem));
}

.toast-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(255,204,0,0.14);
  border: 1px solid rgba(255,204,0,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.toast-title{
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
}

.toast-msg{
  margin-top: 0.15rem;
  color: rgba(255,255,255,0.70);
  font-size: 0.93rem;
}

.term-block{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  padding: 0.9rem;
}

.term-title{
  font-weight: 900;
  margin-bottom: 0.6rem;
}

.term-log{
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.80);
  max-height: 160px;
  overflow: auto;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
}

/* Classic black + green "hacker" terminal (inside Mac window) */
.terminal{
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,0.28);
  background: #050607;
  overflow: hidden;
}

.term-screen{
  height: 240px;
  overflow: auto;
  padding: 0.85rem 0.9rem;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(34,197,94,0.92);
}

.term-input-row{
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid rgba(34,197,94,0.18);
  background: rgba(0,0,0,0.35);
}

.term-prompt{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  color: rgba(34,197,94,0.92);
  white-space: nowrap;
}

.term-input{
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: rgba(34,197,94,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
}

.kpi-mini{
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.kpi-val{
  font-weight: 900;
  font-size: 1.6rem;
  margin-top: 0.15rem;
}

/* -------------------------------------------------- */
/* Demo Suite v8: charts + Mathes Cloud + cinematic    */
/* -------------------------------------------------- */

.mini-divider{ height:1px; background:rgba(255,255,255,0.10); margin:1rem 0; }

.chart-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:.9rem; }
.chart-card{ border-radius:16px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); padding:.9rem; }
.chart-title{ font-weight:900; margin-bottom:.75rem; color:rgba(255,255,255,0.90); }

.bar-list{ display:grid; gap:.6rem; }
.bar-row{ display:grid; grid-template-columns: 1fr 2fr auto; gap:.65rem; align-items:center; }
.bar-label{ color:rgba(255,255,255,0.78); font-size:.9rem; }
.bar-track{ height:10px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.bar-fill{ height:100%; border-radius:999px; background:var(--accent); }
.bar-val{ color:rgba(255,255,255,0.74); font-weight:850; font-size:.9rem; }

.kpi-grid-omq{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem; margin-top:.85rem; }
.kpi-box{ padding:1rem; border-radius:16px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); }
.kpi-box .kpi-val{ font-weight:950; font-size:1.65rem; margin-top:.15rem; }

/* Segmented control */
.segmented{ display:inline-flex; gap:.5rem; padding:.35rem; border-radius:999px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); flex-wrap:wrap; }
.seg-btn{ padding:.55rem .8rem; border-radius:999px; border:1px solid transparent; background:transparent; color:rgba(255,255,255,0.86); font-weight:900; cursor:pointer; }
.seg-btn.is-active{ border-color:rgba(255,204,0,0.45); background:rgba(255,204,0,0.12); }

/* Package cards */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem; }
.pkg-card{ text-align:left; border-radius:18px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); padding:.9rem; cursor:pointer; transition:transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }
.pkg-card:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.06); }
.pkg-card.is-active{ border-color:rgba(255,204,0,0.45); background:rgba(255,204,0,0.10); }
.pkg-title{ font-weight:950; }
.pkg-desc{ color:rgba(255,255,255,0.70); margin-top:.25rem; }
.pkg-meta{ color:rgba(255,255,255,0.60); margin-top:.6rem; font-size:.9rem; }

/* Sliders */
.slider-row{ display:grid; grid-template-columns: 170px 1fr 48px; gap:.75rem; align-items:center; }
.slider-label{ color:rgba(255,255,255,0.78); font-weight:850; }
.slider-val{ text-align:right; color:rgba(255,255,255,0.86); font-weight:950; }
input[type="range"]{ width:100%; }

/* Image cards */
.img-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.65rem; }
.img-card{ text-align:left; border-radius:16px; border:1px solid rgba(255,255,255,0.10); background:rgba(0,0,0,0.18); padding:.8rem; cursor:pointer; transition:transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }
.img-card:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.06); }
.img-card.is-active{ border-color:rgba(255,204,0,0.45); background:rgba(255,204,0,0.10); }
.img-title{ font-weight:950; color:rgba(255,255,255,0.90); }
.img-badge{ display:inline-flex; margin-top:.55rem; padding:.25rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.72); font-size:.82rem; font-weight:900; background:rgba(0,0,0,0.16); }
.img-badge.rt{ border-color:rgba(255,204,0,0.40); }

/* Cloud welcome */
.cloud-welcome{ position:relative; border-radius:18px; border:1px solid rgba(255,255,255,0.10); background: radial-gradient(circle at 30% 30%, rgba(255,204,0,0.10), transparent 45%), rgba(0,0,0,0.18); overflow:hidden; padding:1.2rem; animation: cloudFadeIn 520ms ease-out both; }
@keyframes cloudFadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.cloud-welcome__inner{ max-width:520px; }
.cloud-welcome__badge{ display:inline-flex; padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(255,204,0,0.40); background:rgba(255,204,0,0.10); font-weight:950; margin-bottom:.65rem; }
.cloud-welcome__spark{ display:flex; gap:.6rem; margin:1rem 0 1.1rem; }
.spark-dot{ width:10px; height:10px; border-radius:999px; background:var(--accent); opacity:.85; animation: sparkPulse 1.2s infinite ease-in-out; }
.spark-dot:nth-child(2){ animation-delay:.12s; }
.spark-dot:nth-child(3){ animation-delay:.24s; }
@keyframes sparkPulse{ 0%,100%{ transform:translateY(0); opacity:.65; } 50%{ transform:translateY(-6px); opacity:1; } }

/* Mini meters */
.mini-meter{ width:120px; height:8px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); overflow:hidden; }
.mini-meter__fill{ height:100%; background:var(--accent); border-radius:999px; }
.mini-meter__label{ color:rgba(255,255,255,0.60); font-size:.82rem; margin-top:.25rem; }

/* Cinematic shutdown */
.terminal--shutdown{ filter: brightness(0.35) contrast(1.05); transition: filter 420ms ease; }


/* v9: terminal colored spans */
.term-green{ color: rgba(34,197,94,0.92); }
.term-red{ color: rgba(239,68,68,0.92); font-weight: 900; }


.section.container{ padding-left: 0; padding-right: 0; }

.section .card-grid{ margin-top: 1.25rem; }
.section .case-grid{ margin-top: 1.25rem; }
.section .split{ margin-top: 1.1rem; }

/* Make cards clickable */
.card{ position: relative; }
.card > a.card-link{ position: relative; z-index: 2; }
.card::after{ content:''; position:absolute; inset:0; border-radius: inherit; }
.card[role="link"]{ cursor:pointer; }

.hero-btn:hover{ transform: translateY(-1px); border-color: rgba(255,204,0,0.45); background: rgba(255,204,0,0.16); }
.hero-btn:active{ transform: translateY(0); }
.hero-btn:focus{ outline: 2px solid rgba(255,204,0,0.35); outline-offset: 2px; }

.hero-actions{ display:flex; gap:.65rem; flex-wrap:wrap; margin-top: 1rem; }

.hero-btn--contact{ gap:.5rem; }

.section--cta{ padding-bottom: 5rem; }
.footer--site{ margin-top: 2.75rem; }

.home-mini-demo{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; opacity:.95; }

.showcase-window{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(9,12,18,0.78);
  box-shadow: var(--shadow-soft);
  margin-top: 1rem;
}
.showcase-top{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.65rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
}
.showcase-top .dots{ display:flex; gap:.35rem; }
.showcase-top .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; opacity:.95; }
.showcase-top .dot.red{ background: rgba(239,68,68,0.95); }
.showcase-top .dot.yellow{ background: rgba(250,204,21,0.95); }
.showcase-top .dot.green{ background: rgba(34,197,94,0.95); }

.showcase-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.showcase-tab{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);
  padding: .38rem .6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .8rem;
  cursor:pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.showcase-tab:hover{ transform: translateY(-1px); border-color: rgba(255,204,0,0.35); }
.showcase-tab.is-active{
  background: rgba(255,204,0,0.16);
  border-color: rgba(255,204,0,0.45);
  color: rgba(255,255,255,0.92);
}
.showcase-hint{ margin-left:auto; font-size:.75rem; opacity:.7; }

.showcase-body{ padding: .85rem; }
.showcase-pane{ display:none; }
.showcase-pane.is-active{ display:block; }

.showcase-kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.65rem; }
@media (max-width: 780px){ .showcase-kpis{ grid-template-columns: 1fr; } }

.showcase-bars{ margin-top: .8rem; display:grid; gap:.55rem; }
.sbar{ display:grid; grid-template-columns: 70px 1fr 34px; align-items:center; gap:.6rem; }
.sbar-label{ font-size:.8rem; opacity:.82; }
.sbar-track{ height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow:hidden; }
.sbar-fill{ height: 100%; background: rgba(255,204,0,0.78); border-radius: 999px; }
.sbar-val{ font-size:.8rem; opacity:.82; text-align:right; }

.showcase-list{ margin-top: .85rem; display:grid; gap:.55rem; }
.srow{ display:flex; gap:.6rem; align-items:center; padding:.55rem .6rem; border:1px solid rgba(255,255,255,0.10); border-radius: 14px; background: rgba(255,255,255,0.03); }
.srow-reason{ flex:1; font-weight: 750; opacity:.9; }

.showcase-terminal{
  margin-top: .85rem;
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: .65rem .7rem;
  background: rgba(0,0,0,0.40);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .82rem;
}
.term-prompt-mini{ color: rgba(34,197,94,0.92); }
.term-cmd{ color: rgba(255,255,255,0.9); }
.term-out{ margin-top:.55rem; color: rgba(34,197,94,0.92); }
.term-out-line{ white-space: pre; }
.showcase-note{ margin-top:.75rem; font-size:.85rem; opacity:.78; }

.hero-btn, .btn-mini{ text-decoration: none; }

.hero-actions{ align-items:flex-start; }
.hero-actions > a{ width: auto; }
.hero-btn{ width: fit-content; max-width: 100%; }
.hero-btn--contact{ width: fit-content; display: inline-flex; }


/* v17: Startseite Hero & Mini-Demo fixes */
.hero-cta-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}
.hero-cta-row .hero-btn,
.hero-cta-row .btn-secondary{
  width: fit-content;
  display: inline-flex;
  text-decoration: none;
}
.hero-cta-row .hero-btn{ align-items:center; justify-content:center; }
.btn-secondary{ text-decoration:none; }

.section--mini-demo{ padding-top: 1.25rem; padding-bottom: 2.25rem; }
.home-mini-demo-block{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 1rem 1.05rem;
  background: rgba(255,255,255,0.03);
  box-shadow: var(--shadow-soft);
}
.home-mini-demo-title{
  font-weight: 950;
  letter-spacing: .2px;
}
.home-mini-demo-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.75rem;
}

.hero-btn{ max-width: 100%; }

/* v18: Final Hero CTA fixes */
.hero-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:flex-start;
}
.hero-actions a{
  width:auto !important;
  align-self:flex-start;
}
.hero-btn{
  display:inline-flex !important;
  width:fit-content !important;
}

/* About images */
.about-image-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1rem;
  margin:1.25rem 0 0;
}
.about-image-grid img{
  width:100%;
  border-radius:16px;
  object-fit:cover;
  background:rgba(255,255,255,0.04);
}
@media(max-width:900px){
  .about-image-grid{ grid-template-columns:1fr; }
}

/* v21: keep hero metrics in one row on desktop */
.hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
@media (max-width: 860px){
  .hero-metrics{ grid-template-columns: 1fr; }
}

/* Maintenance IDE */
.maintenance-wrap{ padding: 3.5vh 1rem 6vh; }
.maintenance-body .ide{ max-width: 1120px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 30px 90px rgba(0,0,0,0.60); background: rgba(5,7,14,0.55); }
.maintenance-body .ide-top{ display:flex; align-items:center; gap:.55rem; padding:.65rem .9rem; background: rgba(0,0,0,0.28); border-bottom: 1px solid rgba(255,255,255,0.10); }
.maintenance-body .dot{ width: 11px; height: 11px; border-radius: 999px; }
.maintenance-body .dot.red{ background: rgba(239,68,68,0.95); }
.maintenance-body .dot.yellow{ background: rgba(250,204,21,0.95); }
.maintenance-body .dot.green{ background: rgba(34,197,94,0.95); }
.maintenance-body .ide-title{ margin-left:.4rem; font-weight: 900; letter-spacing: .2px; opacity:.9; }
.maintenance-body .ide-badge{ margin-left:auto; font-weight: 900; padding: .28rem .6rem; border-radius: 999px; border: 1px solid rgba(250,204,21,0.35); background: rgba(250,204,21,0.12); color: rgba(255,255,255,0.90); }
.maintenance-body .ide-main{ display:grid; grid-template-columns: 280px 1fr; min-height: 560px; }
@media (max-width: 980px){ .maintenance-body .ide-main{ grid-template-columns: 1fr; } }
.maintenance-body .ide-sidebar{ padding: 1rem 1rem 1.2rem; background: rgba(15,23,42,0.60); border-right: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 980px){ .maintenance-body .ide-sidebar{ border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08);} }
.maintenance-body .side-title{ font-weight: 900; opacity:.85; margin-bottom:.55rem; }
.maintenance-body .file{ opacity:.72; margin:.32rem 0; }
.maintenance-body .file.active{ opacity: 1; color: rgba(250,204,21,0.95); }
.maintenance-body .status-row{ display:flex; gap:.45rem; align-items:center; margin-top:.35rem; }
.maintenance-body .meter{ height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top:.55rem; }
.maintenance-body .meter-fill{ height: 100%; width: 12%; border-radius: 999px; background: rgba(250,204,21,0.78); transition: width 550ms ease; }
.maintenance-body .ide-editor{ padding: 1rem 1.1rem 1.2rem; background: rgba(2,6,23,0.86); }
.maintenance-body .editor-tabs{ display:flex; gap:.45rem; flex-wrap:wrap; padding-bottom:.75rem; border-bottom: 1px solid rgba(255,255,255,0.10); }
.maintenance-body .tab{ padding:.35rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); font-weight: 900; font-size:.82rem; opacity:.78; }
.maintenance-body .tab.is-active{ opacity:1; border-color: rgba(250,204,21,0.35); background: rgba(250,204,21,0.12); }
.maintenance-body pre.code{ margin: 0; padding: 1rem 0 0; font-size: .88rem; line-height: 1.65; white-space: pre-wrap; }
.maintenance-body .ln{ display:inline-block; width: 2.2rem; opacity:.45; user-select:none; }
.maintenance-body .code-line{ opacity:.85; }
.maintenance-body .code-comment{ opacity:.65; color: rgba(250,204,21,0.75); }
.maintenance-body .cursor{ display:inline-block; width: 8px; height: 1.1em; background: rgba(250,204,21,0.9); vertical-align: -2px; margin-left: 2px; animation: blink 900ms infinite; }
@keyframes blink{ 0%,45%{opacity:1;} 50%,100%{opacity:.0;} }
.maintenance-body .ide-terminal{ margin-top: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.35); overflow:hidden; }
.maintenance-body .term-title{ display:flex; gap:.6rem; align-items:center; padding:.55rem .75rem; border-bottom: 1px solid rgba(255,255,255,0.10); }
.maintenance-body .term-body{ padding: .75rem; font-family: ui-monospace, Menlo, Consolas, monospace; color: rgba(34,197,94,0.92); max-height: 170px; overflow:auto; }
.maintenance-body .term-line{ white-space: pre; margin: .15rem 0; }
.maintenance-body .maintenance-foot{ margin-top: 1rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; opacity:.75; }

/* About portraits */
.about-portraits{
  grid-template-columns: repeat(3,1fr);
}
.about-portraits figure{
  text-align:center;
}
.about-portraits img{
  border-radius:24px;
}
.about-portraits figcaption{
  margin-top:.6rem;
  font-weight:900;
}
.about-portraits figcaption span{
  display:block;
  font-weight:500;
  opacity:.65;
}




/* v27: About page clean team cards */
.team-avatar{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  margin-bottom: .85rem;
}
.team-role{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.18rem .55rem;
  border-radius: 999px;
  font-weight: 850;
  font-size: .82rem;
  border: 1px solid rgba(255,204,0,0.25);
  background: rgba(255,204,0,0.10);
  color: rgba(255,255,255,0.88);
  margin-bottom: .55rem;
}
.team-card p{ margin-top: .55rem; }
@media (max-width: 900px){
  .team-avatar{ aspect-ratio: 16 / 10; }
}

/* v28: portraits placement + tidy */
.about-portraits{
  margin-top: 1.1rem;
}
.about-portraits img{
  display:block;
}








.footer-simple{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-left{
  opacity:.85;
  line-height:1.35;
}
.footer-right{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-right a{
  font-weight:700;
  text-decoration:none;
  opacity:.75;
}
.footer-right a:hover{
  opacity:1;
}
@media (max-width: 700px){
  .footer-simple{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* FOOTER                                             */


/* footer – restored exactly from v24 */
.footer-links {
  display: flex;
  gap: 1rem;
}

/* v37: Mobile polish (global) */
@media (max-width: 980px){
  .container{ padding-left: 1rem; padding-right: 1rem; }
  .section{ padding: 2.2rem 0; }
  .panel{ padding: 1.1rem; }
  h1{ font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1.05; }
  h2{ font-size: 1.55rem; }
  p{ font-size: 1rem; }
}

/* Navigation: reduce density on mobile */
@media (max-width: 860px){
  .site-header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); }
  .nav{ gap: .55rem; }
  .nav a{ padding: .55rem .65rem; font-size: .95rem; }
  .nav-actions{ gap: .6rem; }
  .nav-logo img{ height: 28px; }
}

/* Hero layout: stack, keep CTAs compact */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; gap: 1.2rem; }
  .hero-brand{ order: -1; justify-content: flex-start; }
  .hero-actions{ gap: .6rem; }
  .hero-actions .hero-btn{ padding: .75rem 1rem; }
  .hero-metrics{ grid-template-columns: 1fr; gap: .85rem; }
}

/* Split sections: always stack on mobile */
@media (max-width: 980px){
  .split{ grid-template-columns: 1fr !important; gap: 1rem; }
}

/* Card grids: 1 col on phones, 2 col on tablets */
@media (max-width: 980px){
  .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .card-grid{ grid-template-columns: 1fr; }
}

/* Buttons: full touch targets but never full-width unless desired */
@media (max-width: 640px){
  .hero-actions{ flex-direction: column; align-items: flex-start; }
  .hero-actions a{ width: auto !important; }
}

/* Demo windows / browser-in-browser: stack and prevent overflow */
@media (max-width: 980px){
  .demo-split{ grid-template-columns: 1fr !important; }
  .demo-window, .browser-window, .mac-window{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .demo-window .window-body, .browser-window .window-body, .mac-window .window-body{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tables & charts: allow horizontal scroll on small screens */
@media (max-width: 980px){
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .chart, canvas, svg{ max-width: 100%; height: auto; }
}

/* Forms: spacing + input sizing */
@media (max-width: 640px){
  input, textarea, select, button{ font-size: 16px; } /* iOS zoom fix */
  .form-grid{ grid-template-columns: 1fr !important; }
}


/* v37: Maintenance mobile */
@media (max-width: 980px){
  .maintenance-wrap{ padding: 2.2vh 1rem 4vh; }
  .maintenance-body .ide-main{ grid-template-columns: 1fr; }
  .maintenance-body .ide-sidebar{ border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
}
@media (max-width: 640px){
  .maintenance-body .ide-title{ font-size: .95rem; }
  .maintenance-body pre.code{ font-size: .82rem; }
  .maintenance-body .term-body{ font-size: .82rem; }
  .maintenance-body .ide-badge{ display:none; }
}


/* v38: Maintenance mobile overhaul */
@media (max-width: 980px){
  .maintenance-body .ide{
    margin: 0 auto;
    border-radius: 16px;
  }
  .maintenance-body .ide-top{
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .maintenance-body .ide-main{
    display: block;
    min-height: unset;
  }
  .maintenance-body .ide-sidebar{
    padding: .9rem 1rem 1rem;
  }
  .maintenance-body .ide-editor{
    padding: 1rem;
  }
  .maintenance-body .editor-tabs{
    gap: .35rem;
    padding-bottom: .6rem;
  }
  .maintenance-body .tab{
    font-size: .78rem;
    padding: .28rem .5rem;
  }
  .maintenance-body pre.code{
    padding-top: .75rem;
    font-size: .82rem;
  }
  .maintenance-body .ln{ width: 1.9rem; }
  .maintenance-body .ide-terminal{
    margin-top: .9rem;
  }
  .maintenance-body .term-body{
    max-height: 140px;
  }
  .maintenance-body .maintenance-foot{
    margin-top: .85rem;
  }
}
/* Extra-small phones: hide explorer list, keep status+CTA */
@media (max-width: 640px){
  .maintenance-body .ide-title{ font-size: .9rem; }
  .maintenance-body .ide-sidebar .file{ display:none; }
  .maintenance-body .maintenance-foot{ flex-direction: column; gap:.35rem; }
  .maintenance-body .term-body{ font-size: .78rem; }
}


/* v38: Demo readability on small screens */
@media (max-width: 640px){
  .demo-window .window-body,
  .browser-window .window-body,
  .mac-window .window-body{
    font-size: .9rem;
  }
  .terminal, .term, .terminal-body{
    font-size: .82rem;
  }
}



/* ===== Referenzen Page – Spacing & Layout Fix (v-ref) ===== */
/* HERO */
.hero { padding: 3.2rem 0 2.2rem; }
.hero-inner { gap: 2rem; align-items: center; }
.hero-content__text-interaction {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
  max-width: 58ch;
}
.hero-cta-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}
.hero-cta-row .hero-btn,
.hero-cta-row .btn-secondary { width: auto; }

/* CASE GRID */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.25rem;
}
.case-card {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.case-media { border-bottom: 1px solid rgba(255,255,255,.08); }
.case-media img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}
.case-body {
  padding: 1rem 1rem 1.1rem;
  display: grid;
  gap: .65rem;
}
.list-check {
  margin: .3rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .35rem;
}

/* SPLIT / NOTICE */
.notice { margin-top: 1.35rem; }
.split.demo-split { gap: 1rem; }
.split.demo-split .panel { padding: 1.1rem; }

/* MOBILE */
@media (max-width: 980px){
  .hero { padding: 2.4rem 0 1.6rem; }
  .hero-inner { grid-template-columns: 1fr; align-items: start; }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-media img { height: 190px; }
}
@media (max-width: 640px){
  .hero-cta-row { flex-direction: column; }
  .hero-cta-row a { width: 100%; text-align: center; }
  .case-grid { grid-template-columns: 1fr; }
  .case-media img { height: 180px; }
}

/* FOOTER (footer--site) */
.footer.footer--site {
  margin-top: 3rem;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
}
.footer.footer--site .footer-links {
  margin-top: .6rem;
  display: flex;
  gap: 1rem;
}

.about-image-grid.about-portraits img,
.about-portraits img,
.team-avatar{
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;              /* falls height irgendwo gesetzt ist */
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 16px;
}