/* ============================================================
   falsch reich - Stützstile für den Elementor-Nachbau
   Präfix .fre- ; kollidiert nicht mit der bestehenden #fr-Seite.
   Alles was Elementor Free nativ kann, steht NICHT hier, sondern
   in den Widget-Einstellungen. Hier nur, was Elementor nicht kann.
   ============================================================ */

.fre-page{
  --fre-bg:#16274A; --fre-panel:#1B3054; --fre-panel-2:#22375F;
  --fre-text:#F2F4F8; --fre-muted:#B3BFD4; --fre-note:#93A0BA;
  --fre-gold-1:#C9A03F; --fre-gold-2:#FBE894; --fre-gold-3:#D4AF4E; --fre-gold-flat:#E3C46B;
  --fre-line:rgba(227,196,107,.20); --fre-kante:rgba(227,196,107,.16);
  --fre-zebra:rgba(227,196,107,.05);
  --fre-navy:#1B2A4A; --fre-auf:#12100A;
  --fre-sans:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Volltonfarbe als Rückfall, damit vor dem Zeichnen des Verlaufs nichts weiß aufblitzt */
  background-color:#16274A;
  background-image:radial-gradient(115% 85% at 68% 12%,#22375F 0%,#16274A 46%,#0E1A33 100%);
  background-attachment:fixed;
}

/* Elementor setzt auf Überschriften und Knöpfe die Kit-Schrift und fällt sonst
   auf generisches Sans-serif zurück. Hier gilt durchgehend die System-Schrift. */
.fre-page .elementor-widget .elementor-heading-title,
.fre-page .elementor-widget .elementor-button,
.fre-page .elementor-widget .elementor-icon-list-text,
.fre-page .elementor-widget .elementor-icon-box-title,
.fre-page .elementor-widget .elementor-icon-box-description,
.fre-page .elementor-widget .e-n-accordion-item-title,
.fre-page .elementor-widget p,
.fre-page .elementor-widget li,
.fre-page .elementor-widget cite{font-family:var(--fre-sans)}

/* Die Abstände kommen aus den Element-Rändern, nicht aus dem Absatz-Margin.
   Sonst addiert sich beides und die Rhythmik der Vorlage geht verloren. */
.fre-page .elementor-widget-text-editor p:last-child{margin-bottom:0}

/* Sektions-Themes: schreiben die Tokens lokal um, Kinder erben */
.fre-creme{
  --fre-panel:#FDFBF6; --fre-panel-2:#EFE9DC;
  --fre-text:#23252B; --fre-muted:#3E4149; --fre-note:#54575F;
  --fre-line:#DDD5C4; --fre-kante:rgba(35,37,43,.12);
  /* Bronze statt des olivstichigen #726E14 - das las sich auf Creme als Senf */
  --fre-zebra:rgba(35,37,43,.035); --fre-gold-flat:#7A5C18;
}
.fre-dunkel{
  --fre-panel:#22355C; --fre-panel-2:#1B2A4A;
  --fre-text:#F5F3EC; --fre-muted:#C3CCDD; --fre-note:#A9B4C9;
  --fre-line:rgba(246,242,233,.16); --fre-kante:rgba(246,242,233,.14);
  --fre-zebra:rgba(246,242,233,.05);
}

/* --- Lichtstimmung im Hero und bei den Irrtümern.
       Elementor kann nur einen Verlauf pro Fläche, hier liegen zwei. --- */
.fre-hero{background-image:
  radial-gradient(90% 60% at 50% -5%,rgba(227,196,107,.13),transparent 60%),
  radial-gradient(70% 50% at 80% 40%,rgba(86,130,206,.26),transparent 70%)}
.fre-irr-sec{background-image:
  radial-gradient(70% 50% at 15% 20%,rgba(227,196,107,.05),transparent 60%),
  radial-gradient(60% 50% at 85% 80%,rgba(27,42,74,.35),transparent 65%)}

/* --- Knöpfe: Gold als Verlauf, auf Creme stattdessen Navy --- */
.fre-btn-gold .elementor-button{
  background-image:linear-gradient(90deg,#C9A03F,#FBE894 50%,#D4AF4E);
  transition:transform .18s ease,filter .18s ease}
.fre-btn-gold .elementor-button:hover{filter:brightness(1.07);transform:translateY(-2px)}
.fre-btn-navy .elementor-button{box-shadow:0 6px 18px rgba(27,42,74,.22);
  transition:background-color .18s ease,transform .18s ease}
.fre-btn-navy .elementor-button:hover{background-color:#16233F;transform:translateY(-2px)}
.fre-btn-ghost .elementor-button:hover{background-color:rgba(227,196,107,.16)}
.fre-creme .fre-btn-ghost .elementor-button:hover{background-color:#1B2A4A;color:#F6F2E9}

/* --- Die Lernliste steht in zwei Spalten --- */
.fre-learn .elementor-icon-list-items{display:grid;grid-template-columns:1fr 1fr;
  gap:1.5rem 3.4rem;text-align:left}
.fre-learn .elementor-icon-list-items .elementor-icon-list-item{margin:0 !important;
  padding:.55rem 0 !important}
@media(max-width:960px){.fre-learn .elementor-icon-list-items{grid-template-columns:1fr}}

/* --- Sektionen blenden beim Scrollen ein.
       Der Startzustand hängt an .fre-js, das erst das Skript setzt. So bleibt
       im Elementor-Editor (kein Skript) alles sichtbar und bearbeitbar. --- */
.fre-js .fre-page .elementor > .e-con:not(.fre-sticky-halter):not(.fre-popup-halter) > .e-con-inner{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease}
/* Gleiche Spezifität wie oben, sonst gewinnt der Startzustand und die
   Sektionen bleiben unsichtbar. */
.fre-js .fre-page .elementor > .e-con:not(.fre-sticky-halter):not(.fre-popup-halter) > .e-con-inner.fre-in{
  opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .fre-js .fre-page .elementor > .e-con:not(.fre-sticky-halter):not(.fre-popup-halter) > .e-con-inner{
    opacity:1;transform:none;transition:none}
}

/* --- Zentrierte Fließtexte laufen auf 62 Zeichen, wie in der Vorlage --- */
.fre-mitte{max-width:62ch;margin-left:auto !important;margin-right:auto !important}

/* --- Gold-Verlauf auf Schrift. Elementor kennt nur Volltonfarben. --- */
.fre-gold{
  background:linear-gradient(90deg,#9B741D,#FBE894 50%,#C9A03F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fre-creme .fre-gold{background:none;-webkit-text-fill-color:#1B2A4A;color:#1B2A4A}
.fre-dunkel .fre-gold{background:none;-webkit-text-fill-color:#F5F3EC;color:#F5F3EC}

/* --- Buch im Hero: Lichtsaum und Erscheinungs-Fähnchen --- */
.fre-buch-halter{text-align:center}
.fre-buch{position:relative;display:inline-block;width:min(360px,100%)}
.fre-buch img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 46px rgba(227,196,107,.20)) drop-shadow(0 26px 54px rgba(3,9,20,.55))}
.fre-buch-flag{position:absolute;top:5%;right:-10px;z-index:3;
  background:linear-gradient(90deg,#C9A03F,#FBE894 55%,#D4AF4E);color:#12100A;
  font-family:var(--fre-sans);font-size:.76rem;font-weight:700;line-height:1.3;
  padding:.45rem .85rem;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.5)}
@media(max-width:700px){
  .fre-buch{width:min(240px,64%)}
  .fre-buch-flag{top:-10px;right:-10px;font-size:.72rem;padding:.4rem .75rem}
}

/* --- Zweiter Gold-Knopf direkt unter dem Buch, nur auf dem Handy ---
   Der Hero dreht ab Tablet die Spalten (column-reverse), das Buch steht dort
   also oben und der Knopf aus der Textspalte rutscht unter den Fliesstext.
   Auf dem Handy kostet das mehr als einen Bildschirm - deshalb hier ein
   zweiter Auslöser fuer dasselbe Popup, gleich neben dem Cover. --- */
/* Haelt Eigennamen zusammen - der Kicker im Hero soll auf dem Handy zwischen
   "von" und dem Namen umbrechen, nicht mitten im Namen. */
.fre-nowrap{white-space:nowrap}

.fre-nur-mobil{display:none}
@media(max-width:767px){
  .fre-nur-mobil{display:block}
  .fre-nur-mobil .elementor-button{width:min(320px,100%)}
  /* Die Autorzeile soll auch auf dem Handy einzeilig stehen wie am Rechner.
     Groesse und Sperrung skalieren mit der Breite. Das !important ist noetig:
     Elementor schreibt in post-28.css mit vier Klassen
     (.elementor-28 .elementor-element.elementor-element-fre00c1 .elementor-heading-title)
     und schlaegt damit jeden vernuenftig kurzen Selektor von hier. Wer die
     Groesse spaeter im Editor aendert, muss diese Regel mit anfassen.
     Bricht es auf sehr schmalen Geraeten doch um, haelt das .fre-nowrap um den
     Namen den Umbruch an der richtigen Stelle. */
  .fre-hero .elementor-element-fre00c1 .elementor-heading-title{
    font-size:clamp(10.5px,3.4vw,15px) !important;letter-spacing:.07em !important}
}

/* --- Zahlenreihe beim Autor --- */
.fre-stat b{display:block;font-size:2.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  background:linear-gradient(90deg,#C9A03F,#FBE894 50%,#D4AF4E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fre-stat span{display:block;color:var(--fre-muted);font-size:.88rem;margin-top:.2rem}

/* --- Details-Tabelle mit Zebra-Zeilen --- */
.fre-facts{display:grid;gap:.35rem;margin:0;padding:0;list-style:none;
  font-family:var(--fre-sans);color:var(--fre-muted);font-size:.98rem}
.fre-facts li{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border-radius:10px}
.fre-facts li:nth-child(odd){background:var(--fre-zebra)}
.fre-facts b{color:var(--fre-text);font-weight:600}

/* --- Die drei Irrtümer: Zitat wird bei Annäherung gold.
       Elementor setzt die Farbe auf .elementor-heading-title, nicht auf das
       Widget - der Selektor muss also eine Ebene tiefer greifen. --- */
.fre-irr-satz .elementor-heading-title{transition:color .3s ease}
/* Beim Überfahren das Gold der Knöpfe (#C9A03F). Auf Creme sind das nur
   2,2 Kontrast - als kurzer Akzent auf einem lesbaren Grundzustand vertretbar. */
.fre-irr-zeile:hover .fre-irr-satz .elementor-heading-title{
  color:#C9A03F !important}
/* Ohne Zeigegerät gibt es kein Überfahren, dort ist Gold der Dauerzustand.
   Deshalb hier ein dunkleres Gold, das die 3,0 für große Schrift schafft. */
@media (hover:none){
  .fre-irr-satz .elementor-heading-title{color:#A87F26 !important}
}

/* --- Countdown --- */
.fre-cd{display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap;font-family:var(--fre-sans)}
.fre-cd div{text-align:center}
.fre-cd b{display:block;font-size:2rem;font-weight:800;line-height:1;
  background:linear-gradient(90deg,#C9A03F,#FBE894 50%,#D4AF4E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fre-cd span{display:block;color:var(--fre-muted);font-size:.84rem;line-height:1.6;margin-top:4px}
.fre-dunkel .fre-cd span{color:#C3CCDD}

/* --- Kopfleiste, die beim Scrollen einfährt --- */
.fre-sticky{position:fixed;top:0;left:0;right:0;z-index:70;background:rgba(14,26,51,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(227,196,107,.18);
  transform:translateY(-100%);transition:transform .3s ease;font-family:var(--fre-sans)}
.fre-sticky.on{transform:none}
.fre-sticky-inner{max-width:1180px;margin:0 auto;padding:.7rem 1.5rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.fre-sticky b{color:#F2F4F8;font-weight:800;letter-spacing:-.01em}
.fre-sticky span{color:#B3BFD4;font-size:.9rem}
.fre-sticky a{background:linear-gradient(90deg,#C9A03F,#FBE894 50%,#D4AF4E);color:#12100A;
  text-decoration:none;font-weight:600;font-size:.92rem;padding:.65rem 1.3rem;border-radius:10px;
  white-space:nowrap}
@media(max-width:760px){.fre-sticky span{display:none}}

/* --- Formulare: Beleg-Upload und Popup --- */
.fre-form{background:var(--fre-panel);border:1px solid var(--fre-line);border-radius:18px;padding:2.4rem;
  display:flex;flex-direction:column;gap:.8rem;text-align:left;max-width:820px;margin:0 auto;
  font-family:var(--fre-sans);color:var(--fre-text)}
/* Auf dem dunklen Panel bekommen Beschriftungen und Eingaben reines Weiß -
   das gedämpfte Blaugrau war dort schwer zu lesen. */
.fre-form .lbl{font-weight:600;font-size:.95rem;color:#FFF}
.fre-creme .fre-form .lbl{color:var(--fre-text)}
.fre-form input[type=email],.fre-form input[type=text],.fre-form input[type=file],.fre-form select{
  background:var(--fre-panel-2);border:1px solid var(--fre-line);border-radius:12px;color:#FFF;
  padding:.95rem 1.1rem;font-family:var(--fre-sans);font-size:1rem;width:100%;outline:none}
.fre-creme .fre-form input,.fre-creme .fre-form select{color:var(--fre-text)}
.fre-form input::placeholder{color:#C3CFE0;opacity:1}
.fre-form input:focus,.fre-form select:focus{border-color:var(--fre-gold-flat);
  box-shadow:0 0 0 3px rgba(227,196,107,.16)}
.fre-form option{background:var(--fre-panel-2);color:var(--fre-text)}
.fre-form select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2A9B4' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;padding-right:2.8rem}
.fre-form input[type=file]{padding:.75rem .9rem;cursor:pointer}
.fre-form input[type=file]::file-selector-button{
  background:rgba(227,196,107,.14);border:1px solid rgba(227,196,107,.4);color:var(--fre-gold-flat);
  font-family:var(--fre-sans);font-weight:600;font-size:.92rem;padding:.55rem 1.1rem;border-radius:9px;
  margin-right:1rem;cursor:pointer;transition:background .18s ease}
.fre-form input[type=file]::file-selector-button:hover{background:rgba(227,196,107,.24)}
.fre-form .consent{display:flex;gap:.75rem;align-items:flex-start;color:#CBD5E4;
  font-size:.9rem;line-height:1.5}
.fre-creme .fre-form .consent{color:var(--fre-muted)}
.fre-form .consent input{margin-top:.25rem;accent-color:#D4AF4E;width:18px;height:18px;flex:0 0 auto}
.fre-form .note{color:#AEBACE;font-size:.82rem;margin:0}
.fre-creme .fre-form .note{color:var(--fre-note)}
.fre-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:960px){.fre-form .grid2{grid-template-columns:1fr}}
.fre-form button{background:linear-gradient(90deg,#C9A03F,#FBE894 50%,#D4AF4E);color:#12100A;border:0;
  cursor:pointer;font-family:var(--fre-sans);font-weight:600;font-size:1.05rem;padding:1.15rem 2rem;
  border-radius:14px;transition:filter .18s ease,transform .18s ease}
.fre-form button:hover{filter:brightness(1.07);transform:translateY(-2px)}
.fre-creme .fre-form button{background:#1B2A4A;color:#F6F2E9}
.fre-creme .fre-form button:hover{background:#16233F;filter:none}

/* --- Popup vor der Vorbestellung --- */
/* Das Popup ist jetzt ein Elementor-Container. Sichtbarkeit ueber eine Klasse,
   nicht ueber [hidden] - Elementor setzt display selbst und wuerde das ueberfahren.
   Zwei Klassen tief, damit die Regel gegen .e-con gewinnt. */
.fre-page .fre-pop{position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:1.5rem;font-family:var(--fre-sans)}
.fre-page .fre-pop.fre-auf{display:flex}
.fre-pop-bg{position:absolute;inset:0;background:rgba(4,5,7,.82);backdrop-filter:blur(6px)}
.fre-page .fre-pop-box{position:relative;background:#1B3054;
  border:1px solid rgba(227,196,107,.20);border-radius:20px;
  max-width:520px;width:100%;text-align:left;color:#FFF;
  box-shadow:0 40px 90px rgba(0,0,0,.7);animation:fre-popin .28s ease;
  max-height:92vh;overflow-y:auto}
@keyframes fre-popin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fre-pop-box{animation:none}}
.fre-pop-box h3{margin:0;font-size:1.32rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
/* Das Schließen-Kreuz ist ein Textknopf, kein Aktionsknopf - es muss von der
   Verlaufsregel weiter unten ausgenommen bleiben. */
.fre-pop-box button.fre-pop-x{position:absolute;top:.9rem;right:1rem;background:none;
  background-image:none;border:0;color:#AEBACE;font-size:1.7rem;line-height:1;cursor:pointer;
  padding:.2rem .5rem;border-radius:8px;font-weight:400;width:auto}
.fre-pop-box button.fre-pop-x:hover{color:#FFF;background:rgba(255,255,255,.08)}
.fre-pop-kicker{color:#E9CE7E;font-size:.86rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 1rem}
.fre-pop-lead{color:#CBD5E4;margin:.9rem 0 1.6rem;line-height:1.6}
.fre-pop-box form{display:flex;flex-direction:column;gap:.7rem}
.fre-pop-box .lbl{font-weight:600;font-size:.95rem;color:#FFF}
.fre-pop-box input{background:#22375F;border:1px solid rgba(227,196,107,.28);border-radius:12px;
  color:#FFF;padding:.95rem 1.1rem;font-family:var(--fre-sans);font-size:1rem;width:100%;outline:none}
.fre-pop-box input::placeholder{color:#C3CFE0;opacity:1}
.fre-pop-box input:focus{border-color:#E3C46B;box-shadow:0 0 0 3px rgba(227,196,107,.16)}
.fre-pop-box button:not(.fre-pop-x){background:linear-gradient(90deg,#C9A03F,#FBE894 50%,#D4AF4E);
  color:#12100A;border:0;cursor:pointer;font-family:var(--fre-sans);font-weight:600;font-size:1.05rem;
  padding:1.15rem 2rem;border-radius:14px;transition:filter .18s ease,transform .18s ease}
.fre-pop-box button:not(.fre-pop-x):hover{filter:brightness(1.07);transform:translateY(-2px)}
.fre-pop-box .note{color:#AEBACE;font-size:.82rem;margin:.2rem 0 0}
@media(max-width:560px){.fre-pop-box{padding:2rem 1.5rem}}

/* --- FAQ: In der Vorlage sind es einzelne Karten mit Abstand,
       Elementor rendert eine durchgehende Liste. --- */
/* Elementor setzt bei begrenzter Breite keinen automatischen Rand,
   das Widget säße sonst linksbündig statt mittig. */
.fre-faq{margin-left:auto !important;margin-right:auto !important}
.fre-faq .elementor-toggle-item{margin-bottom:.8rem;border:1px solid var(--fre-line);
  border-radius:14px;overflow:hidden;background:var(--fre-panel)}
.fre-faq .elementor-tab-title{border:0 !important}
.fre-faq .elementor-tab-content{border:0 !important}

/* --- Zitatband: Serifenschrift, die Elementor nicht im Kit hat.
       Muss die allgemeine Schriftregel oben überbieten. --- */
.fre-page .elementor-widget.fre-zitat p{font-family:Georgia,"Times New Roman",serif}

/* --- Aufzählungen: Häkchen und Text sollen oben bündig stehen.
       Elementor zentriert sie vertikal, sobald der Text umbricht. --- */
/* Elementor zentriert Häkchen und Text senkrecht. Bei zwei Zeilen rutscht das
   Häkchen dadurch zwischen die Zeilen - es gehört auf die erste. */
.fre-page .fre-check .elementor-icon-list-item{align-items:flex-start}
.fre-page .fre-check .elementor-icon-list-icon{margin-top:.2em}
.fre-check .elementor-icon-list-text strong{font-weight:600}
.fre-check.fre-navy .elementor-icon-list-text strong{color:#F2F4F8}

/* --- Icon-Kachel in den Bonus-Karten: Verlauf statt Vollton --- */
.fre-ico .elementor-icon{
  background-image:linear-gradient(140deg,#FBE894,#D4AF4E 55%,#C9A03F);
  box-shadow:0 8px 20px rgba(155,116,29,.28)}
.fre-ico .elementor-icon svg{fill:none;stroke:#12100A;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* --- Gravity Forms im Popup: drei Nachbesserungen aus dem Test ---
   1. Elementor gibt jedem Widget position:relative. Das Schließen-Kreuz
      positioniert sich dann zum Widget statt zur Box und landet im Text.
   2. Der Absende-Knopf ist in GF 3 ein <button> im Flex-Fuß und nimmt
      ohne Nachhilfe nicht die volle Breite.
   3. Die roten "(erforderlich)"-Hinweise gab es in der Vorlage nicht.
      Sie bleiben für Screenreader lesbar, verschwinden aber optisch. */
.fre-page .fre-pop-x-halter{position:static}
.fre-page .fre-pop-box .gform_footer{display:block}
.fre-page .fre-pop-box .gform_footer button,
.fre-page .fre-pop-box .gform_footer input[type=submit]{width:100% !important;
  justify-content:center;text-align:center}
.fre-page .fre-pop-box .gfield_required{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Der Fuß soll nicht mehr Abstand mitbringen als die Vorlage */
.fre-page .fre-pop-box .gform_wrapper .gform_footer{margin:.6rem 0 0;padding:0}

/* GF's Framework-Theme setzt die Knopfschrift ueber --gf-local-color auf Weiss.
   Weiss auf Gold ist unlesbar, deshalb hier festgenagelt. */
.fre-page .fre-pop-box .gform_footer button,
.fre-page .fre-pop-box .gform_footer input[type=submit],
.fre-page .fre-gf-halter .gform_footer button{
  color:#12100A !important;font-weight:600 !important}

/* --- Platzhalter in den Gravity-Forms-Feldern -------------------------------
   Gravity Forms setzt die Platzhalterfarbe ueber eine eigene CSS-Variable
   (--gf-ctrl-placeholder-color) in seinem Theme-Framework. Die Regel ist
   spezifischer als .fre-pop-box input::placeholder, deshalb blieb dort das
   Browser-Grau stehen: gemessen #575E62 auf dem blauen Feld #22375F, das sind
   1,79 Kontrast — praktisch unlesbar. Aufgefallen nach dem Wechsel auf
   Gravity Forms am 31.07.

   Die Variable zu setzen ist sauberer als ein Wettlauf mit !important. */
.fre-page .fre-pop-box .gform_wrapper,
.fre-page .fre-gf-halter .gform_wrapper,
.fre-page .gform_wrapper.gravity-theme,
.fre-page .gform-theme--framework{
  --gf-ctrl-placeholder-color:#C3CFE0;
}

/* Sicherung, falls die Variable in einer kuenftigen GF-Fassung anders heisst. */
.fre-page .fre-pop-box .gform_wrapper input::placeholder,
.fre-page .fre-pop-box .gform_wrapper textarea::placeholder,
.fre-page .fre-gf-halter .gform_wrapper input::placeholder,
.fre-page .fre-gf-halter .gform_wrapper textarea::placeholder{
  color:#C3CFE0;
  opacity:1;
}

/* --- Buch-Slider im Hero (20.08.2026) --- */
.fre-sl{width:min(430px,100%)}
.fre-sl .fre-buch-flag{right:2%;top:3%}
.fre-sl-buehne{position:relative}
.fre-sl-buehne .fre-sl-bild{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.fre-sl-buehne .fre-sl-bild:first-child{position:relative;inset:auto}
.fre-sl-buehne .fre-sl-bild.fre-sl-an{opacity:1;pointer-events:auto}
.fre-sl-pfeil{position:absolute;top:44%;z-index:4;width:42px;height:42px;border-radius:50%;border:1px solid rgba(227,196,107,.45);background:rgba(10,11,13,.55);cursor:pointer;padding:0;transition:border-color .2s,background .2s}
.fre-sl-pfeil::before{content:"";display:block;width:11px;height:11px;border-top:2px solid #E3C46B;border-right:2px solid #E3C46B}
.fre-sl-zur{left:-6px}
.fre-sl-zur::before{transform:rotate(-135deg);margin:0 0 0 17px}
.fre-sl-vor{right:-6px}
.fre-sl-vor::before{transform:rotate(45deg);margin:0 17px 0 11px}
.fre-sl-pfeil:hover{background:rgba(20,22,25,.85);border-color:#E3C46B}
.fre-sl-punkte{display:flex;justify-content:center;gap:10px;margin-top:14px}
.fre-sl-punkt{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(227,196,107,.28);transition:background .2s,transform .2s}
.fre-sl-punkt.fre-sl-an{background:linear-gradient(90deg,#c9a03f,#fbe894 55%,#d4af4e);transform:scale(1.25)}
@media(max-width:700px){
  .fre-sl{width:min(300px,86%)}
  .fre-sl .fre-buch-flag{top:-6px;right:0}
  .fre-sl-pfeil{width:36px;height:36px}
  .fre-sl-zur{left:-12px}
  .fre-sl-vor{right:-12px}
  .fre-sl-zur::before{margin-left:14px}
  .fre-sl-vor::before{margin-right:14px;margin-left:9px}
}