/*
Theme Name: Felix Erdmann
Theme URI: https://felixerdmann.de
Author: Felix Erdmann
Author URI: https://felixerdmann.de
Description: Portfolio-Theme fuer Felix Erdmann - Creative Director & Communication Designer. Aus dem Claude-Design-Export in ein klassisches WordPress-Theme ueberfuehrt: Startseite, Case Studies, Blog und der Artikel "Barrierefreiheit im Netz".
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: felix-erdmann
*/

/* ==========================================================================
   Design-Tokens (aus dem Standalone-Bundle uebernommen)
   ========================================================================== */
:root {
  /* Basis-Farben */
  --fe-blue: #0000ff;
  --fe-blue-hover: #1400ff;
  --fe-ink: #0a0a14;
  --fe-white: #ffffff;
  --fe-paper: #f8f7f4;
  --fe-cream: #f5f0e8;
  --fe-secondary: #f0efec;
  --fe-border: rgba(10, 10, 20, 0.1);
  --fe-muted-bg: #e8e7e3;
  --fe-muted-fg: #6b6b80;
  --fe-navy: #1a1a3e;
  --fe-crimson: #b5193a;
  --fe-mustard: #e6b800;
  --fe-destructive: #d4183d;
  --fe-wrenkh-blue: #1a3a6e;

  /* Semantische Farben */
  --color-background: var(--fe-paper);
  --color-foreground: var(--fe-ink);
  --color-card: var(--fe-white);
  --color-card-foreground: var(--fe-ink);
  --color-border: var(--fe-border);
  --color-muted: var(--fe-muted-bg);
  --color-muted-foreground: var(--fe-muted-fg);
  --color-secondary: var(--fe-secondary);
  --color-secondary-foreground: var(--fe-ink);
  --color-primary: var(--fe-blue);
  --color-primary-hover: var(--fe-blue-hover);
  --color-primary-foreground: var(--fe-white);
  --color-accent: var(--fe-blue);
  --color-accent-foreground: var(--fe-white);
  --color-input-background: var(--fe-secondary);
  --color-destructive: var(--fe-destructive);
  --color-destructive-foreground: var(--fe-white);

  /* Typografie */
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-serif-display: 'DM Serif Display', serif;

  --text-display: 96px;
  --text-display-lh: 1.0;
  --text-base: 16px;
  --text-body: 16px;
  --text-body-lh: 1.7;
  --text-mono: 14px;
  --text-sm: 14px;
  --text-xs: 12px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.2em;

  /* Layout */
  --radius: 0px;
  --border-width: 1px;
  --border-width-thick: 4px;
  --section-gap: 64px;
  --card-padding: 24px;
  --btn-padding-x: 20px;
  --btn-padding-y: 10px;
}

/* ==========================================================================
   Base-Layer (Layout kommt aus den Inline-Styles der Templates)
   ========================================================================== */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a:hover { opacity: 0.85; }

/* WordPress-Admin-Bar nicht ueber der Sticky-Nav ausblenden */
.admin-bar nav[style*="sticky"] { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar nav[style*="sticky"] { top: 46px; }
}

/* ==========================================================================
   Block-Editor-Klassen (Texte pflegbar) + Projekt-Raster (CPT)
   ========================================================================== */

/* Breiten-Container */
.fe-page { max-width: 1200px; margin: 0 auto; padding: 72px 40px; }
.fe-article { max-width: 760px; margin: 0 auto; padding: 56px 40px 80px; }

/* Prose-Bausteine */
.fe-eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--color-muted-foreground); margin: 0 0 20px;
}
.fe-hero-title {
  font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.01em; margin: 0 0 28px; max-width: 820px;
}
.fe-lead {
  font-size: 17px; line-height: 1.7; color: var(--color-muted-foreground);
  max-width: 560px; margin: 0 0 32px;
}
.fe-section-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--color-muted-foreground);
  margin: 0 0 20px; border-top: 1px solid var(--color-border); padding-top: 20px;
}

/* Artikel-Typografie (Block-Editor) */
.fe-article .fe-hero-title { font-size: clamp(30px, 4.5vw, 52px); margin: 0 0 8px; }
.fe-article h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.01em; margin: 48px 0 16px; }
.fe-article h3 { font-size: 20px; font-weight: 600; margin: 32px 0 12px; }
.fe-article p  { font-size: 17px; line-height: 1.75; margin: 0 0 20px; }
.fe-article ul, .fe-article ol { margin: 0 0 20px 22px; }
.fe-article li { font-size: 17px; line-height: 1.7; margin: 6px 0; }
.fe-article a  { color: var(--fe-blue); }

/* Buttons */
.fe-btn-primary, .wp-block-button.fe-btn-primary .wp-block-button__link {
  background: var(--fe-blue); color: #fff; padding: 14px 28px; font-size: 14px;
  font-weight: 500; text-decoration: none; display: inline-block; border-radius: 0;
}
.fe-btn-outline, .wp-block-button.fe-btn-outline .wp-block-button__link {
  background: transparent; border: 1px solid var(--fe-blue); color: var(--fe-blue);
  padding: 14px 28px; font-size: 14px; font-weight: 500; text-decoration: none;
  display: inline-block; border-radius: 0;
}

/* Projekt-Raster aus dem CPT (Shortcode [fe_projects]) */
.fe-project-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
}
.fe-project-card { background: var(--color-card); color: inherit; text-decoration: none; display: block; }
.fe-project-card .thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.fe-project-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fe-project-card .meta { display: block; padding: 16px; }
.fe-project-card .meta .title { display: block; font-size: 14px; font-weight: 600; }
.fe-project-card .meta .label {
  display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted-foreground);
}
.fe-project-card.is-featured { grid-column: span 1; grid-row: span 2; }
.fe-project-card.is-featured .thumb { aspect-ratio: 3 / 2; }
.fe-project-card.is-featured .meta .title { font-size: 15px; }

@media (max-width: 720px) {
  .fe-project-grid { grid-template-columns: 1fr; }
  .fe-project-card.is-featured { grid-row: auto; }
  .fe-page { padding: 48px 20px; }
  .fe-article { padding: 40px 20px 64px; }
}