/*
Theme Name:   PDF.de
Theme URI:    https://www.pdf.de
Description:  Kind-Theme von Twenty Twenty-Five mit dem Design von pdf.de. Die
              Gestaltung liegt in theme.json, damit sie sowohl im Editor als
              auch im Frontend gilt; hier steht nur, was theme.json nicht kann.
Author:       Gull AG
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  pdfde
*/

/* Die Schrift wird selbst gehostet — keine Anfrage an fremde Server, und
   damit auch kein Datenschutzproblem durch Google Fonts. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('assets/fonts/archivo-latin-wght.woff2') format('woff2-variations');
  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;
}

/* ------------------------------------------------------------------------
   Die Kopfzeile

   Weiss statt des roten Balkens: Das Logo traegt das Rot, und zweimal
   dieselbe Farbe uebereinander macht das Logo unsichtbar. Eine feine
   Linie unten trennt den Kopf vom Inhalt — ohne sie schwebt er.
   ------------------------------------------------------------------------ */
/*
   Die Kopfzeile bleibt oben stehen, der Inhalt rollt darunter durch.
   So ist „Alle Tools" von jeder Stelle einer langen Werkzeugseite aus
   erreichbar, ohne erst nach oben zu rollen.

   --kopf-hoehe ist die gemessene Hoehe (73 Pixel am Schreibtisch, eine
   Zeile auf dem Handy). Das Plugin richtet danach aus, was selbst oben
   kleben will (die Werkzeugleiste des Editors), und Sprungziele wie
   /#tools landen dank scroll-padding unter der Kopfzeile statt dahinter.
*/
:root {
  --kopf-hoehe: 73px;
}

html {
  scroll-padding-top: calc(var(--kopf-hoehe) + 0.5rem);
}

/*
   Seitengrund: ueberall flaechig #f6f9fa (Farbe „grund" in theme.json),
   Kopf und Fuss weiss. Der Farbverlauf assets/hg.webp auf der Startseite
   wurde am 18. 9. 2026 wieder abgeschafft; die Datei bleibt liegen.
*/

/* Startseite: Der Satz unter der Ueberschrift gehoert zur Ueberschrift,
   nicht zum Chat darunter - also naeher an sie heran und weiter weg vom
   Lotsen (17. 9. 2026). */
.home .entry-content { margin-block-start: 0; }
.home .entry-content > .wp-block-paragraph:first-child { margin-block-end: 1.1rem; }
.home .entry-content > .wp-block-paragraph:first-child + .wzliste { margin-block-start: 1.1rem; }

.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  /* Seitengrund und Kopf sind beide weiss (18. 9. 2026); die Kante
     unten ist eine feine Linie mit leichtem Schatten darunter. */
  box-shadow: 0 1px 0 var(--wp--preset--color--rule), 0 2px 8px rgb(0 0 0 / 5%);
  color: var(--wp--preset--color--ink);
}

.kopf__marke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/*
   Das Logo als Hintergrundbild und nicht als <img>: Der Pfad ist dann
   relativ zu dieser Datei und ueberlebt jede Verschiebung des Themes —
   im Blockmuster koennte keine PHP-Funktion die Adresse bilden.

   Die Vorlage ist 194 x 111; bei 48 Pixeln Hoehe bleiben gut zwei
   Bildpunkte je Bildschirmpunkt, das reicht auch fuer feine Schirme.
   Viel groesser traegt die Vorlage nicht — dafuer braeuchte es eine
   Vektorfassung.
*/
.kopf__logo {
  display: block;
  width: 84px;
  height: 48px;
  background: url('assets/pdf-logo.png') left center / contain no-repeat;
}

/* pdf.com.br und pdf.com.ai: dasselbe Zeichen, nur die Endung ist anders
   (8. 10. 2026). Breite im Verhaeltnis der Vorlage: 288 bzw. 281 x 111. */
.kopf__logo--com-br { width: 125px; background-image: url('assets/pdf-logo-com-br.png'); }
.kopf__logo--com-ai { width: 122px; background-image: url('assets/pdf-logo-com-ai.png'); }

.kopf__nurvorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kopf__beta {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--wp--preset--color--rule-strong);
  border-radius: 999px;
  color: var(--wp--preset--color--ink-3);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* Die drei Wege als gleiche Knoepfe. „Alle Tools" war rot gefuellt -
   auf den Unterseiten sah das aus, als waere man gerade dort. Der Weg
   ist ein Weg wie die anderen; die Farbe bleibt dem Logo. */
.kopf__wege {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kopf__weg {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--wp--preset--color--rule-strong);
  border-radius: 999px;
  color: var(--wp--preset--color--ink);
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.kopf__weg:hover {
  border-color: var(--wp--preset--color--signal);
  color: var(--wp--preset--color--signal);
  text-decoration: none;
}


/* Der Weg, auf dem der Besucher gerade ist: „Alle Tools" auf der
   Startseite, „Ratgeber" im Ratgeber. functions.php setzt aria-current. */
.kopf__weg[aria-current='page'],
.kopf__weg[aria-current='page']:hover {
  background: var(--wp--preset--color--signal);
  border-color: var(--wp--preset--color--signal);
  color: #fff;
}


/*
   Auf dem Handy in einer Zeile: Eine Kopfzeile, die oben stehen bleibt,
   darf dort nicht zwei Zeilen hoch sein - das waere ein Siebtel des
   Bildschirms. Dafuer weicht das „beta"-Schild, und Logo wie Knoepfe
   werden etwas kleiner. Gemessen passt Logo plus drei Knoepfe so bei
   360 Pixeln Breite nebeneinander (seit dem 23. 9. 2026 sind es hoechstens
   drei: Alle PDF-Tools, Ratgeber und, sobald Guthaben da ist, KI-Credits).
*/
@media (max-width: 30rem) {
  :root { --kopf-hoehe: 55px; }
  .kopf__beta { display: none; }
  .kopf__logo { width: 60px; height: 38px; }
  .kopf__logo--com-br { width: 89px; }
  .kopf__logo--com-ai { width: 87px; }
  .kopf__wege { gap: 0.25rem; }
  .kopf__weg { padding: 0.3rem 0.45rem; font-size: 0.74rem; }
  /* Das aeussere header ist der Vorlagenteil, das innere die Gruppe
     mit dem Abstand aus dem Blockmuster (inline, daher !important). */
  .wp-site-blocks > header > header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  /* Der Blockabstand zwischen Marke und Wegen ist mit 1,5rem der
     Grund, warum die Zeile umbrach. */
  .wp-site-blocks > header .wp-block-group.is-layout-flex { gap: 0.5rem; }
}

/* Der Fuss ist schwarz (Betreiber, 18. 9. 2026); die Textfarben aus dem
   Block (ink-2, ink-3) werden hier auf helle Toene umgebogen, damit die
   Zeilen und die Rechtslinks lesbar bleiben. */
.wp-site-blocks > footer {
  background: #111318;
  border-top: 1px solid #111318;
  color: #d5d9e0;
}
.wp-site-blocks > footer .has-ink-2-color,
.wp-site-blocks > footer .has-ink-3-color { color: #b3b9c4 !important; }
.wp-site-blocks > footer strong { color: #ffffff; }
.wp-site-blocks > footer a { color: #ffffff; }
.wp-site-blocks > footer a:hover { color: var(--wp--preset--color--signal); }

/* ------------------------------------------------------------------------
   Fokusrahmen nur fuer die Tastatur

   Twenty Twenty-Five setzt den Rahmen auf :focus statt auf :focus-visible.
   Dadurch erscheint er auch beim Mausklick — jeder angeklickte Link bekommt
   einen Kasten, den niemand haben wollte.

   Entfernt wird er deshalb genau dann, wenn der Browser selbst sagt, dass
   kein Hinweis noetig ist: bei :focus ohne :focus-visible, also bei Maus und
   Fingertipp. Wer mit der Tabulatortaste navigiert, sieht ihn weiterhin —
   ohne ihn waere die Seite mit der Tastatur unbedienbar, und das waere die
   deutlich schlimmere Aenderung.
   ------------------------------------------------------------------------ */

.wp-site-blocks *:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--signal);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Farbe je Werkzeuggruppe.
   Bewusst hier statt in theme.json: WordPress erzeugt aus jedem
   Paletteneintrag zusaetzliche Hilfsklassen auf jeder Seite. Diese Farben
   waehlt aber niemand im Editor — sie werden nur vom Plugin-CSS benutzt. */
:root {
  --pdfde-tool-organize: #e63946;
  --pdfde-tool-convert: #2b6cb0;
  --pdfde-tool-edit: #c2751a;
  --pdfde-tool-secure: #17855c;
  --pdfde-tool-optimize: #7048b6;
}

/* ------------------------------------------------------------------------
   Hervorhebung im Fliesstext

   Das Eltern-Theme setzt b und strong auf font-weight: bolder. Das ist
   relativ gemeint: Bei einem Fliesstext mit Gewicht 300 ergibt bolder nur
   400 — sichtbar ist der Unterschied damit praktisch nicht, und eine
   Hervorhebung, die man nicht sieht, ist keine.
   ------------------------------------------------------------------------ */

b,
strong {
  font-weight: 600;
}

/* ------------------------------------------------------------------------
   Ratgeber
   Steht hier und nicht im Plugin: Das Plugin-Stylesheet wird nur geladen,
   wo ein Werkzeugblock auf der Seite steht. Artikel haben keinen.
   ------------------------------------------------------------------------ */
.ratgeberliste__eintrag {
  padding-block: var(--wp--preset--spacing--50);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

.ratgeberliste__eintrag:last-child { border-bottom: 0; }

.ratgeberliste__eintrag h2 a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.ratgeberliste__eintrag h2 a:hover { color: var(--wp--preset--color--signal); }

/* Lesetext etwas schmaler als das Raster: Zeilen über hundert Zeichen
   ermüden, und dafür ist ein Ratgeber der falsche Ort. */
.artikel {
  max-width: 44rem;
}

.artikel h2 {
  margin-top: var(--wp--preset--spacing--70);
}

.artikel ul {
  padding-left: 1.2rem;
  display: grid;
  gap: var(--wp--preset--spacing--20);
}

.artikel__kasten {
  margin-block: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--surface);
  border-left: 3px solid var(--wp--preset--color--signal);
  border-radius: 0 14px 14px 0;
}

.artikel__kasten p { margin: 0; }