/* ==========================================================================
   lizenzen.css — nur fuer lizenzen.html
   Setzt die Formensprache der Hauptseite fort: Haarlinien statt Karten,
   Cormorant fuer Zahlen und Ueberschriften, Teal als einziger Akzent.
   ========================================================================== */

/* Seitengrund — dieselbe Formensprache wie die Texturen der Hauptseite,
   nur eine Stufe zurueckgenommen. Fixiert, damit er beim Scrollen ruht. */
body::before{
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 78% 0%, rgba(47,124,123,.11), transparent 62%),
    radial-gradient(ellipse 70% 55% at 8% 100%, rgba(15,37,64,.45), transparent 70%),
    linear-gradient(180deg, rgba(234,243,250,.026), transparent 62%);
}

.lic-page{ padding: 64px 0 120px }

/* Feine Textur nur unter den beiden tragenden Abschnitten, weich
   ausmaskiert — sonst wirkt sie wie ein Kasten im Textkoerper. Punktraster
   statt Linien, damit sie nicht mit den Spaltentrennern konkurriert. */
.lic-licenses::before,
.lic-flow::before{
  content: ""; position: absolute; inset: -40px -64px; z-index: 0;
  pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle, rgba(234,243,250,.07) 1px, transparent 1.4px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 40%, #000 30%, transparent 88%);
          mask-image: radial-gradient(ellipse 100% 90% at 50% 40%, #000 30%, transparent 88%);
}
.lic-page section > *{ position: relative; z-index: 1 }

/* brand.css gibt jedem <section> 96px Innenabstand; hier steuert der
   Aussenabstand den Rhythmus, sonst summieren sich beide. */
.lic-page section{ padding: 0; position: relative }
.lic-page section + section{ margin-top: 96px }

/* Kopf */
.lic-head{
  display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: end;
  padding-bottom: 8px;
}
.lic-head h1{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500; letter-spacing: -.012em; line-height: 1.06;
  color: rgb(164, 172, 179);
  margin: 0; max-width: 16ch;
  text-wrap: balance;
}
.lic-head .lead{
  color: #C5D2E1; font-size: 16.5px; line-height: 1.62;
  margin: 0 0 6px; max-width: 46ch;
}

/* Abschnittsueberschrift */
.lic-page h2{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500; letter-spacing: -.01em; line-height: 1.15;
  color: rgb(164, 172, 179);
  margin: 0 0 16px; max-width: 26ch;
}
.lic-page p.intro{
  color: #C5D2E1; font-size: 15.5px; line-height: 1.62;
  margin: 0 0 40px; max-width: 66ch;
}

/* --- Lizenzvergleich --------------------------------------------------- */
.lic-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule-strong);
}
.lic{
  display: flex; flex-direction: column;
  padding: 0 30px 0 0;
}
.lic + .lic{ border-left: 1px solid var(--rule); padding-left: 30px }

/* Die Grundlizenz traegt als einzige eine Akzentkante, keine Karte */
.lic.is-base{ box-shadow: inset 0 2px 0 0 var(--petrol) }

.lic .tag{
  display: block; margin-top: 22px; min-height: 15px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--petrol); font-weight: 500;
}
.lic.is-base .tag{ color: var(--teal-soft) }
.lic h3{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 27px; font-weight: 500; letter-spacing: -.005em;
  color: #E7ECF2; margin: 12px 0 8px; line-height: 1.15;
}
.lic .sub{
  color: var(--text-dim); font-size: 14px; line-height: 1.5;
  margin: 0 0 26px; min-height: 63px;
}

/* Preis — feste Hoehe, damit die Leistungslisten der drei Spalten
   auf einer Linie beginnen und ihre Trennlinien fluchten */
.lic .price{ margin-bottom: 26px; min-height: 121px }
.lic .price .was{
  display: block; color: var(--text-dimmer); font-size: 13px;
  text-decoration: line-through; margin-bottom: 6px; min-height: 19px;
}
.lic .price .now{
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 44px; font-weight: 500; line-height: 1;
  color: #fff; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.lic.is-base .price .now{ color: var(--teal-soft) }
.lic .price .label{
  display: block; margin-top: 8px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal-soft); font-weight: 500;
}
.lic .price .unit{
  display: block; margin-top: 8px;
  color: var(--text-dimmer); font-size: 12.5px; line-height: 1.45;
}

/* Leistungen */
.lic ul{
  list-style: none; margin: 0 0 24px; padding: 0;
  border-top: 1px solid var(--rule);
}
.lic ul li{
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  color: #C5D2E1; font-size: 14px; line-height: 1.45;
}
.lic ul li::before{
  content: ""; width: 7px; height: 1px; background: var(--petrol);
  align-self: center; margin-top: 1px;
}

.lic .note{
  color: var(--teal-soft); font-size: 13px; line-height: 1.5;
  margin: 0 0 16px;
}
.lic .expl{
  color: var(--text-dimmer); font-size: 13px; line-height: 1.55;
  margin: 0 0 16px;
}
.lic .spacer{ flex: 1 }
.lic .act{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 4px }
.lic .act .btn{ width: 100% ; justify-content: center }
.lic .act .textlink{
  color: var(--teal-soft); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lic .act .textlink:hover{ color: #fff }

/* --- Erweiterungen ----------------------------------------------------- */
.lic-extra .cols{
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px;
  align-items: start; padding-top: 8px;
}
.lic-extra h3{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dimmer); font-weight: 500; margin: 0 0 16px;
}
.lic-extra p{
  color: #C5D2E1; font-size: 15px; line-height: 1.62; margin: 0; max-width: 60ch;
}
.lic-extra .rates{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--rule-strong); margin-top: 26px;
}
.lic-extra .rates .r{ padding: 20px 24px 0 0 }
.lic-extra .rates .r + .r{ border-left: 1px solid var(--rule); padding-left: 24px }
.lic-extra .rates b{
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px; font-weight: 500; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.lic-extra .rates span{ display: block; color: var(--text-dimmer); font-size: 13px; line-height: 1.45 }

/* --- Buchungsablauf ---------------------------------------------------- */
.lic-flow ol{
  counter-reset: st; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule-strong);
}
.lic-flow ol li{
  counter-increment: st;
  padding: 24px 28px 0 0;
  color: #C5D2E1; font-size: 15px; line-height: 1.55;
}
.lic-flow ol li + li{ border-left: 1px solid var(--rule); padding-left: 28px }
.lic-flow ol li::before{
  content: counter(st, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  color: var(--teal-soft); font-size: 13px; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

/* --- Lizenzbedingungen -------------------------------------------------- */
/* Die Abgrenzung nach oben uebernimmt jetzt die .section-mark-Zeile,
   ein zusaetzlicher border-top waere eine doppelte Linie */
.lic-legal p:first-of-type{ margin-top: 0 }
.lic-legal p{
  color: var(--text-dimmer); font-size: 13.5px; line-height: 1.62;
  margin: 0 0 12px; max-width: 88ch;
}
.lic-legal p:last-child{ margin-bottom: 0 }
.lic-legal .lbl{ color: var(--text-dim); font-weight: 500 }
.lic-legal a{ color: var(--teal-soft); text-decoration: underline; text-underline-offset: 2px }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1080px){
  .lic-grid{ grid-template-columns: 1fr 1fr }
  .lic{ padding-bottom: 40px }
  .lic:nth-child(2n+1){ border-left: 0; padding-left: 0 }
  .lic:nth-child(n+3){ border-top: 1px solid var(--rule); padding-top: 4px }
}
@media (max-width: 980px){
  .lic-head{ grid-template-columns: 1fr; gap: 22px; align-items: start }
  .lic-head h1{ max-width: 20ch }
  .lic-extra .cols{ grid-template-columns: 1fr; gap: 40px }
  .lic-flow ol{ grid-template-columns: 1fr }
  .lic-flow ol li{ padding: 22px 0 }
  .lic-flow ol li + li{ border-left: 0; padding-left: 0; border-top: 1px solid var(--rule) }
}
@media (max-width: 760px){
  .lic-page{ padding: 48px 0 88px }
  .lic-page section + section{ margin-top: 72px }
  .lic-grid{ grid-template-columns: 1fr }
  .lic{ border-left: 0 !important; padding: 0 0 36px !important }
  .lic + .lic{ border-top: 1px solid var(--rule); padding-top: 4px !important }
  /* einspaltig braucht nichts mehr zu fluchten */
  .lic .tag, .lic .sub, .lic .price, .lic .price .was{ min-height: 0 }
  .lic-extra .rates{ grid-template-columns: 1fr }
  .lic-extra .rates .r{ padding: 20px 0 0 }
  .lic-extra .rates .r + .r{ border-left: 0; padding-left: 0; border-top: 1px solid var(--rule) }
}