/* =========================================================================
   QUADRONET Base - Inhaltselemente
   -------------------------------------------------------------------------
   Ersetzt EXT:fluid_styled_content/Resources/Public/Css/fluid_styled_content.css.

   Warum ersetzen und nicht mitladen: Die Core-Datei bringt eine eigene
   Tabellen- und Abstandslogik mit, die ausserhalb jedes Layers liegt - und
   ungelayertes CSS schlaegt JEDEN Layer, auch qn.theme. Das Theme koennte
   sie also nur mit !important ueberstimmen. Genau das soll die
   Layer-Ordnung verhindern.

   Die KLASSENNAMEN des Cores bleiben erhalten (frame, ce-textpic, ce-left,
   ce-intext, ce-nowrap, ce-gallery). Sie kommen aus den Core-Templates, und
   die wollen wir nicht nachbauen, nur weil uns die Namen nicht gefallen.

   UMBRUCHBREITE: 600px steht hier zweimal und muss zur Einstellung
   qnBase.bilder.umbruchBreite passen. CSS kann keine Site-Settings lesen -
   diese Dopplung ist unvermeidbar. Wer hier aendert, aendert dort mit,
   sonst liefert der Server fuer die gestapelte Darstellung zu kleine
   Bilder.
   ========================================================================= */

@layer qn.components {

  /* ----- Inhaltselement-Rahmen ------------------------------------------ */
  /* Abstand NACH unten, nicht nach oben: So addieren sich die Abstaende
     zweier benachbarter Elemente nicht, und das erste Element klebt nicht
     am Seitenkopf. Das letzte verliert seinen Abstand wieder. */
  .frame {
    margin-block-end: var(--qn-raum-2xl);
  }
  .frame:last-child { margin-block-end: 0; }

  .frame-space-before-extra-small { margin-block-start: var(--qn-raum-xs); }
  .frame-space-before-small       { margin-block-start: var(--qn-raum-md); }
  .frame-space-before-medium      { margin-block-start: var(--qn-raum-xl); }
  .frame-space-before-large       { margin-block-start: var(--qn-raum-2xl); }
  .frame-space-before-extra-large { margin-block-start: var(--qn-raum-3xl); }

  .frame-space-after-extra-small { margin-block-end: var(--qn-raum-xs); }
  .frame-space-after-small       { margin-block-end: var(--qn-raum-md); }
  .frame-space-after-medium      { margin-block-end: var(--qn-raum-xl); }
  .frame-space-after-large       { margin-block-end: var(--qn-raum-2xl); }
  .frame-space-after-extra-large { margin-block-end: var(--qn-raum-3xl); }

  /* ----- Ein einzelnes Medium ------------------------------------------- */
  .qn-medium {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--qn-raum-xs);
  }

  .qn-medium__bild { width: 100%; }

  .qn-medium__text {
    font-size: var(--qn-groesse-klein, 0.875rem);
    line-height: var(--qn-zeile-normal, 1.5);
    color: var(--qn-schrift-leise, inherit);
  }

  /* Ein verlinktes Bild braucht einen sichtbaren Fokusrahmen - der liegt
     am <a>, nicht am Bild. Ohne das display-Korrektiv sitzt der Rahmen
     wegen der Zeilenhoehe schief unter dem Bild. */
  .qn-medium a { display: block; }

  /* ----- Galerie -------------------------------------------------------- */
  .ce-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--qn-raum-lg);
    /* Der Core gibt die Bilder zeilenweise aus; im Raster uebernimmt
       grid-auto-flow das Setzen. Die Zeilen-Wrapper des Cores brauchen wir
       deshalb nicht - siehe Partials/Media/Gallery.html. */
  }

  /* Die Spaltenzahl kommt aus data-ce-columns, nicht aus einem
     style-Attribut - damit die Seite auch unter einer Content Security
     Policy ohne 'unsafe-inline' funktioniert. Ab der Umbruchbreite,
     darunter bleibt es bei einer Spalte (siehe Kopf dieser Datei). */
  @media (min-width: 600px) {
    .ce-gallery[data-ce-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ce-gallery[data-ce-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ce-gallery[data-ce-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ce-gallery[data-ce-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ce-gallery[data-ce-columns="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ce-gallery[data-ce-columns="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .ce-gallery[data-ce-columns="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  }

  .ce-border .qn-medium__bild {
    border: var(--qn-medien-rahmen, 1px) solid var(--qn-linie, currentColor);
    padding: var(--qn-raum-2xs);
  }

  /* ----- Text und Bild -------------------------------------------------- */
  .ce-textpic { display: flow-root; }

  .ce-textpic > .ce-gallery { margin-block-end: var(--qn-raum-lg); }
  .ce-below > .ce-gallery   { margin-block: var(--qn-raum-lg) 0; }

  /* Bild IM Text: der Text laeuft darum herum. Das ist der einzige Fall,
     in dem float noch das richtige Werkzeug ist - Grid und Flex koennen
     Textumfluss nicht. */
  @media (min-width: 600px) {
    .ce-intext:not(.ce-nowrap) > .ce-gallery {
      width: var(--qn-medien-imtext, 44%);
      margin-block-end: var(--qn-raum-md);
    }
    .ce-intext.ce-left:not(.ce-nowrap) > .ce-gallery {
      float: left;
      margin-inline-end: var(--qn-raum-xl);
    }
    .ce-intext.ce-right:not(.ce-nowrap) > .ce-gallery {
      float: right;
      margin-inline-start: var(--qn-raum-xl);
    }

    /* Bild NEBEN dem Text, ohne Umfluss: zwei echte Spalten. Hier ist
       Flex richtig, weil die Reihenfolge im Markup (Bild zuerst) fuer
       "rechts" umgekehrt werden muss - und zwar nur visuell. Die
       Vorlesereihenfolge bleibt die des Markups. */
    .ce-nowrap {
      display: flex;
      align-items: flex-start;
      gap: var(--qn-raum-xl);
    }
    .ce-nowrap > .ce-gallery {
      flex: 0 0 var(--qn-medien-imtext, 44%);
      margin-block-end: 0;
    }
    .ce-nowrap > .ce-bodytext { flex: 1 1 auto; min-width: 0; }
    .ce-nowrap.ce-right > .ce-gallery { order: 2; }
  }

  /* Gestapelt - und zwar ohne float, sonst reicht der Text nicht um das
     Bild herum, sondern daneben vorbei. */
  @media (max-width: 599px) {
    .ce-intext > .ce-gallery,
    .ce-nowrap > .ce-gallery {
      float: none;
      width: 100%;
      margin-block-end: var(--qn-raum-lg);
    }
  }

  /* ----- Bildanteil neben dem Text (23.10.2026) ------------------------
     Feld "Layout" am Inhaltselement, Werte wie qn_image_sizes/Bootstrap
     (siehe page.tsconfig). Der Core setzt den Wert als Klasse
     frame-layout-<wert> an den Rahmen; hier wird nur die Breite
     umgestellt, die beide Varianten oben schon verwenden. Wirkt dadurch
     nur bei "im Text" und "neben dem Text" - und erst ab der Umbruch-
     breite, darunter bleibt es gestapelt.
     Die Prozente muessen zu ImageVariantsProcessor::BILDANTEILE passen,
     sonst stimmt sizes nicht mehr mit der angezeigten Breite ueberein. */
  .frame-layout-6761,
  .frame-layout-6762,
  .frame-layout-6763 { --qn-medien-imtext: 25%; }
  .frame-layout-6764 { --qn-medien-imtext: 33.333%; }
  .frame-layout-6765 { --qn-medien-imtext: 40%; }
  .frame-layout-6766 { --qn-medien-imtext: 50%; }
  .frame-layout-6767 { --qn-medien-imtext: 60%; }
  .frame-layout-6768 { --qn-medien-imtext: 66.667%; }
  .frame-layout-6769 { --qn-medien-imtext: 75%; }
  .frame-layout-6770,
  .frame-layout-6771 { --qn-medien-imtext: 80%; }

  .ce-center > .ce-gallery { justify-content: center; }

  /* ----- Textkoerper ---------------------------------------------------- */
  /* Die Lesebreite sitzt in 30-elements.css auf .qn-text. Hier geht es nur
     um die Abstaende der Bloecke untereinander. */
  .ce-bodytext > :first-child { margin-block-start: 0; }
  .ce-bodytext > :last-child  { margin-block-end: 0; }

  /* ----- Tabellen ------------------------------------------------------- */
  /* Eine Tabelle, die breiter ist als die Seite, darf die Seite nicht
     breiter machen - sie bekommt ihren eigenen Schiebebereich. tabindex
     setzt der Redakteur nicht; damit der Bereich auch per Tastatur
     erreichbar ist, muss das Template es tun (offen, siehe Uebergabe). */
  .frame-type-table .table-responsive,
  .qn-tabelle-rollbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ce-table caption,
  table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    margin-block-end: var(--qn-raum-xs);
  }

  th, td {
    padding: var(--qn-raum-xs) var(--qn-raum-sm);
    text-align: left;
    vertical-align: top;
    border-block-end: 1px solid var(--qn-linie, currentColor);
  }
  thead th { font-weight: 600; }

  /* ----- Aufzaehlungen im Inhaltselement -------------------------------- */
  .ce-bullets ul { padding-inline-start: 1.25em; }

  /* ----- Dateiliste ----------------------------------------------------- */
  .ce-uploads { list-style: none; padding: 0; margin: 0; }
  .ce-uploads li {
    display: flex;
    gap: var(--qn-raum-xs);
    align-items: baseline;
    padding-block: var(--qn-raum-2xs);
  }
  .ce-uploads .ce-uploads-fileName { font-weight: 600; }
}