/* CSS Design System for Dachdecker-Flächenrechner */

/* Reset & Fonts */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root {
  /* Color Palette - Roof Tile Orange & Slate Gray */
  --hue-primary: 18; /* Terracotta Orange */
  --hue-secondary: 215; /* Slate Blue/Gray */
  
  --primary-color: hsl(var(--hue-primary), 90%, 58%);
  --primary-hover: hsl(var(--hue-primary), 95%, 48%);
  --primary-glow: hsla(var(--hue-primary), 90%, 58%, 0.15);
  
  --success-color: hsl(142, 70%, 45%);
  --info-color: hsl(200, 80%, 45%);
  
  --transition-speed: 0.3s;
  --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius-lg: 8px;
  --border-radius-md: 8px;
  --border-radius-sm: 8px;
}

/* Theme variables */
[data-theme="dark"] {
  --bg-app: hsl(var(--hue-secondary), 25%, 8%);
  --bg-glass: rgba(18, 24, 37, 0.65);
  --bg-glass-hover: rgba(24, 32, 50, 0.75);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-active: hsla(var(--hue-primary), 90%, 58%, 0.4);
  --text-main: hsl(0, 0%, 93%);
  --text-muted: hsl(var(--hue-secondary), 15%, 65%);
  --text-inverse: hsl(var(--hue-secondary), 25%, 8%);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --glow-opacity: 0.45;
  --math-bg: rgba(0, 0, 0, 0.25);
  --sidebar-active-bg: hsla(var(--hue-primary), 90%, 58%, 0.12);
  --badge-bg: hsla(var(--hue-primary), 90%, 58%, 0.15);
  --badge-text: hsl(var(--hue-primary), 100%, 75%);
}

[data-theme="light"] {
  --bg-app: hsl(var(--hue-secondary), 20%, 95%);
  --bg-glass: rgba(255, 255, 255, 0.75);
  --bg-glass-hover: rgba(255, 255, 255, 0.85);
  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-active: hsla(var(--hue-primary), 90%, 58%, 0.5);
  --text-main: hsl(var(--hue-secondary), 35%, 15%);
  --text-muted: hsl(var(--hue-secondary), 15%, 45%);
  --text-inverse: hsl(0, 0%, 98%);
  --shadow-color: rgba(0, 0, 0, 0.05);
  --glow-opacity: 0.2;
  --math-bg: rgba(255, 255, 255, 0.5);
  --sidebar-active-bg: hsla(var(--hue-primary), 90%, 58%, 0.08);
  --badge-bg: hsla(var(--hue-primary), 90%, 58%, 0.1);
  --badge-text: hsl(var(--hue-primary), 85%, 45%);
}

body {
  background-color: var(--bg-app);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--transition-speed) var(--transition-bezier),
              color var(--transition-speed) var(--transition-bezier);
}

.glow-bg {
  position: fixed;
  width: 56vw;
  height: 56vw;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: var(--glow-opacity);
  transition: opacity var(--transition-speed);
}

.glow-orange {
  top: -10%;
  right: -10%;
  background: radial-gradient(circle, hsla(var(--hue-primary), 90%, 58%, 0.3) 0%, transparent 70%);
}

.glow-slate {
  bottom: -10%;
  left: -10%;
  background: radial-gradient(circle, hsla(var(--hue-secondary), 50%, 50%, 0.25) 0%, transparent 70%);
}

/* Layout Container */
.app-container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 1.5rem;
}

/* Glassmorphism Panel Base */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 32px 0 var(--shadow-color);
  transition: background var(--transition-speed) var(--transition-bezier),
              border-color var(--transition-speed) var(--transition-bezier),
              box-shadow var(--transition-speed) var(--transition-bezier);
}

.glass-panel:hover {
  background: var(--bg-glass-hover);
}

/* Header Styles */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-icon {
  background: var(--primary-color);
  color: var(--text-inverse);
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px var(--primary-glow);
}

.logo-text h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
}

.logo-text h1 .highlight {
  color: var(--primary-color);
  margin-left: 2px;
}

.logo-text p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: scale(1.05);
}

/* Theme Switcher Toggle */
.sun-icon { display: none; }
.moon-icon { display: block; }
[data-theme="light"] .sun-icon { display: block; }
[data-theme="light"] .moon-icon { display: none; }

/* Main Layout Grid */
.main-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Sidebar Styling */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-section {
  padding: 0.5rem 0.25rem;
}

.sidebar-section h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

.category-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.1);
  padding: 4px;
  border-radius: var(--border-radius-sm);
  margin-bottom: 0.5rem;
}

.cat-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 0;
  border-radius: calc(var(--border-radius-sm) - 2px);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.cat-tab.active, .cat-tab:hover {
  background: var(--bg-glass);
  color: var(--text-main);
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* Navigation items */
.roof-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.group-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 700;
  padding-left: 0.75rem;
  margin-bottom: 0.25rem;
}

.roof-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s var(--transition-bezier);
  min-height: 46px;
}

.roof-menu-item:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-color);
  padding-left: 16px;
}

.roof-menu-item.active {
  color: var(--primary-color);
  background: var(--sidebar-active-bg);
  border-color: var(--border-color-active);
  font-weight: 600;
  box-shadow: inset 0 0 10px rgba(224, 90, 54, 0.05);
}

.roof-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  background: rgba(0,0,0,0.15);
  color: var(--text-muted);
  transition: all 0.2s;
}

.roof-menu-item.active .roof-icon {
  background: var(--primary-color);
  color: var(--text-inverse);
}

/* Dashboard Layout */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Top Information Card */
.roof-info-card {
  padding: 1.5rem 2rem;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.info-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#roof-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.5;
}

.roof-quick-stat {
  text-align: right;
  min-width: 150px;
}

.stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.1;
  text-shadow: 0 4px 20px var(--primary-glow);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Playground Grid */
.playground-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* Panel Header styling */
.panel-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-header h3 i {
  color: var(--primary-color);
  width: 18px;
  height: 18px;
}

.flex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hint-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Inputs Form Layout */
.panel-inputs {
  grid-column: 1;
}

.calc-form {
  padding: 1.5rem;
}

.inputs-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Custom Input Groups */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-label-row label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.input-val-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-color);
  background: var(--badge-bg);
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
}

.input-control-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Range Slider Styling */
.input-control-row input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  outline: none;
  transition: background 0.3s;
}

.input-control-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: 2px solid var(--bg-app);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s, background-color 0.2s;
}

.input-control-row input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: var(--primary-hover);
}

.input-control-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: 2px solid var(--bg-app);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s, background-color 0.2s;
}

.input-control-row input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
  background: var(--primary-hover);
}

/* Visualizer Canvas */
.panel-visualizer {
  grid-column: 2;
  display: flex;
  flex-direction: column;
}

.visualizer-container {
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
}

#svg-sketch {
  max-height: 320px;
}

/* SVG Line and Text Styling */
.svg-outline {
  fill: none;
  stroke: var(--text-main);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.svg-fill-primary {
  fill: hsla(var(--hue-primary), 90%, 58%, 0.12);
  stroke: var(--primary-color);
  stroke-width: 2.5;
  transition: all 0.3s;
}

.svg-fill-secondary {
  fill: hsla(var(--hue-secondary), 25%, 50%, 0.1);
  stroke: var(--text-muted);
  stroke-width: 1.5;
}

.svg-dimension-line {
  stroke: var(--primary-color);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.svg-dimension-text {
  fill: var(--primary-color);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-anchor: middle;
}

.svg-label {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
}

/* Highlight input-correlated svg elements on hover */
.svg-highlightable {
  cursor: pointer;
}

.svg-highlightable:hover {
  stroke-width: 4px;
  filter: drop-shadow(0 0 4px var(--primary-color));
}

/* Mathematics Section */
.panel-math {
  grid-column: 1;
}

.math-container {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.formula-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--math-bg);
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
}

.formula-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.formula-math {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
  overflow-wrap: anywhere;
}

.calculation-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.step-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 1rem;
  border-left: 2px solid var(--border-color);
}

.step-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.step-math {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.step-math span.math-res {
  color: var(--primary-color);
  font-weight: 700;
}

/* Theory & Tips section */
.panel-theory {
  grid-column: 2;
}

.theory-container {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.theory-list,
.theory-definition {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.theory-list dt,
.theory-definition dt {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-color);
}

.theory-list dd,
.theory-definition dd {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: 0;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.practice-tip-box {
  background: hsla(142, 70%, 45%, 0.08);
  border: 1px solid hsla(142, 70%, 45%, 0.2);
  color: hsl(142, 70%, 45%);
  padding: 1rem;
  border-radius: var(--border-radius-md);
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

[data-theme="dark"] .practice-tip-box {
  color: hsl(142, 80%, 75%);
}

.practice-tip-box i {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Responsive Styling */
@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: var(--bg-glass);
    padding: 1rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
  }
  
  .sidebar-section {
    width: 100%;
    margin-bottom: 0;
  }
  
  .roof-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .nav-group {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .group-title {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .roof-menu-item {
    width: calc(33.333% - 8px);
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .app-container {
    padding: 0.75rem;
  }

  .app-header {
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }

  .header-logo {
    align-items: flex-start;
  }

  .logo-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .logo-text h1 {
    font-size: 1.05rem;
  }

  .logo-text p {
    font-size: 0.72rem;
  }
  
  .playground-grid {
    grid-template-columns: 1fr;
  }
  
  .panel-inputs, .panel-visualizer, .panel-math, .panel-theory {
    grid-column: 1;
  }
  
  .roof-menu-item {
    width: calc(50% - 4px);
  }
  
  .info-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .roof-quick-stat {
    text-align: left;
  }

  .stat-value {
    font-size: 1.85rem;
  }

  .flex-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .visualizer-container {
    min-height: 240px;
    padding: 0.75rem;
  }

  .math-container,
  .theory-container,
  .calc-form {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .roof-menu-item {
    width: 100%;
  }
  
  .category-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .input-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .roof-info-card {
    padding: 1rem;
  }

  .panel-header {
    padding: 1rem;
  }
}

/* ===================================
   Zufallsaufgaben - Satteldach
   =================================== */

.random-value-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--math-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.random-value-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.random-value-number {
  min-width: 90px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--primary-color);
  background: var(--badge-bg);
  padding: 0.45rem 0.75rem;
  border-radius: var(--border-radius-sm);
}

.next-task-wrapper {
  margin-top: 0.5rem;
}

.next-task-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  border: none;
  border-radius: var(--border-radius-md);
  background: var(--primary-color);
  color: var(--text-inverse);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 18px var(--primary-glow);
  transition:
    transform 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;
}

.next-task-button:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--primary-glow);
}

.next-task-button:active {
  transform: translateY(0);
}

.next-task-button svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 480px) {
  .random-value-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .random-value-number {
    width: 100%;
    text-align: left;
  }
}


/* ===================================
   Übungsmodus - Lösung zunächst verborgen
   =================================== */

.solution-hidden {
  position: relative;
}

.solution-hidden > * {
  visibility: hidden;
}

.solution-hidden::after {
  content: "Lösung noch verborgen";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  background: var(--math-bg);
  border-radius: inherit;
}

.task-button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.solution-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--border-color-active);
  border-radius: var(--border-radius-md);
  background: var(--badge-bg);
  color: var(--primary-color);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s,
    background-color 0.2s,
    border-color 0.2s;
}

.solution-button:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  background: var(--sidebar-active-bg);
}

.solution-button:active {
  transform: translateY(0);
}

.solution-button svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 600px) {
  .task-button-grid {
    grid-template-columns: 1fr;
  }
}


/* ===================================
   Layout-Anpassung: Skizze vor Dimensionen
   =================================== */

.playground-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  align-items: start;
}

/* Interaktive Skizze zuerst und größer */
.panel-visualizer {
  grid-column: 1;
  grid-row: 1;
}

.visualizer-container {
  min-height: 430px;
  padding: 1rem;
}

#svg-sketch {
  width: 100%;
  height: 100%;
  min-height: 390px;
  max-height: 500px;
}

/* Dimensionen rechts daneben kompakter */
.panel-inputs {
  grid-column: 2;
  grid-row: 1;
}

.panel-inputs .panel-header {
  padding: 0.85rem 1rem;
}

.panel-inputs .panel-header h3 {
  font-size: 0.9rem;
}

.panel-inputs .calc-form {
  padding: 0.9rem 1rem 1rem;
}

.panel-inputs .inputs-container {
  gap: 0.65rem;
}

.panel-inputs .random-value-card {
  padding: 0.55rem 0.7rem;
  gap: 0.75rem;
}

.panel-inputs .random-value-label {
  font-size: 0.78rem;
  line-height: 1.25;
}

.panel-inputs .random-value-number {
  min-width: 78px;
  font-size: 0.88rem;
  padding: 0.35rem 0.55rem;
}

.panel-inputs .task-button-grid {
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.panel-inputs .solution-button,
.panel-inputs .next-task-button {
  padding: 0.7rem 0.8rem;
  font-size: 0.8rem;
}

/* Rechenweg und Theorie bleiben darunter */
.panel-math {
  grid-column: 1;
  grid-row: 2;
}

.panel-theory {
  grid-column: 2;
  grid-row: 2;
}

/* Tablet */
@media (max-width: 1024px) {
  .playground-grid {
    grid-template-columns: 1fr;
  }

  .panel-visualizer,
  .panel-inputs,
  .panel-math,
  .panel-theory {
    grid-column: 1;
  }

  .panel-visualizer { grid-row: auto; }
  .panel-inputs { grid-row: auto; }
  .panel-math { grid-row: auto; }
  .panel-theory { grid-row: auto; }

  .visualizer-container {
    min-height: 380px;
  }

  #svg-sketch {
    min-height: 340px;
  }
}

/* Smartphone */
@media (max-width: 600px) {
  .visualizer-container {
    min-height: 300px;
    padding: 0.5rem;
  }

  #svg-sketch {
    min-height: 270px;
  }

  .panel-inputs .random-value-card {
    flex-direction: row;
    align-items: center;
  }

  .panel-inputs .random-value-number {
    width: auto;
    text-align: center;
  }
}

/* Dreitafelprojektion: Linien und Maßketten */
#svg-sketch { --projection-blue: #57aaff; }
[data-theme="light"] #svg-sketch { --projection-blue: #176bb5; }
.projection-outline, .projection-rafter {
  fill: none; stroke: var(--text-main); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.projection-rafter { stroke: var(--primary-color); }
.projection-dimension, .projection-extension {
  fill: none; stroke: var(--projection-blue); stroke-width: 1.2;
}
.projection-extension { opacity: 0.7; stroke-width: 0.9; }
.projection-dimension-text {
  fill: var(--projection-blue); font-size: 19px; font-weight: 600;
  text-anchor: middle;
}
.projection-heading { fill: var(--text-main); font-size: 22px; font-weight: 600; text-anchor: middle; }
/* Keep the enlarged sketch readable, including its three views. */
#svg-sketch[viewBox="0 0 960 770"] { max-height: none; height: auto; aspect-ratio: 960 / 770; }
.dashboard { min-width: 0; }

.task-highlight{margin-top:12px;padding:16px 18px;border:1px solid rgba(255,107,53,.28);border-left:4px solid #ff6b35;border-radius:12px;background:rgba(255,107,53,.055);max-width:920px}
.task-highlight-title{color:#ff6b35;font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.task-highlight-text{color:var(--text-main,#1f2937);font-size:1.08rem;line-height:1.5;font-weight:650}
.task-highlight-note{margin-top:9px;color:var(--text-muted,#667085);font-size:.94rem;line-height:1.4}

/* Schornstein: deutlich sichtbare Aufgabenstellung im Kopfbereich */
#roof-desc.task-description-highlight {
  white-space: pre-line;
  max-width: 900px;
  margin-top: 12px;
  padding: 14px 18px;
  border-left: 4px solid #ff6b35;
  border-radius: 10px;
  background: rgba(255, 107, 53, 0.055);
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 550;
}

.fd-roof-outline{fill:none;stroke:var(--text-main);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.fd-dim,.fd-ext{fill:none;stroke:var(--projection-blue);stroke-width:1.25}
.fd-dim-text,.fd-view-title{fill:var(--projection-blue);font-size:19px;font-weight:700;text-anchor:middle}
.fd-view-title{text-anchor:start;font-size:21px}
/* Attika-Anschluss – technische Darstellung */
.at-outer,.at-inner{fill:none;stroke:var(--text-main);stroke-width:2.4;stroke-linejoin:round}.at-section{fill:rgba(100,116,139,.13);stroke:var(--text-main);stroke-width:2.3}.at-dim{stroke:var(--projection-blue);stroke-width:1.35;fill:none}.at-dim-text{fill:var(--projection-blue);font-size:18px;font-weight:700;text-anchor:middle}.at-title{fill:var(--text-main);font-size:20px;font-weight:700}.at-subtitle{fill:var(--text-main);font-size:15px;font-weight:600}.at-roof-label{fill:var(--text-main);font-size:17px;font-weight:600;text-anchor:middle}.at-roof-label.small{font-size:13px}.at-divider{stroke:var(--border-color);stroke-width:1.2}
.attika-task-hero{margin:14px 0 4px;max-width:560px}.attika-task-hero svg{width:100%;height:auto;display:block;background:transparent}.attika-task-hero .hero-slab,.attika-task-hero .hero-wall,.attika-task-hero .hero-roof{fill:none;stroke:var(--text-main);stroke-width:5;stroke-linejoin:round}.attika-task-hero .hero-cap{stroke:var(--projection-blue);stroke-width:5}.attika-task-hero text{fill:var(--text-main);font:600 20px 'Outfit',sans-serif}.attika-task-hero .hero-note{fill:var(--text-muted);font-size:15px;font-weight:400}


/* Attika – Kopfbereich: Aufgabenstellung | Anschauungsgrafik | Lösungsstatus */
.info-header.attika-info-layout{
  display:grid;
  grid-template-columns:minmax(420px,1fr) 250px 175px;
  align-items:center;
  gap:24px;
}
.info-header.attika-info-layout > div:first-child{min-width:0}
.info-header.attika-info-layout #roof-desc{
  max-width:none;
  margin-top:18px;
  padding:18px 22px;
  border-left:5px solid #ff6b35;
  border-radius:14px;
  background:rgba(255,107,53,.055);
  color:var(--text-main);
  font-size:1.05rem;
  line-height:1.45;
  font-weight:650;
}
.attika-task-hero{
  margin:0;
  width:250px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.attika-task-hero img{
  display:block;
  width:100%;
  max-height:150px;
  object-fit:contain;
}
.info-header.attika-info-layout .roof-quick-stat{
  min-width:165px;
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.info-header.attika-info-layout .roof-quick-stat.solution-hidden::after{
  font-size:.95rem;
  line-height:1.25;
}
@media(max-width:1100px){
  .info-header.attika-info-layout{grid-template-columns:1fr 210px}
  .info-header.attika-info-layout .roof-quick-stat{grid-column:2}
  .attika-task-hero{width:210px}
}
@media(max-width:760px){
  .info-header.attika-info-layout{grid-template-columns:1fr}
  .attika-task-hero{width:220px;justify-self:center}
  .info-header.attika-info-layout .roof-quick-stat{grid-column:auto;width:100%}
}

/* Nur Satteldach: aufklappbare Rechenhilfe */
.step-guide{
  margin-top:16px;
  border:1px solid rgba(255,107,53,.28);
  border-radius:12px;
  background:rgba(255,107,53,.045);
  overflow:hidden;
}
.step-guide summary{
  cursor:pointer;
  padding:13px 15px;
  font-weight:750;
  color:var(--text-main);
}
.step-guide ol{
  margin:0;
  padding:4px 24px 10px 38px;
  line-height:1.5;
}
.step-guide li{margin:7px 0}
.step-guide-note{
  margin:4px 14px 14px;
  padding:11px 12px;
  border-left:4px solid #ff6b35;
  border-radius:7px;
  background:rgba(255,107,53,.07);
}


/* Satteldach: didaktischer Ablauf
   Fachbegriffe -> Anleitung -> Lösung anzeigen -> Rechenweg */
.playground-grid.satteldach-help-flow .panel-theory{
  grid-column:1 / -1;
  grid-row:2;
}

.playground-grid.satteldach-help-flow .panel-math{
  grid-column:1 / -1;
  grid-row:3;
}

.satteldach-solution-action{
  margin-top:2px;
  padding-top:4px;
}

.satteldach-solution-action .solution-button{
  width:100%;
  justify-content:center;
  padding:0.85rem 1rem;
  font-size:0.9rem;
}

/* Beim Satteldach bleibt im Aufgabenfeld nur "Nächste Aufgabe". */
.playground-grid.satteldach-help-flow .panel-inputs .task-button-grid{
  grid-template-columns:1fr;
}

@media (max-width:1024px){
  .playground-grid.satteldach-help-flow .panel-theory,
  .playground-grid.satteldach-help-flow .panel-math{
    grid-column:1;
    grid-row:auto;
  }
}

/* Satteldach: Fachbegriffe/Hilfen vor dem Lösungsfeld */
.playground-grid.satteldach-help-flow .panel-theory{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
}
.playground-grid.satteldach-help-flow .panel-math{
  grid-column:1 / -1 !important;
  grid-row:3 !important;
}
@media (max-width:1024px){
  .playground-grid.satteldach-help-flow{
    display:flex !important;
    flex-direction:column !important;
  }
  .playground-grid.satteldach-help-flow .panel-sketch{order:1}
  .playground-grid.satteldach-help-flow .panel-inputs{order:2}
  .playground-grid.satteldach-help-flow .panel-theory{order:3}
  .playground-grid.satteldach-help-flow .panel-math{order:4}
}


/* =========================================================
   SATTELDACH – freigegebenes Layout aus der Vorschau
   Desktop:
   Skizze | Aufgabe & Dimensionen
   Fachbegriffe & Hilfen
   Lösung / Rechenweg

   Mobil:
   Aufgabe & Dimensionen
   Interaktive Skizze
   Fachbegriffe & Hilfen
   Lösung / Rechenweg
   ========================================================= */

.playground-grid.satteldach-help-flow{
  display:grid !important;
}

/* Desktop: obere Reihe unverändert nebeneinander */
.playground-grid.satteldach-help-flow .panel-sketch{
  grid-column:1 !important;
  grid-row:1 !important;
}
.playground-grid.satteldach-help-flow .panel-inputs{
  grid-column:2 !important;
  grid-row:1 !important;
}

/* Hilfen direkt nach der Aufgaben-/Skizzenzeile */
.playground-grid.satteldach-help-flow .panel-theory{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
}

/* Lösung erst ganz unten */
.playground-grid.satteldach-help-flow .panel-math{
  grid-column:1 / -1 !important;
  grid-row:3 !important;
}

/* Lösung anzeigen sitzt unter Schritt-für-Schritt */
.satteldach-solution-action{
  margin-top:14px !important;
}
.satteldach-solution-action .solution-button{
  width:100% !important;
  justify-content:center !important;
}

/* Mobil / Tablet: exakt die freigegebene Reihenfolge */
@media (max-width:1024px){
  .playground-grid.satteldach-help-flow{
    display:flex !important;
    flex-direction:column !important;
  }

  .playground-grid.satteldach-help-flow .panel-inputs{
    order:1 !important;
  }
  .playground-grid.satteldach-help-flow .panel-sketch{
    order:2 !important;
  }
  .playground-grid.satteldach-help-flow .panel-theory{
    order:3 !important;
  }
  .playground-grid.satteldach-help-flow .panel-math{
    order:4 !important;
  }
}

/* Auf sehr kleinen Displays Karten sauber über volle Breite */
@media (max-width:640px){
  .playground-grid.satteldach-help-flow > *{
    width:100% !important;
    min-width:0 !important;
  }
}


/* Pult- und Walmdach verwenden ab jetzt exakt denselben freigegebenen
   Aufgaben-/Hilfen-/Lösungsablauf wie das Satteldach. */

/* Flachdach nutzt denselben freigegebenen Aufgaben-/Hilfen-/Lösungsablauf.
   Die 3D-Grafik im Kopf ist nur ein statisches Anschauungsbeispiel. */


/* =========================================================
   ALLE AUFGABEN – einheitliche Reihenfolge
   Fachbegriffe & Hilfen
   -> Schritt für Schritt zur Lösung
   -> EIN Lösungsbutton
   -> Lösungs-/Rechenwegfeld
   ========================================================= */

.satteldach-solution-action{
  margin-top:18px !important;
  padding-top:0 !important;
}
.satteldach-solution-action .solution-button{
  width:100% !important;
  justify-content:center !important;
}

/* Der Rechenweg steht immer NACH dem gesamten Hilfebereich. */
.playground-grid.satteldach-help-flow .panel-theory{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
}
.playground-grid.satteldach-help-flow .panel-math{
  grid-column:1 / -1 !important;
  grid-row:3 !important;
}

/* Mobil: Dimensionen -> Skizze -> Hilfen/Anleitung/Button -> Lösung */
@media (max-width:1024px){
  .playground-grid.satteldach-help-flow{
    display:flex !important;
    flex-direction:column !important;
  }
  .playground-grid.satteldach-help-flow .panel-inputs{order:1 !important;}
  .playground-grid.satteldach-help-flow .panel-sketch{order:2 !important;}
  .playground-grid.satteldach-help-flow .panel-theory{order:3 !important;}
  .playground-grid.satteldach-help-flow .panel-math{order:4 !important;}
}

/* Flachdach 2 */
#fd2-host{padding-bottom:32px}.fd2-head{display:grid;grid-template-columns:1.45fr .55fr;gap:24px;background:#fff;border-radius:12px;padding:26px;margin-bottom:22px}
.fd2-head>div>span{display:inline-block;background:#fff0ea;color:#e95720;font-weight:800;padding:7px 13px;border-radius:999px}.fd2-head h1{margin:8px 0 16px;color:#172234;font-size:34px}
.fd2-task{border-left:5px solid #ff6935;background:#fff5f1;padding:18px 22px;border-radius:12px;font-size:19px;font-weight:700;line-height:1.45}
.fd2-layer-title{font-weight:800;margin-bottom:8px}.fd2-layers{border:1px solid #dde3e9;padding:9px}.fd2-layers>div{padding:5px 8px;font-size:11px;border-left:4px solid #26313f}
.fd2-layers .seal{background:#222;color:#fff}.fd2-layers .equal{background:#bbb}.fd2-layers .ins{background:#fff0a6;padding-top:20px;padding-bottom:20px}.fd2-layers .vapor{background:#d6d6d6}.fd2-layers .primer{color:#e11;border-left-color:#e11;border-bottom:2px dashed #e11}.fd2-layers .concrete{padding-top:17px;padding-bottom:17px;background:#f3f3f3}
.fd2-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px}.fd2-card{background:#fff;border-radius:12px;margin-bottom:22px;overflow:hidden}.fd2-card>h3{margin:0;padding:17px 20px;border-bottom:1px solid #e4e8ed;color:#172234}.fd2-body{padding:20px}
.fd2-svg{width:100%;display:block}.fd2-list>div{display:flex;justify-content:space-between;gap:10px;padding:9px;border-bottom:1px solid #edf0f3}.fd2-list b{color:#f25f2c;background:#fff0ea;padding:3px 8px;border-radius:8px;white-space:nowrap}
.fd2-next,.fd2-sol{width:100%;margin-top:17px;padding:14px;border-radius:9px;font-size:16px;font-weight:800;cursor:pointer}.fd2-next{border:0;background:#ff6533;color:#fff}.fd2-sol{border:1px solid #ff9b78;background:#fff4ef;color:#f05b2a}
.fd2-help strong{color:#f05b2a}.fd2-help details{margin-top:18px;border:1px solid #ffb398;background:#fffaf8;border-radius:10px;padding:15px}.fd2-help summary{font-weight:800;cursor:pointer;color:#172234}.fd2-help li{margin:8px 0}.fd2-hidden{min-height:190px;display:flex;align-items:center;justify-content:center;color:#65748a;font-size:19px;font-weight:700}.fd2-work{line-height:1.65}.fd2-work strong{color:#f05b2a}
@media(max-width:900px){.fd2-head,.fd2-grid{grid-template-columns:1fr}.fd2-values{order:1}.fd2-sketch{order:2}.fd2-head h1{font-size:29px}.fd2-task{font-size:17px}}


/* Grundlagen – hierarchische Themen-Navigation */
.foundation-group{margin:2px 0}
.foundation-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.72rem .9rem;border:0;border-radius:10px;background:transparent;color:var(--text-main);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.foundation-group-toggle:hover{background:var(--sidebar-active-bg)}
.foundation-group-toggle svg{width:18px;height:18px;transition:transform .2s ease}
.foundation-group-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.foundation-group-content{margin:0 0 5px 13px;padding-left:12px;border-left:1px solid var(--border-color)}
.foundation-group-content[hidden]{display:none!important}
.foundation-group-content .foundation-nav{padding-left:.8rem}
.foundation-group-content .foundation-nav .roof-name{font-size:.95em}
.foundation-group-content .foundation-coming{opacity:.45;cursor:not-allowed}
@media(max-width:1024px){.foundation-group-content{margin-left:10px;padding-left:10px}.foundation-group-toggle{padding:.78rem .8rem}}

/* Theme-Schalter: ein Symbol, ohne Icon-Überlagerungen. */
#theme-toggle::before, #theme-toggle::after { content:none !important; display:none !important; }
#theme-toggle > :not(.theme-symbol) { display:none !important; }
#theme-toggle .theme-symbol { display:flex !important; align-items:center; justify-content:center; width:100%; height:100%; font-family:Arial,sans-serif; font-size:29px; line-height:1; color:#fbbf24; }
#theme-toggle .theme-symbol::before { content:'☀'; }
html[data-theme="light"] #theme-toggle .theme-symbol { color:#253247; }
html[data-theme="light"] #theme-toggle .theme-symbol::before { content:'☾'; }

/* Test: ruhiger Nachtmodus für Startseite, Grundlagen und Flächen. */
html[data-theme="dark"] #home-training-intro,
html[data-theme="dark"] #home-steps-guide,
html[data-theme="dark"] .home-training-intro {
  background:#151d29 !important; color:#e9eef6 !important;
  border:1px solid #303b4c !important; border-left:4px solid #f97316 !important;
}
html[data-theme="dark"] #home-training-intro :is(h2,li,p,strong),
html[data-theme="dark"] #home-steps-guide :is(h2,li,p,strong) {color:#e9eef6 !important;}
html[data-theme="dark"] .home-training-intro ul {color:#cbd5e1 !important;}
html[data-theme="dark"] .learning-section .learning-section-content .foundation-nav,
html[data-theme="dark"] .learning-section .learning-section-content .foundation-group-toggle {color:#e9eef6;}
html[data-theme="dark"] .learning-section .learning-section-content .foundation-nav:hover,
html[data-theme="dark"] .learning-section .learning-section-content .foundation-group-toggle:hover {background:#202b3b !important;}
html[data-theme="dark"] .learning-section .learning-section-content .foundation-nav:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible {outline:2px solid #fb923c !important;outline-offset:3px;}
html[data-theme="dark"] .areas-explain-card,
html[data-theme="dark"] .areas-exercise-card {background:#131b27 !important;color:#e9eef6 !important;border-color:#303b4c !important;}
html[data-theme="dark"] .areas-formula-box,
html[data-theme="dark"] .areas-note,
html[data-theme="dark"] .areas-answer-box {background:#1a2432 !important;color:#e9eef6 !important;border:1px solid #344154 !important;}
html[data-theme="dark"] .areas-formula-box {border-left:3px solid #f97316 !important;}
html[data-theme="dark"] .areas-explain-card :is(h2,h3,p,strong),
html[data-theme="dark"] .areas-exercise-card :is(h2,h3,p,strong),
html[data-theme="dark"] .areas-formula-box :is(h2,h3,p,strong) {color:#e9eef6;}
html[data-theme="dark"] .areas-result {color:#fb923c !important;}
html[data-theme="dark"] .areas-answer-box input {background:#111923 !important;color:#f1f5f9 !important;border:1px solid #617087 !important;}
html[data-theme="dark"] .areas-answer-buttons button:not(:disabled):first-child {background:#f97316 !important;color:#fff !important;border-color:#f97316 !important;}
html[data-theme="dark"] .areas-answer-buttons button:disabled {background:transparent !important;color:#94a3b8 !important;border:1px solid #526071 !important;opacity:.65 !important;}
html[data-theme="dark"] .areas-answer-buttons button:not(:disabled):hover {filter:brightness(1.12);}
html[data-theme="dark"] .dashboard .glass-panel {border-color:#303b4c;}
html[data-theme="dark"] .dashboard .glass-panel :is(input,button):focus-visible {outline:2px solid #fb923c;outline-offset:2px;}

/* Satteldach – Eingabe und Kontrolle des Dachflächen-Endergebnisses */
.satteldach-answer-check {margin:22px 0 16px;padding:20px;border:1px solid var(--border-color);border-left:4px solid #f97316;border-radius:14px;background:var(--bg-glass);color:var(--text-main)}
.satteldach-answer-check h3{margin:0 0 10px;font-size:1.2rem}
.satteldach-answer-check p{margin:0 0 16px;line-height:1.55;color:var(--text-muted)}
.satteldach-answer-check label{display:block;margin-bottom:8px;font-weight:700}
.satteldach-answer-line{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.satteldach-answer-line input{width:min(100%,240px);padding:12px 14px;border:1px solid #718096;border-radius:9px;background:var(--bg-app);color:var(--text-main);font:inherit}
.satteldach-answer-line input:focus{outline:2px solid #f97316;outline-offset:2px}
.satteldach-check-button{background:#f97316;color:white;border:0;border-radius:9px;padding:12px 20px;font:inherit;font-weight:700;cursor:pointer}
.satteldach-check-button:hover{background:#ea580c}
.satteldach-answer-feedback{margin:14px 0 0!important;font-weight:600;color:var(--text-main)!important}
.satteldach-answer-feedback[data-result="correct"]{color:#22c55e!important}
.satteldach-answer-feedback[data-result="incorrect"],.satteldach-answer-feedback[data-result="error"]{color:#fb923c!important}
html[data-theme="dark"] .satteldach-answer-check{background:#151d29;border-color:#344154;border-left-color:#f97316}

/* Satteldach-Test: Aufgabe, Skizze, Dimensionen, Ergebnis, Lösung, Anleitung, Fachbegriffe. */
.playground-grid.satteldach-learning-order {
  display:flex !important;flex-direction:column !important;align-items:stretch !important;
}
.satteldach-learning-order > .panel-visualizer {order:1;width:100% !important;}
.satteldach-learning-order > .panel-inputs {order:2;width:100% !important;}
.satteldach-learning-order > .satteldach-answer-check {order:3;width:100%;box-sizing:border-box;}
.satteldach-learning-order > .panel-theory {order:4;width:100% !important;display:flex;flex-direction:column;}
.satteldach-learning-order > .panel-math {order:5;width:100% !important;}
.satteldach-learning-order > .panel-theory > .theory-container {display:contents;}
.satteldach-learning-order > .panel-theory .satteldach-solution-action {order:-20;}
.satteldach-learning-order > .panel-theory .step-guide {order:-10;}
.satteldach-learning-order > .panel-theory > .panel-header {order:1;}
.satteldach-learning-order > .panel-theory > .theory-container > :not(.satteldach-solution-action):not(.step-guide) {order:2;}

/* Satteldach: eigenständiger Hilfeblock nach der Ergebniskontrolle. */
.satteldach-learning-order > .satteldach-help-actions {
  order:4;width:100%;box-sizing:border-box;display:flex;flex-direction:column;
  gap:16px;padding:18px;border-radius:16px;
}
.satteldach-learning-order > .satteldach-help-actions > .step-guide {order:1;margin:0;width:100%;box-sizing:border-box;}
.satteldach-learning-order > .satteldach-help-actions > .satteldach-solution-action {order:2;margin:0;width:100%;box-sizing:border-box;}
.satteldach-learning-order > .panel-theory {order:5;}
.satteldach-learning-order > .panel-math {order:6;}
.satteldach-learning-order > .panel-theory > .theory-container {display:block;}
.satteldach-learning-order > .panel-theory > .panel-header {order:initial;}
.satteldach-learning-order > .panel-theory > .theory-container > :not(.satteldach-solution-action):not(.step-guide) {order:initial;}

/* Korrektur: Hilfe ausschließlich per CSS sortieren; keine DOM-Verschiebung. */
.playground-grid.satteldach-learning-order > .panel-theory {
  display:contents !important;
}
.satteldach-learning-order > .panel-theory > .theory-container {
  display:contents !important;
}
.satteldach-learning-order > .panel-theory .step-guide {
  order:4 !important; width:100%;box-sizing:border-box;
  margin:0 !important;
}
.satteldach-learning-order > .panel-theory .satteldach-solution-action {
  order:5 !important;width:100%;box-sizing:border-box;
  margin:0 !important;
}
.satteldach-learning-order > .panel-theory > .panel-header {
  order:6 !important;width:100%;box-sizing:border-box;
}
.satteldach-learning-order > .panel-theory > .theory-container > :not(.step-guide):not(.satteldach-solution-action) {
  order:7 !important;width:100%;box-sizing:border-box;
}
.satteldach-learning-order > .panel-math {order:8 !important;}
.satteldach-learning-order .step-guide,
.satteldach-learning-order .satteldach-solution-action {
  background:var(--bg-glass);border-radius:14px;
}
.satteldach-learning-order .satteldach-help-actions {display:none !important;}

/* Satteldach: keinen leeren Lösungsplatzhalter anzeigen.
   Nach „Lösung anzeigen“ erscheint der Rechenweg direkt unter dem Knopf. */
.satteldach-learning-order > .panel-math {display:none !important;}
.satteldach-learning-order.satteldach-solution-open > .panel-math {
  display:block !important;order:6 !important;width:100% !important;
  min-height:0 !important;height:auto !important;
}
.satteldach-learning-order > .panel-theory > .panel-header {order:7 !important;}
.satteldach-learning-order > .panel-theory > .theory-container > :not(.step-guide):not(.satteldach-solution-action) {order:8 !important;}
.satteldach-learning-order > .panel-theory .satteldach-solution-action {order:5 !important;}
.satteldach-learning-order > .panel-theory .step-guide {order:4 !important;}

/* Satteldach: keine Ergebnisvorschau unter dem Dachbild; mobile Leerfläche entfernen. */
.roof-info-card.satteldach-hide-quick-stat .roof-quick-stat {display:none !important;}
.roof-info-card.satteldach-hide-quick-stat .info-header {min-height:0 !important;}

/* Dachdecker-Trainer-Signet dezent vergroessern. */
.app-header .logo-icon { width: 54px; height: 54px; flex: 0 0 54px; }
@media (max-width: 600px) { .app-header .logo-icon { width: 46px; height: 46px; flex: 0 0 46px; } }

/* Startseite: Titel und Untertitel wie in der bestaetigten Testversion. */
.app-header .logo-text h1 { font-size: clamp(1.6rem, 3.3vw, 1.85rem); font-weight: 800; line-height: 1.2; }
@media (max-width: 600px) { .app-header .logo-text h1 { font-size: clamp(1.35rem, 4.7vw, 1.65rem); } }
.app-header .logo-text p { font-size: 1rem; line-height: 1.45; }
@media (max-width: 600px) { .app-header .logo-text p { font-size: 1rem; } }

/* Grundlagen-Uebersicht: kompakter Titel, ohne andere Lernseiten zu veraendern. */
main.dashboard [data-grundlagen-overview-title] { font-size: 24px !important; line-height: 1.25 !important; overflow-wrap: normal; }
@media (max-width: 600px) { main.dashboard [data-grundlagen-overview-title] { font-size: 20px !important; line-height: 1.3 !important; } }

/* Mobile Navigation: Desktop-Navigation bleibt unverändert. */
#mobile-menu-toggle,#mobile-back-overview{display:none}
@media(max-width:1024px){
 .app-header .header-controls{display:flex;align-items:center;gap:8px}
 #mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-glass);color:var(--text-main);font-size:25px;cursor:pointer}
 .main-layout>.sidebar{display:none!important}
 .main-layout>.sidebar.mobile-nav-open{display:flex!important;grid-row:1;flex-direction:column;align-items:stretch;width:100%;box-sizing:border-box;min-width:0;gap:0}
 .main-layout>.sidebar.mobile-nav-open .sidebar-section{display:none}
 .main-layout>.sidebar.mobile-nav-open #roof-menu{width:100%;box-sizing:border-box;max-height:70vh;overflow-y:auto;overscroll-behavior:contain}
 #mobile-back-overview:not([hidden]){display:inline-flex;align-items:center;align-self:start;justify-self:start;padding:9px 13px;margin:0 0 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-glass);color:var(--text-main);font:inherit;font-size:14px;font-weight:650;cursor:pointer}
}

/* Mobile Bereichsuebersicht ohne Verlust des Aufgabenstands. */
#mobile-area-overview{display:none}
@media(max-width:1024px){
 main.dashboard.mobile-show-area-overview>*:not(#mobile-area-overview){display:none!important}
 main.dashboard.mobile-show-area-overview>#mobile-area-overview{display:block!important;width:100%;box-sizing:border-box;padding:18px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-glass);color:var(--text-main)}
 #mobile-area-overview h2{margin:0 0 8px;font-size:1.4rem}
 #mobile-area-overview p{margin:0 0 16px;color:var(--text-muted)}
 #mobile-area-overview h3{margin:16px 0 8px;font-size:1rem}
 #mobile-area-overview .mobile-overview-link{display:block;width:100%;text-align:left;margin:7px 0;padding:12px 14px;background:var(--math-bg);color:var(--text-main);border:1px solid var(--border-color);border-radius:10px;font:inherit;cursor:pointer}
 .app-header .header-logo{cursor:pointer}
}

/* Unteraufgaben direkt innerhalb von Einheiten wechseln. */
#mobile-units-subtasks{display:none}
@media(max-width:1024px){
 #mobile-units-subtasks:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px;width:100%}
 #mobile-units-subtasks button{font:inherit;font-size:14px;font-weight:650;padding:11px 8px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-glass);color:var(--text-main);cursor:pointer}
 #mobile-units-subtasks button.active{background:#f97316;color:#fff;border-color:#f97316}
}

/* Reiter für längere Grundlagen-Themen: umbruchfähig und mobil bedienbar. */
@media(max-width:1024px){
 #mobile-units-subtasks:not([hidden]){display:flex;flex-wrap:wrap;gap:8px}
 #mobile-units-subtasks button{flex:1 1 130px;min-width:0;white-space:normal;line-height:1.35}
}

/* Register fuer die zusammengefasste Einheiten-Rubrik */
#units-register-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:5px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:12px}
#units-register-tabs .units-register{flex:1 1 120px;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text-main);font:inherit;font-weight:650;cursor:pointer}
#units-register-tabs .units-register.active{background:var(--math-bg);border-color:var(--border-color);box-shadow:0 1px 4px rgba(0,0,0,.07)}

/* Pythagoras-Register: gleiche Kacheloptik wie die anderen Grundlagenregister */
#pythagoras-correct-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}
#pythagoras-correct-tabs .pyth-correct-tab{min-width:0;min-height:68px;padding:14px 12px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-glass);color:var(--text-main);font:inherit;font-weight:700;line-height:1.35;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
#pythagoras-correct-tabs .pyth-correct-tab.active{background:#f47728;color:white;border-color:#f47728}
@media(max-width:600px){
 #pythagoras-correct-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 16px}
 #pythagoras-correct-tabs .pyth-correct-tab{min-height:44px;padding:10px 8px;border-radius:10px;font-size:14px;line-height:1.25}
 #pythagoras-correct-tabs .pyth-correct-tab:last-child:nth-child(odd){grid-column:1/-1}
}

/* Winkelfunktionen: gleiche kompakte Register wie bei den Grundlagen */
#trig-correct-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 16px}
#trig-correct-tabs .trig-correct-tab{min-width:0;min-height:44px;padding:10px 8px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-glass);color:var(--text-main);font:inherit;font-size:14px;font-weight:700;line-height:1.25;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
#trig-correct-tabs .trig-correct-tab.active{background:#f47728;color:#fff;border-color:#f47728}

/* Scroll-Test: Aufgabenansicht darf beim direkten Zurueckwischen nicht
   durch browserseitiges Scroll-Anchoring nachkorrigiert werden. */
@media (max-width:1024px){
  html,body,main.dashboard,main.dashboard .roof-info-card,
  main.dashboard .playground-grid,
  #mobile-units-subtasks,#units-register-tabs,
  #pythagoras-correct-tabs,#trig-correct-tabs{
    overflow-anchor:none;
  }
  html{scroll-behavior:auto}
}

/* Einheitliches Seitenraster fuer Uebersicht und ALLE Aufgaben.
   Kein negativer Offset, keine absolute Verschiebung. */
@media (min-width:1025px) {
  .app-container { gap:20px; }
  .main-layout { align-items:start; }
  .main-layout > .sidebar > .sidebar-section { display:none; }
}
.main-layout > main.dashboard {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:16px;
  margin-top:0;
  padding-top:0;
  position:static;
  transform:none;
}
.main-layout > main.dashboard > * {
  min-width:0;
  max-width:100%;
  flex-shrink:0;
  box-sizing:border-box;
}
.main-layout > main.dashboard > :first-child {
  margin-top:0;
}
@media (max-width:1024px) {
  .main-layout > main.dashboard {
    margin-top:0;
    padding-top:0;
  }
}

/* Pythagoras: doppelte Unteraufgaben-Navigation nur auf Desktop ausblenden.
   Die Navigation links und die mobile Registerauswahl bleiben erhalten. */
@media (min-width:1025px) {
  #pythagoras-correct-tabs {
    display:none!important;
  }
}

/* Winkelfunktionen: doppelte Unteraufgaben-Register nur auf Desktop ausblenden.
   Mobile Auswahl bleibt unverändert erhalten. */
@media (min-width:1025px) {
  #trig-correct-tabs {
    display:none!important;
  }
}

/* Basiswissen-Uebersicht: gleicher Hinweisstil wie in den Aufgaben. */
main.dashboard .basiswissen-overview-hint {
  display:block;
  width:fit-content;
  max-width:100%;
  box-sizing:border-box;
  margin:14px 0 0;
  padding:14px 18px;
  border-left:4px solid #ff6933;
  border-radius:10px;
  background:rgba(255,105,51,.065);
  color:var(--text-main);
  font-weight:600;
  line-height:1.5;
}
@media (max-width:600px){
  main.dashboard .basiswissen-overview-hint{
    width:100%;
    padding:14px 16px;
  }
}

/* Test: Hamburger-Navigation auf der mobilen Startseite zuverlässig sichtbar. */
@media (max-width:1024px) {
 body.mobile-navigation-visible .main-layout { display:grid!important; grid-template-columns:minmax(0,1fr)!important; }
 body.mobile-navigation-visible .main-layout > .sidebar.mobile-nav-open {
   display:flex!important; visibility:visible!important; opacity:1!important;
   position:relative!important; z-index:50!important; height:auto!important;
   max-height:75dvh; overflow-y:auto; grid-column:1/-1!important;
   margin:0 0 12px!important; padding:12px!important;
   border:1px solid var(--border-color); border-radius:14px;
   background:var(--bg-glass); box-sizing:border-box;
 }
 body.mobile-navigation-visible .main-layout > .sidebar.mobile-nav-open #roof-menu {
   display:block!important; visibility:visible!important; opacity:1!important;
 }
 body.mobile-navigation-visible #mobile-menu-toggle { position:relative; z-index:51; }
}

/* Mobile Navigation als festes Drawer-Menue statt im Seitenraster. */
#mobile-nav-backdrop{display:none}
@media(max-width:1024px){
 body.mobile-navigation-visible #mobile-nav-backdrop:not([hidden]){display:block!important;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9997}
 body.mobile-navigation-visible .main-layout>.sidebar.mobile-nav-open{
   display:flex!important;position:fixed!important;top:72px!important;left:12px!important;
   right:12px!important;bottom:auto!important;width:auto!important;
   max-height:calc(100dvh - 88px)!important;overflow-y:auto!important;
   margin:0!important;z-index:9998!important;background:var(--bg-main,#17202d)!important;
   box-shadow:0 18px 45px rgba(0,0,0,.28)!important;
 }
 body.mobile-navigation-visible #mobile-menu-toggle{position:relative;z-index:9999!important}
}

/* Drawer direkt am body: unabhängig von ausgeblendeten Startseiten-Containern. */
@media(max-width:1024px){
 body > .sidebar.mobile-nav-open{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  visibility:visible!important;opacity:1!important;
  position:fixed!important;top:76px!important;left:12px!important;right:12px!important;
  width:auto!important;max-width:none!important;max-height:calc(100dvh - 92px)!important;
  overflow-y:auto!important;margin:0!important;padding:14px!important;
  z-index:9998!important;box-sizing:border-box!important;
  background:var(--bg-main,#17202d)!important;border:1px solid var(--border-color)!important;
  border-radius:14px!important;box-shadow:0 18px 45px rgba(0,0,0,.3)!important;
 }
 body > .sidebar.mobile-nav-open .sidebar-section{display:none!important}
 body > .sidebar.mobile-nav-open #roof-menu{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;max-height:none!important;overflow:visible!important}
}

/* Eigenständiges mobiles Navigationspanel: nicht von der Sidebar abhängig. */
#mobile-navigation-drawer{display:none}
@media(max-width:1024px){
 body #mobile-navigation-drawer:not([hidden]){
   display:block!important;position:fixed!important;top:90px!important;
   left:12px!important;right:12px!important;bottom:auto!important;
   z-index:2147483646!important;max-height:calc(100dvh - 110px)!important;
   overflow:auto!important;padding:16px!important;box-sizing:border-box!important;
   border-radius:16px!important;border:1px solid var(--border-color)!important;
   background:#fff!important;color:#192436!important;
   box-shadow:0 16px 45px rgba(0,0,0,.35)!important;
 }
 html[data-theme="dark"] body #mobile-navigation-drawer:not([hidden]){background:#192436!important;color:#f5f7fa!important}
 #mobile-navigation-drawer .roof-nav{display:block!important;visibility:visible!important;width:100%!important;max-height:none!important;overflow:visible!important}
 #mobile-navigation-drawer .learning-section,#mobile-navigation-drawer .foundation-group,#mobile-navigation-drawer .practice-group{display:block!important;visibility:visible!important}
 #mobile-navigation-drawer button{max-width:100%;color:inherit}
}

/* Mobile Praxisaufgaben: eigenständige Unteraufgabenansicht wie beim Basiswissen. */
#mobile-practice-subtasks[hidden]{display:none!important}
@media(max-width:1024px){
 main.dashboard.mobile-practice-subtasks-active>*:not(#mobile-practice-subtasks):not(#mobile-back-overview){display:none!important}
 main.dashboard.mobile-practice-subtasks-active #mobile-back-overview{display:inline-flex!important;margin-bottom:18px}
 #mobile-practice-subtasks{display:block!important;box-sizing:border-box;width:100%;padding:26px 22px;
  border:1px solid var(--border-color,#dce2e8);border-radius:22px;
  background:var(--bg-glass,#fff);color:var(--text-primary,#192436)}
 #mobile-practice-subtasks .practice-subtasks-kicker{color:#e86c35;font-size:.84rem;font-weight:800;letter-spacing:.07em;margin-bottom:12px}
 #mobile-practice-subtasks h2{font-size:clamp(1.65rem,5vw,2.3rem);line-height:1.2;margin:0 0 12px;font-weight:800}
 #mobile-practice-subtasks p{margin:0 0 22px;line-height:1.5;color:var(--text-secondary,#586474)}
 #mobile-practice-subtasks .practice-subtasks-options{display:grid;gap:12px}
 #mobile-practice-subtasks .practice-subtask-button{display:block;width:100%;text-align:left;
  padding:20px 18px;border:1px solid var(--border-color,#dce2e8);border-radius:15px;
  background:var(--bg-glass,#fff);color:inherit;font:inherit;font-weight:750;font-size:1.1rem;cursor:pointer}
 #mobile-practice-subtasks .practice-subtask-button:active{border-color:#f97316;background:rgba(249,115,22,.08)}
}

/* Praxisaufgaben: Register und Aufgabenansicht analog zu Basiswissen. */
#mobile-practice-tabs[hidden]{display:none!important}
@media(max-width:1024px){
 #mobile-practice-tabs:not([hidden]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:18px 0 22px}
 #mobile-practice-tabs button{padding:15px 9px;min-height:52px;border:1px solid var(--border-color,#e2e5e9);border-radius:12px;background:var(--bg-glass,#fff);color:var(--text-primary,#192436);font:inherit;font-weight:750;cursor:pointer}
 #mobile-practice-tabs button.active{background:#ee7b32!important;color:#fff!important;border-color:#ee7b32!important}
}