/* Premium Escapes — Handschrift der andregebel-Seite, auf Fotos hin gebaut. */ :root{ --schrift-text:'Archivo',system-ui,sans-serif; --schrift-display:'Libre Baskerville',Georgia,serif; --grund:#F6F3ED; --grund-2:#EFEAE0; --grund-3:#E7E1D4; --text:#11211F; --fliess:#4E5E5A; --meta:#586560; --linie:#DED8CC; --gold:#7C5F1F; --gold-hell:#C9A75B; --band:#11211F; --band-text:#EDE9DF; --band-leise:#9BA79F; --rand:clamp(20px,5vw,72px); --kopf:clamp(62px,7vw,84px); /* Die WIRKLICHE Hoehe der festen Kopfleiste: Innenabstand oben + Name + Unterzeile + Innenabstand unten. --kopf allein ist zu klein - damit lag der Seitentitel hinter der Leiste (Befund 06.09.2026). */ --kopf-hoehe:clamp(104px,13vw,140px); /* Die Lesespalte. Sie setzt Text, Zwischenueberschriften, Trenner und den Beitragsfuss gemeinsam, damit alles auf derselben Kante steht. Dani, 09.09.2026: 620px bei 15,5px Libre Baskerville. ‼ 10.09.2026 auf 700px, zusammen mit --galerie und der Schriftgroesse in .text p - siehe dort. ANDRE: "Auf Desktop finde ich den Unterschied zwischen den Bildgalerien und der Textlaenge zu extrem (ist wie ein Bruch). Textgroesse vielleicht vergroessern, damit es nicht textlich zu duenn wirkt?" Vier Fassungen gerechnet und gerendert, Dani waehlte C. Das Zeilenmass bleibt dabei bei 69 Zeichen wie bisher - es waechst nur der Grad, nicht die Zeile. Zum Zurueckdrehen: 620px. */ --spalte:700px; --breit:1320px; /* Kacheln, Abschnittskoepfe, Fuss, Blaetterleiste */ /* Die Breite der Bildgalerien IM BEITRAG. Vorher lief sie ueber --breit mit, also 1320px = 1176px Inhalt gegen 620px Text: ein Sprung von 1,90:1, und genau der war Andres "Bruch". Jetzt 1100px = 956px Inhalt gegen 700px Text, also 1,37:1. Nur die Galerien im Beitrag haengen daran - Kacheln, Fuss und Blaetterleiste bleiben auf --breit. Zum Zurueckdrehen: var(--breit). */ --galerie:1100px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--grund);color:var(--text); font-family:var(--schrift-text);font-size:17px;line-height:1.68; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} .nur-vorlese{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sprung{position:absolute;left:-999px;top:0;background:var(--band);color:var(--band-text);padding:10px 16px;z-index:120} .sprung:focus{left:8px;top:8px} /* ---------------------------------------------------------- Kopfleiste 1:1 die Werte der laufenden andregebel.de-Seite, am 05.09.2026 im Browser ausgemessen (nicht aus dem Quelltext geraten): Kopf Polsterung 44px 72px 30px Name Archivo 600, 40px, Laufweite -0.8px, Farbe #F7F3EA ueber Bild Unterzeile Archivo 500, 12.5px, Laufweite 1.2px MENUE Archivo 600, 17px, Laufweite 2.6px, Versalien Striche 38px breit, 1px hoch, Abstand 6px, unterer auf 62 % gestaucht Seitenfeld 360px breit, rechts, Grund #F7F3EA, Polsterung 46px 44px 45px Hintergrund rgba(17,33,31,.5) Menuelink Archivo 600, 13px, Laufweite 1.8px, Versalien, #4E5E5A, Polsterung 16px 0, Trennlinie 1px #DED8CC Kontaktlink Gold #7C5F1F Mailzeile Libre Baskerville, bis 21px */ .kopf{ position:fixed;inset:0 0 auto 0;z-index:100; display:flex;align-items:flex-start;justify-content:space-between; gap:clamp(20px,3vw,44px); padding:clamp(20px,3vw,44px) var(--rand) clamp(16px,2vw,30px); background:transparent;transition:background .3s ease,box-shadow .3s ease; } .kopf--fest{background:var(--grund);box-shadow:0 1px 0 var(--linie)} .kopf__logo{display:flex;flex-direction:column;gap:8px;text-decoration:none; color:var(--hell,#F7F3EA);min-width:0;padding:9px 0;margin:-9px 0; text-shadow:0 1px 14px rgba(17,33,31,.5)} .kopf--fest .kopf__logo{color:var(--text);text-shadow:none} .kopf__name{font-family:var(--schrift-display);font-weight:400; font-size:clamp(21px,2.6vw,34px);letter-spacing:.05em;line-height:1; text-transform:uppercase;white-space:nowrap} .kopf__unterzeile{font-size:12.5px;font-weight:500;letter-spacing:1.2px; color:#E7E1D4} .kopf--fest .kopf__unterzeile{color:var(--meta)} .kopf__logo:hover .kopf__name{color:var(--gold-hell)} .kopf--fest .kopf__logo:hover .kopf__name{color:var(--gold)} .kopf__knopf{display:flex;align-items:center;gap:13px;cursor:pointer; padding:12px 6px;margin-right:-6px;background:none;border:0; font-family:var(--schrift-text);flex:none} .kopf__label{font-size:17px;font-weight:600;letter-spacing:2.6px; text-transform:uppercase;color:#F7F3EA;text-shadow:0 1px 10px rgba(17,33,31,.55); transition:color .25s ease} .kopf--fest .kopf__label{color:var(--text);text-shadow:none} .kopf__knopf:hover .kopf__label{color:var(--gold-hell)} .kopf--fest .kopf__knopf:hover .kopf__label{color:var(--gold)} .kopf__striche{display:flex;flex-direction:column;gap:6px;width:38px} .kopf__strich{height:1px;background:#F7F3EA;transform-origin:right; transition:background .25s ease,transform .35s cubic-bezier(.22,1,.36,1)} .kopf--fest .kopf__strich{background:var(--text)} .kopf__strich:last-child{transform:scaleX(.62)} .kopf__knopf:hover .kopf__strich:last-child{transform:scaleX(1)} .kopf__knopf:hover .kopf__strich{background:var(--gold-hell)} .kopf--fest .kopf__knopf:hover .kopf__strich{background:var(--gold)} @media (max-width:640px){ .kopf__unterzeile{font-size:11px;letter-spacing:.8px} .kopf__label{font-size:15px;letter-spacing:2.2px} .kopf__striche{width:32px} } /* Menue: helles Seitenfeld rechts - genau wie auf andregebel.de */ .menue-hintergrund{position:fixed;inset:0;z-index:105;background:rgba(17,33,31,.5); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .45s ease,visibility 0s linear .45s} .menue-hintergrund[data-offen="ja"]{opacity:1;visibility:visible;pointer-events:auto; transition:opacity .45s ease,visibility 0s} .menue{position:fixed;inset:0 0 0 auto;width:360px;max-width:88vw;z-index:110; background:#F7F3EA;display:flex;flex-direction:column; padding:46px 44px 45px;overflow-y:auto; transform:translateX(100%);visibility:hidden; transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s} .menue[data-offen="ja"]{transform:none;visibility:visible; transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s} .menue__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:20px} .menue__logo{display:flex;flex-direction:column;gap:8px;text-decoration:none; color:var(--text);padding:11px 0;margin:-11px 0} .menue__name{font-family:var(--schrift-display);font-weight:400;font-size:19px; letter-spacing:.05em;text-transform:uppercase;line-height:1.15} /* Die Unterzeile "Selection of the best hotels in the world" ist am 10.09.2026 aus dem Klappmenue genommen worden (Dani: "kann raus"). Sie steht weiter im Fuss unter der Wortmarke. Die Regel bleibt stehen - zum Zurueckholen genuegt die eine Zeile in bau.py, menue__logo. */ .menue__unterzeile{font-size:11.5px;font-weight:500;letter-spacing:1.2px;color:var(--meta)} .menue__logo:hover .menue__name{color:var(--gold)} .menue__zu{display:flex;align-items:center;gap:14px;cursor:pointer;background:none;border:0; font-family:var(--schrift-text);font-size:11px;font-weight:600;letter-spacing:2.2px; text-transform:uppercase;color:var(--gold);padding:15px 8px 15px 0;margin:-5px 0; transition:color .25s ease;white-space:nowrap} .menue__zu:hover{color:var(--text)} .menue__links{display:flex;flex-direction:column;gap:0;margin:36px 0} .menue__link{font-family:var(--schrift-text);font-size:13px;font-weight:600; letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;padding:16px 0; color:var(--fliess);text-decoration:none;border-bottom:1px solid var(--linie); transition:color .25s ease,border-color .25s ease} .menue__link:hover,.menue__link:focus-visible{color:var(--gold);border-bottom-color:var(--gold)} .menue__fuss{margin-top:auto;padding-top:24px;border-top:1px solid var(--linie)} .menue__mail{display:inline-block;font-family:var(--schrift-display); font-size:clamp(16px,1.5vw,21px);color:var(--text);text-decoration:none; padding:10px 0;margin:-10px 0;transition:color .3s ease} .menue__mail:hover{color:var(--gold)} .menue__extern{display:flex;gap:20px;flex-wrap:wrap;list-style:none;margin:18px 0 0;padding:0; font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase} .menue__extern a{color:var(--meta);text-decoration:none;transition:color .3s ease} .menue__extern a:hover{color:var(--gold)} /* Unterste Zeile im Klappmenue: links "Alle Beitraege", rechts die Kanaele als Zeichen (10.09.2026). Die Antippflaeche ist 44 x 44 px - das Zeichen selbst ist 21 px, der Rest ist Luft. Die Zeile haengt 11 px nach rechts ueber, damit das letzte Zeichen optisch am rechten Rand steht und nicht eingerueckt. */ .menue__zeile{display:flex;align-items:center;justify-content:space-between; gap:16px;margin-right:-11px} .menue__zeile .menue__extern{margin-top:18px} .menue__sozial{display:flex;gap:2px;margin-top:18px} .menue__sozial a{display:flex;align-items:center;justify-content:center; width:44px;height:44px;color:var(--fliess);transition:color .25s ease} .menue__sozial a:hover,.menue__sozial a:focus-visible{color:var(--gold)} .menue__sozial svg{display:block} /* Der Stern in Kopfleiste und Fuss. Stand als style-Attribut in bau.py und kam damit am Server nie an (style-src 'self'); der Stern war in Wahrheit ein inline-Element und schleppte die Grundlinien-Luecke mit. 10.09.2026. */ .stern{display:block} @media (max-height:640px){ .menue{padding:22px 30px 22px} .menue__links{margin:16px 0} .menue__link{padding:11px 0;font-size:12.5px} } /* ---------------------------------------------------------- Grosse Buehne */ .buehne{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end; overflow:hidden;background:var(--band)} .buehne__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .buehne::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,16,15,.42) 0%,rgba(8,16,15,0) 34%,rgba(8,16,15,.44) 58%,rgba(8,16,15,.86) 100%)} /* Die Breitenbremse stand auf 900px - daran ist "Inn & Lodge at the Presidio, San Francisco" umgebrochen, nicht am Fenster (gemessen: 1000px noetig bei 46px). Bei 1180px stehen 28 von 31 gemessenen Titeln in einer Zeile; nur die drei Crystal-Symphony-Titel (1290 bis 1405px) brechen weiter um. Eine Zeile weniger heisst zugleich: der Block sitzt tiefer. (Dani, 10.09.2026) Zum Zurueckdrehen: max-width:900px. */ .buehne__inhalt{position:relative;z-index:2;padding:0 var(--rand) clamp(24px,2vw,28px); max-width:1180px;color:#fff} /* Ueber einem hellen Foto traegt KEINE Farbe genug Kontrast - weder helleres Gold noch Weiss (gemessen: 1,0 bzw. 1,5 : 1). Lesbar wird es nur durch einen dunklen Saum direkt an der Schrift. Dazu etwas groesser und halbfett. (Dani, 06.09.2026) */ /* Die Kategorie steht in der Zeile mit dem Datum, also im dunkelsten Teil des Verlaufs - dort traegt das Gold (6,3 : 1). Weiter oben tat es das nicht. (Dani, 06.09.2026) */ .kicker{font-weight:600;letter-spacing:.2em;color:var(--gold-hell); text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 10px rgba(0,0,0,.8)} .buehne__zeile .kicker + span{position:relative;padding-left:19px} .buehne__zeile .kicker + span::before{content:"";position:absolute;left:0;top:50%; width:7px;height:1px;background:rgba(255,255,255,.55)} /* Der Titel auf dem Bild war zu gross und stand zu weit oben: bei 1440px 62px, mittig im Foto. Jetzt 46px und durch den kleineren Abstand unten (siehe .buehne__inhalt) tiefer im Bild. Auf dem Handy aendert sich fast nichts, dort greift der Mindestwert. (Dani, 09.09.2026, Fassung B) Nachtrag 10.09.2026: der Abstand unten noch einmal von 58 auf 28px, der Block steht damit rund eine Zeile tiefer. Weniger geht nicht, sonst klebt die Kicker-Zeile am Bildrand. Zum Zurueckdrehen: clamp(30px,5.4vw,62px) und clamp(46px,7vw,92px). */ .buehne__titel{font-family:var(--schrift-display);font-weight:400; font-size:clamp(27px,3.9vw,46px);line-height:1.13;margin:0 0 16px; text-shadow:0 2px 26px rgba(0,0,0,.4)} .buehne__zeile{display:flex;flex-wrap:wrap;gap:18px;align-items:center; font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(0,0,0,.6)} .knopf{display:inline-block;margin-top:26px;padding:13px 30px;border:1px solid rgba(255,255,255,.7); color:#fff;text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase; transition:background .2s,border-color .2s,color .2s} .knopf:hover{background:#fff;color:var(--text);border-color:#fff} /* ---------------------------------------------------------- Kacheln */ .abschnitt{padding:clamp(56px,7vw,96px) var(--rand)} /* Seiten ohne grosses Bild fangen direkt unter der Kopfleiste an. */ .abschnitt--oben{padding-top:calc(var(--kopf-hoehe) + clamp(28px,3.5vw,48px))} /* Titel mittig, die Zahl darunter - wie auf Andres Seite (Dani, 06.09.2026). */ .abschnitt__kopf{max-width:var(--breit);margin:0 auto clamp(30px,4vw,48px); display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px; border-bottom:1px solid var(--linie);padding-bottom:clamp(16px,2vw,22px)} .abschnitt__titel{font-family:var(--schrift-display);font-weight:400; font-size:clamp(21px,2.6vw,30px);margin:0} .abschnitt__hinweis{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin:0} .kacheln{--luecke:clamp(22px,3vw,38px); max-width:var(--breit);margin:0 auto;display:grid;gap:var(--luecke); grid-template-columns:repeat(3,1fr)} /* Ein oder zwei Beitraege in einer Kategorie: gleiche Kachelgroesse, aber mittig. Sonst klebt die Kachel links und die leere Reihe sieht nach einem Fehler aus. ‼ Befund 09.09.2026, von Dani am Fenster entdeckt: die Regel stand in "min-width:1021px". Zwischen 641 und 1020 px galt sie deshalb NICHT - dort lag das Raster bei zwei Spalten und die eine Kachel klebte links, mit einer leeren Haelfte daneben. Sichtbar wird das schon auf einem 1160-px-Fenster mit 125 % Skalierung, also auf ganz gewoehnlichen Notebooks. Jetzt ab 641 px. Unter 641 px steht ohnehin nur eine Spalte, da ist nichts zu zentrieren. */ @media (min-width:641px){ /* Ein einziger Beitrag: groesser als eine normale Kachel, aber so, dass Bild, Titel und Datum ohne Scrollen auf den Schirm passen - zwei Drittel der Breite, mittig, flaches Bildformat. (Dani, 06.09.2026.) */ .kacheln[data-n="1"], .kacheln[data-n="2"]{ max-width:calc((var(--breit) - 2*var(--luecke))*2/3 + var(--luecke)); margin-inline:auto} .kacheln[data-n="1"]{grid-template-columns:1fr} .kacheln[data-n="1"] .kachel__rahmen{aspect-ratio:16/9} .kacheln[data-n="1"] .kachel__titel{font-size:clamp(20px,2.2vw,26px)} /* Steht nur ein Beitrag da, ist er kein Rasterelement mehr, sondern ein Einzelstueck - dann gehoert die Zeile mittig unter das Bild. Links angeschlagen sah sie aus wie eine Reihe, aus der der Rest fehlt. Dani, 09.09.2026: "sieht halt nur bei einem Beitrag bloed aus". Zum Zurueckdrehen: diese zwei Zeilen loeschen. */ .kacheln[data-n="1"] .kachel__titel, .kacheln[data-n="1"] .kachel__kicker{text-align:center} /* Zwei Beitraege: normale Kachelgroesse, nur mittig. */ .kacheln[data-n="2"]{grid-template-columns:repeat(2,1fr)} } @media (max-width:1020px){.kacheln{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.kacheln{grid-template-columns:1fr}} .kachel{display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative} .kachel__rahmen{position:relative;overflow:hidden;background:var(--grund-3);aspect-ratio:4/3} .kachel__bild{width:100%;height:100%;object-fit:cover;transition:transform .55s ease} .kachel:hover .kachel__bild{transform:scale(1.045)} .kachel__kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold); margin:16px 0 8px} .kachel__titel{font-family:var(--schrift-display);font-weight:400;font-size:20px;line-height:1.34; margin:0 0 10px} .kachel:hover .kachel__titel{color:var(--gold)} .kachel__datum{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--meta); margin:auto 0 0} /* ---------------------------------------------------------- Beitrag */ .beitrag__buehne{position:relative;min-height:min(76vh,700px);display:flex;align-items:flex-end; overflow:hidden;background:var(--band)} .beitrag__buehne .buehne__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .beitrag__buehne::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,16,15,.44) 0%,rgba(8,16,15,0) 36%,rgba(8,16,15,.34) 64%,rgba(8,16,15,.80) 100%)} .inhalt{max-width:var(--galerie);margin:0 auto;padding:clamp(46px,6vw,80px) var(--rand)} .spalte{max-width:var(--spalte);margin-left:auto;margin-right:auto} /* Andres Fliesstext, Fassung 3 (Danis Wahl vom 09.09.2026 aus drei Fassungen): Libre Baskerville statt Archivo - auf der Seite steht sonst alles in dieser Schrift, sein Text war das einzige in der zweiten. Kleiner Grad, viel Zeilenabstand, schmalere Spalte: 15,5px / 1,9 / 620px sind rund 62 Zeichen je Zeile, das ist die Breite, die sich am leichtesten liest. Farbe #46534E auf #EDE6D8 = 6,5:1 - nachgerechnet, deutlich ueber 4,5. NICHT in Gold: Gold ist auf dieser Seite die Farbe der Verweise. Stuende der ganze Text in Gold, waeren Andres Verweise nicht mehr zu erkennen. Zum Zurueckdrehen: die alte Zeile steht darunter als Kommentar. */ /* alt: .text p{margin:0 0 1.35em;color:var(--fliess);font-size:clamp(16.5px,1.15vw,18px);line-height:1.78} */ /* ‼ 10.09.2026, Andres Einwand ("wie ein Bruch", Text zu duenn gegen die Galerien): 15,5px / 1,9 -> 17,5px / 1,72, dazu die Spalte von 620 auf 700px und die Galerien von 1176 auf 956px (--spalte, --galerie). Am echten Stilblatt im Browser nachgerechnet, nicht geschaetzt: vorher 15,5px / 620px / 1176px = Sprung 1,90:1 - 69 Zeichen je Zeile jetzt 17,5px / 700px / 956px = Sprung 1,37:1 - 69 Zeichen je Zeile Das Zeilenmass bleibt also gleich, es waechst nur der Grad. Der Zeilenabstand faellt von 1,9 auf 1,72, weil er in Pixeln fast gleich bleibt (29,45 -> 30,10) - bei 1,9 waeren es 33,25px, und der Text fiele auseinander. Die untere Grenze der clamp() steigt von 15 auf 16,5px, damit auch das Handy etwas gewinnt; ab rund 1435px Fensterbreite liegen die 17,5px an. Zum Zurueckdrehen: die alte Zeile steht darunter als Kommentar. */ /* alt, 09.09.2026: .text p{margin:0 0 1.5em;color:#46534E;font-family:var(--schrift-display);font-size:clamp(15px,1.08vw,15.5px);line-height:1.9} */ .text p{margin:0 0 1.5em;color:#46534E;font-family:var(--schrift-display); font-size:clamp(16.5px,1.22vw,17.5px);line-height:1.72} .text p:last-child{margin-bottom:0} .text a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(124,95,31,.38)} .text a:hover{border-bottom-color:var(--gold)} .text strong{color:var(--text);font-weight:600} /* ‼ Fett INNERHALB eines Verweises hat die Textfarbe geerbt. Andre setzt seine Verweise fett ("turnagain", "Andre Gebel", "LEAD DIGITAL") - die sahen dadurch aus wie fett gesetzter Fliesstext mit einem Strich darunter, nicht wie Verweise. Jetzt nimmt das Fette die Farbe des Verweises an. Befund 09.09.2026, Dani: "das ist immer noch nicht schoen". */ .text a strong,.text a b{color:inherit} .marke{font-family:var(--schrift-text);font-size:12px;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);margin:clamp(34px,4vw,52px) 0 6px;display:flex;align-items:center;gap:14px} .marke::after{content:"";flex:1;height:1px;background:var(--linie)} .block{margin:clamp(34px,4.4vw,60px) 0} .block--text{margin-left:auto;margin-right:auto;max-width:var(--spalte)} .block--ueberschrift{max-width:var(--spalte);margin-left:auto;margin-right:auto} .block--ueberschrift h2{font-family:var(--schrift-display);font-weight:400; font-size:clamp(22px,2.4vw,29px);line-height:1.3;margin:0} .block--trenner{max-width:var(--spalte);margin-left:auto;margin-right:auto} .block--trenner hr{border:0;border-top:1px solid var(--linie);margin:0} .galerie{display:grid;gap:clamp(8px,1vw,14px);grid-template-columns:repeat(3,1fr)} .galerie[data-anzahl="1"]{grid-template-columns:1fr} .galerie[data-anzahl="2"],.galerie[data-anzahl="4"]{grid-template-columns:repeat(2,1fr)} @media (max-width:760px){ .galerie,.galerie[data-anzahl="2"],.galerie[data-anzahl="4"]{grid-template-columns:repeat(2,1fr)} } @media (max-width:460px){ .galerie,.galerie[data-anzahl="2"],.galerie[data-anzahl="4"]{grid-template-columns:1fr} } /* Hochformat wie auf der alten Seite: die Bilder bekommen Hoehe statt Schnitt. Gemessen am Original: Zelle rund 475 x 585 px, Verhaeltnis 0,81 -> 4/5. */ .galerie__feld{margin:0;padding:0;border:0;background:var(--grund-3);cursor:zoom-in; overflow:hidden;aspect-ratio:4/5;display:block;width:100%} .galerie[data-anzahl="1"] .galerie__feld{aspect-ratio:3/2} .galerie__feld img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .galerie__feld:hover img{transform:scale(1.04)} /* ‼ Einzelbild im Fliesstext: der Rahmen stand als hohes Hochformat um ein querformatiges Bild. Ursache ist NICHT das Layout, sondern die Inhaltsrichtlinie: style-src 'self' verwirft am Server JEDES style-Attribut. bau.py setzt auf dem Knopf style="aspect-ratio:auto", um das 4:5 der Galeriekachel aufzuheben - das kommt nie an. Am 10.09.2026 nachgemessen: ein frisch gesetztes style="height:77px" ergab 0px. Deshalb steht die Aufhebung jetzt hier im Stil, wo sie ankommt. Zum Zurueckdrehen: diese drei Zeilen loeschen. */ .einzelbild .galerie__feld{aspect-ratio:auto} .einzelbild .galerie__feld img{height:auto} /* ‼ Dieselbe Ursache, andere Stellen: bau.py setzt auf den SEITEN (Ueber, Impressum) Abstaende und die Schrift der Zwischenueberschrift ueber style-Attribute. Auch die kommen am Server nicht an - die Ueberschriften standen dadurch in Archivo statt in der Auszeichnungsschrift, und zwischen den Textbloecken fehlte der Abstand. Werte 1:1 aus bau.py uebernommen (Zeilen 850, 852, 855, 857, 863). Befund 10.09.2026. */ .spalte > .text{margin-bottom:1.4em} .spalte > h2{font-family:var(--schrift-display);font-weight:400; font-size:clamp(19px,2.1vw,25px);margin:2.2em 0 .7em} .spalte > hr{border:0;border-top:1px solid var(--linie);margin:2em 0} .spalte > .einzelbild{margin:1.6em 0} .spalte > .galerie{margin:1.6em 0} .galerie__feld:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .einzelbild{margin:0} .einzelbild button{margin:0;padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%} .einzelbild img{width:100%;height:auto} .bildtext{font-size:13.5px;color:var(--meta);margin:10px 0 0;text-align:center} .beitrag__fuss{max-width:var(--spalte);margin:0 auto;padding:0 var(--rand) clamp(50px,6vw,80px); border-top:1px solid var(--linie);padding-top:26px} /* Schlagworte am Beitragsende - mittig unter der Linie (Dani, 06.09.2026). */ .marken{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0} .marken a{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--meta); text-decoration:none;border:1px solid var(--linie);padding:6px 12px} .marken a:hover{color:var(--gold);border-color:var(--gold)} /* ---------------------------------------------------------- Grossansicht */ .lupe{position:fixed;inset:0;z-index:200;background:rgba(8,16,15,.95);display:none; align-items:center;justify-content:center;padding:clamp(12px,3vw,48px)} .lupe[data-offen="ja"]{display:flex} .lupe img{max-width:100%;max-height:88vh;width:auto;height:auto;object-fit:contain} .lupe__zu,.lupe__pfeil{position:absolute;background:none;border:0;color:#fff;cursor:pointer; font-size:30px;line-height:1;padding:14px;opacity:.8} .lupe__zu:hover,.lupe__pfeil:hover{opacity:1} .lupe__zu{top:8px;right:10px;font-size:34px} .lupe__pfeil--links{left:4px;top:50%;transform:translateY(-50%)} .lupe__pfeil--rechts{right:4px;top:50%;transform:translateY(-50%)} .lupe__zaehler{position:absolute;bottom:14px;left:50%;transform:translateX(-50%); color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.16em} /* ---------------------------------------------------------- Fussblock */ /* ---------------------------------------------------------- Fuss Creme statt des dunklen Bands, alles mittig (Dani, 06.09.2026). */ .fuss{background:var(--grund-2);color:var(--text); border-top:1px solid var(--linie); padding:clamp(46px,6vw,74px) var(--rand) clamp(30px,4vw,44px); text-align:center} .fuss__innen{max-width:var(--breit);margin:0 auto} .fuss__marke{font-family:var(--schrift-display);font-weight:400; font-size:clamp(17px,2.1vw,23px);letter-spacing:.14em;text-transform:uppercase; margin:0 0 clamp(22px,3vw,32px)} .fuss__zeile{display:flex;flex-wrap:wrap;justify-content:center; gap:10px clamp(18px,2.4vw,30px);margin:0 0 14px} .fuss__zeile a{color:var(--text);text-decoration:none;font-size:13px; letter-spacing:.11em;text-transform:uppercase; padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s} .fuss__zeile a:hover{color:var(--gold);border-bottom-color:var(--gold)} .fuss__zeile--leise a{color:var(--meta);font-size:12.5px;letter-spacing:.09em} .fuss__zeile--leise{margin-bottom:clamp(24px,3vw,34px)} .fuss__klein{color:var(--meta);font-size:12.5px;margin:0; padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--linie)} @media (max-width:620px){ .fuss__zeile{gap:9px 16px} .fuss__zeile a{font-size:12px} } .hinweisband{background:var(--gold);color:#fff;text-align:center; padding:9px var(--rand);font-size:12.5px;letter-spacing:.1em} /* ---------------------------------------------------------- Blaettern */ .blaettern{max-width:var(--breit);margin:clamp(44px,6vw,72px) auto 0; padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--linie); display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} .blaettern a,.blaettern span{display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 14px;border:1px solid var(--linie); border-radius:2px;text-decoration:none;color:var(--meta); font-size:13px;letter-spacing:.1em;transition:border-color .2s,color .2s,background .2s} .blaettern a:hover{border-color:var(--text);color:var(--text)} .blaettern .jetzt{background:var(--band);border-color:var(--band);color:var(--band-text)} .blaettern .weit{border:0;color:var(--meta);min-width:0;padding:0 4px} .blaettern .pfeil{letter-spacing:.06em;text-transform:uppercase;font-size:12px} @media (max-width:620px){ .blaettern a,.blaettern span{min-width:38px;height:38px;padding:0 10px;font-size:12px} } /* ========================================================================== DESIGN 1 — gewaehlt am 08.09.2026 Zweizeilige Kopfleiste, Rahmen um die ganze Seite, Aufmacher aus Text und Bild nebeneinander. Dieser Abschnitt steht ABSICHTLICH am Ende: was hier steht, sticht die Regeln darueber. Zum Zurueckdrehen genuegt es, ihn zu entfernen - die alte Optik ist dann unveraendert wieder da. ========================================================================== */ :root{ /* Dani, 09.09.2026: "den Rahmen herum etwas schmaler ueberall". 12 -> 8. Dieselbe Zahl setzt auch die Goldfugen im Bildmosaik der Startseite - der Rahmen und die Fugen bleiben damit gleich breit, wie bisher. Zum Zurueckdrehen: die eine Zahl wieder auf 12px. */ --spalt:8px; /* Breite des Rahmenstreifens */ --spalt-fein:3px; /* Fugen zwischen den Bloecken */ --rahmen:#3C4744; /* Farbe von Rahmen und Fuss */ --glas:rgba(17,33,31,.58); --glas-hell:rgba(246,243,237,.92); } body{background:var(--rahmen);padding:var(--spalt)} /* Die Goldlinien ZWISCHEN den Bloecken sind schmaler als der Rahmen um die Seite: der Rahmen traegt das Design, die Fugen dazwischen sollen nur trennen. Dani, 09.09.2026: "diese linie dazwischen sehr schmal machen". Zum Zurueckdrehen: --spalt-fein auf var(--spalt) setzen. */ .seite{display:flex;flex-direction:column;gap:var(--spalt-fein)} /* ‼ AB 10.09.2026 OHNE WIRKUNG: das Autorenfoto auf Ueber/About ist auf Andres Wunsch entfallen, damit vergibt bau.py die Kennung .seite--autor nicht mehr. Die vier Regeln bleiben als Rueckweg stehen - wer das Foto in bau.py wieder einschaltet, muss dort auch die Kennung wieder auf 'seite--autor' setzen. Nur auf der Ueber- und der About-Seite: keine Goldlinie zwischen dem Foto und dem Fuss. Der Autorenkasten und der Fuss gehoeren dort zusammen, die Linie dazwischen trennte, was zusammengehoert. Dani, 09.09.2026 - "nur hier". Auf allen anderen Seiten bleibt die Fuge. */ .seite--autor main{margin-bottom:calc(-1 * var(--spalt-fein))} /* Dazu ruecken Foto und Fuss zusammen, damit "Andre Gebel" aus dem Fuss fast unter dem Foto steht. Dani, 09.09.2026. */ /* Das Foto laeuft unten bis an den Fuss und schliesst dort mit dem Creme ab; die beiden Adressen heben sich davon ein Stueck ab, damit sie nicht auf der Kante kleben. Dani, 09.09.2026. */ /* Das Autorenfoto stand rund zwei Zeilen zu tief unter dem Text. Dani, 10.09.2026. Zum Zurueckdrehen: clamp(56px,7vw,112px). */ .seite--autor .autor{padding-bottom:0;padding-top:clamp(34px,4vw,58px); margin-top:calc(-1 * var(--spalt-fein));border-top:0} .seite--autor .autor__seite{margin-bottom:clamp(18px,2.2vw,30px)} .seite--autor .fuss{padding-top:clamp(16px,2vw,26px)} .seite main{display:flex;flex-direction:column;gap:var(--spalt-fein)} .seite main > *{background:var(--grund)} /* ------------------------------------------------------------- Kopfleiste */ .kopfblock{position:sticky;top:var(--spalt);z-index:100; transition:transform .32s ease} .kopfblock.kopf--weg{transform:translateY(calc(-100% - var(--spalt) - 4px))} .kopf1{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:clamp(14px,2vw,34px);padding:13px var(--rand); background:var(--glas);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); color:var(--band-text)} .kopf__links{justify-self:start;display:flex;align-items:center;gap:16px} .kopf__rechts{justify-self:end;display:flex;align-items:center;gap:16px} .kopf__logo{justify-self:center;display:flex;flex-direction:row;align-items:center; gap:16px;color:inherit;text-shadow:none;padding:0;margin:0;white-space:nowrap} .kopf__name{font-family:var(--schrift-display);font-weight:400;font-size:22px; letter-spacing:3.6px;text-transform:uppercase;color:inherit} .kopf__logo:hover .kopf__name{color:var(--gold-hell)} .kopf2{display:flex;justify-content:center;gap:clamp(14px,2vw,34px); padding:10px var(--rand);background:var(--glas-hell); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1px solid rgba(17,33,31,.10);border-bottom:1px solid var(--linie); white-space:nowrap;overflow-x:auto;scrollbar-width:none} .kopf2::-webkit-scrollbar{display:none} .kopf2__link{font-size:12.5px;font-weight:600;letter-spacing:2.1px; text-transform:uppercase;color:var(--text);text-decoration:none; transition:color .25s ease} .kopf2__link:hover{color:var(--gold)} /* Kanaele und Sprache: gleiche Plakette, im Ruhezustand ein heller Schleier */ .sozial{display:flex;gap:8px} .sozial a,.sprache{font-family:var(--schrift-text);font-size:10px;font-weight:600; letter-spacing:1.4px;text-transform:uppercase;text-decoration:none; background:rgba(247,243,234,.15);color:#F7F3EA;border-radius:999px; padding:6px 13px;white-space:nowrap;transition:background .2s ease,color .2s ease} .sozial a:hover,.sprache:hover{background:#F6F3EA;color:var(--band)} .kopf1 .kopf__knopf{display:none;color:inherit;text-shadow:none} .kopf1 .kopf__label{font-size:11px;letter-spacing:1.8px;color:inherit;text-shadow:none} .kopf1 .kopf__strich{background:currentColor;width:26px} @media(max-width:1120px){ .kopf1 .sozial{display:none} .kopf1 .kopf__knopf{display:flex} } /* 08.09.: Die Kontinent-Zeile verschwand frueher schon unter 1120px. Sie bleibt jetzt bis 640px stehen - sie passt dort ohne Ueberlauf. Damit die obere Zeile dabei nicht gedraengt wird, werden Name, Stern und Plaketten ab 820px kleiner. */ @media(max-width:820px){ .kopf1{gap:clamp(20px,2vw,34px)} .kopf__name{font-size:18px;letter-spacing:2.8px} .kopf__logo svg{width:32px;height:32px} .sozial a,.sprache{font-size:9.5px;letter-spacing:1.2px;padding:5px 10px} } @media(max-width:640px){ :root{--spalt:6px} .sprache{display:none} .kopf2{display:none} /* Auf dem Handy steht links nur das Zeichen, ohne das Wort - sonst stossen Striche, Stern und Name aneinander. Der Name bleibt in voller Groesse. */ .kopf1 .kopf__label{display:none} .kopf1{padding-left:16px;padding-right:16px} .kopf__name{font-size:16px;letter-spacing:2.2px} .kopf__logo svg{width:27px;height:27px} } /* -------------------------------------------------------------- Aufmacher */ .auf{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);min-height:56vh} .auf__wort{padding:clamp(36px,5vw,72px) clamp(28px,4vw,60px);display:flex; flex-direction:column;justify-content:center;gap:20px} .auf__titel{font-family:var(--schrift-display);font-weight:400; font-size:clamp(23px,2.5vw,36px);line-height:1.14;margin:0;letter-spacing:-.4px; /* KEINE Silbentrennung - "Aletschglet-scher" sah schlimmer aus als der Ausbruch, den sie verhindern sollte. Die Schrift ist stattdessen kleiner. */ hyphens:manual;overflow-wrap:break-word} .auf__text{color:var(--fliess);max-width:46ch;margin:0} .auf__bild{background:var(--grund-3);overflow:hidden} .auf__bild img{width:100%;height:100%;object-fit:cover;min-height:300px} .mehr{display:inline-flex;align-items:center;gap:14px;margin-top:6px; font-size:12.5px;font-weight:600;letter-spacing:2.1px;text-transform:uppercase; color:var(--gold);text-decoration:none} .mehr::after{content:"";width:56px;height:1px;background:var(--gold-hell)} .auf .kicker{font-size:12px;font-weight:600;letter-spacing:2.2px; text-transform:uppercase;color:var(--gold)} @media(max-width:900px){ .auf{grid-template-columns:1fr;min-height:0} .auf__bild img{min-height:0;aspect-ratio:16/10} } /* ---------------------------------------------------------------- Kacheln */ .abschnitt{padding:clamp(34px,4vw,60px) var(--rand)} .kachel--gross{grid-column:span 2} .kachel--gross .kachel__rahmen{aspect-ratio:16/9} .kachel--gross .kachel__titel{font-size:29px} @media(max-width:620px){ .kachel--gross{grid-column:span 1} .kachel--gross .kachel__rahmen{aspect-ratio:4/3} .kachel--gross .kachel__titel{font-size:22px} } /* ------------------------------------------------------------------- Fuss */ .fuss{background:var(--rahmen);color:var(--band-text); display:flex;flex-direction:column;align-items:center;text-align:center; padding:clamp(46px,6vw,64px) var(--rand) clamp(20px,2.4vw,28px)} .fuss__marke{display:flex;align-items:center;gap:15px;color:var(--gold-hell); text-decoration:none;font-family:var(--schrift-display);font-size:20px; letter-spacing:3.2px;text-transform:uppercase;margin:0} /* Neue Reihenfolge (Dani, 09.09.2026): Name - Satz - Marke. Der Name steht jetzt ganz oben, deshalb kein Abstand mehr darueber und ein kleinerer darunter; die Marke bekommt den groesseren Abstand nach unten. */ /* Die Wortmarke steht fuer sich, darunter Platz, dann der Satz - so wie der Name oben Platz zu den Kanaelen hat. Dani, 09.09.2026. */ /* Ab der Wortmarke ruecken die Zeilen zusammen - der Fuss war zu lang. Dani, 09.09.2026: "ab premiumescap mehr zusammenruecken". */ /* Der Satz sitzt jetzt unter dem Wort PREMIUM, nicht unter Stern plus Wort. Die Marke ist als Ganzes zentriert; Stern (34px) und Fuge (15px) schieben das Wort um 24,5px nach rechts. Ein linker Rand von genau 49px am Satz - der ebenfalls zentriert ist, also nur die Haelfte davon wandert - setzt ihn mittig unter das Wort. Gleiche Schrift wie die Wortmarke, kleiner und in Gold (Farbe im Goldblock). Kursiv, weil der Satz damit genau so breit wird wie die Wortmarke darueber - 261 zu 267px, nachgemessen - und beide Zeilen einen Block bilden. Dani, 09.09.2026. */ /* Der Satz sitzt tiefer, fast auf der Linie darunter: der Abstand nach oben waechst um genau das, was der Abstand nach unten verliert - die Hoehe des Fusses bleibt dieselbe (43px verteilt, vorher 17 oben / 26 unten, jetzt 32 / 11). Dani, 09.09.2026. */ .fuss__satz{margin:clamp(22px,2.6vw,32px) 0 0 49px;color:#9BA79F; font-family:var(--schrift-display);font-weight:400;font-style:italic; font-size:14px;letter-spacing:.02em} /* Feiner Trenner im Fuss - teilt die Marke von der Person. */ .fuss__trenner{display:block;width:min(280px,60%);height:1px; background:rgba(110,84,23,.35);margin:clamp(20px,2.6vw,30px) 0 clamp(8px,1.2vw,14px)} /* Im Fuss stehen keine Plaketten mehr: Instagram und Pinterest sind Teil der einen Verweiszeile unter dem Namen (siehe bau.py). Die Plaketten gibt es nur noch oben in der Kopfleiste. */ .fuss__zeile{display:flex;flex-direction:column;align-items:center;gap:11px; width:100%;margin-top:clamp(8px,1vw,11px);padding-top:clamp(14px,1.8vw,20px); border-top:1px solid rgba(237,233,223,.18)} .fuss__kats{display:flex;flex-wrap:wrap;justify-content:center;gap:0; font-size:12.5px;font-weight:600;letter-spacing:1.9px;text-transform:uppercase} .fuss__kats a,.fuss__seiten a{color:var(--band-text);text-decoration:none} .fuss__kats a:hover,.fuss__seiten a:hover{color:var(--gold-hell)} .fuss__seiten{font-size:12.5px;letter-spacing:1.1px;color:#9BA79F} .fuss__seiten a{color:var(--band-text)} .fuss__punkt{opacity:.45;padding:0 10px} .fuss__klein{font-size:12px;letter-spacing:1.1px;color:#7E8C85;margin:0} @media(max-width:760px){.fuss__satz{max-width:44ch}} /* ---------------------------------------------------- Dezenter Bildrahmen Eine Haarlinie um jedes Foto. Als aeusserer Schatten, nicht als Rand: so aendert sich die Groesse der Bilder nicht und im Raster verrutscht nichts. Auf .kachel__rahmen statt auf das Bild, weil der Rahmen overflow:hidden hat und einen Schatten am Bild selbst abschneiden wuerde. */ .kachel__rahmen, .auf__bild, .beitrag__buehne, .galerie__feld, .einzelbild img{box-shadow:0 0 0 1px rgba(17,33,31,.13)} /* --------------------------------------------------- Rubrik-Ueberschriften Kategorie- und Schlagwortseiten. Versalien, weit gesperrt, in Gold - also dasselbe Zeichen wie der kleine Kicker auf den Kacheln, nur gross. So sieht man sofort: das ist eine Rubrik, kein Beitragstitel. "Neueste Beitraege" auf der Startseite bleibt bewusst unveraendert. */ .abschnitt__titel--rubrik{color:var(--gold);text-transform:uppercase; letter-spacing:.18em;font-size:clamp(21px,2.4vw,30px)} /* Der Bildrahmen war mit 13 % zu leise - auf hellen Fotos kaum zu sehen. 22 % war auf hellen Fotos immer noch kaum zu erkennen. Jetzt 30 % plus ein sehr weicher Schatten darunter - dadurch heben sich die Bilder leicht vom Creme ab. 30 % war immer noch nicht zu erkennen, jetzt 45 % - am gerenderten Bild nachgemessen (Befund 08.09.2026). */ .kachel__rahmen, .auf__bild, .beitrag__buehne, .galerie__feld, .einzelbild img{box-shadow:0 0 0 1px rgba(17,33,31,.45),0 2px 8px rgba(17,33,31,.08)} /* Der Kicker trug den Schlagschatten aus der alten Buehne - dort stand er weiss ueber einem Foto. Im neuen Aufmacher steht er auf Creme, da sah der Schatten aus wie ein Druckfehler (Befund 08.09.2026). */ .auf .kicker{text-shadow:none;color:var(--gold)} /* Abschnitts-Ueberschriften bekommen dieselbe Auszeichnung wie die Rubriken: Versalien, gesperrt, Gold. "Neueste Beitraege" wirkte als schlichte Zeile verloren zwischen Aufmacher und Kacheln. */ .abschnitt__titel{color:var(--gold);text-transform:uppercase;letter-spacing:.18em; font-size:clamp(19px,2.1vw,26px)} .abschnitt__titel--rubrik{font-size:clamp(21px,2.4vw,30px)} .abschnitt__hinweis{color:var(--meta)} /* Die helle Linie oben am Fuss und die kurze ueber dem Copyright stammen aus dem alten cremefarbenen Fuss (--linie, ein helles Creme). Auf dem dunklen Grund stachen sie weiss heraus. Jetzt Gold, sehr zurueckgenommen. */ .fuss{border-top:1px solid rgba(201,167,91,.55)} .fuss__klein a{color:inherit;font-size:inherit;letter-spacing:inherit; text-transform:none;font-weight:inherit;text-decoration:none} .fuss__klein a:hover{color:var(--gold-hell)} .fuss__klein{border-top:1px solid rgba(201,167,91,.22);padding-top:18px; margin-top:4px;width:min(320px,60%)} /* Im Impressum stehen lange Adressen ohne Leerzeichen. Auf dem Handy schoben sie die Seite 9 px zur Seite - gemessen bei 390 px (Befund 08.09.2026). Lange Woerter duerfen deshalb umbrechen, wenn sie sonst nicht passen. */ .text,.spalte{overflow-wrap:break-word} .text a{overflow-wrap:anywhere} /* Kurze Verweistexte bleiben in einer Zeile - "Andre Gebel" soll nicht nach "Andre" umbrechen. Die Kennung "ganz" setzt bau.py nur bei hoechstens 30 Zeichen; laengere Verweise duerfen weiter umbrechen, sonst stuenden sie ueber den Rand. Dani, 09.09.2026. */ .text a.ganz{white-space:nowrap} /* Die Kategorie unter dem Kachelbild in Fett - sie ist die Einordnung und darf sich vom Datum darunter absetzen (Dani, 08.09.2026). */ .kachel__kicker{font-weight:700;letter-spacing:.22em} /* Auf den Seiten (Über) steht der Titel oben statt unten - bei Andres Foto sitzt er dadurch im Himmel neben ihm und nicht auf seinem Koerper. Betrifft nur Seiten mit Buehnenbild, nicht die Beitraege. */ .beitrag__buehne--seite{align-items:flex-start} .beitrag__buehne--seite .buehne__inhalt{padding-top:clamp(48px,10vh,120px);padding-bottom:0} .beitrag__buehne--seite::after{ background:linear-gradient(180deg,rgba(8,16,15,.52) 0%,rgba(8,16,15,.12) 46%,rgba(8,16,15,.30) 100%)} /* ------------------------------------------------- Andrés andere Seiten Im Fuss eine leise Zeile, auf der Über-Seite ein eigener Kasten: Foto in der Mitte, links der andere Blog, rechts seine eigene Seite. Adressen und Foto stammen aus dem Fussblock der alten Seite, nichts davon ist erfunden. */ .fuss__name{display:block;font-family:var(--schrift-display);font-size:22px; font-style:italic;letter-spacing:.04em;color:var(--gold-hell); text-decoration:none;margin:0 0 clamp(14px,2vw,26px); border-bottom:1px solid transparent;transition:border-color .2s} a.fuss__name:hover{border-bottom-color:var(--gold-hell)} /* Eine Zeile, eine Schrift - dieselbe wie der Name darueber. Vorher standen hier drei Zeilen in drei Schriftbildern. Dani, 09.09.2026. */ /* ‼ 10.09.2026: die Zeile steht jetzt UNTER der Wortmarke und dem Satz, nicht mehr darueber unter dem Namen - der Name ist entfallen. Der Abstand nach oben ist der, den vorher der Trenner gemacht hat. Zum Zurueckdrehen: margin:0. */ .fuss__adressen{margin:clamp(22px,2.8vw,34px) 0 0;font-family:var(--schrift-display); /* Eine Nummer kleiner - Dani, 09.09.2026. Vorher bis 18px. */ font-size:clamp(14px,1.4vw,16.5px);letter-spacing:.02em;color:var(--band-text); display:flex;flex-wrap:wrap;justify-content:center; gap:2px clamp(10px,1.2vw,16px)} /* Auf dem Handy bricht die Zeile um; dann bliebe am Zeilenende ein Punkt haengen. Also Punkte weg und dafuer mehr Abstand. */ @media(max-width:640px){ .fuss__adressen .fuss__punkt{display:none} .fuss__adressen{gap:6px 22px} } .fuss__adressen a{color:var(--band-text);text-decoration:none; border-bottom:1px solid transparent;transition:border-color .2s} .fuss__adressen a:hover{color:var(--gold-hell);border-bottom-color:var(--gold-hell)} /* Andres Rueckmeldung 09.09.2026: "die Teaser sind noch nicht so elegant geloest". Die beiden Verweise standen in gerahmten Kaesten links und rechts vom kleinen Foto - sie sahen aus wie leere Formularfelder. Jetzt tragen sie nur noch eine Haarlinie darueber, die Adresse steht in der Schrift der Titel, und das Foto ist groesser. Die Anordnung - anderer Blog, Foto, seine Seite - bleibt genau wie vorher. */ /* Die beiden Verweise standen auf halber Hoehe des Fotos. Sie stehen jetzt unten buendig, also auf einer Zeile mit dem Namen unter dem Foto (Dani, 09.09.2026). */ /* Seit 09.09.2026 steht im Kasten nur noch das Foto - die beiden Adressen stehen allein im Fuss. Darum EINE mittige Spalte: bei drei Spalten waere das einzelne Bild im ersten Rasterfeld gelandet, also links. */ .autor{display:grid;grid-template-columns:1fr;justify-items:center; background:var(--grund-2); padding:0 var(--rand) clamp(34px,4vw,58px);border-top:1px solid var(--linie)} .autor__mitte{text-align:center} .autor__bild{width:clamp(180px,20vw,240px);height:auto;aspect-ratio:1/1; object-fit:cover;margin:0 auto;box-shadow:0 0 0 1px rgba(17,33,31,.45),0 2px 8px rgba(17,33,31,.08)} /* Der Name unter dem Foto ist ganz weggefallen - er steht ohnehin gross im Fuss (Dani, 09.09.2026). Die Regel bleibt als Rueckweg stehen, ausgegeben wird nichts mehr. */ /* Das freigestellte Foto: kein Quadrat, keine Haarlinie ringsum, kein Zuschnitt - es steht frei auf dem Grund und laeuft unten weich aus. (Dani, 09.09.2026) */ .autor__bild--frei{aspect-ratio:auto;height:auto;object-fit:contain; box-shadow:none;background:none;width:clamp(292px,32vw,440px)} /* Ohne Linie darueber: Dani, 09.09.2026. Es bleiben die kleine Goldzeile und die Adresse. Beim Zeigen wird die Adresse gold - das ist der ganze Hinweis, dass es ein Verweis ist. */ .autor__seite{display:flex;flex-direction:column;gap:8px;text-decoration:none; padding:0;border:0;background:none;width:min(270px,100%)} .autor__seite:nth-of-type(1){text-align:right;justify-self:end} .autor__seite:nth-last-of-type(1){text-align:left;justify-self:start} .autor__was{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--gold)} .autor__adresse{font-family:var(--schrift-display);font-size:clamp(17px,1.9vw,23px); color:var(--text);transition:color .2s ease} .autor__seite:hover .autor__adresse{color:var(--gold)} @media(max-width:820px){ .autor{grid-template-columns:1fr;justify-items:center;text-align:center} .autor__seite,.autor__seite:nth-of-type(1),.autor__seite:nth-last-of-type(1){ text-align:center;justify-self:center;width:min(320px,100%);align-items:center} } /* ---------------------------------------------------- Stimmen (Ueber-Seite) Andres Feedback von Hoteliers. Vorher ein Block Fliesstext, in dem Zitat und Name dieselbe Schrift trugen und ineinanderliefen. Jetzt: das Zitat in der Titelschrift und groesser - ein Zitat ist der Beweis, nicht die Erklaerung -, der Name klein in Gold-Versalien, dazwischen eine Haarlinie. Das grosse Anfuehrungszeichen ist Zierde aus dem Stil; die geraden Anfuehrungszeichen im Text bleiben unangetastet. Dani, 09.09.2026. Kontrast gerechnet: Zitat --fliess auf --grund 5,5:1, Name 5,8:1. ========================================================================== */ .stimmen__kopf{font-family:var(--schrift-display);font-weight:400; font-size:clamp(17px,1.9vw,22px);text-transform:uppercase;letter-spacing:.18em; color:var(--gold);margin:2.4em 0 1.2em} .stimmen{display:flex;flex-direction:column;gap:clamp(26px,3vw,38px)} .stimme{position:relative;margin:0;padding:clamp(22px,2.6vw,30px) 0 0 44px; border-top:1px solid var(--linie)} .stimme::before{content:"\201C";position:absolute;left:0;top:clamp(12px,1.6vw,20px); font-family:var(--schrift-display);font-size:40px;line-height:1; color:rgba(124,95,31,.32)} /* Fassung 3, Danis Wahl vom 09.09.2026 aus drei Fassungen. Das Zitat ist KLEINER als Andres eigener Text (15,5 zu 17) - sein Text ist die Hauptsache, das Zitat der Beleg - und kursiv: das Schraege sagt von selbst "das hat jemand anders gesagt", ganz ohne Versalien. So stossen sich die zwei Schriften auch nicht mehr: seine bleibt die gerade, das Zitat bekommt die schraege. ‼ Der Name steht in NORMALER Schreibweise. Vorher standen dort Versalien - dadurch wurde aus Andres "Grossarltal" ein "GROSSARLTAL". Das war nicht Geschmack, das war sein Text veraendert. Nachgerechnet: Zitat #4E5E5A auf #EDE6D8 5,5:1, Name #6E5417 5,8:1. */ .stimme p{font-family:var(--schrift-display);font-weight:400;font-style:italic; font-size:clamp(14.5px,1.5vw,15.5px);line-height:1.72;color:var(--fliess);margin:0} .stimme cite{display:block;margin:12px 0 0;font-style:normal; font-family:var(--schrift-text);font-size:13px;font-weight:600; letter-spacing:.01em;text-transform:none;color:var(--gold)} @media(max-width:620px){ .stimme{padding-left:30px} .stimme::before{font-size:40px} } /* ========================================================================== STARTSEITE, Fassung vom 10.09.2026 - Andres Mail: "Ich fand eigentlich die Ursprungsbuehne, in der nur das jeweils aktuelle Bild allein oben steht, am eindrucksvollsten. Darunter dann die Anordnung wie in deinem Favoriten (ein etwas groesserer Teaser neben einem kleinen) und darunter dann ein 3er-Grid der Beitraege (aktuell sind es auf Desktop 4, was ich zu viel finde)." Deckt sich mit seiner Antwort auf die Vorschau vom 09.09.: "Ich fand die erste (volle) Test-Buehne (ohne den Text links) am staerksten. Das neue Grid darunter (grosser Teaser und dann auf Desktop 3er-Grid) finde ich super." Aufbau jetzt: volle Buehne (nur das neueste Bild) -> zwei Teaser ungleicher Breite -> das Gitter der Kategorieseiten (.kacheln, dreispaltig, 4:3). Die Buehne traegt zusaetzlich .beitrag__buehne, holt sich also Hoehe, Verlauf und Textkasten von der Beitragsbuehne - hier steht nur, was daran anders ist. Zum Zurueckdrehen auf das Mosaik vom 09.09.: in bau.py den Block wieder auf .gal-mosaik stellen; der Stil dafuer steht unveraendert darunter. ========================================================================== */ .start-buehne{text-decoration:none;color:inherit} .start-buehne .buehne__bild{transition:transform .6s ease} .start-buehne:hover .buehne__bild{transform:scale(1.02)} /* ‼ Der Claim oben links im Buehnenbild - Dani, 10.09.2026: "das muesste irgendwie in Goldschrift in das Titelbild, dass man weiss, um was es geht. Oben links im Bild, in kursiv." Er stand vorher nur im Fuss auf Hoehe 4.314px und im Fenstertitel. Der Schleier ist kein Schmuck, er ist noetig. Am echten Foto gemessen, Pixel fuer Pixel, mit der Deckung des Verlaufs an dieser Hoehe verrechnet: ganz oben links, wie es war Gold 1,97 : 1 (noetig sind 4,5) Verlauf oben auf .70 verstaerkt Gold 3,26 : 1 und jedes Bild dunkler eigener Schleier .55 hier Gold 4,73 : 1 / helles Gold 5,90 : 1 Deshalb ein eigener weicher Schleier NUR hinter dieser Zeile, statt den Verlauf der ganzen Buehne anzufassen. Die Schrift ist das hellere Gold #D9BC7A, dasselbe wie beim Kicker auf dem Bild (Befund 09.09.). Der linke Rand ist var(--rand) wie beim Titel darunter - beide stehen auf derselben Kante. Zum Zurueckdrehen: diesen Block und die zwei Zeilen in bau.py loeschen. */ .start-claim{position:absolute;z-index:2;left:0;right:0;top:0; padding:clamp(26px,3vw,38px) var(--rand) clamp(38px,4.4vw,54px); background:linear-gradient(180deg,rgba(8,16,15,.55) 0%, rgba(8,16,15,.34) 55%,rgba(8,16,15,0) 100%)} .start-claim span{font-family:var(--schrift-display);font-style:italic; font-size:clamp(15px,1.5vw,19px);line-height:1.35;color:#D9BC7A; letter-spacing:.02em; text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.6)} .start-teaser{display:grid;grid-template-columns:1.38fr 1fr; grid-template-rows:minmax(0,46vh);gap:var(--spalt);background:transparent} @media(max-width:900px){ .start-teaser{grid-template-columns:1fr;grid-template-rows:none} .start-teaser .gal-kachel{height:46vh} } /* ========================================================================== ‼ AB 10.09.2026 NICHT MEHR IM GEBRAUCH - Rueckweg, siehe oben. GALERIE-AUFBAU DER STARTSEITE - Andres Wahl vom 09.09.2026 Oben ein Mosaik aus drei Bildern: links gross ueber beide Zeilen, rechts zwei uebereinander. Titel und Kategorie stehen auf dem Bild, im dunklen Teil des Verlaufs. Darunter alle weiteren Beitraege als Gitter. Der Aufmacher aus Text links und Bild rechts entfaellt damit auf der Startseite; auf Kategorie- und Schlagwortseiten bleiben die Kacheln. Die Werte sind unveraendert die aus der Vorschaufassung, die Andre angesehen hat (_werkzeug/vorschau_seiten.py, GALERIE_CSS). ========================================================================== */ .gal-mosaik{display:grid;grid-template-columns:2fr 1fr; grid-template-rows:repeat(2,minmax(0,42vh));gap:var(--spalt);background:transparent} .gal-kachel{position:relative;overflow:hidden;background:var(--grund-2); text-decoration:none;display:block} .gal-kachel img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .gal-kachel:hover img{transform:scale(1.03)} .gal-kachel--gross{grid-row:span 2} /* Der Verlauf hatte oben .00 und unten .74. Der Titel steht ganz unten und trug damit sicher (7,3 bis 9,8:1), die Kategorie darueber aber nicht: auf dem hellen Gletscherfoto nur 2,35:1 - am Bild nachgerechnet, Pixel fuer Pixel unter der Zeile, mit dem Verlauf verrechnet (Befund 09.09.2026). Jetzt liegt der Verlauf schon auf halber Hoehe bei .66, und die Kategorie steht ein wenig heller: 5,0 / 5,0 / 6,2:1 auf den drei Bildern von heute. Der Schatten ist derselbe wie beim Kicker der Beitragsbuehne - er zaehlt im Kontrastwert nicht mit, faengt aber helle Stellen kuenftiger Fotos ab. */ .gal-kachel__wort{position:absolute;left:0;right:0;bottom:0;padding:28px 30px; color:#F7F3EA;display:flex;flex-direction:column;gap:6px; background:linear-gradient(180deg,rgba(10,18,17,0) 0%, rgba(10,18,17,.66) 40%,rgba(10,18,17,.90) 100%)} .gal-kicker{font-size:12px;font-weight:600;letter-spacing:2.2px; text-transform:uppercase;color:#D9BC7A; text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.7)} .gal-titel{font-family:var(--schrift-display);font-weight:400; font-size:clamp(18px,2vw,28px);line-height:1.16;margin:0} .gal-streifen{padding:clamp(34px,4vw,60px) var(--rand)} .gal-streifen__kopf{display:flex;align-items:baseline;gap:24px;margin:0 0 30px} /* „ALLE BEITRAEGE" ist ein Wegweiser, keine Ueberschrift. Bei 26px stand es optisch ueber allem, was darunter kommt - die Teasertitel sind 28px, die Kacheltitel nur 20px, und Versalien mit 0,18em Sperrung wirken zusaetzlich breiter und schwerer als dieselbe Groesse gemischt gesetzt. Die Zeile uebertoente damit die Beitraege, die sie ankuendigt. Dani, 10.09.2026: „das alle beitraege kleiner machen". Jetzt 18px, also unter den 20px der Kacheltitel. Versalien und Sperrung tragen die Aufmerksamkeit, nicht der Grad. Zum Zurueckdrehen: clamp(19px,2.1vw,26px). */ .gal-streifen__kopf h1,.gal-streifen__kopf h2{font-family:var(--schrift-display); font-weight:400;font-size:clamp(15px,1.4vw,18px);margin:0;color:var(--gold); text-transform:uppercase;letter-spacing:.18em} .gal-streifen__kopf i{flex:1;height:1px;background:var(--linie)} /* "Alle Beitraege" steht in der Mitte, die Haarlinie laeuft nach beiden Seiten. Die zweite Linie kommt aus dem Stil (::before), damit im Bauskript nichts zu aendern ist. Dani, 09.09.2026: "das alle beitraege in die mitte". Zum Zurueckdrehen: diese drei Zeilen loeschen - dann steht die Ueberschrift wieder links mit einer Linie rechts. */ /* Drei Spalten: links die Seitenzahl an der Kante des ersten Beitrags, in der Mitte die Ueberschrift, rechts nichts. Die beiden aeusseren Spalten sind gleich breit (1fr), deshalb sitzt die Ueberschrift exakt in der Mitte, egal wie lang "Seite 3 von 5" wird. Dani, 09.09.2026. Zum Zurueckdrehen: diesen Block loeschen - dann steht der Titel wieder links und die Seitenzahl rechts, wie im Grundentwurf. */ .gal-streifen__kopf{display:grid;grid-template-columns:1fr auto 1fr; align-items:baseline;gap:24px} .gal-streifen__kopf h1,.gal-streifen__kopf h2{grid-column:2;grid-row:1} /* grid-row:1 ist noetig: ohne sie schiebt die automatische Platzierung die Seitenzahl in eine ZWEITE Zeile, weil sie in einer frueheren Spalte steht als die schon gesetzte Ueberschrift. Genau das war der Fehler. */ .gal-streifen__seite{grid-column:1;grid-row:1;justify-self:start} .gal-streifen__kopf i{display:none} /* Schmale Geraete: nebeneinander wird es zu eng, deshalb untereinander - Ueberschrift oben, Seitenzahl darunter, beides mittig. */ @media(max-width:640px){ .gal-streifen__kopf{grid-template-columns:1fr;gap:10px;justify-items:center} .gal-streifen__kopf h1,.gal-streifen__kopf h2{grid-column:1;grid-row:1} .gal-streifen__seite{grid-column:1;grid-row:2;justify-self:center} } .gal-streifen__seite{font-size:13px;letter-spacing:.12em;text-transform:uppercase; color:var(--meta)} /* Vierspaltig, quadratisch - so hat Andre es in der Vorschau gesehen. Auf dreispaltig umstellen: hier repeat(4,1fr) durch repeat(3,1fr) ersetzen. */ .gal-gitter{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 22px} .gal-klein{text-decoration:none;color:inherit;display:block} .gal-klein img{width:100%;aspect-ratio:1/1;object-fit:cover; box-shadow:0 0 0 1px rgba(17,33,31,.45),0 2px 8px rgba(17,33,31,.08)} /* Der Kontinent ueber dem Titel - im Gitter stehen alle Kategorien gemischt. Der Abstand zum Bild wandert vom Titel in den Kicker, die Kachel wird also nicht hoeher: 13px oben, 5px unten statt 13px am Titel. Dani, 09.09.2026. */ .gal-klein__kicker{display:block;font-size:10.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:13px 0 5px} .gal-klein__titel{display:block;font-size:15px;font-weight:600;line-height:1.35; margin:0} .gal-klein:hover .gal-klein__titel{color:var(--gold)} .gal-streifen .blaettern{margin-top:clamp(34px,4vw,54px)} @media(max-width:1020px){.gal-gitter{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){ .gal-mosaik{grid-template-columns:1fr;grid-template-rows:none} .gal-kachel--gross{grid-row:auto} .gal-kachel{height:46vh} } @media(max-width:620px){.gal-gitter{grid-template-columns:1fr 1fr;gap:26px 16px}} /* ========================================================================== ANDRES WAHL vom 09.09.2026: Fassung "03 Gold" aus der Vorschau. Der folgende Abschnitt ist unveraendert die farbblock.css aus "DESIGN 2 FARBEN/01_Gold". Zum Zurueckdrehen: alles ab hier loeschen, dann ist Design 1 wieder da. ========================================================================== */ /* ========================================================================== DESIGN 2 - FARBEN, gewaehlt am 08.09.2026 (Fassung Gold) Design 2 ist Design 1 in hell. Aufbau, Anordnung, Schriften und Abstaende sind unveraendert - hier steht ausschliesslich Farbe. Der Gedanke: das Dunkelgruen verschwindet. Der Streifen um die Seite wird Gold, das Papier wird eine Spur dunkler als in Design 1, und alles, was vorher helle Schrift auf dunklem Grund war (Kopfleiste, Fuss, die beiden Link-Karten auf der Ueber-Seite), wird dunkle Schrift auf hellem Grund. Zum Zurueckdrehen genuegt es, diesen Abschnitt zu entfernen - Design 1 ist dann unveraendert wieder da. Die Fassung von Design 1 liegt zusaetzlich in "DESIGN 2/stil.css". Alle Schriftfarben sind gegen ihren Untergrund gerechnet, keine unter 4.5:1 - auch die leisen Zeilen im Fuss, die dafuer nachgedunkelt wurden. ========================================================================== */ :root{ /* Das Papier, eine Spur dunkler und waermer als in Design 1 */ --grund:#EDE6D8; --grund-2:#E5DCC9; --grund-3:#DCD2BC; --linie:#D9D0BC; /* Der Streifen um die Seite: Gold statt Dunkelgruen */ --rahmen:#C0A054; /* Die beiden durchscheinenden Flaechen der Kopfleiste, jetzt beide creme */ --glas:rgba(237,230,216,.94); --glas-hell:rgba(237,230,216,.94); /* Gold auf hellem Grund - dunkler als das alte --gold, damit es auf dem dunkleren Papier und im hellen Fuss sicher lesbar bleibt */ --gold-hell-grund:#6E5417; } /* ------------------------------------------------------ Kopfleiste in hell */ .kopf1{color:var(--text)} .kopf__logo svg g{fill:var(--gold)} .kopf__logo:hover .kopf__name{color:var(--gold)} /* Plaketten, Fassung B: feiner Goldumriss, beim Zeigen in Gold gefuellt. Vorher (Design 1) wurde beim Zeigen SCHWARZ gefuellt - in der goldenen Fassung ein Fremdkoerper. Fassung A ohne Umriss hat Dani am 09.09. live gesehen und verworfen: "das passt jetzt irgendwie nicht von der Optik". Nachgerechnet: Schrift #6E5417 auf #EDE6D8 5,8:1, beim Zeigen Grund #6E5417 mit Schrift #EDE6D8 dieselben 5,8:1. Der Umriss ist Zierde, kein Traeger - die Aufschrift benennt den Knopf. Dani, 09.09.2026. */ .kopf1 .sozial a,.kopf1 .sprache{background:none;color:var(--gold-hell-grund); border-radius:999px;box-shadow:inset 0 0 0 1px rgba(110,84,23,.45); transition:background .2s ease,color .2s ease,box-shadow .2s ease} .kopf1 .sozial a:hover,.kopf1 .sprache:hover{background:var(--gold-hell-grund); color:var(--grund);box-shadow:inset 0 0 0 1px var(--gold-hell-grund)} .kopf1 .kopf__knopf:hover .kopf__label{color:var(--gold)} .menue{background:var(--grund)} /* ------------------------------------------------------------ Fuss in hell */ .fuss{background:var(--grund-2);color:var(--text);border-top:1px solid #D2C7B0} .fuss__marke{color:var(--gold-hell-grund)} .fuss__marke svg g{fill:var(--gold-hell-grund)} /* Der Satz in Gold, wie die Wortmarke darueber. #6E5417 auf #E5DCC9 sind 5,2:1 - nachgerechnet, gut lesbar auch bei 14px. Dani, 09.09.2026. */ .fuss__satz{color:var(--gold-hell-grund)} /* Der obere Teil des Fusses - Name, Kanaele, seine beiden Seiten - steht durchgehend in Gold, bis zur feinen Linie. Darunter bleibt es dunkel. Dani, 09.09.2026: "die oberen alle in goldschrift bis zur linie". #6E5417 auf dem Fussgrund #E5DCC9 sind 5,2:1 - nachgerechnet. */ .fuss__adressen,.fuss__adressen a{color:var(--gold-hell-grund)} .fuss__adressen .fuss__punkt{color:rgba(110,84,23,.55)} .fuss__zeile{border-top:1px solid #D2C7B0} /* Die Adressen im oberen Teil stehen in Gold (siehe darueber) und sind hier ausgenommen. Die Kontinente unter der Linie stehen seit dem 09.09.2026 ebenfalls in Gold, mit einem blassen Goldschleier beim Zeigen - Danis Wahl, Fassung 2 von dreien. Die Impressumzeile bleibt dunkel. Nachgerechnet: #6E5417 auf dem Fussgrund #E5DCC9 5,2:1; beim Zeigen liegt das Wort auf dem Schleier (ergibt #D9CEB7) und kommt auf 4,6:1 - beides ueber 4,5. Deshalb Deckung 10 % und nicht mehr; bei 13 % waeren es 4,4:1. */ .fuss__seiten a{color:var(--text)} /* Die Kontinente erben aus .fuss__zeile a einen Unterstrich beim Zeigen. Mit dem runden Grund wuerde daraus ein Bogen unter der Plakette - deshalb hier ausdruecklich durchsichtig. Der Platz dafuer bleibt stehen, damit sich beim Zeigen nichts um einen Pixel verschiebt. */ .fuss__kats a{padding:6px 11px} .fuss__kats .fuss__punkt{color:var(--gold-hell-grund)} /* Auch die letzte Zeile in Gold - Dani, 09.09.2026: "und das natuerlich auch in gold". Betrifft "(c) 2026 Andre Gebel" neben dem Impressum-Verweis. #6E5417 auf #E5DCC9 sind 5,2:1, bei 12px ausreichend. */ .fuss__seiten{color:var(--gold-hell-grund)} .fuss__klein{color:var(--gold-hell-grund);border-top:1px solid #D2C7B0} /* ---------------------------------------------- Alle Verweise im Fuss gleich Dani, 09.09.2026: "bei allen links im fuss das selbe". Jeder Verweis im Fuss steht in Gold und bekommt beim Zeigen denselben blassen Goldschleier in runder Form - keine Unterstriche mehr, die gab es vorher in drei Varianten. Nachgerechnet: #6E5417 auf dem Fussgrund #E5DCC9 5,2:1; auf dem Schleier (ergibt #D9CEB7) 4,6:1 - beides ueber 4,5. Deshalb Deckung 10 % und nicht mehr; bei 13 % waeren es nur noch 4,4:1. Der Unterstrich aus .fuss__zeile a und .fuss__adressen a wird ausdruecklich durchsichtig gesetzt: mit dem runden Grund wuerde daraus ein Bogen unter dem Wort. Der Platz dafuer bleibt stehen, damit beim Zeigen nichts verrutscht. */ .fuss a{color:var(--gold-hell-grund);border-radius:999px; border-bottom-color:transparent; transition:background-color .25s ease,color .25s ease} .fuss a:hover{color:var(--gold-hell-grund);background:rgba(110,84,23,.10); border-bottom-color:transparent} /* Verweise im Fliesstext: #7C5F1F kam auf dem hellen Grund #EDE6D8 nur auf 4,4:1 - unter der Grenze von 4,5. #6E5417 sind 5,8:1. Nachgerechnet. Der Strich darunter bleibt fein und wird beim Zeigen voll. */ .text a{color:var(--gold-hell-grund);border-bottom-color:rgba(110,84,23,.35)} .text a:hover{border-bottom-color:var(--gold-hell-grund)} /* Auf der Ueber- und der About-Seite bekommt die Ueberschrift drei Punkte: "Ueber..." und "About...". Dani, 09.09.2026. Die Punkte stehen im Stil, nicht im Text - in about.md heisst die Seite weiterhin schlicht "Ueber", und im Menue, im Fenstertitel und in der Adresse steht sie ebenso ohne Punkte. Zum Zurueckdrehen: diese zwei Zeilen loeschen. ‼ 10.09.2026: die Kennung heisst jetzt .seite--ueber. Vorher hiess sie .seite--autor und haengte an dem Autorenkasten - mit dem Foto waeren die drei Punkte lautlos mitverschwunden. */ .seite--ueber .buehne__titel::after{content:"\2026"} /* Die Schlagworte unter einem Beitrag - dasselbe Bild wie das Blaettern: feiner Goldumriss, Goldschrift, beim Zeigen der blasse Schleier. Sie waren grau mit eckigen Ecken, das letzte Bauteil aus Design 1 im Lesebereich. Nachgerechnet: #6E5417 auf #EDE6D8 5,8:1, auf dem Schleier 5,0:1. Dani, 09.09.2026 ("schau ob da noch mehr dunkle irgendwo sind"). */ .marken a{color:var(--gold-hell-grund);border-color:rgba(110,84,23,.45); border-radius:999px;transition:background-color .25s ease,border-color .25s ease} .marken a:hover{color:var(--gold-hell-grund);border-color:rgba(110,84,23,.45); background:rgba(110,84,23,.10)} /* ------------------------------------------------ Das Blaettern in Gold Dani, 09.09.2026: "und die auch in gold". Gleiches Bild wie Kopfleiste und Fuss: feiner Goldumriss, Goldschrift, beim Zeigen der blasse Schleier. Die Seite, auf der man steht, ist gefuellt - wie die Plaketten oben beim Zeigen. Nachgerechnet auf dem Seitengrund #EDE6D8: Gold 5,8:1, Creme auf gefuelltem Gold 5,8:1, Gold auf dem Schleier 5,0:1 - alle drei ueber 4,5. Die Ecken werden rund wie ueberall sonst. Zum Zurueckdrehen die eine Zahl: border-radius:999px -> 2px. */ .blaettern a,.blaettern span{border-color:rgba(110,84,23,.45); color:var(--gold-hell-grund);border-radius:999px} .blaettern a:hover{border-color:rgba(110,84,23,.45); color:var(--gold-hell-grund);background:rgba(110,84,23,.10)} .blaettern .jetzt{background:var(--gold-hell-grund); border-color:var(--gold-hell-grund);color:var(--grund)} .blaettern .weit{border:0;background:none;color:rgba(110,84,23,.6)} /* ------------------------------------ Die Kontinente oben, gleicher Effekt Dani, 09.09.2026: "diese Tabs auch wenn man drueber geht wie unten im Fuss". Also derselbe blasse Goldschleier. Die Woerter bleiben dunkel - oben sind sie die Hauptnavigation und tragen mit 14:1 deutlich besser als Gold mit 5,2:1; wie im Fuss aendert sich die Schriftfarbe beim Zeigen nicht, es kommt nur der Schleier dazu. Damit die Leiste nicht hoeher und die Reihe nicht breiter wird, wandert der Innenabstand von der Leiste in die Woerter: Leiste 10px -> 4px, Wort 6px (10+10 = 4+6+6+4). Seitlich bekommt jedes Wort 11px, also faellt die Fuge um 22px: 34px -> 12px, macht wieder 34px Abstand zwischen zwei Woertern. */ .kopf2{padding-top:4px;padding-bottom:4px;gap:clamp(2px,.6vw,12px)} .kopf2__link{padding:6px 11px;border-radius:999px; transition:background-color .25s ease,color .25s ease} .kopf2__link:hover{color:var(--text);background:rgba(110,84,23,.10)} .fuss__name,a.fuss__name:hover{padding:4px 16px} /* Die Wortmarke ist ausgenommen: mit Stern ist sie so gross, dass der Schleier ein Knopf wird - sie ist die Marke, kein Menuepunkt. Sie bleibt golden und reagiert nicht. Zum Zurueckdrehen: die naechste Zeile loeschen und '.fuss__marke,.fuss__marke:hover{padding:6px 18px}' setzen. Dani, 09.09.2026. */ .fuss a.fuss__marke:hover{background:none} .fuss__adressen a,.fuss__seiten a,.fuss__klein a{display:inline-block; padding:4px 10px;margin:-4px 0} /* ------------------------- Die beiden Link-Karten auf der Ueber-Seite */ .autor__was{color:var(--gold-hell-grund)} .autor__seite:hover .autor__adresse{color:var(--gold-hell-grund)} /* ---------------------------- Galerie-Aufbau auf hellem Grund Die Ueberschrift "Alle Beitraege" und der Titel unter einem Bild standen im dunklen Gold (#7C5F1F). Auf dem helleren Papier sind das 4,8:1 - es traegt, ist aber der knappste Wert der Fassung. Hier steht deshalb dasselbe Gold wie im Fuss: #6E5417, 5,8:1. */ .gal-streifen__kopf h1,.gal-streifen__kopf h2{color:var(--gold-hell-grund)} /* "Seite 2 von 5" stand in Grau - jetzt in Gold wie die Ueberschrift daneben, nur klein. #6E5417 auf #EDE6D8 sind 5,8:1. Dani, 09.09.2026. */ .gal-streifen__seite{color:var(--gold-hell-grund)} /* Die Haarlinien neben der Ueberschrift sind weg - Dani, 09.09.2026: "diese Linie kann weg". Das Element steht nicht mehr im Weg, die Mitte kommt jetzt aus dem Dreispaltenraster oben. */ .stimmen__kopf,.stimme cite{color:var(--gold-hell-grund)} .stimme::before{color:rgba(110,84,23,.3)} /* Die zwei Kicker auf hellem Grund: #7C5F1F kam bei 10,5 bzw. 11px nur auf 4,4:1 - unter der Grenze. #6E5417 sind 5,8:1. Nachgerechnet, 09.09.2026. Der Kicker AUF den Bildern bleibt #D9BC7A, der steht auf dunklem Grund. */ .gal-klein__kicker,.kachel__kicker{color:var(--gold-hell-grund)} .gal-klein:hover .gal-klein__kicker{color:var(--gold-hell-grund)} .gal-klein:hover .gal-klein__titel{color:var(--gold-hell-grund)} /* =========================================================================== DAS HANDY, 12.09.2026 - DREI PUNKTE VON DANI, IN EINEM BLOCK premiumescapes.de "bei premiumescapes bei der mobile version das menue oben nach rechts bitte und das logo und premiumescapes davor links so wie es passt ... wenn man da menu aufklappt sitzen die social media icons nicht richtig ... also die social auch etwas auffaelliger machen im menu" und, nachgeschoben: "auch die menue leiste farbig ... vielleicht blau mit weiss". Gewaehlt hat er am 12.09. Fassung A und beide Menues farbig. Gezeigt wurde das in C:\JO\ANdreGebel\VORSCHAU_1209_Handy\index.html - 20 Fenster in Handybreite, gebaut aus DIESER Datei und dem echten Menue aus live/index.html, kein Nachbau. Zuruecknehmen: diesen ganzen Block loeschen. Die drei Punkte sind darin einzeln ueberschrieben und lassen sich auch einzeln herausnehmen. ‼ Nur Stil. An bau.py aendert sich NICHTS. =========================================================================== */ /* --------------------------------------------------------------------------- 1) KOPFLEISTE AUF DEM HANDY: MENUEKNOPF RECHTS, WORTMARKE NACH LINKS Dani, 12.09., in drei Schritten - der letzte gilt: "das logo und premiumescape davor links so wie es passt" "und das vielleicht zentriert, logo und name oben" "das logo oben und premiumescape bitte mehr nach links in der mobile version" Vorher stand der Knopf LINKS und die Wortmarke in der Mitte - genauer: in der Mitte der Restflaeche, nicht in der Mitte der Leiste. Jetzt steht der Knopf rechts, und das Raster behaelt seine drei Spalten: links leer, in der Mitte die Marke, rechts der Knopf. DIE EINE ZAHL IST DER GANZE REGLER: die Breite der LEEREN linken Spalte. Bei 1fr sind beide Aussenspalten gleich breit, die Marke steht dann exakt mittig. Je kleiner der Wert, desto weiter links steht sie. Gemessen bei 375 px, Abstand der Marke vom linken Seitenrand: 1fr mittig turnagain 100 px premiumescapes 82 px .62fr ein Stueck 84 px 70 px .35fr GEWAEHLT 67 px 58 px Spalte ganz weg 22 px 22 px Zum Verschieben nur diesen einen Wert aendern - sonst nichts. Die Reihenfolge im Quelltext bleibt, wie sie ist (Menueknopf, Marke, UEBER/ENGLISH); nur das Raster setzt sie um. Fuer Vorlesegeraete aendert sich dadurch nichts. .kopf__rechts ist unter 640 px ohnehin leer (.sprache{display:none}) und wird ausgeblendet, sonst beanspruchte es eine vierte Spalte. NACHGEMESSEN, Abstand der Marke vom linken Seitenrand: 320 px 37 px 360 px 54 px 375 px 58 px 390 px 51 px 412 px 57 px 430 px 62 px 640 px 116 px Luecke zum Menueknopf 12 bis 212 px, nirgends seitliches Scrollen. ‼ Bei 390 px springt der Wert zurueck, weil dort der Zusatzblock unten aufhoert und die Wortmarke wieder ihre volle Groesse hat (211 -> 252 px). Das ist gewollt, nicht ein Fehler in der Messung. --------------------------------------------------------------------------- */ @media(max-width:640px){ /* ‼ 12.09.2026 (Dani): "kann man das logo oben mehr nach links setzen? name bleibt mittig." Das geht nicht durch Verschieben des Logoblocks: Zeichen und Name sind EIN , und wer den Block verschiebt, nimmt den Namen mit. Vorher stand deshalb der ganze Block nach links versetzt (Raster .35fr), und der Name landete nur ZUFAELLIG nahe der Mitte - bei 375 px 11 px daneben, bei 640 px 75 px. Jetzt spannt der Logoblock ueber die ganze Leiste und zentriert seinen Inhalt; das Zeichen ist per position:absolute aus dem Fluss genommen und klebt links. Dadurch steht der NAME bei jeder Breite exakt mittig, und das Zeichen immer 16 px vom Rand - beides unabhaengig voneinander. ‼ pointer-events: der Block liegt jetzt ueber der ganzen Leiste und wuerde den Menueknopf verdecken. Deshalb ist er selbst fuer Klicks durchlaessig, nur Zeichen und Name nehmen sie an; der Knopf bekommt zusaetzlich z-index. NACHGEMESSEN - Name mittig bei 320, 360, 375, 390, 412 und 640 px: Abweichung ueberall 0 px, Zeichen ueberall 16 px vom Rand. Abstand Zeichen zu Name: 320 px 26 px 360 px 46 px 375 px 54 px 390 px 42 px 412 px 53 px 640 px 167 px Luecke Name zu Menueknopf 12 bis 156 px. Der Sprung bei 390 px kommt vom Zusatzblock darunter: dort endet die verkleinerte Wortmarke. Zuruecknehmen: diesen @media-Block ersetzen durch .kopf1{grid-template-columns:.35fr auto 1fr;gap:10px} .kopf__logo{grid-column:2;grid-row:1;justify-self:center} .kopf__links{grid-column:3;grid-row:1;justify-self:end} .kopf__rechts{display:none} */ .kopf1{grid-template-columns:1fr auto 1fr;gap:10px} .kopf__logo{grid-column:1 / -1;grid-row:1;position:relative;width:100%; display:flex;justify-content:center;gap:0;pointer-events:none} .kopf__logo svg{position:absolute;left:0;top:50%;transform:translateY(-50%); pointer-events:auto} .kopf__name{pointer-events:auto} .kopf__links{grid-column:3;grid-row:1;justify-self:end;position:relative;z-index:2} .kopf__rechts{display:none} } /* Nur premiumescapes: die lange Wortmarke auf schmalen Geraeten kleiner. */ @media(max-width:380px){ .kopf__logo{gap:11px} .kopf__name{font-size:14px;letter-spacing:1.5px} .kopf__logo svg{width:24px;height:24px} } /* --------------------------------------------------------------------------- 2) DIE KANAELE IM KLAPPMENUE - EIGENE ZEILE, RUNDE PLAKETTEN (Fassung A) WAS SCHIEF WAR, nachgemessen an der laufenden Seite bei 375 px: .menue__zeile war display:flex mit justify-content:space-between. Links stand .menue__extern ("Alle Beitraege", die Adressen), das bei 375 px zwei Zeilen braucht; rechts .menue__sozial. Das Menue ist dort 330 px breit, minus 2 x 44 px Innenabstand bleiben 242 px. Vier Zeichen a 44 px sind allein 176 px - bei turnagain stand das letzte Zeichen AUSSERHALB und das Menue liess sich seitlich schieben. Bei premiumescapes passte es, sass aber zwischen den zwei Textzeilen und sah versetzt aus. Die Zeile wird deshalb aufgeloest: die Kanaele bekommen eine eigene Zeile unter einer feinen Linie. Die Plakette ist dieselbe Form, die oben in der Kopfleiste schon fuer die Kanaele und fuer UEBER/ENGLISH steht - das Menue erfindet nichts Neues, es wird nur groesser. Antippflaeche 46 x 46 px (Grenze ist 44), Zeichen 22 px. Die drei Werte --kanal-* stehen auf .menue, damit Punkt 3 sie umsetzen kann, ohne diese Regeln anzufassen. --------------------------------------------------------------------------- */ .menue{--kanal-farbe:#6E5417;--kanal-gegen:var(--grund); --kanal-rand:rgba(110,84,23,.45)} .menue__zeile{display:block;margin-right:0} .menue__zeile .menue__extern{margin-top:14px} .menue__sozial{display:flex;gap:10px;margin-top:22px;padding-top:20px; border-top:1px solid var(--linie)} .menue__sozial a{width:46px;height:46px;border-radius:999px; color:var(--kanal-farbe);box-shadow:inset 0 0 0 1px var(--kanal-rand); transition:background .2s ease,color .2s ease,box-shadow .2s ease} .menue__sozial a:hover,.menue__sozial a:focus-visible{ background:var(--kanal-farbe);color:var(--kanal-gegen); box-shadow:inset 0 0 0 1px var(--kanal-farbe)} .menue__sozial svg{width:22px;height:22px} /* --------------------------------------------------------------------------- 3) DIE MENUEFLAECHE -- BLEIBT HELL. Erledigt, 12.09.2026. Das Klappmenue traegt wieder die Papierfarbe var(--grund) #EDE6D8 - dieselbe Flaeche wie die Kopfleiste darueber. Das ist der Zustand aus dem Farbblock weiter oben (".menue{background:var(--grund)}"); hier steht nur noch, WARUM nichts anderes kommt. VIER FASSUNGEN AUSPROBIERT, ALLE VERWORFEN - nicht nochmal vorschlagen: 1. #6E5417 dunkles Gold, weisse Schrift, 7,13:1. Dani: "bei premium ist das immer ein anderes gold als der seitenhintergrund." Mein Fehler: der SCHRIFTton der Fassung als Flaeche. 2. #C0A054, die Rahmenfarbe selbst, dunkle Schrift, 6,66:1. Dani: "ich glaube weisse schrift waere da klar lesbarer." 3. #6A582E, Rahmenfarbe abgedunkelt, weisse Schrift, 6,89:1 - rechnerisch die beste. Dani: "2 verschiedene gold sieht nicht aus." 4. #C0A054 mit weisser Schrift, als Probe live gestellt. 2,50:1, die Grenze ist 4,5:1. Dani am eigenen Geraet: "hattest recht schwer zu lesen." Danach, 12.09.: "kannst du da wieder die creme farbe die auch oben leiste ist." Damit ist es entschieden. ‼ Punkt 2 (die runden Plaketten) braucht dafuer KEINE Aenderung. Die drei Werte --kanal-farbe / --kanal-gegen / --kanal-rand stehen dort auf dem hellen Grund; sobald hier nichts mehr dagegensteht, gelten sie wieder. Ebenso --linie: ohne diesen Punkt gilt wieder #D9D0BC. Wer die Flaeche doch einmal faerben will: eine .menue{background:...}-Regel hierher, und die drei --kanal-* gleich mit umsetzen - sonst steht die Plakette in der Menuefarbe auf der Menuefarbe. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 4) DAS MENUE LAEUFT AUF SCHMALEN GERAETEN SEITLICH UEBER Beim vollstaendigen Nachmessen nach dem Livegang gefunden, 12.09.2026. ‼ NICHT von Punkt 2 verursacht - der Fehler war vorher schon da, nur von dem groesseren Ueberlauf der Kanaele verdeckt. Gemessen an der alten und der neuen Fassung nebeneinander, jeweils der Wert, um den etwas ueber den rechten Menuerand hinausragt: 320 px 360 px 375 px turnagain alt 121 px 86 px 73 px (Kanaele + Schliessen) turnagain neu 47 px 12 px 0 px (nur noch Schliessen) premium alt 18 px 0 px 0 px premium neu 18 px 0 px 0 px WAS UEBERLAEUFT: .menue__kopf ist ein flex mit 20 px Abstand - links die Wortmarke, rechts der Knopf "SCHLIESSEN x" mit white-space:nowrap und 123 px Breite. Das Menue ist 88vw breit, bei 360 px also 317 px, davon gehen 2 x 44 px Innenabstand ab - es bleiben 229 px fuer 241 px Inhalt. Bei premiumescapes faellt es kaum auf, weil "PREMIUM ESCAPES" auf zwei Zeilen umbricht und damit schmal wird; "TURNAGAIN" ist ein Wort und bleibt breit. Deshalb trifft es turnagain staerker, obwohl der Name kuerzer ist. DIE ABHILFE, in zwei Stufen: unter 380 px Innenabstand des Menues 44 -> 26 px, der Knopf eine Spur kleiner (11 -> 10 px, Sperrung 2,2 -> 1,5 px) unter 340 px dazu der Abstand in der Kopfzeile 20 -> 10 px und die Wortmarke im Menue 19 -> 16 px Nachgemessen bei 320, 360, 375, 390 und 412 px: beide Seiten, Ueberlauf ueberall 0 px. ‼ Der Innenabstand wirkt bis 380 px, also auch bei 375 px, wo es schon ohne ihn passte. Das Menue wird dort einen Tick breiter genutzt - gewollt, sonst braeuchte es einen krummen Haltepunkt bei 373 px. Zuruecknehmen: diesen Punkt 4 loeschen. Dann steht "SCHLIESSEN x" auf Geraeten unter 375 px wieder halb ausserhalb. --------------------------------------------------------------------------- */ @media(max-width:380px){ .menue{padding-left:26px;padding-right:26px} .menue__zu{font-size:10px;letter-spacing:1.5px} } @media(max-width:340px){ .menue__kopf{gap:10px} .menue__name{font-size:16px} } /* --------------------------------------------------------------------------- 5) DIE MARKE IM FUSS - ZEICHEN UEBER DEM WORT, GROESSER Dani, 12.09.2026: "bei premium escape das logo ueber den namen setzen wie bei turn again. villeicht auch bissel groesser." Angekuendigt war es schon am 10.09., als turnagain es bekam: "Dasselbe wuerde ich spaeter bei Premium Escapes machen." Design 1 stellt Zeichen und Wort NEBENEINANDER (flex-direction:row, 15 px Abstand, Zeichen 34 px). Hier stehen sie uebereinander, das Zeichen oben und deutlich groesser. ‼ UNTERSCHIED ZU TURNAGAIN, bewusst: dort wurde im selben Zug auch die SCHREIBWEISE geaendert - "turnagain" klein, in Archivo, ohne Sperrung, weil seine Wortmarke ueberall so aussieht. Hier bleibt "PREMIUM ESCAPES" wie es ist: Libre Baskerville, Versalien, gesperrt - so wie oben in der Kopfleiste. Gefragt war die Anordnung, nicht die Schrift. ‼ Die Groesse steht an ZWEI Stellen: hier die Breite und in bau.py der Wert in stern_svg("#C9A75B", 58) fuer die Attribute des SVG. Wer eine aendert, muss die andere mitziehen. Zuruecknehmen: diesen Punkt 5 loeschen UND in bau.py die 58 wieder auf 34 setzen. --------------------------------------------------------------------------- */ .fuss__marke{flex-direction:column;gap:clamp(10px,1.4vw,16px)} .fuss__marke svg{width:clamp(46px,6vw,66px);height:auto} /* --------------------------------------------------------------------------- DIE MENUEPUNKTE EINE SPUR GROESSER - 12.09.2026 Dani, nachdem er das Menue auf dem eigenen Geraet gelesen hat: 13 px sind fuer gesperrte Versalien knapp. 13 -> 14 px, sonst nichts: Sperrung, Zeilenabstand und Innenabstand bleiben, die Zeilen wachsen dadurch nur um 1 px (50 -> 51 px). NACHGEMESSEN, ob es noch passt. Der laengste Eintrag ist "PREMIUM ESCAPES" im Menue von turnagain; gemessen ist die Textbreite ohne Umbruch gegen den Platz, der im Menue zur Verfuegung steht: Text 13 px Text 14 px Platz im Menue 320 px 155 px 161 px 230 px 360 px 155 px 161 px 265 px 375 px 155 px 161 px 278 px Kein Eintrag bricht um, kein seitliches Scrollen. Bei premiumescapes ist der laengste "Startseite" mit 104 px - dort ist es ohnehin unkritisch. Beide Blogs bekommen denselben Wert. Sie sind Schwesterseiten; 13 px hier und 14 px dort waere eine Abweichung ohne Grund. Zuruecknehmen: diesen Block loeschen, dann gelten wieder die 13 px aus der Grundregel .menue__link. --------------------------------------------------------------------------- */ .menue__link{font-size:14px} /* =========================================================================== DAS MENUE OHNE SCROLLEN, UND DIE KANAELE IN IHREN FARBEN - 12.09.2026 Dani: "ich wuerde gern alles sehen vor allem die social ohne zu scrollen. da ist ja auch viel platz. den tap startseite kannst du schonmal loeschen ... unter englisch sind 2 blaue linien, eine kannst du loeschen" und "koennen die social icons hier die farbe bekommen die sie haben vom brand? also facebook blau und so weiter." 1) DIE ZWEI LINIEN. Unter dem letzten Menuepunkt lagen zwei: die Unterlinie des Punktes selbst (.menue__link) und die Oberlinie des Menuefusses (.menue__fuss). Weg ist die des FUSSES, nicht die des Punktes - sonst haette der letzte SICHTBARE Punkt mal eine Linie und mal keine, je nachdem ob ENGLISH gerade eingeblendet ist (das haengt an 640 px). Der Abstand bleibt, er kam nie von der Linie, sondern vom Innenabstand. 2) OHNE SCROLLEN. Gemessen an der echten Seite, Inhaltshoehe des Menues gegen die Fensterhoehe: 375x812 375x667 390x844 360x740 turnagain vorher 812 767 844 767 -> scrollte turnagain jetzt 812 667 844 740 -> passt premiumescapes vorher 812 741 844 741 -> scrollte premiumescapes jetzt 812 667 844 740 -> passt Die Kanaele stehen jetzt bei jeder dieser Groessen 36 px INNERHALB des unteren Randes. Erreicht mit vier Zahlen und dem Wegfall der Startseite: Innenabstand des Menues 46/45 -> 38/36 px Abstand um die Punkteliste 36 -> 22 px Innenabstand je Punkt 16 -> 14 px Innenabstand des Fusses 24 -> 20 px ‼ Die Antippflaeche je Punkt bleibt bei 14 px Innenabstand und 14 px Schrift ueber 40 px hoch - die Punkte stehen als Block untereinander, da gilt die 44-px-Regel nicht so streng wie bei Knoepfen nebeneinander. 3) DIE KANAELE IN IHREN FARBEN. Die Zeichen tragen fill="currentColor", deshalb genuegt die Farbe je Kanal - an bau.py aendert sich dafuer nichts. Gesetzt wird nicht "color", sondern --kanal-farbe und --kanal-rand: damit stimmen Zeichen, Umriss UND die Fuellung beim Zeigen von selbst, weil Punkt 2 alles aus diesen beiden Werten ableitet. GERECHNET auf dem Papier #EDE6D8, Grenze 3:1 fuer Zeichen: Facebook #1877F2 3,40:1 Instagram #E4405F 3,25:1 Pinterest #E60023 3,84:1 ‼ Bei turnagain weicht zusaetzlich Spotify ab (#1DB954 kommt nur auf 2,08:1). Hier gibt es den Kanal nicht. Zuruecknehmen: diesen Block loeschen UND in bau.py die Startseiten-Zeile wieder einsetzen (sie steht dort auskommentiert). =========================================================================== */ .menue{padding:38px 44px 36px} .menue__links{margin:22px 0} .menue__link{padding:14px 0} .menue__fuss{border-top:0;padding-top:20px} .menue__sozial a[aria-label="Instagram"]{--kanal-farbe:#E4405F;--kanal-rand:rgba(228,64,95,.5)} .menue__sozial a[aria-label="Pinterest"]{--kanal-farbe:#E60023;--kanal-rand:rgba(230,0,35,.5)} /* =========================================================================== DIE KANAELE IM FUSS ALS ZEICHEN - 12.09.2026 Dani: "muesste schon gleich sein ungefaehr bei beiden." turnagain trennt seit dem 11.09. seine zwei Seiten (als Worte) von den Kanaelen (als Zeichen, eine Zeile darunter). Premiumescapes hatte alles in einer Zeile - auf dem Handy wurden daraus zwei Zeilen aus vier Worten. Der Block ist Zeichen fuer Zeichen der aus turnagains stil.css, mit einem Unterschied: DIE FARBEN. Dort liegt der Fuss auf Marineblau und die Zeichen sind cremefarben; hier liegt er auf Sand #E5DCC9. NEU GERECHNET auf #E5DCC9: #6E5417 (--gold-hell-grund) 5,24:1 beim Zeigen Schleier 10 %% Gold - dieselbe Bewegung wie bei jedem anderen Verweis in diesem Fuss (.fuss a:hover), deshalb hier derselbe Wert. ‼ Nicht von turnagain uebernommen: dort ist der Schleier Weiss mit 16 %% - auf hellem Sand waere der unsichtbar. Der Name jedes Kanals steht im aria-label - fuer Vorlesegeraete aendert sich nichts. Zuruecknehmen: diesen Block loeschen UND in bau.py die eine Zeile aus KANAELE + SEITEN_VON_ANDRE wiederherstellen (sie steht dort auskommentiert). =========================================================================== */ .fuss__zeichen{display:flex;justify-content:center;align-items:center; gap:clamp(14px,2vw,24px);margin:16px 0 0;line-height:0} .fuss__zeichen a.fuss__kanal{color:var(--gold-hell-grund);padding:9px; border-radius:8px;display:inline-flex;background:none;box-shadow:none; transition:background-color .25s ease} .fuss__zeichen a.fuss__kanal:hover{background:rgba(110,84,23,.10); color:var(--gold-hell-grund)} .fuss__zeichen svg{width:22px;height:22px} /* --------------------------------------------------------------------------- DIE ZWEI ADRESSEN IM MENUEFUSS GLEICH, DIE KANAELE HOEHER - 12.09.2026 Dani: "andregebel und premium unten bitte gleich machen schrift das die untereinander stehen. und die symbole social koennen dann was hoeher." Vorher trugen die beiden Adressen ZWEI Schriftbilder: andregebel.de stand als .menue__mail in Libre Baskerville bei 16 bis 21 px, die andere Adresse als .menue__extern in Archivo bei 11,5 px, Versalien, gesperrt. Dass sie dasselbe sind - eine Adresse von Andre - war daran nicht zu erkennen. Jetzt beide in der Form von andregebel.de, untereinander. .menue__extern war ein liegender Flexkasten mit 20 px Abstand; mit nur noch einem Eintrag darin braucht es das nicht mehr, deshalb steht er jetzt als Spalte. ‼ DIE KANAELE RUECKEN NICHT VON SELBST HOCH. Nachgemessen: "Alle Beitraege" wegzunehmen aendert ihre Lage um 0 px. Der Grund ist .menue__fuss{margin-top:auto} - der ganze Fussteil wird an den UNTEREN Rand des Menues gedrueckt, egal wie kurz er wird. Alles, was oben wegfaellt, vergroessert nur die Luecke in der Mitte. Deshalb wird der Abstand hier fest: margin-top 28 px statt auto. Der Fussteil folgt jetzt auf die Menuepunkte, statt unten zu kleben; unter den Kanaelen bleibt Leerraum. Zusaetzlich schrumpft der Abstand ueber den Kanaelen von 22 + 20 px auf 14 + 14 px. Zuruecknehmen auf "unten klebend": margin-top wieder auf auto. Farbe: beide Adressen in --text statt der leisen --meta - sie sind gleichwertig und sollen auch gleich aussehen. Zuruecknehmen: diesen Block loeschen. --------------------------------------------------------------------------- */ .menue__extern{flex-direction:column;gap:4px;margin-top:4px; font-family:var(--schrift-display);font-size:clamp(16px,1.5vw,21px); letter-spacing:0;text-transform:none} .menue__extern a{color:var(--text);padding:6px 0;display:inline-block} .menue__extern a:hover{color:var(--gold)} .menue__fuss{margin-top:28px} .menue__sozial{margin-top:14px;padding-top:14px} /* --------------------------------------------------------------------------- NUR NOCH EIN KREUZ ZUM SCHLIESSEN - 12.09.2026 Dani: "das wort schliessen wegmachen. nur ein kreuz aber etwas groesser." Das Wort ist in bau.py ins aria-label gewandert, sichtbar bleibt das Kreuz. GROESSE UND ANTIPPFLAECHE. Das Kreuz erbte bisher die 11 px des Wortes und war damit winzig. Jetzt 30 px bei Zeilenhoehe 1. Mit 7 px Innenabstand oben und unten und 12 px links und rechts ergibt das eine Antippflaeche von 44 x 44 px - genau die Grenze. Der negative Aussenabstand haelt das Kreuz trotzdem buendig am rechten Menuerand und auf der Hoehe der Wortmarke. ‼ Die Sperrung von 2,2 px muss weg: sie haengte sonst als Leerraum RECHTS am Kreuz und schoebe es sichtbar nach links. ‼ Der Block gap von 14 px im Knopf wird nicht mehr gebraucht - er stand zwischen Wort und Kreuz. Die Farbe bleibt, wie sie war (--gold, beim Zeigen --text). Zuruecknehmen: diesen Block loeschen UND in bau.py das Wort wieder vor das setzen. --------------------------------------------------------------------------- */ .menue__zu{font-size:30px;line-height:1;letter-spacing:0;gap:0; padding:7px 12px;margin:-7px -12px -7px 0} /* ‼ Nachtrag 12.09.2026 (Dani): "das kreuz kann hinter den namen oben mit abstand." Es stand bis hier am rechten Menuerand, weil .menue__kopf ein flex mit justify-content:space-between ist. Jetzt folgt es direkt auf die Wortmarke. Der Abstand ist clamp(16px,4vw,28px); dazu kommen die 12 px Innenabstand des Knopfes, optisch also 28 bis 40 px. Nachgemessen bei 320, 360 und 375 px: kein Umbruch, kein seitliches Scrollen, das Kreuz bleibt bei premiumescapes neben der ersten Zeile der zweizeiligen Wortmarke. Zuruecknehmen: diese eine Regel loeschen, dann steht es wieder rechts. */ .menue__kopf{justify-content:flex-start;gap:clamp(16px,4vw,28px)} /* ‼ Nachtrag 12.09.2026 (Dani): "das andregebel im menue und premium kann ja locker noch hoeher bei beiden." Die Luecke zwischen dem letzten Menuepunkt und den Adressen war die SUMME zweier Abstaende - .menue__links hat unten 22 px, .menue__fuss hatte oben 28 px. In einem flex-Kasten addieren sich die beiden (sie fallen NICHT zusammen wie in normalem Fluss), macht 50 px. Jetzt 22 + 6 = 28 px. Zuruecknehmen: 6px wieder auf 28px. Auf "unten klebend" (der Stand vor heute): auf auto. */ .menue__fuss{margin-top:6px} /* --------------------------------------------------------------------------- DIE KANAELE IM MENUE UEBER DIE ADRESSEN - 12.09.2026 Dani: "kannst du die social icon ueber andregebel setzen. also zwischen die und so hast du direkt einen platzhalter." Die Reihenfolge steht jetzt in bau.py: Kanaele, dann andregebel.de, dann die zweite Adresse. Hier faellt nur weg, was zur alten Lage gehoerte: die Linie UEBER den Kanaelen und ihr Abstand nach oben. Beides war dafuer da, sie vom Textblock darueber zu trennen - jetzt stehen sie selbst oben, und der letzte Menuepunkt bringt seine eigene Linie mit. Zwei Linien uebereinander waren genau das, was am 12.09. schon einmal wegsollte. ‼ Der Abstand nach unten muss GROESSER sein als die Zahl vermuten laesst: .menue__mail traegt margin:-10px 0, das frisst zehn davon wieder auf. Gemessen: 30 px hier ergeben 20 px sichtbar. Nach oben stehen 50 px - die Kanaele sitzen damit naeher an den Adressen als an den Menuepunkten, sie gehoeren optisch zum unteren Block. Zuruecknehmen: diesen Block loeschen UND in bau.py die Reihenfolge umdrehen. --------------------------------------------------------------------------- */ .menue__sozial{margin:2px 0 30px;padding-top:0;border-top:0} /* --------------------------------------------------------------------------- DAS KREUZ ALS ZEICHNUNG, NICHT ALS SCHRIFTZEICHEN - 12.09.2026 Dani: "kann man das auffaelliger machen? bei turnagain ist das kreuz glaub falsch sieht anders aus." ‼ FALSCH WAR ES NICHT. Nachgemessen an beiden Seiten: dieselbe Schrift (Archivo 600), dieselbe Groesse (30 px), dasselbe Zeichen (U+00D7), dieselben Masse (19 x 30 px). Der Unterschied lag nur an der FARBE - turnagain #0C3163 blau, premiumescapes #7C5F1F gold - und an der unterschiedlichen Skalierung der beiden Bildschirmfotos. ZU ZART WAR ES TROTZDEM, und zwar aus einem Grund, der sich nicht per CSS beheben laesst: × ist das MULTIPLIKATIONSZEICHEN. Es ist als Rechenzeichen gezeichnet - schmal, duennstrichig, und es nutzt von 30 px Schriftgroesse nur 19 px Breite. Fetter geht auch nicht: schriften.css laedt Archivo nur bis 600. Jetzt ist es ein SVG mit fester Strichstaerke. Damit ist es auf beiden Seiten Strich fuer Strich dasselbe, unabhaengig von der Schrift, und die Staerke ist eine Zahl statt einer Schriftschnitt-Frage. Groesse 26 x 26 px (vorher 19 x 30) Strichstaerke 2,8 von 24 ergibt rund 3 px Farbe currentColor - also weiter --gold, wie jede andere Schaltflaeche im Menue ‼ Der Innenabstand oben und unten muss dabei von 7 auf 9 px: das SVG ist 26 px hoch, das Schriftzeichen war 30. Ohne die Anpassung waere die Antippflaeche auf 40 px geschrumpft. Jetzt 50 x 44 px, die Grenze ist 44. Zuruecknehmen: in bau.py wieder und diesen Block loeschen. --------------------------------------------------------------------------- */ .menue__kreuz{width:26px;height:26px;display:block} .menue__zu{padding:9px 12px;margin:-9px -12px -9px 0} /* ═══════════════════════════════════════════════════════════════════════════ 12.09.2026 - DIE KANAELE IM KLAPPMENUE EINE ZEILE HOEHER Dani: "die mittleren eine zeile hoeher wenns geht" Der Abstand von der Trennlinie unter dem letzten Menuepunkt bis zu den Zeichen war 50 px und setzte sich aus vier Teilen zusammen: .menue__links margin-bottom 22 .menue__fuss margin-top 6 .menue__fuss padding-top 20 <- faellt hier weg .menue__sozial margin-top 2 Das Polster von 20 px stammt aus dem Block "Menue ohne Scrollen" vom 12.09.; damals sass darunter die Adresszeile, nicht die Zeichen. Ohne das Polster bleiben 30 px - der ganze Fuss samt Adressen rutscht um 20 px hoch, die Abstaende innerhalb des Fusses bleiben unveraendert. Gemessen an einer Kopie der echten Seite, 375x667: turnagain Zeichen vorher 423 px, jetzt 403 px; Menue endet bei 551 premiumescapes Zeichen vorher 437 px, jetzt 417 px; Menue endet bei 565 Beide ohne Scrollen, mit 116 bzw. 102 px Luft nach unten. Zuruecknehmen: diesen Block loeschen - das padding-top:20px aus dem frueheren Block gilt dann wieder. ═══════════════════════════════════════════════════════════════════════ */ .menue__fuss{padding-top:0} /* =========================================================================== DIE SUCHE 13.09.2026 Dani, 13.09.2026: "ein suchfeld ... es sind ja sehr viele eintraege und das es nach schlagwoertern sucht und die beitraege anzeigt. Es sollte ein eingabe feld sein in der 2ten zeile oben unter ueber." Zum Handy: "bei mobile muesste es in das klappmenue ... ganz oben und den namen turnagain loeschen und da das suchfeld hinsetzen." Und: "das menue find ich so gut deswegen mit den selben farben arbeiten." ‼ DIE FARBEN SIND AM LAUFENDEN STAND GEMESSEN, NICHT AUS DER NOTIZ GEHOLT. Die Notiz vom 12.09. ("Menuefläche in der Hausfarbe #0B3B7E, Schrift #F7F3EA") ist UEBERHOLT. Gemessen am 13.09. im Browser bei 390 px: Menuegrund rgb(231,239,252) = #E7EFFC, also das Papier - dieselbe helle Flaeche wie die Seite. Menuepunkte #4E5E5A, Kreuz #0C3163, Name #11211F. Ein erster Entwurf in Marineblau war deshalb hell auf hell und unlesbar. Wer hier etwas aendert: erst messen, dann schreiben. ZWEI ORTE, EIN BAUSTEIN Oben rechts in der zweiten Zeile (ueber 640 px) und im Klappmenue (dort immer, also auch auf dem Handy, wo die zweite Zeile ausgeblendet ist). Dieselben Klassen, dieselben Farben - nur die Groessen unterscheiden sich. ‼ DIE ZWEITE ZEILE WIRD ZUM DREISPALTER Sie war "display:flex; justify-content:center". Ein Feld rechts haette die Kontinente aus der Mitte geschoben. Jetzt: leere Spalte - Kontinente - Suche, mit gleich breiten Aussenspalten. Nachgemessen bei 1600, 1400, 1120, 1000, 900, 760 und 700 px: die Kontinente stehen auf den Pixel genau dort, wo sie vorher standen (Versatz 0), nirgends laeuft die Seite seitlich ueber. ‼ overflow-x:auto MUSSTE VON .kopf2 WEG. Es hielt die Kontinentzeile bei schmalen Fenstern schiebbar - haette aber die Trefferliste unten abgeschnitten. Jetzt sitzt es auf .kopf2__mitte: die Kontinente bleiben schiebbar, die Liste darf heraushaengen. ‼ UND DESHALB MUSS "display:none" UNTER 640 px HIER WIEDERHOLT WERDEN. ".kopf2{display:grid}" steht weiter unten in der Datei als der Block, der die Zeile auf dem Handy ausblendet - ohne die Wiederholung stuende sie dort wieder da. Beim ersten Anlauf ist genau das passiert (gemessen: "grid" statt "none" bei 390 px). KONTRASTE, GERECHNET NICHT UEBERNOMMEN Auf Papier #E7EFFC (Menue) / auf Weiss #FFFFFF (Kopfleiste): Titel #11211F 14,39 / 16,65 Fundstelle #4E5E5A 5,91 / 6,83 Platzhalter#586560 5,27 / 6,10 Rubrik #0C3163 11,10 / 12,84 Stern #0B3B7E 9,35 (Zeichen, Grenze 3,0) Markierung Schrift #0C3163 auf dem Schleier: 8,58 / 9,86 ‼ DER UMRISS TRAEGT 0,45 - AUF DANIS ANSAGE, MIT EINEM VORBEHALT. Dani, 13.09.: "auch die umrahmung die selbe bitte wie ueber und englisch." Das ist rgba(12,49,99,.45), und der ergibt 2,49:1 auf dem Papier und 2,60:1 auf Weiss - unter der Grenze von 3,0 fuer Bedienelemente. Bei einer beschrifteten Plakette faellt das nicht ins Gewicht, bei einem leeren Eingabefeld ist der Umriss das Einzige, woran man es erkennt. Einheitlich UND ueber der Grenze waere: beide - Plaketten und Feld - auf 0,55 (3,21 / 3,36:1). Das ist ein Handgriff, aendert aber UEBER und ENGLISH, die Andre so abgenommen hat. Danis Entscheidung, offen. Zuruecknehmen: diesen Block loeschen, in bau.py die drei Stellen (kopf2, Menuekopf, suche_index) und in skript.js den Suchblock. =========================================================================== */ /* ---------------------------------------------- die Breite des Feldes Dani, 13.09.: "das suchfeld muesste weiter nach rechts und abschliessen die kante unter Ueber ... optimal waere der abschluss kante hinten unter englisch. also vorne kante und hinten kante." Die rechte Kante stimmte schon (beide Zeilen haengen an var(--rand)), die linke ragte 40 px zu weit nach links. Eine feste Breite geht NICHT: die Plakettengruppe ist auf Deutsch "Über English" und auf Englisch "About Deutsch" - und ab 820 px wird ihre Schrift kleiner (gemessen: 156 px, dann 138 px). Deshalb misst skript.js die Gruppe und schreibt ihre Breite nach --suchbreite. Der Wert hier ist nur der Rueckfall, wenn kein Skript laeuft. =========================================================================== */ .kopf2{--suchbreite:156px} /* ‼ DIE VIER FARBWERTE DER SUCHE STEHEN HIER OBEN, WEIL SIE SICH JE BLOG UNTERSCHEIDEN. turnagain ist blau auf weiss, premiumescapes gold auf creme - dieselben Zahlen ergeben dort voellig andere Kontraste. Wer den Block in einen anderen Blog kopiert, rechnet diese vier neu und laesst den Rest. Die Werte unten sind turnagains, gerechnet auf #FFFFFF und #E7EFFC. */ .suche{ --such-umriss:rgba(12,49,99,.45); /* der Rand des Feldes */ --such-schleier:rgba(12,49,99,.09); /* Treffer beim Zeigen */ --such-mark-grund:rgba(12,49,99,.14); --such-mark-farbe:var(--gold); --such-kante:#A9BDD9; /* Kante der Trefferliste */ } /* Danis Wahl vom 13.09. aus vier Fassungen: "c lupe passt super." Im Ruhezustand steht nur das runde Zeichen - die Leiste bleibt so ruhig wie vorher. Beim Hineintippen faehrt die Plakette auf die Breite von UEBER und ENGLISH aus und schliesst an beiden Kanten mit ihnen ab. Verworfen: A (offene Plakette in voller Breite - "sieht einfach nur bissel durcheinander aus"), B (schmale Plakette unter ENGLISH), D (das Feld nimmt beim Suchen die ganze Zeile). */ .suche--oben .suche__zeile{width:38px;padding:0 5px 0 10px; transition:width .28s cubic-bezier(.22,1,.36,1),padding .28s ease, box-shadow .2s ease} .suche--oben .suche__zeile:focus-within{width:var(--suchbreite); padding:0 12px 0 11px} .suche--oben .suche__feld{width:0;flex:0 0 0;min-width:0; transition:width .28s cubic-bezier(.22,1,.36,1)} .suche--oben .suche__zeile:focus-within .suche__feld{width:auto;flex:1 1 auto} /* -------------------------------------------------- die zweite Zeile als Gitter */ .kopf2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; overflow:visible} .kopf2__mitte{display:flex;justify-content:center;align-items:center; gap:clamp(2px,.6vw,12px);grid-column:2; overflow-x:auto;scrollbar-width:none;white-space:nowrap} .kopf2__mitte::-webkit-scrollbar{display:none} .kopf2 .suche--oben{grid-column:3;justify-self:end} @media(max-width:640px){.kopf2{display:none}} /* ------------------------------------------------------------ Feld und Liste */ .suche{position:relative} .suche__zeile{display:flex;align-items:center;gap:8px; border-radius:999px;padding:0 12px 0 11px; box-shadow:inset 0 0 0 1px var(--such-umriss); transition:box-shadow .2s ease,background .2s ease} .suche__zeile:focus-within{box-shadow:inset 0 0 0 2px var(--gold)} .suche__lupe{width:15px;height:15px;flex:none;color:var(--gold)} .suche__feld{border:0;background:none;outline:0;padding:7px 0; font-family:var(--schrift-text);font-size:12.5px;letter-spacing:.4px; color:var(--text);width:150px;max-width:100%; -webkit-appearance:none;appearance:none} .suche__feld::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .suche__feld::placeholder{color:var(--meta);opacity:1;letter-spacing:1.4px; text-transform:uppercase;font-size:10px;font-weight:600} .suche__liste{display:none} .suche[data-offen="ja"] .suche__liste{display:block} /* Oben haengt die Liste unter dem Feld. Sie ist weiss auf dem Papier - das allein hebt sie kaum ab (1,16:1), deshalb Kante UND Schatten. */ .suche--oben .suche__liste{position:absolute;top:calc(100% + 9px);right:0; width:min(430px,88vw);max-height:min(70vh,560px);overflow-y:auto; background:#FFF;border-radius:12px;border:1px solid var(--such-kante); box-shadow:0 14px 38px rgba(11,33,59,.20); padding:6px;z-index:130;text-align:left;white-space:normal} .suche__treffer{display:grid;grid-template-columns:56px 1fr;gap:12px; align-items:start;padding:9px 10px;border-radius:9px; text-decoration:none;color:inherit} .suche__treffer:hover,.suche__treffer.ist-gewaehlt{background:var(--such-schleier)} .suche__bild{width:56px;height:44px;object-fit:cover;border-radius:6px; background:var(--grund-3);display:block} .suche__bild--leer{display:block} .suche__wort{display:flex;flex-direction:column;gap:2px;min-width:0} .suche__titel{font-family:var(--schrift-display);font-size:14px;line-height:1.25; color:var(--text)} .suche__meta{font-size:10px;font-weight:600;letter-spacing:1.5px; text-transform:uppercase;color:var(--gold)} .suche__satz{font-size:12.5px;line-height:1.45;color:var(--fliess); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .suche__satz mark{background:var(--such-mark-grund);color:var(--such-mark-farbe); font-weight:600;padding:0 1px;border-radius:2px} .suche__leer,.suche__mehr{margin:0;padding:12px 12px 13px;font-size:12.5px; color:var(--fliess)} .suche__mehr{border-top:1px solid var(--linie);color:var(--meta); font-size:11.5px;letter-spacing:.3px} /* ------------------------------------------------------------ im Klappmenue */ /* Dieselben Farben wie oben - das Menue ist hell, siehe Kopf dieses Blocks. Die Liste steht hier IM FLUSS, nicht als Kasten darueber: das Menue hat "overflow-y:auto" und wuerde einen abgesetzten Kasten abschneiden. */ .suche--menue{margin:22px 0 0} .suche--menue .suche__zeile{padding:2px 14px 2px 13px} .suche--menue .suche__lupe{width:17px;height:17px} .suche--menue .suche__feld{width:100%;font-size:15px;padding:11px 0; letter-spacing:.2px} .suche--menue .suche__feld::placeholder{font-size:11px} .suche--menue .suche__liste{margin:16px -6px 0;max-height:none} .suche--menue .suche__treffer{grid-template-columns:50px 1fr;padding:9px 6px} .suche--menue .suche__bild{width:50px;height:40px} .suche--menue .suche__leer,.suche--menue .suche__mehr{padding-left:6px} /* Solange gesucht wird, treten die Menuepunkte zurueck - die Treffer stehen an ihrer Stelle. Feld leeren, und das Menue ist wieder da. Kein zweites Fenster, kein Sprung. */ .menue[data-sucht="ja"] .menue__links, .menue[data-sucht="ja"] .menue__fuss{display:none} /* Der Menuekopf: Stern links, Kreuz rechts, Feld darunter. ‼ Das Wort TURNAGAIN ist am 13.09. auf Danis Ansage entfallen ("den namen turnagain brauch da nicht man weiss ja wo man ist"). Das ZEICHEN bleibt: Startseite und Alle Beitraege sind am 12.09. aus dem Menue geflogen, die Wortmarke war danach der letzte Weg von hier zur Startseite. Ohne sie fuehrt aus dem offenen Menue keiner mehr hin. ‼ .menue__kopf steht auf "justify-content:flex-start" (gemessen, nicht space-between wie es aussieht - das Logo war bisher einfach 143 px breit und schob das Kreuz nach rechts). Mit dem 30 px schmalen Stern klebte das Kreuz am Zeichen. Deshalb schiebt "margin-left:auto" es nach rechts. */ .menue__logo{flex-direction:row;align-items:center;gap:0} .menue__logo .stern{width:30px;height:30px} /* Die Farbe steckt als fill-Attribut in der Gruppe (bau.py, stern_svg) und wird - wie oben in der Kopfleiste - per CSS auf die Hausfarbe gezogen. ‼ Ein fill auf dem allein sticht das Attribut NICHT, es muss die Gruppe sein. Derselbe Fallstrick wie bei .kopf__logo. */ .menue__logo .stern g{fill:var(--gold)} .menue__zu{margin-left:auto} /* ------------------------------------------------ das Menue auf dem Handy Dani, 13.09.: "bei der mobil version kreunz und logo weg und die suche ganz nach oben faende ich besser. und das die leiste mit wegwischen weggeht." ‼ NUR UNTER 640 px. Darueber bleibt das Kreuz stehen: zwischen 640 und 1120 px gibt es das Klappmenue auch auf Rechnern mit Maus, und eine Maus kann nicht wischen. Ohne Kreuz bliebe dort nur der Tipp auf den dunklen Grund und die Esc-Taste - zu wenig. ‼ Damit fuehrt aus dem offenen Menue auf dem Handy KEIN Weg mehr zur Startseite: "Startseite" und "Alle Beitraege" sind am 12.09. entfallen, die Wortmarke am 13.09., und jetzt auch der Stern. Wer zurueck will, schliesst das Menue und tippt oben auf die Marke. Offener Punkt. */ @media(max-width:640px){ .menue__kopf{display:none} .suche--menue{margin-top:0} .menue{padding-top:34px} } /* --------------------------------------------------------- schmale Fenster */ /* Unter 1120 px wird das Feld kuerzer, damit es den Kontinenten nicht in die Quere kommt; unter 900 px bleibt nur die Lupe stehen und wird beim Hineinklicken breit. Unter 640 px ist die zweite Zeile ohnehin weg - dort uebernimmt das Menue. */ /* Unter 950 px stossen Kontinente und Feld aneinander (gemessen bei 900 px: die Kontinente enden auf 690, die Plakettengruppe begaenne auf 691). Dort bleibt nur die Lupe stehen; wer sie antippt, bekommt das Feld ausgefahren. Die Kantenbuendigkeit ist dort aufgegeben - es ist schlicht kein Platz. Unter 640 px ist die zweite Zeile ohnehin weg, dort uebernimmt das Menue. */ /* ‼ Unter 950 px reicht die Breite nicht mehr fuer Kontinente UND ein ausgefahrenes Feld: bei 700 px enden die Kontinente auf 588, das Feld begaenne auf 519 - sie laegen uebereinander. Dort treten die Kontinente zurueck, solange das Feld offen ist, und kommen zurueck, sobald es geschlossen wird. Im Ruhezustand aendert sich nichts. Unter 640 px ist die zweite Zeile ohnehin weg, dort uebernimmt das Menue. */ @media(max-width:950px){ .kopf2:has(.suche__zeile:focus-within) .kopf2__mitte{opacity:0; pointer-events:none;transition:opacity .18s ease} } /* =========================================================================== DIE SUCHE BEI PREMIUMESCAPES - DIE VIER FARBWERTE 13.09.2026 Der Block darueber ist Zeichen fuer Zeichen derselbe wie bei turnagain. Nur diese vier Werte sind andere, und sie sind NEU GERECHNET, nicht uebernommen - hier ist die Flaeche Creme #EDE6D8 (Kopfleiste UND Menue, gemessen), nicht Weiss und nicht das blaue Papier. ‼ DIE BLAUEN WERTE VON TURNAGAIN GEHEN HIER NICHT AUF: Umriss in --gold #7C5F1F traegt selbst bei 0,70 Deckung nur 2,77:1 - das Gold ist zu hell gegen Creme. Deshalb kommt der Umriss hier aus --text #11211F bei 0,50: das sind 3,08:1, ueber der Grenze von 3,0. Markierung mit --gold als Schrift kaeme auf 3,72:1 und faellt durch. Deshalb steht die Markierung hier in --text: 10,37:1. GERECHNET, auf Creme #EDE6D8: Titel #11211F 13,41:1 Fundstelle #4E5E5A 5,50:1 Platzhalter #586560 4,91:1 Rubrik #7C5F1F 4,81:1 Stern im Menue --gold #7C5F1F 4,81:1 (Grenze 3,0 fuer Zeichen) ‼ NICHT --rahmen fuer den Stern: #C0A054 kommt auf 2,01:1 und faellt durch. Bei turnagain traegt --rahmen 9,35:1 - derselbe Name, anderer Wert. Deshalb steht im Kernblock var(--gold), das passt in beiden Blogs. Zuruecknehmen: diesen Block loeschen - dann gelten turnagains blaue Werte und die Seite sieht falsch aus. Also nur zusammen mit dem Kernblock. =========================================================================== */ .suche{ --such-umriss:rgba(17,33,31,.50); --such-schleier:rgba(17,33,31,.08); --such-mark-grund:rgba(17,33,31,.13); --such-mark-farbe:var(--text); --such-kante:#C9BC9E; } /* =========================================================================== DER TITEL IM PORTRAET - AUF DEM HANDY WEG 13.09.2026 Dani, 13.09.2026: "bei premium escape in der mobile version gibs bei dem bild ueber und about in engl. das bitte loeschen aber nur bei mobile" - "ist im foto neben dem kopf." Auf schmalen Bildschirmen steht "Über…" (bzw. "About…") direkt neben Andrés Kopf im Titelbild. Bei turnagain ist der Titel dort am 10.09. GANZ verschwunden; hier soll er nur auf dem Handy weg und ab 640 px stehen bleiben - deshalb dieselbe Regel, aber in einer Media Query. ‼ NICHT display:none UND NICHT geloescht. Die Ueberschrift bleibt im Quelltext stehen und wird nur aus dem Bild genommen: die Seite behaelt ihre genau eine

- fuer Google und fuer Vorleseprogramme. Nachgeprueft bei 360, 390, 700 und 1400 px: h1 weiter vorhanden, Text unveraendert. ‼ DIE BUEHNE RUTSCHT NICHT. Im Browser gemessen, nicht gerechnet: 608 px vor und nach der Regel, bei jeder der vier Breiten. Es rueckt nichts nach. Gilt fuer beide Sprachen - /ueber/ und /about/ tragen dieselbe Kennung .seite--ueber (nachgesehen in beiden gebauten Seiten). Zuruecknehmen: diesen Block loeschen, dann steht "Über…" wieder im Foto. =========================================================================== */ @media(max-width:640px){ .seite--ueber .buehne__titel{position:absolute;width:1px;height:1px;margin:-1px; padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } /* =========================================================================== DIE MINDESTBREITE DES AUSGEFAHRENEN FELDES 13.09.2026 Der Sprachknopf heisst seit heute "EN" statt "English". Damit schrumpft die Plakettengruppe, an der die Feldbreite haengt, von 156 auf rund 117 px - und das Feld waere beim Tippen mitgeschrumpft. Gemessen bleiben davon nach Abzug von Lupe und Innenabstand keine 70 px Schreibflaeche, also gut sechs Zeichen. "zermatt" haette schon nicht mehr hineingepasst. ENTSCHIEDEN (Dani hat die Frage offen gelassen): die rechte Kante bleibt buendig, das Feld darf beim Tippen nach LINKS ueber die UEBER-Plakette hinauslaufen. Grund: im Ruhezustand - also praktisch immer - steht dort nur die Lupe, und da stimmt jede Kante. Ausgefahren ist das Feld nur, solange jemand tippt; in diesem Moment zaehlt Schreibflaeche mehr als Buendigkeit. Zuruecknehmen (dann ist es buendig und eng): das max(...) hier loeschen, dann gilt wieder ".suche--oben .suche__zeile:focus-within{width:var(--suchbreite)}" aus dem Suchblock darueber. =========================================================================== */ .suche--oben .suche__zeile:focus-within{width:max(var(--suchbreite),156px)} /* =========================================================================== DIE ZWEI ADRESSEN IM KLAPPMENUE 13.09.2026 Dani, 13.09.2026: "Die links zu beiden webseiten im Mobil wuerde ich gern irgendwie hervorheben." Vier Fassungen bei 390 px nebeneinander gestellt, seine Wahl: die gefuellten Kaesten mit Pfeil. Warum der Pfeil: diese beiden Verweise fuehren als einzige aus der Seite HINAUS - zu Andres Hauptseite und zum jeweils anderen Blog. Das Zeichen sagt das, ohne ein Wort dafuer zu brauchen. ‼ DER PFEIL IST KEIN BILD UND KEIN BUCHSTABE, SONDERN EINE MASKE. Als Schriftzeichen (\2197) haette ihn nicht jede Schrift, und der Browser waere auf irgendeine Systemschrift ausgewichen - anderes Bild auf jedem Geraet. Als haette er in bau.py gemusst, in zwei Blogs, an zwei Stellen. Als Maske traegt er automatisch die richtige Hausfarbe (background:var(--gold)) und liegt nur hier im Stil. Die CSP erlaubt das: "img-src 'self' data:" deckt Masken mit ab. KONTRASTE, GERECHNET - turnagain / premiumescapes: Kasten --grund-3 auf dem Menuegrund 1,20 / 1,21 (Abhebung, keine Grenze) Text #11211F im Kasten 12,00 / 11,09 Grenze 4,5 Pfeil --gold im Kasten 9,26 / 3,98 Grenze 3,0 Alle ueber der Grenze. ‼ Der Pfeil bei premiumescapes liegt mit 3,98 am naechsten dran - wer dort die Kastenfarbe dunkler macht, rechnet ihn neu. ‼ .menue__extra BLEIBT AUSGEBLENDET. In der Liste stehen ausser den zwei Adressen noch Andres andere Seiten und das Impressum; sie tragen die Kennung "menue__extra" und sind per stil.css versteckt, weil sie schon im Fuss stehen. Diese Regeln fassen sie nicht an. Zuruecknehmen: diesen Block loeschen. =========================================================================== */ .menue__fuss{--pfeil:url("data:image/svg+xml;utf8,")} .menue__mail,.menue__extern a{display:flex;align-items:center; justify-content:space-between;gap:10px;text-decoration:none; border-radius:10px;padding:13px 15px;background:var(--grund-3); font-family:var(--schrift-text);font-size:13.5px;font-weight:600; letter-spacing:.3px;text-transform:none;color:var(--text); transition:background .2s ease} .menue__mail:hover,.menue__extern a:hover{background:var(--grund-2)} .menue__mail::after,.menue__extern a::after{content:"";width:15px;height:15px; flex:none;background:var(--gold); -webkit-mask:var(--pfeil) center/contain no-repeat; mask:var(--pfeil) center/contain no-repeat} .menue__extern{list-style:none;padding:0;margin:9px 0 0; display:flex;flex-direction:column;gap:9px} .menue__extern li{margin:0} .menue__mail{margin-bottom:0} /* =========================================================================== ENGLISH IM KLAPPMENUE - AUF DEM HANDY DER EINZIGE WEG ZUR ANDEREN SPRACHE 14.09.2026, nach Andrés Mail: "bei Premium ... dass die englischen Artikel 'mobile' nicht verfügbar oder im Menü erreichbar sind." Nachgemessen am laufenden Stand bei 375 px: im ganzen Dokument stand GENAU EIN Verweis nach /en/, die Plakette oben rechts - und die ist dort display:none (weiter oben: "@media(max-width:640px){.sprache{display:none}}"). Kein Eintrag im Klappmenue, keiner im Fuss. Auf /en/ fehlte der Weg zurueck nach Deutsch genauso. turnagain hat den Eintrag seit dem 11.09.2026; hier fehlte er. bau.py baut ihn jetzt wortgleich mit. ‼ DIE ERSTE REGEL IST NICHT OPTIONAL. Ueber 640 px steht die Sprache oben als Plakette - ohne display:none stuende sie doppelt. ‼ DIE REIHENFOLGE IST NICHT OPTIONAL. Die Media Query muss HINTER der Grundregel stehen, sonst sticht die Grundregel sie (Falle vom 13.09.2026: eine neue Regel am Dateiende sticht die Media Queries darueber). Zuruecknehmen: diesen Block loeschen. =========================================================================== */ .menue__link--sprache{display:none} @media(max-width:640px){ .menue__link--sprache{display:unset} } /* =========================================================================== DIE KONTINENTE IM KLAPPMENUE DUNKLER ALS DIE SEITEN 14.09.2026 (Dani): "sollte man nicht die vier kontinente im menu vielleicht in goldschrift machen?" - vier Fassungen gezeigt (VORSCHAU_1409_Menuefarbe\Menuefarben_1409.html), seine Wahl: Fassung C, Dunkelgruen statt Gold. ‼ WARUM NICHT GOLD. Gemessen auf dem Menuegrund #EDE6D8: Grau #4E5E5A (bisher, alle Punkte) 5,50 : 1 Gold #7C5F1F (--gold) 4,81 : 1 Gruen #11211F (--text) 13,41 : 1 Gold liegt zwar ueber der Grenze von 4,5, aber UNTER dem bisherigen Grau - die Kontinente waeren damit schwaecher geworden als "Ueber" und "English", die Rangfolge haette sich umgedreht. Das glaenzende Gold des Sterns (#C9A75B) kam gar nicht in Frage: auf diesem Grund nur 1,83 : 1. ‼ WARUM UEBER DEN href UND NICHT UEBER EINE KLASSE. Die Kategorien tragen keine eigene Kennung, und "Ueber" traegt dieselbe Klasse wie sie. Der Adress-Selektor trifft genau die Kategorieseiten - auf der deutschen Seite fuenf, auf der englischen drei (/en/kategorie/...), ohne dass bau.py angefasst werden muss. Kommt eine Kategorie dazu, faerbt sie sich von selbst mit. ‼ DIE ZWEITE REGEL IST NICHT OPTIONAL. Die erste hat dieselbe Spezifitaet wie ".menue__link:hover" (Zeile 155) und steht spaeter - sie wuerde den Hover sonst stechen und die Kontinente blieben beim Zeigen unveraendert. Mit dem zusaetzlichen :hover gewinnt wieder die Zeigefarbe. Zuruecknehmen: diesen Block loeschen. =========================================================================== */ .menue__link[href*="/kategorie/"]{color:var(--text)} .menue__link[href*="/kategorie/"]:hover, .menue__link[href*="/kategorie/"]:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}