/* ==========================================================================
   block123-fix.css
   Kleine Korrekturen für den 1:1 übernommenen 123-Kredite-Abschnitt.

   Wird NACH der Original-123-CSS geladen und lässt diese unangetastet,
   damit der Original-Stand jederzeit vergleichbar bleibt.
   Alles hier ist auf #block123 begrenzt und greift nicht in den
   zuschuss-plus-Inhalt darunter ein.
   ========================================================================== */


/* --- Negativer Abstand am oberen Rand -------------------------------------
   Im Funnel ragt der Hero 330px nach unten und die beiden Spalten werden mit
   margin-top:-275px bzw. -70px in diese Fläche hineingezogen. Ohne den Hero
   verschwindet der Anfang des Blocks nach oben aus dem Bild.
   -------------------------------------------------------------------------- */

/* Nur freistehend. Im iFrame sollen die Original-Abstaende gelten, damit der
   Block genauso im Hero haengt wie Variante E - siehe ganz unten. */
html:not(.im-iframe) #block123 .left-side  { margin-top: 0 !important; }
html:not(.im-iframe) #block123 .right-side { margin-top: 0 !important; }

/* Die Sektion trug die Höhe für den Hero – ohne ihn ist das nur Leerraum. */
#block123 .novaherosection { padding-bottom: 0 !important; }

/* Etwas Luft nach oben und unten, damit die Karte nicht am Seitenrand klebt.
   Unten kam die Luft frueher vom nachfolgenden zuschuss-plus-Inhalt. Seit der
   am 12.08.2026 entfernt wurde, endet das Dokument exakt an der Kartenkante -
   die abgerundete Ecke und der Schatten von .shadow liegen dann genau auf der
   Schnittkante und die Seite wirkt unten abgeschnitten. */
html:not(.im-iframe) #block123 { padding-top: 40px; padding-bottom: 24px; }


/* --- Schrift ---------------------------------------------------------------
   Der Block soll wie auf 123-Kredite in Raleway laufen. Ohne diese Regel
   gewinnt die zuschuss-plus-CSS mit open-sans, weil sie spezifischer setzt.
   Elemente mit Font-Awesome-Klassen sowie <i> bleiben ausgenommen, sonst
   verlieren die Icons ihre Symbolschrift und werden zu leeren Kaestchen.
   -------------------------------------------------------------------------- */

/* zuschuss-plus-css.css setzt open-sans mit !important auf p, h1-h6 und body.
   Deshalb ist !important hier unvermeidbar. */
#block123,
#block123 :not(i):not([class*="fa-"]) {
  font-family: 'Raleway', sans-serif !important;
}


/* --- Headline aus der gelben Box in der Karte -------------------------------
   Die Auszeichnungszeile stammt aus dem breiten Hero und ist fuer volle
   Fensterbreite ausgelegt. In der Karte wird sie an die Spaltenbreite
   gebunden; die groessere 568-EURO-Zeile und das Sternchen mit dem Hinweis
   bleiben wie im Original.
   -------------------------------------------------------------------------- */

#block123 .tcc-title-block {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.12;
  text-align: center;
  margin-bottom: 6px;
  text-wrap: balance;
}

/* Der Hinweis am Sternchen darf nicht am Kartenrand abgeschnitten werden. */
#block123 .tcc-tip { position: relative; }
#block123 .tcc-tip-content { z-index: 20; }

/* Originalschreibweise statt Versalien – der Text im Quelltext ist gemischt
   geschrieben, die Grossschreibung kam allein aus .tcc-title. */
#block123 .tcc-title-block { text-transform: none; }

/* Die beiden harten Umbrueche direkt in der Ueberschrift ausblenden, damit
   die Zeile sich der Spaltenbreite anpasst. Der Umbruch vor der grossen
   568-EURO-Zeile liegt im inneren span und bleibt erhalten. */
#block123 .tcc-title-block > br { display: none; }

/* ---------------------------------------------------------------------
   "Was ist zuschuss plus" - steht seit 12.08.2026 an der Stelle, an der
   vorher "Ueber 20.000 Kunden profitieren bereits jetzt schon" stand.
   Zweimal im HTML, wie alles dort: einmal im .desktophide-Kasten (mobil)
   und einmal in der .mobilehide-Spalte (Desktop).

   Beide sitzen jetzt in #block123 und erben von dort Raleway sowie die
   800 auf h4.novah4 - genau die Werte des alten Vorbilds. Der graue
   Kasten auf dem Handy kommt vom umgebenden .desktophide-Kasten, dessen
   Stil inline im HTML steht. Hier bleibt deshalb nur, was die Vererbung
   nicht abdeckt: die Zentrierung und das Gewicht des Fliesstextes.

   ACHTUNG: der einzige Abschnitt dieser Datei ausserhalb von #block123
   waere er nicht mehr - der Inhalt ist umgezogen. Die Selektoren greifen
   jetzt innerhalb von #block123.
   --------------------------------------------------------------------- */

.zp-infobox-inner {
	text-align: center;
}

/* Fliesstext auf die 200 des alten Vorbilds. Das !important muss sein,
   weil .tcc-info-block seine font-weight:100 selbst mit !important setzt.
   Die seitlichen 30px von .tcc-info-block fallen weg - im zentrierten
   Satz wirken sie wie ein schiefer Rand. */
.zp-infobox-inner p.tcc-info-block {
	font-weight: 200 !important;
	padding-left: 0;
	padding-right: 0;
}

/* Die Dokumentenliste bleibt linksbuendig - zentrierte Listenpunkte sind
   unlesbar. Sie haengt an .tcc-none und ist ohnehin dauerhaft aus: zu
   #toggleButton existiert kein JavaScript, der Schalter ist tot. */
.zp-infobox-inner .hier-show,
.zp-infobox-inner .hier-show * {
	text-align: left;
}

/* Die beiden Sprungziele im Fliesstext ("568 Euro" -> #good,
   "Voraussetzungen" -> #why) waren vor dem Umzug unterstrichen. In
   #block123 sind Links dekorationsfrei gesetzt, dadurch sahen sie
   hinterher wie normaler Text aus und niemand haette sie angeklickt. */
.zp-infobox-inner p.tcc-info-block a {
	text-decoration: underline;
}


/* ---------------------------------------------------------------------
   Schritt-Boxen mit mehrzeiligem Text (12.08.2026)

   style-block123.css setzt .nova-steps auf feste "height: 40px" - das
   passte, solange in jeder Box nur eine Zeile stand ("Vertragsunterlagen
   pruefen"). Seit dort ganze Saetze stehen, laeuft der Text unten aus dem
   Kasten heraus und ueberlappt den naechsten.

   Deshalb: Hoehe waechst mit dem Inhalt, 40px bleiben die Untergrenze,
   damit einzeilige Boxen aussehen wie vorher. Die Ziffer wird aus dem
   Textfluss genommen und links daneben gesetzt - sonst umfliesst die
   zweite Zeile sie und rutscht unter das Icon. Der Text bekommt links
   entsprechend Platz (15px Rand + 16px Icon + 9px Luft = 40px) und steht
   damit als sauberer Block neben der Ziffer.
   --------------------------------------------------------------------- */

#block123 .nova-steps {
	position: relative;
	height: auto;
	min-height: 40px;
	padding: 11px 15px 11px 40px;
	margin-bottom: 10px;
	line-height: 1.45;
	text-align: left;
	overflow-wrap: break-word;
}

/* Die Ziffer sitzt fest oben links. Das margin-right/-top steht inline im
   HTML und laesst sich nur mit !important ueberschreiben. */
#block123 .nova-steps > img {
	position: absolute;
	left: 15px;
	top: 13px;
	width: 16px;
	height: 16px;
	margin: 0 !important;
}

/* Die fett ausgezeichnete Einleitung ("zuschuss plus starten:") laeuft
   sonst in der 100er-Schrift von .OFST4MVTN mit und hebt sich nicht ab. */
#block123 .nova-steps .tcc-700 {
	font-weight: 700 !important;
}

/* Auf schmalen Schirmen setzt style-block123.css links und rechts 25px.
   Links braucht die Ziffer den Platz, rechts darf es enger werden. */
@media (max-width: 767px) {
	#block123 .nova-steps {
		padding: 11px 15px 11px 38px;
	}
	#block123 .nova-steps > img {
		left: 13px;
	}
}


/* ---------------------------------------------------------------------
   Transparenter Hintergrund fuer die Einbettung per iFrame (12.08.2026)

   custom.css setzt "body { background: #ffffff }", Bootstrap zusaetzlich
   "--bs-body-bg". Im iFrame malt dieser weisse Kasten ueber das Design der
   Elternseite - genau das soll nicht passieren.

   Die Leinwand eines Dokuments kommt von <html>, ersatzweise von <body>.
   Nur wenn BEIDE transparent sind, scheint die Elternseite durch. Ein
   allowtransparency-Attribut am iFrame braucht es dafuer nicht mehr, das
   war eine Sache alter IE-Versionen.

   Fuer die Seite im Direktaufruf aendert sich nichts sichtbar: dort malt
   der Browser hinter dem transparenten Dokument ohnehin seine eigene
   weisse Flaeche.

   Die Karten behalten ihren Hintergrund - .backgroundrsv (weiss) links und
   .novagraybackground (grau) rechts sitzen auf den Spalten, nicht auf body.
   --------------------------------------------------------------------- */

html,
body {
	background: transparent !important;
}


/* ---------------------------------------------------------------------
   Eingebettet: exakt so sitzen wie Variante E (OFST4MVTN)  -  12.08.2026

   Variante E steht ohne Rahmen direkt im Funnel. Gemessen bei 1710px
   Fensterbreite:

       Hero endet bei          597
       linke Karte    oben 322, links 286, breit 569   (margin-top -275px)
       rechte Spalte  oben 527, links 855, breit 569   (margin-top  -70px)
       row            oben 597, links 286, breit 1139

   Der Versatz von 205px zwischen den Spalten ist gewollt: beide werden per
   Negativ-Abstand in den Hero hineingezogen, die linke weiter als die rechte.
   Freistehend muss man das neutralisieren (sonst verschwindet der Anfang nach
   oben aus dem Bild) - eingebettet dagegen brauchen wir es genau so.

   Zwei Dinge muessen dafuer zusammenspielen, das Gegenstueck steht in
   der Original-123-CSS unter ".OFSTJLN2V #zpFrame":

   Senkrecht: der Rahmen wird um 283px nach oben gezogen, hier drin schafft
   dieselbe Zahl als padding-top wieder Platz. Unterm Strich liegt die row
   wieder auf 597 und die Karte auf 322 - wie in E. Die 8px Zugabe auf die
   275 sind Luft fuer den Schatten, der sonst an der Rahmenkante abschneidet.

   Waagerecht: der Rahmen wird beidseitig 20px breiter als seine Spalte und
   mit margin-left:-20px zurueckgeschoben; die 20px hier drin nehmen sie
   wieder weg. Ergebnis: Inhaltsbreite 1115, row 1139, Karten 569 - die
   Werte von E. Die Zugabe ist noetig, weil die row -12px Negativabstand
   hat und ohne sie links aus dem Rahmen liefe.

   Alles nur ab 768px: darunter setzt style-block123.css gar keine
   Negativ-Abstaende (die Regel haengt an min-width:768px), die Spalten
   stapeln normal, und der Rahmen bleibt, wo er ist.
   --------------------------------------------------------------------- */

/* Unter 768px gilt ein ANDERER Negativ-Abstand als darueber: nicht die
   -275px von .left-side (die haengen an min-width:768px), sondern die
   -120px aus der globalen Regel .backgroundrsv. Leicht zu uebersehen,
   weil sie nicht an .left-side haengen - und ohne Platz dafuer rutscht
   die Karte 80px ueber die Rahmenkante: das "Anzeige"-Schild ist dann
   ganz weg und von der Headline fehlt die erste Zeile.

   120 fuer den Negativ-Abstand + 40 fuer Schild und Schatten. */
.im-iframe #block123 {
	padding-top: 160px;
	padding-bottom: 24px;
}

/* Die row hat -12px Gutter, dazu soll die Karte etwas Abstand zur
   Rahmenkante behalten, damit ihr Schatten nicht abgeschnitten wird. */
.im-iframe #block123 .nova-content {
	padding-left: 24px;
	padding-right: 24px;
}

@media (min-width: 768px) {
	.im-iframe #block123 {
		padding-top: 315px;
	}
	.im-iframe #block123 .nova-content {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Die eigene Breitenbegrenzung muss im Rahmen weg.

   style-block123.css setzt
       @media screen and (max-width:1199px) and (min-width:768px)
       .OFST4MVTN .container { max-width: 1000px }
   dazu kommen Bootstraps eigene Stufen (720 / 960 / 1140 / 1320).

   Im Funnel greift davon nichts: dort ist das FENSTER 1710px breit. Im
   iFrame beziehen sich Media Queries aber auf die RAHMENbreite - bei
   1155px landet die Seite in der 768-1199-Stufe und deckelt sich selbst
   auf 1000px. Die Karten waeren dann 492px statt 569px.

   Die Begrenzung ist hier auch gar nicht noetig: wie breit der Block
   werden darf, entscheidet bereits der Container des Funnels, der den
   Rahmen umgibt. Ohne Deckel entspricht die Inhaltsbreite im Rahmen
   genau der von Variante E - bei jeder Fensterbreite. */

.im-iframe #block123 .container {
	max-width: none !important;
}


/* ---------------------------------------------------------------------
   Einleitung ueber dem Formular  (12.08.2026)

   "Moechtest du die bereits ... verwenden?" lief in font-weight 100 und
   ging neben der 900er Zeile "Antragsunterlagen fuer die moegliche
   Foerderung ..." darueber unter. Beide sollen gleich schwer wirken.

   Groesse und Zeilenabstand mussten dafuer nicht angefasst werden: beide
   stehen ohnehin auf 15px / 22,5px. Der einzige Unterschied war das
   Gewicht - und die Ausrichtung, die linksbuendig bleiben soll.

   Das !important ist noetig, weil .tcc-info-block sein font-weight:100
   selbst mit !important setzt.
   --------------------------------------------------------------------- */

#block123 p.zp-form-lead {
	font-weight: 900 !important;
	text-align: left;
}

/* Die gelbe Linie ueber der Einleitung braucht etwas Luft, sonst klebt sie
   an beidem. Am Kartenkopf macht das dort ein .my-4.
   Haengt seit 25.08.2026 an .zp-form-trenner - vorher am .TCC-form-head,
   den es seit dem Entfernen der Ueberschrift nicht mehr gibt. */
#block123 hr.divider.zp-form-trenner {
	margin-top: 14px;
	margin-bottom: 18px;
}


/* ---------------------------------------------------------------------
   "Anzeige"-Kennzeichnung  (12.08.2026)

   Der Inhalt dieser Karte kommt von einem fremden Anbieter (Nova Sedes)
   und ist Werbung - das muss erkennbar sein. Das Schildchen sitzt als
   Reiter auf der Oberkante, rechts neben der mittigen Flagge.

   Warum "top: -26px": das Schildchen ist 27px hoch, sitzt also mit einem
   Pixel Ueberlappung genau auf der Kartenkante. Waere es hoeher gesetzt,
   liefe ein Schattenstrich quer ueber den weissen Kartenkopf; waere es
   tiefer, entstuende eine Fuge. Der Schatten faellt nur nach oben, aus
   demselben Grund.

   Der Platz dafuer kommt aus dem padding-top von #block123 - dort sind
   deshalb oben 40px statt 24px gesetzt (eingebettet ab 768px 315 statt
   283). Ohne das schneidet der iFrame das Schildchen oben ab.
   --------------------------------------------------------------------- */

#block123 .left-side {
	position: relative;
}

/* Zurueckhaltende Fassung ab 25.08.2026: kein Aufkleber mehr, der oben auf
   der Kartenkante klebt, sondern eine kleine graue Zeile INNEN in der oberen
   rechten Ecke - so wie Verlage Anzeigen auszeichnen.

   Das loest nebenbei ein technisches Problem: die Zeile traegt filter:
   drop-shadow (siehe unten), und der zeichnet die Silhouette von allem, was
   nicht deckend ist. Ein Schild ohne Hintergrund, das ueber die Kartenkante
   hinausragte, haette einen weichen Schatten um jeden einzelnen Buchstaben
   bekommen. Innerhalb der weissen Flaeche passiert das nicht.

   Farbe bewusst #767676: das ergibt auf Weiss ein Kontrastverhaeltnis von
   4,5:1 und bleibt damit lesbar. Heller waere die Kennzeichnung faktisch
   keine mehr - und genau dafuer ist sie da. */
#block123 .zp-anzeige-badge {
	position: absolute;
	top: 12px;
	right: 18px;
	z-index: 3;

	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;

	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #767676;
	white-space: nowrap;
}

/* Auf schmalen Schirmen etwas naeher an die Ecke. */
@media (max-width: 767px) {
	#block123 .zp-anzeige-badge {
		top: 10px;
		right: 12px;
		font-size: 10px;
	}
}


/* ---------------------------------------------------------------------
   Eine gemeinsame Schatten-Box um die ganze Anzeige  (25.08.2026)

   Auf Wunsch von Nova Sedes soll nicht mehr nur die linke Spalte in einer
   weissen Karte stehen, sondern die komplette Anzeige - mit der Stufe oben,
   weil die linke Spalte 205px hoeher beginnt als die rechte (-275px gegen
   -70px, siehe weiter oben).

   Der Kniff steckt im Schatten: box-shadow zeichnet IMMER ein Rechteck um
   das Element und wuerde die Stufe einfach ueberbuegeln. filter:drop-shadow
   dagegen folgt der tatsaechlichen Silhouette der Kinder - also genau der
   Stufe. Deshalb sitzt der Schatten jetzt an der Zeile und nicht mehr an
   den Spalten.

   Damit die beiden Spalten zu EINER Form verschmelzen, muessen zwei Dinge
   stimmen: gleicher Hintergrund und eckige Innenkanten. Runde Ecken an der
   Nahtstelle ergaeben sonst eine Kerbe in der Mitte.
   --------------------------------------------------------------------- */

#block123 .left-side,
#block123 .right-side {
	background-color: #ffffff !important;
	box-shadow: none !important;
}

/* Der Schatten der Gesamtform. Werte an den bisherigen der linken Karte
   angelehnt (0 0 15px rgba(0,0,0,.3)), etwas zurueckgenommen, weil er
   jetzt eine deutlich groessere Flaeche umlaeuft. */
#block123 .row {
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.22));
}

/* Ab 769px stehen beide Spalten nebeneinander: Aussenecken rund,
   Innenkanten eckig. Reihenfolge oben-links / oben-rechts / unten-rechts /
   unten-links. Die linke behaelt oben rechts eine runde Ecke, weil dieser
   Teil ueber die rechte Spalte hinausragt und frei liegt.
   Das !important ist noetig, weil border-radius:20px inline im HTML steht. */
@media (min-width: 769px) {
	#block123 .left-side  { border-radius: 20px 0 0 20px !important; }
	#block123 .right-side { border-radius: 0 20px 20px 0 !important; }

	/* Nur eingebettet gibt es die Stufe: dort ragt die linke Spalte oben
	   ueber die rechte hinaus, ihre obere rechte Ecke liegt also frei und
	   soll rund sein. Freistehend sind beide Spalten oben buendig - dort
	   waere dieselbe Rundung eine Kerbe mitten in der Oberkante. */
	.im-iframe #block123 .left-side { border-radius: 20px 20px 0 20px !important; }
}

/* Bis 768px ist .right-side per .mobilehide ausgeblendet - dann bleibt eine
   einzelne, rundum abgerundete Karte. */
@media (max-width: 768px) {
	#block123 .left-side { border-radius: 20px !important; }
}


/* ---------------------------------------------------------------------
   Kennzeichnung: getrennt fuer Desktop und Mobil  (25.08.2026)

   Desktop: sie sitzt in der rechten Spalte, dem ruhigeren Bereich - nicht
   mehr auf der Hauptkarte mit der Headline.
   Mobil: unveraendert oben rechts in der Karte, dort gibt es keine zweite
   Spalte. Beide Fassungen sind getrennt regelbar.

   Die Umschaltung laeuft ueber eigene Media Queries und NICHT ueber die
   vorhandenen .mobilehide / .desktophide: die ueberlappen sich bei exakt
   768px (max-width:768 gegen min-width:768) und blenden dort beides aus.
   --------------------------------------------------------------------- */

#block123 .right-side {
	position: relative;
}

@media (max-width: 768px) {
	#block123 .zp-anzeige-badge--desktop { display: none; }
}

@media (min-width: 769px) {
	#block123 .zp-anzeige-badge--mobil { display: none; }

	/* In der rechten Spalte sitzt oben rechts nichts - die Zeile stoert dort
	   niemanden und liegt trotzdem am oberen Rand der Anzeige. */
	#block123 .zp-anzeige-badge--desktop {
		top: 12px;
		right: 18px;
	}
}


/* ---------------------------------------------------------------------
   Mobil: Kennzeichnung mittig unter der Flagge  (25.08.2026)

   Vorher stand sie absolut positioniert oben rechts in der Ecke. Unter der
   Flagge liest sie sich als Teil des Kopfbereichs statt als aufgeklebtes
   Etikett - und faellt dadurch weniger auf, ohne dass an Groesse oder
   Farbe weiter geschraubt werden muesste.

   Deshalb hier position:static statt absolute: sie laeuft im Textfluss mit
   und schiebt die Headline um ihre eigene Zeilenhoehe nach unten. Das ist
   gewollt, sonst laege sie ueber der Ueberschrift.

   9px ist die Untergrenze, die ich fuer eine Kennzeichnung noch vertrete.
   Die Farbe bleibt #767676 (4,5:1 gegen Weiss) - Groesse und Kontrast
   gleichzeitig zu reduzieren waere zu viel des Guten.
   --------------------------------------------------------------------- */

@media (max-width: 768px) {
	#block123 .zp-anzeige-badge--mobil {
		position: static;
		display: block;
		width: 100%;
		text-align: center;

		font-size: 9px;
		letter-spacing: 0.14em;
		margin: -2px 0 8px 0;
	}
}