\documentclass[a4paper,12pt,parskip=half]{scrartcl}

% ============================================
% SPRACHE & ZEICHENSATZ
% ============================================
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[ngerman]{babel}

% ============================================
% PROFESSIONELLE SCHRIFTEN (Serifenlos)
% ============================================
\usepackage{FiraSans}                 % Fira Sans für Text UND Überschriften
\renewcommand*\familydefault{\sfdefault}  % Als Standardschrift setzen
\usepackage[scaled=0.9]{FiraMono}     % Fira Mono für Code
\usepackage{microtype}

% ============================================
% KEIN ERZWUNGENER VERTIKALER AUSGLEICH
% ============================================
\raggedbottom

% ============================================
% ABSTAND VOR/NACH ÜBERSCHRIFTEN ANPASSEN
% ============================================
% Hier kannst du die Abstände vor und nach section, subsection, subsubsection einstellen
\RedeclareSectionCommand[
    beforeskip=0.5cm,    % <-- ABSTAND VOR \section (höhere Zahl = mehr Platz)
    afterskip=0.3cm      % <-- ABSTAND NACH \section (höhere Zahl = mehr Platz)
]{section}

\RedeclareSectionCommand[
    beforeskip=0.3cm,    % <-- ABSTAND VOR \subsection
    afterskip=0.2cm      % <-- ABSTAND NACH \subsection
]{subsection}

\RedeclareSectionCommand[
    beforeskip=0.2cm,    % <-- ABSTAND VOR \subsubsection
    afterskip=0.1cm      % <-- ABSTAND NACH \subsubsection
]{subsubsection}

% ============================================
% SEITENLAYOUT (Ränder oben/unten/links/rechts)
% ============================================
\usepackage[
    a4paper,
    left=2.5cm,
    right=2.5cm,
    top=0cm,           % <-- ABSTAND OBEN (vom Blattrand zum Text)
    bottom=1cm,        % <-- ABSTAND UNTEN (vom Blattrand zum Text)
    includehead,
    includefoot
]{geometry}

\usepackage{amsmath}

% ============================================
% FARBEN
% ============================================
\usepackage{xcolor}

\definecolor{codegreen}{rgb}{0,0.6,0}
\definecolor{codegray}{rgb}{0.5,0.5,0.5}
\definecolor{codepurple}{rgb}{0.58,0,0.82}
\definecolor{backcolour}{rgb}{0.95,0.95,0.92}
\definecolor{darkblue}{rgb}{0,0,0.6}
\definecolor{orange}{rgb}{1,0.5,0}
\definecolor{red}{rgb}{0.8,0,0}
\definecolor{blue}{rgb}{0,0,0.8}

% ============================================
% CODE-LISTINGS
% ============================================
\usepackage{listings}
\usepackage{textcomp}

\lstset{
    backgroundcolor=\color{backcolour},
    basicstyle=\ttfamily\footnotesize,
    breakatwhitespace=false,
    breaklines=true,
    captionpos=b,
    keepspaces=true,
    numbers=left,
    numbersep=5pt,
    showspaces=false,
    showstringspaces=false,
    showtabs=false,
    tabsize=2,
    frame=single,
    framerule=0.5pt,
    rulecolor=\color{codegray},
    xleftmargin=1em,
    xrightmargin=1em,
    % UMLAUTE IN LISTINGS
    literate=
        {Ö}{{\"O}}1
        {Ä}{{\"A}}1
        {Ü}{{\"U}}1
        {ß}{{\ss}}1
        {ö}{{\"o}}1
        {ä}{{\"a}}1
        {ü}{{\"u}}1
}

% ============================================
% SPRACHDEFINITIONEN MIT FARBEN
% ============================================
\lstdefinelanguage{CSharp}{
    keywords={abstract,as,async,await,base,bool,break,byte,case,catch,char,checked,class,const,continue,decimal,default,delegate,do,double,else,enum,event,explicit,extern,false,finally,fixed,float,for,foreach,goto,if,implicit,in,int,interface,internal,is,lock,long,namespace,new,null,object,operator,out,override,params,private,protected,public,readonly,record,ref,return,sbyte,sealed,short,sizeof,stackalloc,static,string,struct,switch,this,throw,true,try,typeof,uint,ulong,unchecked,unsafe,ushort,using,var,virtual,void,volatile,while,init,required,global},
    keywordstyle=\color{blue}\bfseries,
    sensitive=true,
    morecomment=[l]{//},
    morecomment=[s]{/*}{*/},
    commentstyle=\color{codegreen}\itshape,
    string=[b]",
    stringstyle=\color{codepurple},
    morestring=[b]'
}

\lstdefinelanguage{TypeScript}{
    keywords={break,case,catch,class,const,continue,debugger,default,delete,do,else,enum,export,extends,false,finally,for,function,if,import,in,instanceof,new,null,return,super,switch,this,throw,true,try,typeof,var,void,while,with,as,implements,interface,let,package,private,protected,public,static,yield,async,await,from,of,type,extends,string,number,boolean,any,undefined},
    keywordstyle=\color{blue}\bfseries,
    sensitive=true,
    morecomment=[l]{//},
    morecomment=[s]{/*}{*/},
    commentstyle=\color{codegreen}\itshape,
    string=[b]',
    stringstyle=\color{codepurple},
    morestring=[b]"
}

\lstdefinelanguage{JavaScript}{
    keywords={break,case,catch,class,const,continue,debugger,default,delete,do,else,export,extends,false,finally,for,function,if,import,in,instanceof,new,null,return,super,switch,this,throw,true,try,typeof,var,void,while,with,let,static,yield,async,await,from,of},
    keywordstyle=\color{blue}\bfseries,
    sensitive=true,
    morecomment=[l]{//},
    morecomment=[s]{/*}{*/},
    commentstyle=\color{codegreen}\itshape,
    string=[b]',
    stringstyle=\color{codepurple},
    morestring=[b]"
}

\lstdefinelanguage{JSON}{
    showstringspaces=false,
    string=[b]",
    stringstyle=\color{codepurple},
    comment=[l]{//},
    moredelim=[l][\color{blue}\bfseries]{"},
    moredelim=[l][\color{blue}\bfseries]{:}
}

\lstdefinelanguage{YAML}{
    keywords={true,false,null},
    keywordstyle=\color{blue}\bfseries,
    sensitive=true,
    comment=[l]{\#},
    commentstyle=\color{codegreen}\itshape,
    string=[b]",
    stringstyle=\color{codepurple},
    moredelim=[l][\color{orange}]{\&},
    moredelim=[l][\color{orange}]{*},
    moredelim=**[il][\color{blue}]{:}
}

\lstdefinelanguage{Bash}{
    keywords={cd,mkdir,git,pnpm,dotnet,nano,tree,rm,cat,docker,ls,head,which,node,npm,alias,echo,export},
    keywordstyle=\color{blue}\bfseries,
    sensitive=false,
    morecomment=[l]{\#},
    commentstyle=\color{codegreen}\itshape,
    string=[b]",
    stringstyle=\color{codepurple}
}

\lstdefinelanguage{Dockerfile}{
    keywords={FROM,ENV,ARG,COPY,ADD,RUN,CMD,ENTRYPOINT,EXPOSE,VOLUME,WORKDIR,USER,LABEL,MAINTAINER,STOPSIGNAL,HEALTHCHECK,SHELL},
    keywordstyle=\color{blue}\bfseries,
    sensitive=true,
    comment=[l]{\#},
    commentstyle=\color{codegreen}\itshape,
    string=[b]",
    stringstyle=\color{codepurple}
}

\lstdefinelanguage{CSS}{
    keywords={color,background,background-color,margin,padding,font-family,font-weight,font-size,line-height,text-decoration,text-align,border,border-bottom,border-radius,display,flex,justify-content,align-items,box-sizing,cursor,width,max-width,height,list-style,outline,white-space,word-wrap,overflow,position,top,left,right,bottom,transform,transition,animation,opacity},
    keywordstyle=\color{blue}\bfseries,
    sensitive=true,
    morecomment=[l]{//},
    morecomment=[s]{/*}{*/},
    commentstyle=\color{codegreen}\itshape,
    string=[b]",
    stringstyle=\color{codepurple},
    moredelim=[s][\color{orange}]{:}{;},
    alsodigit={-}
}

% ============================================
% HYPERLINKS
% ============================================
\usepackage[
    colorlinks=true,
    linkcolor=darkblue,
    urlcolor=blue
]{hyperref}

% ============================================
% TABELLEN
% ============================================
\usepackage{array}
\usepackage{booktabs}
\usepackage{multirow}

% ============================================
% TITELSEITE
% ============================================
\title{
    \Huge\textbf{Todo App}\\[0.3cm]
    \Large Eine Lern-Anwendung für Softwarearchitektur\\[0.3cm]
    \large Vom Quick \& Dirty zur Clean Architecture
}
\author{Robert Bretz}
\date{\today}

\begin{document}

% ============================================
% TITELSEITE
% ============================================
\maketitle
\thispagestyle{empty}
\clearpage

% ============================================
% INHALTSVERZEICHNIS
% ============================================
\tableofcontents
\thispagestyle{empty}
\clearpage

% ============================================
% KAPITEL EINBINDEN
% ============================================
\input{step_01.tex} 
\input{step_02.tex} 
\input{step_03.tex} 
\input{step_04.tex} 
\input{step_05.tex} 
\input{step_06.tex} 
\input{step_07.tex} 

% Weitere Kapitel folgen hier:
% \input{step_02.tex}
% \input{step_03.tex}
% ...

\end{document}