/* ========================================================================== Feldnotiz - Layout-Logik Breakpoint: 768px. >=768px = Desktop-Grid (4:1, fixe rechte Spalte). <768px = Umschalter-Leiste, jeweils eine Ansicht sichtbar, kein Fixed-Layout. ========================================================================== */ /* --- Header --- Eine Zeile: Logo links, Navigation rechtsbuendig - dadurch insgesamt rund halb so hoch wie die vorherige zweizeilige, zentrierte Variante. */ .site-header { border-top: 3px solid var(--color-accent); /* duenne Akzentlinie ganz oben */ border-bottom: 1px solid var(--color-border); padding: 14px 48px; flex-shrink: 0; /* Header behaelt seine Hoehe, .layout-grid bekommt den Rest (siehe unten) */ transition: padding 0.2s ease; } .site-header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .top-nav { display: flex; align-items: center; gap: 24px; justify-content: flex-end; } .top-nav a { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; } .top-nav a:hover { color: var(--color-accent); } .site-branding { display: flex; align-items: center; gap: 14px; text-align: left; } /* .site-logo-link greift beim Text-Fallback (kein eigenes Logo hochgeladen), .custom-logo-link ist die Klasse, die WordPress selbst um ein hochgeladenes Logo legt (siehe Kommentar in header.php). */ .site-logo-link, .custom-logo-link { display: inline-flex; align-items: center; text-decoration: none; } .site-logo-link img, .custom-logo-link img { height: 24px; width: auto; display: block; transition: height 0.2s ease; } .site-title-text { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; transition: font-size 0.2s ease; } /* Tagline: rechts neben dem Logo, durch eine duenne Trennlinie abgesetzt - dadurch braucht sie keine eigene Zeile mehr wie vorher. */ .site-tagline { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0; padding-left: 14px; border-left: 1px solid var(--color-border); white-space: nowrap; overflow: hidden; max-width: 260px; opacity: 1; transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, border-color 0.25s ease; } /* --- Sobald in der Blog-Spalte (bzw. auf Mobile: der Seite) gescrollt wird, bekommt per JS (assets/js/tabs.js) die Klasse "header-scrolled" - Logo schrumpft weiter, Tagline blendet aus, Header wird noch kompakter. --- */ body.header-scrolled .site-header { padding-top: 8px; padding-bottom: 8px; } body.header-scrolled .site-logo-link img, body.header-scrolled .custom-logo-link img { height: 16px; } body.header-scrolled .site-title-text { font-size: 14px; } body.header-scrolled .site-tagline { max-width: 0; opacity: 0; padding-left: 0; border-left-color: transparent; } /* Mobile-Umschalter: nur < 768px sichtbar (siehe Media Query unten) */ .mobile-tabs { display: none; border-bottom: 1px solid var(--color-border); } .tab-btn { flex: 1; min-height: 48px; border: none; background: transparent; font-family: var(--font-body); font-size: 14px; cursor: pointer; color: var(--color-text-secondary); border-bottom: 2px solid transparent; } .tab-btn.active { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-accent); } /* --- Haupt-Layout: Grid mit 80/20-Spalten, restliche Viewport-Hoehe --- body ist ein Flex-Container ueber volle Viewport-Hoehe: .site-header behaelt oben seine natuerliche Hoehe (flex-shrink:0, siehe oben), .layout-grid bekommt automatisch den kompletten Rest (flex:1) - dadurch passt sich das Grid an, egal wie hoch der Header gerade ist, statt eine feste Zahl vom Viewport abzuziehen. */ body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .layout-grid { display: grid; grid-template-columns: 4fr 1fr; /* 80% Blog / 20% fixe Spalte */ flex: 1 1 auto; min-height: 0; /* wichtig: erlaubt overflow innerhalb von Flexbox */ overflow: hidden; /* verhindert Scrollen der ganzen Seite */ } /* Blog-Spalte: einzige Spalte, die mit der Seite scrollt */ .blog-column { height: 100%; overflow-y: auto; padding: 48px 64px; } /* Rechte Spalte: bleibt durch height:100% + overflow:hidden am Grid fix stehen */ .side-column { height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--color-border); overflow: hidden; } /* Umschalter Camshots/Brainshots (oben in der Spalte): waehlt aus, welche der beiden Sektionen darunter sichtbar ist - dadurch nur EINE Scrollbar statt zwei separaten Bereichen uebereinander. */ .side-toggle { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--color-border); } .side-toggle-btn { flex: 1; min-height: 44px; border: none; background: transparent; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; color: var(--color-text-secondary); border-bottom: 2px solid transparent; } .side-toggle-btn.active { color: var(--color-text); border-bottom-color: var(--color-accent); } /* Fotofeed/Textfeed (nur Desktop, >=768px): nur die per Umschalter gewaehlte Sektion ist sichtbar und fuellt die komplette restliche Hoehe der Spalte - deshalb nur EINE Scrollbar. Bewusst auf die Klasse "side-active" statt "active" gestuetzt UND explizit auf Desktop begrenzt: "active" gehoert exklusiv dem Mobile-Umschalter oben (Blog/ Fotofeed/Textfeed, siehe .mobile-tabs) - beide Systeme dürfen sich nicht ueberschneiden, sonst waere auf Mobile immer zusaetzlich der Fotofeed unter der Blogliste sichtbar, egal welcher Tab gewaehlt ist. */ @media (min-width: 768px) { .side-column .tab-content { display: none; } .side-column .tab-content.side-active { display: block; flex: 1 1 auto; min-height: 0; /* wichtig: erlaubt overflow innerhalb von Flexbox */ overflow-y: auto; padding: 28px 22px; box-sizing: border-box; } } /* --- Archiv-/Suchergebnis-/404-Ueberschrift (index.php, 404.php) --- */ .archive-heading { font-size: 28px; font-weight: 600; letter-spacing: -0.2px; margin: 0 0 24px; } /* --- Blogliste --- */ .blog-post { border-bottom: 1px solid var(--color-border); padding: 40px 0; } .blog-post:first-child { padding-top: 0; } .blog-post-thumb-link img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 20px; } .blog-post-date { font-size: 13px; color: var(--color-text-secondary); letter-spacing: 0.02em; display: block; margin-bottom: 8px; } .blog-post-title { font-size: 26px; font-weight: 600; line-height: 1.3; margin: 0 0 14px; letter-spacing: -0.2px; } .blog-post-title a { text-decoration: none; color: var(--color-text); } .blog-post-title a:hover { color: var(--color-accent); } .blog-post-excerpt { font-size: 17px; line-height: 1.75; color: #333; max-width: 640px; margin: 0 0 16px; } .blog-post-readmore { font-size: 14px; font-weight: 600; color: var(--color-accent); text-decoration: none; } .blog-post-readmore:hover { color: var(--color-text); } /* --- Kompakte Beitraege (alle ausser dem aktuellsten): Bild + kurzer Teaser, zweispaltiges Raster --- */ .blog-post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; padding: 8px 0 40px; border-bottom: 1px solid var(--color-border); } .blog-post-compact-thumb-link { display: block; margin-bottom: 14px; } .blog-post-compact-thumb-link img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; } .blog-post-compact-title { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0 0 8px; letter-spacing: -0.1px; } .blog-post-compact-title a { color: var(--color-text); text-decoration: none; } .blog-post-compact-title a:hover { color: var(--color-accent); } .blog-post-compact-excerpt { font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); margin: 0; } /* --- Pagination unter der Blogliste (an .single-post-nav weiter unten angelehnte Optik, bewusst eigene Regeln statt gemeinsamer Selektor, damit sich beide unabhaengig voneinander anpassen lassen) --- */ .blog-pagination { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 8px 0 36px; padding-top: 24px; border-top: 1px solid var(--color-border); } .blog-pagination a { font-size: 13px; font-weight: 600; color: var(--color-text); letter-spacing: 0.02em; text-decoration: none; } .blog-pagination a:hover { color: var(--color-accent); } /* --- Footer (scrollt mit der Blog-Spalte, kein globaler Seiten-Footer) --- */ .content-footer { border-top: 1px solid var(--color-border); margin-top: 8px; padding: 40px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .footer-col-head { font-size: 13px; font-weight: 600; margin-bottom: 6px; } .footer-col-line { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; } .footer-col-line a { color: var(--color-text-secondary); text-decoration: none; } .footer-col-line a:hover { color: var(--color-accent); } /* Rechtliches-Links (Design -> Menues, Standort "Footer"): wp_nav_menu() gibt hier ohne Wrapper direkte
  • aus (wie bei .top-nav oben), deshalb Flex direkt auf das