/* Lufy Studios — Layout und Bausteine. Farben, Schriften, Abstaende kommen aus theme.json und stehen hier als CSS-Variablen bereit. Die @font-face-Regeln erzeugt WordPress. */ :root{ --ink:var(--wp--preset--color--contrast); --base:var(--wp--preset--color--base); --accent:var(--wp--preset--color--accent); --accent-lt:var(--wp--preset--color--accent-light); --surface:var(--wp--preset--color--surface); --ink-72:rgba(26,32,44,.72); --ink-56:rgba(26,32,44,.56); --ink-16:rgba(26,32,44,.16); --mono:var(--wp--preset--font-family--mono); --pad:clamp(1.25rem,4vw,3.5rem); --maxw:1320px; --kopf:3.65rem; } html{-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} .mono,.is-style-mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;font-weight:500} .ac{color:var(--accent)} .ink-56{color:var(--ink-56)} .ink-72{color:var(--ink-72)} /* ---------- Kopfzeile ---------- */ .lufy-header{position:fixed;inset:0 0 auto;z-index:60;background:rgba(255,255,255,.82); backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s} .lufy-header.scrolled{border-bottom-color:var(--ink-16)} /* content-box: die 1320px sind die Inhaltsbreite, das seitliche Innenmass liegt aussen. Nur so fluchtet der Header mit den Abschnitten, denn dort steht das Innenmass ebenfalls ausserhalb der 1320px. */ .lufy-header>.wp-block-group{max-width:var(--maxw);margin-inline:auto; padding-inline:var(--pad);box-sizing:content-box} .brand{font-weight:800;letter-spacing:-.03em;font-size:1.02rem;text-decoration:none;color:var(--ink)} .brand sup{font-size:.52em;vertical-align:super;margin-left:.18em;font-weight:600} .lufy-header .wp-block-navigation{font-family:var(--mono);font-size:.72rem; letter-spacing:.1em;text-transform:uppercase;font-weight:500} .lufy-header .wp-block-navigation-item__content{text-decoration:none;color:var(--ink); position:relative;padding-bottom:3px} .lufy-header .wp-block-navigation-item__content::after{content:"";position:absolute;left:0;bottom:0; width:0;height:1.5px;background:var(--accent);transition:width .4s cubic-bezier(.22,1,.36,1)} .lufy-header .wp-block-navigation-item__content:hover::after, .lufy-header .current-menu-item .wp-block-navigation-item__content::after{width:100%} .lufy-header .current-menu-item .wp-block-navigation-item__content{color:var(--accent)} /* ---------- Hero ---------- */ .lufy-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-block:7rem 3rem} /* Der Hero zentriert vertikal per Flexbox. Ohne width:100% schrumpfen seine Kinder als Flex-Elemente auf Inhaltsbreite und stehen nicht mehr in der Flucht der uebrigen Abschnitte. */ .lufy-hero>*:not(.lufy-trail){width:100%} .hero-fig{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--wp--preset--color--surface)} .hero-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.08); animation:lufy-sink 1.4s cubic-bezier(.22,1,.36,1) forwards} @keyframes lufy-sink{to{transform:scale(1)}} .hero-fig figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--base); padding:.5rem .8rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase} /* Zeilenweises Aufdecken */ /* Die Zeilenhoehe liegt unter 1, dadurch ragen Unterlaengen (g, j, p) aus der Zeile. overflow:hidden fuer die Einfahr-Animation wuerde sie abschneiden — deshalb unten Luft schaffen und per negativem Aussenabstand ausgleichen. */ .reveal{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em} .reveal>span{display:block;transform:translateY(105%);animation:lufy-rise .9s cubic-bezier(.22,1,.36,1) forwards} .reveal:nth-of-type(2)>span{animation-delay:.09s} .reveal:nth-of-type(3)>span{animation-delay:.18s} @keyframes lufy-rise{to{transform:translateY(0)}} /* ---------- Bildspur (nur App-Seiten) ---------- */ .lufy-trail-hero{position:relative;isolation:isolate} .lufy-trail{position:absolute;inset:0;z-index:0;overflow:hidden;cursor:crosshair} .lufy-trail .tile{position:absolute;top:0;left:0;width:clamp(180px,18vw,290px);aspect-ratio:4/5; display:none;will-change:transform,opacity;pointer-events:none} .lufy-trail .tile img{width:100%;height:100%;object-fit:cover} .lufy-trail-hero>.wp-block-group{position:relative;z-index:2;pointer-events:none} .lufy-trail-hero a,.lufy-trail-hero .wp-block-button{pointer-events:auto} /* ---------- Bausteine ---------- */ .label{color:var(--accent)} .lede{font-size:var(--wp--preset--font-size--lede);line-height:1.5;color:var(--ink-72);max-width:44ch} .arrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase; font-weight:500;text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--ink-16); padding-bottom:.4rem;display:inline-block;transition:border-color .35s,color .35s} .arrow:hover{border-color:var(--accent);color:var(--accent)} .arrow i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1)} .arrow:hover i{transform:translateX(6px)} /* Rasterkarten mit Haarlinien statt Kaesten */ .grid-hair{display:grid;gap:1px;background:var(--ink-16);border:1px solid var(--ink-16)} .grid-hair>*{background:var(--base);padding:clamp(1.4rem,2.6vw,2.4rem)} .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} /* minmax(0,...) statt 1fr: sonst bestimmt der laengste Textbrocken die Spaltenbreite und die Kacheln werden ungleich. */ .grid-4{grid-template-columns:minmax(0,1fr)} @media(min-width:700px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(min-width:820px){.grid-2{grid-template-columns:1fr 1fr}} .app-card{text-decoration:none;color:inherit;display:flex;flex-direction:column; gap:1.6rem;min-height:290px;transition:background .4s} .app-card:hover{background:var(--wp--preset--color--surface)} .app-fig{aspect-ratio:16/10;overflow:hidden;background:var(--wp--preset--color--surface)} .app-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)} /* Nur das Foto zoomt hier. Die Bildmarke ist ausgenommen, weil ihre Zentrierung ebenfalls im transform steckt — eine Regel ohne translate wuerde sie aus der Mitte werfen. */ .app-card:hover .app-fig img:not(.app-mark){transform:scale(1.04)} .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem} .status{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--ink-16);padding:.3rem .6rem;white-space:nowrap;font-weight:500} .status.soon{background:var(--accent);border-color:var(--accent);color:#fff} .spec dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-56);margin-bottom:.5rem;font-weight:500} .spec dd{font-weight:800;letter-spacing:-.03em;font-size:1.5rem;margin:0} /* Nummerierte Schritte */ .steps{border-top:1px solid var(--ink-16)} .step{display:grid;gap:.4rem 2.5rem;padding:1.7rem 0;border-bottom:1px solid var(--ink-16); align-items:baseline;transition:padding-left .45s cubic-bezier(.22,1,.36,1)} .step:hover{padding-left:1rem} @media(min-width:820px){.step{grid-template-columns:3.5rem 1fr 1.15fr}} .step .num{font-family:var(--mono);font-size:.75rem;color:var(--accent);font-weight:500} .step p{color:var(--ink-72);margin:0} /* Laufband */ .marquee{overflow:hidden;padding:1rem 0;white-space:nowrap;background:var(--ink);color:var(--base)} .marquee .track{display:inline-block;animation:lufy-slide 34s linear infinite} /* Ein einziger Abstandswert fuer alles: zwischen Wort und Stern, zwischen Stern und naechstem Wort und zwischen den Wiederholungen. Vorher steckte der Abstand teils als Leerzeichen im Text, teils als Rand am Ende — dadurch war die Luecke vor dem ersten Wort jeder Wiederholung groesser als alle anderen. */ .marquee .track{display:flex;gap:var(--mq-luft);width:max-content} /* width:max-content ist noetig: ein Flex-Container fuellt sonst die Fensterbreite, und der Umlauf braucht die volle Inhaltsbreite. */ .marquee .track span{display:flex;align-items:center;gap:var(--mq-luft); font-weight:800;letter-spacing:-.03em;font-size:1.32rem} .marquee{--mq-luft:2.5rem} .marquee .track i{font-style:normal} .marquee .track b{color:var(--accent-lt);font-weight:inherit} @keyframes lufy-slide{to{transform:translateX(-50%)}} /* Dunkle Abschnitte */ .on-dark{background:var(--ink);color:var(--base)} .on-dark .label{color:var(--accent-lt)} .on-dark p{color:rgba(255,255,255,.64)} .on-dark .arrow{color:var(--base);border-color:rgba(255,255,255,.26)} .on-dark .arrow:hover{border-color:var(--accent-lt);color:var(--accent-lt)} .on-dark a{color:rgba(255,255,255,.72);text-decoration:none} .on-dark a:hover{color:var(--accent-lt)} .on-dark h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.45);margin-bottom:.9rem;font-weight:500} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal>span{transform:none} .hero-fig img{transform:none} } /* post-content ist nicht mehr eingeschraenkt: die Abschnitte bringen ihr eigenes seitliches Innenmass mit, damit sie randlos bleiben koennen. */ .lufy-hero, .wp-block-post-content>.wp-block-group{padding-inline:var(--pad)} .wp-block-post-content>.marquee{padding-inline:0} .wp-block-post-content>.wp-block-group:not(.recht-text):not(.recht-kopf)>*:not(.lufy-trail):not(.float-scene):not(.programme):not(.fenster):not(.dock):not(.hero-zwei){ max-width:var(--maxw);margin-inline:auto} /* Randlos: der Abschnitt selbst hat kein seitliches Innenmass, die Bildspur laeuft dadurch von Kante zu Kante. Das Innenmass traegt die Inhaltsgruppe, damit nur der Text eingerueckt ist. */ .wp-block-post-content>.lufy-trail-hero{padding-inline:0} .lufy-trail-hero>.wp-block-group{padding-inline:var(--pad);box-sizing:border-box; max-width:var(--maxw)} .lufy-trail{left:0;right:0;width:auto;max-width:none} /* Zeilenlaenge der App-Ueberschriften — gehoert ins Stylesheet, nicht als Inline-Attribut in den Block, sonst meldet der Editor unerwarteten Inhalt. */ /* ---------- Unterstrich-Animation ---------- Nach fancycomponents.dev/docs/components/text/underline-animation. Dort ein absolut gesetztes Element mit Hoehe = 10 % der Schriftgroesse; hier dasselbe als Pseudo-Element, dadurch ohne JavaScript. Variante "comes in, goes out": faehrt links ein und rechts wieder hinaus. */ .ul-anim{position:relative;display:inline-block;text-decoration:none; padding-bottom:.12em} .ul-anim::after{content:"";position:absolute;left:0;bottom:0; width:100%;height:.1em; /* 10 % der Schriftgroesse */ background:currentColor; transform:scaleX(0);transform-origin:right center; transition:transform .42s cubic-bezier(.22,1,.36,1)} .ul-anim:hover::after,.ul-anim:focus-visible::after{ transform:scaleX(1);transform-origin:left center} /* Fusszeile im Stil der Vorlage: grosse Versalien, untereinander */ .foot-nav{display:flex;flex-direction:column;gap:.1em;align-items:flex-start} .foot-nav a{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em; text-transform:uppercase;color:var(--base);line-height:1.18} .foot-nav a:hover{color:var(--accent-lt)} .foot-meta{display:flex;flex-direction:column;gap:.45em;align-items:flex-start} .foot-meta a{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em; text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.72)} .foot-meta a:hover{color:var(--accent-lt)} /* ---------- Bild zwischen Text ---------- Nach fancycomponents.dev/docs/components/blocks/media-between-text. Dort waechst das Medium von width:0 auf width:auto, die Textteile weichen auseinander. "auto" ist in CSS nicht animierbar, deshalb steht hier eine feste Zielbreite in Zeichenmass — sie skaliert mit der Ueberschrift mit. Ausloeser ist Hover (Standard der Vorlage), nicht das Sichtfeld. Das Bild behaelt sein Hochformat 2:3, nichts wird beschnitten. */ .mbt{display:flex;align-items:center;flex-wrap:wrap;gap:0;cursor:default; font-weight:800;letter-spacing:-.042em;line-height:.94; font-size:var(--wp--preset--font-size--xl);margin:0} .mbt-media{--mbt-w:1.15em;display:block;overflow:hidden;flex:0 0 auto; width:0;align-self:center; transition:width .6s cubic-bezier(.22,1,.36,1)} .mbt:hover .mbt-media,.mbt:focus-within .mbt-media{width:var(--mbt-w)} .mbt-media img{width:var(--mbt-w);height:calc(var(--mbt-w)*1.5); /* 2:3 hoch */ object-fit:cover;display:block;max-width:none} .mbt .klammer{color:var(--accent)} @media(hover:none){ /* Ohne Zeigegeraet dauerhaft sichtbar */ .mbt-media{width:var(--mbt-w)} } /* ---------- Drag Elements ---------- Nach fancycomponents.dev/docs/components/blocks/drag-elements: relativer Container, Kinder absolut, frei verschiebbar. */ .drag-board{position:relative;width:100%;aspect-ratio:4/5; touch-action:none;overflow:visible;z-index:5} /* Der Hero fasst die Karten ein, damit nichts seitlich aus der Seite laeuft. Nur dort, wo tatsaechlich ein Board steht — sonst bliebe die Bildspur betroffen. */ .lufy-hero:has(.drag-board){overflow:hidden} /* Alle Karten liegen zentriert auf demselben Ankerpunkt — daher der Stapel. Die Zentrierung steckt im Transform (siehe drag-elements.js). */ .drag-item{position:absolute;top:50%;left:50%; width:clamp(150px,17vw,240px); background:#fff;padding:8px 8px 8px; /* schmaler weisser Rahmen */ box-shadow:0 6px 22px rgba(26,32,44,.14); cursor:grab;user-select:none;-webkit-user-select:none; will-change:transform;touch-action:none} .drag-item.greift{cursor:grabbing;box-shadow:0 16px 40px rgba(26,32,44,.26)} .drag-item img{width:100%;height:auto;display:block;pointer-events:none; -webkit-user-drag:none} /* ---------- Parallax Floating ---------- Nach fancycomponents.dev/docs/components/image/parallax-floating. Die Motive liegen hinter dem Text und reagieren unterschiedlich stark auf den Cursor — je nach data-depth. */ .float-hero{position:relative;isolation:isolate} /* Die Szene laeuft randlos ueber die volle Breite, unabhaengig vom seitlichen Innenmass des Heros. Der Text behaelt es. */ .float-scene{left:0;right:0;width:auto;max-width:none} .float-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} /* Der Text muss ueber die Szene — sonst gewinnt das positionierte Element gegen die nicht positionierte Textgruppe und verdeckt die Ueberschrift. */ .float-hero>.wp-block-group{position:relative;z-index:2} .float-item{position:absolute;will-change:transform; background:#fff;padding:7px;box-shadow:0 8px 26px rgba(26,32,44,.16)} .float-item img{width:100%;height:auto;display:block} /* Auf schmalen Fenstern zuruecknehmen, dort steht die Ueberschrift eng */ @media(max-width:900px){.float-item{opacity:.42;box-shadow:none}} /* ---------- Paketkarten ---------- */ .pakete>.paket{display:flex;flex-direction:column;gap:1.6rem} .paket-kopf h3{margin-top:1rem} .paket-kopf p{margin-top:.7rem} .paket-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-16)} .paket-liste li{padding:.7rem 0;border-bottom:1px solid var(--ink-16); color:var(--ink-72);line-height:1.45} .paket-fuss{margin-top:auto} .paket-preis{font-weight:800;letter-spacing:-.035em; font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1;margin:.4rem 0 .35rem} /* Das mittlere Paket abgesetzt, ohne es marktschreierisch zu machen */ .pakete>.paket-hervor{background:var(--base);box-shadow:inset 0 0 0 2px var(--accent)} .pakete>.paket-hervor .paket-preis{color:var(--accent)} /* "Auf Anfrage" steht an der Stelle des Preises, braucht aber weniger Gewicht als eine Zahl — sonst wirkt die Karte wie ein leeres Preisschild. */ .paket-preis.anfrage{font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:-.028em} /* ---------- Hero mit festem Abstand von oben ---------- Nicht zentriert, sondern fester Abstand von oben. Sonst haengt die Hoehe des Textes davon ab, wie lang er ist bzw. wie hoch das Medium daneben ist — und die beiden App-Seiten starten auf unterschiedlicher Linie. */ .lufy-hero.hero-oben{justify-content:flex-start;padding-top:14rem} .lufy-hero.hero-oben .wp-block-columns{align-items:flex-start} /* WordPress setzt die Zentrierung zusaetzlich per align-self auf jede einzelne Spalte — die muss mit ueberschrieben werden. */ .lufy-hero.hero-oben .wp-block-column{align-self:flex-start} /* Spur und Szene sind absolut positioniert und nehmen keinen Platz ein. WordPress setzt trotzdem seinen Blockabstand zum naechsten Geschwister — das schiebt den Text um genau diesen Betrag nach unten. */ .lufy-hero>.lufy-trail+*,.lufy-hero>.float-scene+*{margin-block-start:0} @media(max-width:900px){.lufy-hero.hero-oben{padding-top:9rem}} /* Der Stapel sitzt in der Mitte seines Containers, der Container ist aber hoeher als die Textspalte daneben — dadurch wirkt der Stapel zu tief. Er wird deshalb im Container nach oben gerueckt, bis seine Mitte auf der Mitte des Textes liegt. Der Stapel selbst bleibt unveraendert. */ .lufy-hero .drag-board .drag-item{top:33.4%} /* ---------- Zurück nach oben ---------- Schwebt ueber dem Inhalt, erscheint erst nach dem Scrollen. Der helle Ring haelt den Knopf auch auf der dunklen Fusszeile sichtbar — auf Weiss ist er unsichtbar, dort traegt der Schatten. */ .zum-anfang{position:fixed;z-index:70; right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem); width:3rem;height:3rem;padding:0;border:0;cursor:pointer; display:grid;place-items:center; background:var(--ink);color:var(--base); box-shadow:0 0 0 1px rgba(255,255,255,.18),0 8px 24px rgba(26,32,44,.28); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), background .3s,visibility .35s} .zum-anfang.sichtbar{opacity:1;visibility:visible;transform:none} .zum-anfang:hover,.zum-anfang:focus-visible{background:var(--accent)} .zum-anfang:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .zum-anfang svg{width:1.05rem;height:1.05rem;display:block} @media(prefers-reduced-motion:reduce){.zum-anfang{transition:opacity .01s,visibility .01s;transform:none}} /* ---------- Polaroid ---------- Weisser Rahmen wie bei den schwebenden Produktbildern, unten breiter. Der Name steht im breiten Rand, nicht als Balken ueber dem Bild. */ .polaroid{display:block;width:100%;margin:0;box-sizing:border-box; background:#fff;padding:14px 14px 0; box-shadow:0 12px 38px rgba(26,32,44,.18); transform:rotate(-1.5deg)} .polaroid img{width:100%;height:auto;display:block} .polaroid figcaption{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink); padding:1.6rem .2rem 1.8rem;text-align:center} /* Das Polaroid ist deutlich hoeher als die Textspalte daneben und reichte bis an die Unterkante des Fensters. Es wird nach oben gezogen, damit unten Luft bleibt — auf schmalen Fenstern stehen die Spalten untereinander, dort nicht. */ @media(min-width:900px){ /* Spezifitaet muss WordPress' Regel fuer das erste Element einer Spalte schlagen, sonst bleibt der obere Abstand auf null. */ .lufy-hero .wp-block-column>.polaroid{margin-top:-6rem} } @media(prefers-reduced-motion:reduce){.polaroid{transform:none}} /* ---------- Hero-Überschriften: zweizeilig, gleiche Höhe ---------- Die Breite in Zeichen erzwingt den Umbruch nach etwa 21 Zeichen — damit landen Texte von 27 bis 42 Zeichen zuverlaessig auf zwei Zeilen. Die Mindesthoehe von zwei Zeilen haelt alle Heroes auf gleicher Hoehe, auch wenn ein Text mal nur eine Zeile fuellt. */ /* Die Ueberschrift darf zwei oder drei Zeilen haben — die Ausrichtung uebernimmt der Block darum herum, nicht die Zeilenzahl. */ /* Hero-Bilder an den rechten Rand, damit der Text mehr Luft bekommt */ .lufy-hero .polaroid, .lufy-hero .hero-fig{margin-left:auto;margin-right:0} /* Die frueheren Fluchtlinien (feste Mindesthoehe fuer Ueberschrift und Vorspann) sind entfallen. Sie stammen aus dem Entwurf, in dem sich mehrere Seiten einen Hero teilten. Heute hat jede Seite ihren eigenen, und die reservierte Hoehe hinterliess nur Luecken. */ /* ---------- Startseite: Bild vertikal mittig ---------- Der Spaltensatz fuellt die Hoehe des Heros, damit die Bildspalte einen Raum zum Zentrieren hat. Der Text bleibt oben an seiner Fluchtlinie. */ @media(min-width:900px){ .lufy-hero.hero-oben>.wp-block-columns{min-height:calc(100svh - 17rem)} /* Der Hero hat oben 14rem und unten 3rem Abstand. Wer sich im Inhaltsbereich zentriert, sitzt deshalb (14-3)/2 = 5.5rem zu tief — das wird abgezogen, damit das Bild in der Mitte des Bildschirms steht, nicht des Kastens. */ .lufy-hero.hero-oben .wp-block-column:has(.hero-fig){align-self:center;margin-top:-11rem} /* Der Stapel bringt seine eigene Hoehe mit und zentriert sich ohne Korrektur. */ .lufy-hero.hero-oben .wp-block-column:has(.board-start){align-self:center} /* doppelt: bei align-self:center wirkt der Abstand hälftig */ } /* ---------- Startseite: grosser Bilderstapel ---------- Kartengroesse am Polaroid der Ueber-mich-Seite ausgerichtet (rund 440 px). Die Karten liegen mittig im Board, nicht wie bei Lingly nach oben gerueckt — dort war der Versatz noetig, weil der Text daneben kuerzer ist. */ .board-start .drag-item{width:clamp(200px,22vw,400px);top:50%} .board-start{overflow:visible} /* ---------- Bildmarke auf der App-Karte ---------- Liegt mittig ueber dem Foto. Der weiche Schatten haelt die weisse Form auch auf hellen Bildstellen lesbar. */ .app-fig{position:relative} /* Spezifitaet muss `.app-fig img` schlagen, sonst gilt dort width:100%. */ .app-fig img.app-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:27%;height:auto;pointer-events:none; transition:transform .5s cubic-bezier(.22,1,.36,1); filter:drop-shadow(0 2px 10px rgba(26,32,44,.45))} /* Beim Ueberfahren zoomt die Marke minimal — die Zentrierung bleibt erhalten. */ .app-card:hover .app-fig img.app-mark{transform:translate(-50%,-50%) scale(1.07)} @media(prefers-reduced-motion:reduce){ .app-card:hover .app-fig img.app-mark{transform:translate(-50%,-50%)} } /* ---------- Ausklappmenü in der Kopfzeile ---------- WordPress haelt Untermenues mit height:0 und overflow:hidden geschlossen und klappt sie per JavaScript auf. Hier laeuft es rein ueber CSS beim Ueberfahren, damit es ohne Skript funktioniert und zur uebrigen Gestaltung passt. */ .lufy-header .wp-block-navigation__submenu-container{ position:absolute;top:100%;left:0; height:0;overflow:hidden;visibility:hidden;opacity:0; min-width:11rem;padding:0;margin:0; background:var(--base);border:1px solid var(--ink-16); box-shadow:0 12px 30px rgba(26,32,44,.10); transform:translateY(4px); transition:opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1)} .lufy-header li.has-child:hover>.wp-block-navigation__submenu-container, .lufy-header li.has-child:focus-within>.wp-block-navigation__submenu-container{ height:auto;overflow:visible;visibility:visible;opacity:1; transform:translateY(0);padding-block:.35rem} /* Ein unsichtbarer Streifen ueberbrueckt die Luecke zwischen Punkt und Menue, sonst klappt es zu, sobald der Zeiger den Zwischenraum kreuzt. */ .lufy-header li.has-child::after{content:"";position:absolute;left:0;top:100%; width:100%;height:.75rem} .lufy-header li.has-child{position:relative} .lufy-header .wp-block-navigation__submenu-container li{margin:0;width:100%} .lufy-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ display:block;padding:.7rem 1.1rem;color:var(--ink);white-space:nowrap; transition:background .25s, color .25s} .lufy-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{display:none} .lufy-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{ background:var(--wp--preset--color--surface);color:var(--accent)} .lufy-header .wp-block-navigation__submenu-icon{width:.6em;height:.6em;margin-left:.35em;opacity:.5; transition:opacity .25s} .lufy-header li.has-child:hover .wp-block-navigation__submenu-icon{opacity:1} @media(prefers-reduced-motion:reduce){ .lufy-header .wp-block-navigation__submenu-container{transition:none;transform:none} } /* ---------- Einstiegs-Angebot ---------- Liegt quer ueber den drei Paketen und ist bewusst anders gebaut: Es ist kein viertes gleichwertiges Paket, sondern die Tuer davor. */ .einstieg{display:grid;gap:1.6rem 3rem;align-items:start; border:2px solid var(--accent);background:var(--base); padding:clamp(1.5rem,3vw,2.4rem)} @media(min-width:820px){.einstieg{grid-template-columns:1fr 1.15fr auto}} .einstieg h3{margin-top:.9rem} .einstieg p{color:var(--ink-72)} .einstieg-liste{list-style:none;margin:0;padding:0} .einstieg-liste li{padding:.5rem 0;color:var(--ink-72);line-height:1.45; border-bottom:1px solid var(--ink-16)} .einstieg-liste li:last-child{border-bottom:0} .einstieg-fuss{white-space:nowrap} .einstieg-fuss .paket-preis{color:var(--accent)} /* Kontaktformular */ .lufy-formular{max-width:44rem} .lufy-formular .feld,.nl-form .feld{margin:0 0 1rem} .feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem} /* Beschriftung liegt im Feld und weicht, sobald etwas darin steht. Sie bleibt im Dokument, damit Vorlesehilfen sie weiterhin finden. */ .lufy-formular .feld,.nl-form .feld{position:relative} .lufy-formular .feld > label,.nl-form .feld > label{position:absolute;top:1px;left:1px;margin:0; padding:.85rem 1rem;font-size:1rem;font-weight:400;line-height:1.5; color:var(--ink-56);pointer-events:none;transition:opacity .15s} .lufy-formular .feld > input:not(:placeholder-shown) ~ label, .lufy-formular .feld > textarea:not(:placeholder-shown) ~ label, .nl-form .feld > input:not(:placeholder-shown) ~ label{opacity:0} .lufy-formular .feld-haken > label,.nl-form .feld-haken > label{position:static;padding:0;pointer-events:auto} .lufy-formular input[type=text],.lufy-formular input[type=email],.lufy-formular textarea, .nl-form input[type=email]{ width:100%;box-sizing:border-box;font:inherit;font-size:1rem;line-height:1.5;color:var(--ink); background:var(--base);border:1px solid var(--ink-16);border-radius:0; padding:.85rem 1rem;transition:border-color .2s} .lufy-formular textarea{resize:vertical;min-height:9rem;display:block} .lufy-formular input:focus,.lufy-formular textarea:focus,.nl-form input:focus{outline:none;border-color:var(--ink)} .lufy-formular [aria-invalid=true]{border-color:var(--accent)} .feld-fehler{display:block;margin-top:.45rem;font-size:.85rem;color:var(--accent)} .feld-haken > label{display:grid;grid-template-columns:auto 1fr;gap:.75rem; align-items:start;font-size:.92rem;font-weight:400;color:var(--ink-72);line-height:1.5} .feld-haken input[type=checkbox]{margin:.2rem 0 0;width:1.05rem;height:1.05rem;accent-color:var(--accent)} .feld-haken a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em} .formular-hinweis{margin:0 0 1.5rem;padding:.9rem 1.1rem; border-left:2px solid var(--accent);background:var(--surface);color:var(--ink)} .formular-senden{font:inherit;font-weight:500;cursor:pointer; background:var(--ink);color:var(--base);border:1px solid var(--ink); padding:.9rem 1.8rem;transition:background .2s,color .2s} .formular-senden:hover{background:var(--accent);border-color:var(--accent)} .formular-danke{border-left:2px solid var(--accent);padding-left:1.5rem;max-width:44rem} .formular-danke p:last-child{margin:.6rem 0 0;font-size:var(--wp--preset--font-size--lede); line-height:1.5;color:var(--ink-72)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media(max-width:1000px){.feld-paar{grid-template-columns:1fr}} /* Kontaktwege */ .wege{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--ink-16);border:1px solid var(--ink-16)} .wege a{display:block;padding:1.8rem;background:var(--base);text-decoration:none; color:var(--ink);transition:background .2s} .wege a:hover{background:var(--surface)} .wege-spalte .wege{grid-template-columns:1fr} .wege .weg-art{display:block;font-family:var(--wp--preset--font-family--mono); font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-56)} .wege .weg-ziel{display:block;margin-top:.7rem;font-size:1.05rem;font-weight:500} @media(max-width:700px){.wege{grid-template-columns:1fr}} /* Schmale Lesespalte statt voller Abschnittsbreite. WordPress zentriert jedes direkte Kind einer eingegrenzten Gruppe mit margin-left:auto !important. Dagegen hilft keine Spezifitaet, nur Abstand: .eng-huelle nimmt den Platz als direktes Kind ein, die schmale Spalte sitzt eine Ebene tiefer und bleibt dort unbehelligt linksbuendig. */ .eng{max-width:44rem} .wp-block-column .eng{max-width:none} /* Warteliste */ .nl-block{border:1px solid var(--ink-16);padding:2.6rem} .on-dark .nl-block{border-color:rgba(255,255,255,.18)} .nl-block h3{margin:.7rem 0 0;font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.02em} .nl-text{margin:.7rem 0 0;color:var(--ink-72)} .on-dark .nl-text{color:rgba(255,255,255,.66)} .nl-form{margin-top:1.8rem} .nl-zeile{display:flex;gap:.7rem;align-items:start} .nl-zeile .feld{flex:1;margin:0} .nl-zeile .formular-senden{flex:none;white-space:nowrap} .on-dark .nl-form input[type=email]{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)} .on-dark .nl-form .feld > label{color:rgba(255,255,255,.55)} .on-dark .nl-form input:focus{border-color:#fff} .on-dark .nl-form .formular-senden{background:#fff;color:var(--ink);border-color:#fff} .on-dark .nl-form .formular-senden:hover{background:var(--accent-lt);border-color:var(--accent-lt);color:var(--ink)} .on-dark .nl-form .feld-haken > label{color:rgba(255,255,255,.62)} .on-dark .nl-form .feld-haken a{color:#fff} .nl-form .feld-haken{margin:1.1rem 0 0} .nl-danke,.nl-status{border:0;border-left:2px solid var(--accent);padding:0 0 0 1.5rem} .nl-danke p:last-child,.nl-status p:last-child{margin:.6rem 0 0;color:var(--ink-72); font-size:var(--wp--preset--font-size--lede);line-height:1.5} .on-dark .nl-danke p:last-child{color:rgba(255,255,255,.66)} @media(max-width:620px){ .nl-block{padding:1.8rem} .nl-zeile{flex-direction:column;align-items:stretch} .nl-zeile .feld{width:100%} .nl-zeile .formular-senden{width:100%} } /* ------------------------------------------------------------------------ Startseite als Schreibtisch Am Rechner ein Mac-Desktop, am Telefon ein iPhone-Startbildschirm. Dasselbe Markup, nur andere Anordnung. Die Symbole sind echte Links mit Text, damit Tastatur, Vorlesehilfen und Suchmaschinen sie verstehen. ------------------------------------------------------------------------ */ .schreibtisch{position:relative;max-width:var(--maxw);margin-inline:auto; min-height:calc(100svh - 4.2rem); display:grid;grid-template-columns:auto 1fr;align-items:start; gap:3rem;padding:2.5rem 0 8rem} /* Programmsymbole, am Rechner links oben wie auf dem Schreibtisch */ .programme{display:flex;flex-direction:column;gap:1.8rem;margin:0;padding:0;list-style:none; justify-self:start} .programm{display:flex;flex-direction:column;align-items:center;gap:.6rem; width:6.5rem;margin-left:-1.1rem;text-decoration:none;color:var(--ink); padding:.6rem .3rem;border-radius:.7rem;transition:background .18s} .programm:hover,.programm:focus-visible{background:rgba(26,32,44,.055);outline:none} .programm:focus-visible{box-shadow:0 0 0 2px var(--accent)} .programm img{width:4.6rem;height:4.6rem;border-radius:22.5%;display:block; background:#fff;box-shadow:0 1px 2px rgba(26,32,44,.14),0 8px 22px -8px rgba(26,32,44,.3); transition:transform .22s cubic-bezier(.2,.8,.2,1)} .programm:hover img{transform:scale(1.045)} .programm span{font-size:.82rem;font-weight:500;letter-spacing:-.01em;text-align:center} /* Das offene Fenster traegt die eigentliche Aussage */ .fenster{max-width:34rem;justify-self:end;margin-top:1.5rem; background:var(--base);border:1px solid var(--ink-16);border-radius:.7rem; box-shadow:0 2px 4px rgba(26,32,44,.06),0 30px 60px -24px rgba(26,32,44,.35); overflow:hidden} .fenster-leiste{display:flex;align-items:center;gap:.5rem; padding:.75rem 1rem;border-bottom:1px solid var(--ink-16);background:var(--surface)} .ampel{display:flex;gap:.42rem} .ampel i{width:.7rem;height:.7rem;border-radius:50%;background:var(--ink-16);display:block} .ampel i:first-child{background:var(--accent)} .fenster-name{font-family:var(--wp--preset--font-family--mono);font-size:.76rem; letter-spacing:.04em;color:var(--ink-56);margin-left:.4rem} .fenster-inhalt{padding:2.2rem} .fenster-inhalt>*:first-child{margin-top:0} .fenster-inhalt h1{font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.16;letter-spacing:-.025em;margin:0} .fenster-inhalt p{color:var(--ink-72);margin:1rem 0 0;max-width:42ch} .fenster .nl-block{border:0;padding:0;margin-top:1.8rem} .fenster .nl-block .mono.label,.fenster .nl-block h3{display:none} .fenster .nl-text{margin:0;font-size:.88rem} .nl-text:empty{display:none} .fenster .nl-form{margin-top:1rem} .fenster .eng-huelle,.fenster .eng{max-width:none} /* Das Dock */ .dock{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%); display:flex;gap:.4rem;margin:0;padding:.5rem;list-style:none; background:rgba(255,255,255,.78);backdrop-filter:blur(14px); border:1px solid var(--ink-16);border-radius:1.1rem; box-shadow:0 2px 6px rgba(26,32,44,.08),0 18px 40px -18px rgba(26,32,44,.4)} .dock a,.dock .dock-schalter{display:flex;flex-direction:column;align-items:center;gap:.35rem; width:4.6rem;padding:.55rem .2rem .45rem;border-radius:.75rem; text-decoration:none;color:var(--ink);transition:background .18s} .dock a:hover,.dock a:focus-visible,.dock .dock-schalter:hover, .dock .dock-schalter:focus-visible{background:rgba(26,32,44,.06);outline:none} .dock a:focus-visible,.dock .dock-schalter:focus-visible{box-shadow:0 0 0 2px var(--accent)} .dock svg{width:1.45rem;height:1.45rem;stroke:currentColor;fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .dock span{font-size:.68rem;font-weight:500;letter-spacing:-.01em} /* Menueleiste: die Kopfzeile tritt auf jeder Seite zurueck. Die Menuepunkte entfallen, der Weg fuehrt ueber die Wortmarke oder den roten Fensterknopf zurueck auf den Schreibtisch, wo die Symbole und das Dock stehen. */ .lufy-header .wp-block-navigation{display:none} .brand{font-size:.86rem;letter-spacing:-.01em} .leiste-rechts{display:none} .leiste-rechts{display:flex;align-items:center;gap:1.4rem; font-family:var(--wp--preset--font-family--mono);font-size:.74rem; letter-spacing:.05em;color:var(--ink-56)} .leiste-rechts a{color:inherit;text-decoration:none} .leiste-rechts a:hover{color:var(--ink)} @media(max-width:900px){ /* Am Telefon ein Startbildschirm. Aus dem Fenster wird ein Widget: keine Titelleiste, staerker gerundet, und alles darin deutlich kompakter, damit Symbole und Dock im Bild bleiben. */ .schreibtisch{grid-template-columns:1fr;gap:1.6rem;padding:1.4rem 0 7rem; min-height:calc(100svh - 3.4rem - 4.3rem)} .fenster{order:1;margin-top:0;max-width:none;justify-self:stretch;border-radius:1.4rem; box-shadow:0 1px 3px rgba(26,32,44,.07),0 16px 34px -18px rgba(26,32,44,.3)} /* Am Telefon faellt nur die Titelzeile des Seitenfensters weg; die schwebenden Fenster brauchen ihren Schliessknopf. */ .app-fenster > .fenster-leiste{display:none} .fenster-inhalt{padding:1.35rem} .fenster-inhalt h1{font-size:1.42rem;line-height:1.2} .fenster-inhalt p{font-size:.92rem;line-height:1.45;margin-top:.7rem} .fenster .nl-text{display:none} .fenster .nl-block{margin-top:1.1rem} .fenster .nl-form{margin-top:0} .fenster .nl-zeile .feld input,.fenster .nl-zeile .formular-senden{padding-block:.7rem} .fenster .feld-haken{margin-top:.8rem} .fenster .feld-haken > label{font-size:.78rem;line-height:1.4;gap:.55rem} .programme{order:2;flex-direction:row;flex-wrap:wrap;justify-content:flex-start; gap:1.3rem 1rem} .programm{width:5.1rem;padding:.35rem .2rem;margin-left:-.35rem} .programm img{width:4rem;height:4rem} .programm span{font-size:.76rem} .dock{left:1rem;right:1rem;transform:none;justify-content:space-around;gap:0; bottom:1.1rem} .dock a{width:auto;flex:1} } @media(max-width:400px){ .dock span{font-size:.64rem} .programm{width:4.9rem} } /* Auf der Startseite tritt die Fusszeile auf die Pflichtangaben zurueck, damit der Schreibtisch genau einen Bildschirm hoch bleibt. */ .lufy-fuss{padding:var(--wp--preset--spacing--60) var(--pad) 2rem} .lufy-fuss>*{max-width:var(--maxw);margin-inline:auto} .foot-raster{display:grid;gap:3rem 4rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .foot-meta-zeile{margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16); display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;color:rgba(255,255,255,.45); font-family:var(--wp--preset--font-family--mono);font-size:.72rem; letter-spacing:.1em;text-transform:uppercase} .foot-meta-zeile a{color:inherit;text-decoration:none} .foot-meta-zeile a:hover{color:rgba(255,255,255,.8)} .home .foot-raster{display:none} .foot-meta-zeile{margin-top:0;border-top:1px solid var(--ink-16); color:var(--ink-56);padding-top:.9rem;padding-bottom:.9rem} .home .zum-anfang{display:none} /* Der helle Fenstergrund gilt auf jeder Breite. Nur Rahmen, Rundung und das Rollen im Fenster kommen erst am Rechner dazu; am Telefon liegt der Inhalt sonst unlesbar direkt auf dem Wallpaper. */ .app-fenster{background:var(--base)} @media(max-width:900px){ /* Nur das Seitenfenster braucht am Telefon keine Titelzeile. Die schwebenden Fenster behalten sie, sonst fehlt dort der Schliessknopf. */ .app-fenster > .fenster-leiste{display:none} } .home .schreibtisch{min-height:calc(100svh - 3.4rem - 4.3rem);padding-bottom:7rem} /* ------------------------------------------------------------------------ Hintergrundbild der Startseite Der Schreibtisch bekommt ein Wallpaper, damit die hellen Fenster darauf liegen wie auf einem echten Rechner. Alles, was direkt auf dem Bild sitzt, wechselt dafuer auf helle Schrift. ------------------------------------------------------------------------ */ /* Der Verlauf haelt Menueleiste, Dock und Fusszeile lesbar, auch wenn das Wallpaper spaeter gegen ein helleres getauscht wird. Drei Groessen, damit ein Telefon nicht die 4K-Fassung laedt. */ body.home{ background-image: linear-gradient(to bottom, rgba(18,23,31,.34) 0%, rgba(18,23,31,0) 18%, rgba(18,23,31,0) 58%, rgba(18,23,31,.6) 100%), url(../img/wallpaper.webp); background-size:cover,cover; background-position:center,right center; background-attachment:fixed,fixed; background-color:#232a33;background-repeat:no-repeat,no-repeat} @media(min-resolution:1.5dppx) and (min-width:901px){ body.home{background-image: linear-gradient(to bottom, rgba(18,23,31,.34) 0%, rgba(18,23,31,0) 18%, rgba(18,23,31,0) 58%, rgba(18,23,31,.6) 100%), url(../img/wallpaper-2x.webp)} } @media(max-width:900px){ body.home{background-image: linear-gradient(to bottom, rgba(18,23,31,.34) 0%, rgba(18,23,31,0) 18%, rgba(18,23,31,0) 58%, rgba(18,23,31,.6) 100%), url(../img/wallpaper-klein.webp); background-attachment:scroll,scroll; background-position:center,center 64%} } /* Menueleiste liegt transluzent auf dem Bild */ .lufy-header{background:rgba(20,25,34,.42);backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.14)} .lufy-header.scrolled{border-bottom-color:rgba(255,255,255,.14)} .brand{color:#fff} .leiste-rechts{color:rgba(255,255,255,.72)} .leiste-rechts a:hover{color:#fff} /* Symbolbeschriftung auf dem Bild: hell mit Schatten, wie im Betriebssystem */ .home .programm{color:#fff} .home .programm span{text-shadow:0 1px 3px rgba(0,0,0,.55)} .home .programm:hover,.home .programm:focus-visible{background:rgba(255,255,255,.16)} .home .programm img{box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 26px -8px rgba(0,0,0,.55)} /* Fenster und Dock heben sich staerker ab */ .home .fenster{box-shadow:0 2px 6px rgba(0,0,0,.22),0 40px 80px -30px rgba(0,0,0,.7)} .home .dock{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.5); box-shadow:0 2px 8px rgba(0,0,0,.18),0 24px 50px -22px rgba(0,0,0,.6)} /* Fusszeile ebenfalls auf dem Bild */ .foot-meta-zeile{color:rgba(255,255,255,.62); border-top:1px solid rgba(255,255,255,.16)} .foot-meta-zeile a:hover{color:#fff} /* Auf der Startseite laufen Schreibtisch und Fussstreifen bis kurz vor den Rand, damit es sich wie ein Bildschirm anfuehlt und nicht wie ein Satzspiegel. */ .home .schreibtisch{max-width:none;padding-inline:2.4rem} .lufy-fuss{padding-inline:2.4rem} .lufy-fuss>*{max-width:none} @media(max-width:900px){ .home .schreibtisch,.lufy-fuss{padding-inline:1.25rem} } /* Das Fenster laesst sich ziehen: die Leiste ist der Griff. */ .fenster{position:relative;z-index:3} .dock{z-index:2} .fenster-leiste{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none} .fenster.wird-gezogen{transition:none} .fenster.wird-gezogen .fenster-leiste{cursor:grabbing} .home .fenster.wird-gezogen{box-shadow:0 4px 12px rgba(0,0,0,.3),0 60px 110px -40px rgba(0,0,0,.8)} @media(max-width:900px){.fenster-leiste{cursor:auto}} /* Dock im Glasstil: dunkel transluzent ueber dem Bild, mit Lichtkante oben. */ .home .dock{ background:rgba(26,32,44,.44); -webkit-backdrop-filter:blur(34px) saturate(140%); backdrop-filter:blur(34px) saturate(140%); border:1px solid rgba(255,255,255,.14); border-radius:1.35rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.22), 0 26px 60px -20px rgba(0,0,0,.66); padding:.55rem} .home .dock a,.home .dock .dock-schalter{color:#fff;border-radius:.9rem} .home .dock a:hover,.home .dock a:focus-visible, .home .dock .dock-schalter:hover,.home .dock .dock-schalter:focus-visible{background:rgba(255,255,255,.16)} .home .dock span{text-shadow:0 1px 2px rgba(0,0,0,.35)} @supports not (backdrop-filter:blur(1px)){ .home .dock{background:rgba(26,32,44,.82)} } /* ------------------------------------------------------------------------ Seitenwechsel wie das Oeffnen einer App Nutzt die View-Transition-Technik des Browsers. Wo sie fehlt (derzeit Firefox), wechselt die Seite wie bisher ohne Animation. Es wird nichts im Browser gespeichert: woher der Besucher kommt, verraet das Ereignis selbst, nicht ein Eintrag im Speicher. ------------------------------------------------------------------------ */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){ animation-duration:.26s;animation-fill-mode:both} ::view-transition-old(root){animation-name:seite-weg;animation-timing-function:ease-in} ::view-transition-new(root){animation-name:seite-her; animation-timing-function:cubic-bezier(.2,.85,.25,1)} @keyframes seite-weg{to{opacity:0}} @keyframes seite-her{from{opacity:0}to{opacity:1}} /* Vom Schreibtisch in eine App: der Inhalt faehrt auf, wie ein Programm, das sich oeffnet. Der Schreibtisch tritt dabei leicht zurueck. */ html:active-view-transition-type(app-auf)::view-transition-new(root){ animation-name:app-auf;animation-duration:.4s} html:active-view-transition-type(app-auf)::view-transition-old(root){ animation-name:tisch-zurueck;animation-duration:.32s} @keyframes app-auf{ from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)}} @keyframes tisch-zurueck{ from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(1.06)}} /* Zurueck auf den Schreibtisch: die App faellt wieder zusammen. */ html:active-view-transition-type(app-zu)::view-transition-old(root){ animation-name:app-zu;animation-duration:.3s} html:active-view-transition-type(app-zu)::view-transition-new(root){ animation-name:tisch-her;animation-duration:.36s} @keyframes app-zu{ from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.9)}} @keyframes tisch-her{ from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:scale(1)}} /* Kurze Rueckmeldung beim Antippen, wie ein Symbol, das sich eindrueckt */ .programm:active img{transform:scale(.93);transition-duration:.08s} .dock a:active,.dock .dock-schalter:active{transform:scale(.94)} .dock a,.dock .dock-schalter{transition:background .18s,transform .12s} @media(prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none} .programm:active img,.dock a:active{transform:none} } /* Ersatz fuer Browser ohne View-Transitions (derzeit Firefox): der Inhalt der Unterseiten faehrt beim Laden selbst auf. Uebernimmt der Browser die Ueberblendung, setzt das Skript oben eine Klasse und diese Regel entfaellt, damit sich nichts doppelt bewegt. */ /* Die Animation haengt an einer Klasse, die das Skript setzt und nach kurzer Zeit wieder entfernt. Grund: eine pausierte Animation haelt ihren ersten Bildpunkt fest, und der ist durchsichtig. Ohne diese Bremse bliebe der Inhalt unsichtbar, sobald die Animation nicht anlaeuft, etwa in einem Hintergrund-Tab. Ohne Skript laeuft gar keine Animation und alles steht da. */ .app-startet{animation:app-start .38s cubic-bezier(.2,.85,.25,1)} @keyframes app-start{ from{opacity:0;transform:scale(.94)}} @media(prefers-reduced-motion:reduce){ .app-startet{animation:none} } /* App-Seiten: Kopfzeile mit Symbol, wie in einer geoeffneten Anwendung */ .app-marke{display:flex;align-items:center;gap:.85rem;margin:0} .app-marke img{width:2.9rem;height:2.9rem;border-radius:22.5%;display:block;background:#fff; box-shadow:0 1px 2px rgba(26,32,44,.14),0 8px 20px -10px rgba(26,32,44,.35)} .app-marke span{font-size:1.05rem;font-weight:600;letter-spacing:-.02em} /* Verweis auf die jeweils andere App */ .app-weiter{display:flex;align-items:center;gap:1.1rem;text-decoration:none;color:var(--ink); border:1px solid var(--ink-16);padding:1.2rem 1.4rem; transition:background .2s,border-color .2s} .app-weiter:hover{background:var(--surface);border-color:var(--ink-16)} .app-weiter img{width:3.1rem;height:3.1rem;border-radius:22.5%;flex:none;background:#fff; box-shadow:0 1px 2px rgba(26,32,44,.12)} .app-weiter span{display:flex;flex-direction:column;gap:.15rem;line-height:1.4;flex:1} .app-weiter strong{font-weight:600;letter-spacing:-.01em} .app-weiter span{color:var(--ink-72);font-size:.95rem} .app-weiter strong{color:var(--ink);font-size:1.02rem} .app-weiter i{font-style:normal;color:var(--ink-56);transition:transform .2s,color .2s} .app-weiter:hover i{transform:translateX(.25rem);color:var(--accent)} /* Die Warteliste im dunklen Abschnitt braucht keinen eigenen Rahmen */ .on-dark .nl-block{border:0;padding:0;margin-top:1.8rem} .on-dark .nl-block > .mono.label,.on-dark .nl-block h3{display:none} /* Auf den App-Seiten traegt das Bild, nicht die Schriftgroesse. Die Ueberschrift faellt deshalb kleiner aus als auf den Textseiten und bleibt zweizeilig. */ .lufy-trail-hero h1{font-size:clamp(2.3rem,5vw,4.3rem);line-height:1.02;max-width:24ch} .lufy-trail-hero .lede{max-width:42ch} /* ------------------------------------------------------------------------ Jede Seite ist ein Fenster auf dem Schreibtisch Hinter allen Seiten liegt dasselbe Wallpaper. Oben die Menueleiste, unten der Fussstreifen, dazwischen ein Fenster mit Titelzeile, in dem der Inhalt rollt. Am Telefon faellt der Fensterrahmen weg und die Seite rollt wie gewohnt: ein festgenagelter Fuss frisst dort zu viel Bild, und die Adressleiste macht 100svh unzuverlaessig. ------------------------------------------------------------------------ */ /* Das Wallpaper gilt jetzt fuer alle Seiten, nicht nur die Startseite. */ body{ background-image: linear-gradient(to bottom, rgba(18,23,31,.34) 0%, rgba(18,23,31,0) 18%, rgba(18,23,31,0) 58%, rgba(18,23,31,.6) 100%), url(../img/wallpaper.webp); background-size:cover,cover; background-position:center,right center; background-attachment:fixed,fixed; background-color:#232a33;background-repeat:no-repeat,no-repeat} @media(min-resolution:1.5dppx) and (min-width:901px){ body{background-image: linear-gradient(to bottom, rgba(18,23,31,.34) 0%, rgba(18,23,31,0) 18%, rgba(18,23,31,0) 58%, rgba(18,23,31,.6) 100%), url(../img/wallpaper-2x.webp)} } @media(max-width:900px){ body{background-image: linear-gradient(to bottom, rgba(18,23,31,.34) 0%, rgba(18,23,31,0) 18%, rgba(18,23,31,0) 58%, rgba(18,23,31,.6) 100%), url(../img/wallpaper-klein.webp); background-attachment:scroll,scroll; background-position:center,center 64%} } /* Menueleiste und Fussstreifen liegen auf allen Seiten auf dem Bild. */ .lufy-header{background:rgba(20,25,34,.42);backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.14)} .lufy-header.scrolled{border-bottom-color:rgba(255,255,255,.14)} .brand{color:#fff} .lufy-header .wp-block-navigation a.wp-block-navigation-item__content{color:#fff} .lufy-header .wp-block-navigation a.wp-block-navigation-item__content:hover{color:rgba(255,255,255,.72)} .leiste-rechts{display:flex;color:rgba(255,255,255,.72)} .lufy-fuss{padding:0 2.4rem} .lufy-fuss .foot-raster{display:none} .lufy-fuss>*{max-width:none} .foot-meta-zeile{margin-top:0;padding-top:.9rem;padding-bottom:.9rem; border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.62)} .foot-meta-zeile a:hover{color:#fff} .zum-anfang{display:none} @media(min-width:901px){ html,body{height:100%;overflow:hidden} .wp-site-blocks{height:100svh;display:flex;flex-direction:column;min-height:0} .wp-site-blocks > *{margin-block:0} .wp-site-blocks > header,.wp-site-blocks > footer{flex:none} .lufy-header{position:static;inset:auto} .wp-site-blocks > main{flex:1 1 auto;min-height:0;display:flex;padding:0} /* Das Fenster fuellt den Platz zwischen Kopf und Fuss vollstaendig. Kein Rand, keine Rundung: das Wallpaper sieht man nur noch hinter Kopfzeile und Fussstreifen. */ .app-fenster{flex:1;min-height:0;display:flex;flex-direction:column; background:var(--base);border:0;border-radius:0;overflow:hidden} .app-fenster > .fenster-leiste{flex:none} /* container-type gibt dem Hero darin einen Hoehenbezug: 100cqh ist die sichtbare Fensterhoehe. Ohne das haengt min-height:100% in der Luft, weil die Bloecke dazwischen keine eigene Hoehe haben. */ .fenster-rolle{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; container-type:size} /* Die Startseite braucht kein Fenster: der Schreibtisch ist der Inhalt. Er fuellt den Platz zwischen Menueleiste und Fussstreifen ganz aus, damit das Dock unten sitzt und nicht in der Luft haengt. */ .home .wp-site-blocks > main{padding:0;display:block;overflow:hidden;position:relative} /* static, damit sich das Dock unten am Inhaltsbereich ausrichtet und nicht an der Unterkante des Schreibtischs. */ .home .schreibtisch{min-height:100%;height:auto;padding-bottom:7rem;position:static} /* Das Dock haengt am Inhaltsbereich, nicht am Schreibtisch. So sitzt es immer knapp ueber dem Fussstreifen, egal wie hoch der Tisch rechnet. */ .home .dock{position:absolute;bottom:1.5rem;top:auto} } /* Der Inhalt richtet sich nach der Fensterbreite, nicht nach der Bildschirmbreite. Ohne das ragt der randlose Hero um sein Innenmass ueber das Fenster hinaus und erzeugt einen Rollbalken zur Seite. */ @media(min-width:901px){ /* Nur der randlose Hero braucht die Korrektur: er rechnet mit content-box und ragt sonst um sein Innenmass ueber die Fensterbreite hinaus. Die uebrigen Abschnitte bekommen ihre Satzbreite von WordPress und duerfen hier nicht ueberschrieben werden, sonst laufen Lesespalten auf volle Breite auf. */ .fenster-rolle .lufy-trail-hero > .wp-block-group{ max-width:min(var(--maxw),100%);box-sizing:border-box} /* Der Hero fuellt das Fenster, wie eine App, die aufgeht. Im Fenster traegt das Bild, nicht die Schriftgroesse: die Ueberschrift faellt kleiner aus als auf einer Seite ueber die volle Bildschirmhoehe. */ .fenster-rolle .lufy-hero{min-height:100cqh} /* Im Fenster sitzt der Inhalt mittig zwischen Titelzeile und Fuss, nicht oben angeschlagen: sonst bleibt unten deutlich mehr Luft als oben. */ .fenster-rolle .lufy-hero.hero-oben{padding-top:3.5rem;padding-bottom:3.5rem; justify-content:center} .fenster-rolle .lufy-hero h1{font-size:clamp(2.3rem,5vw,4.3rem);line-height:1.02} /* Die festen Mindesthoehen aus dem alten Theme sorgten dafuer, dass die Heros verschiedener Seiten auf gleicher Hoehe standen. Im Fenster ist jede Seite fuer sich, und die Reserve wuerde nur Platz fressen. */ } /* Kopf und Fuss sind auf jeder Seite gleich: gleiche Hoehe, gleiche Breite, gleicher durchsichtiger Grund ueber dem Wallpaper. Der Kopf laeuft dabei genauso weit nach aussen wie der Fussstreifen. */ .lufy-header > .wp-block-group{max-width:none;margin-inline:0;box-sizing:border-box; padding:.5rem 2.4rem} .lufy-fuss{background:transparent} @media(max-width:900px){ .lufy-header > .wp-block-group{padding-inline:1.25rem} } /* Der rote Knopf schliesst das Fenster: zurueck auf den Schreibtisch. Ohne Menuepunkte im Kopf ist das neben der Wortmarke der Weg dorthin. */ .ampel.schliessen{cursor:pointer;text-decoration:none; padding:.35rem;margin:-.35rem;border-radius:.4rem;transition:background .18s} .ampel.schliessen:hover{background:rgba(26,32,44,.07)} .ampel.schliessen:hover i:first-child{background:var(--accent-lt)} .ampel.schliessen:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* Am Telefon rueckt alles gleich weit ein. Steht am Ende, damit es die Kurzform-Regeln weiter oben sicher aussticht. */ @media(max-width:900px){ .lufy-header > .wp-block-group,.lufy-fuss,.home .schreibtisch{padding-inline:1.25rem} } /* Die Titelzeile der Seitenfenster faellt flacher aus als die des readme- Fensters auf dem Schreibtisch und flieht seitlich mit Wortmarke und Fusszeile. */ /* Feste 30 Pixel einschliesslich Trennlinie, damit die Zeile unabhaengig von Schriftgroesse und Zeilenhoehe genau diese Hoehe behaelt. */ .app-fenster > .fenster-leiste{height:30px;box-sizing:border-box;padding:0 2.4rem} .app-fenster > .fenster-leiste .ampel i{width:.58rem;height:.58rem} .app-fenster > .fenster-leiste .ampel{gap:.34rem} .app-fenster > .fenster-leiste .fenster-name{font-size:.72rem;margin:0;line-height:1.3} .app-fenster > .fenster-leiste .ampel.schliessen{padding:.25rem;margin:-.25rem} @media(max-width:900px){ .app-fenster > .fenster-leiste{padding-inline:1.25rem} } /* Rechtsseiten: schmale Lesespalte, kompakter Einstieg statt bildschirmhohem Hero. Wer das Impressum sucht, will nicht erst scrollen. */ .recht-kopf{padding-block:3.5rem 2rem} .recht-kopf h1{font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:1rem 0 1.2rem} .h-md{font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.015em;line-height:1.25} /* Die Rechtsseiten sind oben aus der Sammelregel ausgenommen und bringen ihre Satzbreite selbst mit. Linksbuendig, damit der Text mit der Ueberschrift fluchtet statt in der Mitte zu schwimmen. */ .recht-text > *,.recht-kopf > *{max-width:46rem;margin-inline:0} .recht-kopf h1{max-width:none} .recht-text p{color:var(--ink-72)} .recht-text a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em} .recht-text .h-md{color:var(--ink)} /* ------------------------------------------------------------------------ Kleines Fenster fuer die Profile Liegt zusammengeklappt im Dokument und wird ueber den Dock-Schalter eingeblendet. Es schwebt ueber dem Schreibtisch, nicht im Textfluss. ------------------------------------------------------------------------ */ .fenster[hidden]{display:none} .dock-schalter{font:inherit;background:none;border:0;cursor:pointer} .dock .dock-schalter[aria-expanded="true"]{background:rgba(255,255,255,.2)} .fenster-socials{position:absolute;z-index:4; /* Ruhelage links unten, aber frei vom Rand: die Breite rechnet aus der Mitte, die Hoehe vom unteren Rand. So bleibt der Abstand zum Dock auf jedem Bildschirm gleich. max() faengt schmale Fenster ab. */ left:max(9.5rem,calc(50% - 32.8rem));bottom:7.3rem;top:auto; width:min(21rem,calc(100% - 4.8rem));max-width:none;margin:0; border:1px solid var(--ink-16);border-radius:.7rem;overflow:hidden; background:var(--base); box-shadow:0 2px 8px rgba(0,0,0,.22),0 34px 70px -28px rgba(0,0,0,.7)} .fenster-socials .fenster-leiste{cursor:grab} .fenster-socials.wird-gezogen .fenster-leiste{cursor:grabbing} .fenster-socials .fenster-inhalt{padding:.5rem} .profile{list-style:none;margin:0;padding:0} .profile a{display:grid;grid-template-columns:2.1rem 1fr;grid-template-rows:auto auto; gap:0 .8rem;align-items:center;padding:.6rem .7rem;border-radius:.5rem; text-decoration:none;color:var(--ink);transition:background .18s} .profile a:hover,.profile a:focus-visible{background:var(--surface);outline:none} .profile a:focus-visible{box-shadow:0 0 0 2px var(--accent)} .profile img{grid-row:1 / 3;width:2.1rem;height:2.1rem;border-radius:22.5%; background:#fff;box-shadow:0 1px 2px rgba(26,32,44,.12)} .profil-marke{font-size:.94rem;font-weight:600;letter-spacing:-.01em;grid-column:2} .profil-name{font-size:.82rem;color:var(--ink-56);grid-column:2; font-family:var(--wp--preset--font-family--mono)} @media(max-width:900px){ /* Ueber dem Dock, nicht darauf. */ .fenster-socials{position:fixed;left:1.25rem;right:1.25rem;bottom:13.5rem;top:auto;width:auto} } /* Nachrichtenfenster: etwas breiter als die Profilliste, sonst gleich gebaut */ .fenster-nachricht{position:absolute;z-index:4; /* Ruhelage oben, knapp links der Mitte. Die Hoehe haengt an der Kopfzeile, nicht an der Mitte: das Fenster ist hoch, auf einem flachen Bildschirm soll es nicht nach unten wandern. */ left:max(1.5rem,calc(50% - 14.4rem));top:2rem;bottom:auto; width:min(26rem,calc(100% - 4.8rem));max-width:none;margin:0; border:1px solid var(--ink-16);border-radius:.7rem;overflow:hidden; background:var(--base); box-shadow:0 2px 8px rgba(0,0,0,.22),0 34px 70px -28px rgba(0,0,0,.7)} .fenster-nachricht .fenster-leiste{cursor:grab} .fenster-nachricht.wird-gezogen .fenster-leiste{cursor:grabbing} .fenster-nachricht .fenster-inhalt{padding:1.2rem} .nachricht-form .feld{margin:0 0 .8rem;position:relative} .nachricht-form .feld > label{position:absolute;top:1px;left:1px;margin:0; padding:.7rem .9rem;font-size:.92rem;font-weight:400;line-height:1.5; color:var(--ink-56);pointer-events:none;transition:opacity .15s} .nachricht-form .feld > input:not(:placeholder-shown) ~ label, .nachricht-form .feld > textarea:not(:placeholder-shown) ~ label{opacity:0} .nachricht-form input[type=text],.nachricht-form input[type=email], .nachricht-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:.92rem; line-height:1.5;color:var(--ink);background:var(--base); border:1px solid var(--ink-16);border-radius:0;padding:.7rem .9rem; transition:border-color .2s} .nachricht-form textarea{resize:vertical;min-height:6.5rem;display:block} .nachricht-form input:focus,.nachricht-form textarea:focus{outline:none;border-color:var(--ink)} .nachricht-form [aria-invalid=true]{border-color:var(--accent)} .nachricht-form .feld-haken{margin:.9rem 0 1rem} .nachricht-form .feld-haken > label{position:static;padding:0;pointer-events:auto; font-size:.8rem;line-height:1.4;gap:.6rem} .nachricht-form .formular-senden{padding:.7rem 1.5rem;font-size:.92rem;width:100%} .nachricht-danke{border-left:2px solid var(--accent);padding-left:1.1rem} .nachricht-danke p:last-child{margin:.5rem 0 0;color:var(--ink-72);line-height:1.5} @media(max-width:900px){ .fenster-nachricht{position:fixed;left:1.25rem;right:1.25rem;bottom:13.5rem;top:auto;width:auto} } /* Im Fenster darf das Polaroid nicht hoeher werden als der sichtbare Bereich, sonst muss man auf einer kurzen Seite scrollen. */ @media(min-width:901px){ /* Im Fenster faellt der Hochzug weg: er stammt aus der Zeit, als der Hero die volle Bildschirmhoehe hatte. Hier schoebe er das Bild oben aus dem sichtbaren Bereich. */ .fenster-rolle .lufy-hero .wp-block-column > .polaroid{margin-top:0} .fenster-rolle .polaroid{max-width:24rem;margin-inline:auto} /* Text und Bild stehen mittig nebeneinander, nicht oben buendig. */ .fenster-rolle .lufy-hero .wp-block-columns{align-items:center} } /* ------------------------------------------------------------------------ Geraetebild im Hero der App-Seiten Wort links, die beiden Telefone rechts. Das Bild steht auf Weiss und bringt seinen Schatten mit, deshalb kein Rahmen und kein Hintergrund. Die Hoehe haengt am sichtbaren Bereich des Fensters, sonst waechst das Bild aus der Seite heraus und man muesste im Hero scrollen. ------------------------------------------------------------------------ */ .hero-zwei{display:grid;gap:2rem;align-items:center} .hero-wort{min-width:0} .hero-geraete{margin:0;min-width:0;display:flex;justify-content:center} .hero-geraete img{display:block;width:auto;max-width:100%;height:auto;max-height:60vh} @media(min-width:901px){ .hero-zwei{grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(2rem,4vw,4.5rem)} .fenster-rolle .hero-geraete img{max-height:calc(100cqh - 8rem)} } @media(min-width:901px){ /* In der schmaleren Spalte muss die Schrift zurueck, sonst bricht die Zeile mitten im Sprachenpaar um. */ .fenster-rolle .hero-zwei h1{font-size:clamp(2rem,3.2vw,3.3rem)} .hero-zwei .lede{max-width:34rem} } /* Ohne Bildspur darf im Hero wieder markiert und geklickt werden. */ .hero-zwei{pointer-events:auto} @media(min-width:901px){ /* Das Wort ruecken wir nach aussen, bis es unter der Marke in der Kopfzeile steht, und ein Stueck nach oben. Das Bild folgt mit. */ .fenster-rolle .lufy-trail-hero:has(.hero-zwei) > .wp-block-group{ max-width:1700px;margin-inline:auto;padding-inline:2.4rem} .hero-zwei .hero-wort{transform:translateY(-2.5rem)} } /* ------------------------------------------------------------------------ Bildband Ein Streifen kleiner Bilder, der in einer Endlosschleife von rechts nach links laeuft. Die Kacheln stehen doppelt im Dokument: die zweite Haelfte ist die Kopie, die den Sprung am Ende unsichtbar macht. Beim Zeigen auf ein Bild haelt das Band an, sonst wandert das Bild unter dem Zeiger weg und waere gross nicht zu betrachten. ------------------------------------------------------------------------ */ .bildband{position:relative;overflow:hidden;padding-block:5rem; background:var(--base)} .band-lauf{display:flex;gap:1rem;width:max-content; animation:band-zug var(--band-dauer,60s) linear infinite} .band-bild{position:relative;margin:0;flex:none;width:150px; transition:transform .5s cubic-bezier(.2,.75,.25,1)} .band-bild img{display:block;width:100%;height:190px;object-fit:cover; background:var(--surface)} .band-bild:hover,.band-bild:focus-within{transform:scale(1.8);z-index:3} .bildband:hover .band-lauf,.bildband:focus-within .band-lauf{animation-play-state:paused} @keyframes band-zug{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media(max-width:900px){ .bildband{padding-block:3rem} .band-bild{width:118px} .band-bild img{height:150px} /* Am Telefon gibt es kein Zeigen: das Band laeuft einfach. */ .band-bild:hover{transform:none} } @media(prefers-reduced-motion:reduce){ .band-lauf{animation:none} .bildband{overflow-x:auto;overscroll-behavior-x:contain} } @media(max-width:900px){ /* Am Telefon war die Hero-Ueberschrift so gross, dass "Türkisch ↔ Deutsch," mitten im Sprachenpaar umbrach. Die Verkleinerung gab es bisher nur auf dem Schreibtisch. */ .hero-zwei h1{font-size:clamp(1.75rem,7.2vw,2.4rem)} .hero-zwei .lede{max-width:none} } /* ======================================================================== TELEFON Der Schreibtisch wird zum Startbildschirm, die Unterseiten werden zu Apps mit einer Zurueck-Leiste. Auf dem Schreibtisch braucht es beides nicht, dort erledigt das die Fenstermetapher. ======================================================================== */ /* Das Wort neben dem Schliessknopf gibt es nur am Telefon. */ .zurueck-wort{display:none} @media(max-width:900px){ /* ---------- Startbildschirm ---------- Symbole oben, wie auf dem iPhone in einem Raster aus vier Spalten. Das Newsletter-Fenster faellt als Widget nach unten, dazwischen bleibt das Hintergrundbild sichtbar. */ .home .schreibtisch{ display:flex;flex-direction:column;gap:1.4rem; padding:calc(3.4rem + 1.4rem) 1.25rem 6.6rem; min-height:calc(100svh - 3.4rem - 4.8rem)} .programme{order:1;display:grid;grid-template-columns:repeat(4,1fr); gap:1.5rem .3rem;justify-items:center;flex-direction:row} .programm{width:100%;padding:.3rem .1rem;margin-left:0;gap:.5rem} .programm img{width:min(4.3rem,100%);height:auto;aspect-ratio:1} .programm span{font-size:.74rem;text-shadow:0 1px 3px rgba(0,0,0,.5);color:#fff} /* Aus dem Fenster wird das Widget: es sitzt unten, nicht oben. */ .home .schreibtisch > .fenster{order:2;margin-top:auto} /* ---------- Unterseiten ---------- Die Titelzeile bleibt, sie wird nur zur Zurueck-Leiste. Die drei Ampelpunkte ergeben am Telefon keinen Sinn, der Weg zurueck schon. */ /* Die Kopfzeile schwebt fest ueber der Seite. Die Zurueck-Leiste haengt sich direkt darunter und bleibt beim Scrollen stehen, sonst laege sie dahinter und waere nie zu sehen. */ .app-fenster > .fenster-leiste{ display:flex;align-items:center;height:auto; position:sticky;top:3.375rem;z-index:50; padding:.45rem 1.25rem;background:var(--base); border-bottom:1px solid var(--ink-16)} .app-fenster > .fenster-leiste .ampel i{display:none} .app-fenster > .fenster-leiste .fenster-name{display:none} .app-fenster > .fenster-leiste .ampel.schliessen{ display:inline-flex;align-items:center;gap:.25rem; font-family:var(--wp--preset--font-family--mono);font-size:.78rem; color:var(--ink-72);text-decoration:none;padding:.3rem .2rem;margin:0} .app-fenster > .fenster-leiste .ampel.schliessen:active{color:var(--ink)} .zurueck-wort{display:inline} .zurueck-wort::before{content:"‹";margin-right:.3rem;font-size:1.2em;line-height:0} } @media(max-width:900px){ /* Als Widget muss das Fenster auf einen Bildschirm passen, sonst scrollt der Startbildschirm — und ein Startbildschirm, der scrollt, ist keiner. Der erklaerende Absatz entfaellt deshalb am Telefon: was die beiden Apps sind, sagen die Symbole darueber. */ .home .schreibtisch > .fenster > .fenster-inhalt > p{display:none} .home .schreibtisch > .fenster .fenster-inhalt{padding:1.15rem} .home .schreibtisch > .fenster .fenster-inhalt h1{font-size:1.34rem} } @media(max-width:900px){ /* Die 9rem oben waren der Platzhalter fuer die schwebende Kopfzeile. Diese Aufgabe hat jetzt die Zurueck-Leiste, der Abstand kann weg. */ .app-fenster .lufy-hero.hero-oben{padding-top:2.2rem} } @media(max-width:900px){ /* Der Startbildschirm zeigt nur noch Symbole und Dock. Eintragen kann man sich auf den beiden App-Seiten, dort steht das Formular ohnehin. */ /* Gemeint ist ausdruecklich nur das Newsletter-Fenster: Socials und Contact sind ebenfalls .fenster und muessen sich weiter oeffnen. */ .home .schreibtisch > .wp-block-group.fenster{display:none} /* Das Dock: kompakter und mit gleichen Abstaenden. Vorher galt flex:1 nur fuer den Verweis About, nicht fuer die beiden Schalter daneben — About bekam dadurch den ganzen Rest der Zeile. */ .dock{left:50%;right:auto;transform:translateX(-50%); justify-content:center;gap:.1rem;bottom:1.2rem;padding:.3rem} .dock a,.dock .dock-schalter{width:auto;flex:none; padding:.38rem .8rem .34rem;gap:.22rem;border-radius:.65rem} .dock svg{width:1.18rem;height:1.18rem} .dock span{font-size:.63rem;line-height:1.25} } @media(max-width:900px){ /* ---------- Startbildschirm auf volle Geraetehoehe ---------- Vorher blieb oben eine Luecke von 24px stehen (WordPress' Standardabstand zwischen den Bloecken) und unten sass die Fusszeile als eigener Streifen mit Trennlinie darunter. Jetzt traegt der Bildschirm beides: das Geruest ist eine Spalte ueber die volle Hoehe, der Schreibtisch dehnt sich, und die Pflichtangaben stehen als Zeile auf dem Bild. dvh statt vh, damit die Adresszeile von iOS nicht mitzaehlt. */ .home .wp-site-blocks{min-height:100svh;min-height:100dvh; display:flex;flex-direction:column} .home .wp-site-blocks > *{margin-block:0} /* main als Spalte, nicht als Zeile: dann liegt die Hoehe auf der Hauptachse und flex:1 dehnt den Schreibtisch verlaesslich. Ueber align-items:stretch ginge es auch, das greift hier aber nicht. */ .home .wp-site-blocks > main{flex:1 1 auto;min-height:0; display:flex;flex-direction:column} /* Zwischen main und Schreibtisch liegt noch WordPress' Inhaltsblock. Ohne ihn reisst die Kette und der Schreibtisch bleibt inhaltshoch. */ .home .wp-site-blocks > main > .wp-block-post-content{ flex:1 1 auto;min-height:0;display:flex;flex-direction:column} /* margin-inline:auto aus der Grundregel wuerde den Schreibtisch im Spaltenlayout auf Inhaltsbreite schrumpfen und mittig setzen. Im Querformat sass er dadurch als schmale Saeule in der Mitte. */ .home .schreibtisch{flex:1 1 auto;min-height:0;width:100%;margin-inline:0} .home .lufy-fuss{flex:none; padding-block:0 calc(.7rem + env(safe-area-inset-bottom,0px))} .home .foot-meta-zeile{border-top:0;padding-block:0; justify-content:center;gap:.2rem .9rem;font-size:.6rem; color:rgba(255,255,255,.5)} .home .dock{bottom:calc(1.1rem + env(safe-area-inset-bottom,0px))} } @media(max-width:900px) and (orientation:landscape){ /* Im Querformat wuerden die vier Spalten ueber die ganze Breite gezogen und die zwei Symbole staenden weit auseinander. Das Raster bleibt so breit wie im Hochformat, die Symbole also beieinander. */ .programme{max-width:22rem;margin-inline:0 auto} } @media(max-width:900px){ /* Pflichtangaben in eine Zeile: ohne Sperrsatz, enger gesetzt und ohne Umbruch. Die Zeile steht auf dem Bild, sie soll die Flaeche nicht in zwei Baender teilen. */ .home .foot-meta-zeile{flex-wrap:nowrap;gap:.55rem;font-size:.56rem; letter-spacing:.05em;white-space:nowrap} /* Die beiden ausklappbaren Fenster sassen weit ueber dem Dock, seit das Dock geschrumpft ist. Sie ruecken nach. */ .fenster-socials,.fenster-nachricht{bottom:9rem} } @media(max-width:374px){ /* Unter 375 Punkten reicht die Zeile nicht mehr fuer alle vier Angaben. Die Herkunft faellt zuerst, sie steht ohnehin im Impressum. Bei 375 bleiben 17 Punkte Luft, das genuegt. */ .home .foot-meta-zeile > span:nth-child(2){display:none} } /* Sicherheitsnetz: Selbst wenn eine fremde Schrift die Zeile breiter setzt, darf sie nie die ganze Seite breiter machen als das Geraet. */ @media(max-width:900px){ .home .lufy-fuss{overflow:hidden} } @media(max-width:900px) and (orientation:portrait){ /* Hochkant wurde bisher ein Querformatbild mit 1100 Pixeln Breite auf ein schmales, hohes Fenster gezogen: rund vierfache Vergroesserung, daher die Unschaerfe. Jetzt liegt derselbe Ausschnitt hochkant und in voller Aufloesung bereit, 1170 x 2544 — auf den meisten Telefonen Pixel auf Pixel, ohne Vergroesserung. */ /* body.home muss mitgenannt werden: die Regel der Startseite ist spezifischer und schluege ein blosses body sonst. */ body,body.home{background-image: linear-gradient(to bottom, rgba(18,23,31,.34) 0%, rgba(18,23,31,0) 18%, rgba(18,23,31,0) 58%, rgba(18,23,31,.6) 100%), url(../img/wallpaper-hoch.webp); background-position:center,center} } /* ------------------------------------------------------------------------ Schliessknopf der schwebenden Fenster Er war nie gestaltet: ein blanker