/*
 * ============================================================
 * AFFIKSYS – USER.CSS
 * ============================================================
 *
 * Projekt:       www.affiksys.com
 * Unternehmen:   Lerner und Heide AffiKSys GbR
 * Joomla:        Cassiopeia Child-Template
 * Template:      cassiopeia_extended
 * Version:       1.1 – Dokumentationsstand
 *
 * ZWECK:
 * Diese Datei enthält die bestehende Gestaltung des
 * Impressums sowie dessen Joomla-Layoutanpassungen.
 *
 * WICHTIG:
 * Die bestehenden CSS-Regeln wurden nicht verändert.
 * Ergänzt wurden ausschließlich Dokumentationskommentare.
 *
 * GEPLANTE WEITERE DATEIEN:
 * - layout.css       Gemeinsames Seitenlayout
 * - navigation.css   Linkes ausklappbares Menü
 * - components.css   Wiederverwendbare Komponenten
 * - pages.css        Weitere seitenspezifische Regeln
 *
 * WARTUNGSHINWEISE:
 * 1. Bestehende Impressum-Regeln nicht ungeprüft entfernen.
 * 2. Neue globale Layoutregeln nicht hier duplizieren.
 * 3. Vor größeren Änderungen Sicherung erstellen.
 * 4. Nach Änderungen Desktop und Smartphone prüfen.
 *
 * ============================================================
 */


/* ============================================================
   01. SCHRIFTARTEN
   ============================================================

   Michroma:
   Technische Schrift für Überschriften und Markenelemente.

   Manrope:
   Gut lesbare Schrift für Fließtexte.

   Die Schriftarten werden derzeit von Google Fonts geladen.

   DATENSCHUTZ:
   Eine lokale Bereitstellung ist vorgesehen.
   Bis zur Umstellung bleibt diese Einbindung unverändert.

   WICHTIG:
   @import muss vor normalen CSS-Regeln stehen.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Manrope:wght@400;500;600;700&display=swap');


/* ============================================================
   02. IMPRESSUM – GRUNDLAYOUT UND DESIGNVARIABLEN
   ============================================================

   HAUPTKLASSE:
   .affiksys-impressum

   Alle nachfolgenden Impressum-Regeln sind überwiegend
   auf diesen Bereich begrenzt.

   CSS-VARIABLEN:
   --aks-bg       Hintergrundfarbe
   --aks-surface  Hintergrund für Inhaltskarten
   --aks-line     Linien und Umrandungen
   --aks-fg       Primäre Textfarbe
   --aks-muted    Dezente Textfarbe
   --aks-blue     Markenblau
   --aks-gold     Goldener Akzent

   ANPASSUNG:
   Farben lassen sich hier zentral ändern, ohne jede
   einzelne CSS-Regel bearbeiten zu müssen.

   HINWEIS:
   Diese Variablen gelten aktuell nur innerhalb des
   Impressums. Später können wir gemeinsame Farben
   in eine globale Designstruktur übernehmen.
   ============================================================ */

.affiksys-impressum {
  --aks-bg: #0b0c0f;
  --aks-surface: #13151b;
  --aks-line: #262a34;
  --aks-fg: #e6e8ee;
  --aks-muted: #9aa0ad;
  --aks-blue: #3d7bff;
  --aks-gold: #c8a96a;

  background:
    radial-gradient(1200px 500px at 85% -10%,
      rgba(61,123,255,.10), transparent 60%),
    var(--aks-bg);

  color: var(--aks-fg);
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 0 0 48px;
}


/* ============================================================
   03. BOX-MODELL UND INHALTSBREITE
   ============================================================

   BOX-SIZING:
   Verhindert, dass Padding und Rahmen die festgelegte
   Elementbreite zusätzlich vergrößern.

   AKS-WRAP:
   Begrenzt die Inhaltsbreite auf 980 Pixel und zentriert
   die Inhalte innerhalb des Impressums.

   WICHTIG:
   Diese Begrenzung betrifft die inneren Inhalte.
   Der äußere Hintergrund kann weiterhin die gesamte
   Seitenbreite einnehmen.
   ============================================================ */

.affiksys-impressum *,
.affiksys-impressum *::before,
.affiksys-impressum *::after {
  box-sizing: border-box;
}

.affiksys-impressum .aks-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}


/* ============================================================
   04. KOPFBEREICH DES IMPRESSUMS
   ============================================================

   AKS-TOP:
   Oberer Bereich mit:
   - AffiKSys-Schriftzug
   - Temporärem Zurück-Link
   - Kategorie- und Seitenkennung

   FLEXBOX:
   Ordnet die Elemente nebeneinander an.

   FLEX-WRAP:
   Erlaubt einen Zeilenumbruch bei wenig Platz.

   ZUKÜNFTIGE ÄNDERUNG:
   Dieser bisher seitenspezifische Kopfbereich soll
   später durch den gemeinsamen Joomla-Header ersetzt
   beziehungsweise darin integriert werden.

   NICHT VORZEITIG ENTFERNEN.
   ============================================================ */

.affiksys-impressum .aks-top {
  border-bottom: 1px solid var(--aks-line);
}

.affiksys-impressum .aks-top .aks-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}


/* ------------------------------------------------------------
   04.1 AffiKSys-Schriftzug

   Der Buchstabe K wird separat in Markenblau dargestellt.
   ------------------------------------------------------------ */

.affiksys-impressum .aks-wordmark {
  font-family: "Michroma", sans-serif;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--aks-fg);
  text-decoration: none;
}

.affiksys-impressum .aks-wordmark b {
  color: var(--aks-blue);
  font-weight: 400;
}


/* ------------------------------------------------------------
   04.2 Kategorie- und Seitenkennung

   Beispiel:
   RECHTLICHES · IMPRESSUM

   Die Kennung ist aktuell Teil des Impressum-HTML.
   Später soll sie möglichst automatisch aus dem
   Joomla-Seitenkontext erzeugt werden.
   ------------------------------------------------------------ */

.affiksys-impressum .aks-crumb {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aks-muted);
}


/* ============================================================
   05. LOGO UND BANNER
   ============================================================

   AKS-HERO:
   Enthält das große AffiKSys-Banner.

   Das Bild wird proportional skaliert:
   width: 100%
   height: auto

   Dadurch bleibt das ursprüngliche Seitenverhältnis
   erhalten.

   BORDER-RADIUS:
   Rundet die Ecken des Banners ab.

   BOX-SHADOW:
   Erzeugt eine dezente blaue Leuchtwirkung.

   ZUKÜNFTIGE ÄNDERUNG:
   Das Banner soll später über das gemeinsame Layout
   verwaltet werden, damit es auf allen Seiten einheitlich
   dargestellt werden kann.

   Die Bannergröße kann dann abhängig vom Seitentyp
   angepasst werden.
   ============================================================ */

.affiksys-impressum .aks-hero {
  padding: 40px 0 8px;
}

.affiksys-impressum .aks-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--aks-line),
    0 30px 80px -30px rgba(61,123,255,.35);
}


/* ============================================================
   06. INHALTSBEREICH UND SEITENÜBERSCHRIFT
   ============================================================

   AKS-CONTENT:
   Definiert die vertikalen Abstände des Inhaltsbereichs.

   AKS-INTRO:
   Gruppiert die einleitenden Elemente.

   AKS-EYEBROW:
   Kleine Kategorieüberschrift oberhalb der Hauptüberschrift.

   H1:
   Hauptüberschrift des Impressums.

   CLAMP:
   Passt die Schriftgröße abhängig von der Bildschirmbreite
   an, ohne die angegebenen Mindest- und Höchstwerte
   zu überschreiten.

   AKS-LEDE:
   Einleitender Beschreibungstext.

   62ch:
   Begrenzt die Zeilenlänge ungefähr anhand der
   Zeichenbreite und verbessert die Lesbarkeit.
   ============================================================ */

.affiksys-impressum .aks-content {
  padding-top: 48px;
  padding-bottom: 72px;
}

.affiksys-impressum .aks-intro {
  display: grid;
  gap: 10px;
  margin-bottom: 40px;
}

.affiksys-impressum .aks-eyebrow {
  font-family: "Michroma", sans-serif;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--aks-gold);
}

.affiksys-impressum h1 {
  font-family: "Michroma", sans-serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--aks-fg);
  margin: 0;
}

.affiksys-impressum .aks-lede {
  color: var(--aks-muted);
  max-width: 62ch;
  margin: 0;
}


/* ============================================================
   07. INFORMATIONSBLÖCKE
   ============================================================

   AKS-GRID:
   Zweispaltiges Raster für Unternehmensinformationen.

   REPEAT(2, ...):
   Erzeugt zwei gleich breite Spalten.

   MINMAX(0, 1FR):
   Erlaubt den Spalten, sich bei Bedarf zu verkleinern.

   GAP: 1PX:
   Zusammen mit der Hintergrundfarbe entstehen
   feine Trennlinien zwischen den Informationsblöcken.

   AKS-BLOCK:
   Einzelne Informationskarte.

   AKS-WIDE:
   Ein Element mit dieser Klasse erstreckt sich
   über die gesamte Rasterbreite.

   RESPONSIVE:
   Auf Smartphones wird das Raster später auf
   eine Spalte reduziert.
   ============================================================ */

.affiksys-impressum .aks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--aks-line);
  border: 1px solid var(--aks-line);
  border-radius: 12px;
  overflow: hidden;
}

.affiksys-impressum .aks-block {
  background: var(--aks-surface);
  padding: 24px 26px;
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.affiksys-impressum .aks-wide {
  grid-column: 1 / -1;
}


/* ------------------------------------------------------------
   07.1 Überschriften innerhalb der Informationsblöcke

   Goldfarbene, kompakte Überschriften im Michroma-Stil.
   ------------------------------------------------------------ */

.affiksys-impressum h2 {
  font-family: "Michroma", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aks-gold);
  margin: 0;
}


/* ------------------------------------------------------------
   07.2 Texte innerhalb der Informationsblöcke

   OVERFLOW-WRAP:
   Verhindert, dass lange Zeichenfolgen wie E-Mail-Adressen
   oder URLs das Kartenlayout sprengen.

   AKS-STRONG:
   Hervorgehobene Informationen.

   AKS-NOTE:
   Ergänzende Hinweise in dezenter Textfarbe.
   ------------------------------------------------------------ */

.affiksys-impressum .aks-block p {
  margin: 0;
  overflow-wrap: anywhere;
}

.affiksys-impressum .aks-strong {
  font-size: 18px;
  font-weight: 700;
}

.affiksys-impressum .aks-note {
  font-size: 14px;
  color: var(--aks-muted);
}


/* ============================================================
   08. LINKS
   ============================================================

   Standardlinks übernehmen die helle Textfarbe.

   Die Unterstreichung verwendet das AffiKSys-Blau.

   HOVER:
   Beim Überfahren mit der Maus wird der Link blau.

   HINWEIS:
   Diese Regeln betreffen aktuell nur Links innerhalb
   des Impressums.

   Die spätere Navigation erhält eigene Linkregeln
   in navigation.css.
   ============================================================ */

.affiksys-impressum a {
  color: var(--aks-fg);
  text-decoration-color: var(--aks-blue);
  text-underline-offset: 3px;
}

.affiksys-impressum a:hover {
  color: var(--aks-blue);
}


/* ============================================================
   09. RECHTLICHE HINWEISE
   ============================================================

   AKS-LEGAL:
   Bereich für ergänzende rechtliche Informationen.

   DISPLAY: GRID:
   Ordnet die einzelnen Abschnitte untereinander an.

   GAP:
   Definiert den Abstand zwischen den Abschnitten.

   MAX-WIDTH: 68CH:
   Begrenzt die Textbreite für eine bessere Lesbarkeit.
   ============================================================ */

.affiksys-impressum .aks-legal {
  margin-top: 56px;
  display: grid;
  gap: 40px;
}

.affiksys-impressum .aks-legal section {
  display: grid;
  gap: 12px;
  max-width: 68ch;
}


/* ------------------------------------------------------------
   09.1 Abschnittsüberschriften

   H3:
   Überschriften der rechtlichen Themen.

   ::BEFORE:
   Erzeugt die kleine, blau umrandete Raute
   vor jeder Abschnittsüberschrift.

   Die Raute ist ein reines CSS-Gestaltungselement.
   Dafür wird keine zusätzliche Bilddatei benötigt.
   ------------------------------------------------------------ */

.affiksys-impressum .aks-legal h3 {
  font-family: "Michroma", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--aks-fg);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.affiksys-impressum .aks-legal h3::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid var(--aks-blue);
  transform: rotate(45deg);
  flex: none;
}


/* ------------------------------------------------------------
   09.2 Unterüberschriften und Fließtexte

   H4:
   Weitere Untergliederung innerhalb der Rechtstexte.

   P:
   Standarddarstellung der rechtlichen Erläuterungen.
   ------------------------------------------------------------ */

.affiksys-impressum .aks-legal h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--aks-fg);
  margin: 8px 0 0;
}

.affiksys-impressum .aks-legal p {
  color: #c9ccd5;
  margin: 0;
}


/* ============================================================
   10. ABSCHLUSSBEREICH / FOOTER
   ============================================================

   AKS-FOOTER:
   Abschlussbereich des Impressums.

   Die obere Trennlinie grenzt den Footer optisch
   vom restlichen Inhalt ab.

   FLEX-WRAP:
   Erlaubt einen Zeilenumbruch auf schmalen Bildschirmen.

   AKS-CLAIM:
   Darstellung des AffiKSys-Slogans.

   ZUKÜNFTIGE ÄNDERUNG:
   Ein gemeinsamer Joomla-Footer kann später diesen
   seitenspezifischen Abschlussbereich ergänzen
   oder ersetzen.

   Vorher auf doppelte Footer-Darstellung prüfen.
   ============================================================ */

.affiksys-impressum .aks-footer {
  border-top: 1px solid var(--aks-line);
}

.affiksys-impressum .aks-footer .aks-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 13px;
  color: var(--aks-muted);
}

.affiksys-impressum .aks-claim {
  font-family: "Michroma", sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
}

.affiksys-impressum .aks-claim b {
  color: var(--aks-blue);
  font-weight: 400;
}


/* ============================================================
   11. RESPONSIVE DESIGN – SMARTPHONES
   ============================================================

   BREAKPOINT:
   Bildschirmbreiten bis einschließlich 640 Pixel.

   ANPASSUNGEN:
   - Informationsraster wird einspaltig.
   - Karten erhalten geringere Innenabstände.
   - Abstand oberhalb des Banners wird reduziert.
   - Inhaltsabstände werden für kleine Displays angepasst.

   WICHTIG:
   Diese Regeln gelten nur für das Impressum.

   Die spätere mobile Navigation wird separat in
   navigation.css behandelt.
   ============================================================ */

@media (max-width: 640px) {
  .affiksys-impressum .aks-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .affiksys-impressum .aks-block {
    padding: 20px;
  }

  .affiksys-impressum .aks-hero {
    padding-top: 24px;
  }

  .affiksys-impressum .aks-content {
    padding-top: 36px;
    padding-bottom: 56px;
  }
}


/* ============================================================
   12. JOOMLA-AUSSENLAYOUT – IMPRESSUM
   ============================================================

   HINTERGRUND:

   Das Cassiopeia-Template verwendet standardmäßig
   ein Seitenraster mit eigenen Inhaltscontainern.

   Beim ursprünglichen Aufbau des Impressums entstanden
   dadurch links und rechts weiße Seitenbereiche.

   Die folgenden Regeln wurden ergänzt, um das
   Impressum über die gesamte verfügbare Seitenbreite
   darzustellen.

   SELEKTOR :HAS():

   body:has(.affiksys-impressum)

   Die Regel greift nur dann, wenn die aktuelle Seite
   ein Element mit der Klasse .affiksys-impressum enthält.

   Dadurch werden andere Joomla-Seiten nicht automatisch
   von diesen Layoutanpassungen betroffen.

   ACHTUNG:

   Diese Regeln sind wichtig für das derzeit
   funktionierende Impressum.

   Beim späteren Aufbau unseres dreispaltigen Layouts
   müssen wir prüfen, welche Regeln noch erforderlich sind.

   Nicht ungeprüft entfernen.
   ============================================================ */


/* ------------------------------------------------------------
   12.1 Seitenhintergrund

   Setzt den äußeren Seitenhintergrund auf Dunkel.
   Entfernt den standardmäßigen Body-Außenabstand.
   ------------------------------------------------------------ */

body:has(.affiksys-impressum) {
    background: #0b0c10;
    margin: 0;
}


/* ------------------------------------------------------------
   12.2 Joomla-Seitenraster

   Überschreibt die bisherige Rasterdarstellung
   für die Impressumsseite.

   WICHTIG FÜR SPÄTER:

   Unser zukünftiges Layout soll links die Navigation,
   mittig den Joomla-Body und rechts eine freie Fläche
   darstellen.

   Diese Regel muss dann mit der neuen Layoutstruktur
   abgestimmt werden.
   ------------------------------------------------------------ */

body:has(.affiksys-impressum) .site-grid {
    display: block;
}


/* ------------------------------------------------------------
   12.3 Joomla-Inhaltscontainer

   Entfernt die maximale Breitenbegrenzung und die
   äußeren Abstände des Joomla-Komponentencontainers.

   Dadurch kann das Impressum die gesamte verfügbare
   Breite nutzen.
   ------------------------------------------------------------ */

body:has(.affiksys-impressum) .container-component {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}


/* ------------------------------------------------------------
   12.4 Hauptinhalt und Beitragscontainer

   Entfernt weitere Breitenbegrenzungen und Abstände
   innerhalb der Joomla-Beitragsdarstellung.
   ------------------------------------------------------------ */

body:has(.affiksys-impressum) main,
body:has(.affiksys-impressum) .com-content-article {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}


/* ------------------------------------------------------------
   12.5 Äußerer Impressumscontainer

   Stellt sicher, dass der Impressumscontainer selbst
   die gesamte verfügbare Breite einnehmen kann.

   Die eigentlichen Texte werden weiterhin über
   .aks-wrap auf maximal 980 Pixel begrenzt.
   ------------------------------------------------------------ */

body:has(.affiksys-impressum) .affiksys-impressum {
    width: 100%;
    max-width: none;
    margin: 0;
}


/* ============================================================
   ENDE DER DATEI – USER.CSS
   ============================================================

   STATUS:
   Bestehendes Impressum-Design dokumentiert.

   NÄCHSTE ENTWICKLUNGSSCHRITTE:

   1. layout.css
      - Gemeinsamer Header
      - Bannerbereich
      - Dreispaltige Seitenstruktur
      - Joomla-Body in der Mitte
      - Rechte Reservefläche

   2. navigation.css
      - Linkes ausklappbares Menü
      - Metallic-Buttons
      - Blaue Hover- und Fokus-Effekte
      - Responsive Navigation
      - Aktuellen Menüpunkt ausblenden

   3. Einbindung der neuen CSS-Dateien
      - Über das Joomla-Child-Template
      - Definierte Ladereihenfolge
      - Bestehendes Impressum überprüfen

   ============================================================ */