/* ═══════════════════════════════════════════════════════════════════════════
ping · MANUELLE FEINJUSTIERUNG (tweaks.css)
───────────────────────────────────────────────────────────────────────────
Diese Datei wird NACH app.css geladen und überschreibt sie. Hier kannst du
gefahrlos Positionen und Größen einzelner Elemente anpassen, ohne app.css
anzufassen.
SO GEHT'S:
• Jede Regel unten ist mit /* … */ auskommentiert (= inaktiv) und zeigt einen
sinnvollen Startwert.
• Zum Aktivieren die inneren /* */ um EINE Zeile entfernen und den Wert ändern.
• Speichern → Seite neu laden (Cache wird per ?v= automatisch umgangen).
MINI-SPICKZETTEL:
Waagerecht schieben ....... transform: translateX(20px); (negativ = links)
Senkrecht schieben ........ transform: translateY(-10px); (negativ = hoch)
Beides .................... transform: translate(20px,-10px);
Abstand nach unten ........ margin-bottom: 1.5rem;
Abstand oben .............. margin-top: 1rem;
Bildgröße (max. Breite) ... max-width: 360px; (am ![]()
, s.u.)
Textblock-Breite .......... max-width: 46ch; (ch = Zeichen)
Die IDs stehen im HTML der Templates (site/templates/category.php, studio.php,
site/snippets/hero.php).
═══════════════════════════════════════════════════════════════════════════ */
/* ── EYEBROWS / TOPLINES ────────────────────────────────────────────────────
Die kleinen Großbuchstaben-Zeilen über den Überschriften.
„Mitte über dem Anfang des Worts darunter" = transform: translateX(-50%)
— funktioniert aber NUR, wenn das Eyebrow display:inline-block + width:max-content
hat (so ist #tl-endcta gesetzt). Für die anderen einfach mit translateX(px)
fein schieben, z.B. translateX(-40px). Bei Bedarf sag mir, für welche du das
-50%-Verhalten willst, dann stelle ich display/width passend ein. */
#tl-hero { /* transform: translateX(0); */ } /* Eyebrow im Hero (nur falls gesetzt) */
#tl-cards { /* transform: translateX(0); */ } /* „PROJEKTE" über den Karten (Kopf zentriert) */
#tl-theme { /* transform: translateX(0); */ } /* z.B. „ZEITGEMÄSSE WISSENSVERMITTLUNG" */
#tl-endcta { /* transform: translateX(-50%); */ } /* „KONTAKT" – Mitte auf Headline-Anfang */
#tl-team { /* transform: translateX(0); */ } /* Studio · Team-Eyebrow */
#svc-tl-1 { /* transform: translateX(0); */ } /* Studio · Leistung 1 Eyebrow */
#svc-tl-2 { /* transform: translateX(0); */ } /* Studio · Leistung 2 Eyebrow */
#svc-tl-3 { /* transform: translateX(0); */ } /* Studio · Leistung 3 Eyebrow */
/* NEU 12.07. – weitere Eyebrows (hängen jetzt per Default; hier fein schieben).
Bei den „hängenden" (tl-emotion/tl-studioteaser/tl-proj-cta) steckt der Versatz
in margin-left – zum Ändern margin-left setzen, nicht transform. */
#tl-emotion { /* margin-left: -48px; */ } /* Home · „PROJEKTE" (Emotionen-Sektion) */
#tl-studioteaser{ /* margin-left: -40px; */ } /* Home · „STUDIO" (Studio-Teaser) */
#tl-projectsfor { /* transform: translateX(0); */ } /* Kategorie · „Projekte für …" */
#tl-proj-client { /* transform: translateX(0); */ } /* Projektseite · Kunde/Client-Eyebrow */
#tl-proj-cta { /* margin-left: -48px; */ } /* Projektseite · CTA-Eyebrow */
/* ── BILDER in den Content-Blöcken · GRÖSSE ─────────────────────────────────
Bildgröße am besten am inneren ![]()
ändern (max-width). Aktuell 420px. */
#theme-media-1 .media-stack img { /* max-width: 420px; */ } /* Kategorie · Themen-Block 1 Bild */
#theme-media-2 .media-stack img { /* max-width: 420px; */ } /* Kategorie · Themen-Block 2 Bild */
#svc-media-1 .media-stack img { /* max-width: 420px; */ } /* Studio · Leistung 1 Bild */
#svc-media-2 .media-stack img { /* max-width: 420px; */ } /* Studio · Leistung 2 Bild */
#svc-media-3 .media-stack img { /* max-width: 420px; */ } /* Studio · Leistung 3 Bild */
#cta-img img { /* max-width: 480px; */ } /* Kategorie · „Von der Idee…"-Bild */
#theme-bigimg img { /* width: 65vw; */ } /* Kategorie · großes Themen-Bild */
/* ── BILDER · POSITION (ganze Bildspalte verschieben) ─────────────────────── */
#theme-media-1 { /* transform: translateY(0); */ }
#theme-media-2 { /* transform: translateY(0); */ }
#svc-media-1 { /* transform: translateY(0); */ }
#svc-media-2 { /* transform: translateY(0); */ }
#svc-media-3 { /* transform: translateY(0); */ }
#cta-img { /* transform: translate(0,0); */ }
/* ── TEXTBLÖCKE in den Content-Blöcken · BREITE & POSITION ──────────────────
max-width steuert die Zeilenbreite (ch = Zeichen). transform schiebt. */
#theme-textblock-1 { /* max-width: 46ch; */ /* transform: translateX(0); */ } /* Kat. Themen-Block 1 Text */
#theme-textblock-2 { /* max-width: 46ch; */ /* transform: translateX(0); */ } /* Kat. Themen-Block 2 Text */
#svc-text-1 { /* max-width: 46ch; */ /* transform: translateX(0); */ } /* Studio Leistung 1 Text */
#svc-text-2 { /* max-width: 46ch; */ /* transform: translateX(0); */ } /* Studio Leistung 2 Text */
#svc-text-3 { /* max-width: 46ch; */ /* transform: translateX(0); */ } /* Studio Leistung 3 Text */
#cta-text { /* max-width: 48ch; */ } /* Kat. CTA-Text */
#theme-big { /* max-width: none; */ /* margin-left: 35vw; */ } /* Kat. großer Auftakt-Text */
/* ── ÜBERSCHRIFTEN · BREITE (für Umbrüche) ──────────────────────────────────
Bei den Hero-Titeln stecken die Umbrüche als
im Text (Content), die
max-width bestimmt, ob Zeilen zusätzlich umbrechen. */
#hero-headline { /* max-width: 26ch; */ } /* Hero-Titel (Kategorie-Seiten) */
#cards-heading { /* max-width: none; */ } /* „So wird Wissen erlebbar." */
#theme-heading { /* max-width: 20ch; */ } /* Themen-Auftakt-Headline */
#cta-heading { /* max-width: none; */ } /* „Von der Idee…"-Headline */
#endcta-heading{ /* max-width: none; */ } /* „Planen Sie eine …"-Headline */
#team-heading { /* max-width: none; */ } /* Studio Team-Headline */
/* ── KARTEN-KOPF / INTRO ────────────────────────────────────────────────────*/
#cards-head { /* max-width: 46ch; */ } /* zentrierter Kopf (Eyebrow+Head+Intro) */
#cards-intro { /* max-width: 52ch; */ } /* Intro-Text unter der Headline */
/* ── EIGENE ERGÄNZUNGEN (hier frei weitere Regeln anhängen) ─────────────────*/