/* branchen.css - Zusatzbausteine NUR fuer die Branchenseiten-Konzepte
   (branche-praxen / branche-handwerk / branche-gastronomie).
   Alles Uebrige kommt unveraendert aus base.css und overview.css, damit die
   Seiten exakt in der Designwelt von lejama.de bleiben. Beim Livegang diese
   Datei mitnehmen oder die Regeln ans Ende von overview.css haengen.
   Leitlinie (User, 13.09.): wenig Text, keine Doppelueberschriften (kein Eyebrow
   ueber H2), Anfrage-Knopf erst weiter unten, lieber visuell. */

/* Konzept-Leiste als Umschalter zwischen den Branchenseiten. Vor dem Livegang loeschen. */
.branche-konzept {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--fill-subtle);
  border-bottom: 1px solid var(--line);
}
.branche-konzept a {
  padding: 2px 11px;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.branche-konzept a:hover {
  color: var(--accent);
}
.branche-konzept a[aria-current="page"] {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}

/* Hero: schlank, ohne Eyebrow und ohne Knopf. Regionszeile leiser als der Lead. */
.about-student-hero p.branche-region {
  margin-top: 10px;
  font-size: 0.98rem;
}

/* Worauf es ankommt: drei dunkle Fakten-Karten nebeneinander, Wert gross oben. */
.branche-insider {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.branche-insider article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 3vw, 30px);
  color: var(--panel-text);
  background:
    radial-gradient(circle at 100% 0%, var(--panel-glow), transparent 42%),
    linear-gradient(145deg, var(--panel), var(--panel-2));
  border-radius: var(--radius-lg);
}
.branche-insider-wert {
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1;
  color: var(--panel-eyebrow);
  white-space: nowrap;
}
.branche-insider h3 {
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--panel-text);
}
.branche-insider p {
  color: var(--panel-text-muted);
  font-size: 0.96rem;
  line-height: 1.55;
}
.branche-insider small {
  margin-top: auto;
  padding-top: 4px;
  color: var(--panel-text-muted);
  font-size: 0.76rem;
  opacity: 0.8;
}

/* Demo-Karten unter dem Premium-Teaser. */
.branche-demo-duo {
  margin-top: 18px;
}
.demo-card-wide {
  grid-column: 1 / -1;
  min-height: 420px;
}

/* Branchen-Paket: links was drin ist, rechts die Summe. */
.branche-preset {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, var(--panel-glow), transparent 34%),
    var(--card-2);
  border: 1px solid var(--border-accent);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(23, 21, 16, 0.09);
}
.branche-preset-main {
  padding: clamp(24px, 3.4vw, 34px);
}
.branche-preset-main h3 {
  font-size: var(--fs-h3);
  line-height: 1.08;
}
.branche-preset-list {
  display: grid;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.branche-preset-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.branche-preset-list li:first-child {
  border-top: 0;
}
.branche-preset-list b {
  font-weight: 800;
  white-space: nowrap;
}
.branche-preset-list small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.branche-preset-sum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: clamp(24px, 3.4vw, 34px);
  background: var(--surface);
  border-left: 1px solid var(--line);
}
.branche-preset-sum .price-kicker {
  margin-bottom: 0;
}
.branche-preset-sum strong {
  color: var(--accent);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1.02;
}
.branche-preset-sum p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.branche-preset-sum .button {
  align-self: flex-start;
  margin-top: 12px;
}

/* Optional dazu, mit Knopf in den Konfigurator. */
.branche-addons {
  margin-top: 18px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(23, 21, 16, 0.06);
}
.branche-addons h3 {
  font-size: var(--fs-h3);
  line-height: 1.08;
}
.branche-addons ul {
  display: grid;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.branche-addons li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.branche-addons li:first-child {
  padding-top: 4px;
  border-top: 0;
}
.branche-addons li strong {
  font-weight: 800;
}
.branche-addons li b {
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}
.branche-addons li small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.branche-extras-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.branche-extras-cta p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* Querverweise auf die anderen Branchenseiten. */
.branche-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: clamp(40px, 6vw, 64px);
}
.branche-more p {
  margin: 0 4px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}
.branche-more a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.branche-more a:hover {
  color: var(--accent);
  border-color: var(--border-accent);
}

@media (max-width: 960px) {
  .branche-insider,
  .branche-preset { grid-template-columns: 1fr; }
  .branche-preset-sum { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .demo-card-wide { min-height: 460px; }
  .branche-extras-cta .button { width: 100%; justify-content: center; }
}