/*
 * frequento — Gestaltung für Website und Block-Editor.
 *
 * Gilt im Frontend und im Editor (auch im Editor des Astra Site Builders),
 * damit eine Vorlage im Editor so aussieht wie später auf der Seite.
 *
 * Aufbau:
 *  1. Marke (Variablen) und sitzweite Grundwerte
 *  2. Abschnitte (.frq-abschnitt) und Innenbreite (.frq-innen)
 *  3. Schrift: Oberzeile, Einleitung, Überschriften
 *  4. Karten, Symbole, Kennzahlen
 *  5. Knöpfe
 *  6. Bilder (Browserfenster, Schatten, schwebende Anzeige)
 *  7. Listen, Schritte, Tabelle, FAQ, Kontakt
 *  8. Fusszeile für den Astra Site Builder
 *
 * Alle Klassen beginnen mit "frq-" (oder "is-style-frq-" für die Stile, die
 * man im Editor auswählt). Farben nur über die Variablen unten.
 *
 * Keine Webschriften: die Systemschrift jedes Geräts. Der Schriftzug im Logo
 * ist eine Grafik und braucht keine Schriftdatei.
 */

/* 1. Marke ---------------------------------------------------------------- */

:root {
  --frq-petrol: #0E3A4A;
  --frq-petrol-tief: #0A2C38;
  --frq-petrol-hell: #2A5B6B;
  --frq-aqua: #16B5A3;
  --frq-aqua-text: #0B7A6E;      /* Aqua als Schrift auf Weiss: 5,1:1 */
  --frq-aqua-hell: #E3F6F3;
  --frq-spur: #C3D5DB;
  --frq-flaeche: #F4F8F9;
  --frq-text: #33474F;
  --frq-leise: #5B6F78;
  --frq-radius: 18px;
  --frq-schatten: 0 1px 2px rgba(14, 58, 74, .06), 0 12px 32px rgba(14, 58, 74, .08);
  --frq-breite: 1180px;
  --frq-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body,
.editor-styles-wrapper {
  font-family: var(--frq-schrift);
  -webkit-font-smoothing: antialiased;
}

/* Seiten aus frequento-Abschnitten: Astras Innenabstände entfallen, die
   Abschnitte bringen ihren eigenen Rand mit. */
.frq-seite .site-content > .ast-container,
.frq-seite #primary,
body.frq-seite.ast-page-builder-template .site-main > article {
  padding: 0;
  margin: 0;
}

.frq-seite .entry-content > .frq-abschnitt,
.frq-seite .entry-content > .wp-block-group.frq-abschnitt {
  margin-block: 0;
}

/* 2. Abschnitte ------------------------------------------------------------- */

.frq-abschnitt {
  position: relative;
  color: var(--frq-text);
  background-color: #fff;
  overflow: hidden;
}

/* Nur der Innenabstand mit doppelter Klasse: Astra setzt für
   ".entry-content > .wp-block-group" eigene Abstände, die sonst gewinnen.
   Farben bleiben bewusst einfach gewichtet, damit die Varianten greifen. */
.frq-abschnitt,
.entry-content > .wp-block-group.frq-abschnitt,
.wp-block-group.frq-abschnitt {
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.25rem, 4vw, 2.5rem);
}

.frq-abschnitt--hell {
  background: var(--frq-flaeche);
}

.frq-abschnitt.frq-abschnitt--dunkel,
.frq-abschnitt.frq-abschnitt--hero {
  background: var(--frq-petrol);
  color: rgba(255, 255, 255, .86);
}

/* Kopfbereich: Petrol mit weichem Aqua-Schein — der Ring als Lichtquelle. */
.frq-abschnitt.frq-abschnitt--hero,
.entry-content > .wp-block-group.frq-abschnitt--hero,
.wp-block-group.frq-abschnitt--hero {
  background:
    radial-gradient(60rem 40rem at 85% 10%, rgba(22, 181, 163, .22), transparent 60%),
    radial-gradient(40rem 30rem at -10% 110%, rgba(22, 181, 163, .12), transparent 60%),
    linear-gradient(160deg, var(--frq-petrol) 0%, var(--frq-petrol-tief) 100%);
  padding-top: clamp(4rem, 9vw, 7.5rem);
}

.wp-block-group.frq-abschnitt--knapp {
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
}

.frq-innen {
  max-width: var(--frq-breite);
  margin-inline: auto;
}

.frq-innen--schmal {
  max-width: 900px;
  margin-inline: auto;
}

.frq-karten + .frq-innen--schmal {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.frq-mitte {
  text-align: center;
}

.frq-mitte .frq-lead {
  margin-inline: auto;
}

.frq-titelzeile {
  max-width: 760px;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.frq-mitte.frq-titelzeile,
.frq-titelzeile.has-text-align-center {
  margin-inline: auto;
}

/* 3. Schrift ---------------------------------------------------------------- */

body .frq-abschnitt h1,
body .frq-abschnitt h2,
body .frq-abschnitt h3,
body .frq-abschnitt h4 {
  color: var(--frq-petrol);
  letter-spacing: -.02em;
  font-weight: 700;
}

body .frq-abschnitt h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  line-height: 1.07;
  margin: 0 0 1.3rem;
}

body .frq-abschnitt h2 {
  font-size: clamp(1.8rem, 3.1vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

body .frq-abschnitt h3 {
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}

.frq-abschnitt p {
  line-height: 1.65;
}

.frq-abschnitt.frq-abschnitt--dunkel h1,
.frq-abschnitt.frq-abschnitt--dunkel h2,
.frq-abschnitt.frq-abschnitt--dunkel h3,
.frq-abschnitt.frq-abschnitt--hero h1,
.frq-abschnitt.frq-abschnitt--hero h2,
.frq-abschnitt.frq-abschnitt--hero h3 {
  color: #fff;
}

.frq-abschnitt.frq-abschnitt--dunkel a:not(.wp-block-button__link),
.frq-abschnitt.frq-abschnitt--hero a:not(.wp-block-button__link) {
  color: #8FE3D8;
}

.frq-eyebrow {
  display: inline-block;
  margin: 0 0 .9rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--frq-aqua-text);
}

.frq-abschnitt.frq-abschnitt--dunkel .frq-eyebrow,
.frq-abschnitt.frq-abschnitt--hero .frq-eyebrow {
  color: var(--frq-aqua);
}

/* Kleiner Hinweis-Chip über einer Überschrift ("Neu: …"). */
.frq-chip {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(22, 181, 163, .16);
  color: #8FE3D8;
  font-size: .84rem;
  font-weight: 600;
}

.frq-abschnitt:not(.frq-abschnitt.frq-abschnitt--dunkel):not(.frq-abschnitt.frq-abschnitt--hero) .frq-chip {
  background: var(--frq-aqua-hell);
  color: var(--frq-aqua-text);
}

.frq-lead {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--frq-leise);
  max-width: 640px;
}

.frq-abschnitt.frq-abschnitt--dunkel .frq-lead,
.frq-abschnitt.frq-abschnitt--hero .frq-lead {
  color: rgba(255, 255, 255, .8);
}

.frq-leise {
  color: var(--frq-leise);
  font-size: .92rem;
}

.frq-abschnitt.frq-abschnitt--dunkel .frq-leise,
.frq-abschnitt.frq-abschnitt--hero .frq-leise {
  color: rgba(255, 255, 255, .62);
}

/* 4. Karten, Symbole, Kennzahlen -------------------------------------------- */

.frq-karte,
.is-style-frq-karte {
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--frq-radius);
  box-shadow: var(--frq-schatten);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
}

.frq-karte > :first-child,
.is-style-frq-karte > :first-child {
  margin-top: 0;
}

.frq-karte > :last-child,
.is-style-frq-karte > :last-child {
  margin-bottom: 0;
}

.frq-karte p,
.is-style-frq-karte p {
  color: var(--frq-leise);
  font-size: .98rem;
}

.frq-abschnitt.frq-abschnitt--dunkel .frq-karte,
.frq-abschnitt.frq-abschnitt--dunkel .is-style-frq-karte {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.frq-abschnitt.frq-abschnitt--dunkel .frq-karte p,
.frq-abschnitt.frq-abschnitt--dunkel .is-style-frq-karte p {
  color: rgba(255, 255, 255, .74);
}

/* Spalten mit Karten: gleiche Höhe, etwas engerer Abstand als WordPress. */
.frq-karten.wp-block-columns {
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.frq-karten.wp-block-columns:last-child {
  margin-bottom: 0;
}

/* Symbol oben in einer Karte: Ring-Kreis mit Zeichen oder Ziffer. */
.frq-symbol {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin: 0 0 1.1rem;
  border-radius: 50%;
  background: var(--frq-aqua-hell);
  color: var(--frq-aqua-text);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 0 0 3px rgba(22, 181, 163, .35);
}

.frq-abschnitt.frq-abschnitt--dunkel .frq-symbol {
  background: rgba(22, 181, 163, .16);
  color: #8FE3D8;
}

/* Grosse Zahl mit Beschriftung (Kennzahlen-Leiste). */
.frq-zahl {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--frq-petrol);
}

.frq-abschnitt.frq-abschnitt--dunkel .frq-zahl,
.frq-abschnitt.frq-abschnitt--hero .frq-zahl {
  color: #fff;
}

.frq-zahlen .wp-block-column > p {
  margin: 0;
}

.frq-zahl + p {
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--frq-leise);
}

.frq-abschnitt.frq-abschnitt--dunkel .frq-zahl + p,
.frq-abschnitt.frq-abschnitt--hero .frq-zahl + p {
  color: rgba(255, 255, 255, .7);
}

/* Modulkarte: Kennzeichnung "im Basissystem" / "Zusatzmodul". */
.frq-etikett {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--frq-flaeche);
  color: var(--frq-leise);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.frq-etikett--basis {
  background: var(--frq-aqua-hell);
  color: var(--frq-aqua-text);
}

/* 5. Knöpfe -----------------------------------------------------------------
 *
 * Astra gewichtet seine Knopfregeln hoch (bis zu fünf Klassen, etwa
 * ".wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link
 * :not(.has-text-color)"). Die Regeln hier liegen bewusst eine Stufe darüber.
 * Eine im Editor gewählte eigene Farbe (.has-text-color / .has-background)
 * gewinnt weiterhin.
 */

.frq-abschnitt .wp-block-buttons {
  gap: .8rem;
  margin-top: 1.8rem;
}

.frq-abschnitt .wp-block-buttons .wp-block-button > .wp-block-button__link {
  border-radius: 12px;
  padding: .95rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.frq-abschnitt .wp-block-buttons .wp-block-button > .wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* Aqua mit Petrol-Schrift: Weiss auf Aqua wäre nicht lesbar (2,6:1). */
.wp-block-buttons .wp-block-button.is-style-frq-aqua > .wp-block-button__link:not(.has-background),
.frq-abschnitt.frq-abschnitt--dunkel .wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background),
.frq-abschnitt.frq-abschnitt--hero .wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
  background-color: var(--frq-aqua);
  border-color: var(--frq-aqua);
  color: var(--frq-petrol-tief);
  box-shadow: 0 8px 24px rgba(22, 181, 163, .3);
}

.wp-block-buttons .wp-block-button.is-style-frq-aqua > .wp-block-button__link:not(.has-background):hover,
.frq-abschnitt.frq-abschnitt--dunkel .wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover,
.frq-abschnitt.frq-abschnitt--hero .wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover {
  background-color: #2BC7B5;
  border-color: #2BC7B5;
  color: var(--frq-petrol-tief);
}

body .frq-abschnitt .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  background: transparent;
  border: 2px solid var(--frq-spur);
  color: var(--frq-petrol);
}

body .frq-abschnitt .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
  border-color: var(--frq-petrol);
}

.frq-abschnitt.frq-abschnitt--dunkel .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.frq-abschnitt.frq-abschnitt--hero .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

.frq-abschnitt.frq-abschnitt--dunkel .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.frq-abschnitt.frq-abschnitt--hero .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
  border-color: #fff;
}

/* 6. Bilder ----------------------------------------------------------------- */

.frq-abschnitt .wp-block-image {
  margin: 0;
}

.frq-abschnitt .wp-block-image img {
  display: block;
  height: auto;
  max-width: 100%;
}

.is-style-frq-schatten img {
  border-radius: var(--frq-radius);
  box-shadow: var(--frq-schatten);
}

/* Bildschirmfoto im Browserfenster: Leiste mit drei Punkten darüber. */
.is-style-frq-browser {
  position: relative;
  padding-top: 30px;
  border-radius: 14px;
  background: #E8EEF0;
  box-shadow: 0 2px 4px rgba(10, 44, 56, .1), 0 30px 70px rgba(10, 44, 56, .28);
  overflow: hidden;
}

.is-style-frq-browser::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 14px;
  width: 52px;
  height: 9px;
  background:
    radial-gradient(circle at 4.5px 4.5px, #F26D6D 4.5px, transparent 5px),
    radial-gradient(circle at 22.5px 4.5px, #F3BE4E 4.5px, transparent 5px),
    radial-gradient(circle at 40.5px 4.5px, #5CC777 4.5px, transparent 5px);
}

.is-style-frq-browser img {
  border-radius: 0;
}

/* Kopfbereich: Dashboard-Foto mit darüber schwebender öffentlicher Anzeige. */
.frq-hero-bild {
  position: relative;
}

.frq-schwebend {
  position: absolute;
  left: -3%;
  bottom: -10%;
  width: 34%;
  max-width: 250px;
  z-index: 2;
}

.frq-schwebend img {
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 44, 56, .35);
}

@media (max-width: 781px) {
  .frq-schwebend {
    left: auto;
    right: 4%;
    bottom: -12%;
    width: 38%;
  }

  .frq-hero-bild {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
  }
}

/* Ring als Dekoration (Abschnitt "Der Ring"). */
.frq-ring svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
}

/* 7. Listen, Schritte, Tabelle, FAQ, Kontakt ---------------------------------- */

.is-style-frq-haken,
.frq-haken {
  list-style: none;
  padding-left: 0;
  margin: 1.2rem 0 0;
}

.is-style-frq-haken li,
.frq-haken li {
  position: relative;
  padding-left: 2rem;
  margin: 0 0 .75rem;
  line-height: 1.55;
}

.is-style-frq-haken li::before,
.frq-haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230B7A6E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--frq-aqua-hell);
}

.frq-abschnitt.frq-abschnitt--dunkel .is-style-frq-haken li::before,
.frq-abschnitt.frq-abschnitt--hero .is-style-frq-haken li::before,
.frq-abschnitt.frq-abschnitt--dunkel .frq-haken li::before,
.frq-abschnitt.frq-abschnitt--hero .frq-haken li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2316B5A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    rgba(22, 181, 163, .16);
}

/* Ablauf: nummerierte Schritte, Zählung über CSS. */
.frq-schritte {
  counter-reset: frq-schritt;
}

.frq-schritt {
  counter-increment: frq-schritt;
  position: relative;
}

.frq-schritt::before {
  content: counter(frq-schritt);
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--frq-aqua);
  color: var(--frq-petrol-tief);
  font-weight: 800;
  font-size: 1.1rem;
}

/* Vergleichstabelle Basis/Module. */
.frq-tabelle table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--frq-radius);
  box-shadow: var(--frq-schatten);
  overflow: hidden;
  font-size: .96rem;
}

.frq-tabelle th,
.frq-tabelle td {
  padding: 1rem 1.2rem;
  border: 0;
  border-bottom: 1px solid #E6EEF1;
  text-align: left;
  vertical-align: top;
}

.frq-tabelle thead th {
  background: var(--frq-petrol);
  color: #fff;
  font-weight: 700;
}

.frq-tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.frq-tabelle td:first-child {
  font-weight: 700;
  color: var(--frq-petrol);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .frq-tabelle {
    overflow-x: auto;
  }

  .frq-tabelle td:first-child {
    white-space: normal;
  }
}

/* FAQ: Kernblock "Details" als Akkordeon. */
.frq-faq .wp-block-details {
  margin: 0 0 .8rem;
  padding: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--frq-schatten);
}

.frq-faq .wp-block-details summary {
  position: relative;
  padding: 1.15rem 3.4rem 1.15rem 1.4rem;
  font-weight: 700;
  color: var(--frq-petrol);
  cursor: pointer;
  list-style: none;
}

.frq-faq .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.frq-faq .wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--frq-aqua-hell);
  color: var(--frq-aqua-text);
  font-size: 1.2rem;
  line-height: 1;
}

.frq-faq .wp-block-details[open] summary::after {
  content: "–";
}

.frq-faq .wp-block-details > :not(summary) {
  margin: 0;
  padding: 0 1.4rem 1.2rem;
  color: var(--frq-leise);
}

/* Kontaktangaben. */
.frq-kontakt p {
  margin: 0 0 1.1rem;
}

.frq-kontakt strong {
  display: block;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--frq-leise);
}

.frq-kontakt a {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--frq-petrol);
  text-decoration: none;
}

/* Platz für ein eingebettetes Formular. */
.frq-formular {
  min-height: 12rem;
}

/* 8. Fusszeile für den Astra Site Builder ----------------------------------- */

.frq-fuss {
  background: var(--frq-petrol-tief);
  color: rgba(255, 255, 255, .72);
  padding: clamp(2.8rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 1.6rem;
  font-size: .95rem;
}

.frq-fuss a {
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
}

.frq-fuss a:hover {
  color: #fff;
  text-decoration: underline;
}

.frq-fuss h4 {
  margin: 0 0 .9rem;
  color: #fff;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.frq-fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.frq-fuss li {
  margin: 0 0 .45rem;
}

.frq-fuss .wp-block-image img {
  max-width: 180px;
  height: auto;
}

.frq-fuss-unten {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}

/* Bewegung nur, wenn erwünscht. */
@media (prefers-reduced-motion: reduce) {
  .frq-abschnitt .wp-block-buttons .wp-block-button > .wp-block-button__link {
    transition: none;
  }

  .frq-abschnitt .wp-block-buttons .wp-block-button > .wp-block-button__link:hover {
    transform: none;
  }
}

/* Kennzahlen auf dem Handy als 2 × 2 statt vier Zeilen untereinander.
   WordPress setzt dort flex-basis:100% mit !important — nur so übersteuerbar. */
@media (max-width: 781px) {
  .frq-zahlen.wp-block-columns {
    flex-wrap: wrap !important;
    gap: 1.6rem 1rem;
  }

  .frq-zahlen.wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - .5rem) !important;
  }
}