/* CreativeCopy Redesign, 30.07.2026 v2 — Passermarken/Papierton-Konzept */

:root{
	--cc-paper: #F7F3EA;
	--cc-paper-raised: #FFFDF8;
	--cc-ink: #1E1B16;
	--cc-ink-soft: #55503F;
	/* Logoblau, am 11.08.2026 aus dem neuen Logo gemessen: #2E3092 deckt dort die gesamte
	   Grundflaeche, alle vier Ecken und der komplette Rand tragen genau diesen Wert. Der
	   Kunde wollte den Header exakt im Farbton des Logohintergrunds, damit kein Kasten um
	   das Logo sichtbar ist.

	   Es gibt seither nur noch DIESES eine Blau. Zuerst waren nur die Flaechen umgestellt
	   und die Schriftfarbe blieb auf dem alten dunklen Blau (#23244B), mit der Ueberlegung,
	   dass Ueberschriften dann ruhiger wirken. Der Kunde hat den Unterschied auf Anhieb an
	   drei Stellen erkannt. Das alte Blau ist deshalb ersatzlos entfernt, auch aus den
	   mu-Plugins. Wer ein zweites dunkles Blau wieder einfuehrt, holt sich diese Runde
	   zurueck.

	   Kontraste: auf Papier #F7F3EA rund 10:1, gegen Weiss 10,75:1, gegen das Gelb
	   #FFC72C 6,89:1. Alle deutlich ueber WCAG AA. */
	--cc-blau: #2E3092;
	--cc-blau-soft: #3E41A8;
	--cc-rot: #D8102C;
	--cc-cyan: #00AEEF;
	--cc-magenta: #EC1E79;
	--cc-gelb: #FFC72C;
	--cc-line: #DDD3BE;
}

/* Basis */
/* Der Ueberlauf muss am Wurzelelement abgefangen werden, nicht nur am body: den
   Bildlauf des Fensters steuert das html-Element, ein overflow allein auf body reicht
   dafuer nicht und der waagrechte Scrollbalken blieb. */
html{
	overflow-x: clip;
}
body{
	/* Mehrere Baender laufen ueber die volle Fensterbreite und benutzen dafuer 100vw mit
	   negativen Randabstaenden. 100vw zaehlt aber die Breite MIT Scrollbar, waehrend 50%
	   sich auf den Inhalt OHNE Scrollbar bezieht. Aus der Differenz entstand ein
	   waagrechter Ueberhang, sichtbar als heller Streifen am rechten Rand des
	   Kontaktbands. clip schneidet ihn ab, ohne wie hidden einen eigenen Scrollbereich
	   aufzuspannen, klebende Elemente bleiben damit heil. */
	overflow-x: clip;
	background-color: var(--cc-paper) !important;
	color: var(--cc-ink);
	font-family: -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
#content.site-content,
#primary.content-area,
#main.site-main{
	background-color: var(--cc-paper) !important;
}
h1, h2, h3, h4, h5, h6{
	font-family: Georgia,"Times New Roman",serif;
	font-weight: 400;
}
/* Ueberschriftfarbe, korrigiert am 11.08.2026.
   Astra faerbt Ueberschriften mit
   `h1,...,h6,.entry-content :where(h1,...,h6){color:var(--ast-global-color-2)}`, also
   #1e293b. Das :where() zaehlt selbst nichts, aber `.entry-content` ist eine Klasse und
   schlaegt damit jeden reinen Elementselektor. Unsere Regel stand auf `h1...h6` und hat
   deshalb NIE gegriffen: alle Ueberschriften im Seiteninhalt waren immer Astras dunkles
   Graublau. Aufgefallen ist es nie, weil unser altes #23244B fast genauso dunkel war.
   Erst neben dem hellen Logoblau war der Unterschied sichtbar.

   Hier steht bewusst KEIN !important, sondern derselbe Selektoraufbau wie bei Astra. Mit
   !important wuerden auch die weissen Ueberschriften auf den blauen Flaechen ueberschrieben
   (Kontaktband, CTA-Banner) und blau auf blau stehen. Die vier Sonderfaelle
   .cc-contact-inner h2, .cc-cta-banner-overlay h3, .cc-footer-col h3 und .cc-ticket sind
   je eine Klasse plus ein Element und gewinnen damit weiterhin. */
h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.entry-title,
.entry-title a{
	color: var(--cc-blau);
}
a{ color: var(--cc-blau); }
a:hover{ color: var(--cc-rot); }

/* Header */
.ast-primary-header-bar,
.main-header-bar{
	background-color: var(--cc-blau) !important;
}
.main-header-bar .main-navigation ul li > a,
.ast-site-identity .site-title a{
	color: #F2EFE4 !important;
}
.main-header-bar .main-navigation ul li > a:hover{
	color: var(--cc-gelb) !important;
}
.ast-primary-header-bar{
	border-bottom: 6px solid var(--cc-cyan) !important;
	border-image: linear-gradient(to right,
		var(--cc-cyan) 0 25%,
		var(--cc-magenta) 25% 50%,
		var(--cc-gelb) 50% 75%,
		#000 75% 100%) 1 !important;
}

/* Warenkorb-Icon im Hauptmenue, mit live aktualisierendem Zaehler (WooCommerce Cart-Fragments) */
.cc-cart-link{
	display: flex;
	align-items: center;
	position: relative;
	color: #F2EFE4 !important;
	padding: 4px;
}
.cc-cart-link:hover{ color: var(--cc-gelb) !important; }
.cc-cart-count{
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--cc-rot);
	color: #fff !important;
	font-family: -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}
.cc-cart-count.is-empty{ display: none; }

/* Seitentitel nur auf der Startseite ausblenden */
.home .entry-header{
	display: none;
}
.entry-header{
	padding-top: 2rem;
}

/* Buttons, kantig statt rund */
.ast-button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit{
	background-color: var(--cc-rot) !important;
	border-color: var(--cc-rot) !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
}
.ast-button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
	background-color: var(--cc-blau) !important;
	border-color: var(--cc-blau) !important;
}

/* WooCommerce-Standardmeldungen (Warenkorb hinzugefuegt, Fehler, Hinweise) ins Design einpassen,
   statt dem generischen Astra-Grau/Blau. Drei Typen, unterschiedliche Akzentfarbe oben,
   sonst gleiche Papier-Optik wie der Rest der Seite. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
	background: var(--cc-paper-raised) !important;
	border: 1px solid var(--cc-line) !important;
	border-top: 3px solid var(--cc-blau) !important;
	color: var(--cc-ink) !important;
	padding: 1.1rem 1.6rem !important;
	font-size: .95rem !important;
	list-style: none !important;
	box-shadow: 0 1px 2px rgba(30,27,22,.06) !important;
}
.woocommerce-message{ border-top-color: var(--cc-cyan) !important; }
.woocommerce-error{ border-top-color: var(--cc-rot) !important; }
.woocommerce-info{ border-top-color: var(--cc-gelb) !important; }
.woocommerce-message::before{ color: var(--cc-cyan) !important; }
.woocommerce-error::before{ color: var(--cc-rot) !important; }
.woocommerce-info::before{ color: var(--cc-gelb) !important; }
/* Icon/Text-Layout robust per Flexbox statt dem urspruenglichen WooCommerce-Padding-Trick
   (das haben wir oben mit padding !important ueberschrieben, dadurch lag der Text ploetzlich
   ueber dem absolut positionierten Icon). Flexbox macht das unabhaengig von genauen
   Woo-internen Abstandswerten. */
.woocommerce-message,
.woocommerce-info{
	display: flex !important;
	align-items: center !important;
	gap: .7rem !important;
	flex-wrap: wrap !important;
}
.woocommerce-message a.button{ margin-left: auto !important; }
.woocommerce-message::before,
.woocommerce-info::before{
	position: static !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}
.woocommerce-error li{
	display: flex !important;
	align-items: center !important;
	gap: .7rem !important;
	list-style: none !important;
	margin: 0 !important;
}
.woocommerce-error li::before{
	position: static !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

/* Astras nativer Footer wird komplett ausgeblendet, ersetzt durch einen eigenen, kompletten
   Footer (Sitemap-Spalten + Firmendaten + Copyright/Rechtliches), siehe mu-plugin
   cc-footer-anfahrt.php (Hook wp_footer). Grund: die Reihenfolge innerhalb des Astra-Footers
   liess sich nicht zuverlaessig per Hook beeinflussen (siehe gescheiterter get_footer()-Versuch),
   volle Kontrolle gibt's nur, wenn der ganze Footer selbst gebaut wird. */
.site-footer{
	display: none !important;
}

/* ===== Startseite: eigene Klassen statt Inline-Styles ===== */

.cc-hero{
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem clamp(1.5rem, 5vw, 4rem) 3rem;
}
.cc-hero-frame{
	position: relative;
	border: 1px solid var(--cc-line);
	background: var(--cc-paper-raised);
	box-shadow: 0 1px 2px rgba(30,27,22,.06), 0 8px 24px rgba(30,27,22,.08);
	padding: 4rem 3rem;
	text-align: center;
}
.cc-hero-frame h1{
	font-size: clamp(1.9rem, 6vw, 3.4rem);
	line-height: 1.15;
	margin-bottom: 1rem;
	text-wrap: balance;
}
.cc-eyebrow{
	display: block;
	font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .72rem;
	color: var(--cc-rot);
	margin-bottom: 1.1rem;
}
.cc-lede{
	max-width: 44ch;
	margin: 0 auto 2.2rem;
	color: var(--cc-ink-soft);
	font-size: 1.08rem;
}
.cc-btn-row{
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}
.cc-btn{
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: var(--cc-rot);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 1.02rem;
	padding: 1.1rem 2.4rem;
	border: 1px solid var(--cc-rot);
	box-shadow: 0 4px 10px rgba(216,16,44,.25);
	transition: transform .12s ease, box-shadow .12s ease;
}
.cc-btn:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(216,16,44,.32);
}
.cc-btn.ghost{
	box-shadow: none;
}
.cc-btn.ghost{
	background: var(--cc-paper-raised);
	color: var(--cc-blau) !important;
	border: 1px solid var(--cc-blau);
}
.cc-btn.ghost:hover{
	background: var(--cc-blau);
	color: #fff !important;
}
/* Ghost-Variante fuer navy Hintergrund (Kontakt-Band), umgekehrte Farben zu .ghost */
.cc-btn.ghost-invert{
	background: transparent;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.6);
	box-shadow: none;
	margin-top: 1.6rem;
}
.cc-btn.ghost-invert:hover{
	background: #fff;
	color: var(--cc-blau) !important;
	border-color: #fff;
}
.cc-regmark{
	position: absolute;
	width: 22px;
	height: 22px;
	opacity: .55;
	color: var(--cc-blau);
}
.cc-regmark.tl{ top:-11px; left:-11px; }
.cc-regmark.tr{ top:-11px; right:-11px; }
.cc-regmark.bl{ bottom:-11px; left:-11px; }
.cc-regmark.br{ bottom:-11px; right:-11px; }

.cc-services{
	max-width: 1100px;
	margin: 0 auto;
	padding: 1rem clamp(1.5rem, 5vw, 4rem) 4rem;
}
.cc-services-head{
	text-align: center;
	max-width: 46ch;
	margin: 0 auto 3rem;
}
.cc-services-head p{ color: var(--cc-ink-soft); }

.cc-swatch-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
	gap: 1.5rem;
}
/* Kategorie-Kacheln mit auto-fill statt auto-fit, ergaenzt 11.08.2026.
   Unterschied: auto-fit laesst leere Spalten zusammenfallen, die vorhandenen Kacheln
   dehnen sich dann auf die ganze Breite. Auf der Kategorieseite LED Produkte, die nur
   eine Unterkategorie hat, wurde daraus eine einzige riesige Kachel mit einem
   bildschirmhohen Bild. auto-fill behaelt die leeren Spalten, jede Kachel bleibt so
   breit wie die anderen, egal wie viele es sind.
   Das Raster von "So laeuft's ab" bleibt bewusst auf auto-fit: dort sind es fest drei
   Karten, die die Breite ausfuellen sollen. */
.cc-shop-cat-grid,
.cc-start-cat-grid,
.cc-subcat-grid{
	grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
}
.cc-swatch-card{
	background: var(--cc-paper-raised);
	border: 1px solid var(--cc-line);
	box-shadow: 0 1px 2px rgba(30,27,22,.06), 0 8px 24px rgba(30,27,22,.08);
	padding: 1.8rem 1.6rem;
	text-decoration: none !important;
	color: var(--cc-ink) !important;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cc-swatch-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 4px 8px rgba(30,27,22,.08), 0 14px 28px rgba(30,27,22,.12);
}
.cc-icon{ color: var(--cc-blau); }
.cc-swatch-card:hover .cc-icon{ color: var(--cc-rot); }
.cc-card-img-wrap{
	width: calc(100% + 3.2rem);
	height: 170px;
	margin: -1.8rem -1.6rem .3rem;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}
.cc-card-img-wrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(.85) brightness(1.08);
}
.cc-card-img-wrap::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(46,48,146,.15), rgba(46,48,146,.4));
	mix-blend-mode: multiply;
}
.cc-swatch-dots{ display: flex; gap: .35rem; }
.cc-swatch-dots i{ width:13px; height:13px; border-radius:50%; display:block; }
.cc-swatch-dots i.c{ background: var(--cc-cyan); }
.cc-swatch-dots i.m{ background: var(--cc-magenta); }
.cc-swatch-dots i.y{ background: var(--cc-gelb); }
.cc-swatch-dots i.k{ background: var(--cc-ink); }
.cc-swatch-card h3{ font-size: 1.3rem; margin: 0; }
.cc-swatch-card p{ margin: 0; color: var(--cc-ink-soft); font-size: .94rem; }
.cc-swatch-card .go{
	margin-top: auto;
	font-weight: 700;
	font-size: .85rem;
	color: var(--cc-rot) !important;
}

body, #page, #content.site-content, #primary.content-area, .ast-container,
#main.site-main, article, .entry-content{
	overflow-x: visible !important;
}
.cc-contact-band{
	background: var(--cc-blau);
	color: #F2EFE4;
	/* Bis 11.08.2026 lief dieses Band ueber die ganze Fensterbreite. Auf einem breiten
	   Bildschirm stand damit eine durchgehende Farbflaeche neben einem Inhalt, der auf die
	   Containerbreite begrenzt ist, und wirkte dadurch massiv. Der Kunde hat es zweimal
	   gemeldet, beim CTA-Balken und hier. Beide sitzen jetzt in der Inhaltsbreite, die
	   Seite laeuft dadurch durchgehend in einer Spalte.

	   Nebeneffekt, der erwuenscht ist: das 100vw ist weg. Es war die Ursache des
	   waagrechten Ueberlaufs, weil 100vw die Scrollbar mitzaehlt und die 50 Prozent im
	   Randabstand nicht. */
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.cc-contact-inner{
	/* Vorher 1100px. Das Band selbst ist seit 11.08.2026 auf die Inhaltsbreite begrenzt,
	   eine zweite Begrenzung darin wuerde den Inhalt unnoetig weiter einschnueren. */
	max-width: 100%;
	margin: 0 auto;
	padding: 3.5rem clamp(1.5rem, 5vw, 4rem);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3rem;
	align-items: center;
}
.cc-contact-inner h2{ color: #fff; font-size: 1.7rem; margin-bottom: .8rem; }
.cc-contact-inner p{ color: #C9C7DA; max-width: 42ch; margin: 0; }
.cc-ticket{
	background: var(--cc-blau-soft);
	color: #F2EFE4;
	border: 1px solid rgba(255,255,255,.14);
	padding: 1.6rem 1.8rem;
}
.cc-ticket-row .val{ color: #fff !important; }
.cc-ticket-row .val a{
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
}
.cc-ticket-row .val a:hover{ color: var(--cc-gelb) !important; }
.cc-ticket-row{
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px dashed rgba(255,255,255,.18);
}
.cc-ticket-row:last-child{ border-bottom: none; }
.cc-ticket-row .label{
	display: flex;
	align-items: center;
	gap: .4rem;
	font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .72rem;
	color: #9C9BC2;
}
.cc-ticket-row .label svg{ flex-shrink: 0; opacity: .8; }
.cc-ticket-row .val{ text-align: right; font-weight: 600; }

@media (max-width: 680px){
	.cc-hero-frame{ padding: 2.2rem 1.1rem; }
	.cc-hero-frame h1{ font-size: 1.9rem; }
	.cc-lede{ font-size: 1rem; }
	.cc-contact-inner{ grid-template-columns: 1fr; padding: 2.2rem 1.2rem; }
	.cc-services{ padding: 1rem 1rem 3rem; }
	.cc-kontakt-grid{ grid-template-columns: 1fr !important; }
}

/* "Nach oben scrollen"-Button, war noch Astras Standard-Blau */
#ast-scroll-top{
	background-color: var(--cc-blau) !important;
}
#ast-scroll-top:hover{
	background-color: var(--cc-rot) !important;
}

/* Website-Titel-Text neben dem Logo ausblenden, Logo enthält den Schriftzug schon */
.ast-site-identity .site-title{
	display: none !important;
}

/* Off-Canvas-Menü-Panel, echtes Element aus DevTools bestätigt (.ast-mobile-header-content) */
.ast-mobile-header-wrap .ast-mobile-header-content{
	background-color: var(--cc-blau) !important;
}
/* Jeder einzelne Menüpunkt hatte zusätzlich SEINE EIGENE helle Hintergrundfarbe, exakte
   Selektor-Liste aus dem Styles-Panel übernommen, um sicher dieselbe Regel zu treffen */
.ast-builder-menu-mobile .main-navigation,
.ast-builder-menu-mobile .main-header-menu,
.ast-builder-menu-mobile .main-header-menu .menu-link,
.ast-builder-menu-mobile .sub-menu{
	background-color: transparent !important;
}
.ast-mobile-header-content .main-header-menu .menu-item > .menu-link{
	color: #F2EFE4 !important;
	border-color: rgba(255,255,255,.2) !important;
}

/* Kategorie-Banner auf den Produktkategorie-Archivseiten (z.B. /produktkategorie/besonderes/) */
.cc-category-banner{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 300px;
	overflow: hidden;
	position: relative;
	margin-bottom: 2rem;
}
.cc-category-banner img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(.85) brightness(1.05);
}
.cc-category-banner::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(46,48,146,.08), rgba(46,48,146,.32));
	mix-blend-mode: multiply;
}
@media (max-width: 680px){
	.cc-category-banner{ height: 180px; }
}
.cc-subcat-grid{
	margin-top: 2rem;
	margin-bottom: 1.5rem;
	padding: 0;
	max-width: none;
}
.cc-shop-cat-grid{
	margin-top: 2rem;
	margin-bottom: 1.5rem;
	padding: 0;
	max-width: none;
}

/* Breite CTA-Kachel "Individuelle Anfertigung" auf der Haupt-Shopseite, verlinkt auf Kontakt */
.cc-cta-banner{
	display: block;
	position: relative;
	/* Bis 11.08.2026 lief dieses Band ueber die ganze Fensterbreite (100vw mit negativen
	   Randabstaenden). Seit oben auf der Startseite das Foto vom Geschaeft ueber die
	   ganze Breite laeuft, standen zwei Vollbreiten-Baender in Konkurrenz und der Kunde
	   hat den Balken als zu dominant gemeldet. Er sitzt jetzt in der Inhaltsbreite wie
	   die Kacheln darueber. Wer das zurueckdreht, holt sich diese Wirkung zurueck. */
	width: auto;
	margin-left: 0;
	margin-right: 0;
	margin-top: 2rem;
	margin-bottom: 2rem;
	height: 280px;
	overflow: hidden;
	text-decoration: none !important;
}
.cc-cta-banner img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(.9) brightness(.95);
	transition: transform .3s ease;
}
.cc-cta-banner:hover img{
	transform: scale(1.04);
}
.cc-cta-banner::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(46,48,146,.92) 0%, rgba(46,48,146,.65) 40%, rgba(46,48,146,.1) 75%);
}
.cc-cta-banner-overlay{
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 clamp(1.5rem, 6vw, 5rem);
	max-width: 560px;
}
.cc-cta-banner-overlay .cc-eyebrow{ color: var(--cc-gelb); margin-bottom: .7rem; }
.cc-cta-banner-overlay h3{
	color: #fff;
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin: 0 0 .6rem;
}
.cc-cta-banner-overlay p{
	color: #E4E2F0;
	margin: 0 0 1.2rem;
	font-size: 1rem;
}
.cc-cta-banner-overlay .go{
	color: var(--cc-gelb) !important;
	font-weight: 700;
	font-size: .95rem;
}
@media (max-width: 680px){
	.cc-cta-banner{ height: 340px; }
	.cc-cta-banner-overlay{ max-width: 100%; }
}

/* Kompletter, eigener Footer (ersetzt Astras nativen Footer, siehe oben display:none).
   Konzept vorab als Claude-Artifact mit Kunde abgestimmt, Freigabe 30.07.2026. Hell/Papierton
   statt navy, damit er nahtlos an den restlichen Seiteninhalt anschliesst. */
.cc-footer{
	background: var(--cc-paper);
	border-top: 1px solid var(--cc-line);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.cc-footer-main{
	max-width: 1180px;
	margin: 0 auto;
	padding: 3.4rem clamp(1.5rem, 5vw, 4rem) 2.6rem;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 2.5rem;
}
.cc-footer-brand strong{
	display: block;
	font-family: Georgia,"Times New Roman",serif;
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--cc-blau);
	margin-bottom: .9rem;
}
.cc-footer-brand a{
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .9rem;
	color: var(--cc-ink-soft);
	text-decoration: none;
	margin-bottom: .6rem;
}
.cc-footer-brand a svg{ flex-shrink: 0; color: var(--cc-blau); opacity: .6; margin-top: .15rem; }
.cc-footer-brand a:hover{ color: var(--cc-rot); }
.cc-footer-brand a:hover svg{ color: var(--cc-rot); opacity: 1; }
.cc-footer-brand .arrow{ font-weight: 700; margin-left: .1rem; }
.cc-footer-brand a:focus-visible{
	outline: none;
	color: var(--cc-rot);
	text-decoration: underline;
}

.cc-footer-col h3{
	font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .72rem;
	color: var(--cc-rot);
	font-weight: 600;
	margin: 0 0 1rem;
}
.cc-footer-col ul{ list-style: none; margin: 0; padding: 0; }
.cc-footer-col li{ margin-bottom: .55rem; }
.cc-footer-col a{
	color: var(--cc-ink-soft);
	text-decoration: none;
	font-size: .89rem;
}
.cc-footer-col a:hover{ color: var(--cc-rot); }
.cc-footer-col a:focus-visible{
	outline: none;
	color: var(--cc-rot);
	text-decoration: underline;
}

.cc-footer-bottom{
	border-top: 1px solid var(--cc-line);
}
.cc-footer-bottom-inner{
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.3rem clamp(1.5rem, 5vw, 4rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.cc-footer-bottom-inner p{
	margin: 0;
	font-size: .82rem;
	color: var(--cc-ink-soft);
}
.cc-footer-legal{ display: flex; gap: 1.4rem; }
.cc-footer-legal a{
	color: var(--cc-blau);
	text-decoration: none;
	font-size: .82rem;
}
.cc-footer-legal a:hover{ color: var(--cc-rot); }
.cc-footer-legal a:focus-visible{
	outline: none;
	color: var(--cc-rot);
	text-decoration: underline;
}

.cc-ticket-row .val a:focus-visible{
	outline: none;
	color: var(--cc-gelb) !important;
	text-decoration: underline !important;
}

@media (max-width: 860px){
	.cc-footer-main{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
	.cc-footer-main{ grid-template-columns: 1fr; }
	.cc-footer-bottom-inner{ flex-direction: column; align-items: flex-start; }
}

/* Astra stapelt den Footer-Menü-Block ab 921px, Trennlinie muss dann oben statt links sitzen */
@media (max-width: 921px){
	.site-primary-footer-wrap li{
		border-left: none;
		padding-left: 0;
		padding-right: 0;
		border-top: 1px solid var(--cc-line);
		padding-top: .5rem;
		margin-top: .5rem !important;
	}
	.site-primary-footer-wrap li:first-child{
		border-top: none;
		padding-top: 0;
		margin-top: 0 !important;
	}
}

/* Kasse: Pflichtfeld-Sternchen absichern (falls durch andere Regeln unsichtbar/unfarbig) und
   das E-Mail-Feld optisch an die uebrigen Eingabefelder angleichen. */
.wc-block-components-text-input .required,
.woocommerce-form-row .required,
abbr.required{
	color: var(--cc-rot) !important;
	text-decoration: none !important;
	border: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.wc-block-checkout__form input[type="text"],
.wc-block-checkout__form input[type="email"],
.wc-block-checkout__form input[type="tel"],
.wc-block-components-text-input input{
	border: 1px solid var(--cc-line) !important;
	border-radius: 0 !important;
	background: var(--cc-paper-raised) !important;
	font-family: -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
	box-sizing: border-box !important;
	width: 100% !important;
}
/* Per JS ergaenztes Pflichtfeld-Sternchen (siehe cc-checkout.php) */
.cc-required-mark{
	color: var(--cc-rot) !important;
	font-weight: 700;
	margin-left: .15rem;
}
/* E-Mail-Feld in der Kontaktinformationen-Sektion war schmaler/anders proportioniert als die
   Adressfelder, gleiche Box-Groessen-Logik erzwingen. */
#contact-fields input[type="email"],
.wc-block-components-address-form input[type="email"],
input#email{
	box-sizing: border-box !important;
	width: 100% !important;
}
/* Frueherer Versuch (padding-top auf den Wrapper + label margin) wieder entfernt: das Label ist
   vermutlich absolut positioniert und hat sich beim Verschieben des Inputs nicht mitbewegt,
   dadurch lag "E-Mail-Adresse" ploetzlich auf der Rahmenlinie statt sauber darueber. Die anderen
   Felder (Land/Region etc.) wurden nie angefasst und funktionieren einwandfrei, daher hier
   zurueck auf reine Input-Groesse ohne Wrapper-/Label-Eingriff. */

/* ===== Kasse: Design-Anpassung an die restliche Seite, 30.07.2026 =====
   Bewusst zurueckhaltend, keine Regmark-Spielereien wie sonst auf der Seite, bei einem
   Bezahlvorgang zaehlt Klarheit und Vertrauen mehr als Verspieltheit. */

/* "Zahlungspflichtig bestellen"-Button war blau (Block-Checkout nutzt eine eigene Button-
   Komponente, die von der bisherigen Regel nicht erfasst wurde) */
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button{
	background-color: var(--cc-rot) !important;
	border-color: var(--cc-rot) !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
}
.wc-block-components-checkout-place-order-button:hover{
	background-color: var(--cc-blau) !important;
	border-color: var(--cc-blau) !important;
}
/* "Anwenden"-Button beim Gutschein war ebenfalls blau, gleiche Ursache, noch nicht per
   DevTools verifiziert (anders als der Bestellen-Button oben), also mit Vorsicht zu geniessen */
.wc-block-components-totals-coupon__button,
button.wc-block-components-totals-coupon__button{
	background-color: var(--cc-rot) !important;
	border-color: var(--cc-rot) !important;
	color: #fff !important;
	border-radius: 0 !important;
}

/* Eyebrow-Label ueber "Kasse", per JS ergaenzt (siehe cc-checkout.php) */
.cc-checkout-eyebrow{ display: block; margin-bottom: .5rem; }

/* Schritt-Ueberschriften (Kontaktinformationen, Abholorte, Rechnungsadresse, Zahlungsoptionen)
   etwas mehr Gewicht geben statt reinem Standard-Formular-Look */
.wc-block-components-checkout-step__title{
	font-family: Georgia,"Times New Roman",serif !important;
	color: var(--cc-blau) !important;
	font-weight: 400 !important;
	border-bottom: 1px solid var(--cc-line) !important;
	padding-bottom: .5rem !important;
	margin-bottom: 1.1rem !important;
}

/* Auswahlboxen (Abholort, Zahlungsart): echte Struktur per DevTools verifiziert 30.07.2026.
   Der aeussere Wrapper, der Radio+Label UND den Beschreibungstext gemeinsam umschliesst, heisst
   .wc-block-components-radio-control-accordion-option, NICHT .wc-block-components-radio-control__option
   (das ist nur das <label> mit Radio+Text allein, daher vorher der getrennte Doppel-Kasten-Look). */
.wc-block-components-radio-control-accordion-option{
	border: 1px solid var(--cc-line) !important;
	border-radius: 0 !important;
	background: var(--cc-paper-raised) !important;
	box-shadow: 0 1px 2px rgba(30,27,22,.06) !important;
	overflow: hidden;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
label.wc-block-components-radio-control__option--checked-option-highlighted{
	border-color: var(--cc-blau) !important;
	border-radius: 0 !important;
	box-shadow: 0 0 0 1.5px var(--cc-blau) !important;
}
.wc-block-components-radio-control__option{
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Bestellübersicht-Sidebar: echter Klassenname per DevTools verifiziert 30.07.2026,
   .wp-block-woocommerce-checkout-order-summary-block (nicht wc-block-components-order-summary). */
.wp-block-woocommerce-checkout-order-summary-block{
	background: var(--cc-paper-raised) !important;
	border: 1px solid var(--cc-line) !important;
	box-shadow: 0 1px 2px rgba(30,27,22,.06), 0 8px 24px rgba(30,27,22,.08) !important;
}
.wc-block-components-totals-item__label{
	font-family: ui-monospace,SFMono-Regular,Consolas,monospace !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	font-size: .72rem !important;
	color: var(--cc-ink-soft) !important;
}
.wc-block-components-totals-item__value{
	font-weight: 600 !important;
	color: var(--cc-ink) !important;
}
/* AGB/Datenschutz-Checkbox-Fehlermeldung: eigenes Element per JS (siehe cc-checkout.php,
   die vermutete WooCommerce-Fehler-Klasse hat hier nie gegriffen, Kunde-Feedback 30.07.2026),
   gleiche Ausrufezeichen-Optik wie bei den anderen Pflichtfeld-Fehlern. */
/* AGB/Datenschutz-Checkbox: eigene Fehlerzeile mit Icon, erscheint erst nach einem Bestellversuch
   ohne Haken (siehe cc-checkout.php setupTermsCheckboxError()). Richtiggestellt 30.07.2026: das
   tatsaechliche Muster bei den anderen Pflichtfeldern ist Sternchen permanent + separate Zeile
   bei Fehler, NICHT den bestehenden Text einzufaerben (frueherer Zwischenstand war ein
   Missverstaendnis). */
.cc-terms-error{
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	color: var(--cc-rot) !important;
	font-size: .92rem;
	margin: .75rem 0 0;
}
.cc-terms-error::before{
	content: "!";
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--cc-rot);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	margin-top: .15rem;
}

/* Kategorieseite ohne Produkte, seit der Bestand auf Entwurf steht (10.08.2026).
   Bewusst dieselbe Karten-Optik wie die Kacheln, damit es nach Absicht aussieht
   und nicht nach Fehler. */
.cc-empty-cat {
	background: #fff;
	border: 1px solid var(--cc-line);
	box-shadow: 0 2px 0 rgba(35, 36, 75, .06);
	padding: 2.2rem 1.8rem;
	margin: 1.4rem 0 2.4rem;
	text-align: center;
}

.cc-empty-cat h3 {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--cc-blau);
	margin: .5rem 0 .7rem;
}

.cc-empty-cat p {
	color: var(--cc-ink-soft);
	max-width: 46ch;
	margin: 0 auto;
}

.cc-empty-cat-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	justify-content: center;
	margin-top: 1.4rem !important;
}

/* Cookie-Informationsknopf, 10.08.2026, überarbeitet nach erstem Kundenfeedback.
   Kein Zustimmungsbanner, siehe cc-cookie-hinweis.php.

   Er sitzt als Lasche am linken Rand und steckt zum größten Teil darin. Erst bei
   Hover, Tastaturfokus oder Antippen fährt er heraus. So ist er auffindbar, ohne
   auf schmalen Bildschirmen im Weg zu stehen.

   Alle Regeln zum Schließen-Knopf brauchen !important: Astra stylt jedes <button>
   als blauen Vollton-Button, das hat beim ersten Versuch das Kreuz in einen blauen
   Kasten verwandelt. */
.cc-cookie {
	position: fixed;
	left: 0;
	bottom: 22vh;
	z-index: 9999;
}

.cc-cookie-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 40px;
	height: 42px;
	padding: 0 9px 0 0;
	background: var(--cc-blau) !important;
	color: var(--cc-papier);
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	box-shadow: 2px 2px 0 rgba(35, 36, 75, .18);
	/* steckt im Rand, nur der rechte Teil schaut heraus */
	transform: translateX(-16px);
	transition: transform .18s ease, background-color .18s ease;
}

.cc-cookie-btn:hover,
.cc-cookie-btn:focus-visible,
.cc-cookie.is-open .cc-cookie-btn {
	transform: translateX(0);
	background: var(--cc-rot) !important;
	outline: none;
}

/* Der Keks nimmt die Papierfarbe, die Krümel die Farbe des Knopfes darunter,
   sonst verschwinden sie im gleichfarbigen Teig. */
.cc-cookie-icon { display: block; }
.cc-cookie-keks { fill: var(--cc-papier); }
.cc-cookie-krume { fill: var(--cc-blau); transition: fill .18s ease; }

.cc-cookie-btn:hover .cc-cookie-krume,
.cc-cookie-btn:focus-visible .cc-cookie-krume,
.cc-cookie.is-open .cc-cookie-krume { fill: var(--cc-rot); }

.cc-cookie-panel {
	position: absolute;
	left: 0;
	bottom: calc(100% + .5rem);
	width: min(22rem, calc(100vw - 1.5rem));
	background: #fff;
	border: 1px solid var(--cc-line);
	box-shadow: 0 6px 24px rgba(35, 36, 75, .16);
	padding: 1.5rem 1.4rem 1.3rem;
	text-align: left;
}

.cc-cookie-panel h3 {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--cc-blau);
	font-size: 1.2rem;
	margin: .35rem 0 .8rem;
	padding-right: 1.6rem;
}

.cc-cookie-panel p {
	color: var(--cc-ink-soft);
	font-size: .9rem;
	line-height: 1.55;
	margin: 0 0 .8rem;
}

.cc-cookie-panel p:last-child { margin-bottom: 0; }

.cc-cookie-panel .cc-cookie-fuss {
	font-size: .83rem;
	border-top: 1px solid var(--cc-line);
	padding-top: .8rem;
	margin-top: 1rem;
}

.cc-cookie-panel a { color: var(--cc-rot); }

.cc-cookie-close {
	position: absolute;
	top: .35rem;
	right: .45rem;
	width: 1.9rem;
	height: 1.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 1.45rem;
	line-height: 1;
	color: var(--cc-ink-soft) !important;
	cursor: pointer;
	padding: 0 !important;
}

.cc-cookie-close:hover,
.cc-cookie-close:focus-visible {
	background: none !important;
	color: var(--cc-rot) !important;
	outline: none;
}

@media (max-width: 600px) {
	.cc-cookie { bottom: 18vh; }
	.cc-cookie-btn { width: 36px; height: 38px; transform: translateX(-15px); }
	.cc-cookie-panel { padding: 1.3rem 1.2rem 1.1rem; }
}

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt keine Fahrt. */
@media (prefers-reduced-motion: reduce) {
	.cc-cookie-btn { transition: none; }
}

/* ============================================================================
   Ergaenzungen vom 11.08.2026, drei Kundenwuensche und ein Fehler
   ============================================================================ */

/* (1) Foto vom Geschaeft als breites Band ueber dem Hero.
   Gepflegt wird es als Beitragsbild der Startseite, Astra gibt es von sich aus an
   genau der richtigen Stelle aus, naemlich direkt nach dem Header und vor dem
   Seiteninhalt. Hier wird es nur noch aus dem zentrierten Container herausgeholt und
   auf eine vernuenftige Bandhoehe gebracht.

   Der Ausbruch laeuft ueber margin-inline mit 50vw, das ist unabhaengig davon, welche
   Innenabstaende Astras Container gerade hat, und war damit die einzige Variante, die
   nicht auf geratene Astra-Werte angewiesen ist. Das overflow-x: clip eine Ebene
   darueber faengt den Ueberhang ab, den 100vw neben einer sichtbaren Scrollbar sonst
   erzeugt. clip und nicht hidden, weil hidden zusaetzlich einen Scroll-Kontext
   aufspannt und damit klebende Elemente kaputt macht. */
.home #content{
	overflow-x: clip;
}
.home .ast-single-post-featured-section{
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	margin-bottom: 0;
	line-height: 0;
}
.home .ast-single-post-featured-section img{
	display: block;
	width: 100%;
	height: clamp(160px, 26vw, 420px);
	object-fit: cover;
	/* Etwas oberhalb der Mitte ausschneiden: dort sind die Fensterbeschriftung und der
	   Eingang, unten liegen Einkaufswagen und Gehsteig. */
	object-position: center 38%;
}

/* (2) Kategoriebild auf den Kacheln, direkt unter dem Namen.
   Einheitliches Seitenverhaeltnis, weil die Kategoriebilder gemischt 3:2 und 16:9 sind
   und die Kacheln sonst unterschiedlich hoch werden. */
.cc-swatch-bild{
	line-height: 0;
	overflow: hidden;
	border: 1px solid var(--cc-line);
}
.cc-swatch-bild img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .25s ease;
}
.cc-swatch-card--bild:hover .cc-swatch-bild img{
	transform: scale(1.03);
}
/* Die Beschreibung darf die Kachelhoehe nicht mehr allein bestimmen, sonst reissen die
   Kacheln bei unterschiedlich langen Texten auseinander. Der Weiterlink bleibt unten. */
.cc-swatch-card--bild .go{
	margin-top: auto;
}

/* (3) Suchbutton im Suchformular der 404-Seite.
   Astra baut diesen Button als reinen Symbolknopf: Text im Markup mit hidden
   ausgezeichnet, Knopf transparent und auf 45 Pixel begrenzt, darueber ein Lupen-SVG.
   Sichtbar geworden ist stattdessen ein roter Knopf mit dem abgeschnittenen Wort "Suc",
   weil Astras eigene generische button-Regel Hintergrund und Textfarbe setzt und der
   Text in 45 Pixel nicht hineinpasst. Statt an der Breite zu drehen wird der Knopf hier
   vollstaendig selbst bestimmt: neben dem Feld statt darueber, Groesse nach Inhalt,
   Lupe sichtbar, Wort weiterhin nur fuer Screenreader. */
/* Der Knopf steckt im Markup INNERHALB des label, nicht daneben. Ein Flex-Container auf
   dem Formular hat deshalb nichts gebracht, das label war dessen einziges Kind und der
   Knopf rutschte unter das Eingabefeld. Flex gehoert also auf das label selbst. */
.widget_search .search-form{
	display: block;
	position: static;
}
.widget_search .search-form > label{
	display: flex;
	gap: .6rem;
	align-items: stretch;
	position: static;
	margin: 0;
	width: 100%;
}
.widget_search .search-form .search-field,
.widget_search .search-field:focus{
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: .8rem 1rem;
	border-radius: 0;
}
.widget_search .search-form button.search-submit{
	position: static !important;
	top: auto !important;
	right: auto !important;
	max-width: none !important;
	width: auto !important;
	flex: 0 0 auto;
	padding: .7rem 1.1rem !important;
	background: var(--cc-rot) !important;
	background-color: var(--cc-rot) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.widget_search .search-form button.search-submit:hover,
.widget_search .search-form button.search-submit:focus{
	background: var(--cc-blau) !important;
	background-color: var(--cc-blau) !important;
}
/* Das Wort bleibt versteckt, wie im Markup vorgesehen. Sichtbar ist die Lupe. */
.widget_search .search-form button.search-submit span[hidden]{
	display: none !important;
}
.widget_search .search-form button.search-submit i{
	display: inline-flex;
	align-items: center;
}
.widget_search .search-form button.search-submit svg{
	width: 1.05em;
	height: 1.05em;
	fill: currentColor;
	display: block;
}

/* ============================================================================
   Uebernommen am 11.08.2026 aus dem Customizer-Feld "Zusaetzliches CSS"
   ============================================================================
   Dort lag bis heute eine zweite, aeltere Kopie dieses Stylesheets, Stand
   "30.07.2026 v14". WordPress gibt dieses Feld als <style id="wp-custom-css">
   im Kopf aus, also NACH der eingebundenen Datei. Bei gleichem Gewicht gewinnt
   damit die aeltere Fassung, und zwar lautlos. Genau daran ist am 11.08.2026 die
   neue Header-Farbe gescheitert: in der Datei stand das Logoblau, ausgeliefert
   wurde das alte Navy aus dem Customizer.

   Das Feld ist seither leer, es gilt nur noch diese Datei. Die folgenden Regeln
   standen ausschliesslich im Customizer und wurden deshalb hierher uebernommen,
   bevor er geleert wurde. Sie betreffen fast alle Astras eigenen Footer, der
   ueber .site-footer ausgeblendet und durch cc-footer-anfahrt.php ersetzt wird.
   ============================================================================ */

.site-footer, .site-primary-footer-wrap, .site-below-footer-wrap{
	background-color: var(--cc-paper) !important;
	border: none !important;
}

.site-footer a{
	color: var(--cc-blau) !important;
}

.site-footer a:hover{
	color: var(--cc-rot) !important;
}

.site-primary-footer-wrap li{
	margin: 0 !important;
}

.site-primary-footer-wrap li a.menu-link{
	padding: 0 !important;
	margin: 0 !important;
	color: var(--cc-blau) !important;
}

.site-primary-footer-wrap li:first-child{
	border-left: none;
	padding-left: 0;
}

.site-primary-footer-wrap li:last-child{
	padding-right: 0;
}

.site-primary-footer-wrap{
	padding-bottom: .6rem !important;
}

.site-below-footer-wrap{
	padding-top: 0 !important;
	padding-bottom: 1.4rem;
}

.site-below-footer-wrap, .site-below-footer-wrap *{
	color: var(--cc-ink-soft) !important;
	opacity: 1 !important;
}

/* ============================================================================
   Zwei Knoepfe, die in Astras Standardblau steckengeblieben waren
   ============================================================================
   Gemeldet am 11.08.2026: der Absendeknopf im Kontaktformular und der Knopf
   "Weiter zur Kasse" im Warenkorb waren blau statt rot.

   Ursache: Astra faerbt in seinem generierten CSS praktisch jeden Knopf mit
   #046bd2, unter anderem ueber die Selektoren "button", "input[type=submit]"
   und '[CLASS*="wc-block"] button'. Unsere Knopfregel listet aber einzelne
   Selektoren auf, und diese zwei waren nicht darunter. Sie sind damit kein
   neuer Fehler, sondern von Anfang an blau gewesen. Aufgefallen sind sie erst,
   seit der Header selbst blau ist und zwei verschiedene Blautoene sichtbar
   nebeneinander standen.

   Die Klassennamen sind belegt und nicht geraten: "wpforms-submit" steht so im
   Quelltext der Kontaktseite, "wc-block-cart__submit-button" in WooCommerces
   eigenem cart.css. Der Warenkorb wird per JavaScript aufgebaut, im HTML der
   Seite steht der Knopf gar nicht.

   Bewusst NICHT pauschal '[CLASS*="wc-block"] button' ueberschrieben: darunter
   fallen auch die Plus- und Minus-Knoepfe der Menge, der Muelleimer und der
   Aufklapper fuer Gutscheine. Die sollen nicht rot werden. Taucht ein weiterer
   blauer Knopf auf, ist #046bd2 das Erkennungsmerkmal, und er wird hier
   einzeln ergaenzt.
   ============================================================================ */
button.wpforms-submit,
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
button.wc-block-cart__submit-button{
	background: var(--cc-rot) !important;
	background-color: var(--cc-rot) !important;
	background-image: none !important;
	border-color: var(--cc-rot) !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
}
/* Der Hover braucht die Kurzform "background", nicht nur "background-color".
   WPForms setzt beim Ueberfahren naemlich
   `background: linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,.2)), var(...)`,
   legt also zusaetzlich einen halbtransparenten schwarzen Verlauf als background-image
   darueber. Eine Regel, die nur background-color setzt, gewinnt zwar die Farbe, der
   Verlauf bleibt aber liegen und dunkelt sie ab. Genau deshalb sah der Knopf beim
   Ueberfahren nach nichts aus. Die Kurzform setzt background-image implizit auf none,
   zur Sicherheit steht es zusaetzlich da. */
button.wpforms-submit:hover,
button.wpforms-submit:focus,
button.wpforms-submit:active,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-cart__submit-button:active{
	background: var(--cc-blau) !important;
	background-color: var(--cc-blau) !important;
	background-image: none !important;
	border-color: var(--cc-blau) !important;
	color: #fff !important;
}

/* ============================================================================
   Preisdarstellung, ergaenzt 11.08.2026 zu cc-preise.php
   ============================================================================ */

/* Das "ab" vor dem Preis bleibt bewusst unauffaellig: es ist eine Einordnung,
   nicht der Preis selbst. */
.cc-preis-ab{
	font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cc-ink-soft);
}
.cc-preis-anfrage{
	font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
	font-size: .92em;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cc-rot);
}

/* Kasten fuer Produkte ohne Preis, ersetzt den fehlenden Bestellknopf. */
.cc-anfrage-kasten{
	background: var(--cc-paper-raised);
	border: 1px solid var(--cc-line);
	border-top: 3px solid var(--cc-rot);
	padding: 1.4rem 1.5rem;
	margin: 1.5rem 0;
}
.cc-anfrage-kasten p{
	margin: 0 0 .8rem;
	font-size: .95rem;
}
.cc-anfrage-kasten .cc-btn{
	margin-top: .3rem;
}