/* Theme Name: KWP Beautiful Things Child Theme URI: https://kwpbeautifulthings.at Description: Child-Theme von GeneratePress für den Relaunch von kwpbeautifulthings.at Author: KWP Template: generatepress Version: 1.4.12 Text Domain: kwpbeautifulthings-child */ /* ========================================================================== Design-Tokens & Basis-Komponenten Übernommen aus dem abgestimmten Prototyp (Arbeitsstand 0.6). Gleiche Klassennamen wie dort, damit sich Prototyp-Markup beim Seitenaufbau möglichst unverändert übernehmen lässt. Google Fonts werden per functions.php eingebunden, nicht per @import. ========================================================================== */ :root{ --ink:#1d1a17; --ink-soft:#4a443d; --paper:#fbf8f3; --paper-2:#f2ece3; --line:#ded5c8; --accent:#9a6b3f; --accent-dark:#7c5430; --sage:#7c8471; --danger:#a33; --max:1240px; --serif:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; --sans:'Jost', 'Helvetica Neue', Arial, sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} /* Jost ist nur in den Schnitten 300/400/500 eingebunden (functions.php). / verlangen vom Browser aber Schriftschnitt 700 — den gibt es in Jost nicht, weshalb der Browser für Fettschrift auf eine komplett andere, systemeigene Schriftart ausweicht (sichtbar andere Buchstaben- formen). Fix: Fettschrift auf den schwersten tatsächlich geladenen Jost-Schnitt (500) begrenzen, bleibt dadurch in der Font-Familie. */ strong,b{font-weight:500} a{color:inherit;text-decoration:none} .wrap{max-width:var(--max);margin:0 auto;padding:0 28px} .narrow{max-width:820px;margin-left:auto;margin-right:auto} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0 0 .5em} h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:.01em} h2{font-size:clamp(1.9rem,3.6vw,2.9rem)} h3{font-size:clamp(1.35rem,2.2vw,1.8rem)} /* Adresse "Kaiser-Wilhelm-Promenade 4" (Startseite, Abschnitt "Besuchen Sie uns") soll nie umbrechen — eigene, kleinere Clamp-Kurve statt der allgemeinen h2-Größe, damit der Text bei 26 Zeichen auch in der schmaleren Spalte der Zweispalten-Ansicht und auf Mobile (dort volle Breite nach dem Stapeln bei 560px) zuverlässig auf einer Zeile bleibt. */ .addr-heading{font-size:clamp(1.25rem,4.4vw,2.4rem);white-space:nowrap} p{margin:0 0 1.1em} .lead{font-size:1.12rem;color:var(--ink-soft)} .eyebrow{ font-family:var(--sans);font-size:.72rem;font-weight:400; letter-spacing:.32em;text-transform:uppercase;color:var(--accent); margin:0 0 1rem; } .rule{width:56px;height:1px;background:var(--accent);border:0;margin:1.4rem 0 1.8rem} .rule.center{margin-left:auto;margin-right:auto} .center{text-align:center} /* ---------- Buttons ---------- */ .btn{ display:inline-block;font-family:var(--sans);font-size:.76rem;font-weight:400; letter-spacing:.22em;text-transform:uppercase; padding:14px 30px;border:1px solid var(--ink);color:var(--ink); background:transparent;transition:all .25s ease;cursor:pointer; } .btn:hover{background:var(--ink);color:var(--paper)} .btn.light{border-color:#fff;color:#fff} .btn.light:hover{background:#fff;color:var(--ink)} .btn.solid{background:var(--ink);color:var(--paper)} /* Zwei Buttons auf gleiche Breite, exakt bündig mit dem Fließtext darüber (dasselbe max-width wie .hero p): display:grid statt inline-grid, sonst passt sich der Container nur an die Inhaltsbreite der Buttons an und bleibt schmäler als Überschrift/Text. */ .hero-actions{display:grid !important;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;max-width:640px} .hero-actions .btn{text-align:center} .btn.solid:hover{background:var(--accent);border-color:var(--accent)} .link-more{ font-size:.75rem;letter-spacing:.22em;text-transform:uppercase; border-bottom:1px solid var(--accent);padding-bottom:4px;display:inline-block; } .link-more:hover{color:var(--accent)} /* ---------- Header ---------- */ .topbar{ background:var(--ink);color:#e9e2d7;font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;text-align:center;padding:9px 16px; } .topbar a{border-bottom:1px solid rgba(255,255,255,.35)} /* Hinweis: Der eigene Header/Nav-Aufbau des ursprünglichen HTML-Prototyps (header.site, .head-inner, nav.main, .sub-menu, .burger …) wird auf der echten Seite nicht gebraucht — GeneratePress rendert Header und Menü mit eigener Markup-Struktur (.site-header, .main-navigation, …), die weiter unten im Abschnitt "GeneratePress-Integration" mit denselben Design- Tokens gestylt wird. Nur die Logo-Bildgröße bleibt hier stehen, weil dieselbe Klasse (.brand) gleich im Footer wiederverwendet wird. */ .brand img{height:46px;width:auto;display:block} .kwpbt-footer .brand img{height:54px} @media (max-width:900px){.brand img{height:38px}} @media (max-width:560px){.brand img{height:32px}} /* ---------- Hero ---------- */ .hero{ position:relative;min-height:78vh;display:flex;align-items:center; /* Platzhalterfarbe (12.09.2026): vorher #2a2521 (isolierter Hex-Wert, keine Markenfarbe) — jetzt var(--accent-dark), damit der kurze Moment vor dem Laden des Hero-Fotos (bzw. bei CSS-Hintergrund-Heros generell) nicht wie ein fast schwarzer, "kaputt" wirkender Block aussieht. Kontrast zu weißer Hero-Schrift weiterhin komfortabel (6,9:1, WCAG-AA-Minimum ist 4,5:1). */ background:var(--accent-dark) center/cover no-repeat;color:#fff; } .hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,17,14,.45),rgba(20,17,14,.62))} /* Testweise EIN Hero (Tagesbar, 11.09.2026) auf ein echtes statt CSS-background-image umgestellt — Versuch, das seitenweite Mobil-LCP- Problem (siehe Berichte/Code-Analyse-Grundauf-11-09-2026.md) an der Wurzel zu beheben statt per Preload-Hint zu kompensieren (zwei Preload-Versuche für "Über uns" scheiterten live, siehe Technische-Learnings.md). Ein wird vom Browser-Vorab-Scanner immer sofort erkannt, unabhängig vom CSS-Parsing — kein Preload-Hinweis nötig. z-index:0, damit es hinter dem ::after-Verlauf (z-index:1) und dem .wrap-Inhalt (z-index:2) liegt — exakt dieselbe Ebenen-Reihenfolge wie vorher mit background-image, nur als eigenes Element statt CSS-Eigenschaft. Stand 12.09.2026: mittlerweile auf 17 der 25 Seiten im Einsatz (siehe 00-PROJEKT-KONTEXT.md), Regel wirkt weiterhin nur dort, wo das ``-Markup tatsächlich im Seiteninhalt steht. */ .hero > img.hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover} .hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:96px} .hero h1{color:#fff;margin-bottom:.35em} .hero .eyebrow{color:#e2c9a6} .hero p{color:#f1e9dd;max-width:640px !important;font-size:1.1rem} /* Mobil-Bildoptimierung Startseiten-Hero (10.09.2026, 900px-Datei seit der LCP-Preload-Korrektur): PageSpeed identifizierte den Hero als tatsächliches LCP-Element (lcp-discovery-insight), das Original-Foto (1182x665, 291 KB) wurde von Mobilgeräten unnötig groß geladen. Nur für die Startseite (page-id-93165) unter 768px auf eine eigens verkleinerte Datei umgeschaltet — Desktop/Tablet bleiben unverändert beim Original, das per Inline-style="background-image" auf dem Element gesetzt wird. Datei bewusst 900px breit (nicht kleiner): Der ergänzende Preload-Hint in functions.php (kwpbt_child_preload_hero_image) nutzt `imagesrcset`/`imagesizes` und wählt nach Pixeldichte (DPR) des Geräts — bei einer ursprünglich getesteten 700px-Datei reichte das bei DPR 2 (sehr üblich) rechnerisch nicht, der Browser preloadete zusätzlich das Original. Mit 900px stimmen Preload-Wahl und diese CSS-Regel für die praktisch relevante Mehrheit der Mobilgeräte überein (Details siehe Technische-Learnings.md). 13.09.2026: Datei von JPEG auf WebP umgestellt (gleiche 900px-Breite/Qualität 82, ~44% kleiner) — Gegenstück in functions.php (kwpbt_child_preload_hero_image) mitgezogen. */ @media (max-width:768px){ .page-id-93165 .hero{background-image:url('https://kwpbeautifulthings.at/wp-content/uploads/2026/09/85012-hero-mobile-900.webp') !important} } /* Nur auf der Kontakt-Seite breiter, damit der Satz "Per E-Mail, WhatsApp oder Telefon – und natürlich persönlich an der Kaiser-Wilhelm-Promenade." auf einer Zeile bleibt, statt wie die übrigen Hero-Texte auf 640px begrenzt zu sein (auf Kundenwunsch nur für diese eine Seite). 25.08.2026: .page-kontakt (per functions.php, kwpbt_child_slug_body_classes) live bestätigt (body.className enthält die Klasse) — der bis dahin als Sicherheitsnetz mitgeführte ID-Selektor .page-id-74256 ist damit entfernt. */ .page-kontakt .hero p{max-width:900px !important} /* Variante ohne den dunklen Verlauf — auf Wunsch für Impressum/Datenschutz/ AGB, deren Bilder (Original-Fotos von kwp-badgastein.at) klar und ohne Grauschleier zu sehen sein sollen. Lesbarkeit kommt stattdessen über Schlagschatten auf dem Text. */ .hero.no-overlay::after{content:none} .hero.no-overlay h1, .hero.no-overlay .eyebrow, .hero.no-overlay p{text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.45)} /* +1cm auf Wunsch: Eingangsseiten (Concept Store, Tagesbar, Über uns, Kontakt, Online Store, Impressum/Datenschutz/AGB) wirkten mit reinem 52vh knapp beschnitten. 1cm = 37.8px bei 96dpi. */ .hero.short{min-height:calc(52vh + 38px)} /* 17.08.2026: Versuch, die Tagesbar-Hero-Bühne für dieses eine Foto extra zu erhöhen (weniger Beschnitt), per Seiten-ID wieder zurückgenommen — der Bildausschnitt wirkte dadurch größer/anders als bei den übrigen "short"-Hero-Seiten und passte nicht mehr ins einheitliche Bild. Bleibt bewusst bei der Standardhöhe wie alle anderen Nebenseiten. */ /* ---------- Sections ---------- */ section{padding:92px 0} section.tight{padding:64px 0} .bg-alt{background:var(--paper-2)} .bg-dark{background:var(--ink);color:#efe7db} .bg-dark h2,.bg-dark h3{color:#fff} .bg-dark .eyebrow{color:#dcbb90} .bg-dark p{color:#cfc5b6} /* ---------- Grids ---------- */ .grid{display:grid;gap:34px} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} /* Bereichskarten */ .pillar{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column} .pillar .media{aspect-ratio:4/3} .pillar .body{padding:30px 30px 34px;display:flex;flex-direction:column;flex:1} .pillar .body p{flex:1;color:var(--ink-soft);font-size:.97rem} /* Split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .split.rev .media{order:2} /* Produktkacheln */ .product .media{aspect-ratio:1/1;margin-bottom:14px;transition:opacity .25s} .product:hover .media{opacity:.85} .product h4{font-family:var(--sans);font-size:.82rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px} .product .price{font-family:var(--serif);font-size:1.15rem;color:var(--accent-dark)} /* Kategoriekacheln */ .cat{position:relative;display:block;overflow:hidden} .cat .media{aspect-ratio:3/4;transition:transform .5s ease} .cat:hover .media{transform:scale(1.04)} .cat span{ position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff;z-index:2; font-size:.8rem;letter-spacing:.24em;text-transform:uppercase; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6)); } /* Bildflächen (Kacheln, Kategorie-/Produktbilder usw.) */ .media{background:var(--paper-2);position:relative;overflow:hidden} /* img per position:absolute+inset statt width/height:100% verankert: Safari berechnet eine prozentuale Höhe auf einem nur per aspect-ratio bemessenen Elternelement (siehe z. B. .pillar .media{aspect-ratio:4/3}) beim Verkleinern des Browserfensters teils nicht neu — das Bild blieb auf der alten Größe stehen, bis man neu lud. absolute+inset wird von Safari beim Resize zuverlässig neu berechnet, optisch identisches Ergebnis. */ .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ---------- Aktuelles/News: Instagram-Feed im Look der Produktkacheln (29.08.2026, auf Wunsch: "Fläche der Bilder wie auf der Startseite" hinterlegen + "Mehr Aktuelles"-Button, der auf 6 Reihen gesamt aufklappt; Standard-Ansicht später auf Wunsch von 1 auf 3 Reihen erhöht). Live geprüft (Smash Balloon "Instagram Feed"-Plugin): .sbi_photo_wrap ist bereits quadratisch mit echtem darin — bekommt hier denselben Hintergrund wie .media oben. Die .sbi_item-Kacheln liegen als direkte Kinder von #sbi_images (das wiederum in #sb_instagram = .sbi liegt) in exakter visueller Zeilenreihenfolge, dadurch funktioniert nth-child hier zuverlässig. WICHTIG, live gefunden: Smash Balloons eigene Regel "#sb_instagram #sbi_images .sbi_item{display:inline-block}" hat zwei ID-Selektoren (Spezifität 2,0,1) und gewinnt gegen jede reine Klassen-Regel unabhängig von der Ladereihenfolge — exakt dieselbe Falle wie schon dreimal zuvor bei WooCommerce/GeneratePress-Core-CSS (siehe Technische-Learnings.md). Deshalb hier dieselben zwei ID-Selektoren mitgeführt, statt nur mit Klassen zu arbeiten. */ .page-aktuelles .sbi_photo_wrap, .page-news .sbi_photo_wrap, .page-notizie .sbi_photo_wrap{background:var(--paper-2)} /* Standardmäßig 3 Reihen (12 Kacheln) offen, nicht nur eine — auf Wunsch vom 29.08.2026 nachträglich angepasst (ursprünglich :nth-child(n+5), also nur 1 Reihe). .page-notizie (italienische Fassung) am 14.09.2026 ergänzt — fehlte bis dahin, obwohl die Seite denselben Aufbau verwendet. */ .page-aktuelles #sb_instagram #sbi_images .sbi_item:nth-child(n+13), .page-news #sb_instagram #sbi_images .sbi_item:nth-child(n+13), .page-notizie #sb_instagram #sbi_images .sbi_item:nth-child(n+13){display:none} /* Aufklappen zeigt die restlichen drei Reihen (Kacheln 13–24, macht 6 Reihen gesamt), nicht alle von Smash Balloon geladenen Kacheln — falls mehr als 24 geladen sind, bleiben die überzähligen bewusst versteckt. Die Feed- Einstellung "Anzahl der Beiträge" ist dafür in Instagram-Feed → Alle Feeds → Inspirationen → Feed-Layout auf 24 gesetzt (Desktop und Mobil). */ .page-aktuelles #sb_instagram.aktuelles-expanded #sbi_images .sbi_item:nth-child(-n+24), .page-news #sb_instagram.aktuelles-expanded #sbi_images .sbi_item:nth-child(-n+24), .page-notizie #sb_instagram.aktuelles-expanded #sbi_images .sbi_item:nth-child(-n+24){display:block!important} /* Die Platzhalter-Klassen .ph/.ph.dark aus der frühen Prototyp-Phase (vor den echten Fotos) wurden am 19.08.2026 entfernt — geprüft per REST-API gegen alle 29 veröffentlichten Seiten, keine einzige nutzt sie noch (jede Bildfläche hat inzwischen ein echtes Foto). */ /* Kontaktformular (Contact Form 7) — Eingaben optisch an die restigen Formulare (Newsletter, statische Prototyp-Vorschau) angleichen. */ .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea{ width:100%;padding:14px;border:1px solid var(--line);background:#fff; font-family:var(--sans);font-size:.95rem;color:var(--ink); } .wpcf7 textarea{margin-top:20px;resize:vertical} /* Spam-Schutz (Honeypot), 27.08.2026, korrigiert 28.08.2026: Ein zusätzliches Textfeld ([kwp-hp-field], siehe Kontaktformular + Contact Form (EN) im CF7-Editor), das für echte Besucher unsichtbar bleibt, aber im HTML vorhanden ist. Ursprünglich über die Klasse .kwp-hp versteckt — die wurde im CF7-Formular-Tag aber nie gesetzt (Feld landete nur zufällig durch ein Layout-Detail off-screen, nicht zuverlässig). Fix: Auswahl jetzt über das data-name-Attribut, das CF7 automatisch auf den umschließenden Wrapper-Span schreibt — funktioniert unabhängig vom CF7-Formular-Tag, kein erneuter Edit im CF7-Editor nötig. Bewusst NICHT display:none (manche Bots überspringen offensichtlich versteckte Felder), sondern aus dem sichtbaren Bereich herausgeschoben, bleibt für Screenreader ebenfalls unsichtbar. Die eigentliche Prüfung/Abweisung läuft serverseitig über den wpcf7_spam-Filter in functions.php — dort auch die ergänzende Zeitfalle gegen Bots, die dieses Feld gezielt überspringen (siehe Technische-Learnings.md). */ .wpcf7-form-control-wrap[data-name="kwp-hp-field"]{ position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden; } .wpcf7 label{display:block;font-size:.8rem;color:var(--ink-soft);margin-bottom:6px} .wpcf7-response-output{ margin:20px 0 0;padding:14px 18px;border:1px solid var(--line);font-size:.9rem; } .wpcf7-not-valid-tip{color:var(--danger);font-size:.8rem;margin-top:4px} /* Info-Box */ .notice{ border:1px solid var(--accent);padding:26px 30px;background:#fff; font-size:.95rem;color:var(--ink-soft); } .notice strong{color:var(--ink);font-weight:400} /* Öffnungszeiten */ .hours{list-style:none;margin:0;padding:0;font-size:.98rem} .hours li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line)} .hours li:last-child{border-bottom:0} /* Marken */ .count{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .count b{font-weight:400;color:var(--accent)} .brands{ display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;padding:0;margin:0; font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft); } /* ---------- Footer ---------- Eigener Footer-Inhalt, ersetzt GPs Standard-Copyright-Zeile (siehe kwpbt_child_footer() in functions.php). GP selbst rendert den äußeren