/* ---------------------------------------------------------------------------
   Artikel- und Vergleichsseiten (Lightroom-Alternative, Photo Mechanic, ...).
   Einspaltig und auf Lesebreite, anders als .manual aus manual-web.css - das
   ist ein Zweispalten-Raster mit Inhaltsverzeichnis und passt hier nicht.
   Tabellen und Screenshots duerfen aus der Textspalte herausragen, weil eine
   Vergleichstabelle auf 720 px unlesbar wird.
   --------------------------------------------------------------------------- */

.article {
    --a-text:  720px;   /* Lesebreite */
    --a-wide:  980px;   /* Tabellen und Bilder */

    max-width: var(--a-wide);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-3xl);
}

/* Kein fester Navigationsrahmen auf Artikelseiten. Eine dauerhafte
   Verkaufsleiste ueber einem Langtext signalisiert "Verkaufsseite", bevor das
   erste Argument gewirkt hat - der Leser steigt aus, bevor er anfaengt.
   Stattdessen eine leise Absenderzeile, die mitscrollt und Platz macht.
   Der Weg zum Produkt steht als Satz im Schlussabsatz, nicht als Knopfleiste -
   ein CTA-Block riss aus demselben Grund aus dem Lesefluss.
   Das Impressum bleibt ueber den Footer erreichbar (Pflicht nach §5 DDG). */
.article-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg-nav, rgba(10, 10, 20, 0.7));
}
.article-header__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    height: 52px;
    display: flex;
    align-items: center;
}
.article__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}
.article__brand img { width: 20px; height: 20px; opacity: 0.85; }
.article__brand:hover { color: var(--text-primary); }

/* Alles auf Lesebreite zentrieren, Ausnahmen weiter unten. */
.article > p,
.article > ul,
.article > ol,
.article > h2,
.article > h3,
.article__header {
    max-width: var(--a-text);
    margin-left: auto;
    margin-right: auto;
}

/* Artikelkopf. Ohne ihn stand die H1 direkt unter dem Header-Band und die
   Seite fing uebergangslos an. Kicker und Lesezeit klammern den Titel und
   geben dem Einstieg Aufbau - billiger und haltbarer als eine Kopfgrafik,
   die pro Artikel produziert werden muesste. */
.article__kicker {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.article__header { padding-top: var(--space-2xl); }

/* Inhaltsverzeichnis: bei zehn Abschnitten sonst Blindflug. Wird aus den
   Ueberschriften erzeugt, nicht von Hand gepflegt. */
.article__toc {
    max-width: var(--a-text);
    margin: var(--space-xl) auto var(--space-2xl);
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.article__toc ol {
    margin: 0;
    padding-left: 1.2rem;
    columns: 2;
    column-gap: var(--space-xl);
}
.article__toc li {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    break-inside: avoid;
}
.article__toc a { color: var(--text-secondary); text-decoration: none; }
.article__toc a:hover { color: var(--accent); }

.article h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: var(--space-md);
    text-wrap: balance;
}

.article__lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.article h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    margin: var(--space-2xl) auto var(--space-md);
    text-wrap: balance;
}

.article p,
.article li {
    color: var(--text-secondary);
    line-height: 1.75;
}

.article > p { margin-bottom: var(--space-md); }

.article ul {
    padding-left: 1.15rem;
    margin-bottom: var(--space-md);
}
.article li { margin-bottom: 0.5rem; }
.article strong { color: var(--text-primary); }
/* :not(.btn) ist noetig - sonst faerbt die Regel auch die Schrift auf dem
   Download-Knopf blau, und der steht auf blauem Grund. */
.article a:not(.btn) { color: var(--accent); }

/* Umbruchsicherheit. body traegt overflow-x:hidden - was zu breit ist, wird
   also ABGESCHNITTEN statt scrollbar. Ein einzelner langer Pfad wie
   %LOCALAPPDATA%\FastStone\FSIV\FSIV.db reicht, um die Seite aufzuschieben. */
.article h1, .article h2, .article h3,
.article p, .article li, .article td, .article th { overflow-wrap: break-word; }
.article code { overflow-wrap: anywhere; }

/* ---- Weitere Vergleiche, am Seitenende ----
   Absichtlich unten und absichtlich leise: oben waeren Links zu anderen
   Vergleichen eine Ausfahrt, bevor der Text gewirkt hat. */
.article__more {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
    border-top: 1px solid var(--border);
}
.article__more h2 {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-md);
}
.article__more ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.article__more li { margin-bottom: 0.55rem; }
.article__more a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.98rem;
}
.article__more a:hover { color: var(--accent); }

/* ---- Screenshots ---- */
.article__shot {
    max-width: var(--a-wide);
    margin: var(--space-xl) auto;
}
.article__shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #000;
}
.article__shot figcaption {
    margin-top: var(--space-sm);
    font-size: 0.86rem;
    color: var(--text-muted);
    text-align: center;
}

/* ---- Tabellen ---- */
.table-wrap {
    max-width: var(--a-wide);
    margin: var(--space-lg) auto var(--space-xl);
    overflow-x: auto;   /* auf schmalen Schirmen scrollbar statt gequetscht */
}
.article table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}
.article thead th {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.article tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.7rem 0.8rem;
    vertical-align: top;
}
.article td {
    color: var(--text-secondary);
    padding: 0.7rem 0.8rem;
    vertical-align: top;
    line-height: 1.5;
}
.article tbody tr + tr th,
.article tbody tr + tr td { border-top: 1px solid var(--border); }

/* Wertung: das Zeichen traegt die Aussage, nicht die Zeilenfarbe. Das Kreuz
   war zu blass, um beim Ueberfliegen aufzufallen - jetzt kraeftiger und eine
   Spur groesser als das Haekchen, weil ein "kann es nicht" die Information
   ist, nach der beim Vergleichen zuerst gesucht wird. */
.article td.yes::before,
.article td.no::before {
    font-weight: 700;
    margin-right: 0.45em;
}
.article td.yes::before { content: "\2713"; color: #4ec98a; }
.article td.no::before  { content: "\2715"; color: #e2555f; font-size: 1.05em; }
.article td.yes { color: var(--text-primary); }

/* Vergleichstabelle: textlastig, deshalb mehr Kontrast und klarere Spuren.
   Die FlashView-Spalte bekommt einen leisen Grund, damit das Auge beim
   Ueberfliegen eine Spalte hat, an der es entlanglaufen kann. */
.article .cmp td { color: var(--text-secondary); }

/* Die Kandidaten sind die Ueberschriften, die zaehlen - vorher gingen sie in
   der einheitlichen Versalien-Zeile unter. Deshalb gross, gemischt gesetzt und
   hell; die eigene Spalte zusaetzlich im Akzent.
   ACHTUNG: Das haengt an den Klassen .own/.why, NICHT an der Spaltenposition.
   Mit nth-of-type war die ACDSee-Tabelle falsch ausgezeichnet - sie hat eine
   Spalte mehr, und damit bekam "Aktuelles ACDSee" die Hervorhebung und
   FlashView die gedaempfte Begruendungs-Optik. */
.article .cmp thead th:not(:first-child):not(.why) {
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 0.8rem;
}
/* :not(:first-child) ist hier KEIN Zierrat, sondern noetig: die Regel darueber
   traegt durch ihre zwei :not()-Bedingungen die Spezifitaet (0,4,2) und wuerde
   die Akzentfarbe sonst ueberschreiben. Mit dem Zusatz sind beide gleich stark,
   und die spaetere gewinnt. Nicht "vereinfachen". */
.article .cmp thead th.own:not(:first-child) { color: var(--accent); }
.article .cmp thead th { border-bottom-width: 2px; }

/* Senkrechte Striche: ohne sie laufen vier Textspalten ineinander. */
.article .cmp thead th + th,
.article .cmp tbody td { border-left: 1px solid var(--border); }
.article .cmp tbody th {
    font-size: 0.95rem;
    line-height: 1.4;
    width: 22%;
}
.article .cmp td.own {
    background: rgba(255, 255, 255, 0.028);
    color: var(--text-primary);
}
.article .cmp td.why,
.article .cmp thead th.why {
    color: var(--text-muted);
    font-size: 0.88rem;
    width: 26%;
}
.article .cmp tbody tr:hover th,
.article .cmp tbody tr:hover td { background: rgba(255, 255, 255, 0.045); }

.article tr.is-highlight th,
.article tr.is-highlight td {
    background: var(--accent-subtle, rgba(74, 143, 231, 0.08));
    color: var(--text-primary);
}

/* In der hervorgehobenen Zeile treffen Zeilen- und Spaltenmarkierung
   aufeinander. Die eigene Spalte muss dort die staerkere bleiben, sonst reisst
   die senkrechte Spur ausgerechnet in der Preiszeile ab. */
.article .cmp tr.is-highlight td.own {
    background: rgba(74, 143, 231, 0.16);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .article { padding-left: var(--space-md); padding-right: var(--space-md); }
    .article__more { padding-left: var(--space-md); padding-right: var(--space-md); }
    .article-header__inner { padding: 0 var(--space-md); }
    .article__toc { padding: var(--space-md); }
    .article__toc ol { columns: 1; }

    /* white-space:nowrap zwang die Kopfzeile in eine Zeile und damit die
       ganze Tabelle auf ein Vielfaches der Bildschirmbreite. Auf dem Handy
       darf sie umbrechen. */
    .article thead th { white-space: normal; }

    /* Die Prozentbreiten sind fuer den Desktop gedacht; auf schmalen
       Schirmen quetschen sie die Textspalten. */
    .article .cmp tbody th,
    .article .cmp td.why { width: auto; }

    .article thead th,
    .article tbody th,
    .article td { padding: 0.55rem 0.6rem; }

    /* Falls eine Tabelle trotzdem breiter bleibt: waagerecht scrollen
       statt die Seite aufschieben. */
    .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ---- Vergleichstabellen auf schmalen Schirmen: gestapelt ----
   Vier Spalten passen bei 400 px nicht, auch umbrechend nicht - jede Spalte
   waere 100 px breit, und schon die Mindestbreite eines Wortes wie
   "Stichwort-Hierarchien" liegt darueber. Waagerecht scrollen waere die
   billige Loesung, aber niemand scrollt eine Tabelle, deren Kopfzeile dabei
   verschwindet.
   Deshalb hier: jede Zeile wird eine Karte, das Kriterium ihre Ueberschrift,
   und jede Zelle traegt ihren Spaltentitel aus data-label vor sich her. */
@media (max-width: 640px) {
    .article .cmp,
    .article .cmp tbody,
    .article .cmp tr,
    .article .cmp td { display: block; width: auto; }

    .article .cmp thead { display: none; }

    .article .cmp tbody tr {
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);
        padding: 0.2rem 0.9rem 0.6rem;
        background: rgba(255, 255, 255, 0.018);
    }
    .article .cmp tbody tr + tr { border-top: 1px solid var(--border); }

    .article .cmp tbody th {
        display: block;
        width: auto;
        padding: 0.7rem 0 0.5rem;
        border: 0;
        border-bottom: 1px solid var(--border);
        font-size: 1rem;
    }

    .article .cmp td {
        border: 0;
        padding: 0.55rem 0 0.15rem;
        background: none;
    }
    /* Der Spaltentitel steht jetzt ueber der Zelle statt in einer Kopfzeile. */
    .article .cmp td::after {
        content: attr(data-label);
        display: block;
        order: -1;
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.15rem;
    }
    .article .cmp td { display: flex; flex-direction: column; }

    /* Die eigene Spalte bleibt erkennbar, ohne Spaltengrund. */
    .article .cmp td.own,
    .article .cmp tr.is-highlight td.own {
        background: none;
        color: var(--text-primary);
        font-weight: 600;
    }
    .article .cmp td.own::after { color: var(--accent); }
    .article .cmp tr.is-highlight th,
    .article .cmp tr.is-highlight td { background: none; }

    .article .cmp td.why { font-size: 0.85rem; }
}