/* ==========================================================================
   Startseite (Vermietung) und Beratungs-Landingpage.
   Baut auf style.css auf. Die Beratung nutzt zusätzlich die Engine
   cool-website.css (unverändert); hier werden nur deren Farb- und
   Schriftwerte gesetzt und die eigenen Abschnitte gestaltet.
   Grundsatz (Tom, 28.09.2026): kompakt, wenig Leerraum; die Anordnung
   passt sich an Telefon, Tablet und Bildschirm an, statt überall gleich zu sein.
   ========================================================================== */

.schau {
	--cw-canvas: #FFFFFF;
	--cw-surface: #F1F4FA;
	--cw-ink: #1B2430;
	--cw-ink-soft: #4F5B6B;
	--cw-accent: #006E9C;
	--cw-accent-ink: #FFFFFF;
	--cw-font-display: "Open Sans", system-ui, sans-serif;
	--cw-font-text: "Open Sans", system-ui, sans-serif;
	position: relative;
}
/* Die Engine setzt eigene Schriften und Farben auf body; hier zurück auf die Marke. */
body:has(.schau) { font-family: var(--schrift); background: #fff; color: var(--tinte); }

/* Startseite: Titel ---------------------------------------------------------
   Knapp unter dem Kopf, kein Leerraum davor (Tom, 28.09.2026). Auf breiten
   Bildschirmen stehen Überschrift und Einleitung nebeneinander, auf schmalen
   untereinander. Das Wasserzeichen liegt als fester Hintergrund dahinter.    */
.titel {
	display: grid; gap: .75rem 3rem; align-items: end;
	padding-top: clamp(1.25rem, 3vw, 2.25rem); padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 960px) { .titel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.titel__kopf { display: flex; flex-direction: column; gap: .35rem; }
.titel__name { font-size: clamp(2rem, 1.3rem + 3.2vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--blau); }
.titel__unter { font-size: clamp(1.1rem, 1rem + .7vw, 1.6rem); font-weight: 600; letter-spacing: -.015em; color: var(--tinte); }
.titel__text { margin: 0; max-width: 32rem; color: var(--tinte-leise); font-size: clamp(1rem, .95rem + .2vw, 1.1rem); }

/* Startseite: Abschnitte ------------------------------------------------------ */
.abschnitt { padding-block: clamp(1.25rem, 2.5vw, 2.25rem); }
.abschnitt h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.9rem); }
.abschnitt__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.abschnitt__kopf a { font-weight: 600; text-decoration: none; }
.abschnitt__kopf a:hover { text-decoration: underline; }

/* Ihre Vorteile ----------------------------------------------------------------
   Eine zusammenhängende weiße Fläche mit feinen Trennlinien (die Linien sind
   der 1-px-Abstand zwischen den Feldern), oben ein blauer Rand. Die Anordnung
   wechselt mit dem Platz, statt überall dieselbe zu sein:
   - Telefon (bis 639 px): Zeilen, Symbol links neben dem Text
   - Tablet (640 bis 1079 px): drei Felder oben, zwei breitere unten
   - Bildschirm (ab 1080 px): alle fünf in einer Reihe                          */
.vorteile h2 { margin-bottom: 1.25rem; }
.vorteile__liste {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
	background: var(--linie); border: 1px solid var(--linie); border-top: 3px solid var(--blau);
	border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
}
.vorteil { background: #fff; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .9rem; align-items: start; padding: 1rem 1.1rem; }
.vorteil__symbol {
	grid-row: span 2; width: 2.75rem; height: 2.75rem; padding: .55rem; border-radius: 50%;
	background: var(--wz-2); fill: none; stroke: var(--blau-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.vorteil__titel { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--tinte); margin: .15rem 0 .2rem; }
.vorteil__text { margin: 0; color: var(--tinte-leise); font-size: .95rem; line-height: 1.5; }
@media (min-width: 640px) {
	.vorteile__liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	/* Ab Tablet: Feld senkrecht (Symbol, Titel, Satz). */
	.vorteil { grid-column: span 2; display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.5rem; }
	.vorteil:nth-child(n+4) { grid-column: span 3; }
	.vorteil__symbol { width: 3.25rem; height: 3.25rem; padding: .7rem; margin-bottom: 1rem; }
	.vorteil__titel { margin: 0 0 .35rem; font-size: 1.1rem; }
}
@media (min-width: 1080px) {
	.vorteile__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.vorteil, .vorteil:nth-child(n+4) { grid-column: auto; }
}
.vorteile__weiter { margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; }

.beitraege__liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); max-width: none; gap: 1.5rem; }
.pm-beitragsleiste { margin-top: 1.5rem; background: #FFF6DB; border: 1px solid #E8D48A; border-radius: var(--radius); padding: .75rem 1rem; font-size: .95rem; }
.pm-beitragsleiste ul { margin: .75rem 0 0; padding-left: 0; list-style: none; columns: 2 16rem; }
.pm-beitragsleiste a { text-decoration: none; }

/* ==========================================================================
   Beratung (Schauseite, Skill cool-website)
   Aufbau siehe teile/beratung.php. Farben: Weiß, Tinte (dunkler Abschnitt),
   Blau (Abschluss). Ein Akzent: das Blau der Marke.
   ========================================================================== */

/* Sicherheitsnetz: Eingeblendetes ist sichtbar, solange die Engine nicht
   läuft (kein JavaScript, Skript nicht geladen) und bei „Bewegung reduzieren“. */
html:not(.cw-ready) [data-cw-in], html:not(.cw-ready) [data-cw-stagger] > *,
.ohne-engine [data-cw-in], .ohne-engine [data-cw-stagger] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-cw-in], [data-cw-stagger] > * { opacity: 1 !important; transform: none !important; }
}

.schau--beratung { overflow-x: clip; }
.schau--beratung section { position: relative; }
.b-gross { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }

/* Bereichsname senkrecht am rechten Rand, wie im Briefpapier „Beratung“ (dort
   oben rechts). Er steht im Plakat und scrollt mit ihm weg, damit er nie hinter
   den durchlaufenden Abschnitten (dunkel, Schiene) steht. Nur mit genug Platz
   neben dem Inhalt (gleiche Regel wie „Vermietungen“). */
.b-grund { position: absolute; top: 0; right: 0; height: min(46rem, calc(100svh - var(--kopfhoehe))); width: 8rem; z-index: 0; pointer-events: none; overflow: hidden; }
.b-grund__wort {
	display: none; position: absolute; right: clamp(1rem, 2vw, 2.5rem); top: 3rem;
	writing-mode: vertical-rl; transform: rotate(180deg);
	font-weight: 800; font-size: clamp(3.5rem, 7vh, 5.5rem); line-height: 1; color: #E3E7F0; white-space: nowrap;
}
@media (min-width: 1320px) and (min-height: 720px) { .b-grund__wort { display: block; } }

/* 1 · Plakat ------------------------------------------------------------------
   Die Überschrift steigt Zeile für Zeile hinter einer Kante auf; der Bleistift
   aus dem Briefpapier zeichnet sich dahinter selbst und wandert beim Scrollen
   etwas schneller als der Text (Tiefe). Ohne Bewegung: fertiges Bild.        */
.b-plakat { min-height: min(46rem, calc(100svh - var(--kopfhoehe))); display: grid; align-items: center; padding-block: clamp(2rem, 5vw, 4rem); isolation: isolate; }
.b-plakat__zeichnung { position: absolute; z-index: -1; right: max(0rem, calc((100vw - var(--maxbreite)) / 2 + 1rem)); top: 50%; width: min(42rem, 52vw); translate: 0 -50%; color: #D5DDEE; }
.b-plakat__stift { width: 100%; height: auto; }
.b-plakat__satz { position: relative; }
.b-plakat__marke { display: inline-block; margin: 0 0 1.25rem; font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blau-text); border-bottom: 2px solid var(--rot); padding-bottom: .2rem; }
.b-plakat__titel { font-size: clamp(2.5rem, 1rem + 6.4vw, 6.25rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; max-width: 11ch; color: var(--tinte); }
.b-zeile { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.b-zeile > span { display: inline-block; }
.b-plakat__text { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); max-width: 36rem; color: var(--tinte-leise); margin: 1.75rem 0 0; }
.b-plakat__knopf { margin: 2rem 0 0; }
@media (max-width: 700px) {
	.b-plakat { min-height: 0; }
	/* Telefon: Bleistift oben rechts angeschnitten, hinter der Überschrift, heller. */
	.b-plakat__zeichnung { width: 62vw; right: -14vw; top: .5rem; translate: none; opacity: .55; }
}
@media (prefers-reduced-motion: no-preference) {
	.b-zeile > span { animation: b-aufstieg 900ms var(--ease) both; }
	.b-zeile:nth-child(2) > span { animation-delay: 90ms; }
	.b-zeile:nth-child(3) > span { animation-delay: 180ms; }
	.b-plakat__text, .b-plakat__knopf, .b-plakat__marke { animation: b-auftauchen 700ms var(--ease) 380ms both; }
	.b-plakat__stift path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: b-zeichnen 1800ms cubic-bezier(.45, 0, .2, 1) 250ms forwards; }
	.b-plakat__stift path:nth-child(2) { animation-delay: 450ms; }
	.b-plakat__stift path:nth-child(3) { animation-delay: 700ms; }
	.b-plakat__stift path:nth-child(4) { animation-delay: 850ms; }
	.b-plakat__stift path:nth-child(5) { animation-delay: 1000ms; }
}
@keyframes b-aufstieg { from { transform: translateY(105%); } to { transform: none; } }
@keyframes b-auftauchen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes b-zeichnen { to { stroke-dashoffset: 0; } }

/* 2 · Leistungen ------------------------------------------------------------
   Breit: Überschrift links bleibt stehen (sticky), rechts ziehen die drei
   Leistungen vorbei. Über jeder Leistung wird eine blaue Linie gezogen,
   sobald sie erscheint. Schmal: untereinander.                              */
.b-leistungen { padding-block: clamp(3rem, 7vw, 6.5rem); border-top: 1px solid var(--linie); }
.b-leistungen__raster { display: grid; gap: 2rem clamp(2rem, 6vw, 6rem); }
@media (min-width: 900px) {
	.b-leistungen__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
	.b-leistungen__raster > .b-gross { position: sticky; top: calc(var(--kopfhoehe) + 2.5rem); }
}
.b-leistungen__liste { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.b-leistung { position: relative; padding-top: 1.5rem; }
.b-leistung::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--blau); transform-origin: left; }
.b-leistung h3 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; margin: 0 0 .6rem; }
.b-leistung p { margin: 0; font-size: clamp(1.02rem, 1rem + .2vw, 1.15rem); color: var(--tinte-leise); max-width: 38rem; }
@media (prefers-reduced-motion: no-preference) {
	.cw-ready .b-leistung::before { transform: scaleX(0); transition: transform 900ms var(--ease) 120ms; }
	.cw-ready .b-leistung.cw-in::before { transform: none; }
}

/* 3 · Struktur (dunkel) und Signatur ------------------------------------------ */
.b-dunkel { background: var(--tinte); color: #E4E9F2; --cw-ink: #E4E9F2; }
.b-dunkel h2, .b-dunkel strong { color: #fff; }
.b-struktur { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 0; }
.b-struktur__satz { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); }
@media (min-width: 900px) { .b-struktur__satz { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; } }
.b-struktur__satz p { margin: 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); color: #C6CFDE; max-width: 40rem; }

/* Signatur: „Struktur bleibt, Werkzeug wechselt“. Das Feld ist angeheftet,
   die Werkzeuge docken nacheinander von vier Seiten an den Kern an und gehen
   wieder; der Kern bewegt sich keinen Pixel.                                 */
.kern__buehne { display: grid; grid-template-rows: 1fr auto; place-items: center; padding: calc(var(--kopfhoehe) + 1rem) var(--rand) clamp(2rem, 6vh, 4rem); }
.kern__feld { position: relative; width: min(60rem, 100%); aspect-ratio: 2.1; }
@media (max-width: 1100px) { .kern__feld { aspect-ratio: 1.5; } }
.kern__mitte {
	position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; text-align: center; width: max-content; max-width: 88%;
	border: 2px solid #fff; padding: 1.4rem 2rem; background: var(--tinte); box-shadow: 0 0 0 10px var(--tinte), 0 0 0 11px #3A4658;
}
.kern__mitte strong { display: block; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); letter-spacing: -.02em; line-height: 1.1; }
.kern__mitte span { color: #9FB0C8; font-size: .95rem; letter-spacing: .02em; }
.kern__werkzeuge { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.kern__werkzeug {
	position: absolute; font-weight: 700; font-size: clamp(1rem, .85rem + .8vw, 1.5rem); color: #fff; white-space: nowrap;
	border: 1px dashed #8494AD; padding: .45rem .9rem; background: #243043;
}
/* Verbindungslinie zum Kern, je nach Seite senkrecht oder waagerecht. */
.kern__werkzeug::after { content: ""; position: absolute; border-color: #8494AD; border-style: dashed; border-width: 0; }
.kern__werkzeug--oben   { left: 50%; top: 0; translate: -50% 0; }
.kern__werkzeug--oben::after   { left: 50%; top: 100%; height: clamp(1.5rem, 7vw, 4.5rem); border-left-width: 1px; }
.kern__werkzeug--unten  { left: 50%; bottom: 0; translate: -50% 0; }
.kern__werkzeug--unten::after  { left: 50%; bottom: 100%; height: clamp(1.5rem, 7vw, 4.5rem); border-left-width: 1px; }
.kern__werkzeug--links  { left: 0; top: 50%; translate: 0 -50%; }
.kern__werkzeug--links::after  { left: 100%; top: 50%; width: clamp(1rem, 5vw, 3.5rem); border-top-width: 1px; }
.kern__werkzeug--rechts { right: 0; top: 50%; translate: 0 -50%; }
.kern__werkzeug--rechts::after { right: 100%; top: 50%; width: clamp(1rem, 5vw, 3.5rem); border-top-width: 1px; }
.kern__satz { margin: 0; text-align: center; font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); max-width: 40rem; color: #C6CFDE; line-height: 1.35; }
.kern__satz strong { color: #fff; display: block; font-size: 1.25em; margin-top: .25rem; }
@media (max-width: 700px) {
	/* Hochformat: Werkzeuge oben und unten, links/rechts wandern nach oben/unten. */
	.kern__feld { aspect-ratio: .82; }
	.kern__werkzeug--links  { left: 50%; top: auto; bottom: 0; translate: -50% 0; }
	.kern__werkzeug--links::after  { left: 50%; top: auto; bottom: 100%; width: 0; height: 2.5rem; border-top-width: 0; border-left-width: 1px; }
	.kern__werkzeug--rechts { right: auto; left: 50%; top: 0; translate: -50% 0; }
	.kern__werkzeug--rechts::after { right: auto; left: 50%; top: 100%; width: 0; height: 2.5rem; border-top-width: 0; border-left-width: 1px; }
}

/* 4 · Erfahrung ---------------------------------------------------------------- */
.b-erfahrung { padding-block: clamp(3.5rem, 7vw, 6.5rem); background: var(--wz-2); }
.b-erfahrung__raster { display: grid; gap: 2rem clamp(2rem, 6vw, 6rem); }
@media (min-width: 900px) { .b-erfahrung__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.b-erfahrung__satz { margin: 1.5rem 0 0; font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--blau-text); max-width: 22ch; padding-left: 1rem; border-left: 3px solid var(--rot); }
.b-erfahrung__text p { margin: 0 0 1.1rem; font-size: clamp(1.02rem, 1rem + .2vw, 1.15rem); max-width: 40rem; }

/* 5 · Wie wir arbeiten -------------------------------------------------------
   Schmal: sechs Grundsätze untereinander in zwei Spalten ab Tablet.
   Breit (.ist-breit, schauseiten.js): angeheftet, die Schiene fährt seitlich. */
.b-arbeitsweise { padding-block: clamp(3.5rem, 7vw, 6rem); }
.b-arbeitsweise__kopf { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.b-arbeitsweise__schiene { margin: 0; display: grid; gap: 1rem; padding-inline: var(--rand); max-width: var(--maxbreite); margin-inline: auto; }
@media (min-width: 640px) { .b-arbeitsweise__schiene { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-grundsatz { background: #fff; border: 1px solid var(--linie); border-top: 3px solid var(--blau); padding: 1.4rem 1.5rem 1.6rem; }
.b-grundsatz dt { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.b-grundsatz dd { margin: .6rem 0 0; color: var(--tinte-leise); font-size: 1.05rem; }
.b-arbeitsweise.ist-breit { padding-block: 0; }
.ist-breit .b-arbeitsweise__buehne { display: flex; flex-direction: column; justify-content: center; padding-top: var(--kopfhoehe); }
.ist-breit .b-arbeitsweise__schiene { display: flex; gap: 1.5rem; max-width: none; margin: 0; padding-inline: max(var(--rand), calc((100vw - var(--maxbreite)) / 2 + var(--rand))); }
.ist-breit .b-grundsatz { flex: 0 0 clamp(20rem, 30vw, 27rem); min-height: clamp(14rem, 36vh, 22rem); display: flex; flex-direction: column; gap: 1rem; padding: 2rem; box-shadow: var(--schatten); }
.ist-breit .b-grundsatz dt { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); }
.ist-breit .b-grundsatz dd { font-size: 1.1rem; }

/* 6 · Anfrage: blauer Abschluss, Formular auf weißer Fläche ---------------------- */
.b-anfrage { background: var(--blau-text); color: #fff; padding-block: clamp(3.5rem, 7vw, 6rem); }
.b-anfrage__raster { display: grid; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
@media (min-width: 960px) { .b-anfrage__raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.b-anfrage__wo { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0 0 1.5rem; max-width: 14ch; }
.b-anfrage h2 { color: #fff; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
.b-anfrage__formular { background: #fff; color: var(--tinte); padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius); box-shadow: 0 20px 40px -20px rgb(0 30 50 / .5); }
.b-anfrage__formular .formular { max-width: none; }
@media (min-width: 960px) { .b-anfrage__kopf { position: sticky; top: calc(var(--kopfhoehe) + 2.5rem); } }
.b-beitraege { padding-block: clamp(2.5rem, 5vw, 4rem); }