:root {
  /* properazzi theme (ported from “Invest solmotion.html”) */
  --bg-dark: #090304;
  --bg-section: #130708;
  --bg-alt: #1b090b;
  --gold: #f1d08a;
  --gold-soft: #e5c070;
  --gold-strong: #f6d788;
  --text-main: #fff8ec;
  --text-muted: #e3dad0;
  --panel-bg: rgba(10, 4, 4, 0.9);
  --panel-border: rgba(255, 200, 120, 0.35);
  --btn-bg1: #f6d788;
  --btn-bg2: #e6b74d;
  --btn-text: #3a260a;

  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;

  --shadow-soft: 0 26px 70px rgba(0, 0, 0, 0.85);
  --shadow-subtle: 0 16px 40px rgba(0, 0, 0, 0.6);

  --transition-fast: 0.18s ease-out;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #2a0a0d 0, #050103 60%);
  color: var(--text-main);
  line-height: 1.6;
}

/* Links */
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--gold); }

/* Legacy <center> Layout nicht zerstören */
center { display: block; }

/* Breite / Container-IDs aus euren PHP-Dateien */
#maincontent,
#maincontentmobile,
#main,
#umrandung,
#bwumrandung,
#shadow2 {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Eure Haupt-“Container”-Tables */
#main {
  border-collapse: collapse;
  margin: 0 auto;
}

/* Header-Table wirkt wie Sticky Nav */
#main:first-of-type {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(
    to bottom,
    rgba(5, 1, 2, 0.92),
    rgba(5, 1, 2, 0.72),
    transparent
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 200, 140, 0.18);
}

/* Logo-Image */
#main img[alt] {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.65));
}

/* Linie oben */
#linieoben {
  border: 0;
  height: 2px !important;
  background: linear-gradient(
    to right,
    rgba(255, 215, 160, 0.08),
    rgba(241, 208, 138, 0.55),
    rgba(255, 215, 160, 0.08)
  );
}

/* Überschriften */
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  color: var(--gold);
  margin: 0.6rem 0 0.9rem;
}

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  color: var(--gold);
  margin: 1.7rem 0 0.75rem;
}

h3 { color: var(--gold-strong); }

/* Panels/Cards für eure bestehenden Boxen */
#alleresult,
#alleresult2,
#alleresultinfo,
#bild,
#tablea,
#tablea2,
#tablea3,
#tableb,
#tableb2,
#tableb3,
#tablec,
#fehlt,
#fehlt2,
#blau {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
}

#tablea,
#tablea2,
#tablea3 { padding: 14px 16px; }

#alleresult,
#alleresult2,
#alleresultinfo { padding: 14px 16px; }

#alleresultinfo { border-color: rgba(246, 215, 136, 0.55); }

#blau {
  background: radial-gradient(circle at top, rgba(122, 20, 18, 0.7) 0, rgba(10, 4, 4, 0.95) 60%);
  text-align: center;
}

/* Hinweistexte */
#schwach {
  color: rgba(255, 245, 220, 0.75);
  font-size: 0.9rem;
}

/* Tabellen-Zeile hover */
#zeile:hover { background-color: rgba(241, 208, 138, 0.08); }

/* Inputs */
input.inputt,
textarea.inputt2,
select.field,
input.suchfeld {
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(5, 3, 4, 0.95);
  color: var(--text-main);
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

textarea.inputt2 { border-radius: var(--radius-sm); }
input.suchfeld { max-width: 350px; }

input.inputt::placeholder,
textarea.inputt2::placeholder,
input.suchfeld::placeholder { color: rgba(255, 240, 220, 0.6); }

input.inputt:focus,
textarea.inputt2:focus,
select.field:focus,
input.suchfeld:focus {
  border-color: rgba(246, 215, 136, 0.85);
  box-shadow: 0 0 0 1px rgba(250, 210, 130, 0.7);
}

/* Buttons (legacy) */
input.button,
input.button1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  color: var(--btn-text);
  background: linear-gradient(135deg, var(--btn-bg1), var(--btn-bg2));
  box-shadow: var(--shadow-subtle);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.08s ease-out;
}

input.button1 {
  color: var(--gold-strong);
  background: rgba(8, 4, 2, 0.85);
  border: 1px solid rgba(255, 215, 160, 0.7);
}

input.button:hover,
input.button1:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: var(--shadow-soft);
}

input.button:active,
input.button1:active {
  transform: translateY(1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.95);
}

/* Stern-Input */
input.stern {
  background-image: url(../stern4.gif);
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  cursor: pointer;
}

/* Box für “Rechnerbutton” */
#rechnerbutton {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#rechnerbutton:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* Footer-Bereich (unten.php nutzt #linieunten) */
#linieunten {
  padding: 14px 0 22px;
  color: rgba(240, 225, 210, 0.75);
}

#linieunten a {
  color: rgba(240, 225, 210, 0.78) !important;
}

#linieunten a:hover { color: var(--gold) !important; }

/* Mobile Tables */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  #maincontent,
  #maincontentmobile,
  #main,
  #umrandung,
  #bwumrandung,
  #shadow2 { padding-left: 12px; padding-right: 12px; }
  h2 { font-size: 1.35rem; }
}

@media (max-width: 600px) {
  input.button,
  input.button1 { width: 100%; }
}

/* Breadcrumb-Bereich */
.breadcrumb-section {
    max-width: 1200px;
    margin: 0 auto 24px auto;
    padding: 16px 20px;
    background-color: var(--bg-card);
    border-radius: 999px;
    box-shadow: var(--shadow-subtle);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* CTA in Breadcrumb */
.breadcrumb-section .cta_breadcrumb {
    background-color: #facc15;
    color: #1f2933;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    box-shadow: 0 6px 16px rgba(234, 179, 8, 0.4);
    white-space: nowrap;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.breadcrumb-section .cta_breadcrumb:hover {
    background-color: #eab308;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(202, 138, 4, 0.5);
}

/* Breadcrumb-Navigation */
nav[aria-label="Breadcrumb"] {
    flex: 1;
    overflow: hidden;
}

nav[aria-label="Breadcrumb"] ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

nav[aria-label="Breadcrumb"] li {
    display: inline-flex;
    align-items: center;
}

nav[aria-label="Breadcrumb"] li::after {
    content: "-";
    margin: 0 6px;
    opacity: 0.6;
    font-size: 0.85em;
}

nav[aria-label="Breadcrumb"] li:last-child::after {
    content: "";
    margin: 0;
}

nav[aria-label="Breadcrumb"] a {
    text-decoration: none;
    color: inherit;
    padding: 2px 4px;
    border-radius: 999px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

nav[aria-label="Breadcrumb"] a:hover {
    background-color: var(--accent-soft);
    color: var(--accent);
}

/* Mobile Breadcrumb */
@media (max-width: 600px) {
    .breadcrumb-section {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius-md);
    }

    nav[aria-label="Breadcrumb"] ol {
        flex-wrap: wrap;
    }

    nav[aria-label="Breadcrumb"] li::after {
        content: "/";
        margin: 0 4px;
    }

    .breadcrumb-section .cta_breadcrumb {
        text-align: center;
        width: 100%;
    }
}