/* CLAUDE: assets/css/block-styles.css Custom Gutenberg Block-Styles */
/* CLAUDE: Styles für registrierte Block-Varianten (Button, Heading, Group) */
/* CLAUDE: Synchronisiert mit Farbpalette aus theme.json */
/* CLAUDE: Max. 200 Zeilen */
/* ========== BUTTON BLOCK STYLES ========== */
/* CLAUDE: Button Secondary (Inverse) Dark Umber BG + White Text */
/* CLAUDE: Verwendung: Im Gutenberg-Editor "Secondary (Inverse)" auswählen */
/* CLAUDE: Ändern: Farben über CSS-Variablen anpassbar (--color-dark-umber, --color-white) */
.wp-block-button.is-style-ddi-secondary .wp-block-button__link {
/* CLAUDE: Dark Umber Hintergrund für Secondary Button */
background-color: var(--color-dark-umber) !important;
/* CLAUDE: Weißer Text für maximalen Kontrast */
color: var(--color-white) !important;
/* CLAUDE: Kein Border */
border: none;
/* CLAUDE: Smooth Transition für Hover-Effekt */
transition: background-color var(--transition-base);
}
/* CLAUDE: Button Secondary Hover Chestnut BG */
/* CLAUDE: Ändern: Für andere Hover-Farbe --color-chestnut durch andere Variable ersetzen */
.wp-block-button.is-style-ddi-secondary .wp-block-button__link:hover {
background-color: var(--color-chestnut) !important;
}
/* CLAUDE: Button Burgundy CTA Burgundy BG + White Text */
/* CLAUDE: Verwendung: Im Gutenberg-Editor "Burgundy CTA" auswählen */
/* CLAUDE: Kontrast 8.57:1 (AAA) optimale Zugänglichkeit */
/* CLAUDE: Ändern: Für andere CTA-Farbe --color-burgundy durch andere Variable ersetzen */
.wp-block-button.is-style-ddi-burgundy .wp-block-button__link {
/* CLAUDE: Burgundy Hintergrund für wichtige CTAs */
background-color: var(--color-burgundy) !important;
/* CLAUDE: Weißer Text */
color: var(--color-white) !important;
/* CLAUDE: Kein Border */
border: none;
/* CLAUDE: Smooth Transition für Hover-Effekt */
transition: background-color var(--transition-base);
}
/* CLAUDE: Button Burgundy Hover Dunklerer Burgundy-Ton */
/* CLAUDE: Ändern: Für anderen Hover-Effekt Hex-Wert anpassen */
.wp-block-button.is-style-ddi-burgundy .wp-block-button__link:hover {
/* CLAUDE: Etwas dunkler für Hover-Feedback */
background-color: #7A1E29 !important;
}
/* ========== HEADING BLOCK STYLES ========== */
/* CLAUDE: Heading mit Burgundy-Akzent Border-Bottom */
/* CLAUDE: Verwendung: Im Gutenberg-Editor "Mit Burgundy-Akzent" auswählen */
/* CLAUDE: Ändern: Für dickeren Unterstrich border-bottom: 5px solid ändern */
.is-style-ddi-accent {
/* CLAUDE: Burgundy Unterstrich (3px dick) */
border-bottom: 3px solid var(--color-burgundy);
/* CLAUDE: Padding für Abstand zwischen Text und Linie */
padding-bottom: 0.5rem;
/* CLAUDE: Inline-Block für korrektes Border-Verhalten */
display: inline-block;
/* CLAUDE: Breite auf Content beschränken (nicht volle Breite) */
width: auto;
}
/* CLAUDE: Alternative: Burgundy Akzent als Pseudo-Element (kleiner Balken links) */
/* CLAUDE: Auskommentiert aktivieren für Alternative mit seitlichem Akzent */
/* CLAUDE: Ändern: width und margin-right anpassen für größeren/kleineren Balken */
/*
.is-style-ddi-accent::before {
content: '';
display: inline-block;
width: 4px;
height: 100%;
background-color: var(--color-burgundy);
margin-right: 1rem;
vertical-align: middle;
}
*/
/* ========== GROUP BLOCK STYLES ========== */
/* CLAUDE: Group Card-Style Weiß auf Marble White mit Porous Stone Border */
/* CLAUDE: Verwendung: Im Gutenberg-Editor "Card" auswählen */
/* CLAUDE: Ändern: Für eckige Cards border-radius: 0; setzen */
.wp-block-group.is-style-ddi-card {
/* CLAUDE: Weißer Hintergrund (hebt sich von Marble White ab) */
background-color: var(--color-white);
/* CLAUDE: Porous Stone Border (1px, subtil) */
border: 1px solid var(--color-porous-stone);
/* CLAUDE: Border-Radius für edle, abgerundete Kanten */
border-radius: var(--radius-md);
/* CLAUDE: Padding für Innenabstand (Large Spacing) */
padding: var(--spacing-lg);
/* CLAUDE: Box-Shadow für subtile Tiefe */
box-shadow: var(--shadow-sm);
/* CLAUDE: Transition für Hover-Effekt */
transition: box-shadow var(--transition-base);
}
/* CLAUDE: Card Hover Shadow verstärken für Feedback */
/* CLAUDE: Ändern: Für stärkeren Hover-Effekt --shadow-lg verwenden */
.wp-block-group.is-style-ddi-card:hover {
/* CLAUDE: Stärkerer Schatten bei Hover */
box-shadow: var(--shadow-md);
}
/* CLAUDE: Group Gold Highlight Heritage Gold BG mit Dark Umber Text */
/* CLAUDE: Verwendung: Im Gutenberg-Editor "Gold Highlight" auswählen */
/* CLAUDE: Kontrast 5.29:1 (AA) gute Lesbarkeit */
/* CLAUDE: Ändern: Für andere Highlight-Farbe --color-heritage-gold ersetzen */
.wp-block-group.is-style-ddi-gold-highlight {
/* CLAUDE: Heritage Gold Hintergrund */
background-color: var(--color-heritage-gold);
/* CLAUDE: Dark Umber Text für Kontrast */
color: var(--color-dark-umber);
/* CLAUDE: Padding für Innenabstand */
padding: var(--spacing-lg);
/* CLAUDE: Border-Radius für edle Kanten */
border-radius: var(--radius-md);
/* CLAUDE: Optional: Chestnut Border für zusätzliche Definition */
border: 2px solid var(--color-chestnut);
}
/* CLAUDE: Gold Highlight Link-Farben für besseren Kontrast auf Gold */
/* CLAUDE: Ändern: Für andere Link-Farbe --color-dark-umber ersetzen */
.wp-block-group.is-style-ddi-gold-highlight a {
/* CLAUDE: Dark Umber für Links auf Gold-Hintergrund */
color: var(--color-dark-umber);
/* CLAUDE: Bold für bessere Lesbarkeit */
font-weight: 600;
}
/* CLAUDE: Gold Highlight Links Hover Burgundy */
.wp-block-group.is-style-ddi-gold-highlight a:hover {
/* CLAUDE: Burgundy für Hover-Feedback */
color: var(--color-burgundy);
}
/* ========== STATUS-MESSAGE-BOXEN ========== */
/* CLAUDE: Success Message Box für Erfolgsmeldungen */
/* CLAUDE: Verwendung: Manuell via "Additional CSS class(es)" im Block: ddi-message-success */
/* CLAUDE: Ändern: Für anderen Stil border-left: none; und padding anpassen */
.ddi-message-success {
/* CLAUDE: Success-Light Hintergrund */
background-color: var(--color-success-light);
/* CLAUDE: Success Border links (4px dick) */
border-left: 4px solid var(--color-success);
/* CLAUDE: Padding für Innenabstand */
padding: var(--spacing-md);
/* CLAUDE: Border-Radius für abgerundete Ecken */
border-radius: var(--radius-sm);
/* CLAUDE: Dark Umber Text */
color: var(--color-dark-umber);
}
/* CLAUDE: Warning Message Box für Warnungen */
/* CLAUDE: Verwendung: Manuell via "Additional CSS class(es)" im Block: ddi-message-warning */
.ddi-message-warning {
/* CLAUDE: Warning-Light Hintergrund */
background-color: var(--color-warning-light);
/* CLAUDE: Warning Border links (4px dick) */
border-left: 4px solid var(--color-warning);
/* CLAUDE: Padding für Innenabstand */
padding: var(--spacing-md);
/* CLAUDE: Border-Radius für abgerundete Ecken */
border-radius: var(--radius-sm);
/* CLAUDE: Dark Umber Text */
color: var(--color-dark-umber);
}
/* CLAUDE: Error Message Box für Fehlermeldungen */
/* CLAUDE: Verwendung: Manuell via "Additional CSS class(es)" im Block: ddi-message-error */
.ddi-message-error {
/* CLAUDE: Error-Light Hintergrund */
background-color: var(--color-error-light);
/* CLAUDE: Error Border links (4px dick) */
border-left: 4px solid var(--color-error);
/* CLAUDE: Padding für Innenabstand */
padding: var(--spacing-md);
/* CLAUDE: Border-Radius für abgerundete Ecken */
border-radius: var(--radius-sm);
/* CLAUDE: Dark Umber Text */
color: var(--color-dark-umber);
}
/* ========== BADGE/TAG-STYLES ========== */
/* CLAUDE: Badge Basis-Style für Labels, Tags, Kategorien */
/* CLAUDE: Verwendung: Custom HTML-Block mit Text */
/* CLAUDE: Ändern: Für rechteckige Badges border-radius: 0; setzen */
.ddi-badge {
/* CLAUDE: Inline-Block für korrekte Darstellung */
display: inline-block;
/* CLAUDE: Padding für kompakte Größe */
padding: 0.25rem 0.75rem;
/* CLAUDE: Heritage Gold Hintergrund */
background-color: var(--color-heritage-gold);
/* CLAUDE: Dark Umber Text */
color: var(--color-dark-umber);
/* CLAUDE: Border-Radius für abgerundete Ecken */
border-radius: var(--radius-sm);
/* CLAUDE: Kleinere Schriftgröße (14px) */
font-size: 0.875rem;
/* CLAUDE: Semi-Bold für Betonung */
font-weight: 600;
/* CLAUDE: Uppercase für klassischen Badge-Look */
text-transform: uppercase;
/* CLAUDE: Letter-Spacing für bessere Lesbarkeit */
letter-spacing: 0.05em;
}
/* CLAUDE: Badge Burgundy-Variante für wichtige Tags */
/* CLAUDE: Verwendung: Text */
.ddi-badge--burgundy {
background-color: var(--color-burgundy);
color: var(--color-white);
}
/* CLAUDE: Badge Chestnut-Variante für sekundäre Tags */
/* CLAUDE: Verwendung: Text */
.ddi-badge--chestnut {
background-color: var(--color-chestnut);
color: var(--color-white);
}