/*
Theme Name: PicoBoy
Theme URI: https://picoboy.de
Author: Jan Schulz
Description: Theme für picoboy.de, abgeleitet vom Theme von pbcplus.de.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: picoboy
License: GPL-2.0-or-later
*/

:root {
	--pbc-radius: 14px;
	--pbc-schatten: 0 1px 2px rgba(25, 42, 61, .06), 0 6px 20px rgba(25, 42, 61, .07);
	--pbc-schatten-hoch: 0 2px 4px rgba(25, 42, 61, .08), 0 14px 34px rgba(25, 42, 61, .14);
	--pbc-kopfhoehe: 76px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--pbc-kopfhoehe) + 16px); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
code, kbd, pre { font-family: var(--wp--preset--font-family--code); font-variant-ligatures: none; }
:not(pre) > code { background: var(--wp--preset--color--flaeche); border: 1px solid var(--wp--preset--color--linie); padding: .05em .35em; border-radius: 5px; font-size: .9em; }
::selection { background: var(--wp--preset--color--blau); color: #fff; }
:focus-visible { outline: 3px solid var(--wp--preset--color--led-gelb); outline-offset: 3px; }
img { height: auto; }

/* Fußzeile immer unten */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .pbc-haupt { flex: 1 0 auto; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
.pbc-haupt { margin: 0 !important; }

/* ================= Kopfzeile ================= */
.pbc-kopf {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.pbc-kopf:has(.is-menu-open) { backdrop-filter: none; }   /* sonst bleibt das Handy-Menü in der Kopfzeile gefangen */
.admin-bar .pbc-kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .pbc-kopf { top: 46px; } }
.pbc-kopf__innen { min-height: var(--pbc-kopfhoehe); gap: 1.5rem; }

.pbc-logo { display: inline-flex; flex-direction: column; gap: .3rem; text-decoration: none !important; line-height: 1; }
.pbc-logo__bild { height: 26px; width: auto; display: block; }
.pbc-logo__pbc { fill: var(--wp--preset--color--nacht); }
.pbc-logo__plus { fill: var(--wp--preset--color--blau); }
.pbc-logo:hover .pbc-logo__plus { fill: var(--wp--preset--color--led-rot); }
.pbc-logo__claim { font-family: var(--wp--preset--font-family--titel); font-weight: 600; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--grau); }
.pbc-logo--hell .pbc-logo__pbc { fill: #fff; }
.pbc-logo--hell .pbc-logo__plus { fill: #6fb3f2; }
.pbc-logo--hell .pbc-logo__claim { color: #8fa3b8; }

.pbc-nav .wp-block-navigation__container { gap: 1.4rem; }
.pbc-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--nacht); padding: .4rem 0; }
.pbc-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--blau); }
.pbc-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--linie) !important; border-radius: 12px; padding: .45rem !important;
	box-shadow: var(--pbc-schatten-hoch); min-width: 220px !important; background: #fff !important;
}
.pbc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .5rem .8rem !important; border-radius: 8px; text-transform: none; letter-spacing: 0;
	font-family: var(--wp--preset--font-family--text); font-weight: 500; font-size: .98rem;
}
.pbc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--blau-hell); }
.pbc-nav .pbc-nav-kaufen > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--blau); color: #fff; padding: .45rem 1.05rem; border-radius: 8px;
}
.pbc-nav .pbc-nav-kaufen > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--blau-dunkel); color: #fff; }
.pbc-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.pbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; border: 0 !important; padding: 0 0 0 1rem !important; }
@media (max-width: 1100px) { .pbc-nav .wp-block-navigation__container { gap: 1rem; } }
.pbc-logo__claim { white-space: nowrap; }
@media (min-width: 600px) { .pbc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { white-space: nowrap; } }
@media (min-width: 600px) and (max-width: 860px) { .pbc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } .pbc-nav .wp-block-navigation__responsive-container-open { display: flex !important; } }
@media (max-width: 900px) { .pbc-nav .wp-block-navigation__container { gap: .55rem; flex-wrap: nowrap; font-size: .8rem; } .pbc-nav .pbc-nav-kaufen > .wp-block-navigation-item__content { padding: .4rem .7rem; } }

/* ================= Bausteine ================= */
.pbc-marke {
	font-family: var(--wp--preset--font-family--titel); font-weight: 600; font-size: .85rem !important;
	text-transform: uppercase; letter-spacing: .14em; color: var(--wp--preset--color--blau); margin-bottom: .4rem !important;
}
.pbc-dunkel .pbc-marke { color: #7db7ec; }
.pbc-einleitung { font-size: var(--wp--preset--font-size--mittel); color: var(--wp--preset--color--grau); max-width: 46rem; }
.pbc-dunkel .pbc-einleitung { color: #c4d2e1; }
.has-text-align-center.pbc-einleitung { margin-inline: auto; }

.pbc-abschnitt { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.pbc-abschnitt--eng { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.pbc-hell { background: var(--wp--preset--color--flaeche); }
.pbc-dunkel { background: var(--wp--preset--color--nacht); color: #e6edf5; }
.pbc-dunkel h1, .pbc-dunkel h2, .pbc-dunkel h3 { color: #fff; }
.pbc-dunkel a:not(.wp-block-button__link) { color: #9ccbf5; }
.pbc-abschnittskopf { margin-bottom: var(--wp--preset--spacing--50) !important; }
.pbc-abschnittskopf h2 { margin-top: 0; }

/* Knöpfe */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--blau); padding: calc(.7em - 2px) calc(1.4em - 2px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--blau); color: #fff; border-color: var(--wp--preset--color--blau); }
.pbc-dunkel .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; }
.pbc-dunkel .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--nacht); border-color: #fff; }
.wp-block-button__link::after { content: ""; }
.pbc-pfeil .wp-block-button__link::after { content: " →"; }

/* ================= Startseite: Bühne ================= */
.pbc-held {
	position: relative; overflow: hidden; color: #e6edf5;
	background:
		radial-gradient(900px 500px at 78% 40%, rgba(30, 115, 190, .45), transparent 65%),
		radial-gradient(600px 400px at 10% 110%, rgba(34, 164, 93, .18), transparent 70%),
		var(--wp--preset--color--nacht);
	padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60);
}
.pbc-held::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 32px 32px; mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.pbc-held > * { position: relative; }
.pbc-held h1 { color: #fff; font-size: var(--wp--preset--font-size--plakat); line-height: .98; letter-spacing: -.015em; margin-top: .2rem; }
.pbc-held h1 .pbc-plus { color: #6fb3f2; }
.pbc-held .pbc-einleitung { color: #c4d2e1; }
.pbc-held .pbc-marke { color: #7db7ec; }
.pbc-held .wp-block-image img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.pbc-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: var(--wp--preset--spacing--40) 0 0; list-style: none; }
.pbc-chips li {
	font-family: var(--wp--preset--font-family--titel); font-weight: 600; font-size: .95rem;
	padding: .3rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; margin: 0;
}
.pbc-leds-deko { display: inline-flex; gap: 6px; vertical-align: middle; margin-right: .5rem; }
.pbc-leds-deko i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.pbc-leds-deko i:nth-child(1) { background: var(--wp--preset--color--led-rot); box-shadow: 0 0 10px var(--wp--preset--color--led-rot); }
.pbc-leds-deko i:nth-child(2) { background: var(--wp--preset--color--led-gelb); box-shadow: 0 0 10px var(--wp--preset--color--led-gelb); }
.pbc-leds-deko i:nth-child(3) { background: var(--wp--preset--color--led-gruen); box-shadow: 0 0 10px var(--wp--preset--color--led-gruen); }

/* ================= Kacheln ================= */
.pbc-raster { display: grid !important; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pbc-raster--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pbc-raster--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pbc-raster--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pbc-raster > * { margin: 0 !important; }

.pbc-kachel {
	position: relative; display: flex; flex-direction: column; gap: .45rem;
	background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--pbc-radius);
	box-shadow: var(--pbc-schatten); padding: 1.35rem 1.4rem 1.4rem; overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pbc-kachel > * { margin: 0 !important; }
.pbc-kachel h3 { font-size: 1.35rem; line-height: 1.15; }
.pbc-kachel h3 a { color: var(--wp--preset--color--nacht); text-decoration: none; }
.pbc-kachel p { color: var(--wp--preset--color--grau); font-size: .98rem; }
.pbc-kachel { min-width: 0; hyphens: auto; }
.pbc-kachel p.pbc-symbol { color: #fff; font-size: 1.4rem; }
.pbc-kachel p.pbc-symbol--gelb { color: var(--wp--preset--color--nacht); }
.pbc-kachel .pbc-kachel__mehr { margin-top: auto !important; padding-top: .5rem; color: var(--wp--preset--color--blau); font-weight: 700; font-size: .95rem; }
.pbc-kachel .pbc-kachel__datei { margin-top: auto !important; padding-top: .55rem; font-family: var(--wp--preset--font-family--code); font-size: .78rem; color: var(--wp--preset--color--grau); }
/* ganze Kachel klickbar, wenn die Überschrift verlinkt ist */
.pbc-kachel h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.pbc-kachel p a, .pbc-kachel li a { position: relative; z-index: 2; }
.pbc-kachel:has(h3 a):hover { transform: translateY(-3px); box-shadow: var(--pbc-schatten-hoch); border-color: #b9d3ec; }
.pbc-kachel:has(h3 a):hover h3 a { color: var(--wp--preset--color--blau); }
.pbc-kachel:has(h3 a:focus-visible) { outline: 3px solid var(--wp--preset--color--led-gelb); outline-offset: 3px; }
.pbc-kachel h3 a:focus-visible { outline: none; }

/* Kachel mit Bild oben (Bild randlos) */
.pbc-kachel .pbc-kachel__bild { margin: -1.35rem -1.4rem .6rem !important; background: var(--wp--preset--color--flaeche); border-bottom: 1px solid var(--wp--preset--color--linie); }
.pbc-kachel .pbc-kachel__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.pbc-kachel .pbc-kachel__bild--schirm { background: #0d141c; }
.pbc-kachel .pbc-kachel__bild--schirm img { object-fit: contain; image-rendering: pixelated; padding: .8rem 0; }
.pbc-kachel .pbc-kachel__bild--konsole { background: linear-gradient(180deg, #fff, var(--wp--preset--color--flaeche)); }
.pbc-kachel .pbc-kachel__bild--konsole img { object-fit: contain; padding: 1rem 1.5rem; }

/* farbiges Symbol */
.pbc-symbol {
	display: grid !important; place-items: center; width: 48px; height: 48px; padding: 0 !important; border-radius: 12px;
	font-family: var(--wp--preset--font-family--titel); font-weight: 800; font-style: italic; font-size: 1.4rem; color: #fff;
}
.pbc-symbol--rot { background: var(--wp--preset--color--led-rot); }
.pbc-symbol--gelb { background: var(--wp--preset--color--led-gelb); color: var(--wp--preset--color--nacht); }
.pbc-symbol--gruen { background: var(--wp--preset--color--led-gruen); }
.pbc-symbol--blau { background: var(--wp--preset--color--blau); }

/* Etiketten */
.pbc-etikett {
	display: inline-block; align-self: flex-start; width: auto;
	font-family: var(--wp--preset--font-family--titel); font-weight: 600; font-size: .78rem !important; letter-spacing: .06em; text-transform: uppercase;
	padding: .18rem .55rem; border-radius: 6px; background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--grau) !important;
}
.pbc-etikett--blau { background: var(--wp--preset--color--blau-hell); color: var(--wp--preset--color--blau-dunkel) !important; }
.pbc-etikett--gelb { background: #fff3cc; color: #8a6400 !important; }
.pbc-etikett--gruen { background: #dff4e8; color: #17703f !important; }
.pbc-etikett--ki { background: #fff3cc; color: #8a6400 !important; border: 1px solid #f5d77a; }

/* ================= Seitenkopf (Unterseiten) ================= */
.pbc-seitenkopf {
	background:
		radial-gradient(700px 300px at 85% 0%, rgba(30, 115, 190, .14), transparent 70%),
		var(--wp--preset--color--flaeche);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50);
}
.pbc-seitenkopf h1 { margin: 0; }
.pbc-seitenkopf__text { font-size: var(--wp--preset--font-size--mittel); color: var(--wp--preset--color--grau); max-width: 46rem; margin-top: .8rem !important; }
.pbc-seitenkopf__text p { margin: 0; }
.pbc-inhalt { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--60); }
.pbc-inhalt > h2 { margin-top: var(--wp--preset--spacing--50); }
.pbc-datum { font-family: var(--wp--preset--font-family--titel); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--blau); }
.pbc-beitragstitel { font-size: var(--wp--preset--font-size--riesig) !important; }
.pbc-zurueck { padding-bottom: var(--wp--preset--spacing--60); }

/* ================= Tabellen ================= */
.pbc-tabelle table { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--pbc-radius); overflow: hidden; }
.pbc-tabelle th, .pbc-tabelle td { border: 0; border-bottom: 1px solid var(--wp--preset--color--linie); padding: .7rem .9rem; text-align: left; vertical-align: top; }
.pbc-tabelle tr:last-child td { border-bottom: 0; }
.pbc-tabelle thead th { background: var(--wp--preset--color--flaeche); font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-style: italic; font-size: 1.05rem; color: var(--wp--preset--color--nacht); }
.pbc-tabelle td:first-child { font-weight: 700; color: var(--wp--preset--color--nacht); }
.pbc-tabelle td code { white-space: nowrap; }
.pbc-tabelle--vergleich th:last-child, .pbc-tabelle--vergleich td:last-child { background: var(--wp--preset--color--blau-hell); }
.pbc-tabelle--vergleich thead th:last-child { background: var(--wp--preset--color--blau); color: #fff; }
.pbc-tabelle { overflow-x: auto; }
.pbc-tabelle table { word-break: normal; overflow-wrap: normal; hyphens: auto; }   /* WP erbt aus der Spalte word-break: break-word */
.pbc-tabelle--vergleich table { min-width: 520px; font-size: .95rem; }
.pbc-tabelle--vergleich td:first-child { white-space: nowrap; }
.pbc-tabelle--vergleich th, .pbc-tabelle--vergleich td { padding: .6rem .75rem; }
.pbc-tabelle figcaption { font-size: .85rem; color: var(--wp--preset--color--grau); }

/* ================= Listen ================= */
.pbc-haken { list-style: none; padding-left: 0; }
.pbc-haken li { position: relative; padding-left: 1.75rem; margin: .4rem 0; }
.pbc-haken li::before {
	content: ""; position: absolute; left: 0; top: .42em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: var(--wp--preset--color--blau-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231e73be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.pbc-schritte { counter-reset: schritt; list-style: none; padding-left: 0; }
.pbc-schritte li { counter-increment: schritt; position: relative; padding: .2rem 0 1.1rem 3.3rem; }
.pbc-schritte li::before {
	content: counter(schritt); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%;
	display: grid; place-items: center; background: var(--wp--preset--color--blau); color: #fff;
	font-family: var(--wp--preset--font-family--titel); font-weight: 800; font-style: italic; font-size: 1.15rem;
}
.pbc-linkliste { list-style: none; padding: 0; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--pbc-radius); background: #fff; overflow: hidden; }
.pbc-linkliste li { padding: .85rem 1.1rem; border-bottom: 1px solid var(--wp--preset--color--linie); margin: 0; }
.pbc-linkliste li:last-child { border-bottom: 0; }
.pbc-linkliste a { font-weight: 700; text-decoration: none; }
.pbc-linkliste a:hover { text-decoration: underline; }

/* ================= Hinweis ================= */
.pbc-hinweis { border: 1px solid #f5d77a; background: #fffaeb; border-radius: var(--pbc-radius); padding: 1.1rem 1.3rem !important; }
.pbc-hinweis > * { margin-block: .3rem !important; }
.pbc-hinweis--blau { border-color: #b9d3ec; background: var(--wp--preset--color--blau-hell); }

/* ================= Programmieren: Wege ================= */
.pbc-weg { padding-top: var(--wp--preset--spacing--60); border-top: 1px solid var(--wp--preset--color--linie); margin-top: var(--wp--preset--spacing--60) !important; }
.pbc-weg h3 { margin-top: var(--wp--preset--spacing--40); font-size: 1.3rem; }
.pbc-buch { position: sticky; top: calc(var(--pbc-kopfhoehe) + 24px); text-align: left; }
.pbc-buch .pbc-cover { margin: -1.35rem -1.4rem .8rem !important; padding: 1.6rem 0 1.2rem; background: linear-gradient(160deg, var(--wp--preset--color--blau-hell), var(--wp--preset--color--flaeche)); border-bottom: 1px solid var(--wp--preset--color--linie); }
.pbc-buch .pbc-cover img { width: 170px !important; margin: 0 auto; display: block; border-radius: 3px; box-shadow: 0 12px 28px rgba(25,42,61,.22); transform: rotate(-2.5deg); transition: transform .2s ease; }
.pbc-buch:hover .pbc-cover img { transform: rotate(0deg) scale(1.03); }
.pbc-buch .wp-block-buttons { margin-top: .6rem !important; }
.pbc-buch .wp-block-button { width: 100%; }
.pbc-buch .wp-block-button__link { width: 100%; text-align: center; }
.wp-block-code { overflow-x: auto; box-shadow: var(--pbc-schatten); }
.wp-block-code code { white-space: pre; }
.pbc-bloecke img { background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--pbc-radius); padding: 1rem; box-shadow: var(--pbc-schatten); }

/* ================= Neuigkeiten ================= */
.pbc-news .wp-block-post-template { gap: 1.25rem; }
.pbc-kachel--news { height: 100%; }
.pbc-kachel--news .wp-block-post-excerpt__excerpt { margin: 0; color: var(--wp--preset--color--grau); }
.pbc-kachel--news .wp-block-post-title { font-size: 1.35rem; }
.pbc-kachel--news .wp-block-post-title a { color: var(--wp--preset--color--nacht); text-decoration: none; }
.pbc-kachel--news .wp-block-post-title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.pbc-kachel--news:hover { transform: translateY(-3px); box-shadow: var(--pbc-schatten-hoch); border-color: #b9d3ec; }
.pbc-kachel--news:hover .wp-block-post-title a { color: var(--wp--preset--color--blau); }
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--50); }

/* ================= Bilder ================= */
.pbc-rund img { border-radius: var(--pbc-radius); box-shadow: var(--pbc-schatten); }
.pbc-geraetbild img { filter: drop-shadow(0 20px 30px rgba(25,42,61,.25)); }

/* ================= Fußzeile ================= */
.pbc-fuss { background: var(--wp--preset--color--nacht); color: #aebdcc; padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); margin-top: 0 !important; }
.pbc-fuss .pbc-logo { margin-bottom: .6rem; }
.pbc-fuss p { font-size: .95rem; }
.pbc-fuss__titel { color: #fff !important; font-size: 1.05rem !important; font-style: italic; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.pbc-fuss ul { list-style: none; padding: 0; margin: 0; }
.pbc-fuss li { margin: .35rem 0; }
.pbc-fuss a { color: #dce6f0; text-decoration: none; }
.pbc-fuss a:hover { color: #fff; text-decoration: underline; }
.pbc-fuss__unten { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.2rem; margin-top: var(--wp--preset--spacing--50) !important; font-size: .85rem !important; color: #7f91a4; }

/* ================= Mobil ================= */
@media (max-width: 781px) {
	:root { --pbc-kopfhoehe: 64px; }
	.pbc-logo__bild { height: 21px; }
	.pbc-logo__claim { font-size: .62rem; }
	.pbc-held .wp-block-image img { width: 200px !important; }
	.pbc-held .wp-block-columns { gap: 2rem; }
	.pbc-buch { position: static; }
	.pbc-raster--4 { grid-template-columns: 1fr 1fr; gap: .8rem; }
	.pbc-raster--4 .pbc-kachel { padding: 1rem; }
	.pbc-raster--4 .pbc-kachel h3 { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Seitenkopf: Kurztext bündig unter dem Titel */
.pbc-seitenkopf > .pbc-seitenkopf__text { max-width: 1200px !important; }
.pbc-seitenkopf__text p { max-width: 46rem; }
/* Buchcover mittig */
.pbc-buch .pbc-cover { display: block; text-align: center; }
.pbc-buch .pbc-cover a { display: inline-block; }
@media (max-width: 781px) { .pbc-held .wp-block-image img { width: 170px !important; } }
.pbc-tabelle td:first-child { min-width: 9rem; }
@media (max-width: 600px) { .pbc-tabelle td:first-child { min-width: 0; } }
.pbc-bildnachweise { margin-top: var(--wp--preset--spacing--60) !important; padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--linie); font-size: .9rem; color: var(--wp--preset--color--grau); }
.pbc-bildnachweise h3 { font-size: 1.1rem; }
/* Bildergalerie (Bildschirmfotos) */
.pbc-galerie { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.pbc-galerie > * { margin: 0 !important; }
.pbc-galerie__bild { background: #0d141c; border-radius: var(--pbc-radius); padding: 1rem 1rem .6rem; text-align: center; }
.pbc-galerie__bild img { image-rendering: pixelated; width: 100%; max-width: 240px; height: auto; }
.pbc-galerie__text { color: #c4d2e1; font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-style: italic; margin: .4rem 0 0 !important; }
.pbc-galerie--2 { grid-template-columns: 1fr 1fr; }
.pbc-emu-titel { margin-top: var(--wp--preset--spacing--50) !important; }
.pbc-kachel--teil { box-shadow: none; background: var(--wp--preset--color--flaeche); }
.pbc-kachel--teil .pbc-kachel__bild--konsole { background: linear-gradient(180deg, #fff, var(--wp--preset--color--blau-hell)); }
/* Beispielpaare auf den Programmier-Unterseiten (Programm + Ergebnis) */
.pbc-beispiel { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.5rem; }
.pbc-beispiel > * { margin: 0 !important; max-width: 100%; }
.pbc-beispiel img { max-width: 100%; height: auto; }
.pbc-weg-seite h2 { margin-top: var(--wp--preset--spacing--50) !important; }
.pbc-weg-seite h2:first-child { margin-top: 0 !important; }
/* Arbeitsblätter auf der Schulseite */
.pbc-ab-liste { list-style: none; padding: 0; columns: 2; column-gap: 1.5rem; font-size: .9rem; color: var(--wp--preset--color--grau); margin: .4rem 0 .8rem !important; }
.pbc-ab-liste li { break-inside: avoid; margin: .15rem 0; }
.pbc-knoepfe-klein .wp-block-button__link { font-size: .95rem; padding: .5em 1em; }
@media (max-width: 600px) { .pbc-ab-liste { columns: 1; } }
.pbc-bildhinweis { font-size: .78rem !important; color: var(--wp--preset--color--grau); margin-top: .4rem !important; text-align: right; font-style: italic; }
/* Prompt-Kästen auf der KI-Seite */
pre.pbc-prompt { position: relative; white-space: pre-wrap; padding-top: 2.6rem !important; font-size: .82rem; line-height: 1.55; }
pre.pbc-prompt code { white-space: pre-wrap; }
.pbc-kopieren {
	position: absolute; top: .6rem; right: .6rem; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
	font: 600 .8rem/1 var(--wp--preset--font-family--titel); padding: .45rem .8rem; border-radius: 6px; cursor: pointer;
}
.pbc-kopieren:hover { background: var(--wp--preset--color--blau); border-color: var(--wp--preset--color--blau); }


/* =================================================================
   picoboy.de: bestehende Seiten (klassischer Editor) im Stil des Themes
   ================================================================= */
.pbc-seitenkopf h1 { font-size: var(--wp--preset--font-size--riesig); line-height: 1.05; }
.pbc-inhalt { font-size: 1.0625rem; line-height: 1.65; }
.pbc-inhalt h2 { font-size: var(--wp--preset--font-size--gross); line-height: 1.12; margin-top: var(--wp--preset--spacing--50); margin-bottom: .5rem; }
.pbc-inhalt h3 { font-size: 1.35rem; line-height: 1.2; margin-top: 2rem; margin-bottom: .35rem; }
.pbc-inhalt h4 { font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-style: italic; font-size: 1.15rem; color: var(--wp--preset--color--nacht); margin-top: 1.5rem; margin-bottom: .25rem; }
.pbc-inhalt p, .pbc-inhalt ul, .pbc-inhalt ol { margin-top: 0; margin-bottom: 1rem; }
.pbc-inhalt li { margin: .25rem 0; }
.pbc-inhalt img { max-width: 100%; height: auto; }
.pbc-inhalt img.aligncenter, .pbc-inhalt .aligncenter { display: block; margin-inline: auto; }
.pbc-inhalt img.alignright { float: right; margin: .3rem 0 1rem 1.5rem; max-width: 45%; }
.pbc-inhalt img.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; max-width: 45%; }
.pbc-inhalt::after { content: ""; display: table; clear: both; }
.pbc-inhalt blockquote { margin: 1.4rem 0; padding: 1rem 1.3rem; border: 1px solid #b9d3ec; border-radius: var(--pbc-radius); background: var(--wp--preset--color--blau-hell); }
.pbc-inhalt blockquote p:last-child { margin-bottom: 0; }

/* Code */
.pbc-inhalt pre {
	background: var(--wp--preset--color--nacht); color: #e6edf5; border-radius: 12px; box-shadow: var(--pbc-schatten);
	font-family: var(--wp--preset--font-family--code); font-size: .88rem; line-height: 1.6;
	padding: 1.1rem 1.3rem; overflow-x: auto; white-space: pre; margin: 1.1rem 0 1.4rem;
}
.pbc-inhalt pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Kicker, Karten, Knöpfe der bestehenden Seiten */
.pb-kicker {
	font-family: var(--wp--preset--font-family--titel); font-weight: 600; font-size: .85rem !important;
	text-transform: uppercase; letter-spacing: .14em; color: var(--wp--preset--color--blau); margin-top: var(--wp--preset--spacing--50) !important; margin-bottom: .2rem !important;
}
.pb-kicker + h2, .pb-kicker + h3 { margin-top: 0 !important; }
.pbc-inhalt > .pb-kicker:first-child { margin-top: 0 !important; }
.pbc-inhalt > .pb-karten, .pbc-inhalt > .pb-daten, .pbc-inhalt > .pb-dunkel { max-width: 1040px !important; }
.pb-karten { display: grid !important; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1.2rem auto 2rem; }
.pb-karte {
	position: relative; display: flex; flex-direction: column; gap: .45rem; min-width: 0;
	background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--pbc-radius);
	box-shadow: var(--pbc-schatten); padding: 1.35rem 1.4rem 1.4rem; overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pb-karte > * { margin: 0 !important; }
.pb-karte h3 { font-size: 1.3rem; line-height: 1.15; }
.pb-karte p { color: var(--wp--preset--color--grau); font-size: .98rem; }
.pb-karte img { border-radius: 10px; }
.pb-karte .pb-mehr { margin-top: auto !important; padding-top: .5rem; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--wp--preset--color--blau); }
.pb-karte .pb-mehr::after { content: " →"; }
.pb-karte .pb-mehr::before { content: ""; position: absolute; inset: 0; }
.pb-karte:has(.pb-mehr):hover { transform: translateY(-3px); box-shadow: var(--pbc-schatten-hoch); border-color: #b9d3ec; }
.pb-knopf {
	display: inline-block; background: var(--wp--preset--color--blau); color: #fff !important; border-radius: 8px; text-decoration: none !important;
	font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-style: italic; padding: .7em 1.4em; line-height: 1.2;
}
.pb-knopf:hover { background: var(--wp--preset--color--blau-dunkel); }
.pb-knopf--hell { background: transparent; border: 2px solid currentColor; color: var(--wp--preset--color--blau) !important; padding: calc(.7em - 2px) calc(1.4em - 2px); }
.pb-knopf--hell:hover { background: var(--wp--preset--color--blau); border-color: var(--wp--preset--color--blau); color: #fff !important; }
.pb-dunkel {
	background: var(--wp--preset--color--nacht); color: #e6edf5; border-radius: var(--pbc-radius); padding: 1.8rem 2rem; margin: 2rem auto;
	display: grid; gap: 1.5rem 2.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: center;
}
.pb-dunkel h2, .pb-dunkel h3 { color: #fff; margin-top: 0; }
.pb-dunkel a:not(.pb-knopf) { color: #9ccbf5; }
.pb-dunkel .pb-kicker { color: #7db7ec; margin-top: 0 !important; }
.pb-dunkel .pb-knopf--hell { color: #fff !important; }
.pb-dunkel p:last-child { margin-bottom: 0; }
.pb-daten { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1.5rem; margin: 1rem auto 1.8rem; border-top: 1px solid var(--wp--preset--color--linie); }
.pb-daten > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--wp--preset--color--linie); }
.pb-daten b { color: var(--wp--preset--color--nacht); font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-style: italic; }
.pb-daten span { text-align: right; color: var(--wp--preset--color--grau); }
.pb-news { list-style: none; padding: 0; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--pbc-radius); overflow: hidden; }
.pb-news li { margin: 0; padding: .8rem 1.1rem; border-bottom: 1px solid var(--wp--preset--color--linie); }
.pb-news li:last-child { border-bottom: 0; }

/* TablePress */
.tablepress { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: 12px; overflow: hidden; margin: 1rem 0 1.6rem; }
.tablepress th, .tablepress td { border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--linie) !important; padding: .6rem .9rem; text-align: left; background: transparent; }
.tablepress tbody tr:last-child td { border-bottom: 0 !important; }
.tablepress thead th { background: var(--wp--preset--color--flaeche) !important; font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-style: italic; color: var(--wp--preset--color--nacht); }

/* Kontaktformular */
.wpcf7-form p { margin-bottom: .9rem; }
.wpcf7-form input:not([type=submit]), .wpcf7-form textarea { width: 100%; padding: .6rem .8rem; border: 1px solid var(--wp--preset--color--linie); border-radius: 8px; font: inherit; }
.wpcf7-form input[type=submit] { background: var(--wp--preset--color--blau); color: #fff; border: 0; border-radius: 8px; padding: .7em 1.4em; font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-style: italic; cursor: pointer; }

/* Startseite */
.pbc-startseite { margin: 0; }
.pbc-startseite .pbc-innen { max-width: 1200px; margin-inline: auto; }
.pbc-startseite > section { padding-left: max(16px, 4vw); padding-right: max(16px, 4vw); }
.pbc-startseite h2 { margin-top: 0; }
.pbc-held__raster { display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: center; }
.pbc-held__raster img { width: 100%; max-width: 440px; display: block; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.pbc-spalten { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: center; }
.pbc-spalten--gleich { grid-template-columns: 1fr 1fr; }
.pbc-schirm img { width: 100%; display: block; border-radius: 12px; box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.pbc-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.pbc-held .pb-knopf--hell, .pbc-dunkel .pb-knopf--hell { color: #fff !important; }
.pbc-dunkel .pb-knopf--hell:hover, .pbc-held .pb-knopf--hell:hover { background: #fff; border-color: #fff; color: var(--wp--preset--color--nacht) !important; }
.pbc-startseite .pbc-held h1 { margin-bottom: 1rem; }
@media (max-width: 860px) {
	.pbc-held__raster, .pbc-spalten, .pbc-spalten--gleich { grid-template-columns: 1fr; gap: 2rem; }
	.pbc-held__raster img { max-width: 260px; }
}
@media (max-width: 781px) {
	.pbc-seitenkopf h1 { font-size: 2rem; }
	.pbc-inhalt pre { font-size: .8rem; padding: .9rem 1rem; }
	.pb-dunkel { padding: 1.4rem 1.2rem; }
}

/* Navigation: etwas enger, picoboy.de hat mehr Punkte */
.pbc-nav .wp-block-navigation__container { gap: 1.15rem; }
.pbc-nav .wp-block-navigation-item__content { font-size: .98rem; white-space: nowrap; }
.pbc-nav .wp-block-navigation__submenu-container { max-height: calc(100vh - 100px); overflow-y: auto; min-width: 290px !important; }
.pbc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: normal; }

/* Lange Adressen und breite Tabellen dürfen die Seite nicht verbreitern */
.pbc-inhalt { overflow-wrap: break-word; }
.pbc-inhalt a { overflow-wrap: anywhere; }
.pbc-inhalt iframe, .pbc-inhalt video { max-width: 100%; }
.pbc-inhalt .tablepress { max-width: 100%; }
.wpcf7-form input, .wpcf7-form textarea { box-sizing: border-box; max-width: 100%; }
@media (max-width: 600px) {
	.pbc-inhalt .tablepress th, .pbc-inhalt .tablepress td { padding: .45rem .5rem; font-size: .92rem; }
}

/* Seitenkopf: Bereich, Titel, Kurztext stehen auf jeder Seite gleich */
.pbc-seitenkopf .pbc-marke { margin-top: 0 !important; margin-bottom: .25rem !important; }
.pbc-seitenkopf h1 { margin-top: 0 !important; }
.pbc-seitenkopf__text { margin-top: .5rem !important; }
.pbc-inhalt > h2:first-child { margin-top: 0; }

/* Am Seitenende: vor und zurück */
.pbc-inhalt:has(+ .pb-blaettern) { padding-bottom: 0; }
.pb-blaettern {
	display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
	width: min(820px, calc(100% - 2 * max(16px, 4vw))); margin: var(--wp--preset--spacing--50) auto 0; padding-bottom: var(--wp--preset--spacing--60);
}
.pb-blaettern a {
	display: inline-block; font-family: var(--wp--preset--font-family--titel); font-weight: 700; font-style: italic; font-size: 1.1rem;
	text-decoration: none; padding: .55em 1.1em; border: 2px solid var(--wp--preset--color--blau); border-radius: 8px; color: var(--wp--preset--color--blau);
}
.pb-blaettern a:hover { background: var(--wp--preset--color--blau); color: #fff; }
.pb-blaettern .pb-vor { margin-left: auto; }
.pb-blaettern .pb-vor::after { content: " →"; }
.pb-blaettern .pb-zurueck::before { content: "← "; }