/* 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. ========================================================================== */ /* ===== TURNAGAIN - FARBEN ================================================= TURNAGAIN - FARBEN, Fassung Blau. Angelegt 10.09.2026. Das ist der Goldblock von premiumescapes, Zeichen fuer Zeichen, mit einem einzigen Unterschied: jeder Goldwert ist durch seinen blauen Gegenwert ersetzt. Aufbau, Anordnung, Schriften, Abstaende und jede Entscheidung, die in den Kommentaren steht, gelten unveraendert weiter - deshalb sind sie hier stehengeblieben. Wo unten "Gold" steht, ist Blau gemeint. Andre, 10.09.2026: "Das Design von Turnagain kann eigentlich von Premium uebernommen werden ... Richtung Blau waere mein Favorit." DIE FARBEN UND WARUM GENAU DIESE -------------------------------- Dani am 10.09.2026: "das blau ueberall vielleicht dunkler machen etwas." Vier Stufen gebaut und nebeneinander gezeigt; gewaehlt ist Stufe 2 - ein Stueck ruhiger als das rohe Logoblau, aber noch erkennbar dieselbe Farbe. #0951BC Rahmenstreifen. Eine Stufe dunkler als Andres Logoblau #0B62E1 (aus dem Logobild ausgelesen, haeufigster bunter Ton, 898 Bildpunkte). Der Streifen traegt keine Schrift - Gold liegt dort bei 2,01:1 und ist ebenso reine Zierde. #0A47A0 Schriftfarbe. 7,0 / 6,4 / 5,4 (Papier #EDE6D8 / Fuss #E5DCC9 / Schleier 10 % ergibt #CFCDC5). Bei 13 % Deckung waeren es 5,2 - hier ist also Luft, anders als beim helleren Blau der ersten Stufe. Zum Vergleich: Gold bei premiumescapes liegt bei 5,75 / 5,24 / 4,57. ‼ Das rohe Logoblau #0B62E1 traegt als SCHRIFT nicht: 4,4:1 auf dem Papier, unter der Grenze von 4,5. Dieselbe Falle wie Gold #7C5F1F. #57A6DE Helles Blau auf dunklem Grund, wo Gold #C9A75B stand. 6,3:1 auf #11211F; Gold hat dort 7,26:1. #6FBBEC Der Kicker ueber Fotos, wo Gold #D9BC7A stand. 7,9:1; Gold 9,06:1. Alle vier Werte sind gerechnet, nicht geschaetzt, und fuer diese Stufe neu gerechnet. Die Zahlen der Goldfassung gelten NICHT. DUNKLER ODER HELLER ------------------- Die vier gebauten Stufen, jeweils Rahmen / Schrift: 1 #0B62E1 / #0951BC Logoblau Schrift 5,8:1 2 #0951BC / #0A47A0 etwas dunkler Schrift 7,0:1 <- steht hier 3 #0A47A0 / #0B3B7E deutlich Schrift 8,7:1 4 #0B3B7E / #0C3163 marine Schrift 10,3:1 Umstellen heisst: die vier Farbwerte in dieser Datei tauschen und den Kopf hier mitziehen. Fuer Stufe 3 und 4 muessen die beiden hellen Toene ebenfalls neu gerechnet werden - sie stehen auf Fotos, nicht auf Papier. ZURUECKNEHMEN ------------- Diesen Abschnitt aus stil.css entfernen (er beginnt mit "/* ===== TURNAGAIN - FARBEN" und reicht bis zum Dateiende), dann neu bauen. Design 1 ist damit unveraendert wieder da. ‼ Diese Datei und der angehaengte Block in stil.css sind ZWEI KOPIEN derselben Sache (Falle B.6). Wer eine aendert, muss die andere nachziehen. ========================================================================== */ :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:#0951BC; /* 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:#0A47A0; /* Die beiden Grundfarben aus Design 1 - Namen bleiben ("gold"), Werte sind jetzt Blau. Umbenennen haette 82 Stellen in stil.css beruehrt; der Name ist Geschichte, der Wert ist die Farbe. --gold steht auf hellem Grund, --gold-hell auf dunklem (Kicker ueber Fotos, Fuss in Design 1). */ --gold:#0A47A0; --gold-hell:#57A6DE; } /* ------------------------------------------------------ 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 fuer Blau: Schrift #0A47A0 auf #EDE6D8 5,8:1, beim Zeigen Grund #0A47A0 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(10,71,160,.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 Blau, wie die Wortmarke darueber. #0A47A0 auf #E5DCC9 sind 5,3:1 - fuer Blau neu gerechnet, gut lesbar auch bei 14px. */ .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". #0A47A0 auf dem Fussgrund #E5DCC9 sind 5,3:1 - nachgerechnet. */ .fuss__adressen,.fuss__adressen a{color:var(--gold-hell-grund)} .fuss__adressen .fuss__punkt{color:rgba(10,71,160,.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: #0A47A0 auf dem Fussgrund #E5DCC9 5,3:1; beim Zeigen liegt das Wort auf dem Schleier (ergibt #CFCEC8) 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. #0A47A0 auf #E5DCC9 sind 5,3: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: #0A47A0 auf dem Fussgrund #E5DCC9 5,3:1; auf dem Schleier (ergibt #CFCEC8) 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(10,71,160,.10); border-bottom-color:transparent} /* Verweise im Fliesstext: das rohe Logoblau #0951BC kommt auf dem hellen Grund #EDE6D8 nur auf 4,4:1 - unter der Grenze von 4,5. #0A47A0 sind 5,8:1. Fuer Blau neu gerechnet, 10.09.2026. Der Strich darunter bleibt fein und wird beim Zeigen voll. */ .text a{color:var(--gold-hell-grund);border-bottom-color:rgba(10,71,160,.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"} /* Das Portraet auf der Ueber-Seite ist hochkant (984 x 1024), die Buehne ist ein flaches Band. "cover" schneidet oben und unten weg - wie viel, haengt vom Seitenverhaeltnis des Fensters ab. Im grossen Fenster (1857 x 795) blieben nur 41,1 % der Bildhoehe uebrig, und mittig heisst: sichtbar ab 29,4 % - mitten in der Stirn. Im schmalen Fenster fiel es nicht auf. Mit 25 % liegt die Oberkante bei 14,7 % (Haaransatz ~15 %), das Kinn (~51 %) bleibt drin; im schmalen Fenster 9,3 % bis 72,0 %. Ein Wert fuer beide, keine Media Query noetig. Abgeschnitten bleibt nur oberes Haar. Befund 10.09.2026. Zum Zurueckdrehen: diese Zeile loeschen. Richtig geloest wird es erst mit einem Querformat-Foto von Andre - der ganze Kopf passt bei diesem Bild rechnerisch in kein Vollbild-Band (Kopf bis Kinn sind 48,6 % der Bildhoehe, das grosse Fenster zeigt 41,1 %). Steht auf der Fragenliste. */ .seite--ueber .buehne__bild{object-position:50% 25%} /* Dani, 10.09.2026: "das Ueber kann raus auch in englisch about .. aber nur im bild die schrift raus". Die Ueberschrift wird unsichtbar, nicht entfernt: sie steht weiter im Quelltext, damit die Seite genau eine Ueberschrift behaelt - fuer Google und fuer Vorleseprogramme. Am Bildschirm ist im Titelbild nur noch das Foto. Gilt fuer beide Sprachen, weil /ueber/ und /about/ dieselbe Kennung .seite--ueber tragen. Die Buehne haelt ihre Hoehe ueber min-height, es rutscht nichts nach (im Browser geprueft, nicht gerechnet). Zum Zurueckdrehen: diese Zeile loeschen - dann steht "Ueber..." wieder da. */ .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 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: #0A47A0 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(10,71,160,.45); border-radius:999px;transition:background-color .25s ease,border-color .25s ease} .marken a:hover{color:var(--gold-hell-grund);border-color:rgba(10,71,160,.45); background:rgba(10,71,160,.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: Blau 5,8:1, Creme auf gefuelltem Blau 5,8:1, Blau auf dem Schleier 5,0:1 - alle drei ueber 4,5. Fuer Blau neu gerechnet, 10.09.2026. Die Ecken werden rund wie ueberall sonst. Zum Zurueckdrehen die eine Zahl: border-radius:999px -> 2px. */ .blaettern a,.blaettern span{border-color:rgba(10,71,160,.45); color:var(--gold-hell-grund);border-radius:999px} .blaettern a:hover{border-color:rgba(10,71,160,.45); color:var(--gold-hell-grund);background:rgba(10,71,160,.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(10,71,160,.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 13,4:1 deutlich besser als das Blau mit 5,8: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(10,71,160,.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. Bei Blau stellt sich die Frage nicht mehr: hier steht ueberall dasselbe #0A47A0 wie im Fuss, 5,8:1 auf #EDE6D8. Neu gerechnet 10.09.2026. */ .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. #0A47A0 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(10,71,160,.3)} /* Die zwei Kicker auf hellem Grund: das rohe Logoblau #0951BC kaeme bei 10,5 bzw. 11px nur auf 4,4:1 - unter der Grenze. #0A47A0 sind 5,8:1. Fuer Blau neu gerechnet, 10.09.2026. Der Kicker AUF den Bildern bleibt #6FBBEC, 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)} /* ------------------------------------------- Die zwei fest verdrahteten Golds ‼ BEFUND 10.09.2026, im Browser gemessen: zwei Stellen in Design 1 tragen ihren Goldwert NICHT ueber eine Variable, sondern als Zahl im Stil: ".start-claim span" (der Claim im Titelbild der Startseite) und ".gal-kicker" (die Rubrik ueber jedem Kachelbild). Der Farbblock hat sie deshalb nicht erwischt - auf der blauen Seite standen 15 Kicker und der Claim weiter in Gold, mitten zwischen blauen Bauteilen. Von aussen nicht als Fehler zu erkennen, nur als "sieht irgendwie unruhig aus". Beide stehen ueber Fotos, also gilt das helle Blau: #6FBBEC, 8,96:1 auf #11211F - Gold #D9BC7A hat dort 9,06:1. Nachgerechnet 10.09.2026. */ .start-claim span{color:#D6E9F8} .gal-kicker{color:#6FBBEC} /* ========================================================================== DIE WORTMARKE OBEN — Fassung C: klein, Archivo Angelegt 10.09.2026 auf Danis Anweisung ("mach erstmal klein"). Design 1 setzt die Wortmarke in Versalien und Libre Baskerville - so steht sie bei premiumescapes und bei andregebel.de. Andres turnagain-Logo schreibt das Wort aber KLEIN und in einer Grotesk. An dieser Stelle steht das Wort direkt neben seinem Zeichen; die beiden sollen als ein Ding gelesen werden, deshalb hier die Schreibweise des Logos. Archivo liegt ohnehin auf der Seite (Kicker, Schlagworte, Seitenzahlen) - es kommt KEINE Schrift dazu, die Seite laedt nicht eine Datei mehr. Die Verbundenheit der drei Seiten haengt nicht an dieser einen Zeile: Aufbau, Farbsystem, Plaketten, Fuss und die Lesespalte sind unveraendert dieselben. DREI FASSUNGEN ZUR AUSWAHL - Umschalten ist dieser eine Block: A Versalien, Libre Baskerville diesen Block loeschen B klein, Libre Baskerville font-family-Zeile und font-weight loeschen C klein, Archivo wie es hier steht ========================================================================== */ .kopf__name{font-family:var(--schrift-text);text-transform:none; letter-spacing:-.005em;font-weight:600} .kopf1 .kopf__name{letter-spacing:0;font-weight:600} @media(max-width:820px){.kopf__name{letter-spacing:0}} @media(max-width:640px){.kopf__name{letter-spacing:0}} /* ========================================================================== DIE MARKE IM FUSS — Zeichen ueber dem Wort, groesser Dani, 10.09.2026: "kann hier unten das Logo alleine setzen ueber turnagain und etwas groesser. Dasselbe wuerde ich spaeter bei Premium Escapes machen." Design 1 stellt Zeichen und Wort NEBENEINANDER (flex-direction:row). Hier stehen sie uebereinander: das Zeichen oben und deutlich groesser, darunter das Wort. Das Wort folgt derselben Schreibweise wie oben in der Kopfleiste - klein und in Archivo, wie Andres Logo. Die Groesse des Zeichens steht an ZWEI Stellen: hier die Breite, und in bau.py der Wert in stern_svg(..., 58) fuer die Zeilenhoehe des SVG. Wer eine aendert, muss die andere mitziehen. Fuer premiumescapes gilt dasselbe Vorgehen, sobald es dort dran ist - dort traegt das Zeichen den Stern statt des Bergzugs. */ .fuss__marke{flex-direction:column;gap:clamp(10px,1.4vw,16px); text-transform:none;font-family:var(--schrift-text);font-weight:600; letter-spacing:0;font-size:clamp(20px,2.3vw,26px)} .fuss__marke svg{width:clamp(46px,6vw,66px);height:auto}