/*
 * Dearpiece – Server-Seiten im Markendesign (pageShell in server.js), Regeln in docs/branding/design-regeln.md,
 * Abschnitte „Inhaltsseiten“ und „Interne Seiten“. Baut auf site.css auf (Farben, Inter, Kopfzeile, Knöpfe).
 * Kundenseiten (Mails abbestellen, Anlass, Entwurf, Rechtstexte): Lesebreite 720. Verwaltung (Klasse shell-admin): volle Breite 1240.
 */
.shell-main{padding-top:var(--s6); padding-bottom:var(--s8)} .shell:not(.shell-admin) .shell-main>*{max-width:720px}
.shell-admin .site-head .wrap, .shell-admin .shell-main{max-width:1240px}
.shell-main h1{font-size:clamp(30px,3.6vw,40px); line-height:1.1; letter-spacing:-.03em; margin:0 0 var(--s5)}
.shell-main h2{font-size:clamp(22px,2.4vw,28px); line-height:1.2; letter-spacing:-.02em; margin:var(--s7) 0 var(--s4)}
.shell-main h3{font-size:19px; margin:var(--s5) 0 var(--s2)}
.shell-main p, .shell-main li{line-height:1.6}
.shell-main small, .shell-main .muted{color:var(--ink-soft)}
.shell-main code{font-size:.88em; background:var(--wall); padding:1px 5px; border-radius:4px}
.shell-main img{max-width:100%; height:auto; border-radius:var(--r-img); box-shadow:var(--shadow)}
.shell-main hr{border:0; border-top:1px solid var(--line); margin:var(--s6) 0}
.shell-main details{border-top:1px solid var(--line); padding:var(--s3) 0} .shell-main summary{cursor:pointer; font-weight:600}
/* Aufklapper als Text mit ▾/▴ (Regel 43) */
.shell-main summary{list-style:none} .shell-main summary::-webkit-details-marker{display:none} .shell-main summary::after{content:" ▾"; color:var(--ink-soft)} .shell-main details[open]>summary::after{content:" ▴"}

/* Tabellen: Kopf auf Fläche Wall, Zeilen mit Linie, scrollen am Handy in ihrem Kasten */
.shell-main table{border-collapse:collapse; width:100%; font-size:15px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; margin:var(--s4) 0 var(--s5)}
.shell-main th, .shell-main td{text-align:left; vertical-align:top; padding:10px var(--s3); border-top:1px solid var(--line); font-variant-numeric:tabular-nums}
.shell-main thead th, .shell-main tr:first-child th{background:var(--wall); font-weight:600; border-top:0}
.shell-main .tbl table{border:0; margin:0; border-radius:0}
@media (max-width:760px){ .shell-admin .shell-main table{display:block; overflow-x:auto; white-space:nowrap} }

/* Formulare und Knöpfe: Zweitknopf-Stil, Violett nur über .btn-primary */
.shell-main button, .shell-main input[type=submit]{display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 var(--s4); border-radius:var(--r-ctrl); border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer}
.shell-main button:hover, .shell-main input[type=submit]:hover{border-color:var(--ink)}
.shell-main button.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff} .shell-main button.btn-primary:hover{background:var(--accent-hover)}
.shell-main input[type=text], .shell-main input[type=email], .shell-main input[type=password], .shell-main input[type=date], .shell-main input[type=number], .shell-main select, .shell-main textarea{min-height:40px; padding:8px var(--s3); border:1.5px solid var(--line-strong); border-radius:var(--r-ctrl); background:var(--paper); color:var(--ink); font:inherit; font-size:15px}
.shell-main input:focus-visible, .shell-main select:focus-visible, .shell-main textarea:focus-visible, .shell-main button:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.shell-main form{margin:var(--s2) 0}
@media (pointer:coarse){ .shell-main button, .shell-main input[type=submit]{min-height:44px} }

/* Bausteine der bisherigen Seiten */
.shell-main dl{display:grid; grid-template-columns:max-content 1fr; gap:6px var(--s4)} .shell-main dt{color:var(--ink-soft)} .shell-main dd{margin:0}
.shell-main .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--s4)}
.shell-main .card{display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s2); font-size:14px; color:var(--ink); text-decoration:none}
.shell-main .card:hover{border-color:var(--line-strong)} .shell-main .card img{aspect-ratio:2/3; object-fit:cover; width:100%; box-shadow:none}
.shell-main .row{display:flex; gap:var(--s4); flex-wrap:wrap; margin:var(--s4) 0}
.shell-nav a{white-space:nowrap}
.shell-main td details{border:0; padding:0}
.shell-kunde{padding:var(--s6) 0 var(--s7)} .shell-kunde>*{max-width:720px} .shell-kunde h1{margin-top:var(--s3)} .shell-kunde .lead{margin-bottom:var(--s5)}
.shell-kunde li{margin-bottom:var(--s2)} .shell-kunde ul{padding-left:var(--s5)}
.entwurf-seite{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:var(--s6); align-items:start} .entwurf-seite img{width:100%; height:auto} @media (max-width:640px){ .entwurf-seite{grid-template-columns:1fr} } .shell-kunde .entwurf-seite{max-width:none}
.shell-kunde .btn+.btn{margin-left:var(--s2)} @media (max-width:640px){ .shell-kunde .btn{width:100%} .shell-kunde .btn+.btn{margin:var(--s2) 0 0} }
.shell-admin td button, .shell-admin td input[type=submit]{white-space:nowrap; margin:0 0 var(--s2)} .shell-admin td:first-child{white-space:nowrap} .shell-main th, .shell-main td{padding:var(--s3)} .shell-main input[type=datetime-local]{min-height:40px; padding:8px var(--s3); border:1.5px solid var(--line-strong); border-radius:var(--r-ctrl); background:var(--paper); color:var(--ink); font:inherit; font-size:15px}