/* ========================================================================== Startseite / Weiche - nur fuer die Datei index.html im Hauptordner. Aufbau seit dem 16.08.2026: Das Foto liegt fest hinter der ganzen Seite. Darueber liegen das Band mit Logo und Leitsatz, die beiden Waehlfelder Immobilien und Hausverwaltung und die Fusszeile. Davor (07.08. bis 16.08.2026) war das Foto ein Band von 56vh Hoehe, dessen Farbe nach unten in die Seite auslief. Die vier Farbwerte dieses Auslaufs waren aus dem Bild gerechnet, erzeugt von entwuerfe/startseite/werkzeug/aufteilung.py. Beides wird nicht mehr gebraucht: Das Foto endet an keiner Kante mehr, also gibt es auch nichts mehr weiterzufuehren. Das Skript bleibt liegen, falls wir zurueckwollen - die alte Fassung steht in der Versionsgeschichte. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Geruest: Band oben, Waehlfelder in der Mitte, Fusszeile unten -------------------------------------------------------------------------- */ .gate { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } /* Seit dem 17.08.2026 soll die Startseite auf dem Rechner ohne Scrollen in den Bildschirm passen: Logo, Leitsatz, beide Wahlfelder und die Fusszeile auf einen Blick. Deshalb ist nicht mehr die Mitte der dehnbare Teil, sondern das Bildband. Es bekommt "flex: 1" und nimmt genau den Platz ein, der uebrigbleibt, nachdem Wahlfelder und Fusszeile ihre Hoehe genommen haben. Auf einem hohen Bildschirm sieht man dadurch mehr Foto, auf einem flachen weniger - aber der untere Teil der Seite bleibt in beiden Faellen sichtbar. Die Mitte darf dabei nicht mehr wachsen, sonst gaebe es zwei Teile, die sich den Restplatz teilen, und das Band bliebe zu klein. Hiess bis zum 16.08.2026 ".auslauf", weil dort die Bildfarbe auslief. Das tut sie nicht mehr - der Name waere jetzt irrefuehrend. */ .mitte { flex: 0 0 auto; } /* -------------------------------------------------------------------------- 2. Das Foto - eine feste Lage hinter der ganzen Seite -------------------------------------------------------------------------- Warum nicht einfach "background-attachment: fixed"? Weil Safari auf dem iPhone das seit Jahren nicht sauber zeichnet - das Bild ruckelt oder springt beim Scrollen. Eine fest stehende eigene Lage macht dasselbe und laeuft ueberall. z-index: -1 setzt sie hinter jeden Seiteninhalt, aber noch vor die Hintergrundfarbe des body. Das geht auf, weil "html" in base.css keinen eigenen Hintergrund hat - dadurch wandert die Farbe des body auf die Leinwand ganz unten. Bekommt "html" dort je einen Hintergrund, deckt er diese Lage zu und das Foto verschwindet. Die Lage ist trotz "body { display: flex }" in base.css kein Flex-Element, weil "position: fixed" sie aus dem Fluss nimmt. Die dunkle Abdeckung liegt im selben "background" ueber dem Foto. Ohne sie waere weisse Schrift auf einem hellen Himmel nicht sicher lesbar; nach unten hin wird sie dichter, damit auch die Fusszeile traegt. Der Ausschnitt steht auf "center 58%". Wird das Foto getauscht, ist das die Stellschraube. Seit dem 17.08.2026 reicht die Lage 32vh ueber den oberen Bildschirmrand hinaus ("top: -32vh"). Grund: Das Foto ist 16:9, ein Browserfenster ist flacher - mit "cover" war praktisch das ganze Bild zu sehen, und dessen obere Haelfte ist Himmel. Ein anderer Ausschnitt haette daran nichts geaendert, weil es nichts zu verschieben gab. Eine hoehere Lage dagegen vergroessert das Bild und schiebt den Himmel nach oben aus dem Blick. Sichtbar bleiben Weinberg, Altbau und Neubau. "cover" bleibt dabei erhalten, es gibt also keine Luecken. Wer mehr Himmel will, verkleinert den Wert; bei 0 ist es wieder wie vorher. Ueber etwa 40vh werden die Haeuser oben angeschnitten. */ body::before { content: ""; position: fixed; top: -32vh; right: 0; bottom: 0; left: 0; z-index: -1; /* Die Prozentwerte des Verlaufs sind auf die ganze Lage bezogen, also auf 132vh. Sichtbar ist davon nur der Teil ab 24 % - deshalb beginnt der Verlauf dort und nicht bei 0. */ background: linear-gradient(rgba(12, 16, 20, 0.30) 24%, rgba(12, 16, 20, 0.46) 60%, rgba(12, 16, 20, 0.62) 100%), url("../img/startseite.jpg") center 58% / cover no-repeat; } /* -------------------------------------------------------------------------- 3. Bildband - Logo und Leitsatz -------------------------------------------------------------------------- Traegt selbst kein Bild mehr, das kommt aus Abschnitt 2. Es bleibt als Flaeche stehen, damit Logo und Leitsatz Luft um sich haben. Die Hoehe ist seit dem 17.08.2026 nicht mehr fest (vorher 56vh, zuletzt 48vh), sondern der Rest des Bildschirms - siehe Abschnitt 1. "min-height" ist nur noch die Untergrenze fuer den Fall, dass fast nichts uebrigbleibt; darunter bestimmt der Inhalt selbst die Hoehe und die Seite scrollt eben doch. Wer mehr Foto sehen will, verkleinert die Wahlfelder, nicht das Band. -------------------------------------------------------------------------- */ .band { position: relative; flex: 1; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(1.25rem, 4vh, 3.5rem) 1.5rem; } /* Weiche Abdunklung hinter Logo und Leitsatz. -------------------------------------------------------------------------- Seit dem 17.08.2026 liegt der Kopf nicht mehr auf Himmel, sondern auf hellen Hausfassaden (siehe Abschnitt 2). Weisse Schrift auf hellem Putz ist lesbar, aber flau. Das Problem ist oertlich - genau die Bildmitte -, also gehoert die Loesung auch dorthin und nicht auf die ganze Seite: ein weiches Oval, das nach aussen ausblendet. Weinberg, Altbau und Randbereiche bleiben hell. Nicht genommen (17.08.2026): den Verlauf aus Abschnitt 2 oben dichter ziehen. Das haette das ganze Foto abgedunkelt, auch dort, wo keine Schrift liegt - und genau dessen Wirkung war ja das Ziel des Umbaus. "pointer-events: none", damit die Lage keine Klicks abfaengt. Logo und Leitsatz brauchen "position: relative", sonst laegen sie darunter: eine absolut positionierte Lage wird ueber nicht positionierten Inhalt gemalt. */ .band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 58% 62% at 50% 48%, rgba(12, 16, 20, 0.42) 0%, rgba(12, 16, 20, 0.28) 45%, transparent 72%); } /* Der zweite, enge Schatten an Logo und Leitsatz zeichnet die Kanten nach. Der weite Schatten allein dunkelt nur ab - auf unruhigem Grund braucht es eine harte Kante, damit die Form steht. */ .band-logo { position: relative; width: clamp(200px, 30vw, 380px); height: auto; margin: 0 auto clamp(0.9rem, 2.2vh, 1.6rem); filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } /* Der Leitsatz - die groesste Zeile der Seite */ .band .claim { position: relative; font-size: clamp(1.4rem, 1rem + 2vw, 2.3rem); font-weight: 640; line-height: 1.25; letter-spacing: -0.02em; color: #fff; margin: 0 auto; max-width: 24ch; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5); } /* -------------------------------------------------------------------------- 4. (frei) -------------------------------------------------------------------------- Hier stand bis zum 17.08.2026 der Baustellenhinweis "Diese Seite befindet sich gerade im Neubau" samt der Regel ".gate-card .bald" fuer stillgelegte Wahlfelder. Beides ist auf Wunsch entfernt: Die Seite war nie online, es gab also niemanden, dem der Umbau anzukuendigen gewesen waere. Die Nummerierung der folgenden Abschnitte bleibt, damit Verweise aus OFFEN.md und aus den anderen Stylesheets weiter stimmen. Wer den Hinweis zurueckholen will, findet ihn samt Erklaerung in der Versionsgeschichte. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 5. Die beiden Waehlfelder -------------------------------------------------------------------------- */ .gate-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; width: 100%; max-width: 1000px; margin-inline: auto; padding: clamp(1rem, 2vh, 1.5rem) 1.5rem clamp(1.2rem, 3vh, 2rem); } /* Der Inhalt steht oben, die Schlusszeile wird nach unten gedrueckt (siehe .enter/.bald weiter unten). Andersherum - alles am unteren Rand - stuenden die Kicker der beiden Karten nicht auf gleicher Hoehe, weil der Text der Immobilien drei Zeilen braucht und der der Hausverwaltung zwei. So sitzen erste und letzte Zeile in beiden Karten gleich. */ .gate-card { --gate: #1c3faa; position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: clamp(200px, 26vh, 280px); padding: clamp(1.25rem, 2.6vh, 2rem); text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; } /* Farbiger Balken am oberen Rand */ .gate-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--gate); } /* Nur Verweise heben sich an. Im Neubau sind die Felder blosse
, da waere eine Reaktion auf das Ueberfahren ein falsches Versprechen. */ a.gate-card:hover, a.gate-card:focus-visible { border-color: var(--gate); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14); } .gate-card .kicker { font-size: 0.8rem; font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; color: var(--gate); margin-bottom: 0.6rem; } .gate-card h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.5rem; } .gate-card p { color: var(--ink-muted); margin-bottom: clamp(0.8rem, 1.8vh, 1.4rem); max-width: 34ch; } /* margin-top: auto schiebt die Schlusszeile an den unteren Rand der Karte, unabhaengig davon, wie lang der Text darueber ist. */ .gate-card .enter { margin-top: auto; font-weight: 650; color: var(--gate); } .gate-card .enter::after { content: " \2192"; display: inline-block; transition: transform 0.18s; } a.gate-card:hover .enter::after { transform: translateX(4px); } .gate-immobilien { --gate: #0e5c4f; } .gate-hausverwaltung { --gate: #1c3faa; } @media (prefers-color-scheme: dark) { .gate-immobilien { --gate: #3d9e8a; } .gate-hausverwaltung { --gate: #798ecd; } a.gate-card:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4); } } /* Milchglas statt volldeckender Flaeche (22.08.2026) -------------------------------------------------------------------------- Der Inhaber fand den Kontrast zu hart: Zwei volldeckend weisse Rechtecke auf dem abgedunkelten Foto sind ein Block, der aufgeklebt wirkt. Mit 80 Prozent Deckung und einer Unschaerfe dahinter schimmert das Foto durch - die Karte sitzt dann AUF dem Bild statt DAVOR. Warum die Aenderung in einem @supports steht und nicht einfach oben: Ohne "backdrop-filter" waere die Flaeche nur durchsichtig, ohne Unschaerfe. Dann laege der Text auf dem blanken Foto und waere je nach Bildstelle schlecht lesbar. Browser ohne diese Faehigkeit behalten deshalb die volldeckende Flaeche aus var(--surface) - schlechter aussehend, aber immer lesbar. Safari braucht die Schreibweise mit -webkit-, deshalb beide. Die dunkle Fassung braucht einen eigenen Wert: var(--surface) ist dort ohnehin dunkel, aber volldeckend. Sie ist etwas durchsichtiger als die helle, weil dunkel auf dunkel weniger auftraegt. Nicht genommen: dunkle Karten mit heller Schrift. Sie waren die ruhigste Loesung, aber die Felder verschwanden fast im Bild, und Gruen und Blau haetten aufgehellt werden muessen - dann sind es nicht mehr die Hausfarben. -------------------------------------------------------------------------- */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .gate-card { background: rgba(255, 255, 255, 0.80); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border-color: rgba(255, 255, 255, 0.38); } @media (prefers-color-scheme: dark) { .gate-card { background: rgba(27, 31, 35, 0.72); border-color: rgba(255, 255, 255, 0.14); } } } /* -------------------------------------------------------------------------- 6. Fusszeile der Weiche -------------------------------------------------------------------------- Sie steht seit dem 16.08.2026 unmittelbar auf dem Foto, nicht mehr auf hellem Grund. Deshalb helle Schrift mit Schatten - dieselbe Loesung wie beim Leitsatz im Band - und eine helle Trennlinie statt --line, die im Bild verschwinden wuerde. Die Farben sind hier fest eingetragen und nicht aus den Variablen des Grundstylesheets genommen: Der Grund ist ein Foto und wechselt nicht zwischen hellem und dunklem Design. Weiss ist auf der Abdeckung aus Abschnitt 2 in beiden Faellen richtig. -------------------------------------------------------------------------- */ .gate-foot { border-top: 1px solid rgba(255, 255, 255, 0.22); padding: clamp(0.75rem, 1.8vh, 1.2rem) 1.5rem; text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } /* Anschrift und die beiden Firmen stehen in drei Bloecken. -------------------------------------------------------------------------- Sie liegen in einem Flex-Kasten, der umbrechen darf - aber nur zwischen den Bloecken, nie innerhalb eines Blocks ("white-space: nowrap"). Vorher lief alles als ein Fliesstext mit Mittelpunkten durch, und auf dem Handy stand dann "Hausverwaltung" am Ende der einen und die Rufnummer in der naechsten Zeile. Der Abstand macht die Trennung jetzt sichtbar; die Mittelpunkte zwischen den Bloecken sind dafuer weggefallen. */ .gate-adresse { margin: 0 0 0.7rem; color: rgba(255, 255, 255, 0.92); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.6rem; } .gate-teil { white-space: nowrap; } .gate-teil .name { font-weight: 600; } .gate-teil .punkt { opacity: 0.55; } .gate-adresse a { color: inherit; text-decoration: none; margin: 0; } .gate-adresse a:hover { text-decoration: underline; } .gate-foot a { color: rgba(255, 255, 255, 0.92); text-decoration: none; margin-inline: 0.6rem; } .gate-foot a:hover { color: #fff; text-decoration: underline; } /* -------------------------------------------------------------------------- 7. Handy: untereinander statt nebeneinander -------------------------------------------------------------------------- Dort wird auch die kleinere Fassung des Fotos geladen - 133 statt 521 Kilobyte. Auf einem schmalen Bildschirm sieht man den Unterschied nicht, im Mobilfunknetz schon. Nur "background-image" austauschen, nicht "background": Ausschnitt und Groesse aus Abschnitt 2 bleiben so erhalten. Die Zahl der Lagen muss stimmen - Abdeckung und Foto, also zwei. -------------------------------------------------------------------------- */ @media (max-width: 720px) { /* Auf dem Handy ist der Bildschirm schmal und hoch. "cover" zoomt dort ohnehin stark, ein grosser Ueberstand wuerde das Bild unkenntlich machen - deshalb hier nur 12vh statt 32vh. */ body::before { top: -12vh; /* Waagerechter Ausschnitt, nur hier. Am Rechner ist die Lage breiter als hoch, "cover" schneidet dort oben und unten - waagerecht gibt es nichts zu verschieben. Am Telefon ist es umgekehrt: Dort schneidet "cover" LINKS UND RECHTS. Der senkrechte Wert 58% ist auch hier wirkungslos - das Bild passt der Hoehe nach genau hinein, es gibt nichts zu schieben. Er steht nur da, weil "background-position" beide Werte verlangt. Sichtbar ist im Band immer der OBERE Bildteil; der Flachdachbau liegt unten und ist am Telefon nicht zu holen. Von drei geprueften Werten (40, 50, 74) zeigt 74% das Mehrfamilienhaus mit den beleuchteten Loggien - 50%, also "center", traf den grauen Steinblock dazwischen. */ background-position: 74% 58%; background-image: linear-gradient(rgba(12, 16, 20, 0.30) 11%, rgba(12, 16, 20, 0.46) 52%, rgba(12, 16, 20, 0.62) 100%), url("../img/startseite-klein.jpg"); } /* Auf dem Handy stehen die Wahlfelder untereinander. Beides zusammen plus Fusszeile passt auf keinem Telefon in einen Bildschirm - dort wird also ohnehin gescrollt. Deshalb bekommt das Band hier wieder eine feste Mindesthoehe, damit das Foto nicht auf den Rest zusammenschrumpft. */ .band { min-height: 38svh; } /* Die Abdunklung aus Abschnitt 3 zeichnete sich auf dem schmalen Bildschirm als Kreis ab: Das Band ist hier fast quadratisch, da wird aus dem flachen Oval ein Ring mit sichtbarer Kante. Deshalb hier breiter, flacher und weicher auslaufend - die Wirkung bleibt, der Rand verschwindet. */ .band::before { background: radial-gradient(ellipse 96% 66% at 50% 46%, rgba(12, 16, 20, 0.34) 0%, rgba(12, 16, 20, 0.20) 50%, transparent 82%); } .gate-choices { grid-template-columns: 1fr; } .gate-card { min-height: 190px; } /* Fusszeile: jede Firma steht fuer sich, als Zweizeiler. Immobilien 06732 960170 immobilien@kbimmo.de Alles in einer Zeile ginge sich nicht aus: "Hausverwaltung 06732 960171 ยท hausverwaltung@kbimmo.de" ist breiter als ein iPhone, auf einem SE erst recht. Statt die Schrift dafuer zu verkleinern, wandert die E-Mail in die zweite Zeile - der Trennpunkt entfaellt dort, sonst haenge er am Ende der ersten Zeile. */ .gate-adresse { flex-direction: column; gap: 0.55rem; } .gate-teil { white-space: normal; } .gate-teil .punkt { display: none; } .gate-teil a[href^="mailto:"] { display: block; } } /* -------------------------------------------------------------------------- 7b. Flache Fenster -------------------------------------------------------------------------- Die Startseite soll auf dem Rechner ohne Scrollen in den Bildschirm passen. Bis etwa 820 Pixel Fensterhoehe geht das mit den Werten oben auf. Darunter wird es zu eng - ein Laptop mit geoeffneter Lesezeichenleiste hat schnell nur noch 700 Pixel. Dann wird alles eine Stufe kompakter: kleineres Logo, kleinerer Leitsatz und Wahlfelder ohne Mindesthoehe. Nur ab 721 Pixel Breite, also nicht auf dem Handy - dort stehen die Felder untereinander und die Seite scrollt ohnehin (siehe Abschnitt 7). -------------------------------------------------------------------------- */ @media (min-width: 721px) and (max-height: 820px) { .band { min-height: 0; } .band-logo { width: clamp(180px, 22vw, 290px); } .band .claim { font-size: clamp(1.2rem, 0.9rem + 1.3vw, 1.75rem); } .gate-card { min-height: 0; } .gate-card h2 { font-size: 1.5rem; } .gate-card p { font-size: 1rem; } .gate-choices { padding-bottom: clamp(0.8rem, 1.8vh, 1.2rem); } .gate-foot { font-size: 0.85rem; } .gate-adresse { margin-bottom: 0.45rem; } } /* Zweite Stufe: sehr flache Fenster. Ein aelteres Notebook mit 1366 x 768 Bildschirm laesst dem Browser nur rund 660 Pixel Hoehe. Auch dort soll die Seite noch am Stueck zu sehen sein - dafuer ruecken alle Innenabstaende noch einmal enger zusammen. Darunter wird gescrollt; enger wuerde gedraengt aussehen und waere den Bildschirmen, die es noch trifft, nicht wert. */ @media (min-width: 721px) and (max-height: 700px) { .band { padding: clamp(0.75rem, 2vh, 1.5rem) 1.5rem; } .band-logo { width: clamp(160px, 18vw, 240px); } .band .claim { font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.45rem); } .gate-card { padding: clamp(1rem, 2vh, 1.5rem); } .gate-card h2 { font-size: 1.35rem; } .gate-card p { font-size: 0.95rem; line-height: 1.55; } } /* -------------------------------------------------------------------------- 8. Weniger Bewegung Gegenstueck zu Abschnitt 13 in base.css. Muss hier stehen, weil diese Datei nach base.css geladen wird und die Regeln von dort sonst ueberschreibt. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .gate-card:hover, .gate-card:focus-visible { transform: none; } .gate-card:hover .enter::after { transform: none; } }