/* ========== GRUNDSCHRIFT ========== */ body { font-family: "Libre Baskerville", Georgia, serif; font-size: 18px; line-height: 1.6; color: #2b2b2b; background-color: #ffffff; } /* ========== ÃœBERSCHRIFTEN ========== */ h1, h2, h3, h4 { font-family: "Libre Baskerville", Georgia, serif; font-weight: normal; color: #2b2b2b; margin-top: 1.5em; margin-bottom: 0.5em; } h1 { font-size: 2rem; color: #b85800; margin-bottom: 0.8em; } h2 { font-size: 1.6rem; color: #6a6a6a; } h3 { font-size: 1.3rem; } h4 { font-size: 1.1rem; } @media (max-width: 600px) { h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } } /* ========== NAVIGATION ========== */ nav a, .menu-item a, .menu-toggle { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #1a1a1a !important; text-decoration: none; } nav a:hover, .menu-item a:hover { color: #b85800 !important; } nav a.current-menu-item, .menu-item.current-menu-item > a { color: #1a1a1a !important; font-weight: 700; text-decoration: underline; } /* ========== BUTTONS ========== */ .button-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; } .btn-primary { background-color: #9b4d00; color: white !important; padding: 0.8rem 1.5rem; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 1rem; text-align: center; } .btn-primary:hover { background-color: #7a3c00; } /* ========== HERO-IMAGE (Wordcloud) ========== */ .hero-image-container { display: flex; justify-content: center; align-items: center; padding-top: 1.5rem; padding-bottom: 1.5rem; margin: 0 auto; text-align: center; } .hero-image-container img.hero-image { display: block; margin: 0 auto; width: clamp(360px, 55vw, 880px); max-width: 100%; height: auto; } @media screen and (max-width: 768px) { .hero-image-container img.hero-image { width: 85vw; } } /* ========== POETIK BLOCK ========== */ .poetik-block { max-width: 750px; margin: 3rem auto; padding: 0 1rem; font-style: italic; color: #333; line-height: 1.8; font-family: "Libre Baskerville", Georgia, serif; text-align: center; } .poetik-block hr { margin: 2rem auto; width: 60px; border: none; border-top: 1px solid #ccc; } .poetik-block .hinweis { margin-top: 3rem; font-style: normal; font-size: 0.95rem; line-height: 1.6; color: #444; text-align: left; } /* ========== VIGNETTE ========== */ .vignette-block { max-width: 740px; margin: 3em auto; padding: 1.2em 1.6em; background-color: #f9f7f2; border-left: 4px solid #b85800; font-style: italic; color: #3a3a3a; line-height: 1.7; font-family: "Libre Baskerville", Georgia, serif; } /* ========== ZITATE ========== */ blockquote { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.25em; font-style: italic; color: #444; border-left: 5px solid #b45f06; margin: 1.5em 0; padding: 0.5em 1em; background-color: transparent; } .pagenav { display: flex; justify-content: space-between; max-width: 800px; margin: 3rem auto; padding: 0 1rem; } .pagenav-prev a, .pagenav-next a { background-color: #9b4d00; color: white !important; padding: 0.75rem 1.5rem; border-radius: 6px; text-decoration: none; font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.5em; text-transform: uppercase; transition: background-color 0.3s ease; } .pagenav-prev a:hover, .pagenav-next a:hover { background-color: #7a3c00; color: #fff !important; } /* === Joomla-Navigationsbuttons unten anpassen === */ a.btn-secondary.previous, a.btn-secondary.next { background-color: #9b4d00 !important; color: #ffffff !important; font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; padding: 0.8rem 1.4rem; border-radius: 6px; text-decoration: none; display: inline-block; transition: background-color 0.3s ease; } a.btn-secondary.previous:hover, a.btn-secondary.next:hover { background-color: #7a3c00 !important; color: #ffffff !important; } #sp-footer2 .menu a:hover { color: #944812 !important; /* A_MMM Schmuckfarbe */ text-decoration: none; transition: color 0.3s ease; } /* Zahlenicons in A-MMM Rotbraun */ .zz-nummern { color: #8E4C2E; } /* Stil für Resonanz-Link im Kopfbereich */ .resonanz-link { font-size: 0.9rem; font-style: italic; font-weight: 500; color: #6b3f2d; text-decoration: none; white-space: nowrap; } .resonanz-link:hover { text-decoration: underline; } .readmore a, .readmore a:link, .readmore a:visited { font-size: 1.15rem; font-style: italic; color: #6b3f2d !important; font-weight: 500; text-decoration: none; padding-top: 12px; display: inline-block; } .readmore a:hover, .readmore a:focus, .readmore a:active { color: #6b3f2d !important; text-decoration: underline; } .article-header h2 a, .article-header h2 a:visited { color: #6b3f2d !important; text-decoration: none; } .article-header h2 a:hover, .article-header h2 a:focus, .article-header h2 a:active { color: #6b3f2d !important; text-decoration: underline; } /* A_MMM-Farben */ ul.pagination > li.page-item.active > span.page-link { background-color: #A93226; border-color: #A93226; color: #fff; } ul.pagination > li.page-item > a.page-link:hover { background-color: #A93226; border-color: #A93226; color: #fff; } .a-mmm-readmore { color: #A93226; font-style: italic; } .a-mmm-readmore:hover { color: #7A1F1A; text-decoration: underline; } .masterclass-teaser { background-color: #fdf9f4; border-left: 5px solid #a74d11; padding: 1.5em; margin-top: 2em; border-radius: 6px; } .masterclass-teaser h3 { margin-top: 0; color: #a74d11; } .btn-secondary { background-color: transparent; color: #a74d11; border: 1px solid #a74d11; padding: 0.6em 1.2em; text-decoration: none; border-radius: 4px; font-weight: 500; } .btn-secondary:hover { background-color: #a74d11; color: white; } .masterclass-teaser.elegant { background: #fdf9f4; padding: 2em 2.5em; margin: 3em auto 2em; max-width: 740px; border-left: 5px solid #a74d11; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,0.05); text-align: left; font-size: 1.05em; line-height: 1.6; color: #3a2b20; } .teaser-heading { font-weight: 600; font-size: 1.3em; color: #a74d11; margin-bottom: 0.6em; } .btn-flat { display: inline-block; margin-top: 1em; padding: 0.5em 1.2em; color: #a74d11; border: 1px solid #a74d11; border-radius: 4px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .btn-flat:hover { background-color: #a74d11; color: white; } .hero-centerblock { margin-top: 2em; } /* ======================== BONUS-TIPPS A_MMM ======================== */ .bonus-tipp-box { border: 1px solid #d7c1ae; /* zartes Beige für feine Rahmung */ border-left: 4px solid #6b3f2d; /* Primärfarbe (A_MMM Rotbraun) */ padding: 1rem 1.2rem; margin-top: 2rem; background-color: #fffdf9; /* sanftes Cremeweiß */ font-family: "Georgia", serif; /* optional Serifenschrift für Tiefe */ } .bonus-tipp-box p:first-child { margin: 0 0 0.5rem 0; font-weight: bold; font-size: 1.1rem; } .bonus-tipp-box em { font-style: italic; } /* ========== SEMANTISCH BESSERE ALTERNATIVEN ZU <strong> ========== */ /* z.B. für Begriffe wie „Verstehen“, „Gestaltung“ etc. */ .leitbegriff { font-weight: bold; font-variant: small-caps; color: #5a2f1b; } /* z.B. für Personen-Namen wie „Leon“, „Nora“, „Emil“ */ .figure-name { font-weight: bold; color: #6a4d3b; } /* z.B. für Einleitungen zu Links („Zur vertieften Darstellung…“) */ .bold-label { font-weight: 600; color: #3a3a3a; } /* z.B. für Fragen in Absätzen */ .emphatic-question { font-style: italic; font-weight: 500; color: #4b2e21; } blockquote { font-style: italic; font-size: 1.15em; color: #444; border-left: 4px solid #b53830; /* A_MMM-Rotbraun-Ton */ margin: 1.5em 0; padding: 0.5em 1em; background-color: #f8f8f8; } /* ===== USE CASES GRID ===== */ .use-cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; margin-top: 1.5em; margin-bottom: 2em; } @media (max-width: 768px) { .use-cases-grid { grid-template-columns: 1fr; } } .use-cases-grid div { background-color: #fdf9f4; border-left: 4px solid #a74d11; padding: 1em; border-radius: 6px; line-height: 1.5; } /* ===== INFO BOX NEU ===== */ .info-box { background-color: #fffaf6; border-left: 4px solid #a74d11; padding: 1.5em 2em; border-radius: 6px; max-width: 740px; margin: 3em auto 2em auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); } .info-box h3 { margin-top: 0; color: #a74d11; } /* ===== CTA-FINAL BLOCK ===== */ .cta-final { background-color: #fdf9f4; border-left: 4px solid #a74d11; padding: 2em; margin-top: 3em; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,0.03); max-width: 740px; margin-left: auto; margin-right: auto; } .contact-form-section form { padding: 1.5em; background: #f9f9f9; border-radius: 1em; box-shadow: 0 0 10px rgba(0,0,0,0.05); } .contact-form-section input, .contact-form-section textarea { border-radius: 0.5em; padding: 0.5em; } /* Stil für die Vignettenbox */ .vignette-box { background-color: #fdfdfd; border-left: 4px solid #a63e2e; /* A_MMM-Rotbraun */ padding: 1.5em 1.8em; margin: 2em 0; font-style: italic; font-size: 1.05em; line-height: 1.6; box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.04); } /* Typografisches Zwischenzeichen */ .vignette-symbol { text-align: center; font-size: 1.2em; color: #a63e2e; margin: 1.5em 0 -1em 0; letter-spacing: 0.25em; } /* Optional: Stil für Reflexionsfragen nach Vignetten */ .vignette-reflection ul { list-style-type: none; padding-left: 0; margin-top: 1em; } .vignette-reflection li::before { content: "▸"; color: #a63e2e; font-weight: bold; display: inline-block; width: 1.2em; margin-left: -1.2em; } .a_mmm-vignette { background-color: #f9f4f3; /* zarter Schmuckfarbton */ border-left: 4px solid #a63e2e; padding: 1.6em 2em; margin: 2.5em 0; font-style: italic; font-size: 1.05em; line-height: 1.6; color: #3a2e2a; /* warmes Dunkelgrau */ box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.03); } .a_mmm-reflection ul { list-style-type: none; padding-left: 0; margin-top: 1em; } .a_mmm-reflection li::before { content: "▸"; color: #a63e2e; font-weight: bold; display: inline-block; width: 1.2em; margin-left: -1.2em; } .vignette-text { border-left: 2px solid #d6d2d1; /* sehr dezente Linie, fast wie Bleistift */ padding-left: 1.2em; margin: 1.8em 0; font-style: italic; background-color: transparent; color: #444; font-size: 1.02em; line-height: 1.6; } /* ========== A_MMM MOBILE FINE-TUNING ========== */ @media (max-width: 480px) { body { font-size: 16px; line-height: 1.55; } h1 { font-size: 1.4rem; } h2 { font-size: 1.2rem; } h3, h4 { font-size: 1.05rem; } .btn-primary, .btn-secondary, .pagenav-prev a, .pagenav-next a { font-size: 0.95rem; padding: 0.6rem 1.2rem; } .hero-image-container img.hero-image { width: 95vw; } .poetik-block, .vignette-block, .info-box, .masterclass-teaser, .cta-final { padding-left: 1em; padding-right: 1em; } .use-cases-grid { gap: 1em; } .awesomplete { max-width: 100%; font-size: 1rem; } .awesomplete ul { font-size: 0.95rem; line-height: 1.4; max-width: 100%; box-sizing: border-box; } } @media (max-width: 768px) { body { background-color: #fff; } } .btn-mini { font-size: 0.85em; /* kleiner als Hauptbuttons */ padding: 4px 10px; border: 1px solid #a24f1e; /* A_MMM Rotbraun */ background-color: transparent; /* kein Hintergrund */ color: #a24f1e; border-radius: 4px; text-decoration: none; transition: all 0.2s ease; } .btn-mini:hover { background-color: #a24f1e; color: #fff; } /* Allgemeiner Stil für alle Weg-Vertiefungen – dezenter */ .weg-vertiefung { background: transparent; /* kein Kasten-Hintergrund */ border-left: 2px solid #c8b8af; /* sehr helles Rotbraun, nur feiner Strich */ padding: 0.8em 1.2em; margin: 1.5em 0; } .weg-vertiefung h3 { margin-top: 0; color: #693523; font-size: 1.2em; } .weg-vertiefung h4 { margin-top: 0.8em; font-weight: 600; } .weg-vertiefung ul { margin-top: 0.4em; padding-left: 1.1em; } .weg-vertiefung li { margin-bottom: 0.3em; } /* Spezifische Farbakzente pro Weg – dezenter */ .weg-vertiefung.verstehen { border-left-color: #d8c2b5; } .weg-vertiefung.begegnung { border-left-color: #c0c7d4; } .weg-vertiefung.gestaltung { border-left-color: #bcd0c2; } /* Übergänge & Dreiklang – zurückhaltender */ .uebergaenge-dreiklang { background: transparent; /* kein Block-Hintergrund */ border-top: 1px solid #ddd; /* nur obere Linie */ padding-top: 1em; margin: 2em 0; font-style: italic; /* weicher Lesefluss */ } .uebergaenge-dreiklang h3 { margin-top: 0; font-style: normal; color: #693523; } .serien-filter, .resonanz-filter { margin-top: 2rem; } .serien-tags, .resonanz-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 1rem; } .serien-tags a, .resonanz-tags a { text-decoration: none; border-bottom: 1px solid currentColor; } /* ---- A_MMM Note Box (Hinweis zur Sprache) ------------------------------ */ :root{ /* Setze hier deine Markenfarbe (Rotbraun) */ --a-mmm-accent: #7a3e2e; /* ← ersetzen, falls nötig */ } /* Grundstil */ .a_mmm-note{ margin: 1.75rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--a-mmm-accent); border-radius: 12px; background: rgba(122, 62, 46, .07); /* Fallback */ background: color-mix(in srgb, var(--a-mmm-accent) 10%, white); } /* Überschrift in der Box */ .a_mmm-note > h3{ margin: 0 0 .35rem 0; font-size: 1.05rem; line-height: 1.3; font-weight: 600; color: var(--a-mmm-accent); } /* Fließtext in der Box */ .a_mmm-note > p{ margin: .4rem 0 0 0; } /* Tooltips konsistent sichtbar */ abbr[title]{ text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; } /* Dark-Mode Anpassung */ @media (prefers-color-scheme: dark){ .a_mmm-note{ background: color-mix(in srgb, var(--a-mmm-accent) 18%, #0b0b0b); border-left-color: color-mix(in srgb, var(--a-mmm-accent) 75%, #000); } .a_mmm-note > h3{ color: color-mix(in srgb, var(--a-mmm-accent) 85%, #fff); } } /* Hoher Kontrast / Windows HC */ @media (forced-colors: active){ .a_mmm-note{ border-left: 4px solid CanvasText; background: Canvas; } .a_mmm-note > h3{ color: CanvasText; } } /* ================================ Haltung × Horizont – Dossier Styles ================================ */ /* Grundtypografie */ .hxh-dossier .container { max-width: 900px; margin: 0 auto; padding: 0 1rem; } .hxh-dossier h2.kapitel-title { font-size: 2.4rem; line-height: 1.2; margin: 0; text-align: center; color: #fff; } .hxh-dossier .lead { font-size: 1.15rem; } /* Kapitel-Sujet (Vollbreite) */ .kapitel-hero { position: relative; height: 72vh; min-height: 440px; background-size: cover; background-position: center; } .kapitel-hero .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.28); /* Standard: mittleres Overlay */ } .kapitel-hero .inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2rem; } /* Textblöcke */ .section-pad { padding: 3rem 0; } .hxh-dossier blockquote.kernsatz { font-size: 1.35rem; font-style: italic; color: #693523; /* A_MMM Rotbraun */ margin: 1.75rem 0 0.5rem; border-left: 4px solid #693523; padding-left: 1rem; } .hxh-dossier .subhead { font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.15rem; } /* A_MMM Bezug + Reflexionsbox */ .feldbezug { background: #f8f8f8; border-left: 4px solid #693523; padding: 1rem; margin: 1.5rem 0; } .reflexionsbox { background: #f6f6f9; border: 1px solid #e3e3ee; border-radius: 6px; padding: 1rem 1.25rem; margin: 2rem 0; } .reflexionsbox h3 { margin: 0 0 .5rem 0; font-size: 1.05rem; letter-spacing: .2px; } .reflexionsbox ul { margin: .25rem 0 0 1rem; } /* Fußnote */ .fn { font-size: .92rem; opacity: .85; margin-top: .5rem; } .fn a { color: inherit; text-decoration: underline; } /* Overlay-Varianten */ .overlay--none { background: transparent !important; } .overlay--light { background: rgba(0,0,0,.18) !important; } .overlay--strong { background: rgba(0,0,0,.42) !important; } /* Responsive Titelgröße */ @media (max-width:680px){ .hxh-dossier h2.kapitel-title { font-size: 1.85rem; } } /* Inhaltsübersicht mit Thumbnails */ .toc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; margin-top: 1rem; } .toc-item { display: flex; flex-direction: column; background:#fff; border:1px solid #ddd; border-radius:6px; overflow:hidden; text-decoration:none; color:#222; transition:transform .2s, box-shadow .2s; } .toc-item img { width:100%; height:140px; object-fit:cover; display:block; } .toc-item span { padding:.75rem; font-size:.95rem; font-weight:500; } .toc-item:hover { transform:translateY(-2px); box-shadow:0 3px 6px rgba(0,0,0,.1); } /* ===================================== Lesbarkeit der Kapitel-Headlines verbessern ===================================== */ /* Standard-Overlay etwas stärker */ .kapitel-hero .overlay { background: rgba(0,0,0,.45); /* vorher .28 */ } /* Headline besser abheben */ .kapitel-hero h2.kapitel-title { text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* dezent, aber wirksam */ font-weight: 600; } /* Optionale Variante mit Hintergrundbalken (kannst du für schwierige Bilder punktuell ergänzen) */ .kapitel-hero .inner.bg-balken { background: rgba(0,0,0,.35); border-radius: 6px; padding: 1rem 2rem; } .kapitel-hero h2.kapitel-title { color: #693523; /* A_MMM Rotbraun */ background: rgba(255,255,255,0.65); /* halbtransparenter heller Hintergrund */ padding: .5rem 1rem; border-radius: 4px; text-shadow: none; /* Schatten nicht mehr nötig */ font-weight: 600; } /* ======================================= Mobile-Fixes für Dossier-Seiten (A_MMM) ======================================= */ @media (max-width: 767px) { /* Doppelte Seitentitel (Page Header) auf Mobil ausblenden */ .item-page .page-header { display: none !important; } /* Headlines auf Mobil kleiner & lesbarer */ .item-page h1, .item-page h2, .item-page h3 { font-size: 1.4em !important; line-height: 1.3em !important; word-break: normal; hyphens: auto; margin-top: 1em; margin-bottom: 0.8em; } /* Introtext / Untertitel mit etwas Abstand */ .item-page .intro-text { font-size: 1em; line-height: 1.5em; margin-bottom: 1.2em; } /* Abstände bei Zitaten und Introblöcken */ blockquote { font-size: 0.95em; line-height: 1.5em; padding: 1em 1.2em; margin: 1.2em 0; border-left: 4px solid #693523; /* A_MMM-Rotbraun */ background-color: #f8f8f8; } /* Abstand zwischen Absätzen insgesamt etwas großzügiger */ .item-page p { margin-bottom: 1.2em; } /* Bilder im Content immer auf 100% Breite */ .item-page img { max-width: 100%; height: auto; } }

/* =======================================
   Spezielle Styles nur für Dossier-Seiten
   ======================================= */
.hxh-dossier .kapitel-hero .overlay {
  background: rgba(0,0,0,.45);  /* dunkleres Overlay für bessere Lesbarkeit */
}

.hxh-dossier h2.kapitel-title {
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* subtile Kontur für helle Hintergründe */
}

/* Variante: heller Hintergrundbalken hinter Headline – optional bei schwierigen Bildern */
.hxh-dossier .kapitel-hero .inner.bg-balken h2.kapitel-title {
  color: #693523;  /* A_MMM Rotbraun */
  background: rgba(255,255,255,0.7);
  padding: .5rem 1rem;
  border-radius: 4px;
  text-shadow: none;
}

/* Mobile-Fix: Titel kleiner & mit besserem Zeilenumbruch */
@media (max-width: 767px) {
  .hxh-dossier h2.kapitel-title {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    padding: 0 .5rem;
  }
}