/* NextBuy-Textseite fuer den JTL-Shop, Block 3 (24.09.2026).
 *
 * 1:1 aus dem Shopify-Theme, Anweisung Daniel am 24.09.2026. Vorlage ist die
 * Shopify-Rechtsseite /policies/ (Impact), gemessen am 24.09.2026 mit
 * shopify theme dev bei 390, 800 und 1440 px:
 *
 *   .shopify-policy__container  Impact theme.css Zeile 8726, dazu Shopifys
 *                               policy-0e156355.css (Titel zentriert)
 *   .rte                        Impact-Regeln .prose (Absaetze, Listen, Links)
 *   Schriftstufen               --text-h1 1.75 / 2.25 / 3 rem, --text-h2
 *                               1.5 / 1.75 / 2.5 rem, --text-base 0.875 / 1 rem,
 *                               Stufen 700 und 1400 px
 *   Rand                        --container-gutter 1.25 / 2 / 3 rem, Stufen
 *                               700 und 1000 px, Textbreite max 80ch
 *
 * Werte stehen hier als Zahlen, nicht als Token, weil das Theme im
 * Branding-Durchgang neu gebaut wird (web-architektur.md, Inhaltsseiten,
 * Rahmen Rechtstext). Nicht von Hand angleichen, sondern neu messen.
 *
 * Traegt die Seitentypen Impressum, AGB, Widerruf, Datenschutz und jede
 * Inhaltsseite mit eigenem Text (layout/index.tpl, Block nb-textseite).
 */

/* Seitengrund wie im Theme, rgb(246 247 251) am body (theme.css Zeile 17) */
.nb-textseite-bereich {
  background: #F6F7FB;
  color: #101828;
  font-family: Inter, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

/* .shopify-policy__container */
.nb-textseite {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3rem;
  max-width: none;
  padding: 3.5rem 0;
  margin-inline-start: max(1.25rem, 50% - 80ch / 2);
  margin-inline-end: max(1.25rem, 50% - 80ch / 2);
}

/* .shopify-policy__title, zentriert (policy-0e156355.css) */
.nb-textseite__titel { text-align: center; }

.nb-textseite__titel h1,
.nb-textseite__text h1 {
  margin: 0;
  font-family: Gilroy, sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #101828;
}

/* Ein Rechtstext, der seine eigene h1 mitbringt (IT-Recht-Impressum in JTL),
   traegt sie an derselben Stelle wie der Titelblock. */
.nb-textseite__text h1 { text-align: center; margin-bottom: 3rem; }

/* .rte, Impact .prose */
.nb-textseite__text h2,
.nb-textseite__text h3,
.nb-textseite__text h4 {
  margin: 0;
  font-family: Gilroy, sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #101828;
}
.nb-textseite__text h2 { font-size: 1.5rem; }
.nb-textseite__text h3 { font-size: 1.25rem; }
.nb-textseite__text h4 { font-size: 1.125rem; }

.nb-textseite__text p { margin: 0; }
.nb-textseite__text ol,
.nb-textseite__text ul {
  display: grid;
  row-gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
.nb-textseite__text ol { list-style-type: decimal; }
.nb-textseite__text ul { list-style-type: disc; }

/* Abstaende der Nachbarn, gemessen: bis 699 px Absatz nach Absatz 12, nach
   einer Ueberschrift 20, Ueberschrift nach Text 16. 700 bis 1149 px 16, 24, 24.
   Ab 1150 px 24, 32, 24. Liste nach Absatz ab 700 px immer 16. */
.nb-textseite__text * + p,
.nb-textseite__text * + div,
.nb-textseite__text * + ul,
.nb-textseite__text * + ol { margin-block-start: 0.75rem; }
.nb-textseite__text * + h2,
.nb-textseite__text * + h3,
.nb-textseite__text * + h4 { margin-block-start: 1rem; }
.nb-textseite__text :is(h1, h2, h3, h4) + * { margin-block-start: 1.25rem; }
.nb-textseite__text > :first-child,
.nb-textseite__text > :first-child :first-child { margin-block-start: 0 !important; }

.nb-textseite__text b,
.nb-textseite__text strong { font-weight: 700; }

/* Links: Unterstrich als Verlauf, Impact .prose a */
.nb-textseite__text a:not(.button) {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 100% 1px no-repeat;
  transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out;
  word-break: break-word;
}
.nb-textseite__text a:not(.button):hover { background-size: 0 1px; }

.nb-textseite__text img { max-width: 100%; height: auto; }
.nb-textseite__text table { border-collapse: collapse; width: 100%; }

/* Das Werbe-Logo der IT-Recht Kanzlei am Textende ("AGB by IT-Recht Kanzlei").
   Keine Einstellung im Mandantenportal oder in der Schnittstelle, der
   Plugin-Support der Kanzlei empfiehlt selbst das Ausblenden per CSS
   (wordpress.org/support/topic/it-recht-kanzlei-logo-entfernen). Der Text
   bleibt unveraendert, nur das Bild und sein Link fallen weg. Die Zeile
   "Stand: Datum" bleibt stehen. Daniel, 24.09.2026. */
.nb-textseite__text #itkanzlei_img_copyright,
.nb-textseite__text a:has(> #itkanzlei_img_copyright) { display: none; }

@media screen and (min-width: 700px) {
  .nb-textseite-bereich { font-size: 1rem; }
  .nb-textseite {
    padding: 4rem 0;
    margin-inline-start: max(2rem, 50% - 80ch / 2);
    margin-inline-end: max(2rem, 50% - 80ch / 2);
  }
  .nb-textseite__titel h1,
  .nb-textseite__text h1 { font-size: 2.25rem; }
  .nb-textseite__text h2 { font-size: 1.75rem; }
  .nb-textseite__text h3 { font-size: 1.5rem; }
  .nb-textseite__text h4 { font-size: 1.25rem; }
  .nb-textseite__text * + p,
  .nb-textseite__text * + div,
  .nb-textseite__text * + ul,
  .nb-textseite__text * + ol { margin-block-start: 1rem; }
  .nb-textseite__text * + h2,
  .nb-textseite__text * + h3,
  .nb-textseite__text * + h4 { margin-block-start: 1.5rem; }
  .nb-textseite__text :is(h1, h2, h3, h4) + * { margin-block-start: 1.5rem; }
}

@media screen and (min-width: 1000px) {
  .nb-textseite {
    margin-inline-start: max(3rem, 50% - 80ch / 2);
    margin-inline-end: max(3rem, 50% - 80ch / 2);
  }
}

@media screen and (min-width: 1150px) {
  .nb-textseite__text * + p,
  .nb-textseite__text * + div,
  .nb-textseite__text * + ol { margin-block-start: 1.5rem; }
  .nb-textseite__text :is(h1, h2, h3, h4) + * { margin-block-start: 2rem; }
}

@media screen and (min-width: 1400px) {
  .nb-textseite__titel h1,
  .nb-textseite__text h1 { font-size: 3rem; }
  .nb-textseite__text h2 { font-size: 2.5rem; }
}