/* ============================================================ responsive.css — Responsive-Layer + EINHEITLICHES SCHRIFT- SYSTEM über die alten Tabellen-Layouts (Dreamweaver / VS). Ergänzt: tao (Schriftklassen) + nav.css (Navigation). SCHRIFTSYSTEM (Stand 30.06.2026): - ALLES in Verdana (Fließtext, Headlines, Tabellen, Footer), ~18px. - Times/Serif nur auf der Startseite (index.htm – eigenes CSS). - Arial wurde überall entfernt. - Gilt einheitlich auf Desktop UND Handy. LAYOUT: - EINE einheitliche Inhaltsbreite (632px = Bildbreite), zentriert. - Kompakter Zeilenabstand. - Silbentrennung nur im Fließtext, nicht in Navigation/Headlines. - Handy (<=640px): feste Tabellen werden zu EINER Spalte. >>> Lesegröße global ändern: --text unten. <<< ============================================================ */ :root { --text: 18px; /* Grund-Lesegröße (Fließtext) */ --content: 880px; /* einheitliche Inhaltsbreite wie die Startseite */ --rand: 16px; /* seitlicher Mindestabstand zum Displayrand */ --serif: "Times New Roman", Times, serif; --sans: Verdana, Helvetica, sans-serif; } /* --- Nichts darf breiter als der Schirm sein (kein Auszoomen) --- */ /* WICHTIG: overflow-x:hidden wird vom Browser zu overflow-y:auto umgerechnet (CSS-Regel: "visible" neben einem nicht-sichtbaren Wert wird zu "auto"). Dadurch wurden UND zu eigenen Scroll-Containern → auf dem Handy (iOS Safari) war das untere Footer-Ende nicht mehr erreichbar ("nach Telegram abgeschnitten"). "clip" kappt nur horizontal und lässt overflow-y auf "visible" → normales Seiten-Scrollen, Footer komplett. */ html, body { max-width: 100%; overflow-x: clip; } /* --- Seitlicher Rand, damit Text nie am Displayrand klebt --- */ body { margin: 0; padding: 0 var(--rand); } /* ============================================================ SCHRIFTSYSTEM ============================================================ */ /* Fließtext = Verdana. !important, weil tao.css NACH responsive.css lädt. */ body { font-family: var(--sans) !important; font-size: var(--text) !important; line-height: 1.5 !important; color: #000; } .reg_10_0, .reg_11_0, .reg_12_0, .reg_10_rot, .Stil10 { font-family: var(--sans) !important; font-size: var(--text) !important; line-height: 1.5 !important; } /* Headlines / Labels / Tabellenköpfe / Footer = Verdana */ .sonderKopie, .sonder, .reg_11_rot, .bold_11_rot, .bold_12_rot, .bold_12_0, .bold_11_0, .bold_10_0, .bold_10_rot, .bold_10_grau, .bold_11_blau, .bold_12_orange, .reg_10_grau, .Stil1, .Stil12, h1, h2, h3, h4 { font-family: var(--sans) !important; } /* Überschriften-Hierarchie (durchgängig auf allen Seiten): 24 = Seitentitel (H1) · 20 = Abschnitts-/Buchüberschrift (H2) · 18 = Label/Zwischenzeile (fett, = Fließtext) · 18 = Fließtext */ /* H1 – Seitentitel: IMMER gleiche Größe, Gewicht, Ausrichtung UND gleicher Abstand – egal ob die Klasse auf

oder sitzt oder ob ein echtes

verwendet wird. !important schlägt sowohl die td>p:first-child-Regel (sonst 0px bei
) als auch alte Inline-Margins und die Browser-Default-Größe von

(sonst ~32px). So sind alle Titel identisch. / .sonderKopie, h1 { font-size: 24px !important; line-height: 1.3 !important; font-weight: bold !important; text-align: left !important; display: block; margin: 10px 0 .4em !important; / einheitlicher Titel-Abstand site-weit / } / TITELFARBE – verbindliche Entscheidung 30.06.2026: ALLE Seitentitel ROT. Überschreibt schwarze Titel (.sonderKopie ohne Farbe = die Mehrheit), graue und blaue Titel (alte Inline-.Stil3 #666/#000099) sowie die rote Variante. Eine Farbe site-weit – keine Element-Farben. / .sonderKopie, h1, .dls { color: #990000 !important; letter-spacing: 0.03em; } / UNTERTITEL / Unterzeile unter dem Titel (z. B. „nach den Prinzipien der TCM", „der Acht Wundermeridiane"): 16px, normal, grau – klar dem Titel untergeordnet. Klasse bei Bedarf an die zweite Titelzeile vergeben: … / .sem-untertitel { display: block; font-size: 16px !important; font-weight: normal !important; color: #666 !important; line-height: 1.35 !important; margin: .1em 0 .6em !important; } / Aufzählungen / Fließtext grundsätzlich linksbündig – kein Blocksatz. / [align="justify"] { text-align: left !important; } / Pfeil-Aufzählungen: linksbündig mit hängendem Einzug – der Pfeil steht außen, umbrechende Zeilen rücken sauber unter den Text ein. Schriftgröße/Zeilenhöhe fest auf Fließtextmaß (var(--text)) gepinnt: Die Seiten laufen im Quirks-Mode, dadurch erben -Inhalte NICHT die 18px vom , sondern fallen auf 16px zurück. Die reg_-Klassen sind per !important schon auf 18px gepinnt – die Pfeil-Liste war es nicht und wirkte dadurch kleiner als der umgebende Text. Jetzt überall gleich groß. / .pfeil-liste { display: block; margin: .35em 0 .6em; text-align: left; font-size: var(--text) !important; line-height: 1.5 !important; } .pfeil-liste .pf { display: block; padding-left: 2.2em; text-indent: -2.2em; margin: .28em 0; text-align: left; font-size: var(--text) !important; line-height: 1.5 !important; } / H2 – Abschnitts- und Buchüberschriften (rot/blau, fett) / .sonder, .bold_11_rot, .bold_12_rot, .bold_11_blau { font-size: 20px !important; line-height: 1.3 !important; } / H3 – Labels / Zwischenzeilen (fett, auf Fließtextgröße) / .reg_11_rot, .bold_12_0, .bold_12_orange, .bold_11_0 { font-size: 18px !important; line-height: 1.35 !important; } / Kleine fette Inline-Hervorhebungen (z. B. "Leere-Zustände, z.B.:") auf Fließtextgröße ziehen – waren als bold_10_* noch bei 11px (zu klein). / .bold_10_0, .bold_10_rot, .bold_10_gelb { font-size: var(--text) !important; } / Footer-/Credit-Text: Verdana, klein, grau / .reg_10_grau, .bold_10_grau { font-size: 14px !important; color: #666 !important; line-height: 1.5 !important; } / --- Links grundsätzlich NICHT unterstrichen (überall, auch Footer) --- / a, a:link, a:visited, a:hover, a:active { text-decoration: none !important; } / Besuchte Links nicht violett: Farbe von der Umgebung erben (= schwarz im Fließtext). Eigene Link-Farben (Navigation, aktive Seite) bleiben, da deren Selektoren spezifischer sind bzw. später in nav.css geladen werden. / a:link, a:visited { color: inherit; } / Echte Links (mit href) zeigen immer den Hand-Cursor – auch wenn sie wie normaler Text aussehen (z. B. Buchliste auf der Literaturseite). / a[href], a[href] { cursor: pointer; } /* --- Typografische Politur --- / p, li, td { orphans: 2; widows: 2; text-wrap: pretty; } / EINHEITLICHER Fließtext-Zeilenabstand auf ALLEN Seiten. Überschreibt die uneinheitlichen line-heights aus den alten Seiten- CSS (z. B. .Stil3/.Stil12 mit fixen 20px). Überschriften behalten ihre eigene line-height, weil deren Klassen-Selektoren spezifischer sind. / p, li, td, p span, td span { line-height: 1.5 !important; } / Seminar- und Literatur-Menü: enger Zeilenabstand, vor allem wenn ein Titel zweizeilig umbricht (höhere Spezifität schlägt die td-Regel oben). / #seminare-liste td, #seminare-liste td span, .lit-liste td, .lit-liste td span { line-height: 1.15 !important; } / Literatur-Menü: gleicher Hover wie die Seminarliste (Farbwechsel auf Rot, Hand-Cursor). / .lit-liste a, .lit-liste a:link, .lit-liste a:visited { color: #000000; } .lit-liste a:hover { color: #990000 !important; } / Hand-Cursor zuverlässig über der ganzen Publikations-Zeile und den Links (überschreibt alles per !important – auch bei alten Cache-Ständen). / .lit-liste td, .lit-liste a[href], .lit-liste a[href] , #seminare-liste td, #seminare-liste a[href], #seminare-liste a[href] * { cursor: pointer !important; } /* Erste/letzte Zeile in einer Zelle ohne Zusatzabstand -> Label (links) und Fließtext (rechts) starten auf gleicher Höhe (z. B. Biografie). / td > p:first-child:not(.sonderKopie) { margin-top: 0 !important; } td > p:last-child { margin-bottom: 0 !important; } / --- Bilder nie breiter als ihr Container --- / img { max-width: 100%; height: auto; } / Kopfbild jeder Seminarseite: EINHEITLICHER Abstand darunter (24px), statt uneinheitlicher
-Ketten. Block + feste Marge = auf allen Seiten gleich. Das direkt folgende Text-Element startet ohne eigenen Zusatzabstand. / img.kopfbild { display: block; margin: 6px 0 24px !important; } img.kopfbild + p, img.kopfbild + span, img.kopfbild + br { margin-top: 0 !important; } / ============================================================ SILBENTRENNUNG – nur Fließtext, nie Navigation/Headlines (greift mit lang="de/en/es/pt" am ) ============================================================ / p, td, li { hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } .taonav, .taonav , h1, h2, h3, h4, .reg_11_rot, .bold_11_rot, .bold_12_rot, .bold_12_0, .bold_11_0, .sonder, .sonderKopie, .Stil1, .Stil12 { hyphens: none !important; -webkit-hyphens: none !important; -ms-hyphens: none !important; } /* ============================================================ EINHEITLICHE INHALTSBREITE Äußere Layout-Tabellen auf Inhaltsbreite deckeln + zentrieren. Verschachtelte Tabellen füllen ihren Eltern-Container (100%), behalten aber ihre Spaltenaufteilung. ============================================================ / table, img { max-width: 100%; } table[width="632"], table[width="600"], table[width="615"], table[width="700"], table[width="570"] { width: 100% !important; max-width: var(--content); margin-left: auto; margin-right: auto; } table table { width: 100% !important; max-width: 100%; } / Termin-Tabellen: nicht künstlich breit ziehen – auf natürliche Breite deckeln (zentriert wie der übrige Inhalt). / .ter-tab { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; } / Banner-/Trennbilder + breite Inhaltsfotos (im Original ~570–700 breit) füllen die jetzt 880px breite Inhaltsspalte; Seitenverhältnis bleibt erhalten. Kleine Bilder (Cover, Thumbs, Hochformat 400px, halbe Trennlinien 300px) bleiben in Originalgröße. / img[width="632"], img[width="633"], img[width="631"], img[width="672"], img[width="615"], img[width="600"], img[width="600px"], img[width="596"], img[width="700"], img[width="570"] { width: 100% !important; height: auto !important; } / 5-Elemente-Bildstreifen (Seminar-Kopf): die fünf Kacheln IMMER in EINER Zeile (auch am Handy). 19% × 5 = 95% lässt Spielraum gegen Umbruch. / img[src="110_110_"], img[src="Metall_cover_110_110"] { width: 19% !important; height: auto !important; display: inline-block !important; vertical-align: top !important; } / ============================================================ SYMPTOM-/THEMEN-FELDER (graue Zweispalter, bgcolor #e8e4e1) Leichter Innenabstand, Pfeile mit hängendem Einzug (Folgezeilen richten sich unter dem Text aus), saubere zwei gleiche Spalten. ============================================================ / table[bgcolor="#e8e4e1"] { border-collapse: separate; border-spacing: 0; margin: 8px auto 12px; } table[bgcolor="#e8e4e1"] td { vertical-align: top; width: 50%; padding: 4px 18px 4px 1.8em; / Innenabstand + Platz für den Pfeil / text-indent: -1.35em; / hängender Einzug (passend zum Pfeil ➤) / } / Weiße Trennzellen / leere Platzhalter: kein Einzug, kein Innenabstand / table[bgcolor="#e8e4e1"] td[bgcolor="#FFFFFF"], table[bgcolor="#e8e4e1"] td:empty { padding: 0; text-indent: 0; } / ============================================================ HANDY: Tabellen linearisieren (Schrift ist global schon gesetzt) ============================================================ / @media (max-width: 640px) { / Alle Layout-Tabellen zu einer Spalte stapeln. (Die Navigation ist div/ul-basiert und NICHT betroffen.) / table, tbody, tr, td { display: block !important; width: 100% !important; height: auto !important; } td { box-sizing: border-box; padding: 1px 0; overflow-wrap: break-word; word-break: break-word; } / feste Spaltenbreiten (width="114", "518", …) am Handy aufheben / td[width] { width: auto !important; } / Moderater Absatzabstand (nicht aufblähen) / p { margin: 0 0 .7em !important; } / Große Banner-/Trennbilder füllen die Spalte / img[width="632"], img[width="615"], img[width="600"], img[width="518"], img[width="300"] { width: 100% !important; } / Termin-Tabellen: farbige Zellen nicht bis an den Displayrand, Text nicht am Rand kleben – etwas Weiß außenrum und Innenabstand. / .ter-tab { margin: 0 4px 12px !important; } .ter-tab td { padding: 10px 14px !important; } / dünne weiße Trennzeilen flach lassen (nicht aufblähen) / .ter-tab tr[style="height:2px"] td { padding: 0 !important; } /* Symptom-/Themen-Felder: am Handy EINE Spalte (gestapelt). Pfeil + hängender Einzug bleiben erhalten. / table[bgcolor="#e8e4e1"] td { width: 100% !important; padding: 3px 12px 3px 1.8em !important; text-indent: -1.35em; } / Leere Trenn-/Platzhalterzellen ausblenden – keine Leerblöcke am Handy. / table[bgcolor="#e8e4e1"] td[bgcolor="#FFFFFF"], table[bgcolor="#e8e4e1"] td:empty { display: none !important; padding: 0 !important; } } / ============================================================ CAVEAT BRUSH – LOKAL gehostet (DSGVO-konform, KEIN Google-CDN). Die Schriftdateien liegen im Ordner website/fonts/, es geht KEINE Anfrage an Google-Server (keine IP-Übertragung). Ersetzt die alten Überschriften-GRAFIKEN (Ue_.jpg) durch echten, suchbaren Text in derselben roten Brush-Schrift. ============================================================ / @font-face { font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/caveat-brush-latin-400-normal.woff2") format("woff2"), url("fonts/caveat-brush-latin-400-normal.woff") format("woff"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/caveat-brush-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Brush-Überschrift – ersetzt die Titel-Grafiken oben auf den Seiten (Gedichte, Tao Training, Heilendes Tao). Rot, Großbuchstaben. / .brush-titel { display: block; font-family: "Caveat Brush", var(--sans) !important; font-weight: 400 !important; color: #990000 !important; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1 !important; margin: .2em 0 .1em !important; } .brush-titel--gross { font-size: 40px !important; } .brush-untertitel { display: block; font-family: "Caveat Brush", var(--sans) !important; font-weight: 400 !important; color: #990000 !important; text-transform: uppercase; letter-spacing: 0.03em; font-size: 21px !important; line-height: 1.2 !important; margin: 0 0 .5em !important; } / Blaue Variante (z. B. englische TAA-Seite – Originalfarbe behalten) / .brush-titel.brush-titel--blau, .brush-untertitel.brush-untertitel--blau { color: #000099 !important; } / Mittelgroße Variante für lange einzeilige Banner (kein großer Titel) / .brush-titel--mittel { font-size: 26px !important; } / ============================================================ SCHRIFT-VEREINHEITLICHUNG (Nachtrag 30.06.2026) Zieht die letzten kleinen Schriften zentral auf Lesegröße. Greift sowohl die alten Größen-Klassen als auch die per Inline-style gesetzten 10–13px-Spans (externes !important schlägt Inline ohne !important). NUR Größe/Zeilenhöhe – Fett/Farbe der Klassen bleiben unangetastet. Rückgängig: einfach diesen Block löschen. ============================================================ / .Stil1, .Stil2, .Stil3, .Stil10, .Stil12, .Stil15, .Stil17 { font-size: var(--text) !important; line-height: 1.5 !important; } [style="font-size: 10px"], [style="font-size:10px"], [style="font-size: 11px"], [style="font-size:11px"], [style="font-size: 12px"], [style="font-size:12px"], [style="font-size: 13px"], [style*="font-size:13px"] { font-size: var(--text) !important; line-height: 1.5 !important; }

verwendet wird. !important schlägt sowohl die td>p:first-child-Regel (sonst 0px bei ) als auch alte Inline-Margins und die Browser-Default-Größe von

verwendet wird. !important schlägt sowohl die td>p:first-child-Regel (sonst 0px bei
) als auch alte Inline-Margins und die Browser-Default-Größe von