/* ============================================================================
ARMSTARK · Serviceanfrage – Stylesheet der Extension armstark_kundenbereich
----------------------------------------------------------------------------
Grundlage : serviceanfrage-overrides.css der Vorlage (ohne deren erste,
versehentliche TypoScript-Zeile) sowie der verbindliche
Prototyp armstark-serviceanfrage-prototyp.html.
Unterschied zur Vorlage: Die Overrides mussten ein fremdes Theme OHNE
Template-Änderung biegen (Selektoren wie .page__wrap,
.input-background, form[id^="…"], viele :has()-Notlösungen).
Diese Extension bringt ihre EIGENEN Fluid-Templates mit, deshalb
hier saubere, sprechende Klassennamen (deutsch, herstellerneutral)
statt Fremd-Theme-Haken.
Tokens : 1:1 aus dem Prototyp übernommen – KEINE eigenen Hexwerte, auch
nicht als Rückfallwert.
Geltung : Alle Regeln sind unter .serviceanfrage gekapselt, damit sie das
übrige TYPO3-Theme nicht berühren. Der :root-Block mit den Tokens
ist bewusst global (wie im Prototyp). Sollte das Wirts-Theme
eigene gleichnamige Variablen führen (z. B. --red), den :root-Block
auf .serviceanfrage umziehen – die Komponenten lesen alle Tokens
ohnehin nur innerhalb von .serviceanfrage.
============================================================================ */
/* ============================================================================
§1 DESIGN-TOKENS (Kapitel 3, unverändert aus dem Prototyp)
============================================================================ */
:root{
/* --- Farbe (CI, unverändert) --- */
--red:#BC2222;
--red-dark:#9E1C1C;
--red-tint:rgba(188,34,34,.06);
--grey:#575756; /* Fließtext · 7,2:1 auf Weiß */
--ink:#1A1A1A; /* Überschriften, Eingabetext */
--grey-mid:#DADAD9; /* NUR dekorative Trenner · 1,4:1 */
--border-ui:#878786; /* Rahmen interaktiver Elemente · 3,6:1 → WCAG 1.4.11 */
--grey-light:#F2F2F2; /* Flächen */
--white:#fff;
--ok:#1B7C45; --ok-bg:#E8F3EC;
--warn-bg:#FBF3E2; --warn-br:#E4CA95; --warn-tx:#6B4A00;
--info-bg:#EEF3F7; --info-br:#C9D8E4; --info-tx:#2A4A63; /* 7,0:1 auf --info-bg */
/* --- Abstands-Skala (4er-Basis) --- */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:96px;
/* --- Formular-Rhythmus (abgeleitet, Verhältnis 1:4:8, Kapitel 3.3) --- */
/* 23.09.2026 nach der Schriftvergrößerung nachgezogen: bei 13,5 px Frage
trugen 6px und 24px; bei 20 px klebt die Frage am Feld, und der Sprung von
einer Gruppe zur nächsten wird zu leise. Entscheidend ist der ABSTAND der
Abstände - innerhalb der Gruppe muss deutlich enger sein als dazwischen.
24.09.2026, Rückschritt auf 18 px: beide Werte bleiben. Sie gehören zu
einer lauten Frage, nicht zu genau 20 px, und 18 px liegt viel näher an
20 px als an den 13,5 px, aus denen 6px/24px stammten. In Vielfachen der
Schrift gerechnet ändert sich kaum etwas: 10px sind bei 20 px 0,50 em und
bei 18 px 0,56 em - weiterhin klar enger als die 32px zum nächsten Feld
(Verhältnis 1:3,2). Ein Zurückdrehen auf 6px/24px wäre der alte Zustand
einer viel kleineren Schrift und würde die Trennung wieder einebnen. */
--ff-label-gap:10px; /* Frage → Feld (war 6px bei 13,5 px Schrift) */
--ff-help-gap:6px; /* Feld → Hilfetext / Fehler - bleibt eng am Feld */
--ff-field-gap:var(--s6); /* Feld → Feld = 32px (war 24px) */
--ff-group-gap:var(--s7); /* Gruppe → Gruppe = 48px */
--ff-legend-gap:var(--s4); /* Legende → erstes Feld = 16px */
--ff-control:52px; /* Mindesthöhe aller Bedienelemente */
/* --- Radius / Schatten / Maße --- */
--radius:8px; --radius-lg:14px; --pill:100px;
--shadow-s:0 2px 8px rgba(26,26,26,.06);
--shadow-m:0 8px 30px rgba(26,26,26,.10);
--shadow-l:0 20px 60px rgba(26,26,26,.18);
--max:1240px;
--max-form:640px; /* max. Zeilenlänge im Formular */
/* Das Kachelraster nimmt die Spalte des Themes, statt sich selbst zu begrenzen.
Eine feste Breite war hier der Fehler: die Theme-Spalte ist je nach
Raster-Einstellung des Containers 1240px oder 1360px breit, das Raster stand mit
960px immer schmaler darin und klebte links - unabhängig davon, ob die Spalte
selbst zentriert war. Gemessen am 23.09.2026 an /kundenservice/, wo das
bestehende Formular die volle Spaltenbreite nutzt. */
--max-tiles:100%;
/* --- Typografie --- */
--font:"Helvetica Neue",Helvetica,Arial,sans-serif;
--fs-h1:clamp(26px,3.4vw,34px);
--fs-h2:21px;
--fs-h3:22.5px; /* H3-Stufe der Website – Maß der Abschnitts-Legenden */
--fs-legend:12.5px;
/* 23.09.2026 Meindl: die Frage war mit 13,5 px kleiner als der Text, den der
Kunde hineinschreibt (16 px), und kleiner als die Kacheltitel. Deshalb auf
20 px gehoben - deutlich lauter, aber unter der Abschnittsüberschrift
(22,5 px), damit die Rangfolge Überschrift > Frage > Eingabe erhalten
bleibt. 24.09.2026 Meindl dazu: "könnte eine Spur kleiner sein" - jetzt
18 px. Das ist die Stufe dazwischen und hält beide Grenzen ein: noch
deutlich über der Eingabe (16 px), noch unter der Abschnittsüberschrift.
Gilt für alle vier Fragestellen: Feldbeschriftung, Theme-Label (Ruhe und
Fokus) sowie die Legenden der Kachel- und Chip-Gruppen. Keine eigene Stufe
für Mobil - die Größen stehen in keiner Mediaabfrage, Telefon und Rechner
sind gleich. */
--fs-label:18px;
--fs-input:16px; /* nie kleiner – iOS zoomt sonst beim Fokus */
--fs-body:16px;
--fs-help:13px;
--fs-micro:12.5px;
/* --- Bewegung --- */
--dur-fast:120ms; --dur:180ms; --dur-slow:320ms;
--ease:cubic-bezier(.2,.7,.3,1);
}
/* ============================================================================
§2 GRUNDLAGEN (Kapitel 8 – Fokus, Bewegung)
============================================================================ */
.serviceanfrage,
.serviceanfrage *,
.serviceanfrage *::before,
.serviceanfrage *::after{
box-sizing:border-box;
}
.serviceanfrage{
font-family:var(--font);
color:var(--grey);
font-size:var(--fs-body);
line-height:1.6;
}
/* Sichtbarer Fokus-Ring auf jedem bedienbaren Element (Kapitel 8.2). */
.serviceanfrage :focus-visible{
outline:3px solid var(--ink);
outline-offset:2px;
border-radius:4px;
}
/* Bewegung abschalten, wenn der Nutzer das wünscht (Kapitel 8.6). */
@media (prefers-reduced-motion:reduce){
.serviceanfrage *,
.serviceanfrage *::before,
.serviceanfrage *::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
}
/* Nur für Screenreader – sichtbar ausgeblendet, aber vorlesbar. */
.serviceanfrage .nur-sr{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
white-space:nowrap;border:0;
}
/* ============================================================================
§3 FORMULARSPALTE (Kapitel 5.1 – begrenzte Zeilenlänge)
Feldbreite ist das Signal, wie viel Eingabe erwartet wird. Deshalb hart auf
640px begrenzt, unabhängig von der Fensterbreite.
============================================================================ */
.serviceanfrage__spalte{
max-width:var(--max-form);
}
/* ============================================================================
§4 RHYTHMUS / FELDGRUPPE (Kapitel 3.3 – Nähe-Prinzip 1:4:8)
Der Abstand transportiert die Zusammengehörigkeit:
Label → Feld 10px (--ff-label-gap)
Feld → Hilfetext 6px (--ff-help-gap)
Feld → Feld 32px (--ff-field-gap)
Gruppe→ Gruppe 48px (--ff-group-gap)
Der Feld-zu-Feld-Abstand kommt über gap am Spaltencontainer, nicht über
margin an den Feldern – so trifft er auch das letzte Feld nicht.
============================================================================ */
.serviceanfrage__spalte{
display:flex;
flex-direction:column;
gap:var(--ff-field-gap);
}
.serviceanfrage .feldgruppe{
display:flex;
flex-direction:column;
margin:0;
/* min-width:0 hebt die Browser-Vorgabe min-width:min-content am fieldset
auf. Ohne sie wurde das fieldset so breit wie sein breitester Inhalt:
gemessen 25.09.2026 bei 375px mit drei Chips (Lieferung/Einbau) 603px
statt 306px, der dritte Knopf lag außerhalb des Bildschirms. */
min-width:0;
}
.serviceanfrage .feldgruppe__label{
order:-1; /* Label immer vor dem Feld */
display:block;
font-size:var(--fs-label);
font-weight:700;
line-height:1.35;
color:var(--ink);
margin:0 0 var(--ff-label-gap);
white-space:normal; /* lange Fragen dürfen umbrechen */
}
/* Pflichtkennzeichen und "(optional)" – (optional) ist Nebeninfo, nicht fett. */
.serviceanfrage .feldgruppe__pflicht{
color:var(--red);
font-weight:700;
}
.serviceanfrage .feldgruppe__optional{
font-weight:400;
color:var(--grey);
}
.serviceanfrage .feldgruppe__hilfe{
margin:var(--ff-help-gap) 0 0;
font-size:var(--fs-help);
line-height:1.45;
color:var(--grey);
}
/* Fehlertext dicht am Feld, rot und fett. */
.serviceanfrage .feldgruppe__fehler{
margin:var(--ff-help-gap) 0 0;
font-size:var(--fs-help);
font-weight:700;
line-height:1.45;
color:var(--red);
list-style:none;
padding:0;
}
/* ============================================================================
§5 EINGABEFELDER (Kapitel 5.2 / 5.3)
Rahmen bewusst --border-ui (3,6:1) und nicht --grey-mid (1,4:1): ein
Control-Rahmen muss WCAG 1.4.11 erfüllen.
============================================================================ */
.serviceanfrage .eingabefeld,
.serviceanfrage input[type="text"],
.serviceanfrage input[type="email"],
.serviceanfrage input[type="tel"],
.serviceanfrage input[type="number"],
.serviceanfrage input[type="date"],
.serviceanfrage textarea,
.serviceanfrage select{
width:100%;
font:inherit;
font-size:var(--fs-input);
line-height:1.4;
color:var(--ink);
background:var(--white);
border:2px solid var(--border-ui);
border-radius:var(--radius);
padding:14px 15px;
min-height:var(--ff-control);
box-shadow:none;
transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.serviceanfrage textarea{
min-height:112px; /* signalisiert: mehrere Sätze erwartet */
resize:vertical; /* nicht auto-grow – verhindert Sprünge beim Tippen */
line-height:1.55;
}
.serviceanfrage .eingabefeld:hover,
.serviceanfrage input:hover,
.serviceanfrage textarea:hover,
.serviceanfrage select:hover{
border-color:var(--ink);
}
.serviceanfrage .eingabefeld:focus,
.serviceanfrage input:focus,
.serviceanfrage textarea:focus,
.serviceanfrage select:focus{
outline:none;
border-color:var(--ink);
box-shadow:0 0 0 3px rgba(87,87,86,.18);
}
/* Fehlerzustand – sowohl über aria-invalid als auch über die Zustandsklasse. */
.serviceanfrage [aria-invalid="true"],
.serviceanfrage .feldgruppe--fehler .eingabefeld,
.serviceanfrage .feldgruppe--fehler input,
.serviceanfrage .feldgruppe--fehler textarea,
.serviceanfrage .feldgruppe--fehler select{
border-color:var(--red);
background:rgba(188,34,34,.04);
}
/* Auswahlfeld: eigener Pfeil statt System-Widget (Kapitel 5.2). */
.serviceanfrage select,
.serviceanfrage .eingabefeld--auswahl{
appearance:none;
-webkit-appearance:none;
padding-right:44px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
}
/* PLZ schmaler als Ort – Feldbreite als Erwartungssignal (Kapitel 5.2). */
.serviceanfrage .eingabefeld--plz{
max-width:180px;
}
/* ============================================================================
§6 ABSCHNITT (fieldset/legend mit Nummernkreis, Kapitel 5.1)
Gruppen fassen zusammengehörige Felder. Abstand Gruppe→Gruppe = 48px.
============================================================================ */
.serviceanfrage .abschnitt{
border:0;
margin:0 0 var(--ff-group-gap);
padding:0;
min-width:0; /* Firefox: fieldset schrumpft sonst nicht */
}
.serviceanfrage .abschnitt:last-of-type{
margin-bottom:0;
}
.serviceanfrage .abschnitt__legende{
display:flex;
align-items:center;
gap:var(--s2);
width:100%;
padding:0 0 var(--s3);
margin:0 0 var(--ff-legend-gap);
font-size:var(--fs-legend);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--grey);
border-bottom:1px solid var(--grey-mid);
}
/* Nummernkreis vor der Legende. */
.serviceanfrage .abschnitt__nummer{
flex:none;
width:20px;height:20px;
border-radius:50%;
background:var(--ink);
color:var(--white);
display:grid;place-items:center;
font-size:11px;
letter-spacing:0;
}
/* Der abschnittsinterne Feldrhythmus wie in der Spalte. */
.serviceanfrage .abschnitt > .feldgruppe + .feldgruppe{
margin-top:var(--ff-field-gap);
}
/* ============================================================================
§7 CHIPS statt Auswahlfeld (Kapitel 5.4)
Ersetzt jedes Auswahlfeld mit wenigen Optionen und jede Ja/Nein-Frage durch
echte, angetippte Radio-/Checkbox-Inputs. Das Input wird über opacity:0
versteckt – NICHT display:none, sonst ist es nicht fokussierbar (Kapitel 8.3).
Der sichtbare Fokus liegt am Chip-Label, nicht am unsichtbaren Input.
============================================================================ */
/* Gleich breite Chips je Frage.
War: display:flex mit flex-wrap. Jeder Chip wuchs mit seinem Text, also
stand in „Ist das Gerät noch nutzbar?" ein 60px schmales „Ja" neben einem
180px breiten „Nein, steht still" – eine unruhige Reihe mit lauter
verschiedenen Kanten.
Ist: ein Raster mit gleich breiten Spalten (1fr), Text mittig im Knopf.
Entscheidung Schultheiß/Salamon vom 24.09.2026: „bei worum geht die
chips__option gleich breit und innerhalb der button centriert".
Gleich breit bezogen auf die GRUPPE, nicht auf das ganze Formular: die acht
Chip-Gruppen haben sehr verschiedene Beschriftungen (längste je Gruppe
gemessen am 24.09.2026 aus der Konfiguration: Kontaktkanal 8 Zeichen,
Gerät-nutzbar 17, Aufstellort 19, Zubehörbereiche 21, Zeitplan 22,
Rechnungsthema 22, Lieferthema 31, Montage 64). Eine formularweit gleiche
Breite müsste sich am längsten Text überhaupt orientieren und würde aus
„Ja" einen halbseitigen Knopf machen. Je Frage eine ruhige Reihe ist das,
was gemeint war.
Warum repeat(auto-fit, minmax(22ch, 1fr)) und keine feste width: die Zahl
der Spalten ergibt sich aus dem Platz, nicht aus der Zahl der Optionen. Auf
dem Telefon fällt die Reihe von selbst auf eine Spalte zurück – gleich breit
heißt ausdrücklich nicht „alle in eine Zeile quetschen". Die 22ch sind die
Untergrenze einer Spalte; 1fr sorgt dafür, dass alle tatsächlich belegten
Spalten exakt gleich breit werden.
Warum max-width:var(--max-form): ohne Begrenzung füllt das Raster die ganze
Theme-Spalte (gemessen bis 1360px), und drei Optionen würden zu drei
448px-Knöpfen. Mit den 640px der Formular-Zeilenlänge ergeben sich drei
Spalten zu rund 208px – breit genug für 17 bis 22 Zeichen in einer Zeile.
Offen: „Würde es gerne selbst einbauen, benötige aber telefonische Hilfe"
(64 Zeichen, Liste montage) passt in 208px nicht in eine Zeile und läuft auf
rund vier Zeilen; das Raster bleibt gleichmäßig, aber die ganze Reihe wird
entsprechend hoch. Das ist eine Textlänge, keine Gestaltungsfrage. */
.serviceanfrage .chips{
display:grid;
/* min(22ch, 100%): das Spalten-Minimum wird nie breiter als der Container. */
grid-template-columns:repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
gap:var(--s2);
max-width:var(--max-form);
border:0;
margin:0;
padding:0;
}
.serviceanfrage .chips__option{
/* flex statt inline-flex: als Raster-Element füllt der Chip seine Spalte,
die Breite kommt jetzt von der Spalte und nicht mehr vom Text.
justify-content/text-align zentrieren die Beschriftung im Knopf – auch
dann noch, wenn sie über zwei Zeilen läuft. */
display:flex;
align-items:center;
justify-content:center;
text-align:center;
gap:var(--s2);
cursor:pointer;
min-height:48px; /* Touch-Ziel ≥ 44px (Kapitel 8.5) */
padding:11px 16px;
margin:0;
border:2px solid var(--border-ui);
border-radius:var(--pill);
background:var(--white);
color:var(--ink);
font-size:15px;
font-weight:700;
line-height:1.2;
transition:border-color var(--dur-fast), background var(--dur-fast),
color var(--dur-fast);
}
.serviceanfrage .chips__option:hover{
border-color:var(--ink);
}
.serviceanfrage .chips__eingabe{
position:absolute;
opacity:0; /* versteckt, aber fokussierbar */
width:1px;height:1px;
margin:0;
pointer-events:none;
}
.serviceanfrage .chips__option:has(.chips__eingabe:checked){
border-color:var(--red);
background:var(--red);
color:var(--white);
}
.serviceanfrage .chips__option:has(.chips__eingabe:focus-visible){
outline:3px solid var(--ink);
outline-offset:2px;
}
/* ============================================================================
§8 ANLIEGEN-KACHELN (Kapitel 4 – Kachelauswahl)
----------------------------------------------------------------------------
Raster 3 / 2 / 1 Spalten, Umbruchpunkte 901px und 521px; unter 521px liegt
die Kachel waagerecht (Bild/Icon links, Text rechts).
BILDKONZEPT (ausdrücklicher Wunsch des Auftraggebers):
Jede Kachel trägt ein Hintergrundbild; das Icon bleibt Zweitsignal. Das Bild
wird je Anliegen über die Custom-Property --anliegen-bild gesetzt – inline
vom Partial AnliegenKacheln.html aus der Konfiguration (JSON), NICHT im
Stylesheet (siehe Kommentar am Ende dieses Abschnitts).
RÜCKFALL OHNE BILD – so ist es gebaut, damit "nichts kaputt" aussieht:
Der Bildbereich .anliegen-kachel__bild hat als GRUNDFLÄCHE --grey-light und
legt das Bild NUR als background-image darüber. Fehlt die Bilddatei (404) oder
ist --anliegen-bild nicht gesetzt, bleibt schlicht die graue Fläche stehen –
also genau die bisherige Icon-Optik. Der Titeltext steht IMMER auf der weißen
Kartenfläche darunter (dunkle Schrift), nie über dem Bild. Dadurch ist der
Kontrast in JEDEM Fall erfüllt (Kapitel 8.1), ganz ohne zu wissen, ob ein
Bild geladen wurde. Das Icon sitzt in einem hellen Chip mit Schatten und ist
sowohl auf Grau als auch auf jedem Foto lesbar.
Bild austauschen = Datei ablegen UND ihren Pfad in der Konfiguration (JSON)
eintragen; das reine Ablegen genügt nicht mehr (Namenskonvention siehe
Resources/Public/Images/README.md).
============================================================================ */
.serviceanfrage .anliegen-auswahl{
max-width:var(--max-tiles);
border:0;
/* LINKSBÜNDIG, nicht zentriert (gemessen 22.09.2026 an /ausstellungen/):
Die Website setzt ihren Inhalt in eine Spalte von 1360px, die bei x=186
beginnt - Überschrift, Inhalt und Fußnavigation fluchten alle dort.
Ein zentrierter Block fällt aus dieser Ordnung heraus. */
margin:0;
padding:0;
}
.serviceanfrage .anliegen-auswahl__legende{
display:block;
width:100%;
padding:0;
margin:0 0 var(--s4);
font-size:var(--fs-legend);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--grey);
}
/* Hinweis "Bitte wählen Sie …" VOR das Raster (Kapitel 4.1). */
.serviceanfrage .anliegen-auswahl__hinweis{
margin:0 0 var(--s5);
font-size:16px;
color:var(--grey);
}
.serviceanfrage .anliegen-auswahl__raster{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--s4);
/* Breitenbegrenzung nach Kapitel 4.1 der Spezifikation: 1020px, also rund
330px je Kachel. Ohne sie zieht das Raster über die volle Zeilenbreite -
gemessen 22.09.2026 waren es 453px je Kachel, deutlich zu groß.
margin-inline:auto zentriert das Raster in der Spalte des Themes; ohne das
klebt es links und rechts bleibt ein breiter Rest leer. */
max-width:var(--max-tiles);
}
.serviceanfrage .anliegen-kachel{
position:relative;
display:flex;
flex-direction:column;
margin:0;
cursor:pointer;
background:var(--white);
border:2px solid var(--border-ui);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-s);
overflow:hidden;
transition:border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease),
background var(--dur) var(--ease);
}
.serviceanfrage .anliegen-kachel:hover{
border-color:var(--ink);
box-shadow:var(--shadow-m);
transform:translateY(-2px);
}
/* Radio versteckt, aber fokussierbar (Kapitel 8.3). */
.serviceanfrage .anliegen-kachel__eingabe{
position:absolute;
opacity:0;
width:1px;height:1px;
margin:0;
pointer-events:none;
}
/* Bildbereich: graue Grundfläche + optionales Hintergrundbild darüber. */
.serviceanfrage .anliegen-kachel__bild{
position:relative;
/* 2:1 statt 16:10 - bei 240px Kachelbreite sind das 120px Bildhöhe.
Zusammen mit dem Textteil landet die Kachel bei rund 220px, dem Format
der Produktkacheln (Wunsch Schultheiß 22.09.2026). */
aspect-ratio:2 / 1;
background-color:var(--grey-light);
background-image:var(--anliegen-bild, none);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
/* Kein Innenabstand und keine Ausrichtung mehr: der Bildbereich hatte genau
ein Kind, das Symbol, und das ist seit dem 24.09.2026 weg. Die Höhe hängt
am aspect-ratio, nicht am Inhalt – der Bereich bleibt also unverändert. */
}
/* Abdunklung nach unten, nur noch als Hauch (.2 statt .45). Auf dem Bild steht
kein Text – Titel und Beschreibung sitzen darunter im weißen Kartenteil –,
die starke Abdunklung war ein Rest eines früheren Entwurfs und hat die Fotos
am unteren Rand nur vermatscht. Der kleine Rest bleibt als Abschluss der
Bildfläche zur Karte hin. Die ursprüngliche Begründung – der weiße
Icon-Chip verliert auf sehr hellen Fotos die Kante (Kapitel 8.1) – trägt
seit dem 24.09.2026 nicht mehr, weil es keinen Icon-Chip mehr gibt. */
.serviceanfrage .anliegen-kachel__bild::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,0) 62%);
pointer-events:none;
}
/* Das Symbol auf der Anliegen-Kachel ist am 24.09.2026 entfallen (Schultheiß
und Salamon: „Diese Kachel-Icons generell … die müssen raus für alle acht.
Dann ist es auch einheitlich“).
War: heller Chip 44x44px mit rotem Symbol, im gewählten Zustand rot mit
weißem Symbol – als Zweitsignal neben dem Foto.
Ist: keine Gestaltung mehr an dieser Stelle. Das Ausblenden steht gesammelt
im Block „KEINE SYMBOLE AUF DEN KACHELN“ am Dateiende, zusammen mit den
Produktkacheln – ein Ort, eine Begründung.
Warum gelöscht statt überschrieben: eine Regel, die nichts mehr bewirkt,
liest sich beim nächsten Mal wie eine, die noch etwas bewirkt. */
.serviceanfrage .anliegen-kachel__inhalt{
padding:var(--s4) var(--s5) var(--s5);
}
.serviceanfrage .anliegen-kachel__titel{
display:block;
font-size:17px;
font-weight:700;
line-height:1.25;
color:var(--ink);
margin:0 0 var(--s2);
}
.serviceanfrage .anliegen-kachel__text{
display:block;
font-size:14px;
line-height:1.45;
color:var(--grey);
}
/* Gewählt: roter Rahmen, roter Anriss, Schatten.
War zusätzlich: der Icon-Chip wurde rot mit weißem Symbol. Diese Regel ist
am 24.09.2026 mit dem Symbol entfallen – sie hätte auf ein ausgeblendetes
Element gezeigt. Die Auswahl bleibt an Rahmen, Fläche und Schatten
erkennbar, genau wie bei den Produktkacheln. */
.serviceanfrage .anliegen-kachel:has(.anliegen-kachel__eingabe:checked){
border-color:var(--red);
background:var(--red-tint);
box-shadow:var(--shadow-m);
}
/* Tastaturfokus sichtbar an der Kachel, nicht am versteckten Input. */
.serviceanfrage .anliegen-kachel:has(.anliegen-kachel__eingabe:focus-visible){
outline:3px solid var(--ink);
outline-offset:2px;
}
/* ---- Kein Bildpfad im Stylesheet mehr -----------------------------------
Die Custom-Property --anliegen-bild wird vom Partial AnliegenKacheln.html
inline am Kachel-Element gesetzt, gespeist aus der Konfiguration (JSON).
Das Stylesheet kennt bewusst KEINE einzelne Kachel mehr: ein neues Anliegen
entsteht allein durch einen Eintrag in der Konfiguration, ohne CSS-Änderung.
Fehlt der Pfad oder die Datei, greift oben der Rückfall auf die graue
Grundfläche in .anliegen-kachel__bild. Seit dem Wegfall der Symbole am
24.09.2026 ist das eine leere graue Fläche und keine Icon-Optik mehr –
ein fehlendes Bild fällt damit stärker auf als vorher. */
/* ============================================================================
§9 PRODUKT-KACHELN (Produktbild statt reinem Piktogramm)
Gleiche Rückfall-Logik wie bei den Anliegen: graue Grundfläche +
--produkt-bild darüber; fehlt das Bild, bleibt seit dem Wegfall der Symbole
(24.09.2026) die leere graue Fläche, nicht mehr die Icon-Optik. Kompakter,
Raster 4 / 3 / 2 Spalten. Auswahl über verstecktes Radio/Checkbox.
============================================================================ */
.serviceanfrage .produkt-auswahl{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:var(--s3);
border:0;
margin:0;
padding:0;
}
.serviceanfrage .produkt-kachel{
position:relative;
display:flex;
flex-direction:column;
margin:0;
cursor:pointer;
background:var(--white);
border:2px solid var(--border-ui);
border-radius:var(--radius);
box-shadow:var(--shadow-s);
overflow:hidden;
transition:border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.serviceanfrage .produkt-kachel:hover{
border-color:var(--ink);
box-shadow:var(--shadow-m);
transform:translateY(-2px);
}
.serviceanfrage .produkt-kachel__eingabe{
position:absolute;
opacity:0;
width:1px;height:1px;
margin:0;
pointer-events:none;
}
.serviceanfrage .produkt-kachel__bild{
position:relative;
aspect-ratio:4 / 3;
background-color:var(--grey-light);
background-image:var(--produkt-bild, none);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
display:grid;
place-items:center;
}
.serviceanfrage .produkt-kachel__bild::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,0) 60%);
pointer-events:none;
}
.serviceanfrage .produkt-kachel__icon{
position:relative;
z-index:1;
width:40px;height:40px;
border-radius:10px;
background:var(--white);
color:var(--red);
display:grid;
place-items:center;
box-shadow:var(--shadow-s);
}
.serviceanfrage .produkt-kachel__icon svg{
width:24px;height:24px;
}
.serviceanfrage .produkt-kachel__titel{
display:block;
padding:var(--s3);
text-align:center;
font-size:13px;
font-weight:700;
line-height:1.3;
color:var(--ink);
}
.serviceanfrage .produkt-kachel:has(.produkt-kachel__eingabe:checked){
border-color:var(--red);
background:var(--red-tint);
box-shadow:var(--shadow-m);
}
.serviceanfrage .produkt-kachel:has(.produkt-kachel__eingabe:checked) .produkt-kachel__icon{
background:var(--red);
color:var(--white);
}
.serviceanfrage .produkt-kachel:has(.produkt-kachel__eingabe:focus-visible){
outline:3px solid var(--ink);
outline-offset:2px;
}
/* ---- Kein Produktbildpfad im Stylesheet mehr ----------------------------
Wie bei den Anliegen: die Custom-Property --produkt-bild wird vom Partial
ProduktKacheln.html inline am Kachel-Element gesetzt, gespeist aus der
Konfiguration (JSON). Das Stylesheet kennt bewusst KEINE einzelne Kachel
mehr. Fehlt der Pfad oder die Datei, bleibt oben die graue Grundfläche in
.produkt-kachel__bild stehen (Icon-Optik). */
/* ============================================================================
§10 DATEI-ABLAGE (mehrere Dateien, Kapitel 5.7)
Das liegt in einer gestrichelten Drop-Zone.
============================================================================ */
.serviceanfrage .datei-ablage{
border:2px dashed var(--border-ui);
border-radius:var(--radius);
background:var(--grey-light);
padding:var(--s4);
transition:border-color var(--dur-fast), background var(--dur-fast);
}
.serviceanfrage .datei-ablage:hover,
.serviceanfrage .datei-ablage:focus-within{
border-color:var(--red);
background:var(--red-tint);
}
.serviceanfrage .datei-ablage__eingabe{
font-size:14.5px;
color:var(--grey);
border:0;
background:none;
padding:0;
min-height:0;
width:100%;
}
.serviceanfrage .datei-ablage__eingabe::file-selector-button{
font:inherit;
font-weight:700;
color:var(--ink);
background:var(--white);
border:2px solid var(--border-ui);
border-radius:var(--pill);
padding:10px 18px;
min-height:44px;
margin-right:var(--s3);
cursor:pointer;
transition:border-color var(--dur-fast), color var(--dur-fast);
}
.serviceanfrage .datei-ablage__eingabe::file-selector-button:hover{
border-color:var(--red);
color:var(--red);
}
.serviceanfrage .datei-ablage__hinweis{
margin:var(--s2) 0 0;
font-size:var(--fs-help);
color:var(--grey);
}
/* ============================================================================
§11 HINWEISBOXEN (warn / info / ok, Kapitel 5.8)
Symbol als Maske in currentColor, damit es die Textfarbe der Box übernimmt.
============================================================================ */
.serviceanfrage .hinweisbox{
display:flex;
gap:var(--s3);
align-items:flex-start;
border-radius:var(--radius);
padding:var(--s3) var(--s4);
font-size:14px;
line-height:1.5;
margin:0 0 var(--s5);
}
.serviceanfrage .hinweisbox p{ margin:0; }
.serviceanfrage .hinweisbox p + p{ margin-top:var(--s2); }
.serviceanfrage .hinweisbox b{ color:inherit; }
.serviceanfrage .hinweisbox--warn{
background:var(--warn-bg);
border:1px solid var(--warn-br);
color:var(--warn-tx);
}
.serviceanfrage .hinweisbox--info{
background:var(--info-bg);
border:1px solid var(--info-br);
color:var(--info-tx);
}
.serviceanfrage .hinweisbox--ok{
background:var(--ok-bg);
border:1px solid #BEDDCA;
color:#155F35;
}
.serviceanfrage .hinweisbox__symbol{
flex:none;
width:20px;height:20px;
margin-top:2px;
color:inherit;
}
.serviceanfrage .hinweisbox__symbol svg{
width:20px;height:20px;
}
/* ============================================================================
§11a VERWEIS-KNOPF (abgesetzter Weg nach draußen, mitten im Formular)
----------------------------------------------------------------------------
Der Verweis auf den Zubehörshop stand bis zum 24.09.2026 als Hinweisbox ganz
oben über dem Formular und wurde übersehen. Eine Hinweisbox ist auch die
falsche Form: ihre Farben (--info-*) sagen „Randbemerkung", hier soll aber
ein Weg angeboten werden, den viele nehmen sollen. Deshalb eine eigene
Fläche im Fluss – Rot-Anriss links, zarte Rot-Tönung als Hintergrund – und
darunter ein echter Knopf statt eines unterstrichenen Wortes.
Farben ausschließlich aus §1: --red, --red-dark, --red-tint, --ink, --white.
============================================================================ */
.serviceanfrage .verweis-knopf{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:var(--s4);
max-width:var(--max-form);
margin:0;
padding:var(--s5);
background:var(--red-tint);
border-left:4px solid var(--red);
border-radius:var(--radius);
}
.serviceanfrage .verweis-knopf__text{
margin:0;
font-size:var(--fs-body);
line-height:1.5;
color:var(--ink);
}
/* Der Knopf erbt Form und Maße von .knopf (§13) – damit sieht er aus wie die
Knöpfe der Aktionsleiste und nicht wie ein zweites, eigenes Bedienelement.
Kein order/flex wie bei --primär: der steht in einer Leiste, dieser nicht. */
.serviceanfrage .knopf--verweis{
max-width:100%;
background:var(--red);
color:var(--white);
text-decoration:none;
text-align:center;
box-shadow:var(--shadow-m);
}
.serviceanfrage .knopf--verweis:hover{
background:var(--red-dark);
transform:translateY(-1px);
}
/* Schmaler Schirm: der Knopf nimmt die volle Breite und darf die Beschriftung
umbrechen – sonst schiebt „Zum Armstark Zubehörshop" samt Pfeil die Fläche
über den Rand hinaus. */
@media (max-width:521px){
.serviceanfrage .verweis-knopf{
padding:var(--s4);
align-items:stretch;
}
.serviceanfrage .knopf--verweis{
width:100%;
padding-left:var(--s4);
padding-right:var(--s4);
}
}
/* ============================================================================
§12 ERFOLGS-SCHIRM (Kapitel 5.10 – Bestätigung nach dem Absenden)
============================================================================ */
.serviceanfrage .erfolg{
max-width:var(--max-form);
margin:0 auto;
text-align:center;
background:var(--white);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-m);
padding:var(--s8) var(--s5);
}
.serviceanfrage .erfolg__symbol{
width:64px;height:64px;
margin:0 auto var(--s4);
border-radius:50%;
background:var(--ok-bg);
color:var(--ok);
display:grid;
place-items:center;
}
.serviceanfrage .erfolg__symbol svg{
width:34px;height:34px;
}
.serviceanfrage .erfolg__titel{
font-size:var(--fs-h2);
font-weight:700;
color:var(--ink);
margin:0 0 var(--s3);
}
.serviceanfrage .erfolg__text{
margin:0 auto;
max-width:46ch;
font-size:16px;
color:var(--grey);
}
/* ============================================================================
§13 AKTIONSLEISTE / SCHALTFLÄCHEN (Kapitel 5.9)
"Zurück" links, "Absenden" rechts und breit: der Primärknopf gewinnt über
Fläche und Farbe. Auf Mobil wird die Leiste unten fixiert (Sticky), damit der
Absende-Knopf nicht drei Bildschirme entfernt ist.
============================================================================ */
.serviceanfrage .aktionsleiste{
display:flex;
align-items:center;
gap:var(--s3);
width:100%;
max-width:var(--max-form);
margin-top:var(--s6);
padding-top:var(--s5);
border-top:1px solid var(--grey-mid);
}
.serviceanfrage .knopf{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--s2);
min-height:var(--ff-control);
padding:14px 28px;
border-radius:var(--pill);
border:2px solid transparent;
font:inherit;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:background var(--dur-fast), border-color var(--dur-fast),
transform var(--dur-fast), box-shadow var(--dur-fast);
}
.serviceanfrage .knopf svg{ width:20px;height:20px; }
.serviceanfrage .knopf--sekundaer{
order:1;
flex:none;
background:transparent;
color:var(--ink);
border-color:var(--border-ui);
}
.serviceanfrage .knopf--sekundaer:hover{
border-color:var(--ink);
}
.serviceanfrage .knopf--primaer{
order:2;
flex:1;
background:var(--red);
color:var(--white);
box-shadow:0 6px 18px rgba(188,34,34,.26);
}
.serviceanfrage .knopf--primaer:hover{
background:var(--red-dark);
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(188,34,34,.32);
}
.serviceanfrage .knopf--primaer:disabled,
.serviceanfrage .knopf--primaer[disabled]{
background:var(--grey-mid);
color:var(--grey);
box-shadow:none;
transform:none;
cursor:not-allowed;
}
/* Ladezustand am Absende-Knopf: Text ausblenden, Spinner zeigen, sperren.
Ohne Rückmeldung klickt man beim Datei-Upload zweimal → Doppel-Tickets. */
.serviceanfrage .knopf--laedt{
color:transparent !important;
pointer-events:none;
position:relative;
}
.serviceanfrage .knopf--laedt::after{
content:"";
position:absolute;
width:20px;height:20px;
border:2.5px solid rgba(255,255,255,.5);
border-top-color:var(--white);
border-radius:50%;
animation:serviceanfrage-drehen .7s linear infinite;
}
@keyframes serviceanfrage-drehen{
to{ transform:rotate(360deg); }
}
/* ============================================================================
§14 RESPONSIVE (Kapitel 10 – Umbruchpunkte 901px und 521px)
============================================================================ */
/* ---- ab 901px abwärts: Anliegen 2 Spalten, Produkte 3 Spalten ---- */
@media (max-width:901px){
.serviceanfrage .anliegen-auswahl__raster{
grid-template-columns:repeat(2, 1fr);
}
.serviceanfrage .produkt-auswahl{
grid-template-columns:repeat(3, 1fr);
}
}
/* ---- ab 521px abwärts: 1 Spalte; Anliegen-Kachel waagerecht ---- */
@media (max-width:521px){
.serviceanfrage{
--ff-field-gap:28px; /* mitgezogen, siehe oben */
--ff-group-gap:var(--s6);
}
.serviceanfrage .anliegen-auswahl__raster{
grid-template-columns:1fr;
}
.serviceanfrage .produkt-auswahl{
grid-template-columns:repeat(2, 1fr);
}
/* Chips untereinander, jeder in voller Breite (Wunsch Schultheiß nach dem
Mobiltest vom 25.09.2026). Gilt für alle Chip-Gruppen. */
.serviceanfrage .chips{
grid-template-columns:1fr;
}
/* Kachel waagerecht: Bild/Icon links, Text rechts. */
.serviceanfrage .anliegen-kachel{
flex-direction:row;
align-items:stretch;
}
.serviceanfrage .anliegen-kachel__bild{
flex:none;
width:120px;
aspect-ratio:1 / 1;
}
.serviceanfrage .anliegen-kachel__inhalt{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
padding:var(--s4);
}
}
/* ---- Mobil: Absendeleiste unten fixieren ---- */
@media (max-width:720px){
.serviceanfrage .aktionsleiste{
flex-wrap:wrap;
}
.serviceanfrage .aktionsleiste--haftend{
position:fixed;
inset:auto 0 0 0;
z-index:50;
max-width:none;
margin:0;
padding:var(--s3) var(--s4);
background:var(--white);
border-top:1px solid var(--grey-mid);
box-shadow:0 -6px 24px rgba(26,26,26,.10);
}
/* Damit die fixierte Leiste den Seitenfuß nicht verdeckt. */
body:has(.serviceanfrage .aktionsleiste--haftend){
padding-bottom:104px;
}
}
/* ============================================================================
Platz im Theme-Grid (gemessen 22.09.2026)
----------------------------------------------------------------------------
EINZIGE Regel dieses Stylesheets, die außerhalb von .serviceanfrage greift -
sie muss es, weil sie den Wrapper adressiert, den das Form-Framework um
unseren Container legt.
Befund: Das Theme rendert Formularfelder in ein CSS-Grid mit 12 Spalten
(.field__wrap.col-wrapper, gemessen 12 x 77,58px). Der Wrapper unseres
Elements trägt zwar .col-12, bekommt aber grid-column: auto - er belegt also
EINE Spalte statt zwölf. Ergebnis: das Kachelraster war 78px breit, drei
Spalten a 15px. Das Stylesheet war geladen und griff korrekt, der Platz fehlte.
Mit grid-column: 1 / -1 nimmt der Wrapper die volle Breite, das Raster stellt
sich auf seine 1020px (--max-tiles) ein.
Der Selektor adressiert das direkte Grid-Kind: es trägt col-12, col-sm-12 usw.,
aber KEINE Klasse .col - ein Selektor darauf greift ins Leere (Fehlversuch
22.09.2026). :has() greift nur, wenn unser Container wirklich darin liegt - fremde
Formulare des Themes bleiben unberührt.
========================================================================== */
.field__wrap > *:has(.serviceanfrage){
grid-column: 1 / -1;
}
/* Die Überschrift des Inhaltselements steht in einem NEBEN unserem
Container, gehört also dem Seitenlayout und nicht uns. Sie ist deshalb über
die volle Spaltenbreite gesetzt (gemessen 1360px), während unser Block auf
--max-tiles begrenzt und zentriert ist - die Überschrift stand dadurch 304px
weiter links als die Kacheln. Gleiche Breite und gleiche Zentrierung bringen
beide in eine Flucht. Greift nur, wo unser Container daneben liegt. */
/* ===========================================================================
PFLICHTFELDER: STERN AN DER PFLICHT, KEIN "(optional)"
---------------------------------------------------------------------------
Das theme hängt "(optional)" bedingungslos an JEDE Beschriftung
(Templates/Forms/Base/Partials/Field/Field.html) und blendet es nur bei
[required] per CSS wieder aus. Das ergab einen Mischzustand: die meisten
Felder trugen gar keinen Zusatz, genau eine Gruppe ein Sternchen, und eine
Legende gab es nirgends - ein Sternchen ohne Erklärung in einem Formular,
in dem sonst keines vorkommt.
Entscheidung Schultheiß, 23.09.2026: Stern an der Pflicht, "(optional)"
entfällt vollständig.
Der Selektor folgt dem Aufbau des themes: das Feld steht VOR
.input-background, die Beschriftung darin.
=========================================================================== */
/* ACHTUNG, gemessen am 23.09.2026: .serviceanfrage taugt hier NICHT als Anker.
Das
wird je Baustein einzeln ausgegeben (jedes
Adapter-Partial setzt eines), die Felder des themes liegen als GESCHWISTER
daneben - nicht darin. Regeln unter .serviceanfrage erreichen sie deshalb
prinzipiell nie. Der engste echte gemeinsame Rahmen ist das Formular selbst;
die Präfix-Form ist nötig, weil TYPO3 die UID anhängt (…Neu-22973). */
form[id^="ArmstarkServiceanfrageNeu"] .optional { display: none !important; }
form[id^="ArmstarkServiceanfrageNeu"] .form-group .input :is(input, select, textarea)[required] + .input-background .control-label::after {
content: " *";
color: var(--red);
font-weight: 700;
}
/* Unsere eigenen Gruppen (Kacheln, Chips) bringen ihre Beschriftung als